您好,欢迎来到爱玩科技网。
搜索
您的当前位置:首页Web APP技术框架下“大同大学校园助手”APP的设计与实现

Web APP技术框架下“大同大学校园助手”APP的设计与实现

来源:爱玩科技网
第33卷第1期 2017年2月 文章编号:1674—0874(2017)01—0007—03 山西大同大学学报(自然科学版) Journal of Shanxi Datong University(Natural Science) VoL33.No.1 Feb 2017 Web APP技术框架下“大同大学校园助手”APP的设计与实现 张天云,崔玲玲,蔚云 (山西大同大学教育科学与技术学院,山西大同037009) 摘要:文章从中国手机网民的调查数据出发,论述了建设数字化校园的重要性;其次对“大同大学校园助手” APP进行了系统体系结构设计,详细分析了“同大首页”、“公告栏”、“校园文化”和“学生信息”四个主要模块的具体 功能;继而对四个模块进行了数据表设计并在此基础上进行了开发;通过测试证明该APP应用界面良好、操作简 单、功能齐全.并且具备良好的跨平台性。 关键词:数字化校园;Web APP;移动应用;WeX5 中图分类号:TP31 1.52 文献标识码:A CNNIC第38次《中国互联网络发展状况统计报 告》显示;截至2016年6月,中国手机网民规模达高 云网站和移动应用客户端两个重要组成模块,HT— ML5云网站的作用是为移动应用提供数据支持,移 动应用客户端的主要作用是为应用提供设备支持, 在“大同大学校园助手”APP的设计中Web APP凸 6.56亿,上网设备进一步向移动端集中 ]。随着对泛 在学习的认知与网络资源建设的去中心化,采用移 动终端获取信息已然成为高校学生的操作习惯。 数字化校园是使数字资源得到充分优化利用的一 种虚拟教育环境[21,虽然各大高校都在积极建设和 完善校园网络平台,然而随着移动技术的不断发展, 出现了门户网站难以在移动终端移植、平台信息发 布渠道单一、学生无法便捷的获取信息等问题。所 以不断深化和构建数字化校园系统中的APP体系, 显了跨平台的高兼容性。 1。2跨平台开发环境WeX5 WeX5将移动应用开发分为三个模块:前端UI 设计技术和标准采用w3c的html+css+js,框架采用 iquery、require jS和bootstrap的发展路线,不断深化 用户与界面之间的交互体验,提升应用价值;后服 务端对开发语言没有硬性要求,设计人员可以采用 形成以移动智能为趋势的无线体系结构,是高校构 建信息化、智能化、便利化校园的重要任务之一。 熟悉的语言来开发程序;前端设备API的apiframe work采用了codova/phonegap。WeX5开发平台是开 源性的、可进行跨平台多前端应用开发、具备高效 精致的uI组件体系和可视化拖拽式集成开发环境 IDE、具有全能的调试支持和智能代码提示功能,是 APP开发的首选。 1关键技术 1.1 Web APP开发技术框架 移动应用有原生开发模式和网页开发模式,在 HTML5推出之前,技术人员主要采用基于手机操作 系统运行的原生开发模式,但该模式具有开发复 杂、效率低、成本高、可移植性差等缺陷。随着 HTML 5技术以及云计算的发展,更多的技术人员 选择网页开发模式,以UC浏览器为平台的一批 Web APP已经开始出现p],Web APP开发模式本质 2“大同大学校园助手”A P P设计 2.1系统体系结构设计 设计开发的“大同大学校园助手”APP(以下简 称APP)主要实现对本校基本信息的收集、管理与 发布等功能,在系统总体结构设计上分为两部分: 第一部分是前端设计技术和标准;第二部分是界面 数据设计。界面内容有两种数据类型:“公告栏”等 模块的内容需要及时更新与管理,不断与服务器进 上是一种框架型开发模式,使用的技术是Web开发 的常用技术如:HTML5、CSS3、JavaScfipt,服务端技 术,JAVA、PHP、ASP等 。web APP主要有HTML5 收稿日期:2016—07—16 基金项目:山西省教育科学“十二五”规划课题[GH-12063] 作者简介:张天云(1976一),男,内蒙古察右前旗人,硕士,讲师,研究方向:计算机技术。 山西大同大学学报(自然科学版) 行频繁的交换数据,所以存放在服务器端的数据库 中;“同大简介”等模块内容短时间不需要进行调整, 这部分数据存放在本地数据库或者设备上。 2-2系统功能结构设计 询数据,字段设计如表1所示: 表1 “校园文化”数据表 APP用户群主要面向新生以及预报考人群,各 模块功能应符合用户的特定要求,不但需要满足用 户获取学校最新资讯的需求,而且还要保证其良好 的交互体验。通过需求分析,将APP分为四个功能 模块,分别为“同大首页”、“公告栏”、“校园文化”和 “学生信息”功能模块。各模块功能详细介绍如下: (1)“同大首页”模块:主要通过“同大简介”传 达建校历史、专业设置、学校部门设置等信息。 (2)“公告栏”模块:传达校园新闻,让用户及时 了解校园动态,参与到校园活动中来。 (3)“校园生活”模块:分为了八个子模块,分别 展示科技创新、志愿服务、文化艺术、校园生活、教 育教学、学生生活、社会实践和美丽校园等内容。 2.3.2“学生信息”数据表设计 “学生信息”数据表(student)存储学籍信息,数 据从应用模块收集,学生填写信息之后存储在信息 表中,因此“学生信息”数据库表动作有查询数据和 保存数据功能。当学生提交学籍信息之后自动保 存在学生数据表,每次学生运行APP,数据库表会根 据studentID查询表中的数据,呈现学生当前的学籍 信息,字段设计如表2所示: 表2“学生信息”数据表 (4)“学生信息”功能模块主要用来收集新生个 人学籍信息。APP功能结构设计如图1所示。 I : ! !竺三: : I 、I, 、I, 3“大同大学校园助手”A P P开发 APP采用单页应用开发模式,由外壳页面、主页 图1 APP系统功能结构设计图 面、功能页、子页面组成,所有页面内的资源都在外 框页面享,各页面可以利用shell实例调用资源。 3.1主页面的开发 主页面主要用来展示“同大首页”等四个功能 模块。主页面被外壳页面调用shell实例打开,避免 初始运行时出现空白页面,将外壳页面的autoload 2.3数据库设计 APP的页面数据分为静态数据和动态数据,静 态数据设置成Json文件,动态数据存储在与weX5绑 定的MySQL数据库中,本文以“校园文化”数据表和 属性值设为false,并引用shell实例的showpage方法 在加载外壳页面同时展示主页面。主页面的页面 设计过程为:新建index.W文件,在界面上放置panel 组件形成底部固定的页面;在panel组件的bottom部 分放置buttongroup组件,并新建四个button按钮,分 别为四个按钮设置各自的xid、l abel、icon;在panel 组件的content部分放置contents组件,在contents组 “学生信息数据表”为例说明数据表设计。 2.3.1“校园文化”数据表设计 “校园文化”数据表(campus culture)储存的数 据为文化艺术、科技创新等八部分内容,该模块更 新间隔短,设置为动态数据,数据库表动作为只查 2017年 张天云等:Web APP技术框架下“大同大学校园助手”APP的设计与实现 件上新建四个content,分别将xid命名为homecon— tent、noticecontent、campuscontent和studentcontent. “校园文化”content页面主要分为八个子模 块。为了将八个方面的内容放置在同一个content 然后将buttongroup的四个按钮的target设置为对应 的content页面,运行APP激发四个按钮可以显示相 应的功能页面。 内,campuscontent页面设计过程为;首先在campus. content页面放置一个panel组件,在panel组件的top 部分放置一个titlebar组件,并设置title属性值为“我 思故我在”。在panel组件的body部分放置一个row 组件,并分为两个列col组件,设置两个col组件所占 3.2“同大首页”功能模块的开发 “同大首页”content页面内,分为图片轮换区和 大同大学简介区。homecontent页面设计过程为:首 先在homecontent放置一个panel组件形成顶部固定 的页面,在panel的top部分放titlebar组件,添加title 列宽分别为4和8。在第一个col组件中放置一个 buttongroup组件,添加八个按钮并分别设置对应的 label属性。在第二个col组件中放置一个contents 组件,新建八个content并分别设置相应的xid属 性。将buttongroup的八个button组件的target设置 为对应content的xid。“校园文化”功能模块页面如 图3所示: ■■■■■—■■i■■_文化艺木 抖瞌胡撕 属性值为“大同大学简介”,在titlebar组件的letf部 分放置一个按钮,并设置图标和xid为left,为按钮设 置click方法。在panel的body中放scrollview组件, 在scrollview组件中放置div组件,在div组件中放置 carousel组件和div组件。carousel组件用来展示图 片轮换,在carousel组件中添加三个content,分别放  文化是大字的血脉.篷大掌 的灵魂.一所大学亲尚什么.张 场什么 不仅列每—『立大学人价 置image组件,分别为三个image组件的属性sre设 置属性值,将carousel组件的autoturn属性值设为 ture,interval属性设置为3,div组件用来呈现“同大 简介”,在div组件中放置button组件和output组 件。将button组件的1abel属性改为“同大简介>>”, 添加自定义属性URL值为“同大简介”详细页的相 对路径,并添加button的click方法命名为open— 值理急和精神品格的开;成具有重 社 赌詈 姜i触目、馨竺 具有重要影响.乃至对字校的发 展战艏目标定位、字木趣范、 规塞制度 教学体系具有积极的 掌生生活 l蜜目生岳 引领作用.2006 ̄大同大学组建 合并后.较、校行政将 文化 润校 作为提升掌校质量 打造学 }壹品牌的一项重要的战路工程. 吉置聃嚣 雾套 耆 凳 载体.努力打造具有时代 正和 Demo。先在model组件中放一个baasdata组件并改 名为briefbassdata,将baasdata组件的table属性设置 为“同大简介”数据库表,然后在output组件的bind— ref属性值设置为tTitle字段名。“同大首页”功能模 块页面如图2所示: 转宥鞍掌学校持色的校园文化品牌. 从腼应时代 发展的首届文化艺术节 文明和 谐发展”的届动.到张扬学生个 性的幕二届文化艺术节 个性品 格精神 的创建:从强调践行}土 喜 目大蔷 目 公告I兰 露 撞园文化 圜 掌生信息 图3“校园文化”界面展示图 4应用测试 APP应用测试总共分为前端uI、功能和性能 个方面,分别采用了夜神安卓模拟器和智能设备进 行测试。首先,在WeX5开发环境打包应用时需要 进行参数配置、资源通过Ulserver访问、应用名为 大同大学、web服务器地址为本机ip地址加8080端 口号、首页配置为index.W、版本号为1.1.0、应用包 名为com.wex5.tongda、配置cordova组件device、ge— olocation和baidulocation;其次,将打包好的APP安 装到夜神模拟器和智能终端设备上运行,测试终端 包括了Android虚拟机、小米4、酷派大神F2、华为 图2“同大首页”界面展示图 P5等,测试系统从Android 5.0到Android 7.6.3。总 体来说“大同大学校园助手”APP应用界面合理、操 作简单;功能涵盖齐全,各个模块的(下转第15页) 3.3“校园文化”功能模块开发 2017正 曲霄红等:基于计算机视觉的大型机械装备逆向工程的研究 ・15・ QU Xiao—hong .HU Li—hua (1.School of Education al Science and Technology,Shanxi Datong University,Datong Shanxi,037009; 2.School of Computer Science and Technlolyg,Taiyuan University of Science and Technology,Taiyuan Shanxi,030024) Abstract:Reverse engineering,which is a new advanced manufacturing technology,has been widely used in various industires. The computer vision,which is a non—contact measurement method used in reverse engineering,has the advantage of high accuracy, high speed,and insensitive to the environment variations of the object to be measured.Computer vision based reverse engineering has been extensively studied in both academia and industry,but few people made a research on the large mechanical equipments using the computer vision.In this work,computer vision based large mechanical equipments reverse engineering is reviewed.Three key steps:da— ta acquisition,data processing and modeling of large mechanical equipment are summarized and the existing problems in each step are discussed deeply,followed by some possible promising techniques. Key words:large mechanical equipment;reverse engineering;computer vision;feature detection; [责任编辑高海] (上接第9页)功能正常展示,贴近了新生的真正需 手”APP旨在为新生以及潜在的预报考人群提供一 求;性能测试方面表现出了较强的兼容性和跨平台 个便捷的平台。用户能够利用移动终端及时了解 性,在各类设备终端和智能系统中运行良好。 校园历史、校园资讯、学校教学、包含专业等最新 5总结与展望 信息,尽快熟悉校园。同时该APP在时空上对物理 校园进行了扩展,丰富了数字化信息交流平台,加 Web APP技术框架开发的“大同大学校园助 深了校园文化的构建。 参考文献 【1】王春枝.移动视频媒体对区域文化的传播和建构【JJ.青年记者,2016(24):91—92. 【2】周矛欣.浅谈建设数字化校园一卡通[J].中国教育信息化,2010(15):29—30. [3】董涛.基-7-Android的移动校园客户端设计与开发[】)].西安:西安电子科技大学,2014 【4])Tej春来.APP应用程序开发模式探究『J1.硅谷,2014,149(5):35—36. The Design and Development of“Datong University Campus Assistant’’Based on Web APP ZHANG Tian—yun,CUI Ling—ling,WEI Yun (School of Educational Technology and Science,Shanxi Datong University,Datong Shanxi,037009) Abstract:This paper discusses the importance of building digital campus by using investigation data of mobile phone users. Secondly,The design of“Datong University Campus Assistant App”includes four main models:Homepage,Announcement Board, Campus Culture and Student Information,Thirdly,based on data sheet design of this four models we development this App.During test this App has many properties like friendly interface,simple operation,complete functions,especially the powerful cross platform capa— bility. Key words:digital campus;Web APP;mobile application;WeX5 [责任编辑高海] 

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- aiwanbo.com 版权所有 赣ICP备2024042808号-3

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务