基于App Inventor的多人協作繪畫板App的設計與實現

楊道全

摘要：該文基于App Inventor系統，運用 MQTT 即時通信技術，設計并實現了一個能夠多人協作繪畫的手機應用。在教學實踐中，由于App Inventor系統不要求學生先學習編程語法就能開始編程，極大地降低編程門檻。通過講解該實例的開發，對培養學生的編程興趣，增強學生對網絡通信技術的理解有較好的效果。

關鍵詞：圖形化編程;App Inventor;畫板;MQTT

中圖分類號：TP319? ? ? 文獻標識碼：A

文章編號：1009-3044（2022）16-0097-03

1 引言

智能手機的普及，各種各樣的手機應用滲透到使用者的工作和生活中。盡管如此，智能手機的用戶仍時常找不到合適使用的手機應用，想要自己開發卻苦于沒有掌握編程技術?！癆pp Inventor的出現旨在普及手機應用開發技術，并在各種教育環境中用作學習計算思維的工具，教人們構建應用程序以解決工作與生活中的問題，讓普通人也能開發屬于自己的手機應用。”[1-2]本文基于App Inventor系統設計和實現的手機應用，為編程愛好者和計算思維教學提供參考。

2 相關技術

2.1 App Inventor技術簡介

“App Inventor是一個直觀的可視化編程環境，允許每個人為 Android 手機、iPhone 和 Android/iOS 平板電腦構建功能齊全的應用程序。那些剛接觸App Inventor的人，可以在 30 分鐘內完成第一個簡單應用程序的制作。App Inventor項目旨在幫助所有人，尤其是年輕人，從技術消費轉向技術創造，從而實現軟件開發的普及化?！盵3]截至本文完稿時，App Inventor支持 iPhone（iOS）應用的功能尚未開發完成，還未在官方服務器[4]上線。

App Inventor基于 Apache2 協議開源，因此在國內外有很多個分支版本，本文選用的是國內的 WxBit 圖形化編程系統。該版本針對國內用戶做了大量本地化的開發工作，支持多點觸控并且提供MQTT客戶端組件，支持多人同時連接調試和跨網段調試，對使用者更加友好，也更加適合用于網絡教學。

2.2 MQTT技術簡介

MQTT（Message Queuing Telemetry Transport，消息隊列遙測傳輸協議）由 IBM 在1999年發布，構建于 TCP/IP 協議之上，是一種基于發布/訂閱模式的輕量級二進制網絡通信協議。由于 MQTT 協議靈活的訂閱機制、服務質量（Quality of Service）、遺愿消息（Will Message）等特性，適用于低帶寬、不可靠的網絡下提供實時可靠的消息服務，使其在物聯網、小型設備、移動應用等方面有廣泛的應用[5]。MQTT 的訂閱模式如圖1所示。

3 系統設計

3.1 啟動界面設計

本文設計的多人協作繪畫板，允許多位安裝該應用的用戶同時繪畫，每一位用戶所繪制的圖畫，即時在其他用戶的畫板中顯示。在應用啟動時要求用戶填寫畫板名稱，只有使用相同名稱畫板的用戶，才能在一起繪畫，這樣能夠避免多人同時使用該應用時造成混亂。原型設計如圖2所示。

3.2 繪畫界面設計

用戶填寫畫板名稱進入后，即可開始繪畫。默認選中黑色的畫筆，用戶手指按在屏幕上移動，移動的軌跡連接起來，就是所畫出的線條。允許多個手指同時按在屏幕上繪畫，以便用戶可以快捷畫出多層的線條或其他特殊的效果。應用根據手指按在屏幕的順序給予編號，可以為每個序號的手指設置不同的畫筆粗細和顏色。原型設計如圖3所示。

3.3 協作設計

用戶輸入畫板名稱開始繪畫，實際就是向MQTT Broker發布和訂閱畫板名稱設置的主題。當用戶手指（觸控點）在屏幕移動時，應用將接收到的屏幕坐標發送到該主題，本應用和其他使用相同主題的應用都會接收到坐標消息?？紤]到教學所需的可讀性，坐標消息設計為JSON文本，數據結構設計如下：

{"id"："client1"，"paths"：{"1"：{"size"：1，"color"：-16777216，"points"：[[12，10]，[14，20]，[20，30]，[22，43]]}，"2"：{"size"：2，"color"：-20561，"points"：[[100，80]，[90，90]，[93，95]，[93，124]，[99，135]]}}}

id：繪畫板的標識，也是MQTT客戶端的標識，用于區分消息來源。

paths：筆畫記錄，對應觸控點的移動軌跡。

size：畫筆的粗細，單位為dp（Density-independent Pixels）。

color：畫筆的顏色，為ARGB表示顏色對應的整數值。

points：筆畫的坐標點，記錄觸控點依次經過的屏幕坐標。

4 系統實現

