一、新建Web應(yīng)用

新建Web應(yīng)用的前提是已建立有項(xiàng)目。

如何在阿里云上建立項(xiàng)目，可以參見之前的文章如何在阿里云的 IoT Studio頁面的公開的解決方案的基礎(chǔ)上新建項(xiàng)目。

這里，我們不再介紹如何創(chuàng)建項(xiàng)目，而是在原有項(xiàng)目的基礎(chǔ)上，添加一個(gè)新的Web應(yīng)用。

圖1 ??阿里云物聯(lián)網(wǎng)平臺(tái)上新建自己的Web應(yīng)用

新建Web應(yīng)用的方法如圖1所示，“應(yīng)用名稱”是可以自己定的，“所屬項(xiàng)目”可以選之前已經(jīng)創(chuàng)建的項(xiàng)目“環(huán)境感知解決方案”，“描述”可以寫一下對(duì)這個(gè)應(yīng)用的大概解釋，免得應(yīng)用多了，記不住某個(gè)應(yīng)用用來做什么。

二、建立菜單

此步驟用于建立用戶界面的菜單。

需要注意的是，此處的菜單所包括的子菜單，應(yīng)與下一個(gè)步驟所添加的頁面一一對(duì)應(yīng)。

如圖2所示，選擇導(dǎo)航布局，并點(diǎn)擊“新增主菜單”。

圖2 ?在阿里云物聯(lián)網(wǎng)平臺(tái)上給解決方案增加主菜單

在圖2所示的界面上，點(diǎn)擊“新增主菜單”，可以依次增加“設(shè)備運(yùn)行總圖”“設(shè)備管理”“設(shè)備屬性”“RAK產(chǎn)品展示”4個(gè)菜單。

三、添加頁面

1、添加“設(shè)備運(yùn)行總圖”頁面

如圖3所示，點(diǎn)擊圖3所示界面的“+”，可以新建頁面。新建頁面的時(shí)候，可以選擇模板，比如選擇“大屏”下的“通用設(shè)備運(yùn)維大屏”模板。

還可以給上述新增的頁面修改名字，比如修改頁面名字為“設(shè)備運(yùn)行總圖”。

圖3 ?在阿里云物聯(lián)網(wǎng)平臺(tái)上給解決方案添加設(shè)備運(yùn)行總圖頁面

2、添加“設(shè)備管理”頁面

新建頁面，如圖4，選擇“設(shè)備管理”模板。將頁面名修改為“設(shè)備管理”，就獲得了設(shè)備管理頁面。

圖4 ??阿里云物聯(lián)網(wǎng)平臺(tái)選擇Web應(yīng)用的設(shè)備管理模板

3、設(shè)置訪問權(quán)限

在圖5所示界面上，勾選“訪問權(quán)限”。

可供的選擇包括“免登錄訪問”、“訪問限制”。其中，需要先在“應(yīng)用設(shè)置”中設(shè)置鑒權(quán)，按照提示進(jìn)行操作即可。

在圖5所示的界面中，還可以設(shè)置背景圖像。

圖5 ??在阿里云物聯(lián)網(wǎng)平臺(tái)上設(shè)置Web應(yīng)用的訪問權(quán)限

4、選擇產(chǎn)品

在圖6所示的界面，可以點(diǎn)擊“選擇產(chǎn)品”，這時(shí)候，你之前創(chuàng)建的產(chǎn)品就都可以進(jìn)行選擇，可以一次選擇一個(gè)產(chǎn)品，也可以一次選擇多個(gè)產(chǎn)品。

如圖6所示，點(diǎn)擊“選擇產(chǎn)品”之后，就可以彈出一個(gè)窗口，在該窗口有產(chǎn)品列表（目前只有RAK5205可供選擇），可以選擇產(chǎn)品RAK5205。

點(diǎn)擊“產(chǎn)品管理”，還可以多關(guān)聯(lián)一些產(chǎn)品，也可以創(chuàng)建產(chǎn)品。具體如何在阿里云物聯(lián)網(wǎng)平臺(tái)上關(guān)聯(lián)產(chǎn)品、或者創(chuàng)建產(chǎn)品，可以查看之前的文章如何在阿里云物聯(lián)網(wǎng)平臺(tái)上添加自己的LoRa節(jié)點(diǎn)設(shè)備。

需要注意的是，點(diǎn)擊“設(shè)備管理”頁面的中間，才能夠出現(xiàn)如圖4右側(cè)所示的供“選擇產(chǎn)品”的頁面。

圖6 ??阿里云物聯(lián)網(wǎng)平臺(tái)上為Web應(yīng)用選擇產(chǎn)品

