App开发教学案例设计

钟元生　曹权

摘 要：为帮助高校更好开设App实践课程，给出一个综合教学案例——“豹考通”App开发的全过程。该教学案例包括App开发流程、服务器端、Android客户端、IOS客户端和数据库端的设计等，不仅适合大学生在项目实验中体会较大规模的App开发全过程，也适合于小组分工协作开发App软件的参照模板。

关键词：教学案例设计；App开发；移动应用；实践教学

中图分类号：G40-057 文献标识码：A

Abstract：To help universities better open app practical courses.It gives a comprehensive teaching case-"BaoKaoTong" app whole process of development.The case not only for college students experience a large-scale development of the whole process of app experiment，but also a reference template for group division of labor app software development.

Keywords：teaching case design；mobile application development；mobile applications；practice teaching

1 引言（Introduction）

案例教学法是在法律、医学、工商管理等学科及师资培训中取得了很大的成功。近几年，越来越多的学者在信息技术、生物、数学、心理学、地理、工程技术等学科中也开始尝试采用案例教学方法，国外在案例教学领域有着深厚的研究，Barbara Barry Levin在1996年提到在教师在教学中运用案例教学方法[1]，而且Laurence.E Lynn Jr在1999年还出版了关于案例教学的指南[2]。我们在大学安卓编程案例设计上也做了一些研究[3]。

当前计算机或软件工程专业的学生存在着学用脱节、实际开发能力偏弱等问题，事实上，学生虽然接受了系统的软件开发专业知识的学习和软件开发技术应用的训练，但软件开发能力低下的情况还相当普遍[4]。在这种教学方式下，通常导致培养的学生实践能力不足[5]。

为了解决上述问题，我们结合自己研发的一个实用App“豹考通”，在对其程序功能进行适当精简的基础上，开发了一个App综合教学案例。本文简要介绍之。详情可参考即将在清华大学出版社出版的教材《App开发案例教程》。

2 App开发流程教学设计（Teaching design of app development process）

一个完整的软件开发分为网页端与移动端（App），而移动端又包括Android端和IOS端。

（1）服务器框架搭建

开发流程如图1所示。

服务器端设计是移动项目设计中很重要的一个部分，如果说客户端负责为用户展现数据，那么服务器端可以说是为用户准备数据。只有服务器端将用户所需要的数据准备完毕后，客户端才有可能去展示。

（2）数据库设计与部署

对于移动App开发，数据库的选择就显得至关重要，因为数据存储结构、读取速度直接影响到用户体验，尽量使用轻量级数据库，这里我们使用的是MySQL。

数据库开发分为逻辑结构设计和物理结构设计。

（3）服务器端实现

服务器端的实现是在MyEclipse 8中实现。配置开发环境，配置完成后，在MyEclipse 8中创建“豹考通”工程。

（4）客户端框架搭建

客户端开发流程简图如图2所示。

（5）界面及素材设计和界面跳转设计

项目素材制作的标准要按照Android和IOS开发要求制作，而且界面跳转不宜过多。

（6）模块类的实现

根据项目的需求分析，在项目中分别创建模块文件夹，然后分别对功能模块进行设计与实现。

（7）网络数据读取接口

网络数据读取接口由服务器端提供，包括网址和需要的参数，客户端发送相应的参数请求从服务器端获取运行结果，最后由客户端呈现在用户眼前。网络数据接口形式如下：

http：//localhost/zhushou/RequestControlLinesAction.action？c=0&y=2013&s=14&b=0。

（8）编译打包及测试

移动应用编译打包、测试及发布上线的简易流程如图3所示。

对于Android端应用，需要在项目中打包生成APK文件；而对于IOS端应用，需要将其打包成ipa文件。

编译打包完成后，可以在其他成员的手机上安装测试，看有没有问题出现。如果有，立即对程序进行调试；如果没有，就可以在商店中发布上线了。

（9）发布上线

相对于IOS发布过程来说，Android应用的发布比较简单；而IOS应用的发布审核相对来说更为严格，一些细节问题的出现都会让Apple公司拒绝，如果是发布在第三方商店，如91助手，审核相对顺利。所以在开发过程中，需要多参考Apple公司的文档，这样有利于审核的通过。

3 App开发教学用例（Teaching case of app development）

3.1 案例功能设计

“豹考通”App是一款面向全国高考学子和各大院校教师的新型App，服务考生和高校，借助智能手机帮助考生在填报志愿时掌握全面信息，提供数据跟踪记录和深度分析，供考生参考，并在高校与考生之间搭建一条新的交流途径。

App已经在各大App商店上架，读者可以先下载使用。

综合考虑市场需求，豹考通主要实现了以下6个功能。

