HTML5 App商业开发实战教程章节设计

HTML5 App商业开发实战教程课程教学章节设计第七章：App开发授课教师：Web课程组授课班级：学时：15教学条件计算机、局域网环境、外网环境教学素材教材、课件、授课录像、案例库、教学网站等教学目标设计知识目标：（1）了解常用的Cordova插件的使用方法（2）理解本地App的组成，以及打包向导中参 数的含义（3）掌握打调试包的方法（4）掌握打发布包的方法（5）了解安卓手机真机调试的方法（6）了解苹果手机真机调试的方法（7）掌握一键发布到CloudX5能力目标：（1）掌握通过调用Cordova插件，实现拍照、摄像、 录音、播放音乐、摇一摇和获取地理位置信息等功能（2）准备个性化的应用图标、启动页、引导页（3）打调试包调试程序（4）使用个性化的应用图标、启动页、引导页打个性 化的发布包（5）如果有Mac系统，可以申请苹果免费帐号的开发 证书。如果有苹果证书和Mac版本的WeX5,可以打 苹果包（6）掌握用Chrome浏览器调试安卓手机App（7）掌握用Mac系统的Safari浏览器调试苹果手机 App（8）将自己开发的App部署到CloudX5教学内容（1）介绍H5 App调用手机硬件的方法；（2）介绍App安装包的组成，以及打调试包和发布包的方法；（3）介绍真机调试和云部署的方法。重点：（1）掌握Cordova插件的使用方法（2）掌握打调试包的方法（3）掌握打发布包的方法（4）掌握部署到CloudX5的方法难点：（1）真机调试课后作业（1）7.1.3同步训练：使用Cordova插件实现拍照、录像等功能；（2）7.3.3同步训练：将前面开发出来的仿微店App打成Android包或iOS包；（3）7.5.3同步训练：将前面开发出来的仿微店App部署到CloudX5。教学过程设计节7-1： App调用设备硬件（学时数：7）主要 步骤教学内容教学方法教学手段师生活动问题 引入H5 App是如何调用设备原生API的？教师讲授 引导文法多媒体学生：思考 教师：演示知识 讲解知识点1： Cordova插件是设备相关API, 通过这组API，移动应用能够以JavaScript 访问原生的设备功能，如摄像头、麦克风 等知识点2：使用Cordova插件的方法是： 引用插件、调用插件中的方法、打包时包 含插件知识点3 :作为混合应用才能调用 Cordova插件，作为网页应用不能调用 Cordova 插件启发讲解 讨论归纳多媒体 课件演示学生：思考、记 录笔记 教师：启发示范 操作操作1：演示使用Camera插件实现拍照 功能操作2：演示使用Media Capture插件实 现录像功能操作3：演示使用Device Motion插件获 取加速度信息操作4：演示使用Media插件实现录音以 及播放音乐等功能操作5：演示使用Geolocation插件获取 地理位置信息等功能问题引导 操作演示 分析归纳多媒体 系统演示学生：观摩思考 教师：归纳总结实战 训练完成7.1.3同步训练动手实践 做中学同步训练学生:实践操作 教师:巡视检杳评估 讨论（1）讨论为什么混合应用才能使用 Cordova 插件（2）展示学生的讨论结果（3）考核学生结果教师启发 讨论归纳 分数激励多媒体学生：思考 教师:结果演示课堂 总结（1）Cordova插件是用来访问手机硬件 设备的，调用插件提供的JS方法即可调 用到手机操作系统的API,从而实现访问 手机硬件设备（2）实现不同的功能使用不同的 Cordova 插件，除了 WeX5 提供的 Cordova 插件，还可以在网上下载其他Cordova插 件，也可以自定义Cordova插件（3）App中一定要包含相关Cordova插 件，Cordova插件的JS方法才能正常调用教师讲解多媒体 课件演示学生:整理笔记 教师：引导创新课后 作业完成7.1.3同步训练教师讲授多媒体学生：听讲 教师：布置作 业、提出要求教学过程设计节7-2： App组成（学时数：3）主要 步骤教学内容教学方法教学手段师生活动问题 引入混合应用由哪几部分构成？教师讲授 引导文法多媒体学生：思考 教师：演示知识 讲解知识点1： App包括图片（应用图标、启 动页、引导页）和证书（安卓证书、苹果 证书），还包括Web View的访问地址和调 用设备硬件的Cordova插件知识点2：手机上的每个应用都有自己的 图标，这就是应用图标知识点3：启动页是App启动过程中的 过渡页面。给用户展现一个漂亮的界面， 可以提升App用户体验知识点4：第一次运行App时，在进入 首页之前可以显示引导页，用来引导用户 学习App用法、了解App作用知识点5： Android系统要求，应用程序 必须经过数字证书签名，才能安装。WeX5 的打包工具就可以生成一个有数字签名 的安卓证书知识点6：只有iOS开发者才能开发iOS App。首先申请苹果开发者帐号，成为iOS 开发者。然后生成开发证书用于开发调试 App,生成发布证书用于发布App 知识点7： Hybrid App融合 Web App的 原理就是嵌入一个WebView组件，可以 在这个组件中载入页面，就相当于一个内 嵌的浏览器，将应用的首页地址，设置为 Web View的访问地址，就可以在Hybrid App中访问整个Web App 了知识点8：在Hybrid App中通过Cordova 插件调用设备硬件，因此App中必须包括 使用到的Cordova插件启发讲解 讨论归纳多媒体 课件演示学生：思考、 记录笔记 教师：启发示范 操作操作1:演示准备96px x 96px的PNG-32 位图片作为应用图标操作2：演示准备720px x 1280px的 PNG-32位图片作为竖屏欢迎页图片操作3 :演示准备1280px x 720px的 PNG-32位图片作为横屏欢迎页图片操作4：演示将UI2portalsamp目录下 的 intro.htmlintro. jS intr文件夹拷贝 到仿微店目录wd中。仿照introimag文 件夹卜的 Ol.png O2.png 03.png二张图 片准备仿微店App的引导页图片问题引导 操作演示 分析归纳多媒体 系统演示学生：观摩思考 教师：归纳总结实战 训练准备96px x 96px的PNG-32位图片作为 应用图标准备720px x 1280px的PNG-32位图片 作为竖屏欢迎页图片准备1280px x 720px的PNG-32位图片 作为横屏欢迎页图片将 UI2portalsamp目录下的 intro.html intro.jj intrc文件夹拷贝到仿微店目录 wd中。仿照introimag(文件夹下的 O1.png, O2.png, 03.png三张图片准备仿 微店App的引导页图片动手实践 做中学多媒体学生：实践操 作教师：巡视检 查真实系统环境评估 讨论(1) 讨论混合应用是怎么打开网页应用 的？(2) 展示学生的讨论结果(3) 考核学生结果教师启发 讨论归纳 分数激励多媒体学生：思考 教师：结果演 示课堂 总结(1) 不同的设备因分辨率不同，需要不 同尺寸的应用图标图片和欢迎页图片。 WeX5的打包工具可以将一张高分辨率的 图片按照安卓和苹果系统的要求生成多 种规格的图片，供多种设备使用。(2) 生成的安卓平台的图片在 Nati vewdbuildsrcrmsandroic目录 下，生成的苹果平台的图片在Na ti veacc buildsrcplatformsiosaccRes目录C 下(3) Web View的访问地址必须设置为网 页应用的首页地址教师讲解多媒体 课件演示学生：整理笔 记教师：引导创 新教学过程设计节7-3： App安装包（学时数：2）主要 步骤教学内容教学方法教学手段师生活动问题 引入一切都准备好了，现在打包生成App吧教师讲授 引导文法多媒体学生：思考 教师：演示知识 讲解知识点1： WeX5的打包工具，可以将开 发好的Web App加上Cordova插件，生成 Hybrid App知识点2：可以生成两种安装包，用于安 卓系统的APK和用于iOS系统的IPA知识点3：在WeX5 Windows版中可生成Android APK包，在 WeX5 Mac版中可生 成 Android APK 和 iOS IPA知识点4：打包时用模式3生成的App 用于开发调试，称为调试包。使用模式1 生成的App用于发布，称为发布包启发讲解 讨论归纳多媒体 课件演示学生：思考、 记录笔记 教师：启发示范 操作操作1：演示使用创建本地App和生成本 地App包向导，生成调试包，安装到手机 上操作2：演示修改页面并保存。观察手机 自动刷新页面，显示修改后的页面操作3：演示使用创建本地App和生成本 地App包向导，生成发布包操作4：演示修改页面并保存。观察手机 中的页面资源不会更新问题引导 操作演示 分析归纳多媒体 系统演示学生：观摩思考 教师：归纳总结实战 训练完成7.3.3同步训练动手实践 做中学多媒体 真实系统环境学生：实践操 作教师：巡视检 查评估 讨论（1）讨论调试包和发布包的区别（2）展示学生的讨论结果（3）考核学生结果教师启发 讨论归纳 分数激励多媒体学生：思考 教师：结果演 示课堂 总结(1) WeX5的打包工具打包分为两步：创 建本地App和生成本地App包(2) 应用模式有四种，模式1和模式2 用于打发布包，模式3用于打调试包。模 式4用于打包非WeX5开发的H5 App(3) 打调试包时，选中“模式3”，在 “UlServer服务地址”中选择Tomcat运行的服务器地址；在“Web路径”中选择“/X5/UI2”。在“首页”中选择应用的首 页。选中UI资源目录，不选中“本地应 用包含UI资源”，选中“重新编译使用到 的UI资源”(4) 打发布包时，选择“模式1”，仿微 店App是一个无Web服务端的本地应用。“Web服务地址”和“Web路径”这两项 不填。“首页”选择应用的首页。选中UI 资源目录，选中“本地应用包含UI资源”， 选中“重新编译使用到的UI资源”教师讲解多媒体 课件演示学生：整理笔 记教师：引导创 新课后 作业完成7.3.3同步训练中的拓展训练教师讲授多媒体学生：听讲 教师：布置作 业、提出要求教学过程设计节7-4： App调试(学时数：1)主要 步骤教学内容教学方法教学手段师生活动问题 引入App在浏览器中运行时没有问题，在手机 上运行时报错，怎么办？能调试吗？教师讲授 引导文法多媒体学生：思考 教师：演示知识 讲解知识点1：页面开发一般使用浏览器调 试，如果浏览器访问页面正常，而 App 访问报错时就要进行App调试知识点2：调试包可以调试，发布包不能 调试知识点3：安卓应用使用Chrome浏览器 调试知识点4：苹果应用使用Mac系统的 Safari浏览器调试启发讲解 讨论归纳多媒体 课件演示学生：思考、 记录笔记 教师：启发示范 操作操作1：演示设置手机允许调试操作2：演示使用USB线将手机连接到计 算机操作3：演示在手机上打开应用操作4：演示运行WeX5目录下的“启动Chrome浏览器”操作5：演示单击Android真机调试 书签，观察页面中列出的手机，以及应用 地址操作6：演示单击inspect打开监控页面， 和调试普通Web页面一样调试App中的页 面问题引导 操作演示 分析归纳多媒体 系统演示学生：观摩思考 教师：归纳总结实战 训练打调试包，安装到手机上，练习真机调试动手实践 做中学多媒体 真实系统环境学生：实践操 作教师：巡视检 查评估 讨论(1) 讨论真机调试的作用和使用场景(2) 展示学生的讨论结果(3) 考核学生结果教师启发 讨论归纳 分数激励同步训练学生：思考 教师：结果演 示、at课堂总结(1) App调试是使用PC浏览器监控手 机App的运行过程，借助PC浏览器相应 工具能力完成对真机前端UI贝面的调试(2) Cordova插件出现问题不能使用该 方法调试，必须使用原生环境进行调试教师讲解多媒体 课件演示学生：整理笔 记教师：引导创 新教学过程设计节7-5：云部署（学时数：2）主要 步骤教学内容教学方法教学手段师生活动问题 引入发布包已经生成好了，如何发布到互联网 上？教师讲授 引导文法多媒体学生：思考 教师：演示知识 讲解知识点1： WeX5提供一键部署到云服务 器CloudX5，实现在云服务器上部署整个 应用，部署后即可通过互联网访问该应用 知识点2：使用CloudX5需要先注册， 成为CloudX5云用户知识点3：在CloudX5上部署App的三 个步骤：准备部署环境、准备部署资源、 一键部署启发讲解 讨论归纳多媒体 课件演示学生：思考、 记录笔记 教师：启发示范 操作操作1：演示在WeX5开发工具中注册CloudX5 用户操作2：演示在WeX5开发工具中登录CloudX5操作3：演示新建CloudX5项目操作4：演示用CloudX5项目的网址作为 “Web服务地址”重新生成App操作5：演示一键部署问题引导 操作演示 分析归纳多媒体 系统演示学生：观摩思考 教师：归纳总结实战 训练完成7.5.3同步训练动手实践 做中学多媒体 真实系统环境学生：实践操 作教师：巡视检 查评估 讨论（1）讨论CloudX5的作用（2）展示学生的讨论结果（3）考核学生结果教师启发 讨论归纳 分数激励同步训练学生：思考 教师：结果演 示课堂 总结（1）部署资源包括数据库脚本、后端服 务、UI资源和App安装包。仿微店App 没有是无Web服务端的本地App，因此不 需要部署数据库脚本和后端服务（2）在CloudX5上的每个应用都有独立 的域名，项目名称用作域名，因此不能和 已有的项目名称重复（3）在CloudX5部署后，生成下载App 的二维码便于发布应用（4）后续可以继续维护和扩展在 CloudX5上发布的应用，只需要准备部署 资源和一键部署两个步骤教师讲解多媒体 课件演示学生：整理笔 记教师：引导创 新课后 作业完成7.5.3同步训练中的拓展训练教师讲授多媒体学生：听讲 教师：布置作 业、提出要求