快速创建App平台的研发与设计.doc

1、 I 目录 1.引言 . 1 1.1 平台的背景 . 1 2 相关技术介绍 . 1 2.1 MVC 模型 . 1 2.2 PHALCON框架的 PHP 技术 . 1 2.3 CORDOVA移动开发客户端框 架 . 2 3 平台技术方案 . 2 4 快速创建 APP 平台 . 3 4.1 平台描述 . 3 4.2 账户权限模块 . 3 4.3 APP 模块 . 4 4.4 登录与注册模块 . 4 4.5 账户模块 . 4 4.6 管理模块 . 4 4.7 订阅模块模块 . 4 4.8 问题反馈模块 . 5 5 快速创建 APP 平台数据库设计 . 5 5.1 快速创建 APP 平台数 据库表设计

2、 . 5 5.2 快速创建 APP平台数据库 E-R 图 . 7 5.3 快速创建 APP平台 UI 图 . 7 6.平台功能模块的实现 . 13 6.1 数据库访问的实现 . 13 6.2 登录模块的实现 . 13 6.2.1 账户登录 . 13 6.2.2 管理员登录 . 14 6.3 APP 更新后台模块 . 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

3、实现 App 预览模块 . 19 II 6.3.8 实现 App 管理模块 . 19 7 移动应用开发服务 关键技术 . 21 8 总结 . 21 快速创建 App 平台 的研发 与设计 岭南 师范学院数学与计算科学学院，湛江 524048 摘 要： 本 文 研究 快速创建 App 平台 的 主要 目的 是 能够帮助完全不懂 语言编程的人，能在数分钟的时间内创建一个属于自己的 App.平台 设计 分为 前台 App 创建 模块 、 后台数据库设计与管理模块 、 中间 网页服务器 三个模块 ,使用了 AngularJS、 Phalcon、 Cordova 等框架 .采用 JS， PHP ，mon

4、goDB 等技术 结合 ，实现 App 开发、 账户 管理、内容管理 系统 、 分析数据 等 模块的具体研发过程 . 关键 词 ： App； Cordova；混合 APP； WebApp；客户定制 App Research and design of the rapid creation of App platform Author: Liu Siyuan Teacher: Gui Xiancai Lingnan Normal University of mathematics and computer science, zhanjiang 524048 Abstract: This arti

5、cle is an application platform that is designed to help people that dont understand programming language, to be able to construct and create their own Application within a few minutes of time. This articles content will be based upon the three modules, which is the front-desk(reception) App builder

6、module, the Background database design and management module, and lastly the web-server module. The platform will be Based on AngularJS, Phalcon, Cordova framework. Use technology such as PHP,mongoDB,JS, Implementation web App development, account management, CMS content management, analysis module.

7、 Keywords: APP ;Cordova;Hybrid App; WebApp; Customization 1 1.引言 1.1 平台的背景 移动互联网市场的发展态势， 巨大的商机令人垂涎，各领域企业纷纷开发了专属的 APP，但 很多非 IT 软件类企业开发经营自己的 APP，却面临软件开发、商业模式和市场推广三座大山 .快速创建 App 平台 是 一款非编程 App 制作的 平台服务 .快速创建App 平台 可以帮助企业、个人免费 DIY 制作属于自己的手机 APP 应用 .无需具备编程能力、不用自己架设服务器，只需要花几分钟的时间，就可以制作运营自己的 App. 对于开发者来说，

8、HTML5技术跨平台，适配多终端 .传统移动终端上的 Native App，开发者的研发工作必须针对不同的操作系统进行，成本相对较高 .Native App 对于 账户 还存在着管理成本、存储成本以及性能 消耗成本 .HTML/JavaScript/CSS 语言所开发的应用只要一次开发就能进入所有浏览器进行分发 .即使是走传统的 App Store 应用商店渠道，只需要再将底层用 HTML5 开发的应用 “ 封装 ” 为 App，从时间和资金成本上讲远小于跨系统移植 . 2 相关技术介绍 2.1 MVC 模型 MVC 全名是 Model View Controller，是模型 (model)视

