Lab 11 使用的 Ubidots 服務因為網頁上的畫面有小幅度的修改, 本文以新的畫面操作一遍, 方便大家對照操作。

:::info
實際的操作步驟和程式碼都和手冊上一樣, 只是因為網頁內容有差異, 改以新畫面操作展示。
:::

## 註冊帳號

1. 請連線至 https://ubidots.cokm/ 後按 **TRY NOW**：


2. 我們使用的是它專為 STEM 教育環境提供的免費平台, 請按 **FREE platform**：


3. 請按 **CREATE FREE ACCOUNT**：


4. 填入你的基本資料後按 **Sign Up**：


5. 註冊完畢, 系統會寄一封確認信給你：


6. 到剛剛填寫的電子郵件信箱收信, 你會收到如下地確認信, 請按信中的按鈕啟用帳號：


7. 接著會看到歡迎畫面, 請一直按右下角的下一頁畫面：


8. 最後看到這個畫面就完成註冊程序了：


## 查閱 API 使用方法

下一步要查看 API 的說明, 才知道如何將資料上傳到 Ubidots：

1. 請選右上方問號按鈕下的 **API docs**, 這會開啟新的頁面：


2. 在上方選取 **Data API**：


3. 在左邊 API 列表中選取 HTTP 下的 **Devices/Send data to a Device**


4. 會出現 API 的說明：


這裡表示要使用 HTTP POST 連線到

    https://industrial.api.ubidots.com/api/v1.6/devices/<device_label>/

才能送出資料給指定名稱的裝置, Ubidots 中可以建立對應到硬體的裝置, 每個裝置可以設定多個變數, 對應到硬體上連接的感測器。

:::danger
上述 API 連結使用的加密方式資料量比較大, 不適用於像是 ESP32 這樣的小裝置, 請改用手冊上的連結：

    https://things.ubidots.com/api/v1.6/devices/<device_label>/

:::

透過上述連結傳送感測值時, 必須在表頭中傳遞 Ubidots 派發的令牌認證身分：


上表就說明了要加上 **X-Auth-Token** 表頭帶入令牌, 另外也要註明傳送的資料是 JSON 格式, 格式如下：


這樣就會傳送感測值 10 給裝置上的 temperature 變數。

## 取得令牌

如同前一小節的說明, 要使用 API, 必須透過令牌認證身分, 請依照以下步驟取得令牌：

1. 回到原本註冊帳號的頁面, 按一下右上角頭像圖示後選 **API Credentials** ：


2. 按一下令牌區的複製鈕即可複製：


這裡有分 API 金鑰 (key) 和令牌 (token), 請不要弄錯邊。

稍後要將複製的令牌貼到程式碼中。

## 測試程式

:::info
有關 HTTP POST 方法請參考手冊上的說明。
:::

from machine import Pin,ADC
import time
import network     
import urequests
import gc

adc_pin=Pin(32)            
adc = ADC(adc_pin)         # 建立ADC物件
adc.width(ADC.WIDTH_12BIT) # 設定ADC範圍
adc.atten(ADC.ATTN_11DB)   # 將最大感測電壓設定成3.6V

# 連線至無線網路
sta=network.WLAN(network.STA_IF)
sta.active(True)   
sta.connect('無線網路名稱','無線網路密碼')

while not sta.isconnected() :
    pass

print('Wi-Fi連線成功')

device_label = "ESP32"           # 裝置名稱
variable_label = "temperature"   # 變數名稱
token = "你的令牌 (token)"

url = "https://things.ubidots.com/api/v1.6/devices/"+ device_label

while True:
    gc.collect()
    vol = (adc.read()/4095)*3.6
    tem = (vol-0.5)*100
    print('目前溫度:',tem)
    data = {variable_label:tem}
    headers = {"X-Auth-Token":token}
    res = urequests.post(url,json = data,headers = headers)
    if(res.status_code == 200):
        print("傳送成功")
    else:
        print("傳送失敗")
        print("錯誤碼：",res.status_code)
    res.close()
    time.sleep(5)

執行後若正常就會看到 Thonny 的 Shell 窗格出現如下訊息：


即可到 ubidots 查看上傳的溫度：

1. 按一下 **Devices/Devices** 鍵入裝置清單頁面：


2. 在裝置清單頁面中選取程式碼內指定的裝置名稱 ESP32：


3. 可以看到程式碼中指定名稱的變數：


4. 按一下變數即可查看所有資料：


它會以折線圖顯示, 你必須自己按一下 **New data available** 才會顯示新收到的資料。

## 建立可即時更新資料的數位儀表板

Ubidots 提供有數位儀表板功能, 可以即時顯示收到的新資料, 請依照以下步驟設計儀表板：

1. 按左上角 Ubidots 圖示回到首頁, 也就是數位儀表板頁面：


2. 按右側的 '+' 按紐新增圖表：


3. 選取 **Charts/Line chart**：


按 **Add variables** 新增要做為資料來源的變數：


在交談窗中按一下裝置名稱 ESP32 後選變數名稱 temperature 後按右下角的按鈕關閉交談窗：


設定完成後按右下角的完成鈕：


4. 你會看到新增的圖表, 拖曳右下角可以變化大小：


展開圖表右側功能表後選 **Share** 可以取得分享連結：


即可取得直接分享連結或室內嵌到其他網頁內的 HTML 程式碼：


其他人即使不是 Ubidots 用戶也可以看到你的圖表：