前期準備

開發(fā)工具

在開發(fā)軟件之前我們需要先準備一個離線版appinventor,就是這個東西

然后是阿里云互聯(lián)網(wǎng)所需要的MQTT客戶端組件

當然還有必不可少的Android系統(tǒng)的手機。

軟件使用與組件導入

軟件使用

首先是進入開發(fā)界面，一次點擊下方第一、二、三、五個按鈕，然后就會進入網(wǎng)頁版的登錄界面

此處點擊Click Here to use your Google Account to login，然后電機login in直接登錄，進入開發(fā)界面

點擊開始新工程,給項目命名后點擊OK進行開發(fā)。

界面左側(cè)菜單欄是各種組件、布局方式等，中間為界面預覽，右側(cè)為屬性欄。

MQTT客戶端組件導入

本教程基于阿里云物聯(lián)網(wǎng)，需要使用MQTT客戶端，appinventor內(nèi)無現(xiàn)成的MQTT客戶端，需要通過外部導入。點擊左側(cè)菜單欄最下方的Extension，點擊import extension,找到提前準備好的MQTT組件導入即可。

看見這個就是導入成功了??！

工具資源可以個人空間內(nèi)找或者去我們的GitHub

github鏈接：HDUGEEK/mqtt: mqtt插件和appinventor (github.com)

（題外話，你C是真離譜，免費資源還要下載碼，你所熱愛的，就是你的生活?。?/p>

前置知識

看看這個視頻的P2和P3，可以對mqtt和阿里云的操作有很深入的了解，對你接下來的開發(fā)會很有幫助：

【物聯(lián)網(wǎng)MQTT協(xié)議解析、報文構(gòu)造、程序設計、項目實戰(zhàn)】 https://www.bilibili.com/video/BV1Jz4y1X7aH/?share_source=copy_web&vd_source=e1c657085d91a6a8e457baf141d1a49a

正式開發(fā)

界面設計

界面設計首先需要理解布局（Layout）中的水平布置（HorizontalArrangement）和 垂直布置（VerticalArrangement）。水平布置即在此框區(qū)域內(nèi)的所有組件都是水平排列，垂直布置即在此框區(qū)域內(nèi)的所有組件均是垂直排列，同時水平布置和垂直布置可相互嵌套。

嵌套示例，在水平布置中嵌套了一個垂直布置，垂直布置與其他組件也是水平關(guān)系，可將布置也看成一個組件，右側(cè)紅框內(nèi)可看到整體布局，最右側(cè)是選中的組件的屬性，可對組件進行設置。

了解了基本的布局方法，我們就可以簡單的搭建出整體的界面，界面中包含MQTT的三元組，連接、斷開、刷新、開關(guān)按鈕與狀態(tài)指示標簽，加入MQTT客戶端組件。后期其他開發(fā)中可根據(jù)需要添加組件。

代碼設計

整體代碼設計思路圍繞MQTT的使用與人機交互的正確性展開。

首先是連接阿里云服務器。

如何創(chuàng)建產(chǎn)品、設備和topic

重點：${deviceName}在不同的設備中會被替換成對應的名字，例如你在該產(chǎn)品下創(chuàng)建了個 D001 設備，那么該設備的topic就是：

/你自己的Product/D001/user/test

在添加產(chǎn)品和創(chuàng)建設備完成后，可以在設備的詳情頁中獲得MQTT協(xié)議所需的三元組，點擊MQTT連接參數(shù)后的查看即可獲得。

將相應的參數(shù)復制到文本框中即可完成所需參數(shù)的獲取。點擊右上角的Blocks進入代碼編寫界面。

appinventor的代碼編寫相對簡單明了，采用的是搭積木的方式。左側(cè)中選擇需要的模塊后在右側(cè)編輯區(qū)內(nèi)進行組合即可完成編寫。

