## 账号注册登录



注册并登录CocoRobo账户后，可以使用可可乐博平台的更多功能。

1. 单击界面右上角【登入】按钮，在弹出的登录窗口单击【注册】，或选择第三方登录，直接使用QQ或微信登录。

<img src="@/media/开始使用CocoBlockly X/账号注册登录（1）.png" width="650"/>

<img src="@/media/开始使用CocoBlockly X/账号注册登录（2）.png" width="650"/>

<img src="@/media/开始使用CocoBlockly X/账号注册登录（3）.png" width="650"/>

2. 进入注册界面后，输入电子邮箱、密码及学校名称（可不填）后，单击【注册】。

<img src="@/media/开始使用CocoBlockly X/账号注册登录（4）.png" width="650"/>

3. 提示注册成功，可可乐博会给该邮箱发送一封激活邮件。

<img src="@/media/开始使用CocoBlockly X/账号注册登录（5）.png" width="650"/>

4. 登录邮箱，在激活邮件中单击【点击进行激活】按键后在弹出的页面中输入注册时使用的邮箱及密码，登录完成后激活成功，注册完成。

<img src="@/media/开始使用CocoBlockly X/账号注册登录（6）.png" width="650"/>

<img src="@/media/开始使用CocoBlockly X/账号注册登录（7）.png" width="650"/>



## 软件安装指引



1. 打开谷歌Chrome浏览器。

   <img src="@/media/开始使用CocoBlockly X/开始使用CocoBlockly X（1）.png" style="zoom:30%;" />

2. 在地址栏输入x.cocorobo.cn进入CocoBlockly X编程平台。

   <img src="@/media/开始使用CocoBlockly X/开始使用CocoBlockly X（2）.png" width="650"/>

3. 进入后，鼠标左键单击下载图标。

   <img src="@/media/开始使用CocoBlockly X/开始使用CocoBlockly X（3）.png" width="650"/>

4. 根据电脑的系统选择下载的版本，建议保存到桌面。

   <img src="@/media/开始使用CocoBlockly X/开始使用CocoBlockly X（4）.png" width="650"/>

5. 等待下载完成后，在下载位置找到后缀为.exe的安装包。鼠标左键双击安装包。

   <img src="@/media/开始使用CocoBlockly X/开始使用CocoBlockly X（5）.png" style="zoom:50%;" />

6. 选择安装目标文件夹后，鼠标左键单击安装开始安装。

   <img src="@/media/开始使用CocoBlockly X/开始使用CocoBlockly X（6）.png" width="650"/>

7. 安装过程中，安装程序会自动安装驱动，按提示安装即可。

   <img src="@/media/开始使用CocoBlockly X/开始使用CocoBlockly X（7）.png" width="650"/>

8. 驱动安装完成后，等待CocoBlockly X Uploader安装完成，鼠标左键点击【完成】完成安装。

   <img src="@/media/开始使用CocoBlockly X/开始使用CocoBlockly X（8）.png" width="650"/>

9. 重新回到CocoBlockly X编程界面，检查编程环境，图标为绿色框+对号时，表示编程环境无误。

   <img src="@/media/开始使用CocoBlockly X/开始使用CocoBlockly X（9）.png" width="650"/>

10. 如果有IoT模块或AI模块，可以使用数据线将模块连接到电脑。电脑会自动识别到连接端口。

   <img src="@/media/开始使用CocoBlockly X/开始使用CocoBlockly X（10）.png" width="650"/>



恭喜你，准备工作已完成，可以开始编程之旅了！



## 编程界面介绍

<img src="@/media/开始使用CocoBlockly X/编程界面介绍（1）.png" width="650"/>

上图中我们将CocoBlockly X编程界面划分为7个区域：

**(1)文档存取区：** 程序项目命名、保存（程序保存为*.xml*格式文件）、删除所有积木及所有积木一键截图。

**(2)模式切换区：** 样例加载、模式切换（图形化模式、代码模式）。