（1）省控线查询：查询各省市高考省控线信息，方便用户查找，不需要到网上去搜集信息。

（2）投档线查询：查询全国各院校的投档线信息。

（3）生成投档线曲线图：根据用户的信息选择，系统会为用户生成近几年的投档线和省控线的一个曲线图，更加直观的显示分数的变化波动情况，供用户参考。

（4）预测投档线：根据往年投档线情况，采用系统的算法，根据用户不同的选择，预测今年各学校投档线情况。

（5）推荐学校：推荐学校可以为用户推荐一些感兴趣并且有机会能投档的院校，帮助用户做出报考选择。

（6）生成预测推荐报告：报告是根据用户选择的参数进行生成，报告的内容包括今年投档线的预测和推荐的所有机会投档大学等名单，为用户的最终选择提供参考。

图4和图5分别给出Android和IOS客户端的代表界面。

案例中访问服务器的部分，均使用www.10LAB.cn作为我们的服务器地址，所有的程序、软件包及源代码都可以从此网站中获取，当然读者也可以自己搭建本地服务器（访问局域网），具体的本地服务器搭建方法见后。图6为客户端服务器网络连接示意图。

3.2 案例所涉源代码

打开学习网站http：//www.10LAB.cn/resource.html，下载本文所涉源码压缩包——SourceCode，包中包括四个部分：

这些代码包括数据库端、服务器端、Android端和IOS端四个部分，“→”符号代表文件夹，即打开后还有文件。

（1）数据库端源码清单

SourceCode->Chapter3->Database

createTable.sql--创建数据库表

InsertAction.sql--插入数据

DeleteAction.sql--删除数据

ModifyAction.sql--修改数据

createbatchTable.sql--创建批次表

insertbatchTable.sql--向批次表插入数据

createcategoryTable.sql--创建科类表

insertcategoryTable.sql--向科类表插入数据

（2）服务器端源码清单

SourceCode->Chapter4->Server

server.xml--绑定域名文件（xml）

Hello_BaoKaoTong.java--新建服务器类

index.jsp--编辑JSP页面

->Zhushou

JsonAction.java--Json解析类

struts.xml--增加Json类中方法

ControlLineAdapter.java--省控线查询Adapter类

（3）Android端源码清单

SourceCode->Chapter6->Android

->NewScore_test

OpenDoorActivity.java--开门动画类

->res

->layout

content_frame.xml--程序主界面布局

fragment_enroll.xml--学校录取线页面布局

->values

Styles.xml--菜单Menu布局

->drawable

menu_btn.xml--特殊图片状态布局

menu_pressed.xml--按下按钮状态

menu_unpressed.xml--按钮未按下状态

->src

MainActivity.java--主界面相关事件

->score

EnrollScoreFragment.java--查询学校录取线事件

EnrollScoreResultFragment.java--查询结果布局

TrendView.java--生成趋势曲线事件

->util

AccessToServer.java--服务器端访问工具类

（4）IOS端源码清单

SourceCode->Chapter8->IOS->NewScore_test

->GaoKaoHelper

->GaoKaoHelper.proj--XCode项目程序（执行程序）

->GaoKaoHelper.test--项目测试包

->GaoKaoHelper--源代码包

AppDelegate.h--程序监听接口头文件

AppDelegate.m--程序监听接口实现文件

Main.m--程序入口方法

BaseViewController.h--根视图头文件

BaseViewController.m-根视图实现文件

BaseNavigationController.h--基导航控制器头文件

BaseNavigationController.m--基导航控制器实现文件

myScoreViewController.h--我的高考模块头文件

myScoreViewController.m--我的高考模块实现文件

shengyuandiViewController.h--生源地选择控制器头文件

shengyuandiViewController.m--实现生源地选择控制器

subjectViewController.h--科类选择控制器头文件

subjectViewController.m--科类选择控制器实现文件

batchViewController.h--批次选择控制器头文件

batchViewController.m--批次选择控制器实现文件

recommendViewController.h--推荐学校模块基视图头文件

recommendViewController.m--推荐学校模块基视图实现文件

SchoolInfoViewController.h--学校信息控制器头文件

SchoolInfoViewController.m--学校信息控制器实现文件

proViewController.h--省份选择视图控制器头文件

proViewController.m--省份选择视图控制器实现文件

searchScoreViewController.h--省控线查询模块基视图头文件

searchScoreViewController.m--省控线查询模块基视图实现文件

provinceViewController.h--省份选择控制器头文件

provinceViewController.m--省份选择控制器实现文件

LineViewController.h--省控线查询结果控制器头文件

LineViewController.m--省控线查询结果控制器实现文件

schoolScoreViewController.h--学校分数线查询模块基视图头文件

schoolScoreViewController.m--学校分数线查询模块基视图实现文件

