[ LattePanda] 結合雲端服務-MCS與ThingSpeak

這次向各位介紹常用的雲端服務，分別是台灣聯發科技公司搭配旗下LinkIt系列開發板之MCS與ThingSpeak，我們透過LattePanda實作。你可以從遠端來控制板子的腳位狀態或是檢視板子狀態與感測器的數值變化。類似的雲服務近年來如雨後春筍般冒出來，對於想找尋免費方案的使用者或教學單位來說是相當好的事呢。

第一個範例是上傳LattePanda之Arduino的A0類比輸入腳位狀態到MCS雲服務，可以根據我們所設定的條件來觸發手機推播訊息。這裡使用DFRobot套件包中的環境光感測器（或可以改用一般常見的光敏電阻）。

一、認識MCS雲服務

MediaTek Cloud SandBox（MCS）是聯發科技創意實驗室為旗下LinkIt系列開發板所提供的專屬網頁介面雲端平台，具有物聯網裝置最需要的資料儲存及裝置管理服務。MCS可以很快速地建立雲端應用程式，對於有意將裝置原型快速商品化的人來說，是一套相當便利的系統。它可以讓使用者專注在取得最重要的實體運算資料，不需要處理網路協定。而在MCS所提供的各種資料通道（Data channel）中，你可以輕易的為物聯網裝置建立一個控制面板，還能夠使用專屬的Android手機應用程式來檢視喔！

二、MCS操作說明

接下來會依序介紹如何在MCS上建立原型（prototype）、建立資料通道（Data channel），以及透過REST API進行溝通。完成後就可以從網頁或手機應用程式來觀看我們所上傳到MCS的資料啦！

請先到MCS網站（https://mcs.mediatek.com）註冊一個帳號，登入後的首頁如圖10-1。

01-MCS主畫面

MCS專有名詞介紹

在開始進入專案之前，介紹一下常見的MCS的專有名詞：

• 原型（Prototype）：裝置原型，具備各種資料通道。
• 資料通道（Data channel）：帶有時間資訊的資料串，分為控制器與顯示器，並根據不同的資料型態有不同的外觀。
• 資料點（Datapoint）：每筆上傳的資料。
• 測試裝置（Test Device）：某一時間點的原型，具備自動產生的DeviceId與DeivceKey。
• DeviceId、DeviceKey：這組資訊無法修改，用於鎖定測試裝置，需要寫在程式碼中。

圖10-2 MCS雲服務架構（圖片來源：https://github.com/Mediatek-Cloud/MCS）

MCS選單功能介紹

• 開發（Development）：
  • 原型（Prototype）：新增修改原型、資料通道與測試裝置
  • 測試裝置（Test Devices）：已建立之測試裝置清單，可以與開發板互動
• 管理（Management）：
• 資源（Resources）：教學文件、API參考資料、手機端程式下載與更新日誌等。
• 幫助（Help）：常見問題、論壇、回饋
• 個人檔案：設定使用者大頭照、系統語系以及開啟用於接收App推播訊息的手機（須先安裝MCS Android程式）。

資料通道（Data channel）

資料通道根據其動作分成兩種：用來發送訊息給開發板的控制器（Controller）跟接收開發板回傳的資料的顯示器（Display）。本範例將使用一個整數資料型態的顯示介面來接收來自LattePanda的資料。

表說：資料通道內容比較

三、MCS設定

接下來要帶各位在MCS上建立一個整數資料型態的顯示介面來接收來自LattePanda的資料。

1. 登入MCS之後，請點選畫面左上角的「開發」，選擇「原型」。
2. 在畫面中點選「Create prototype」來建立新的原型。請按照以下設定完成原型設定：
   • 產品原型名稱：LattePanda
   • 產品原型版本：0
   • 硬體平台：Others
   • 產業：其他
   • 應用程式：其他

View post on imgur.com

創建原型

3.進入這個原型之後，請點選建立資料頻道，先選擇顯示器。並按照以下設定完成原型設定：

