物聯(lián)網(wǎng)全棧教程-從云端到設備（九）

一

這一篇文章零妖帶你學習全宇宙最簡單的網(wǎng)頁應用開發(fā)框架：Bone Web 框架，這是一個通過敲代碼來制作網(wǎng)頁的框架，非常適合不需要華麗界面的物聯(lián)網(wǎng)項目。如果你動手操作，零妖保證三十分鐘之內能做出來一個Web應用，體驗空前的成就感（深入地做一個好的Web應用就需要你再繼續(xù)研究了）。

這篇文章要介紹安裝兩個電腦軟件，用來編寫和調試網(wǎng)頁代碼，順便再“弄”一個 Hello World 的代碼來體驗一把網(wǎng)頁編寫的感覺（別擔心，不會讓你敲代碼的，零妖教你的是如何移植官方提供的例程代碼）。下篇文章再介紹如何與阿里云服務器以及我們的物聯(lián)網(wǎng)設備對接，當然是通過移植例程的方法來做的嘍。

二

首先安裝的是 Node.js 這個軟件，版本號是node-v8.11.1。請你打開下面這個網(wǎng)址，通過詳細閱讀阿里云官方文檔來了解如何安裝。

阿里云官方文檔

零妖在這里總結一下安裝步驟：

1：下載Node.js這個軟件，并且安裝到你的電腦上（就和安裝電腦QQ一樣簡單，如果你不會弄，那老哥也救不了你啊兄弟），這個軟件的下載地址如下： 軟件下載地址。

2：下載并安裝 VSCode 這個軟件，這個軟件對于90%的程序員來說應該是標配的，自行百度下載。

3：下載并安裝谷歌瀏覽器，這個可是必備的，要設置為系統(tǒng)的默認瀏覽器，因為調試代碼要用到。

4：打開Windows的命令行窗口，復制幾條命令進去再敲回車就行了。下面會具體說咋弄。

5：打開 VSCode 這個軟件，簡單設置一下。下文將會介紹方法。

6：只需要敲一行代碼，助你新建一個Web應用！

三

你要保證自己已經(jīng)安裝了Node.js這個軟件。

正式開始之前，你需要去阿里云的Bone,然后點擊右上角的登陸，進入Bone開發(fā)框架的官網(wǎng)。再點開一個網(wǎng)頁，獲取一個系統(tǒng)自動分配的賬號密碼，我們把它叫做“bnpm賬號信息”。這個在接下來的安裝過程中會用到。

Windows的電腦系統(tǒng)都會有一個叫做 命令行 的東西，進入的方法如下（WIN10的64位系統(tǒng)）：

進入命令行的界面之后，需要依次運行如下3條命令，你需要復制一條命令，粘貼上去敲回車執(zhí)行完畢，然后再復制一條執(zhí)行。

第一步： npm install -g bnpm --registry=https://npm.aliplus.com/api

第二步： （這一步要根據(jù)提示輸入bnpm賬號和密碼） bnpm login

第三步： bnpm install -g @bone/bone-cli

完成。

四

接下來設置VSCode這個軟件。要保證已經(jīng)安裝了VSCode和谷歌瀏覽器。好了，打開VSCode吧。

搜索并安裝如下三個插件：

第一個： Debugger for Chrome

第二個： npm

第三個： Node.js Modules Intellisense

完成。

五

至此，開發(fā)Web應用（也就是網(wǎng)頁）所需要的所有準備工作都已經(jīng)完成，零妖給你兩分鐘時間去做人生第一個Web應用 Hello World !

第一步： 在桌面新建一個文件夾，名字就叫做 Web 吧。你可以自己起名字。

第二步： 進入這個文件夾，如下圖進行操作。

第三步： 輸入 bone init ，然后敲回車，接下來會讓你選擇要新建的項目類型，我們選擇Web應用就行了。讓你輸入的應用名稱和應用ID隨便弄個，這次是做測試的，先不要管那么多。

通過這一行代碼，你已經(jīng)完成了第一個Web應用的創(chuàng)建工作了，接下來零妖老哥教你如何查看你的網(wǎng)頁。

第四步： 輸入 bone start ，然后敲回車。等待十幾秒左右，谷歌瀏覽器就會自動彈出來哦！

谷歌瀏覽器自動彈出并顯示如下信息：

六

恭喜你，你的第一個基于Bone開發(fā)框架的應用程序，已經(jīng)通過一行代碼完成了！

不要著急去想什么編程語法，零妖告訴你用這個框架編寫代碼實質上是符合JS語法規(guī)范的，但是你完全不用立馬去學習JS語法規(guī)則，也不用學習HTML。正確的學習方法是，當你用到某個功能的時候，去找一下官方對這個功能的描述以及提供的例程代碼，然后移植它，修改它為己所用即可。

下一篇文章，咱們來移植一個儀表盤，并打通設備到網(wǎng)頁的數(shù)據(jù)！