一
有些坑零妖已經跳過了，所以就直接放出四個**，裡面都是乾貨。整個物聯網彈幕器的專案中的web應用所遇到的問題，都是通過瀏覽這四個**來解決的。
bone web 的官方介紹
ui元件的詳細介紹
資料視覺化元件
物聯網裝置相關的api說明
注意：使用一些元件的時候，要先安裝它們到電腦上。然後再修改package.json這個檔案，把對這個元件的依賴新增進去，這樣上傳到伺服器之後網頁就會正常執行。具體方法零妖接下來會說。
二我們的目標是把裝置上報的溫度資料通過儀錶盤的形式顯示到網頁上。在網頁上顯示乙個儀錶盤的**最簡單的做法就是去複製別人的**然後簡單修改一下啊。我們用到的其實是乙個叫做「資料視覺化」的元件，這個元件零妖認為在物聯網專案中將會經常用到，因為大資料和物聯網無非就是一些資料的交換和顯示。
進入 #/gauge/basic-gauge ，檢視react的官方例程**。
通過vscode開啟我們已經初始化好的那個web應用，零妖是直接在桌面上新建了乙個叫做 web 的資料夾，裡面就是全部需要的檔案。用vscode直接開啟這個資料夾就算作開啟整個專案了（其實你也可以用其他文字編輯器開啟對應的檔案）。然後開啟index.js這個檔案，我們將要重點編寫它裡面的**。其他沒有涉及的地方就不要管了，反正最後達到目的就行了。
接下來開始複製官方**，先讓咱的網頁上顯示出乙個和例程一模一樣的儀錶盤再說。
寫**講究乙個「穩」字，咱們一步一步來，慎防粗心大意導致出錯。先把要import的東西給複製過來，執行一下看看會不會出錯。
直接複製到index.js這個檔案的前面，然後儲存這個檔案，開啟「終端」，啟動web服務。詳解見下圖。
結果就是，出錯了。下圖這個錯誤提示是谷歌瀏覽器直接顯示的。
遇到這種問題，唯一的解決方案就是安裝這個元件。方法依然很簡單，一行**搞定。開啟命令列，然後輸入如下**並回車即可完成 bnpm install -g viser-react 。如果你是安裝別的元件，那麼後面的viser-react換成別的元件的名字即可完成。
為了完美地完成這個流程，你還需要再檢視一下它的版本號，一行**搞定：npm list -g viser-react 。
然後用vscode開啟package.json這個檔案，新增如下內容：
最後，在vscode的「終端」裡面，執行乙個命令來結束新增外部元件的工作： bnpm install
好了，零妖已經教會你安裝乙個外部元件的方法了，如果你遇到了別的元件不是系統自帶的，那麼你就可以通過這種方法來安裝，是不是很簡單啊。你再儲存一下index.js這個檔案，鍵盤快捷鍵 ctrl+s ，那麼谷歌瀏覽器就會自動根據當前的**進行重新整理，如果不出意外這次肯定沒問題了，不過顯示的頁面還是 hello bone 。
四一切ok之後，你就可以把 import 這部分內容之後的全部**給刪掉了，因為沒有用啊，我們想要的是乙個儀錶盤。直接把儀錶盤例程中，import之後的**複製貼上一下，然後儲存檔案，那麼谷歌瀏覽器會自動重新整理，見證奇蹟吧！乙個一模一樣的儀錶盤哦。
然後你就不要怕犯錯，不斷猜測某個數值可能是什麼意思，然後修改它觀察顯示效果，當然如果能參考官方說明最好，因為有的元件會做乙個手冊告訴你哪些引數是什麼意思。這個過程是要靠你不斷去實踐探索的，光靠看書是沒有用的。
五這篇文章你要靠自己勤勞的雙手來完成乙個儀錶盤的顯示，你自己要調整一下它的大小什麼的，零妖就不在這裡限制你的想象力了。
原文
物聯網全棧教程 從雲端到裝置（一）
一2016年的時候，我還在學校裡面準備著畢業 當時做的課題是 乙個挖掘機上面的乙個繼電器的壽命。我們的想法是檢測其吸合的次數，然後根據吸合的次數來預計其壽命，這個想法很簡單。因為乙個繼電器失效之前通常會正常吸合一定的次數比如10w次。二當時還是乙個愣頭青，想法簡單。實際去做的時候才發現事情遠沒有想的...
物聯網全棧教程 從雲端到裝置（二）
一二三 乙個完整的物聯網專案不是乙個硬體的事情，也不是乙個雲端軟體的事情，而是兩者的配合。既然稱之為物聯網，那麼我們講究兩個字 聯網。好吧，將會涉及到兩個東西，我們稱之為上行資料和下行資料。只要我們的裝置能夠做到上報資料和接收資料，那就夠了，剩下的事情無非就是處理一下這些資料。咱的彈幕器實戰專案將會...
物聯網全棧教程 從雲端到裝置（六）
一 物聯網專案在開發初期，需要雲端和裝置端兩個工種的工程師一起談談實現的技術細節。有乙個叫作alink協議的語言，成功解決了兩個物種之間交流困難的世紀難題！alink協議是針對物聯網開發領域設計的一種資料交換規範。裝置端按照這個簡單的規範把資料組織一下傳送給雲端，雲端工程師也懂這個簡單的規範，可以直...