毕业设计(论文)-快速创建App平台的研发与设计

目录1.引言 (1)1.1平台的背景 (1)2 相关技术介绍 (1)2.1MVC模型 (1)2.2P HALCON框架的PHP技术 (1)2.3C ORDOVA移动开发客户端框架 (2)3 平台技术方案 (2)4 快速创建APP平台 (3)4.1平台描述 (3)4.2账户权限模块 (3)4.3A PP模块 (4)4.4登录与注册模块 (4)4.5账户模块 (4)4.6管理模块 (4)4.7订阅模块模块 (4)4.8问题反馈模块 (5)5快速创建APP平台数据库设计 (5)5.1快速创建A PP平台数据库表设计 (5)5.2快速创建A PP平台数据库E-R图 (7)5.3快速创建A PP平台UI图 (7)6.平台功能模块的实现 (13)6.1数据库访问的实现 (13)6.2登录模块的实现 (13)6.2.1账户登录 (13)6.2.2管理员登录 (14)6.3A PP更新后台模块 (15)6.3.1新增第三方QQ登录模块 (17)6.3.2实现填写App类型模块 (17)6.3.4实现选择App功能页模块 (18)6.3.5实现选择App样式和颜色模块 (18)6.3.6实现填写App基本信息模块 (18)6.3.7实现App预览模块 (19)6.3.8实现App管理模块 (19)7 移动应用开发服务关键技术 (21)8 总结 (21)快速创建App平台的研发与设计岭南师范学院数学与计算科学学院，湛江 524048摘要：本文研究快速创建App平台的主要目的是能够帮助完全不懂语言编程的人，能在数分钟的时间内创建一个属于自己的App.平台设计分为前台App创建模块、后台数据库设计与管理模块、中间网页服务器三个模块,使用了AngularJS、Phalcon、Cordova等框架.采用JS，PHP ，mongoDB等技术结合，实现App开发、账户管理、内容管理系统、分析数据等模块的具体研发过程.关键词：App；Cordova；混合APP；WebApp；客户定制AppResearch and design of the rapid creation of App platformAuthor: Liu Siyuan Teacher: Gui XiancaiLingnan Normal University of mathematics and computer science, zhanjiang 524048Abstract:This article is an application platform that is designed to help people that don’t understand programming language, to be able to construct and create their own Application within a few minutes of time. This article’s cont ent will be based upon the three modules, which is the front-desk(reception) App builder module, the Background database design and management module, and lastly the web-server module. The platform will be Based on AngularJS, Phalcon, Cordova e technology such as PHP,mongoDB,JS,Implementation web App development, account management, CMS content management, analysis module.Keywords: APP ;Cordova;Hybrid App; WebApp; Customization1.引言1.1 平台的背景移动互联网市场的发展态势，巨大的商机令人垂涎，各领域企业纷纷开发了专属的APP，但很多非IT软件类企业开发经营自己的APP，却面临软件开发、商业模式和市场推广三座大山.快速创建App平台是一款非编程App制作的平台服务.快速创建App平台可以帮助企业、个人免费DIY制作属于自己的手机APP应用.无需具备编程能力、不用自己架设服务器，只需要花几分钟的时间，就可以制作运营自己的App.对于开发者来说，HTML5技术跨平台，适配多终端.传统移动终端上的Native App，开发者的研发工作必须针对不同的操作系统进行，成本相对较高.Native App对于账户还存在着管理成本、存储成本以及性能消耗成本.HTML/JavaScript/CSS语言所开发的应用只要一次开发就能进入所有浏览器进行分发.即使是走传统的App Store应用商店渠道，只需要再将底层用HTML5开发的应用“封装”为App，从时间和资金成本上讲远小于跨系统移植.2 相关技术介绍2.1 MVC模型MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(Controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及账户交互的同时，不需要重新编写业务逻辑.MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化账户界面的结构中.2.2 Phalcon框架的PHP技术Phalcon是一套实现MVC架构的高性能PHP应用程序框架.初始版本发布于2012年11月，开放源代码并基于BSD授权条款.与其他大部分的PHP框架不同，Phalcon 使用C语言编写，因此Phalcon的执行速度高过其他PHP框架，并且消耗更少的资源，根据官方的测试，Phalcon是目前世界上速度最快的PHP框架之一.是一个开源的，全堆栈的，用C语言写成的php5框架，专为高性能设计.你不需要学习和使用C语言的功能，因为这是一个PHP框架，只不过用C写成而已.同时Phalcon是松耦合的，您可以根据需要使用其他组件[1].2.3 Cordova移动开发客户端框架Apache Cordova是一套设备API，允许移动应用的开发者使用JavaScript来访问本地设备的功能，比如摄像头、加速计.它可以与UI框架（如 jQuery Mobile或Dojo Mobile或Sencha Touch）等相结合使用，这些UI框架可以使用HTML、CSS和JavaScript开发智能手机应用.在使用Cordova API时，应用程序的构建可以无需本地代码（如Java或对象C 等），使用的是Web技术.由于这些JavaScript. API在多个设备平台上是一致的，而且是基于Web标准创建的，因此应用程序的移植很方便，基本不做什么改变.使用Cordova的应用使用平台SDK打包成应用程序，可以从每种设备的应用程序商店下载安装.Cordova提供了一套统一的JavaScript库供调用，它支持iOS、Android、Blackberry、Windows Phone、Palm WebOS、Bada和Symbian[2].3 平台技术方案由于Phalcon是基于C的MVC模式的Web开发框架，利用这一框架可以建立动态的、高性能的、安全的、跨平台的动态网站.为了使系统将来的维护、升级等工作方便、简单，我们采用MVC开发模式，以PHP为开发平台，在本系统中我们细分为四层即网络服务层，视图层、数据层、控制逻辑层，使用AngularJS来实现是图层层 View 的功能；用NodeJS来实现接口的定义[3]；用于控制逻辑层来具体实现的业务.具体实现就是AngularJS提交信息到Controller进行判断，然后调用Controller中的的具体Action方法实现具体业务，这当中可能涉及到对数据库的操作，即调用数据层里面的具体方法.最后返回一个信息给 Controller ，由 Controller 把信息封装到一个 Json格式的数据中，再由Controller返回数据到网络服务层，来实现各种需求.使用MVC模式，我们在修改页面的时候，因为里面不包含有逻辑代码，所以不会影响到系统的逻辑工作，只需要UI就能完成工作；在逻辑层部分，只需要专注于代码的开发，而不需要关心数据库数据的实现，因为数据库数据调用只需要通过接口实现即可，数据库开发人员只需要完成数据开发工作.网页逻辑需要一个平台维护系统：CMS，所以依然需要在静态模板页实现逻辑代码，即用Phalcon进行渲染和逻辑编码.因此，可以我们可以通过下列路线来进行开发：（1）用uxpin来实现静态代码的设计和AngularJS逻辑代码的实现[4].（2）用PHP来实现动态代码的设计，如进行的行为和动作.（3）用NodeJS调用模型和逻辑的API对接，完成业务操作后，把得到的结果存到Json中，然后把封装结果的Json作为返回的请求.（4）用NodeJS作为数据库的调用接口，PHP代码可以通过该NodeJS通过调用API来实现对数据库的调用[5].（5）对数据库的设计，首先设计数据表，然后用MongoDB建立数据表.4 快速创建App平台4.1平台描述移动应用开发平台是专门用于实现账户自我DIY自己需要的APP,进行商业或者个人兴趣的平台.移动应用开发平台通常以下的7个模块,不同模块分别实现不同的功能.(1)账户模块,账户模块主要实现账户功能，其中对账户资料的收集最为重要.(2)App模块,App模块是最核心的模块，其中实现对App的生成，App上架到AppStore，App资料的管理.(3)问题反馈模块，是对于平台运作后期最为重要的一部分，它能反馈许许多多的问题，然后我们分析问题对平台进行修改和完善.(4)账户管理模块，它是管理账户的资料，与账户模块紧紧相连.(5)代理模块，是平台后期很重要的营销模式.(6)订阅模块，他实现了App平台服务于账户之间的联系，实现账户在平台购买App的关键.(7)登陆注册模块，他实现了账户与平台的关联，实现App与平台的沟通.4.2账户权限模块（1）账户管理：账户进入到账户管理页面后，可以实现对自己资料的增删改查，并且根据账户权限可以查询到自己账户的资料，进入账户管理页面.（2）账户权限管理：由于平台管理有多种多样的功能，并非所有客户都愿意将root所有权赋予给所有的人，所以这里root账户可以实现RBAC（基于角色控制）进而实现不同的账户拥有不同的权限用于管理自己的App或者平台.4.3 App模块（1）App Builder（App创建模块）：当客户进入到创建App时，可以选择不同模板和不同的内容来填充客户的App，这里就是App Builder，它能实现你App的DIY，样式的选择，模板的选择，功能的选择，内容的选择，是最重要的用户体验部分.（2）App Manage（App管理）：当客户创建成功App后，他会进入到App管理页面，你能在App管理页面对你的App进行增删改查，不同的样式，不同的内容，不同的功能都能在这里修改，同时可以生成你的App下载体验.（3）App ToStore(App上架): 在这里你能选择你的App生成的平台类型，安卓，IOS，Win8进行上架，可以选择上架到百度，谷歌.4.4登录与注册模块登录与注册模块主要分为账户登录注册与管理登录注册，这里有一套RBAC（基于角色控制）进行权限的分配.根据你账户角色的不同拥有不同的增删改查权利.如果你是一名普通用户，你仅仅可以对你账户资料的进行增删改查.同时你是平台的管理员，你可以查看到不同账户的的资料并且进行账户的增删改查.注册模块主要实现账户的注册功能.4.5账户模块（1）添加账户：使用平台的前提首先你需要有一个账户，此时你需要注册一个账户.（2）修改账户：你能在此进行你账户信息的修改，比如你公司地址换了，你需要更新你的账户信息以供后续我们提供服务的连通性.（3）删除账户：如果账户进行了非法勾当，我们平台可以进行删除账户.（4）查询账户：账户是基于平台，所以平台可以知道账户的资料和行为.4.6管理模块代理模块主要应用于平台服务的销售，销售的重要性不容置疑，一个平台的收入依赖于销售.因此平台提供不同的营销方式，可以单体购买，团体购买，代理购买，使用代理模式.4.7订阅模块模块（1）添加订阅：添加一个套餐的订阅.（2）修改订阅：账户购买的同时可以修改自己订阅，进而选择更喜欢的套餐或者产品.（3）删除订阅：账户不需要订阅的时候可以进行删除订阅.（4）查询订阅：平台提供订阅的历史，方便客户统计订阅到期时间，和续费时间.4.8问题反馈模块（1）添加反馈：添加反馈，叙述自己App出现的问题，管理人员可以根据反馈的内容进行维护.（2）修改反馈：反馈的的问题可能是账户本身出现操作问题，如果账户自身发现App问题可以进行修改反馈，使得管理人员和平台知道问题的来源.（3）删除反馈：当反馈已经解决可以进行删除反馈.（4）查询反馈：可以查看所反馈的内容.5快速创建App平台数据库设计5.1 快速创建App平台数据库表设计（1）账户管理表快速创建App平台使用的是mongoDB数据库技术，账户是本系统的主要账户.因此，数据系统中需要存储账户的基本[6].表1.账户管理表表2.账户信息管理表（3）App信息表中包括AppId（appId）、App名字（appName）、等内容.表3.App表Configuration Path ConfigPath varchar (300) 配置文件路径Total Pages Page integer App页数App Status Status Bool App的状态5.2快速创建App平台数据库E-R图这里拥有3个表，账户表，账户表和App表.一个账户可以开启多个账户，然后每个账户可以创建多个App，所以就有了以下的表关系.图 1.数据库ER图5.3快速创建App平台UI体验图下面的图片是快速创建App平台前台UI体验图，图片介绍了如果进行客户定制形式的选择App的各种部件，几分钟的选择后就可以生成一个可供各种平台安装的App.图 2.平台介绍图图 3.账户登录图图 4.引导创建图图 5.选择App类型图图 6.选择App功能页面图图 7.选择App主题图 8.选择App样式图9.填写App主要信息图 10.预览图片图 11.App管理页面6.平台功能模块的实现6.1数据库访问的实现数据库连接是本平台最为重要的实现部分，因为系统中的全部模块的实现都依赖于数据库操作的实现，包括对数据中的数据的查询、添加、修改、删除等基本操作.比如App模块中，账户对App信息的查询、修改、添加等等.6.2登录模块的实现注册完成后，后台数据库系统中就已经存储了他们的信息.这时，当用户打开快速创建App平台的首页时，就可以通过登录模块登录到快速创建App平台进行App 的创建了.另一方面，管理员如果要对系统进行维护，包括对账户信息的查看、添加、修改，对不同模型的查看、添加、修改等等工作，也首先需要登录系统.登录模块部分包括管理员登录模块和账户登录两个部分.管理登录模块实现了对管理员的权限监控功能，并通过检测赋予管理员不同的权限来实现对平台的管理.账户登录模块主要是对账户是否合法进行检测，包括两个方面内容：一是账户身份合法性检测，该部分是通过验证账户输入的ID是否正确来检查进入平台的合法性；二是检查进入平台后操作的合法性，该部分是通过验证账户是否多重登录来检测操作的合法性.通过上述两项检查后，系统才为账户分配资源，否则平台将自动退出，账户如果输入有误则提示账户重新登录.下面对账户登录部分的功能实现介绍.6.2.1账户登录从登录页面中输入账户的ID及密码，平台便从数据库中查找是否有该账户存在，如果存在该账户,再判断输入的ID和密码是否正确.(从数据库中查找比对)代码：//账户登录，Phalcon框架public function dengluAction(){$arr = array(0 => 'name',1 => 'pwd',2 => 'appId');$ws = array(0 => 'token');$data = $this->base2($this, $arr, $ws);if($data){$name = $data['name'];$appId = $data['appId'];$pwd = $data['pwd'];if(strpos($name, '@')){$loginType = 'email';$rs = 'appUserEmail';}else if(strlen($name)==11 && is_numeric($name)){$loginType = 'tel';$rs = 'appUserTel';}else{$loginType = 'loginname';$rs = 'loginname';}$user=AppUser::findFirst(array(array($rs=>$name,'appId'=>$appId))); if($user){if($user->appUserPwd !== $pwd){C('errorFiled', 'pwd is error');echoInfo(611);return;}$flag = $this->checkUserStatus($user);if(!$flag){return;}$user->isLogin = true;$lastTime = $user->lastLoginTime->sec;$user->lastLoginTime = getMongoDate();$user->appUserToken = $data['token'];//保存ws端的tokenif(!$user->save()){throw new Exception('账户数据不能更新', 1000);}$identity = array();$identity['userId'] = $user->appUserId;$identity['tokenId'] = $user->appUserToken;$identity['lastTime'] = $lastTime;C('data', $identity);echoInfo(200, "success");return;}else{echoInfo(609, 'user is not find');return;}}}6.2.2管理员登录管理员身份的验证过程与账户登录时对身份的验证过程几乎相同.只是在数据库中所查询的集合（表格）或者字段不一致.6.3 App更新后台模块App 后台的更新代码，首先判断版本是否需要更新，如果版本不一致则进行更新，主要代码如下：Public function GetRecordById($obj){return $this->findbyid($obj->appId);}//更新一条文档记录依靠appIDPublic function UpdateRecordById($obj){if(!($obj==null)){$record=$this->findbyid($obj->appId);//把PHP对象转为数组$array=get_object_vars($obj);//获取数组的键值名,返回一个键值名数组foreach (array_keys($array) as $keyname){if ($keyname=="appId"){$record->_id=$obj->$keyname;}else {$record->$keyname=$obj->$keyname;}$record->save();}}else {echo "删除记录失败";}}//删除一条文档记录依靠appIDPublic function deleteRecordById($obj){if(!($obj==null)){$this->findbyid($obj->appId);$this->delete();}else {echo "删除记录失败";}}//创建一条新的文档记录依靠accoutIDPublic function createRecordById($obj){if(!($obj==null)){$this->accountId=$obj->accountId;$this->save();}else {echo "创建Appid失败";}}//存储选择的功能Public function saveFeature($obj) {if(!($obj==null)){$this->appFeatureMap=$obj->appFeatureMap;$this->appFeatureDir=$obj->appFeatureDir;$this->appFeatureCal=$obj->appFeatureCal;$this->appFeatureNote=$obj->appFeatureNote;$this->save();}else {echo "储存功能错误";}}//APP更新函数Public function isUpdate($obj){//根据appID获取一条需要更新的记录$record=$this->getRecordById($obj);//判断versionif(!($record->appVersion == $obj->appVersion)){echo "version不一样,you shold rebuld the app,return a AppStore url";}else{//相同,检测appUpdateNum是否一样if (!($record->appUpdateNum == $obj->appVersion)){tozip("E:/xampp/htdocs/www","E:/xampp/htdocs/www.zip");echo "打包成功,";}//updatenum相同,不需要更新else{echo "不需要更新";}6.3.1新增第三方QQ登录模块该子模块实现登录功能的第三方登录.后台实现一个接口.Post接受参数进行判断是否第三方QQ登录//QQ登录的实现代码public function qqdengluAction(){$arr = array(0 => 'openId',1 => 'appId');$data = $this->base($this, $arr);if($data){$user = QQUser::getUser($data);if(is_object($user)){$flag = $this->checkUserStatus($user);if(!$flag){return;}$identity = array();$identity['userId'] = $user->appUserId;$identity['tokenId'] = getMd5($user->appUserId."@3an%xing*".$user->lastLoginTime->sec);C('data', $identity);echoInfo(200, "success");}else{echoInfo(614, "user is not exist");}}}6.3.2实现填写App类型模块该子模块实现填写App类型模块.public function indexAction() {$this->loadPartials();if($this->getRequest()->isXmlHttpRequest()) {$html = array('html' =>$this->getLayout()->getPartial('content_editor')->toHtml());$this->getLayout()->setHtml(Zend_Json::encode($html));}}6.3.4实现选择App功能页模块该子模块实现选择App功能页面模块.public function editAction() {if($type = $this->getRequest()->getParam('type')) {$this->getLayout()->setBaseRender('content',sprintf('application/customization/page/edit/%s.phtml',$type), 'admin_view_default');$html = array('html' => $this->getLayout()->render());$this->_sendHtml($html);}}6.3.5实现选择App样式和颜色模块该子模块实现选择App样式和颜色页面模块.public function colorsAction() {$this->loadPartials(null, false);$html = array('html' => $this->getLayout()->render());$this->getLayout()->setHtml(Zend_Json::encode($html));}6.3.6实现填写App基本信息模块该子模块实现填写App基本信息模块.public function saveAction() {if($data = $this->getRequest()->getPost()) {try {if(!empty($data["name"])) {if(is_numeric(substr($data["name"], 0, 1))) {throw new Exception("Ce champ ne peut pas commencerpar un chiffre");}$this->getApplication()->setName($data['name'])->save();}catch(Exception $e) {$html = array('message' => $e->getMessage());}$this->_sendHtml($html);}}6.3.7实现App预览模块该子模块实现App预览模块.public function modalAction() {$layout = $this->getLayout();$layout->setBaseRender('modal', 'html/modal.phtml', 'core_view_default')->setTitle($this->_('Preview'))->setSubtitle($this->_ ('Preview and test your native apps directly on your mobile.'));$layout->addPartial('modal_content', 'admin_view_default', 'application/previewer/modal.phtml');$html = array('modal_html' => $layout->render());$this->getResponse()->setBody(Zend_Json::encode($html))->sendResponse(); die;}6.3.8实现App管理模块该子模块实现App管理模块.public function listAction() {$this->loadPartials();}public function editAction() {if($app_id = $this->getRequest()->getParam('app_id')) {$application = new Application_Model_Application();$application->find($app_id);if(!$application->getId()) {$this->getSession()->addError($this->_('This application does not exist'));$this->_redirect('application/backoffice/list');} else {$this->loadPartials();$this->getLayout()->getPartial('content')->setCurrentApplication($applica tion);}}}public function savepostAction() {if($datas = $this->getRequest()->getPost()) {$application = new Application_Model_Application();try {if(!empty($datas['app_id'])) {$application->find($datas['app_id']);if(!$application->getId()) {throw new Exception($this->_('An error occurred while saving the application. Please try again later.'));}}if(empty($datas['bundle_id'])) {throw new Exception($this->_('The Bundle Id is required'));}$application->addData($datas)->save();$this->getSession()->addSuccess($this->_('The application has been successfully saved'));$this->_redirect('application/backoffice/list');}catch(Exception $e) {$this->getSession()->addError($e->getMessage());if($application->getId()) {$this->_redirect('application/backoffice/edit', array('app_id' => $application->getId()));} else {$this->_redirect('application/backoffice/new');}}}}public function deleteAction() {if($app_id = $this->getRequest()->getParam('app_id')) {try {$application = new Application_Model_Application();$application->find($app_id);if(!$application->getId()) {throw new Exception($this->_("This application does not exist"));}$application->delete();$html = array('success' => 1,'app_id' => $app_id/* ); */}catch(Exception $e) {$html = array('error' => 1,'message' => $e->getMessage());}$this->_sendHtml($html);}}7 移动应用开发服务关键技术快速创建App平台关键技术在于Cordova框架的实现.他能实现把一个web网站嵌套到一个App外壳中实现网站和App外壳的结合，成为一个混合型的App.同时后台框架Phalcon的功能实现数据传输，从而成为一个服务平台.8 总结快速创建App平台的关键运用了NodeJS(用于构建web server)，PHP（phlacon 框架的后台强大的数据处理能力）AngularJS（前端强大的数据绑定能力）.由于时间仓促，一些技术和设备所限，该系统存在一些不足之处，有待进一步改进和完善，具体说来有：(1) 对后台数据库中事务的处理由于mongodb的局限性并无法做的最完美.(2) 后台数据和前台App外壳更新无法做到拆分更新只能进行全局更新，浪费不必要的流量.(3)数据库集合（表单）功能仍未完善.(4)平台会经过各种的测试进而完善.参考文献[1] Phalcon论坛.Phalcon3.0文档[EB/OL].Phalcon官方网站/zh/.[2] [英]John M. Wargo.Apache Cordova[M].英：Addison-Wesley Professional，2013.12.[3] 朴灵. 深入浅出Node.js [M].北京：人民邮电出版社，2013.12.[4] [美]Ari Lerner. AngularJS权威教程[M].北京：人民邮电出版社，2014.8.[5] 王非,蔡勇,贺志军. RESTful Web Services在信息系统中的应用[J]. 计算机系统应用. 2013.02.[6] [美]霍多罗夫. MongoDB权威指南[M].北京：人民邮电出版社，2011.5.。