## 賬號註冊登錄



註冊並登錄CocoRobo賬戶後，可以使用CocoRobo平台的更多功能。

1.單擊界面右上角【登入】按鈕，在彈出的登錄窗口單擊【登入】，或可直接使用Google賬號登入。

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

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

2.進入註冊界面後，輸入電子郵箱、密碼及學校名稱（可不填）後，單擊【註冊】。

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

3.註冊成功之後會自動登入。

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


## 軟件安裝指引



1.打開谷歌Chrome瀏覽器。

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

2.在地址欄輸入x.cocorobo.hk進入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.1 安裝CocoBlockly X Windows版本

   （1）等待下載完成後，在下載位置找到後綴為.exe的安裝包。鼠標左鍵雙擊安裝包。

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

   （2）選擇安裝目標文件夾後，鼠標左鍵單擊安裝，開始安裝。

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

   （3）安裝過程中，安裝程式會自動安裝驅動，按提示安裝即可。

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

   （4）驅動安裝完成後，等待CocoBlockly X Uploader安裝完成，鼠標左鍵點擊【完成】完成安裝。

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

   

5.2 安裝CocoBlockly X Mac版本

   (1)點擊下載Mac安裝包，建議下載至桌面。

   <img src="@/media/开始使用CocoBlockly X/mac安裝1.png" width="650"/>

   (2)雙擊安裝包進行安裝。

   <img src="@/media/开始使用CocoBlockly X/mac安裝2.png" width="200"/>

   (3)根據安裝指示進行操作。點擊【繼續】-【安裝】（建議使用默認路徑）-【輸入帳戶密碼】允許安裝-安裝成功。

   <img src="@/media/开始使用CocoBlockly X/mac安裝3.png" width="850"/>

6.重新回到CocoBlockly X編程界面，檢查編程環境，圖標為綠色框+對號時，表示編程環境無誤。

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

7.如果有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格式的程式文件。（以Mac系統為例）

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

2.**導入**

（1）鼠標左鍵單擊【存儲】，選擇【導入】。

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

（2）在彈出的對話框中選擇之前存儲的路徑，選擇完成後鼠標左鍵單擊【打開】即可打開之前保存的.xml格式的程式文件。（以Mac系統為例）

<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"/>