MIT App Inventor 2 MQTT

MIT App Inventor 2 用積木來寫手機上的 APP 程式，非常方便。但是沒有 MQTT 的功能，須要安裝擴充程式。這邊使用的是 Ullis Roboter Seite 的 AI2 MQTT Extension：

把畫面往下捲到 Download 點選下載連結，檔名為 UrsAI2Paho.ZIP。解開壓縮檔會得到一個資料夾，內容如下：

我們會需要用到 de.ullisroboterseite.ursai2pahomqtt.aix 這個檔案，其他資料夾都是參考的資料。

接著登入到 MIT App Inventor 2 網站，開啟新的專案。在左邊元件面板點開「擴充套件」，再點選「匯入擴充套件」，然後選取剛才解壓縮得到的 de.ullisroboterseite.ursai2pahomqtt.aix 上傳上去。

完成後就會看到有一個 UrsPahoMqttClient 元件，然後把這個元件拉到中間的「工作面板」畫面裡，但因為這個元件是「不可見的元件」，所以只會出現在最底下。

然後在右邊的元件內容裡，「Broker」填入你要使用的 MQTT Broker 伺服器網址，「Port」若伺服器沒有特別指定則沿用內定的 1883。

接下來的畫面佈置請參考下列畫面：

 畫面中有二個標籤是文字內容預先清除的：「連線狀態」、「接收到的訊息」。

切換到程式設計畫面，將連線按鈕.被點選放入UrsPahoMqttClient1「連線」積木、斷線按鈕.被點選放入 UrsPahoMqttClient1「斷開連線」積木。

接下來要顯示是否已經連線到 Broker，若有連線則訂閱我們指定的主題，使用 UrsPahoMqttClient1.ConnectionStateChanged 積木(連線狀態改變)、UrsPahoMqttClient1.Subscribe(訂閱)：

「送出訊息」的按鈕填入 UrsPahoMqttClient1.Publish 發佈按鈕：

最後在收到訊息時，要顯示在「接收到的訊息」標籤上，使用 UrsPahoMqttClient1.收到簡訊積木：

以上都完成後，就可以開始測試我們的 APP 啦！因為 MQTT 至少是要有二邊互相測試，一邊用我們做的 APP，另一邊就使用法蘭斯老師用 JavaScript 寫的網頁版 MQTT Client 來做測試。我們設定 APP 向網頁 MQTT 方向的主題為 a，網頁 MQTT 向 APP 方向的主題為 b，並且在網頁版也把 Broker (主機)的網址也設定好，然後按下「設定」就會連上伺服器，連線成功會看到底下有 connected 的字：

手機 APP 端記得訂閱跟發佈的主題要跟網頁端相反，按下「連線」鈕，連線成功則會看到「已連線」的訊息：

然後我們在手機端輸入發佈的內容，並按下「送出訊息」的按鈕。

我們就可以在網頁端的「接收訊息」看到收到的訊息。

接著我們在網頁端的發布內容填入訊息，並且按下「發布」鈕。

然後我們可以在手機端「接收到的訊息」看到網頁端傳來的訊息，這樣子就表示我們的 MQTT APP 已經成功了。