# Play AIoT：AIoT體驗課程
(本課程程式碼網址：https://github.com/ghliaw/Play-AIoT)
## 前言：
物聯網(*Internet of Things*, 簡稱IoT)是近年來興起的一項整合性技術，它統整了持續不斷發展與普及的各領域技術(感測元件+電子電路+嵌入式系統+網路通訊+雲端運算+資訊處理)，使得萬物皆可連上網際網路(Internet)與其它硬體裝置或是應用軟體交換資訊，在人們的創意發揮下，提供各式各樣新型的智慧化服務，例如智慧家庭、智慧農業、智慧製造、智慧城市等等。

<img src="https://hackmd.io/_uploads/B1r6nZ5K6.png" width="500">
<br><br>

物聯網系統的架構與運作方式可以很簡單的用下圖來理解。物聯網包含三大部分：物、網路、運算。「物」有兩項功能：感測(sensing)與致動(actuation)。透過感測技術可以讓「物」產生與其相關的感測資料(例如：溫度、濕度、心跳、血壓、...)，而透過電子電機技術則可讓「物」接受來自外部的信號觸發而做出指定的動作(例如：電燈開關、馬達轉速調整、...)。網路則是「物」與「運算」之間的通道，負責傳輸雙方所產生的資料與訊息。「物」所產生的感測資料透過網路匯集到「運算」端，運算端指的就是依照需求所開發的各式資料處理以及應用服務軟體，透過這些軟體的計算之後，有可能會產生一些決策，必須對特定的「物」進行控制，那麼「運算」端就會發出控制訊息，透過網路傳輸到「物」端，觸發「物」端做出對應的動作。

<img src="https://hackmd.io/_uploads/HkYRFBcKp.png" width="400">
<br><br>

以上這些運作都必須仰賴計算機(computer)的軟硬體技術來達成：在「物」端通常是以運算能力低的微電腦(microcomputer)或微控制器(microcontroller)晶片作為運算核心，以嵌入式系統技術(embedded system)結合感測元件或致動元件，形成感測節點，執行韌體程式來提供上述的資料感測與觸發致動的功能。在「運算」端，則是以運算能力較強的電腦系統(至少是桌機等級實體電腦以上或是雲端伺服器)來運行資料處理與應用服務軟體，實現指定的服務流程。

另一方面，人工智慧(Artificial Intelligence，簡稱AI)是人類運算技術發展上的極致產物。近十多年來，由於人工智慧在技術發展上的突飛猛進以及應用上的逐漸普及，使得人工智慧開始與其它領域互相結合，創造出許多更高效率與更高互動性的先進應用，「人工智慧物聯網」(*Artifical Intelligence of Things*，簡稱*AIoT*)便是其中一例。由於整個物聯網系統的運作中是由「物」端與「運算」端的程式透過網路的資訊交換來驅動，因此人工智慧技術便很順理成章的可以應用到「物」端與「運算」端的程式當中，產生更具智慧的物聯網系統。

一般來說，完整的物聯網體系由三大部分所組成(如下圖)：感知層(*Perception Layer*)、網路層(*Network Layer*)、與應用層(*Application Layer*)，各層分別對應到前述的「物」、「網路」、與「運算」三個角色，各別結合相關的專業技術與產業做橫向整合，以達到該層所需做到的任務，各層之間再做垂直的串聯整合，以完成一個完整的物聯網體系。特別強調的是，近年來發展成熟且成功商業運轉的雲端運算平台技術，在AIoT體系中已扮演重要的角色，提供應用服務完整且方便的開發/佈署/營運的高品質運算環境。

<img src="https://hackmd.io/_uploads/rkwCWB5Kp.png" width=800>

## 課程內容：
本課程將以循序漸進的方式，從感測資料擷取開始，直到完成架設AIoT系統，從實作的過程中體驗AIoT各項技術。過程中會用到的硬體、軟體、以及雲端服務如下：
- **感測節點**：我們將使用「WeMos D1 WiFi Arduino UNO 開發版」結合「DHT11 溫溼度感測模組」作為感測節點(如下圖)。
<img src="https://hackmd.io/_uploads/BkR4M85Kp.jpg" width="400">
<br>
- **USB攝影機**：連接在個人電腦上，擷取影像以供機器學習模型進行辨識。
<img src="https://hackmd.io/_uploads/S1mgNIqF6.png" width="200">
<br>
- **BlocklyDuinoF2(軟體)**：以圖像化堆疊積木型式來開發Arduino程式，適用於對程式語言不熟悉者。本課程的感測節點的韌體程式使用此工具撰寫。安裝與更新步驟請參考吉哥的「[如何安裝BlocklyDuino_F2版本](https://sites.google.com/jes.mlc.edu.tw/ljj/linkit7697/%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E5%90%89%E5%93%A5%E8%87%AA%E8%A3%BD%E7%A9%8D%E6%9C%A8)」一文。

- **好用的文字編輯器-Notepad++**：比Windows記事本強大許多的純文字編輯軟體，本課程用來修改雲端後台程式。可到官網下載安裝：https://notepad-plus-plus.org/downloads/

- **Render.com (雲端平台)**：這是提供網路應用服務(例如網站)的佈建與運行的雲端平台，讓使用者可以直接上傳佈建腳本，以及網路應用服務的程式與網頁，render.com的伺服器便會自動建立虛擬機來佈建與運作，不需要使用者自行維護主機。目前有提供免費的試用方案，因此本課程選擇其做為佈署雲端後台程式的平台。

+ **Node-Red (軟體)**：原本Javascript語言僅限於開發瀏覽器頁面的程式，但Node.js的發明，使得程式員也可以開始用Javascript來撰寫可在電腦上執行的一般程式，使得網站的前台網頁與後台程式的開發都可以統一使用Javascript語言來開發。Node-RED是IBM以Node.js為基礎，開發出來的視覺化IoT開發工具，純粹透過流程圖(flow diagram)的方式工作，所以不需要會 Node.js 也可以透過 Node-RED 完成許多後端才能做的事情。本課程的後台程式即以Node-Red開發完成，但本課程不須在自己的電腦上安裝任何Node-Red軟體，因為我們將直接在Render.com上佈署Node-Red後台程式。

### 任務目標：

我們將建置一個<u>模擬智慧家庭的簡單AIoT系統</u>，有以下功能：
+ 以開發板模擬家裡的感測器與電燈開關，**<u>定時回報溫溼度資料，以及可被遠端遙控開關電燈(LED)</u>**。
+ 有一個後台網站提供<u>智慧家庭網頁</u>，具備以下功能：
+ **<u>即時顯示家裡的溫溼度</u>**
+ **<u>以手動或手勢辨識遙控家中電燈(LED)的開關</u>**

本課程將依序完成以下任務：
+ **任務1：建立感測節點**
+ 感測節點溫溼度擷取，以及內建LED燈號閃爍
+ **任務2：感測節點上網**
+ 透過MQTT協定，感測節點發布溫溼度資料到網際網路，以及從網際網路遙控LED明滅
+ **任務3：建立手勢影像辨識的機器學習模型**
+ 使用Teachable Machine網站，建立對應「開」與「關」手勢影像辨識的機器學習模型，將用於遠端遙控LED明滅
+ **任務4：在雲端平台佈署網站程式**
+ 將物聯網後台程式佈署到Render.com平台
+ 先將程式上傳到Github網站上
+ 再到Render.com網站佈署後台程式
+ **任務5：測試智慧家庭系統成果**
+ 透過瀏覽器連結到後台網站網頁，從頁面中可看到即時溫溼度，並可透過頁面的手動開關或手勢辨識遠端遙控LED明滅。

## <u>任務1：建立感測節點</u>：
1. 使用公-母杜邦線，將DHT11溫溼度感測器連到D1開發板的指定腳位，如下表與下圖： **(務必再三確認，以免接電時燒壞)**

|DHT11|D1開發板|
|:---:|:-----:|
|VCC |3V3 |
|DATA |D0 |
|GND |GND |

<img src="https://hackmd.io/_uploads/r1Iebxnta.png" width="500">

2. 使用USB傳輸線，將D1開發板連到電腦任一USB插槽。然後打開「**<u>裝置管理員</u>**」程式，展開「**<u>連接埠(COM 和 LPT)</u>**」項目，記錄「**<u>USB-SERIAL CH340 (COM*xx*)</u>**」的「**<u>COM*xx*</u>**」(這就是D1開發板在Windows的裝置名稱，稍後會在燒錄韌體程式時用到)。
<img src="https://hackmd.io/_uploads/SJNZBgnFa.png" width="450">

3. 打開瀏覽器，到網址 https://github.com/ghliaw/Play-AIoT 下載本課程的程式壓縮包，下載後解壓縮備用：如下圖，點擊頁面中的「<u>Code</u>」下拉選單，選擇「<u>Download ZIP</u>」，便會下載程式壓縮包，檔名為「<u>Play-AIoT-master.zip</u>」。
<img src="https://hackmd.io/_uploads/B15bKl3K6.png" width="450">
解壓縮後，會產生「<u>Play-AIoT-master</u>」資料夾，裡面有三個程式的子資料夾，如下圖。

4. 啟動「<u>BlocklyDuinoF2</u>」程式編寫軟體：
打開檔案總管，到安裝BlocklyDuinoF2的資料夾中(假設安裝在D槽的BlocklyDuinoF2資料夾)，雙擊「BlocklyDuino.exe」應用程式，便可啟動BlocklyDuino，如下圖。

5. 選擇開發板：
在BlocklyDuino右上方的開發板下拉選單中，選用「**<u>LOLIN(WEMOS) D1 R2 mini</u>**」，如下圖：

6. 選擇連接埠：
在BlocklyDuino右上方的連接埠下拉選單中，選擇之前所記錄的D1開發板連接埠。(此連接埠的用途為燒錄韌體程式到開發板中，以及與開發板韌體程式收送序列埠資料)

7. 匯入原始韌體程式「**01_Temp_Humi**」：
+ 程式功能說明：
此程式會每5秒從DHT11讀取溫濕度讀數，並將數值輸出到序列埠(在Windows端可以開啟序列埠監看視窗來顯示數值)；同時，LED也會隨之以5秒為週期做明滅。
+ 如下圖，點擊右上方的「開啟」圖示，然後在跳出的窗格中，選擇資料夾「01_Temp_Humi」，按下「確定」按鈕即可匯入程式積木。
<img src="https://hackmd.io/_uploads/Byg0Mb3Y6.png" width=450>

8. 將原始韌體程式<u>燒錄</u>(BlocklyDuino的說法是「下載」)到D1開發板中：
如下圖，點擊右上方的「下載」圖示，便會跳出「下載韌體」窗格，按下窗格下方的「下載」，便會進入驗證與上傳程序(需要花一點時間)，最後出現Finish字樣即代表韌體燒錄成功。

9. 此時可以觀察到D1開發板內建的LED燈會以5秒為週期做明滅，同時可以開啟「Putty序列埠監看視窗」，在跳出的窗格中設定鮑率(即序列埠的傳輸速率)為115200，然後按下「開啟PUTTY」按鈕，便會打開putty視窗，可看到D1開發板每5秒輸出的溫溼度數值字串(如下圖)。

## <u>任務2：感測節點上網</u>：
1. 在BlocklyDuino匯入另一個韌體程式：**02_Temp_Humi_MQTT**
+ 此程式將利用MQTT協定，以特定<u>主題名稱</u>(<u>*topic*</u>)來<u>發佈</u>(<u>*publish*</u>)溫溼度數值到<u>*MQTT Broker*</u>伺服器。
+ 需要這筆溫溼度資訊的應用程式(或其他節點)，則先向MQTT Broker<u>訂閱</u>(<u>*subscribe*</u>)這個主題名稱的資料，一旦Broker收到感測節點所發佈的溫溼度資訊後，便會馬上轉發佈給這個主題的訂閱者。MQTT的運作模式如下圖所示。
<a title="Brivadeneira, CC BY-SA 4.0 &lt;https://creativecommons.org/licenses/by-sa/4.0&gt;, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:MQTT_publish.png"><img width="800" alt="MQTT publish" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/MQTT_publish.png"></a>
+ 這個模式也可以用於應用程式對感測節點發佈指令來做到遠端控制感測節點，只要感測節點向Broker訂閱應用程式指令所對應的特定主題即可。本程式即使用這種方式來實現遠端控制LED開關。
+ 這個程式使用的是公用的MQTT Broker，網域名稱為：「mqttgo.io」，這個Broker同時提供測試網頁，可供程式員測試MQTT的運作。

2. 上傳後須修改程式內容，包括設定現場的WiFi網路名稱與密碼，以及每位學員必須要指定屬於自己且唯一的MQTT客戶端識別碼(Client ID)與各項主題名稱。依程式內容由上而下分別說明：
+ LED狀態與控制指令的MQTT topic：

+ WiFi網路名稱與密碼：
<img src="https://hackmd.io/_uploads/SJ0XPX3FT.png" width="450">

+ MQTT客戶端識別碼(Client ID):
<img src="https://hackmd.io/_uploads/Hkj8SXhFa.png" width="450">

+ 溫溼度數值的MQTT topic：

3. 改完之後便燒錄到D1開發板中。燒錄完成後，開啟putty序列埠監控視窗，看看是否有顯示D1開發板輸出的溫溼度數值，以確認程式有正常運行。
+ 此時看不到LED On/Off訊息是正常的，因為這個程式已經改為由遠端來控制LED明滅，有收到指令才會輸出。

4. 打開瀏覽器，連線到「mqttgo.io」的MQTT測試頁面，針對感測節點進行測試，看看是否能收到其發佈的溫溼度數值，並且能夠送LED開關指令給它，遠端遙控它的LED明滅：
+ 首先點擊頁面上半部的「連線伺服器」中的「連線」按鈕，讓此網頁連上MQTT Broker(broker.MATTGO.io)，如下圖所示。
+ 連線成功後，訂閱感測節點發佈溫溼度數值所用的主題：
按下頁面中間右邊的「Add Subscription(新增訂閱主題」按鈕，在跳出窗格中填寫相關資訊(紅圈部分即可)，完成後按下「Subscribe」按鈕即完成設定與訂閱。溫溼度個別做一次。

+ 完成後，若是能正常收到感測節點所發佈的溫溼度數值，就可看到如下頁面。

+ 接下來，測試遠端遙控LED明滅：
在中間的「推播 Publish」區塊的topic欄位中，填入控制LED的主題(格式為xxxxxxxx/led_control，其中xxxxxxxx就是之前修改程式時所訂者)，並在訊息處填入「on」，然後按下「Publish」按鈕，若成功則板子內建LED就會亮起來；若輸入「off」再按下Publish按鈕，則會熄滅內建LED。

## <u>任務3：建立手勢影像辨識的機器學習模型</u>
在這個任務中，我們將使用Google所開發的Teachable Machine網站，建立對應「開」與「關」手勢影像辨識的機器學習模型，這個模型將會用於遠端遙控LED明滅。

+ Google Teachable Machine (https://teachablemachine.withgoogle.com)簡介：
+ 讓使用者以非常簡單的方式建立以下三種機器學習模型：影像(Image)分類、聲音(Sound)分類、以及姿態(Pose)分類。訓練模型的過程包含三個階段，如下圖：
<img src="https://hackmd.io/_uploads/r1uQq93Y6.png" width="500">

+ 所得的機器學習模型的使用方式：
+ 可以匯出成特定格式的檔案，以供其他程式引用
+ 上傳(發佈)到Teachable Machine網站，Teachable Machine網站會產生一個專屬的URL網址，其他程式可連線到該網址使用
+ 本課程採用此種方式使用自己訓練出來的模型

(執行以下步驟前，先將USB攝影機插到電腦上)
1. 打開Chrome瀏覽器，連線到Google Teachable Machine網站(https://teachablemachine.withgoogle.com/)，並點擊頁面中的「Get Started」按鈕：
2. 在New Project頁中，點選「Image Project」：
3. 在跳出的New Image Project頁面中，選擇「Standard image model」：
+ 因為我們在將在PC上運行這個模型，運算能力較嵌入式系統(微控制器)強，所以選擇標準模型
4. 點擊下方的「Add class」，增加影像類別，總共生成3個影像類別：
5. 點擊每個類別名稱後面的鉛筆符號，將類別名稱分別修改成：on、off、none
6. 為「on」類別建立影像資料集：
+ 點擊類別中的「Webcam」按鈕，便會開啟視訊攝影機準備擷取影像，如下圖：
+ 盡量讓影像背景單純，不要有太多複雜顏色的物品在內，因為這裡的機器學習模型是整張圖去做辨識，而非分辨出裡面有甚麼物件。

+ 把一隻手「手掌攤開」，放在攝影機前，調整好大小，然後用滑鼠點擊並按住「Hold to Record」按鈕，就會連續截圖。大約截十來張左右就放開按鈕，停止截圖。

+ 保持手掌攤開調整其在畫面中的大小，重複以上截圖動作
7. 重複上一步驟，為「off」類別建立影像資料集，但是手勢換成「握拳」。

8. 再重複上一步驟，為「none」類別建立影像資料集，直接拍背景即可。

9. 訓練影像分類機器學習模型：
+ 完成影像蒐集程序後，接下來進入「訓練」階段。點選中間「Train Model」便可開始進行機器學習模型的訓練。
+ 在訓練之前，可以點擊下方的「Advanced」下拉選單，有一些進階選項可做設定(但本課程不需要做額外設定)
+ 按下「Train Model」後便會自動進行模型訓練，如下圖：
<img src="https://hackmd.io/_uploads/BJ1IVjnt6.png" width="250">
10. 訓練結果預覽：
+ 訓練完畢後，會自動出現「Preview」(預覽)，如下圖。可以將手勢置於攝影機前進行辨識度的測試，可以藉此觀察各種角度或距離的辨識效果。

11. 匯出模型：
+ 點選預覽畫面上方的「Export Model」以匯出訓練好的模型。點擊之後會跳出如下方的視窗：
+ 直接點擊「Upload Model」，便可將此訓練好的模型發佈到Google Teachable Machine伺服器中，順便產生一個URL網址，顯示在畫面中的「Your sharable link:」下方的欄位中，將此連結複製到文字編輯器中暫存備用。

## <u>任務4：在雲端平台佈署網站程式</u>
本階段任務是將我們事先準備好的簡易智慧家庭AIoT網站程式佈署到雲端平台，佈署後我們會取得這個網站的網址，可以用任何桌機或手機的瀏覽器進入網頁操作。包含以下步驟：
+ 先將程式上傳到Github網站上
+ 再到Render.com網站佈署後台程式，最後取得網站網址

1. 安裝必要軟體：「Git」與「Github Destop」
+ 請到Google雲端資料夾<https://drive.google.com/drive/folders/1fLaNeLtgrVDSKfVU1au9WdPLEnni6DAo>下載兩個安裝程式：「<u>Git-2.43.0-64-bit.exe</u>>」與「<u>GitHubDesktopSetup-x64.exe</u>」，下載後執行安裝(一直按next即可)。

2. 註冊github帳號：
+ 甚麼是github？
+ GitHub是一個程式碼/文件的倉儲管理平台
+ 我們的後台程式要先儲存於此，才能在render.com的雲端伺服器做佈署
+ 打開網頁瀏覽器，連線到github官網：www.github.com
+ 按下右上方的「Sign Up」進入註冊頁面
+ 使用自己的e-mail名稱來註冊，並取一個使用者名稱
+ 會送一個e-mail給你，裡面有launch code，在頁面上輸入launch code即完成
+ 完成後會問你一些問題，直接到最下方點擊「Skip personalization」離開
+ 最後出現儀表板頁面即完成

3. 首先要對網站程式內容做小幅修改，以配合自訂的一些MQTT相關參數(Broker資訊、Topic名稱等等)。使用Notepad++文字編輯器開啟資料夾「03_Nodered_Smart_Home」中「.node-red」資料夾中的「flows.json」檔案，依以下指示修改指定行號的內容：
+ 283行：改填你的teachable machine機器學習模型的網址

+ 482行：改填你的遠端控制LED明滅的MQTT Topic名稱
+ 534行：改填你的LED狀態的MQTT Topic名稱
+ 700行：改填你的溫度數值的MQTT Topic名稱
+ 721行：改填你的濕度數值的MQTT Topic名稱

4. 將網站程式上傳到github儲存：
+ 開啟Github Desktop程式，若為第一次進入，則會出現一下畫面，點擊「Sign in to Github.com」，此時會另外開啟瀏覽器視窗，請你登入你的Github帳號
+ 接下來會重新開啟Github Desktop，出現如下畫面，按下Finish即可
+ 最後會出現以下畫面，表示已經完成Github Desktop的初始設定

**<u>提示</u>**：接下來的步驟如下：
+ 我們會先用Git工具程式，將「<u>**03_Nodered_Smart_Home**</u>」資料夾中的網站程式內容，建立其對應的本地倉儲。
+ 然後才會將本地倉儲的內容，透過Github Desktop推送到github上，建立一個專案。

5. 用Git工具程式，將「<u>**03_Nodered_Smart_Home**</u>」資料夾中的網站程式內容，建立其對應的本地倉儲
+ 開啟檔案總管，打開「03_Nodered_Smart_Home」資料夾
+ 在檔案總管網址列(即紅圈處)，以滑鼠點擊旁邊空白處，便會顯示完整的路徑字串，然後刪掉路徑字串，在輸入「cmd」，按下Enter鍵便會開啟一個命令提示字元的視窗，且工作資料夾已經設定在「03_Nodered_Smart_Home」。

+ 在命令提示字元視窗中，輸入以下Git指令先做個人資料設定(只要執行過一次即可，以後不需再執行)：
+ git config --global user.email "[e-mail]"
+ git config --global user.name "Your Name"
+ 接下來，依序輸入以下三個指令來建立健康計步器網站程式倉儲：
+ git init
+ git add --all
+ git commit -m "initial creation"

+ 接下來，回到GitHub Desktop工具，將建git建立的倉儲推送到GitHub上，建立名稱為「<u>Nodered-Smart-Home</u>」的專案
+ 點選上方選單 File --> Add local repository…
+ 會跳出如下窗格，按下Choose按鈕，選取「03_Nodered_Smart_Home」資料夾，然後按下Add Repository按鈕
+ 接下來會回到原畫面，可以從左上方得目前正在處理的倉儲為「03_Nodered_Smart_Home」
+ 按下Publish repository按鈕，就會將此倉儲推送到GitHub形成一個新的專案
+ 過程中會跳出以下窗格，將專案名稱改為「AIoT-Smart-Home」，按下Publish repository按鈕即開始推送
+ 完成後畫面如下，可以點擊「View on GitHub」按鈕，就會自動開啟此專案的GitHub網頁

6. 註冊Render.com帳號
+ Render.com介紹
+ 提供網路應用服務(例如網站)的佈建與運行平台
+ 讓使用者可以直接上傳佈建腳本，以及網路應用服務的程式與網頁，render.com的伺服器便會自動建立虛擬機來佈建與運作。
+ 不需要使用者自行維護主機
+ Render.com目前有提供免費的試用方案，因此本課程選擇其做為佈署雲端程式的平台

+ 註冊Render平台帳號
+ 打開瀏覽器連線到網址：www.render.com，點擊頁面右上方的「SIGN IN」
+ 使用GitHub帳號進行註冊
+ 會寄一個確認信給你，要點擊信中的連結後才能開始使用

7. 在Render.com中佈署網站程式：
+ 到Render.com的儀表板網頁(https://dashboard.render.com)頁面，點擊「New +」按鈕，在下拉選單中選擇新增一個「Web Service」(Web服務)
+ 會出現如下頁面，選擇「Build and deploy from a Git repository」來讓我們可以選取在網路上的git倉儲來建置這個新的Web服務，然後按Next按鈕繼續：
+ 按下頁面中間的「Connect Repository」按鈕繼續：
+ 會跳到如下的Github頁面，詢問你是否授權給Render.com來存取你在Github中的倉儲內容。直接按下下方的綠色「Install」按鈕，然後輸入github密碼來確認：
+ 確認完成後，會跳回Render.com新增Web Service的頁面：
+ 此時應該可以看到已經與github帳號產生連結(如下圖右邊紅圈處)
+ 也可看到已經取得github中的倉儲清單(如下圖左邊紅圈處)
+ 按下「AIoT-Smart_Home」倉儲右邊的「Connect」按鈕，指定連結此倉儲來建立Web服務：
+ 接下來會出現如下的Web服務的設定頁面:
+ 在Web服務的設定頁面中，針對以下兩項做設定：
+ Name：這個服務的名稱
+ 必須是全世界唯一，不能與其他服務相同
+ 建議命名為「xxxxxx-smart-home」，其中xxxxxx為你的英文名字
+ 例如：ghliaw-smart-home
+ Start Command：啟動此服務的指令
+ 當服務佈署完成並啟動時，Render.com會自動執行這個指令
+ 請將原來的內容刪除，改填以下指令：
<u>node-red --settings ./.node-red/settings.js --userDir ./.node-red</u>
+ 以上兩項填寫完畢之後，將網頁往下捲，可以看到費用方案，請選擇免費(Free)等級：
+ 將網頁捲到最下面，按下「Create Web Service」按鈕，即開始佈建Web服務：
+ 開始佈建後便會跳轉到此Web服務的儀表版頁面，動態顯示佈建的過程:
+ 完成布建後會顯示「Live」，而本服務的網址即為頁面中紅色方框處：

8. 使用瀏覽器來確認網站是否佈署成功：
+ 接續前一步驟，將所佈建的Web服務網址複製到剪貼簿(或是直接點擊該網址連結來開啟新頁面亦可)：
+ 開啟瀏覽器，在網址列貼上佈建的網址，按下Enter鍵後，若能進入網站並出現如下圖的頁面，即表示佈署成功：
+ 若出現要使用你的相機的詢問，請按下「允許」，這樣才會讓這個頁面能使用電腦的攝影機：

## <u>任務5：測試智慧家庭系統成果</u>
透過瀏覽器連結到後台網站網頁，從頁面中可看到即時溫溼度，並可透過頁面的手動開關或手勢辨識遠端遙控LED明滅。

1. 在網站佈建完成後，第一次開啟網頁時，必須先等待20~30秒，讓系統的機器學習模型準備好。若之後仍是看到相機辨識結果一直顯示「Preparing」的話，就按下攝影機畫面右下方的「照相」按鈕，讓它拍第一張照片，之後就會開始連續辨識了：

2. 頁面中可以看到顯示溫溼度數值的儀表，也可以測試手動開關LED與手勢開關LED，看看是否板子的LED會隨之明滅：

3. 若網站程式有錯誤導致結果不正常，則在修正網站程式錯誤之後，重新用Github Desktop推送到Github即可，Render.com會在推送之後自動重新佈署，待佈署完成後重新開啟網頁即可。