基于App Inventor的移動校園信息系統(tǒng)設(shè)計與實現(xiàn)

邱廣萍 文明瑤

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

關(guān)鍵詞：移動校園信息系統(tǒng);App Inventor;MySQL;PHP在線編輯;智能終端;系統(tǒng)界面

0 引 言

面對日漸龐大的信息量，快速發(fā)展的互聯(lián)網(wǎng)技術(shù)，大數(shù)據(jù)的深入發(fā)展以及智能終端的普及，傳統(tǒng)的校園信息系統(tǒng)僅提供校內(nèi)查詢的功能已經(jīng)不能滿足用戶需求。本文基于App Inventor開發(fā)了移動校園信息系統(tǒng)構(gòu)建電腦端、服務(wù)器端與智能終端的動態(tài)網(wǎng)絡(luò)平臺，能改變單純B/S網(wǎng)絡(luò)服務(wù)模式，能隨時隨地查詢?yōu)g覽課表，成績信息、個人通知，學(xué)生活動等流程，解決學(xué)生需要在校內(nèi)電腦端登陸查詢個人信息、對于緊急事項查詢不及時的問題。

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

1 開發(fā)平臺

1.1 App Inventor概述

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

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

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

1.2 在線數(shù)據(jù)庫和在線編程環(huán)境

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

2 手機端APP設(shè)計

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

2.1 手機APP界面組件設(shè)計

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

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

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

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

2.2 手機APP邏輯設(shè)計

手機APP界面組件設(shè)計完成后，切換到邏輯設(shè)計，組件設(shè)計與邏輯設(shè)計的內(nèi)部關(guān)系如圖4所示。

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

3 數(shù)據(jù)庫設(shè)計及PHP實現(xiàn)

3.1 數(shù)據(jù)庫設(shè)計

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

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

3.2 PHP在線編程

PHP在線程序編輯器連接App Inventor應(yīng)用與MySQL數(shù)據(jù)庫。本系統(tǒng)使用的PHP代碼是基于云應(yīng)用SAE環(huán)境編寫編輯的。PHP功能強大，與MySQL契合度高，使用PHP開發(fā)Web API用于手機APP端與服務(wù)器端的交互，開發(fā)時考慮信息安全性，可對數(shù)據(jù)進行適當(dāng)?shù)募用堋Ｔ茟?yīng)用SAE在線編輯可以支持PHP，HTML，CSS文檔的導(dǎo)入、編輯、導(dǎo)出功能[11]。

當(dāng)學(xué)生用戶在手機APP端輸入登錄賬號密碼信息時，對應(yīng)的PHP文件對終端上傳的用戶名密碼與數(shù)據(jù)庫對應(yīng)數(shù)據(jù)表中的用戶進行匹配。下面以登錄功能為例，介紹在PHP運行環(huán)境中使用獨享型MySQL調(diào)用數(shù)據(jù)表的過程：

4 測 試

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

另外在調(diào)試過程中遇到的主要錯誤。

（1）出現(xiàn)ERROR 1103錯誤，排查是邏輯設(shè)計調(diào)用“Web客戶端”執(zhí)行POST文本請求，錯誤使用了“Web客戶端”執(zhí)行POST文件請求，還有網(wǎng)址填寫不完整。

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

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

5 結(jié) 語

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

參考文獻

[1]陳磊. 高校校園APP設(shè)計與開發(fā)：以江西經(jīng)濟管理干部學(xué)院為例[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]陶智.基于中標(biāo)麒麟操作系統(tǒng)的網(wǎng)站運行架構(gòu)研究[C]// 計算機科學(xué)與教育技術(shù)應(yīng)用研究：SCEG2015研討會論文集. 北京：中國財政經(jīng)濟出版社，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]趙偲榆.基于數(shù)碼圖像的人體測量系統(tǒng)的研究與實現(xiàn)[D].北京：華北電力大學(xué)（北京），2018.

[9]譚乃抗.App Inventor在中職物聯(lián)網(wǎng)課程中的教學(xué)應(yīng)用探討[J].張家口職業(yè)技術(shù)學(xué)院學(xué)報，2017，30（4）：72-74.

[10]康亞娟. 基于微信公眾平臺的在線課程開發(fā)[D]. 西安：西安建筑科技大學(xué)，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.