請注意實際上要填入程式的是資料通道Id，但由於實際上課時多數學員容易搞混，為求簡潔，建議資料通道名稱與Id可以使用相同名稱。

• 資料通道名稱：sensor
• 資料通道Id：sensor
• 描述：隨意填入
• 資料型態：在此請選整數

單位：在此請選「其他」，後續您可根據所使用的感測器來選擇正確的單位

View post on imgur.com

新增整數型顯示器資料通道

4.這樣具有一個顯示器資料通道的原型就建立完成了，請回到原型頁面可以看到方才所建立的原型，由於在此尚未建立測試裝置與裝置，因此兩個數字都是0。請點選其右上角的「…」，可以編輯、複製、匯出以及刪除。其中匯出之後的JSON檔可以讓別人直接匯入來建立原型，這個做法在原型已經很複雜時非常好用。

編輯原型

5.接著是要建立測試裝置（test device）。請點選畫面右上角「創建測試裝置」，在此請輸入裝置名稱即可。

建立測試裝置

6.建立測試裝置之後，請進入測試裝置頁面。與原型頁面有點像，但是您可以在頁面右上方看到DeviceId與DeviceKey兩筆參數。這兩筆資料也要填入程式中。

建立測試裝置完成

7.測試裝置設定完成後，就能將建好的測試裝置透過DeviceId 跟 DeviceKey與別人分享，也可以自行設定觸發條件，讓MCS寄信給你。接著在原型頁面下點選「Trigger&Action」標籤，再點選「+ Add trigger & action」來加入新的觸發條件與動作。在此需要三個步驟：

• 觸發條件名稱請隨意輸入，這會成為手機推播訊息標題或是電子郵件標題。

編輯觸發條件

• 這時會根據既有資料通到來建立觸發條件，請選擇方才建立的資料通道：sensor，條件請設定為大於800。

• 最後一步是選擇觸發動作。動作類型請選擇「手機推播」（另外還有電子郵件與觸發其他網路服務的Webhook選項）。內容請輸入：

「LattePanda’s A0 value exceeded: ${deviceName} / ${value}」，其中${deviceName}與${value}可以自動代出裝置名稱與觸發條件時的數值。

選擇觸發動作

8.請注意如果要使用手機推播功能，先到個人檔案中（MCS畫面右上角）打開所要接收推播訊息的手機，如下圖。手機需要先安裝MCS app（目前只有Android版）。

在個人檔案頁面打開要接收推播訊息的手機

View post on imgur.com

在測試裝置的「觸發條件與動作」標籤中檢查

在Google Play安裝「 MediaTek Cloud Sandbox」手機程式

程式說明

先安裝Python2.7（https://www.python.org/download/releases/2.7/），建立一個mcs.py檔之後貼入下方的程式碼，修改對應資訊之後使用以下指令執行：

   python mcs.py

執行順序1、先上傳Arduino端的程式之後，2、再執行Python或Node.js任一程式即可。Python或Node.js會透過我們在程式中所設定的序列埠號向Arduino要資料，即類比腳位A0的資料。

之所以使用這樣的架構，雖然使用了兩種程式語言，但是可以發現程式的總行數簡化很多。如果後續改用Raspberry Pi搭配Arduino或是7688 Duo的話，也可以看到這樣的混搭應用。

Python

#1~#3匯入了本程式所需的Python函式庫，其中serial是用來與序列裝置通訊，也就是Arduino。

#05是指定LattePanda上的Arduino晶片所取得的COM埠號，例如「COM4」。

#07 08 則是您先前辛辛苦苦在MCS上取得的測試裝置DeviceId / Key

#10   MCS所設定的資料通道ID

#22   無窮迴圈

#23   抓到來自Arduino丟來的第一筆資料’a’，這等於是標頭檔，以避免封包遺失對於通訊品質的影響。

#24 使用ser.read()取得來自Arduino的資料

#30 上傳資料到MCS