schoolViewController.h--学校选择控制器头文件

schoolViewController.m--学校选择控制器实现文件

ScoreLineViewController.h--学校分数线查询结果控制器头文件

ScoreLineViewController.m--学校分数线查询结果控制器实现文件

CurveViewController.h--趋势曲线控制器头文件

CurveViewController.m--趋势曲线控制器实现文件

CurveView.h--趋势曲线图视图头文件

CurveView.m--趋势曲线图视图实现文件

->ConnectNetWork--网络连接判断第三方类

Reachability.h

Reachability.m

->MBProgressHUD--读取信息进度转轮第三方类

MBProgressHUB.h

MBProgressHUB.m

->Utility--界面布局工具

->ASIHttpRequest--实现网络连接第三方类

->SBJson--JSon解析第三方类

SBJson.h

SBJson.m

GaoKaoHelper-info.plist--项目配置文件

infoPlist.strings--配置文件字符

area.plist--地区信息plist文件

GaoKaoHelper-Prefix.pch--预编译文件

4 基于局域网的教学环境搭建（Setting up teaching and learning environment based on LAN）

下面介绍如何搭建支持App客户端可访问的本地服务器和如何修改的客户端的请求URL链接。由于豹考通服务器端代码是由JSP编写，如果要让此服务器代码在本地机运行，则需用到的软件包括Tomcat、JDK和MySQL。

4.1 连接局域网本地服务器方法

将实验室的教师端电脑与学生端电脑互联在一个局域网内，只需将请求的URL地址修改为教师端或任何一台学生机服务器的IP地址即可，如192.168.1.100（教师机），192.168.1.101（小组1服务器）。若服务器连接成功，不论是手机还是模拟器都能读取到对应省份学校数据；如果连接服务器失败，则不显示学校数据。

4.2 启动本地服务器的步骤

（1）下载bkt_android.rar压缩包，http：//www.10LAB.cn/download/bkt_android.rar。

（2）将压缩包解压，请将bkt_android解压在不带有空格的路径上，如D：＼bkt_android。

（3）运行JTM1.1.exe程序，单击“启用（调试模式）”，Tomcat和MySQL服务器的指示灯变成绿色。需注意的是这两个弹出窗口不能关闭，关闭后会停止相关服务，导致本地服务器关闭。

（4）通过浏览器进行访问测试http：//localhost：8080/，若出现“服务器搭建成功测试页”信息，表示JSP服务器环境搭建成功。

4.3 修改客户端URL访问本地服务器

Android端：

修改豹考通NewScore_Test项目src下包名为iet.jxufe.cn.android.score.util的工具类Constants.java。将类中的远程服务器地址URL修改为：http：//{IP}：8080/bkt/；即public static final String URL=" http：//192.168.1.101：8080/bkt/"；修改URL后，重新发布App和启动Android模拟器，这样Android客户端访问的数据就是本地服务器中的数据。

IOS端：

与Android端类似，IOS端访问本地服务器只需要将进行网络访问接口域名更换成本地服务器所在PC机的IP地址即可。远程服务器的url为：

http：//www.10LAB.cn/zhushou/getRecommendSchoolsJson.action？

域名为：www.10LAB.cn，将域名更换成服务器本机IP地址加上端口号，http：//{IP}：8080/bkt/。

即URL="http：//192.168.1.102：8080/bkt/"；修改URL后，重新发布App，这样IOS客户端访问的数据就是本地服务器中的数据。

IP为本地服务器PC机的IP地址，比如http：//192.168.1.101：8080/bkt/，然后再次编译运行，即可访问本地服务器。

5 结论（Conclusion）

通过“豹考通”软件引入App开发流程，并对“豹考通”App进行相关介绍，最后介绍了服务器端局域网配置的基本知识，让读者通过本地服务器进行与客户端的交互。

参考文献（References）

[1] Levin B. B.Using Case Method in Teacher Education：The Role of Discussion and Experience in Teachers' Thinking about Cases[D].Unpublished Doctoral Dissertation，University of California-Berkeley，1996：22-24.

[2] Laurence.E Lynn Jr.Teaching&Learning with Cases，A Guide book[M].Chatham House Pub，1999：98-161.

[3] 钟元生，高成珍.高校Android编程教材设计研究[J].计算机教育，2014（10）：105-107.

[4] 蔡建平.软件开发综合能力培养的案例教学[J].计算机教育，2011（20）：102.

[5] 李伟.基于工具软件和案例开发的软件工程教学方法[J].中国科教创新导刊，2014（01）：152-153.

作者简介：

钟元生（1968-），男，博士，教授，博士生导师.研究领域：电子商务，教育技术.

曹 权（1991-），男，硕士生.研究领域：移动学习与手机软件开发.