基于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.