移动校园转型实践——基于Web App的移动应用客户端设计与实现

鲁学亮，陈金焘，孙秋瑞，刘 臻

(北京师范大学 信息网络中心，北京100875)

一、移动应用发展现状

移动智能终端的快速发展与普及在全球智能手机强劲发展的形势带动下，普通功能机正在被智能终端逐步替代。根据艾媒咨询日前发布的数据显示，2011年中国手机用户数将超过9亿，达到9.3亿，年增长率为8.1%。数据还显示，中国市场手机用户存量数据中，功能手机用户由2010年第四季度市场占比88.0%下滑到2011年第三季的80.5%；相反智能手机则呈现猛烈增长趋势，由2010年12.0%的用户市场占比，增长到2011年第三季度的19.5%，预计2011年第四季度中国智能手机用户市场占比将达24.0%。 随着智能手机的快速普及，基于智能终端的应用的需求也越来越大，现有的基于PC的各种应用开始向智能终端平台转移。移动数据分析公司Flurry曾发布多份关于App的发展趋势报告，这些报告显示出移动App正对很多行业产生影响，报告显示2011年以来，人们花费在App上的时间已经超过网页，而且势头不减。因此各大互联网公司纷纷推出自己应用的移动版本，传统PC上的应用几乎都能在智能终端上实现。虽然移动应用数量在快速增加，但基于高校校园，服务于师生学习、生活的移动应用却非常少，现有的校园移动应用也主要是以发布新闻资讯类为主，主要代表有复旦大学推出基于IOS的“i复旦”、中山大学推出的“iSYSU”等。从内容上看主要以校内新闻、黄页、通知、日历等资讯为主。

移动应用产品众多，因此常常要考虑多个平台的支持，单一平台很难保证应用的覆盖面或者换句话说就是用户群体的量和持续的活跃性上从长期的角度而言往往存在短板。另外从开发的角度而言，多平台的支持往往需要建立不同的技术团队，而平台之间开发技术也是完全迥异的。开发一个具有相同业务的本地应用程序（native App）需要使用到不同平台的框架和开发语言，其中Sym bian使用 C/C++语言、IOS使用 Object C以及Android使用Java应用开发技术，几乎是完全无法融合的，PhoneGap等跨平台移动应用开发框架应运而生[2]，Phonegap简单来说是一个中间件，为移动前端提供访问移动终端设备及资源的接口。采用统一的标准的html、javascript、css等Web技术开发，通过不同平台的浏览器访问来实现跨平台。开发人员可以根据具体需求选择是Native App或者是Web App还是以PhoneGap框架为代表的Hybrid App。

二、Web App与Native App的比较

根据“2011开发者经济调查报告”[1]中的数据可以观察手机各平台的开发现状。其中手机平台有 Android、Blackberry、IOS（iPhone）、Java ME、Mobile Web、Symbian、Windows Phone。其中平台使用的比例67%的开发者使用Android平台，比2010年上涨 8%。59%的开发者使用IOS（iPhone）平台，比 2010年上涨 9%。56% 的开发者使用Mobile Web。比2010年上涨16%。46%的开发者使用 Java ME，比 2010年下降 4%。45%的开发者使用黑莓平台，比 2010年上涨5%。38%的开发者使用Symbian，比 2010年下降 8%。36% 的开发者使用 Windows Phone，比 2010年下降 3%。对比图例如下图所示。

从图1可以看出Mobile Web的使用有了令人惊讶的转变，在开发者的意愿中已经占据了第三位。可见，跨平台的需求正在快速增长，这是一个非常值得关注的趋势。移动应用程序分为三类：Native App，基于智能终端平台开发的本地应用程序，不具备跨平台；Web App，利用Web技术，能够做出超越传统理解网站的功能，让它更具有交互体验，让这个App看起来和用起来更像Native App；第三类叫Hybrid App，它虽然看上去是一个Native App，但只有一个UI WebView，通过调用移动终端的内置浏览器访问Web应用，用户在体验上更像客户端，更高效。

图1 平台使用比例分布图

三种App中Native App的用户体验最好，但不能移植到其它不同的平台，开发者必须同时维护多个版本且开发成本较高。Web App开发成本低，跨平台和终端，但由于受到网速等因素的限制，用户体验无法超越原生应用，但随着HTML5的推广和应用，Web App的用户体验将越来越好。在系统更新方面，Web App使开发者有更强的对产品的控制力，可以方便的对应用进行更新，并不涉及到客户程序，而native App则完全由使用者来控制，如果用户不人为的进行或者同意服务器端推送更新，开发者则无能为力。由于Native App的开发成本较高，为了能使Web App的体验和功能更趋近于Native App，大量的移动应用开发框架的出现为开发者提供了更多的便利。其中比较流行的有 Jquery mobile、phonegap、Sencha Touch同时也有以HTML5+Native加壳方式的App。在“掌上师大”的开发中，采用Web App加客户端的设计方式，将更多的工作放在服务器端，针对不同的智能终端平台开发简单的“壳”的方式实现。

