App Inventor學習記錄157-怎麼把資料上傳到 thingspeak

資料上傳到 thingspeak之後,就可以利用他本身的功能,看到一些曲線圖。還挺方便的。
這次就來記錄一下,怎麼在 app inventor中,把資料上傳到 thingspeak中


這一次完成的範例如下。

上傳資料之後,就可以直接 thingspeak的折線圖來用,挺方便的。
好用歸好用,但還是要說明一下 thing speak免費版的限制。
上傳間隔 15秒,一年最多上傳 3百萬筆資料


註冊 thinkspeak的過程這裡就不說明了,有點麻煩但相信不會難到大家。
登入 thinkspeak之後。我們點擊上方的 Channels,接著點 My channels


接著點擊 New Channel的綠色按鈕,來新建一個專案。


接著我們就可以看到這麼一大串,這裡的資料不用全部都填上。

要填的地方是 Name,填一下專案的名稱,這個名稱會出現在圖表上。
接下來依我們的需要勾選 field 1~8,最多就是可以一次上傳 8筆資料。

其它的東西都可以先不用填。
按下 Save Channel的綠色按鈕在保存設定。


點擊上方的 Sharing

我們選擇 Share channel view wiet everyone
這樣就不同一定要登入 thingspeak帳號密碼才能看到資料。


接著點擊上方的 API Keys,來取得 api值。

由於我們要把資料寫入 thingspeak裡頭,所以這裡要取得值是 wite api key這裡的這串值
我們先把它複製下來。

然後,看到右方有用紅框框起來的一串網址,這一串網址提供了怎麼把資料寫入到 thingspeak的範例。我們同樣先把它複製下來。


接著,我們回到 app inventor的畫面配置中。

這裡放了 8個文字輸入盒,用來對應 thinkspeak的 8個上傳值。
一個 web viewer網路瀏覽器元件,用來顯示 thinkspeak的折線圖。
一個 web元件,用來發送資料……應該是這麼說吧!


全部的程式碼如下。


我們先建立一個變數。

這個變數用來放 thingspeak的網址。
這裡用文字方塊來組合一下。
上面這一個,就從 http://xxxxxx一直取到 ?api_key=這裡。
下面這一個就放我們剛才複製的 api值。


網址和 api值設定好之後,接下來是處理上傳值的地方。

set web 1.url 把網路元件的網址設定一下。
同樣用文字方塊的組合,把我們剛剛建立好的網址給放上。
接著用 &field1=接第 1個文字輸入盒的內容。
&field2=接第 2個文字輸入盒的內容。
以此類推。

call web 1.get
呼叫網路元件送出資料。
這個部份就跟我們之前做的用 google 表單把資料傳到 google sheet上的做法是差不多的。

set webviewer 1. homeurl,設定網路瀏覽器的網址
這個網址放的就是 thingspeak折線圖的網址,等一下再來說明要取那裡的網址。

call webviewer 1.go to url,呼叫網路瀏覽器前往我們設定好的網址。


在我們設定好 sharing的設定之後,在 public view這裡就會有資料出現。

我們點一下下方折線圖的這個按鈕,就可以取到即時的圖表網址。


把這個網址複製一下就可以拿來使用了。


要補充一下,除了折線圖之外,thinkspeak還有提供其它幾個圖表可以使用。
這個大家在自行試試看。

這次的 aia檔的下載連結如下:
NO_157_Thing_speak.aia

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響