5、添加“設(shè)備屬性”頁面

點(diǎn)擊圖7所示的“+”新建頁面，并選擇“設(shè)備屬性”模板。頁面名可進(jìn)行修改，比如修改為“設(shè)備屬性”。

同樣的，也可以進(jìn)行權(quán)限的設(shè)置，比如勾選“免登陸訪問”，還可以設(shè)置背景圖像。

圖7 ?阿里云物聯(lián)網(wǎng)平臺(tái)上為Web應(yīng)用添加設(shè)備屬性頁面

通過點(diǎn)擊圖7所示界面的中間位置，可以在右側(cè)出現(xiàn)“選擇產(chǎn)品”的欄目，同樣的可以選擇已有的產(chǎn)品，或者新創(chuàng)建或新關(guān)聯(lián)其他的產(chǎn)品。

這樣我們就把所有頁面創(chuàng)建好了，下面我們把頁面和主菜單綁定起來。

四、菜單和頁面綁定

1、綁定單個(gè)頁面與單個(gè)菜單

左側(cè)點(diǎn)擊頁面圖標(biāo)，切換到頁面界面，如圖8所示。

在圖8所示界面上，點(diǎn)擊“配置”。

這時(shí)候，在右邊欄目中的下方，出現(xiàn)“菜單配置”，里面將顯示你按照上面第二部分所介紹的方法所創(chuàng)建的菜單。當(dāng)你將鼠標(biāo)停留在某個(gè)菜單的名稱上的時(shí)候，如圖8所示，停留在菜單“設(shè)備運(yùn)行總圖”上時(shí)，右邊將出現(xiàn)三個(gè)小按鈕，第一個(gè)（即被紅色方圈圈住的，此為本文加上去的，阿里云平臺(tái)中不具備該紅色方圈）按鈕用于為該菜單綁定頁面。

圖8 ?阿里云物聯(lián)網(wǎng)平臺(tái)綁定Web應(yīng)用的頁面和菜單示意圖

點(diǎn)擊該第一個(gè)按鈕，將出現(xiàn)如圖9所示的小窗口。

如圖9所示，在“目標(biāo)鏈接”處將自動(dòng)列出當(dāng)前所有的應(yīng)用頁面，也就是你按照第三部分所介紹的方法來創(chuàng)建的頁面。

在其中一個(gè)頁面前面的圓圈中點(diǎn)擊選中該頁面，并點(diǎn)擊“確定”后，則該頁面與菜單“設(shè)備運(yùn)行總圖”綁定起來了。

圖9 ?阿里云物聯(lián)網(wǎng)平臺(tái)Web應(yīng)用的頁面和菜單的綁定方法示意圖

按照上面的方法，就可以依次綁定剩下的其他頁面和菜單。

2、設(shè)置主頁

我們需要設(shè)置用戶登錄后看到的第一個(gè)頁面，也就是主頁。

如圖10所示，這里我們把“設(shè)備運(yùn)行總圖”設(shè)置為“主頁”， 勾選“免登陸訪問”。

圖10 ?阿里云物聯(lián)網(wǎng)平臺(tái)設(shè)置Web應(yīng)用的主頁

“設(shè)備管理”頁面勾選“訪問權(quán)限”，其他頁面勾選“免登陸訪問”。這樣應(yīng)用就開發(fā)好了，下面就可以發(fā)布應(yīng)用了。

五、發(fā)布應(yīng)用

如圖11所示，綁定好頁面和菜單后，點(diǎn)擊IoT Studio右上角的“保存”按鈕，然后點(diǎn)擊“預(yù)覽”，如果沒有問題，就點(diǎn)擊“發(fā)布”，填寫發(fā)布信息。

圖11 ?在阿里云物聯(lián)網(wǎng)平臺(tái)上發(fā)布Web應(yīng)用

點(diǎn)擊“確定后”，綁定域名，就可以通過域名查看展示效果了。

六、查看Web應(yīng)用的效果

瀏覽器輸入所綁定的域名，就可以打開該Web應(yīng)用。

主頁展示如圖12所示。

依次點(diǎn)擊圖12左欄所示的其他頁面的名稱，就可以展示其他頁面的情況。

至此，一個(gè)基本的多設(shè)備展示和管理應(yīng)用就搭建好了。

圖12 ??用阿里云物聯(lián)網(wǎng)平臺(tái)的IoT Studio搭建的Web應(yīng)用的主頁示意圖

結(jié)語

本文介紹了如何在阿里云物聯(lián)網(wǎng)平臺(tái)上，根據(jù)個(gè)人業(yè)務(wù)需求，搭建一個(gè)基本的多設(shè)備展示和管理的Web應(yīng)用。lw