9、图 (view)控制器(Controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面 ，在改进和个性化定制界面及 账户 交互的同时，不需要重新编写业务逻辑 .MVC 被独特的发展起来用于映 射传统的输入、处理和输出功能在一个逻辑的图形化 账户 界面的结构中 . 2.2 Phalcon框架的 PHP技术 Phalcon 是一套实现 MVC 架构的高性能 PHP 应用程序框架 .初始版本发布于 2012年 11 月，开放源代码并基于 BSD 授权条款 .与其他大部分的 PHP 框架不同， Phalcon使用 C语言 编写，因此 Ph

10、alcon 的执行速度高过其他 PHP 框架，并且消耗更少的资源，根据官方的测试， Phalcon 是目前世界上速度最快的 PHP 框架之一 .是一个开源的，全堆栈的，用 C 语言写成的 php5 框架，专为高性能设计 .你不需要学习和使用 C 语言的功能，因为这是一个 PHP 框架，只不过用 C 写成而已 .同时 Phalcon 是松耦合的，2 您可以根据需要使用其他组件 1. 2.3 Cordova移动开发客户端框架 Apache Cordova 是一套设备 API，允许移动应用的开发者使用 JavaScript 来访问本地设备的功能，比如摄像头、加速计 .它可以与 UI 框架（如 jQu

11、ery Mobile 或Dojo Mobile 或 Sencha Touch）等相结合使用，这 些 UI框架可以使用 HTML、 CSS 和JavaScript 开发智能手机应用 . 在使用 Cordova API 时，应用程序的构建可以无需本地代码（如 Java 或对象 C等），使用的是 Web 技术 . 由于这些 JavaScript. API 在多个设备平台上是一致的，而且是基于 Web 标准创建的，因此应用程序的移植很方便，基本不做什么改变 . 使用 Cordova 的应用使用平台 SDK 打包成应用程序，可以从每种设备的应用程序商店下载安装 . Cordova 提供了一套统一的 Ja

12、vaScript 库供调用，它支持 iOS、 Android、Blackberry、 Windows Phone、 Palm WebOS、 Bada 和 Symbian2. 3 平台 技术方案 由于 Phalcon 是基于 C 的 MVC 模式的 Web 开发 框架 ，利用这一 框架 可以建立动态的、高性能的、安全的、跨平台的动态网站 .为了使系统将来的维护、升级等工作方便、简单，我们采用 MVC 开发模式，以 PHP 为开发平台， 在 本系统中 我们细分 为 四层即 网络服务层，视图层 、 数据 层、 控制逻辑 层 ，使用 AngularJS 来实现 是图层 层 View 的功能；用 Nod

13、eJS 来实现 接口的定义 3；用 于 控制逻辑层 来具体实现 的业务 .具体 实现 就是 AngularJS 提交 信息到 Controller 进行判断，然后调用 Controller 中的 的具体 Action 方法实现具体业务，这当中可能涉及到对数据库的操作，即调用 数据层 里面的具体方法 .最后返回一个信息给 Controller ，由 Controller 把信息封装到一个 Json 格式的数据 中 ，再 由 Controller 返回 数据 到网络服务层 ，来实现各种需求 .使用 MVC 模式 ， 我们 在修改页面的时候，因为里面 不包含有逻辑代码，所以不会影响到系统的逻辑工作，

14、只需要 UI 就能完成工作；在逻辑层部分，只 需要专注于代码的开发，而不需要关心数据库 数据 的实现，因为数据 库数据调用 只需要通过接口实 现即可， 数据库开发人员只需要完成数据开发工作 .网页逻辑需要 一个平台维护系统： CMS，3 所以依然需要在 静态模板 页实现逻辑代码，即用 Phalcon 进行渲染和逻辑编码 .因此，可以我们可以通过下列路线来进行开发 ： （ 1）用 uxpin 来实现静态代码的设计 和 AngularJS 逻辑代码的实现 4. （ 2）用 PHP 来实现动态代码的设计，如进行的行为和动作 . （ 3）用 NodeJS 调用模型 和逻辑的 API 对接， 完成业务操

15、作后，把得到的结果存到 Json 中，然后把封装结果的 Json 作为返回 的请求 . （ 4）用 NodeJS 作为数据库的调用接口， PHP 代码可以通过该 NodeJS 通过调用API 来实现对数据库的调用 5. （ 5）对数据库的设计，首先设计数据表， 然后 用 MongoDB 建立数据表 . 4 快速创建 App 平台 4.1 平台描述 移动应用开发平台 是专门用于实现 账户 自我 DIY 自己需要的 APP,进行商业或者个人兴趣的平台 . 移动应用开发平台 通常以下 的 7个模块 ,不同模块分别实现不同的功能 . (1)账户 模块 ,账户 模块主要实现 账户 功能 ，其中对 账户

16、资料的收集最为重要 . (2)App 模块 ,App 模块是最核心的模块，其中实现对 App 的生成， App 上架到AppStore， App 资料的管理 . (3)问题反馈模块，是对于平台运作后期最为重要的一部分，它能反馈许许多多的问题，然后我们分析问题对平台进行修改和完善 . (4)账户 管理 模块，它是管理账户的资料，与 账户 模块紧紧相连 . (5)代理模块，是平台后期很重要的营销模式 . (6)订阅模块，他实现了 App 平台服务于 账户 之间的联系，实现 账户 在平台购买App 的关键 . (7)登陆注册模块，他实现了 账户 与平台的关联，实现 App 与平台的沟通 . 4.2

17、账 户 权限 模块 （ 1） 账户 管理 ： 账户 进入到 账户 管理页面后，可以实现对自己资料的增删改查，并且根据 账户 权限可以查询到自己账户的资料，进入账户管理页面 . （ 2） 账户 权限管理 ： 由于平台管理有多种多样的功能，并非所有客户都愿意 将root 所有权赋予给 所有的人，所以这里 root 账户 可以实现 RBAC（基于角色控制）进4 而实现不同的 账户 拥有不同的权限用于管理自己的 App 或者平台 . 4.3 App 模块 （ 1） App Builder（ App 创建 模块 ）：当客户进入到创建 App 时，可以选择不同模板和不同的内容 来填充客户 的 App， 这

18、里就是 App Builder，它能实现你 App 的 DIY，样式的选择， 模板的选择，功能的选择，内容的选择， 是最重要的 用户 体验部分 . （ 2） App Manage（ App 管理）：当客户创建成功 App 后，他会进入到 App 管理页面，你能在 App 管理页面对你的 App 进行增删改查，不同的样式，不同的内容，不同的功能都能在这里修改，同时可以生成你的 App 下载体验 . （ 3） App ToStore(App 上架 ): 在这里你能选择你的 App 生成的平台类型，安卓，IOS， Win8 进行上架，可以选择上架到百度，谷歌 . 4.4 登 录 与 注册模块 登录与

19、注册模块主要 分为 账户 登录注册 与管理登录注册，这里有一套 RBAC（基于角色控制）进行权限的分配 .根据你 账户 角色的不同拥有不同的增删改查 权利 .如果你是一名 普通用户 ，你仅仅可以对你 账户 资料的进行增删改查 .同时你是平台的管理员，你可以查看到不同 账户 的的资料并且进行 账户 的增删改查 .注册模块主要实现账户的注册功能 . 4.5 账 户 模块 （ 1）添加 账户： 使用平台的前提 首先 你需要有一个账户，此时你需要 注册 一个账户 . （ 2）修改 账户 ： 你能在此进行你账户信息的修改，比如你公司地址换了，你需要更新你的账户信息以供后续 我们提供服务的连通性 . （

20、3）删除 账户 ： 如果账户进行了非法勾当，我们平台可以进行删除账户 . （ 4）查询 账户 ： 账户是基于平台，所以平台可以知道账户的资料和行为 . 4.6 管 理 模块 代理模块主要应用于平台服务的销售，销售的重要性不容置疑，一个平台的收入依赖于 销售 .因此平台提供不同的营销 方式 ，可以单体购买 ， 团体购买 ， 代理购买，使用代理模式 . 4.7 订 阅模块 模块 （ 1）添加 订阅 ： 添加一个套餐的订阅 . （ 2）修改 订阅 ： 账户 购买的同时可以修改自己订阅，进而选择更喜欢的套餐或5 者产品 . （ 3）删除 订阅 ： 账户 不需要订阅的时候可 以进行删除订阅 . （ 4）

21、查询 订阅 ： 平台提供订阅的历史，方便客户统计订阅到期时间，和续费时间 . 4.8 问 题反馈 模块 （ 1）添加 反馈 ：添加 反馈，叙述自己 App 出现的问题，管理人员可以根据反馈的内容进行维护 . （ 2）修改 反馈 ： 反馈的的问题可能是 账户 本身出现操作问题，如果 账户 自身发现 App 问题可以进行修改反馈，使得管理人员和平台知道问题的来源 . （ 3）删除 反馈 ： 当反馈已经解决可以进行删除反馈 . （ 4）查询 反馈 ：可以查看所 反馈的内容 . 5 快速创建 App平台 数据库设计 5.1 快速创建 App 平台 数据库表设计 （ 1） 账户 管理表 快速创建 App

22、 平台使用的是 mongoDB 数据库技术， 账户 是本系统的主要 账户 .因此，数据系统中需要存储 账户 的基本 6. 表 1.账户管理表 字段 字段缩写 字段类型 字段描述 Account Id accountId int 主键 Name accName char(100) 公司 /名称 Nation accNation char(128) 公司 国家 Province/State accState char(128) 公司省份 City accCity char(128) 公司城市 Address accAddr char(256) 公司地址 Telephone Number accTe

23、l char(12) 公司的电话号码 Email accEmail char(1 00) 公司电子邮件地址 Fax accFax char(12) 公司的传真号码 Description accDesc char(1024) 公司的描述 User Quota accUserQuota int 账户数量 表 2.账户 信息管理表 6 字段 字段缩写 字段类型 字段描述 User Id Id integer Primary key Username Name char(100) 名称 Password Pwd char(100) 密码 Given Name GivName char(100) 名字

24、 Family Name FamName char(100) 姓氏 Gender Gender char(100) 性别 Age Age int 年龄 ID Number / NRIC NRIC Char100) 身份证 Cellphone Number Tel char(100) 手机号码 Email Email char(100) 电子邮件 Nation Nation char(100) 国家 Province / State State char(100) 省份 City City char(100) 城市 Address Addr char(100) 地址县 Registration

25、Date RegDate datetime 注册时间 Last Login Time LastLogin datetime 上一次登录的时间 Role Id RoleId int 当前对应的 权限 （ 3） App 信息表中包括 AppId（ appId）、 App 名字 （ appName）、等内容 . 表 3.App 表 User Id Id integer 主键 App Id Id integer 主键 App Name Name varchar(100) App 的名称 Account Id accountId integer 外键 AppType Package Id typeId

26、integer 外键 Creation Date Cdata datetime App 的创建时间 Creator Id Id integer 创建 App 的 账户 IOS Version Ios Bool IOS Android Version Android Bool Android 7 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.