電子發(fā)燒友App
一、新建Web應(yīng)用
新建Web應(yīng)用的前提是已建立有項(xiàng)目。
如何在阿里云上建立項(xiàng)目，可以參見(jiàn)之前的文章如何在阿里云的 IoT Studio頁(yè)面的公開(kāi)的解決方案的基礎(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)境感知解決方案”，“描述”可以寫(xiě)一下對(duì)這個(gè)應(yīng)用的大概解釋，免得應(yīng)用多了，記不住某個(gè)應(yīng)用用來(lái)做什么。
二、建立菜單
此步驟用于建立用戶界面的菜單。
需要注意的是，此處的菜單所包括的子菜單，應(yīng)與下一個(gè)步驟所添加的頁(yè)面一一對(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è)菜單。
三、添加頁(yè)面
1、添加“設(shè)備運(yùn)行總圖”頁(yè)面
如圖3所示，點(diǎn)擊圖3所示界面的“+”，可以新建頁(yè)面。新建頁(yè)面的時(shí)候，可以選擇模板，比如選擇“大屏”下的“通用設(shè)備運(yùn)維大屏”模板。
還可以給上述新增的頁(yè)面修改名字，比如修改頁(yè)面名字為“設(shè)備運(yùn)行總圖”。
圖3 ?在阿里云物聯(lián)網(wǎng)平臺(tái)上給解決方案添加設(shè)備運(yùn)行總圖頁(yè)面
2、添加“設(shè)備管理”頁(yè)面
新建頁(yè)面，如圖4，選擇“設(shè)備管理”模板。將頁(yè)面名修改為“設(shè)備管理”，就獲得了設(shè)備管理頁(yè)面。
圖4 ??阿里云物聯(lián)網(wǎng)平臺(tái)選擇Web應(yīng)用的設(shè)備管理模板
3、設(shè)置訪問(wèn)權(quán)限
在圖5所示界面上，勾選“訪問(wèn)權(quán)限”。
可供的選擇包括“免登錄訪問(wèn)”、“訪問(wèn)限制”。其中，需要先在“應(yīng)用設(shè)置”中設(shè)置鑒權(quán)，按照提示進(jìn)行操作即可。
在圖5所示的界面中，還可以設(shè)置背景圖像。
圖5 ??在阿里云物聯(lián)網(wǎng)平臺(tái)上設(shè)置Web應(yīng)用的訪問(wèn)權(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è)備管理”頁(yè)面的中間，才能夠出現(xiàn)如圖4右側(cè)所示的供“選擇產(chǎn)品”的頁(yè)面。
圖6 ??阿里云物聯(lián)網(wǎng)平臺(tái)上為Web應(yīng)用選擇產(chǎn)品
5、添加“設(shè)備屬性”頁(yè)面
點(diǎn)擊圖7所示的“+”新建頁(yè)面，并選擇“設(shè)備屬性”模板。頁(yè)面名可進(jìn)行修改，比如修改為“設(shè)備屬性”。
同樣的，也可以進(jìn)行權(quán)限的設(shè)置，比如勾選“免登陸訪問(wèn)”，還可以設(shè)置背景圖像。
圖7 ?阿里云物聯(lián)網(wǎng)平臺(tái)上為Web應(yīng)用添加設(shè)備屬性頁(yè)面
通過(guò)點(diǎn)擊圖7所示界面的中間位置，可以在右側(cè)出現(xiàn)“選擇產(chǎn)品”的欄目，同樣的可以選擇已有的產(chǎn)品，或者新創(chuàng)建或新關(guān)聯(lián)其他的產(chǎn)品。
這樣我們就把所有頁(yè)面創(chuàng)建好了，下面我們把頁(yè)面和主菜單綁定起來(lái)。
四、菜單和頁(yè)面綁定
1、綁定單個(gè)頁(yè)面與單個(gè)菜單
左側(cè)點(diǎn)擊頁(yè)面圖標(biāo)，切換到頁(yè)面界面，如圖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)中不具備該紅色方圈）按鈕用于為該菜單綁定頁(yè)面。
圖8 ?阿里云物聯(lián)網(wǎng)平臺(tái)綁定Web應(yīng)用的頁(yè)面和菜單示意圖
點(diǎn)擊該第一個(gè)按鈕，將出現(xiàn)如圖9所示的小窗口。
如圖9所示，在“目標(biāo)鏈接”處將自動(dòng)列出當(dāng)前所有的應(yīng)用頁(yè)面，也就是你按照第三部分所介紹的方法來(lái)創(chuàng)建的頁(yè)面。
在其中一個(gè)頁(yè)面前面的圓圈中點(diǎn)擊選中該頁(yè)面，并點(diǎn)擊“確定”后，則該頁(yè)面與菜單“設(shè)備運(yùn)行總圖”綁定起來(lái)了。
圖9 ?阿里云物聯(lián)網(wǎng)平臺(tái)Web應(yīng)用的頁(yè)面和菜單的綁定方法示意圖
按照上面的方法，就可以依次綁定剩下的其他頁(yè)面和菜單。
2、設(shè)置主頁(yè)
我們需要設(shè)置用戶登錄后看到的第一個(gè)頁(yè)面，也就是主頁(yè)。
如圖10所示，這里我們把“設(shè)備運(yùn)行總圖”設(shè)置為“主頁(yè)”， 勾選“免登陸訪問(wèn)”。
圖10 ?阿里云物聯(lián)網(wǎng)平臺(tái)設(shè)置Web應(yīng)用的主頁(yè)
“設(shè)備管理”頁(yè)面勾選“訪問(wèn)權(quán)限”，其他頁(yè)面勾選“免登陸訪問(wèn)”。這樣應(yīng)用就開(kāi)發(fā)好了，下面就可以發(fā)布應(yīng)用了。
五、發(fā)布應(yīng)用
如圖11所示，綁定好頁(yè)面和菜單后，點(diǎn)擊IoT Studio右上角的“保存”按鈕，然后點(diǎn)擊“預(yù)覽”，如果沒(méi)有問(wèn)題，就點(diǎn)擊“發(fā)布”，填寫(xiě)發(fā)布信息。
圖11 ?在阿里云物聯(lián)網(wǎng)平臺(tái)上發(fā)布Web應(yīng)用
點(diǎn)擊“確定后”，綁定域名，就可以通過(guò)域名查看展示效果了。
六、查看Web應(yīng)用的效果
瀏覽器輸入所綁定的域名，就可以打開(kāi)該Web應(yīng)用。
主頁(yè)展示如圖12所示。
依次點(diǎn)擊圖12左欄所示的其他頁(yè)面的名稱，就可以展示其他頁(yè)面的情況。
至此，一個(gè)基本的多設(shè)備展示和管理應(yīng)用就搭建好了。
圖12 ??用阿里云物聯(lián)網(wǎng)平臺(tái)的IoT Studio搭建的Web應(yīng)用的主頁(yè)示意圖
結(jié)語(yǔ)
本文介紹了如何在阿里云物聯(lián)網(wǎng)平臺(tái)上，根據(jù)個(gè)人業(yè)務(wù)需求，搭建一個(gè)基本的多設(shè)備展示和管理的Web應(yīng)用。lw
工商網(wǎng)監(jiān)
評(píng)論