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

一

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

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

二

首先安裝的是 Node.js 這個(gè)軟件，版本號(hào)是node-v8.11.1。請(qǐng)你打開下面這個(gè)網(wǎng)址，通過(guò)詳細(xì)閱讀阿里云官方文檔來(lái)了解如何安裝。

阿里云官方文檔

零妖在這里總結(jié)一下安裝步驟：

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

2：下載并安裝 VSCode 這個(gè)軟件，這個(gè)軟件對(duì)于90%的程序員來(lái)說(shuō)應(yīng)該是標(biāo)配的，自行百度下載。

3：下載并安裝谷歌瀏覽器，這個(gè)可是必備的，要設(shè)置為系統(tǒng)的默認(rèn)瀏覽器，因?yàn)檎{(diào)試代碼要用到。

4：打開Windows的命令行窗口，復(fù)制幾條命令進(jìn)去再敲回車就行了。下面會(huì)具體說(shuō)咋弄。

5：打開 VSCode 這個(gè)軟件，簡(jiǎn)單設(shè)置一下。下文將會(huì)介紹方法。

6：只需要敲一行代碼，助你新建一個(gè)Web應(yīng)用！

三

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

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

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

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

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

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

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

完成。

四

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

搜索并安裝如下三個(gè)插件：

第一個(gè)： Debugger for Chrome

第二個(gè)： npm

第三個(gè)： Node.js Modules Intellisense

完成。

五

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

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

第二步： 進(jìn)入這個(gè)文件夾，如下圖進(jìn)行操作。

第三步： 輸入 bone init ，然后敲回車，接下來(lái)會(huì)讓你選擇要新建的項(xiàng)目類型，我們選擇Web應(yīng)用就行了。讓你輸入的應(yīng)用名稱和應(yīng)用ID隨便弄個(gè)，這次是做測(cè)試的，先不要管那么多。

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

第四步： 輸入 bone start ，然后敲回車。等待十幾秒左右，谷歌瀏覽器就會(huì)自動(dòng)彈出來(lái)哦！

谷歌瀏覽器自動(dòng)彈出并顯示如下信息：

六

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

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

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