三、移动校园应用客户端设计与实现

移动应用在教育领域得到了快速的发展。近年来，配备智能手机和平板电脑到高校报到的学生越来越多，他们期望能够用移动应用实现校园资源导航、使用校园服务。高校教师也想通过移动终端改变现有的教学模式，给学生无处不在的学习环境。“掌上师大”移动应用项目正是服务于学校师生的跨平台的智能终端应用程序。“掌上师大”移动应用项目一期的功能设计包含了校内快讯、学校通知和公告、学术活动、地图服务、校园卡业务办理、校内黄页和个人信息综合查询等功能。项目推出了Android、IOS、Windows Phone等版本。 图 2所示为“掌上师大”的系统架构示意图，本文将介绍不同的智能终端平台的客户端的设计与实现。图3所示为Android版的应用主界面示意图。

1.Android客户端的设计与实现

Android提供了内置的浏览器，该浏览器使用了开源的WebKit引擎。在Android中使用浏览器需要通过WebView视图组件来实现。在Android客户的开发中，使用WebView调用WebKit引擎实现对URL的访问。在项目中主要应用WebView以下几个定制点：设置WebView back键响应、控制网页的链接仍在WebView中跳转、实现页面缓存、显示页面加载进度、处理错误请求等，同时结合系统的功能，检测网络情况、重置菜单、设置程序启动画面等。

在用户开启客户端后，检测网络是否正常，如果没有检测到网络，则提示用户并自动退出，代码如下所示。

图2 系统结构图

图3 应用Android主界面

客户端程序在启动过程中会因为网络质量和机器性能的好坏导致用户访问速度的不同，为给用户更人性化的体验，在设计中使用进度条来告知程序的访问进度。下面代码实现功能为在程序启动过程中，在标题栏以百分比显示加载进度如图4左图所示。

Android手机上都会有“回退”按钮，并且大多数用户习惯于去使用这个按钮。正常情况下的“回退”按钮默认为关闭应用程序，而用户往往希望“回退”按钮能实现返回前一个访问页面的功能，因此在项目中需要重写 “回退”按钮功能，实现回退代码如下所示。

程序从打开到正常显示需要一个过程序，在这个过程中往往不希望程序呈现给用户一个空白页面直到访问的页面出现，客户端通过onPageFinished函数实现程序启动完成时结束启动画面进入程序主界面，效果如图4左图所示启动页面。当用户访问的URL无法正常显示时，程序默认会给出报错页面，但系统管理者不希望用户看到这些错误信息，因此需要定义错误提示或说明，在程序中通过onReceivedError函数实现错误处理。

“MENU”按钮同“回退”按钮一样，是Android手机的一个重要按钮，用户大多习惯使用手机上“menu”，因此在程序中，需要屏蔽系统菜单,并重新设计符合应用程序风格的“menu”菜单，实现效果如图4所示。

图4 Android启动画面及菜单

由于程序所有数据需要向服务器端请求，因此造成程序访问速度慢，用户体验不好。在项目中我们通过客户端和服务器设置缓存来实现。Android2.1及以下对缓存支持不好，因此项目只支持Android2.2及以上版本的缓存。

2.IPhone和Windows phone客户端的设计与实现

对于iPhone和Windows Phone客户端的设计，通过使用phonegap的childbrower插件实现客户端的开发，其中包括启动画面等功能。phonegap是一个基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它完全做到了“written once,run everywhere”。Phonegap实现的API能调用智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等。PhoneGap能实现跨平台，使用相同的代码便可以在iphone和WP运行。分别在IOS和WP开发环境中导入phonegap框架并创建项目，将以下代码拷入“index.html”文件中，然后根据不同的平台进行部分优化和个性化设计。

图5 IPhone和windows Phone客户端界面

四、总结

本文介绍了“掌上师大”项目跨平台的客户端的设计与实现，项目采用Web App方式实现，通过客户端方式给用户以native App的体验，并通过客户端和服务器端的缓存设置提高访问速度，很大程度上改善了用户体验。

[1]Developer Economics 2011[R].2011,9-12.

[2]phoneGap 可行性分析［EB/OL］.http://my.oschina.net/chier/blog/49174.