首先是連接部分的代碼。在左側(cè)找到加入的MQTT客戶端組件，選擇連接組件，將相應的內(nèi)容連接即可完成。連接由按鈕進行觸發(fā)，所以采用以下這種形式。端口號1883是固定的，所以直接采用數(shù)字模塊進行連接。

接下來時連接狀態(tài)指示的標簽了。新手容易寫成這樣的形式。

雖然看起來沒有任何問題，但是在實踐過程中則會出現(xiàn)一個奇怪的問題。在手機端測試中會顯示連接失敗

如果直接去代碼或者布局上尋找連接失敗的原因，那么就必定抓耳撓腮不知為何。但是如果進入阿里云物聯(lián)網(wǎng)控制臺會發(fā)現(xiàn)其實是連接成功了的

這說明我們的代碼與MQTT客戶端模組的使用是沒有問題的，只是顯示出來的結(jié)果是錯誤的。要解決這個問題，我們可以選擇去使用一個刷新按鈕單獨獲取連接情況，代碼設計如下

這樣設計之后就能過通過按下刷新按鈕獲取正確的連接狀態(tài)，讀者可以自行嘗試驗證。那究竟是為什么會有這樣的情況發(fā)生呢？以下是個人猜測的一種有可能的解釋。appinventor代碼中一個模塊內(nèi)的代碼是并行執(zhí)行的，沒有順序之分。在第一中寫法中連接請求與狀態(tài)判斷請求同時發(fā)出，連接狀態(tài)得到的相應就是未連接時的響應，所以就會有顯示連接失敗但是實際上卻是連接成功了的結(jié)果。那么根據(jù)得到的假設進行修改，人為的錯開兩個請求的時間即可得到正確的結(jié)果。當然更優(yōu)的解法是添加一個定時器延時后自動進行判斷，本文不涉及，讀者可嘗試自行設計。

同理設計斷開按鈕的代碼，就完成了連接部分的設計。

接下去我們設計手機與阿里云服務器之間的通信部分，即開、關(guān)按鈕的代碼設計。在MQTT客戶端中找到相應的模塊，填寫信息之后即完成了該部分的編寫。使用的是物理模型的topic所以發(fā)送的格式要符合JSON，這樣才能被阿里云服務器正確的接受，從而改變其物理模型的值。其中的retained和qos一半不改變，而topic和message可以根據(jù)需要使用文本框來輸入。此處的狀態(tài)_lab主要用于觀察發(fā)送了什么信息，直接放一起即可。至此手機向阿里云服務器發(fā)送信息已經(jīng)編寫完畢。

接下來是接受服務器的消息。使用MQTT客戶端組件中的模塊就能夠?qū)⒔邮艿降男畔⒅苯语@示在標簽欄中。最后添加一個掉線提示，代碼部分就全部編寫完畢了。

注：消息接收第二種方式（這種使用的是阿里云上固定的topic，所以需要對收到的json數(shù)據(jù)進行解析。僅供參考，想用哪種隨自己喜好即可）

1和3代表值，是固定的，要改的話只用改2的關(guān)鍵字就行，至于2的關(guān)鍵字是什么每個人不同，根據(jù)你的數(shù)據(jù)格式來（可以先用網(wǎng)絡調(diào)試助手看看自己個數(shù)據(jù)格式內(nèi)容）

軟件編譯與安裝

找到頂上的Build,選擇apk文件，稍等之后就能夠得到安裝包文件，兩種方法都能夠得到安裝包，將安裝包導入到手機后進行安裝即可進行測試，通過阿里云互聯(lián)網(wǎng)的日志服務、在線調(diào)試和設備中的物模型數(shù)據(jù)就可以完成功能的驗證了，最后的驗證部分就由讀者自行完成吧。

本文到此就全部結(jié)束了哦，歡飲在評論區(qū)討論＜（＾－＾）＞?。。。?span toymoban-style="hidden">文章來源地址http://www.zghlxwxcb.cn/news/detail-454855.html