基于App Inventor的移動校園信息系統設計與實現

邱廣萍 文明瑤

摘 要：為滿足學生對校園信息系統方便易用的需求，提出基于App Inventor開發的智能終端APP應用系統。結合MySQL數據庫和PHP在線編輯器，實現移動校園信息系統增刪改查的功能。實驗表明，所提系統界面友好易操作，數據庫易修改，安全可靠性高，對提高教育管理效率有一定的意義。

關鍵詞：移動校園信息系統;App Inventor;MySQL;PHP在線編輯;智能終端;系統界面

0 引 言

面對日漸龐大的信息量，快速發展的互聯網技術，大數據的深入發展以及智能終端的普及，傳統的校園信息系統僅提供校內查詢的功能已經不能滿足用戶需求。本文基于App Inventor開發了移動校園信息系統構建電腦端、服務器端與智能終端的動態網絡平臺，能改變單純B/S網絡服務模式，能隨時隨地查詢瀏覽課表，成績信息、個人通知，學生活動等流程，解決學生需要在校內電腦端登陸查詢個人信息、對于緊急事項查詢不及時的問題。

該移動校園信息系統在高等學校的普及使用，使高校師生可以不受時間、空間和地點限制，通過智能終端就能隨時隨地訪問校園服務平臺，為校園學習、生活帶來極大的便利。校園信息系統智慧化是高校數字校園、智慧校園建設中的關鍵過程之一，體現了移動信息技術和高等教育信息技術的深度融合，有重大意義[1]。

1 開發平臺

1.1 App Inventor概述

由谷歌團隊原創，MIT麻省理工學院完善維護的MIT App Inventor（本文系統使用第2版，以下簡稱AI2）是一款拼圖式的安卓APP云端開發工具，完全不需要安裝軟件，只需打開支持的瀏覽器即可使用的在線開發平臺。支持的瀏覽器有Chrome，Firefox和Safari等。AI2國際版在線開發平臺需要使用谷歌賬號登錄，由于各種原因國際版連線困難，因此可以根據個人情況使用騰訊賬號登錄國內廣州服務器版。此外，AI2中的工程會默認保存在云服務器上，憑登錄賬號可以輕松地在不同時間，不同地點，不同機器之間“漫游”，根本不必擔心同步問題。

AI2采用不同顏色、不同形狀和類型的拼圖塊來代表不同的變量、過程和控制邏輯，是屬于事件驅動的編程方式，用戶可以在不編寫任何代碼的情況下，根據計算機邏輯思維，把需要的各個模塊拖曳、放置、連接垂直疊加在一起完成事件處理操作。并且可以隨時拆分、組合構成不同的應用，類似于搭建積木，盡管看上去很簡單，但AI2擁有許多能讓用戶構建出復雜應用的強大功能[2]。AI2易于上手，所見即所得，提供強大的界面組件和功能模塊，并擁有虛擬手機模擬器、AI2伴侶（通過掃描二維碼在智能終端演示）以及USB連接手機等多種即時觀看制作效果的功能，使沒有系統學習過編程課程的用戶也可以快速開發APP。

AI2邏輯設計內置不同的模塊，各模塊以不同顏色和形狀代表，有事件觸發類模塊、賦值模塊、命令模塊和控制模塊等[3]。AI2開發環境界面如圖1所示。

1.2 在線數據庫和在線編程環境

由于智能終端開發環境基于網絡服務器，因此后臺開發環境選擇目前網絡流行的網站架構方式：數據庫采用服務型的關系型數據庫管理系統（My Structured Query Language，MySQL），編程環境選擇PHP在線編輯器，三大在線服務組成良好的開發環境平臺。MySQL所使用的SQL語言是用于訪問數據庫的最常用標準化語言，一個數據庫可以包含多張數據表。而移動校園信息系統需要批量上傳數據并將數據保存在不同的表中，例如有用戶登錄表、成績表和課程表等，MySQL數據庫可以滿足此需求，并可以提高開發速度和靈活性[4-5]。PHP在線編輯器語法簡單、跨平臺兼容性好、性能優越，支持多種數據庫，支持Web開發。整體技術架構圖如圖2所示。

2 手機端APP設計

