Opendata 實作- Webduino 實戰智慧插座教學
文章推薦指數： 80 %
要直接在「網頁前端」使用Opendata，最快的做法大概就是使用jQuery ，這邊用了 .get 的方法，只要三行，剛剛的JSON 資料就全部進到網頁裡了。
( 使用console.log 顯示)
Opendata實作
可以利用一些網路服務來操控智慧插座之後，就來玩點比較進階的功能，這篇將會介紹在網頁裡常常使用的Opendata(開放資料)，並且使用這些Opendata來操控智慧插座。
取得Opendata
基本上縣市政府網站，都有提供不少Opendata的資訊讓開發者使用，許多開發者喜歡到「政府資料開放平臺」上面去挖寶，或是「台北市政府資料開放平臺」，這兩個平台的開放資料都是相當完整且容易介接。
政府資料開放平臺：http://data.gov.tw/
台北市政府資料開放平臺：http://data.taipei/
而這篇文章將會使用政府資料開放平臺裡的「空氣品質即時污染指標」作為資料來源，因為手邊不見得隨時都會有空氣污染偵測器(也不便宜)，所以透過每個小時由氣象局偵測的資訊，也可作為基本的預警與提醒功能。
點選JSON的格式，這就是待會我要使用的。
此外，在這邊列出一些我覺得還滿實用，至少都是每小時更新的Opendata，有興趣就可以參考我後面的做法自行做串接。
即時海水水位：http://data.gov.tw/node/35077
即時水位(10min更新)：http://data.gov.tw/node/25768
即時雨量(10min更新)：http://data.gov.tw/node/7879
空氣品質指標(AQI)：http://data.gov.tw/node/40448
空氣品質即時污染指標：http://data.gov.tw/node/6074
高雄機場國內線即時到站航班：http://data.gov.tw/node/33649
紫外線即時監測資料：http://data.gov.tw/node/6076
曾文水庫即時水情資訊：http://data.gov.tw/node/32733
台北捷運列車到站：https://goo.gl/rNgG8B
使用Opendata(網頁前端)
要直接在「網頁前端」使用Opendata，最快的做法大概就是使用jQuery，這邊用了.get的方法，只要三行，剛剛的JSON資料就全部進到網頁裡了。
(使用console.log顯示)
$.get('http://opendata2.epa.gov.tw/AQX.json',function(e){
console.log(e);
});
程式：http://bin.webduino.io/diqeh/1/edit?html,js,output
因為資料是陣列的格式，所以藉由forEach就可以去判斷陣列每個元素的內容，然後指篩選出高雄市的資料。
$.get('http://opendata2.epa.gov.tw/AQX.json',function(e){
e.forEach(function(o){
if(o.County=='高雄市'){
console.log(o);
}
});
});
程式：http://bin.webduino.io/desec/1/edit?html,js,output
不過只有在console.log裡面顯示實在沒有很好閱讀，最終還是得呈現在網頁裡，所以我先在網頁裡放個div作為顯示區域，接著就可以透過append把資料加到網頁裡面。
var$content=$('#content');
$.get('http://opendata2.epa.gov.tw/AQX.json',function(e){
e.forEach(function(o){
if(o.County=='高雄市'){
console.log(o);
$content.append('PM2.5:'+o['PM2.5']+',PM10:'+o.PM10+'
');
}
});
});
程式：http://bin.webduino.io/sibu/1/edit?html,js,output
更進階一點，也可以做成下拉選單，選擇之後再呈現對應的資訊，當資料載入之後，透過filter做篩選，不然你可能會有十幾個「新北市」出現在選單裡，然後再根據選擇的縣市，把感測器所在的區域資料顯示在網頁裡。
var$content=$('#content');
var$select=$('#select');
var$btn=$('#btn');
varcounty=[];
varresult;
$.get('http://opendata2.epa.gov.tw/AQX.json',function(data){
console.log(data);
data.forEach(function(e,i){
county[i]=e.County;
});
result=county.filter(function(element,index,arr){
returnarr.indexOf(element)===index;
});
//篩選出縣市名稱(不然會很多重複)
result.forEach(function(e){
$select.append('
');
}
});
});
});
程式：http://bin.webduino.io/juru/1/edit?html,js,output
使用OpenData(Node.js)
剛剛的範例是透過網頁前端運行，如果想要24小時偵測，可能就得依賴後端了，這邊介紹一個Node.js的套件「get-json」，就可以做到剛剛像網頁前端一樣的事情。
程式只要這樣寫，就可以每10秒抓一次氣象局的資料囉！
vargetJSON=require('get-json')
_getJSON();
setInterval(function(){
_getJSON();
},10000);
function_getJSON(){
getJSON('http://opendata2.epa.gov.tw/AQX.json',function(error,response){
response.forEach(function(e,i){
if(e.SiteName=='前鎮'){
console.log('前鎮,PM2.5:'+e['PM2.5']+',PM10:'+e.PM10);
};
});
});
}
Opendata+Webduino(網頁前端)
知道如何獲取資料並且應用之後，就要來寫點判斷式，接著再對應的狀態下，透過Webduino點亮燈泡，首先看到HTML的部分，一開始先引入對應的JavaScript，然後放入兩個下拉選單、一個顯示文字的區域用來顯示數值，最後就是一個提示文字，如果空污指數太高就會顯示，同時點亮燈泡。
var$content=$('#content'),
$county=$('#county'),
$sitename=$('#sitename'),
$h=$('#h'),
$btn=$('#btn');
varcounty=[];
varsite={};
varresult,led;
varconfig={
PM25:20,
PM10:40
};
再來就是抓取開放資料的json檔，接著對資料做一些轉換，篩選出主要縣市(台北市、新北市...等)以及每個縣市對應的區域(永和、中和...等)，然後再改變選單的時候，把對應的數值顯示出來，如果數值比較高，就會點亮燈泡以及秀出「空氣污染超標！」的文字
boardReady('你的開發板ID',function(board){
board.systemReset();
board.samplingInterval=250;
led=getLed(board,10);
$.get('http://opendata2.epa.gov.tw/AQX.json',function(data){
data.forEach(function(e,i){
county[i]=e.County;
});
//篩選出父選單縣市名稱(不然會重複)
result=county.filter(function(element,index,arr){
returnarr.indexOf(element)===index;
});
//初始化父選單
result.forEach(function(e){
$county.append('
');
if(name[0]>config.PM25||name[1]>config.PM10){
$h.text('空氣污染超標！');
led.on();
}else{
$h.text('');
led.off();
}
}
});
});
完整程式碼：http://bin.webduino.io/sipod/1/edit?html,js,output
Opendata+Webduino(後端)
剛剛我們是使用前端的方法，繼續介紹Webduino後端的用法，如果你有印象，在「聊天室(前後端實作)」有介紹過Webduino後端的用法，首先你要先安裝對應的套件，這邊需要get-json、webduino-js和webduino-blockly。
npminstallwebduino-jswebduino-blocklyget-json
如果你想要在啟動的當下，也有類似對話視窗可以一一輸入資訊的話，可以多安裝inquirer(https://www.npmjs.com/package/inquirer)。
npminstallinquirer
再來就免不了要寫程式了，最主要跟前端一樣，先抓取對應的縣市PM2.5數值，當數值大於多少的時候就亮燈，比較不同的是你可以用一個setInterval間隔一段時間抓取一次資料，就可以24小時放著讓它自動監控了。
require("webduino-js");
require("webduino-blockly");
vargetJSON=require('get-json');
varinquirer=require("inquirer");
varpm=function(a,b,c,d){
boardReady(a,function(board){
board.systemReset();
board.samplingInterval=250;
led=getLed(board,b);
console.log('裝置連線成功...');
_getJSON();
setInterval(function(){
_getJSON();
},10000);
});
function_getJSON(){
getJSON('http://opendata2.epa.gov.tw/AQX.json',function(error,response){
response.forEach(function(e,i){
if(e.SiteName==d){
console.log(d+',PM2.5:'+e['PM2.5']+',PM10:'+e.PM10);
if(e['PM2.5']>c){
led.on();
}
};
});
});
}
};
varpreguntas=[{
type:'input',
name:'device',
message:'DeviceID?',
default:'你的裝置ID',
},{
type:'input',
name:'led',
message:'LEDpin?',
default:'10'
},{
type:'input',
name:'rate',
message:'PM2.5?',
default:'20'
},{
type:'input',
name:'site',
message:'縣市名稱',
default:'前鎮'
}];
inquirer.prompt(preguntas,function(answers){
}).then(function(answers){
console.log(answers.device+','+answers.led+','+answers.rate+','+answers.site);
pm(answers.device,answers.led*1,answers.rate*1,answers.site);
});
小結
以上就是拿Opendata來做物聯網應用的範例，雖然說只是點亮一個燈泡，但如果我們可以透過Webduino把各種裝置給虛擬化、網路化、變數化，就可以輕鬆地用網頁前端或後端來操控了。
聯絡我們
如果對於Webduino產品有興趣，歡迎透過下列方式購買：
個人線上購買：https://store.webduino.io/(支援信用卡、超商取貨付款)
企業＆學校採購：來信[email protected]或來電07-3388511。
如果對於這篇教學有任何問題或建議，歡迎透過下列方式聯繫我們：
Email：[email protected](如對於產品有使用上的問題，建議透過Email附上照片或影片聯繫)
Facebook粉絲團：https://www.facebook.com/webduino/
Facebook技術討論社團：https://www.facebook.com/groups/webduino/
Webduino基礎教學
Webduino開發板
馬克一號(介紹)
馬克一號(初始化設定)
WebduinoFly(介紹)
WebduinoFly(初始化設定)
WebduinoSmart(介紹)
WebduinoSmart(初始化設定)
開發板擴充設定
Arduino韌體下載與燒錄
使用WebSocket操控
WebduinoBlockly
認識WebduinoBlockly
WebduinoBlockly基本操作
WebduinoBlockly特殊功能
連動多塊開發板
腳位偵測設定
發光元件
LED
三色LED
LED點矩陣
輸入輸出
繼電器
蜂鳴器
按鈕開關
震動開關
搖桿
紅外線發射接收
環境偵測
超音波偵測
溫濕度偵測
人體紅外線偵測
聲音偵測
光敏電阻
可變電阻
土壤濕度偵測
三軸加速度計
無線感應
RFID
玩具及馬達
伺服馬達
Webduino綜合應用
元件應用
LED(兩顆交互閃爍)
LED(霹靂燈)
LED(語音聲控)
LED(人臉追蹤)
LED(Google表單操控)
三色LED(調色盤)
蜂鳴器(多人協奏)
蜂鳴器(會說話的鬧鐘)
傳感器應用
超音波(改變圖片大小)
超音波(控制LED)
超音波(控制三色LED)
溫濕度(Firebase紀錄)
RFID(控制Youtube)
可變電阻(改變Youtube音量)
聲音偵測(吹點矩陣蠟燭)
玩具改造
Smart自走車(組裝步驟)
Smart自走車(網頁遙控器操控)
Smart自走車(超音波避障)
Smart自走車(溫濕度感測車)
Smart智慧路燈(組裝步驟)
Smart智慧路燈(接線教學)
Smart飛天車(組裝步驟)
Smart飛天車(接線教學)
馬克一號自走車(鍵盤操控)
馬克一號自走車(行動裝置操控)
馬克一號自走車(循跡功能)
WABot機器人(初始化設定)
WABot機器人(基礎操控)
百元玩具車大改造
智慧生活
智慧植栽(水泵)
智慧插座(組裝與操控)
智慧追蹤(伺服馬達+攝影機)
Webduino雲端平台
基本介紹
註冊與登入
Blockly程式積木
Device裝置管理(裝置認證)
Device裝置管理(雲端更新)
兌換券(領取與添加新功能)
發光元件
LCD螢幕
七段顯示器
輸入輸出
MP3播放器
環境偵測
PM2.5細懸浮微粒偵測
顏色感測器
電子羅盤
光度計
溫濕度計
資料庫
Google試算表(設定)
Google試算表(儲存)
Google試算表(讀取)
綜合應用
記錄PM2.5(Google試算表)
玩具改造
Smart智慧小屋（組裝步驟）
Blockly教學
基本功能
變數
流程
文字
數學式
列表
邏輯
迴圈
進階功能
控制台
等待
數值轉換
鍵盤行為
語音聲控
語音朗讀
行動裝置
網頁互動區
文字、點擊、圖片
顏色、按鈕、拉霸
遙控器
Youtube
影像追蹤
創意應用
抽籤並朗讀姓名
大樂透自動選號
隨機組合朗讀語句
語音朗讀逐字稿
小時鐘
語音報時
九九乘法你問我答
BlocklyGames
迷宮
鳥
烏龜
影片
池塘導師
Dr.Smart教學
開發板元件
三色LED
三色LED(色彩輪播)
光敏電阻
光敏電阻(色彩變化)
按鈕開關
按鈕開關(控制顏色)
按鈕開關(控制Youtube)
元件及傳感器
LED
蜂鳴器
震動開關
LED點矩陣
超音波偵測
溫濕度偵測
綜合應用
蜂鳴器(多人協奏)
超音波(倒車雷達)
超音波(控制Youtube)
LED點矩陣(顯示距離)
LED點矩陣(顯示溫度)
按鈕開關(控制蜂鳴器)
實戰智慧插座
基本操控
組裝智慧插座
網頁操控智慧插座
傳感器應用
超音波偵測距離
光線偵測
人體紅外線偵測
聲音偵測
電視機遙控器
按鈕開關
電流急急棒
土壤濕度偵測
RFID感應
進階應用
語音辨識
人臉、顏色追蹤
手機陀螺儀
聊天室(原理)
聊天室(前後端實作)
Google試算表(原理)
Google試算表(前後端實作)
Google地圖(原理)
Google地圖(前後端實作)
Youtube互動
Opendata實作
Node-Red(基礎操作)
Node-Red(Twitter)
Node-Red(E-mail)
日幣匯率(Node-Red爬蟲)
日幣匯率(Node-js爬蟲)
常見問題
Webduino相關
關於Webduino
購買Webduino產品
技術支援與合作
Webduino開發板
關於Webduino開發板
連線相關＆初始化設定問題
Web:Bit相關問題
WebduinoSmart相關問題
其它問題
延伸文章資訊
- 1資料集 - 高雄市政府資料開放
(本筆資料因系統進行調整，API將暫時下架，預計於110年11月底前提供，API連結不變，欄位將進行調整) 提供高雄市政府電子公報閱覽服務. JSON ...
- 2資料集 - 臺南市政府資料開放平台
提供本府台南市政府APP上架中清單，包含app簡介、icon圖片、ios下載網址、android下載網址。 JSON · 國中各校人數統計. 本資料集提供臺南市國中各校人數統計.
- 3以URL存取資料 - 內政資料開放平臺｜MOI Open Data
{format} = 資料格式：json、xml、csv。 ※ 範例：全國役政單位資料 https://od.moi.gov.tw/od/data/api/EA28418E-8956-4790-...
- 4Opendata 實作- Webduino 實戰智慧插座教學
要直接在「網頁前端」使用Opendata，最快的做法大概就是使用jQuery ，這邊用了 .get 的方法，只要三行，剛剛的JSON 資料就全部進到網頁裡了。( 使用console.log 顯示)
- 5政府資料開放平臺
「政府資料開放」(Open Data)為各機關於職權範圍內取得或做成，且依法得公開之各類電子資料，包含文字、數據、圖片、影像、聲音、詮釋資料(metadata)等，以開放格式於 ...