**(3)辅助区：** 学习资料、项目档导入及导出、语言设置、以及用户登入其中，“学习”按钮，可以跳转至EDU或者AIHUB学习平台。

**(4)积木指令区：** 除基础积木以外（由“逻辑”至“串口通讯”），不同模式下拥有不同的扩展积木。

**(5)积木编程区：** 将积木拖入此区域中以进行程序编写。

**(6)Python编程区：** 当用户将积木拖入积木编程区以后，此处将会生成对应Python源代码，支持用户对代码进行编辑、复制、下载及上传，下载后缀为*.py*格式的python文档。

**(7)上传区：** 用户可选择使用有线或者无线上传模式。



## 编程文件存取



通过CocoBlockly X的本地存储功能，可以将积木编程区的积木以*.xml*格式文件或*.png*图片格式保存到本地电脑上。

也可以将本地电脑的*.xml*格式的积木文件导入并还原积木样式至积木编程区。

1. **导出**

（1）鼠标左键单击【文件】，选择【导出】。

   <img src="@/media/开始使用CocoBlockly X/编程文件存取（1）.png" width="650"/>

（2）在弹出的对话框中选择保存文件的路径，选择完成后，重命名文件，鼠标左键单击【保存】即可保存.xml格式的程序文件。

<img src="@/media/开始使用CocoBlockly X/编程文件存取（2）.png" width="650"/>

2. **导入**

（1）鼠标左键单击【文件】，选择【导入】。

<img src="@/media/开始使用CocoBlockly X/编程文件存取（3）.png" width="650"/>

（2）在弹出的对话框中选择之前保存文件的路径，选择完成后鼠标左键单击【打开】即可打开之前保存的.xml格式的程序文件。

<img src="@/media/开始使用CocoBlockly X/编程文件存取（4）.png" width="650"/>

（3）也可以通过直接将.xml格式的程序文件拖拽到CocoBlockly X积木编程区完成程序文件的导入。

<img src="@/media/开始使用CocoBlockly X/编程文件存取（5）.png" width="650"/>

3. 云端存储

（1）鼠标左键单击【文件】，选择【云端存储】。

<img src="@/media/开始使用CocoBlockly X/编程文件存取（6）.png" width="650"/>

（2）如未登录，在弹出的对话框登录注册的账号。

<img src="@/media/开始使用CocoBlockly X/编程文件存取（7）.png" width="650"/>

（3）鼠标左键单击新建云端存储文件，命名并单击【保存】，来保存程序文件到云端。

<img src="@/media/开始使用CocoBlockly X/编程文件存取（8）.png" width="650"/>

（4）从云端加载程序文件，鼠标左键单击文件夹图标打开程序即可。

<img src="@/media/开始使用CocoBlockly X/编程文件存取（9）.png" width="650"/>

## Python源代码



CocoBlockly X的Python源代码区域，支持用户对代码进行编辑、复制、下载及上传，下载后缀为.py格式的python文档。

<img src="@/media/开始使用CocoBlockly X/Python源代码（1）.png" width="650"/>

1. **代码编辑模式开关：** 能够通过此开关开启或关闭Python源代码编辑模式。
2. **复制代码：** 鼠标左键单击此图标能够复制Python源代码区域的Python源代码。
3. **导出代码：** 鼠标左键单击此图标能够导出.py格式的Python源代码文件。
4. **导入代码：** 鼠标左键单击此图标能够导入.py格式的Python源代码文件。



## 串口交互窗



CocoBlockly X的串口交互窗区域，支持用户实现与电子模块的窗口交互，并提供曲线图的数据可视化效果。

<img src="@/media/开始使用CocoBlockly X/串口交互窗（1）.png" width="650"/>

<img src="@/media/开始使用CocoBlockly X/串口交互窗（2）.png" width="650"/>

串口交互窗的温度数据：

<img src="@/media/开始使用CocoBlockly X/串口交互窗（3）.png" width="650"/>