移動校園信息系統通過以上各種資源的整合，開發出可以跳出校園內部網的框界、脫離計算機網頁端、隨時隨地使用的智能APP。該系統面向學生用戶，擁有傳統教務系統的功能—即查詢課表、查詢成績、瀏覽新聞頭條、瀏覽學生活動信息、實時收取通知等等。后臺管理人員通過后臺開發環境的數據庫，可以方便地對學生數據進行增、刪、改、查等操作。本系統滿足了用戶便捷、實時、準確的使用需求[6]。

2.1 手機APP界面組件設計

根據移動校園信息系統的功能需求，在AI2中添加以下屏幕：注冊屏幕、登錄屏幕、主界面屏幕、查詢課表屏幕、查詢成績屏幕、新聞瀏覽屏幕、通知信息屏幕等，并通過添加按鈕組件實現各屏幕之間跳轉。手機APP界面結構如圖3所示。

（1）該APP用到的可視化組件主要有：標簽、文本輸入框、密碼輸入框、按鈕、列表顯示框。標簽顯示靜態文本。文本輸入框供用戶進行輸入文字操作，還可以在參數設置文本框提示信息。密碼輸入框是一種特殊的文本框，用于輸入密碼，自動使用圓點或星號屏蔽輸入的密碼信息。按鈕是最基本的單擊式觸發事件或狀態，實現基本的交互功能。列表顯示框用于顯示文字元素組成的列表，列表的內容可以在元素字串屬性來設定，也可以在邏輯編程視圖中使用元素塊來定義[7]。

（2）用到的非可視化組件主要有：Web客戶端、微數據庫、對話框組件、Web瀏覽框和表格顯示框。屬于“通信連接”組件中的Web客戶端通過“機器對機器”的方式獲取網絡數據。此系統能夠獲取數據的前提是取得網絡數據庫的應用程序接口（Application Programming Interface，API），使手機APP可以直接訪問這些API獲取連接數據庫信息。微數據庫沒有任何屬性和事件，但是可以調用微數據庫獲取當前數據庫中所有指定標簽的列表并保存在本地。對話框組件主要用來顯示對話框警告信息和浮動提示信息，并支持輸出安卓系統的Log日志。Web瀏覽框用來顯示網頁，這里主要用于打開指定的某個頁面，Web瀏覽框支持多個方法。表格顯示框屬于擴展組件，由Ken Nichols開發：表格顯示框支持特定的CSV格式數據，組件屬性欄可以設置行列和邊框顏色等[8]。

（3）為了使各屏幕相對美觀，AI2提供了界面布局組件，支持水平布局、垂直布局和水平、垂直滾動布局。各種布局在界面上沒有任何現實，也不具備事件響應功能。安卓手機品牌和型號眾多，手機屏幕的尺寸有比較大的差別，一度為傳統的手機APP開發帶來困難。傳統的開發平臺需要針對不同的手機屏幕尺寸準備不同的程序文件和圖片文件，并且需要為APP編寫復雜的系統使其根據屏幕大小選擇合適的程序進行使用，為整個開發工作增加不少的工作。但AI2就可以完美的解決屏幕自適應的問題，AI2組件面板中有界面布局組件，其中水平布局和垂直布局等組件都可以把高度和寬度修改為按比例或者充滿，并根據不同的屏幕大小自適應修改，方便簡單。

2.2 手機APP邏輯設計

手機APP界面組件設計完成后，切換到邏輯設計，組件設計與邏輯設計的內部關系如圖4所示。

邏輯設計就是進行“塊”語言拼接，定義各應用的行為。“塊”語言提供了所有基礎的編程指令，如循環及條件，只是以“塊”的方式來呈現[9]。組件和“塊”被分門別類地放在不同的類別中，觸手可得。編程的過程，就是找到這些“塊”，并把它們拖到程序中，來實現你預設的功能，無需記住那些指令或查閱手冊。登錄按鈕“塊”語言邏輯設計圖如圖5所示。

3 數據庫設計及PHP實現

3.1 數據庫設計

學生信息繁雜，涉及各種原始數據和記錄，但手機APP針對每個學生學號進行查詢，從龐大的信息系統中抽取有用的信息進行顯示。因此采用在線云應用SAE在數據庫與緩存欄目中創建共享型MySQL數據庫，針對各種數據建立對應的數據表。創建數據表以盡量使得數據庫數據表的冗余性最低，性能最佳為原則。MySQL數據庫數據表結構圖如圖6所示。

云應用SAE中的共享型MySQL基于MySQL56開發的共享數據庫服務，僅需幾秒鐘即可獲得一個包括主從節點、高可用服務、自動備份、在線擴容以及監控等各種管理功能的MySQL服務：包括增刪改查數據服務;不需要安裝應用，打開網頁即可使用;隨時導入與備份數據等功能[10]。

