一、新建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
評(píng)論
查看更多