一、新建Web應用

新建Web應用的前提是已建立有項目。

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

這里，我們不再介紹如何創建項目，而是在原有項目的基礎上，添加一個新的Web應用。

圖1 ??阿里云物聯網平臺上新建自己的Web應用

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

二、建立菜單

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

需要注意的是，此處的菜單所包括的子菜單，應與下一個步驟所添加的頁面一一對應。

如圖2所示，選擇導航布局，并點擊“新增主菜單”。

圖2 ?在阿里云物聯網平臺上給解決方案增加主菜單

在圖2所示的界面上，點擊“新增主菜單”，可以依次增加“設備運行總圖”“設備管理”“設備屬性”“RAK產品展示”4個菜單。

三、添加頁面

1、添加“設備運行總圖”頁面

如圖3所示，點擊圖3所示界面的“+”，可以新建頁面。新建頁面的時候，可以選擇模板，比如選擇“大屏”下的“通用設備運維大屏”模板。

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

圖3 ?在阿里云物聯網平臺上給解決方案添加設備運行總圖頁面

2、添加“設備管理”頁面

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

圖4 ??阿里云物聯網平臺選擇Web應用的設備管理模板

3、設置訪問權限

在圖5所示界面上，勾選“訪問權限”。

可供的選擇包括“免登錄訪問”、“訪問限制”。其中，需要先在“應用設置”中設置鑒權，按照提示進行操作即可。

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

圖5 ??在阿里云物聯網平臺上設置Web應用的訪問權限

4、選擇產品

在圖6所示的界面，可以點擊“選擇產品”，這時候，你之前創建的產品就都可以進行選擇，可以一次選擇一個產品，也可以一次選擇多個產品。

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

點擊“產品管理”，還可以多關聯一些產品，也可以創建產品。具體如何在阿里云物聯網平臺上關聯產品、或者創建產品，可以查看之前的文章如何在阿里云物聯網平臺上添加自己的LoRa節點設備。

需要注意的是，點擊“設備管理”頁面的中間，才能夠出現如圖4右側所示的供“選擇產品”的頁面。

圖6 ??阿里云物聯網平臺上為Web應用選擇產品

5、添加“設備屬性”頁面

點擊圖7所示的“+”新建頁面，并選擇“設備屬性”模板。頁面名可進行修改，比如修改為“設備屬性”。

同樣的，也可以進行權限的設置，比如勾選“免登陸訪問”，還可以設置背景圖像。

圖7 ?阿里云物聯網平臺上為Web應用添加設備屬性頁面

通過點擊圖7所示界面的中間位置，可以在右側出現“選擇產品”的欄目，同樣的可以選擇已有的產品，或者新創建或新關聯其他的產品。

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

四、菜單和頁面綁定

1、綁定單個頁面與單個菜單

左側點擊頁面圖標，切換到頁面界面，如圖8所示。

在圖8所示界面上，點擊“配置”。

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

圖8 ?阿里云物聯網平臺綁定Web應用的頁面和菜單示意圖

點擊該第一個按鈕，將出現如圖9所示的小窗口。

如圖9所示，在“目標鏈接”處將自動列出當前所有的應用頁面，也就是你按照第三部分所介紹的方法來創建的頁面。

在其中一個頁面前面的圓圈中點擊選中該頁面，并點擊“確定”后，則該頁面與菜單“設備運行總圖”綁定起來了。

圖9 ?阿里云物聯網平臺Web應用的頁面和菜單的綁定方法示意圖

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

2、設置主頁

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

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

圖10 ?阿里云物聯網平臺設置Web應用的主頁

“設備管理”頁面勾選“訪問權限”，其他頁面勾選“免登陸訪問”。這樣應用就開發好了，下面就可以發布應用了。

五、發布應用

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

圖11 ?在阿里云物聯網平臺上發布Web應用

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

六、查看Web應用的效果

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

主頁展示如圖12所示。

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

至此，一個基本的多設備展示和管理應用就搭建好了。

圖12 ??用阿里云物聯網平臺的IoT Studio搭建的Web應用的主頁示意圖

結語

本文介紹了如何在阿里云物聯網平臺上，根據個人業務需求，搭建一個基本的多設備展示和管理的Web應用。lw