3.2 PHP在線編程

PHP在線程序編輯器連接App Inventor應用與MySQL數據庫。本系統使用的PHP代碼是基于云應用SAE環境編寫編輯的。PHP功能強大，與MySQL契合度高，使用PHP開發Web API用于手機APP端與服務器端的交互，開發時考慮信息安全性，可對數據進行適當的加密。云應用SAE在線編輯可以支持PHP，HTML，CSS文檔的導入、編輯、導出功能[11]。

當學生用戶在手機APP端輸入登錄賬號密碼信息時，對應的PHP文件對終端上傳的用戶名密碼與數據庫對應數據表中的用戶進行匹配。下面以登錄功能為例，介紹在PHP運行環境中使用獨享型MySQL調用數據表的過程：

4 測 試

AI2平臺提供多種即時調試工具—AI2伴侶、AI2模擬器和通過USB連接。AI2伴侶需要在手機安裝相應APK，掃描AI2平臺出現的二維碼，或者通過AI2連接碼即時連接調試正在制作的安卓應用，是使用較多的調試工具。在服務器與AI2對接時，服務器端將數據進行JSON編碼，可以很好地運用AI2中的WEB客戶端組件的JSON解碼快速解析數據，因此在邏輯設計添加使用解碼JSON文本的應用。

另外在調試過程中遇到的主要錯誤。

（1）出現ERROR 1103錯誤，排查是邏輯設計調用“Web客戶端”執行POST文本請求，錯誤使用了“Web客戶端”執行POST文件請求，還有網址填寫不完整。

（2）出現ERROR 1100錯誤，排查是指定的請求頭無效，因此去除專門的請求頭。

以一個學生學號作為試點對整個手機APP進行測試，包括注冊、登錄、查詢課表、查詢成績、查詢個人通知以及瀏覽新聞等功能，測試系統的正確性、合理性及方便易用性。經過測試與調試，移動校園手機APP系統成功運行。系統主要功能展示如圖7所示。

5 結 語

本文提出了一種移動校園信息系統手機APP應用，其基于App Inventor，MySQL和PHP語言等技術的結合，使校園信息系統利用智能終端實現“互聯網+教育管理”的理念，打破時間和地點的界限，隨時查詢課程、成績、新聞、通知等信息，有利于使教育管理系統跟上互聯網技術的發展。

參考文獻

[1]陳磊. 高校校園APP設計與開發：以江西經濟管理干部學院為例[J]. 科技廣場，2017 （6）： 58-61.

[2] WOLBER D，ABELSON H，SPERTUS E，et al. App inventor [M]. [s.l.]：O'Reilly Media，Inc.，2011.

[3] PAPADAKIS S，KALOGIANNAKIS M，ZARANIS N，et al. Using scratch and app inventor for teaching introductory programming in secondary education. a case study [J]. International journal of technology enhanced learning，2016，8（3-4）：217-233.

[4]陶智.基于中標麒麟操作系統的網站運行架構研究[C]// 計算機科學與教育技術應用研究：SCEG2015研討會論文集. 北京：中國財政經濟出版社，2016：67-69.

[5] KROMANN F M. Beginning PHP and MySQL：from novice to professional [M]. Apress，2018：1-46.

[6] ASGHAR M Z，SANA I，NASIR K，et al. Quizzes：quiz application development using android-based MIT APP inventor platform [J]. International journal of advanced computer science and applications，2016，7（5）：43-54.

[7] GARC?A Antonio Ortega，RUIZ‐MART?NEZ Antonio，VALENCIA‐GARC?A Rafael. Using app inventor for creating apps to support M‐learning experiences： a case study [J]. Computer applications in engineering education，2018，26（3）：431-448.

[8]趙偲榆.基于數碼圖像的人體測量系統的研究與實現[D].北京：華北電力大學（北京），2018.

[9]譚乃抗.App Inventor在中職物聯網課程中的教學應用探討[J].張家口職業技術學院學報，2017，30（4）：72-74.

[10]康亞娟. 基于微信公眾平臺的在線課程開發[D]. 西安：西安建筑科技大學，2017.

[11] LASSEN A. Function point analysis FPA on a team planning website based on PHP and MySQL [J]. Journal of information technology and software engineering，2018，8（3）：1-5.