mcs.py範例

import serial
import time
import requests

ser = serial.Serial('COMX',9600) 

device_id = "Your device ID"
device_key = "Your device Key"

data_channel = "sensor"
data_channel +=",,"
url = "http://api.mediatek.com/mcs/v2/devices/" + device_id
url += "/datapoints.csv"

def MCS_upload(value,length):
        data = data_channel+str(value)
        r = requests.post(url,headers = {"deviceKey" : device_key,'Content-Type':'text/csv'},data=data)
        print r.text

print "Start"
while True:
        if ser.read()=='a':
                IncommingNum = ser.read()
                sensor = int(ser.read(int(IncommingNum)))
                a = 8
                a += int(IncommingNum)
                MCS_upload(sensor,a)

Node.js

Node.js也是相同的概念，我們可以比較一下與Python的異同，然後選一個喜歡的程式語言來開發。記得先安裝Node.js（https://nodejs.org/en/）。

請建立一個mcs.js檔之後貼入下列內容，修改對應資訊之後使用以下指令執行：

   node mcs.py

mcs.js範例：

var mcs = require('mcsjs');
var SerialPort = require("serialport").SerialPort
var serialPort = new SerialPort("COMX",
{baudrate: 9600
});

var myApp = mcs.register({
        deviceId: 'your device ID',
        deviceKey: 'your device Key',
});

serialPort.on("open", function () {
        receivedData ="";
        serialPort.on('data',function(data)
        {
                receivedData =data.toString();
                a = receivedData.length;
                myApp.emit('sensor','', receivedData.substring(2,a));
                //從字串的2號位置取長度a，即可取得資料本身
        });
});

Arduino端

Arduino端程式很單純，主要是多開了一個序列連線（#5的Serial1，代表LattePanda對Arduino的序列通訊）。進入loop()函式之後，#11~#13為搭配標頭a、資料長度與資料本體結合成一個封包之後發送給LattePanda端的Python、Node.js或其他程式。

Arduino端程式

實際執行

請先將Arduino端程式上傳到LattePanda的Arduino上，接著開啟Windows的命令提示字元來執行Node.js或Python（兩者任一）即可透過序列埠取得來自Arduino端的資料之後上傳到MCS雲服務，我們可以看到數值變化，並點選該資料通道的右上角即可看到歷史數值變化，如下圖。

也可由MCS手機端App檢視資料。

當數值超過我們所設定的上限時， Android手機會收到來自MCS手機端程式的推播訊息，如下圖。

View post on imgur.com

上傳溫溼度感測器資料到ThingSpeak雲服務

這次使用的是DFrobot之DHT11溫濕度感測器-連結

ThingSpeak雲服務與設定

ThingSpeak是另一個好用的雲服務，可以接收來自各種開發板或單一程式傳上去的資料，在網站上可以找到很多熱門開發板的現成範例，包含Arduino、ESP8266與Raspberry Pi等。請開啟ThingSpeak網站（https://thingspeak.com/）註冊一個帳號之後登入，登入之後主畫面如下圖：

ThingSpeak端設定

登入ThingSpeak網站之後點選「Channels」來建立新的Channel，並如下圖填入相關資訊，我們要把DHT11溫濕度感測器的溫度與濕度執分別傳上去，因此請將Field1填入temperature，Field 2則填入humidity。

建立Channel之後，點選API Keys 標籤，請把上圖中的Channel ID與Write API Key記下來，後續要把這兩筆資料填入Visual Studio程式中。

於Visual Studio中讀取溫濕度感測器資料

糗確認在LattePanda上是否安裝Microsoft Visual Studio 2015（或以上）。

Arduino端

1. 在Arduino IDE中匯入Adafruit DHT11函式庫，請由函式庫管理員中搜尋「DHT11」後點選Install按鈕即可。

1. 接著下載Arduino程式碼-連結，找到ino後上傳到LattePanda Arduino上即可。