打開瀏覽器登錄 WxBit 圖形化編程系統，新建一個名稱為“多人協作繪畫板v1”的項目開始制作。創建項目完成后自動進入編程界面，在項目名稱條的右邊有2個按鈕，代表系統的兩種視圖：組件設計和邏輯設計。在組件設計視圖中擺放好使用到的組件，再切換到邏輯設計視圖完成圖形化編程。

4.1 啟動界面的組件設計

按照設計，在開始繪畫前，需要用戶填寫繪畫板的名稱。Screen1為應用啟動的第一個屏幕，首先在Screen1的組件屬性中，將對齊方式設置為“上中”，屏幕方向設置為“鎖定橫屏”，去除“是否顯示狀態欄”和“是否顯示標題欄”前面的勾選。然后從組件面板的“界面布局”中拖入一個水平布局，對齊方式設置為正中，寬度設置為充滿，高度為50dp。再按照圖2的原型設計，添加輸入框和按鈕等其他組件，完成的設計如圖4所示。

4.2 啟動界面的邏輯設計

進入邏輯設計視圖前，先“增加屏幕”，命名為DrawingBoard，也就是點擊“開始繪畫”按鈕后進入的屏幕。當“開始繪畫”按鈕被點擊時，如果畫板名稱不為空，就進入 DrawingBoard 屏幕，否則顯示提示信息。進入邏輯設計視圖，點擊模塊中的“按鈕_開始繪畫”，將“當‘按鈕_開始繪畫被點擊”圖形塊拖進工作面板，開始邏輯設計，完成的設計如圖5所示。

4.3 繪畫界面的組件設計

首先在屏幕屬性中，將屏幕方向設置為“鎖定橫屏”，隱藏狀態欄和標題欄。從“界面布局”中將“層疊布局”拖入工作面板，寬高設置為充滿，再從“繪圖動畫”中拖入畫布放到層疊布局中，寬高設置為充滿。按照圖3的原型設計加入其他組件，完成后如圖6所示。

在工作面板的下方，有三個不可見組件，其中的 MQTT 客戶端用于向 MQTT Broker 發布和訂閱消息，計時器又是什么用途呢？在繪畫時，隨著手指的移動短時間產生大量坐標點信息，如果直接將這些坐標點發布出去，將會發生消息堵塞或者錯位。因為 MQTT Broker 可能對消息的發布頻率有限制，而且由于每次發送消息的網絡通信時間不確定，相差若干毫秒的兩個消息，可能出現先發送的消息后到達服務器的情況。為此，需要先將筆畫坐標點放到消息隊列中，在計時器到達設定時間間隔后再發送，降低發送消息的頻率。如果時間間隔設置過長，就會出現比較大的消息延遲，如果設置過短又會導致前面所述的問題。一般設置為MQTT客戶端與MQTT Broker連接延遲的3倍以上，不低于100毫秒。

4.4 繪畫界面的邏輯設計

從啟動界面進入繪畫界面時，將所填寫的畫板名稱記錄到全局變量中，并嘗試連接MQTT Broker，連接成功才啟動計時器定時處理筆畫消息隊列，具體實現如圖7所示。

當手指在畫布按下時設置筆畫列表為空，在畫布組件中移動時將劃過的坐標點加入消息隊列，具體實現如圖8和圖9所示。

當計時器到設定的計時間隔點，將筆畫信息發布到MQTT Broker，以便本機及其他訂閱了相同主題的手機收到。需要注意的是，將筆畫信息加入消息隊列后要將全局變量中記錄的筆畫信息清空，并將最后一個坐標點放回筆畫記錄字典中，實現如圖10所示。

當MQTT客戶端收到消息時，將文本格式的JSON轉為字典結構，讀出筆畫信息并據此在畫布中繪畫。實現如圖11所示。

5 結束語

本文實現的“多人協作繪畫板”實例涉及變量、函數、數據結構、網絡通信等多方面的知識，限于篇幅不能展開討論。實現部分也只能粗略介紹消息發布與訂閱相關的邏輯，沒有進行異常處理及容錯，如連接MQTT失敗時如何繼續本地繪畫等，如何完善留待讀者思考。畫布的撤銷與重做機制也沒有實現，在教學環節中這些“不足”與“缺陷”可以根據教學時長擴展，也可以作為留給學生的作業，讓學生繼續探索以加深理解。

參考文獻：

[1] Wolber D，Abelson H，Spertus E，et al.App inventor[J]. O'Reilly Media，Inc.，2011.

[2] Patton E W，Tissenbaum M，Harunani F.MIT App Inventor：Objectives，Design，and Development [C]//Computational thinking education.Singapore：Springer，2019：31-49.

[3] About Us[EB/OL].[2021-09-20].http：//appinventor.mit.edu/about-us.

[4] MIT App Inventor 2[EB/OL].[2021-09-20].http：//ai2.appinventor.mit.edu.

[5] MQTT：The Standard for IoT Messaging[EB/OL].[2021-09-20].https：//mqtt.org.

【通聯編輯：謝媛媛】