本範例主要是如何透過Visual Studio取得Arduino的資料之上傳到ThingSpeak雲服務。架構與上一個範例使用Python是一樣的，看各位在PC端喜歡用什麼樣的程式語言。當然在ThingSpeak網站上也可以找到Python結合Arduino的範例，這樣做法就與上一個專題差不多了。

請開啟一個新的Visual Studio C#專案，並於Program.cs中貼入以下程式碼：

program.cs範例

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Net;
using System.Threading;
using LattePanda.Firmata;

namespace DHT
{
    class Program
    {
        const string WRITEKEY = "THINGSPEAK_KEY_HERE"; //ThingSpeak Key
        const int DELAY = 20;          //Delay time for send packet to ThingSpeak
        const int GET_TEMPERATURE = 0x47;
        const int GET_FAHRENHEIT = 0x48;
        const int GET_HUMIDITY = 0x49;
        static void Main(string[] args)
        {
            Arduino arduino = new Arduino();
            while (true)
            {
                Console.WriteLine("Receiving sensor data...");
                arduino.DHT(GET_TEMPERATURE); 
//For Fahrenheit : GET_FAHRENHEIT
                Thread.Sleep(2000);
                string temp = arduino.STRING_DHT;
                //
                arduino.DHT(GET_HUMIDITY);
                Thread.Sleep(2000);
                string hum = arduino.STRING_DHT;
                try
                {
                    string rec = "";
                    string strUpdateBase = "http://api.ThingSpeak.com/update";
                    string strUpdateURI = strUpdateBase + "?key=" + WRITEKEY;

                    strUpdateURI += "&field1=" + temp;
                    strUpdateURI += "&field2=" + hum;

                    HttpWebRequest request = WebRequest.Create(strUpdateURI) as HttpWebRequest;
                    request.Timeout = 5000;
                    request.Proxy = null;
                    //request.Accept = "application/xrds+xml";  
                    HttpWebResponse response = (HttpWebResponse)request.GetResponse();
                    WebHeaderCollection header = response.Headers;
                    var encoding = ASCIIEncoding.ASCII;
                    using (var reader = new System.IO.StreamReader(response.GetResponseStream(), encoding))
                    {
                        rec = reader.ReadToEnd();
                        Console.WriteLine("The data was successfully sent. Node Number: " + rec);
                        Console.WriteLine(DateTime.Now.ToString("dd/MM/yyyy - HH:mm:ss") + "      Temperature: " + temp + " °C" + "       Humidity: " + hum+" %");
                    }
                }
                catch (Exception ex)
                {
                    Console.WriteLine("Error: " + ex.Message);
                }
                Thread.Sleep(1000);
                for (int i = 0; i ＜= DELAY; i++)
                {                 
                    Console.Write(".");
                    Thread.Sleep(1000);
                }
                Console.WriteLine();
            }
        }
    }
}

實際執行

存檔之後點選 Start 按鈕，會看到Visual Studio執行畫面：

這時請開啟ThingSpeak網站，進入剛剛設定好的Channel，應該會看到類似下方的畫面，試著對感測器呵氣來改變溫度與溼度吧！

於ThingSpeak網站檢視溫度與濕度資料變化

這次介紹兩種雲服務：MCS與ThingSpeak，雖然功能上比Microsoft Azure來得少多了，但使用流程也因此簡化許多，功能上大致上還是可以滿足我們從雲端控制板子腳位或顯示板子資料等兩大訴求。請根據大家的使用需求來選用合適的雲服務。

相關文章：

• LattePanda 開機步驟與連接螢幕
• LattePanda 拿鐵熊貓教學：Arduino與Visual Studio環境設定
• [LattePanda] 作品發表：中文手指閱讀器
• [LattePanda] OpenCV視覺辨識人臉追蹤
• [LattePanda] 使用C# 來做藍牙0 iBeacon的門鎖系統
• [LattePanda] 使用Weather API、Google 雲服務打造氣象預報機器人