Ionic项目实战课件全书电子教案教材课件.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/3/21 Monday,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2022/3/21 Monday,#,Dancer时代登录模块实现,项 目 一,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,了解登录功能的实现流程,学习Ionic项目的基本结构,掌握Ionic项目的创建,学习,目标,通过Dancer时代登录模块的实现，了解登录功能的实现流程，学习Ionic框架的优缺点，掌握Ionic所需软件的安装及环境的配置，具有解决登录验证的实现过程中出现问题的能力。,04,具有解决登录验证的实现过程中出现问题的能力,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,在这个衣食无忧，科技发达的时代，越来越多的人开始追求精神上的需求，而舞蹈正是满足大众需求的一种文化形式。经过讨论，项目负责人Richard和他的开发团队决定开发一款手机软件，让更多的人在学习舞蹈的同时也可以了解舞蹈中蕴含的文化。Richard等人将该软件命名为：“Dancer时代”。Dancer时代主要包括五个模块，分别为：登录、首页、上传、分享、我的。本模块主要通过实现Dancer时代的登录功能了解Ionic的基础知识和基本的项目结构。,功能描述,使用,I,onic轮播组件实现轮播图效果,01,02,03,04,使用路由进行页面的跳转,使用输入框组件实现输入框的样式,使用ngModel进行数据的双向绑定,基本框架,04,任务技能,01,02,03,任务,技能,跨平台移动开发框架,Ionic环境配置,Ionic项目结构,跨平台移动开发框架简介,1,跨平台移动开发框架,2,跨平台移动开发框架选择,3,跨平台移动开发框架是一种在不依赖操作系统和不依赖硬件环境的情况下，通过打包工具适配输出可以在多种移动操作系统上运行的开发框架。它具有减少软件开发、维护的费用，提高软件使用时间的特点,标准化、开发资源丰富是跨平台移动开发最大的优点，第三方框架工具（Cordova等）为其提供方便的跨平台应用打包/发布服务、实用的API、灵活的扩展机制、以及积累下来的丰富的第三方API实现。,跨平台移动开发框架,在对跨平台移动开发框架进行初步的了解后，从项目开发的角度看，使用Ionic框架可以有效利用Angular的特性，极大的提供HTML5应用开发效率、质量、模块化程度。使用Ionic开发相比较其他框架代码量减少，开发速度提高。,Ionic,基本环境安装,1,在Window下打包APK,2,在Apple OSX下的打包APK,3,（1）安装,JDK,（2）安装SDK,（1）安装,Xcode,（2）,运行,APP,（3）,在,SDK,中打开项目,Ionic环境配置,（1）安装Node.js,（2）安装Ionic,（3）安装cordova,（4）创建简单的ionic项目,建设制造强国,1,2,1、node_modules文件夹是Ionic项目中Node各类依赖包,2,、,platform文件夹是项目打包APK时需要的文件夹，打包完成后会自动生成在该文件夹下。3、plugins文件夹中是项目中所需的cordova插件 4、src文件夹中是项目最重要的文件夹，主要用来编辑和配置显示的内容。,页面跳转功能,:,（1）,创建页面,（2）,页面配置,（3）,在新界面取值,Ionic项目结构,Ionic项目结构,Ionic 案例,05,任务实施,输入标题,输入标题,输入标题,第一步：打开命令行，进入想要创建项目的目录下，运行ionic start myapp blank-v2创建一个有一个界面的项目,第二步：创建登录首界面并进行页面制作,第三步：,创建登录界面，进行登录首界面跳转到登录界面,第四步：,进行登录界面制作,点击输入说明文字,点击输入说明文字,点击输入说明文字,任务实施06,任务总结,任务技能,任务实施,任务总结,任务描述,本项目通过Dancer时代登录模块的学习，能够对跨平台开发技术的介绍及特性有所认识，对Ionic环境搭建及APK打包具有初步了解并能够安装Ionic插件，同时能够掌握Ionic的项目结构及应用Ionic创建界面的本事。,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下载：,PPT,论坛：,Dancer时代主界面模块的实现,项 目 二,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,了解Ionic的CSS组件,掌握Ionic列表,掌握Ionic使用轮播图的步骤,学习,目标,通过Dancer时代主界面模块的实现，了解主界面的设计理念及功能实现，学习Ionic相关组件及如何应用列表实现布局，掌握Ionic使用轮播组件实现主界面模块的轮播，具有使用Ionic组件实现主界面布局的能力,。,04,使用Ionic组件实现主界面布局的能力,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,对于一款手机软件，其主界面是非常重要的，可以说它是直接影响软件用户数量的关键。所以界面设计人员Ellison在主界面的设计和美化上花了很大的心思，他在设计主界面时不仅考虑到软件信息的宣传还考虑了用户使用软件的便利性，所以Ellison在界面中添加了手机软件中常用的轮播图元素。主界面中还有视频和音乐的推荐功能，点击跳转对应界面可进行视频和音频的播放。本模块主要通过实现Dancer时代的主界面了解Ionic的轮播图和导航组件。,功能描述,使用选项卡组件实现页面的切换,01,02,03,使用Ionic图标丰富APP页面,使用列表组件实现页面的布局,基本框架,04,任务技能,01,02,03,04,任务,技能,Ionic的CSS组件,导航组件,Ionic列表,Ionic功能,Ionic字体图标,1,按钮,2,Ionic表单,3,ionIcons采用了TrueType字体实现图标样式，有超过700个图标可供选择。,。,Ionic的CSS组件,建设制造强国,1,2,选项卡通过ion-tabs标签定义，选项使用ion-tab（ion-tab是ion-tabs的子标签，每个选项卡的选项都包含一个相对应的界面）标签定义。,Ionic提供的侧边菜单通过点击带有menuToggle元素的标签，从当前界面的侧面滑入的导航，默认情况下从左侧划入，通过设置side=right实现从右侧滑入。,导航组件,Ionic,选项卡,Ionic侧栏菜单,基本列表,1,列表分隔符,2,滑动列表,3,列表分隔符可以用来将列表划分成多个列表组，好处是使浏览者更方便查询列表项。其实现方法是使用标签作为列表容器，通过标签将列表划分为多个部分。,滑动列表通过向左或向右滑动，以显示一组隐藏的按钮。通过在ion-list组件内添加ion-item-sliding组件实现滑动列表，添加标签包含滑动出的按钮。,Ionic列表,默认情况下，基本列表之间有分隔线，若要隐藏列表项之间的分隔线，只需在,标签内添加,no-lines,属性。,Ionic卡片,1,轮播组件,2,数据查询,3,代码结构由轮播图容器（,标签）和轮播图组件（,标签）组成,在Ionic项目中，当列表数据过多时，要找一条特定的记录就尤为困难，这时数据查询功能就可以用到。其实现需要调用getItems()方法，调用该方法的触发类型有三种,。,Ionic功能,近年来卡片在前端设计使用越来越频繁，卡片具有内容显示分层次、更加规整等特点，它是一个更好组织信息展示的工具。在设计移动端应用时，卡片会根据屏幕大小自适应大小。,05,任务实施,输入标题,输入标题,输入标题,第一步：创建选项卡、首页、上传、分享、我的界面并配置,第二步：首页轮播图的制作,第三步：轮播图下方图标区域制作,第四步：底部列表的制作，并添加页面跳转,点击输入说明文字,点击输入说明文字,点击输入说明文字,任务实施,06,任务总结,任务技能,任务实施,任务总结,任务描述,本项目通过对Dancer时代主界面模块的学习，对Ionic相关组件及应用列表布局的使用具有初步了解，对Ionic相关的导航及菜单栏的使用有所认识，同时掌握了Ionic使用组件实现主界面的布局和美化。,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下载：,PPT,论坛：,Dancer时代音频模块的实现,项 目 三,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,了解视频、音频播放功能的实现流程,掌握Ionic弹出框的使用,掌握Ionic手势事件的实际应用,学习,目标,通过Dancer时代音频模块的实现，了解视频、音频播放功能的实现流程，学习Ionic弹出框的使用，掌握Ionic中插件的安装和使用，具有独立使用插件实现播放功能的能力,。,04,具有独立使用插件实现播放功能的能力,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,在Dancer时代APP中，学习舞蹈最直观的方式就是观看视频。一段完美的舞蹈离不开音乐的加入，有节奏的舞蹈才能引人注目。因此，Ellison综合各个方面的需求在主页中添加了播放视频、音乐的入口，通过点击进入视频界面，之后是推荐的精彩视频列表，用户可以通过翻阅列表选择自己喜欢的视频进行观看。点击进入音乐界面后，用户可以根据自己的喜好选择音乐。本模块主要通过实现Dancer时代的视频、音频播放功能了解Ionic弹出框和插件的使用。,功能描述,使用navParams服务实现跳转页面的传值,01,02,03,使用videoplayer插件实现视频的播放,使用media插件实现音乐的播放,基本框架,04,任务技能,01,02,03,04,任务,技能,Ionic弹出框,常用事件,插件简介及使用,音乐播放,模态框,1,对话框,2,上拉菜单,3,第一步：在,html,页面中定义一个按钮，并添加点击事件。,第二步：在对应的,ts,文件引入,ModalController,。,第三步：构造,ModalController,。,第四步：通过,showAlert(),实现模态框的功能。,第一步：在,html,页面中定义一个按钮，并添加点击事件。第二步：在对应的,ts,文件引入,AlertController,。,第三步：构造,AlertController,。,第四步：通过,showAlert(),实现对话框的功能。,Ionic弹出框,第一步：在,html,页面中定义一个按钮，并添加点击事件。,第二步：在对应的,ts,文件引入,ActionSheetController,。,第三步：构造,ActionSheetController第四步：通过,doConfirm(),实现上拉菜单的功能。,建设制造强国,1,2,常用事件,触发事件,生命周期事件,建设制造强国,1,2,插件简介及使用,cordova插件,Camera,插件,1,音乐播放,音乐播放,05,任务实施,输入标题,输入标题,第一步：创建音乐首界面、音乐播放界并进行相关配置,第二步：音乐首界面的制作及跳转的添加,第三步：音乐播放界面制作,第四步：音乐播放插件的添加以及播放功能的实现,点击输入说明文字,点击输入说明文字,任务实施,06,任务总结,任务技能,任务实施,任务总结,任务描述,本项目通过Dancer时代音频模块的实现，对视频、音频播放功能的实现流程有所了解，掌握Ionic弹出框时间及插件的安装及使用，并能够根据所学的Ionic弹出框及事件的使用，插件的安装实现Ionic更多的功能。,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下载：,PPT,论坛：,Dancer时代上传模块的实现,项 目 四,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,了解选择设备本地文件的实现流程,学习Ionic下拉刷新的相关知识,掌握Ionic选择器的实际应用,学习,目标,通过Dancer时代上传模块的实现，了解选择设备本地文件的实现流程，学习选择文件功能所需插件的相关知识，掌握文件选择插件的使用及Ionic的相关选择器，具有独立实现文件选择、图片预览功能的能力。,04,具有独立实现文件选择、图片预览功能的能力,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,Ellison为了引起用户对舞蹈的兴趣，在Dancer时代中设计了上传模块，该模块主要包括两个功能，分别是图片预览和文件上传。用户通过观看舞蹈的相关的图片感受舞蹈的魅力，了解舞蹈背后的文化。Ellison设计的文件上传功能，使用户可以上传自己认为有意义的图片给他人欣赏，用于用户之间的交流。本模块主要通过实现Dancer时代的图片预览和文件上传功能了解Ionic的访问设备插件和图片预览。,功能描述,情境入,01,使用ion-scroll标签实现图片的水平滚动,01,02,03,04,使用photo-viewer插件实现照片的预览,使用file-chooser插件实现文件的选择,使用file-transfer插件实现文件的上传,基本框架,04,任务技能,01,02,03,04,任务,技能,Ionic选择器插件,访问设备文件插件,图片预览,下拉刷新实现,I,onic极光推送,05,日期选择器,1,日历选择器,2,地区选择器,3,Ionic,提供的,DateTime,组件可以直接设置日期。点击,从下往上滑出选择器界面，在滑出的选择器界面可以单独选择年、月、日等信息。,(1),安装,Calendar,插件,(2),将插件引入项目并进行配置,(3),需要添加点击事件，用来调取日历选择器,(4),在对应界面的,ts,文件中添加,openCalendar(),方法,Ionic选择器插件,(1),安装,单级,/,多级选择,插件,(2),将插件引入项目并进行配置,(3),定义一个,JSON,选择器（,simpleColumns,）,(4),在对应界面的,ts,文件中添加,openCalendar(),方法,1,(1),安装插件,(2),将插件引入项目并进行配置,(3),添加点击事件，用于调取选择设备文件界面,(4),在对应界面的,ts,文件中添加方法,访问设备文件插件,访问设备文件,1,图片预览是用户点击图片列表中的任意一张图片，点击后图片满屏显示。图片预览功能不仅在手机相册中可以见到，微信查看头像、聊天图片等中也应用广泛。在使用之前需要进行安装。,图片预览,图片预览,建设制造强国,1,2,懒加载是一种独特而又强大的数据获取方法，它能够在用户滚动页面的时候自动获取更多的数据，而新得到的数据不会影响原有数据的显示，同时最大程度上减少服务器端的资源耗用。使用懒加载能够减少程序启动时间和打包后的体积，而且可以方便的使用路由功能。,下拉刷新是覆盖在页面上，适用于新闻类界面，当用户需要获取最新的内容数据时，等待刷新完毕后最新的数据即出现在下拉内容区域的顶部。,下拉刷新实现,懒加载,下拉刷新,1,(1),到极光官网注册账号，新建应用获得,appkey,(2),引入极光插件,(3),设置启动推送,(4),到极光官网,发送通知,I,onic极光推送,Ionic极光推送,05,任务实施,输入标题,第一步：上传界面制作，使用,ion-scroll,表签设置水平滚动条,第二步：下载添加图片预览插件，点击图片时实现图片的放大,第三步：弹出框功能的添加，点击上传按钮后，弹出弹出框,第四步：下载并添加文件选择、上传插件，并实现点击选择文件进行文件选取的功能,点击输入说明文字,任务实施,06,任务总结,任务技能,任务实施,任务总结,任务描述,本项目通过Dancer时代上传模块的实现，对选择设备本地文件的实现流程具有一定的了解，对文件选择插件的使用及Ionic的相关选择器有所认识，能独立实现文件选择、图片预览等功能。,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下载：,PPT,论坛：,Dancer时代分享模块的实现,项 目 五,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,了解分享功能的实现流程,掌握指纹、分享等插件,掌握地图定位的申请步骤及使用,学习,目标,通过Dancer时代分享模块的实现，了解分享功能的实现流程，学习Ionic中指纹验证、社交分享及地图定位等插件，掌握分享插件的使用及地图定位的申请步骤，具有独立使用插件实现分享功能的能力。,04,具有独立使用插件实现分享功能的能力,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,Dancer时代的分享模块将用户之间的交流与互动设计的更加全面。用户可以将自己的感触，看到的图片上传到软件中，好友之间可以互相查看动态、点赞、评论。也可以将动态内容分享到其他软件中，实现了信息共享，解决了用户使用软件的局限性，增强了用户的体验。本模块主要通过实现Dancer时代的分享功能了解Ionic的社交分享SocialSharing插件和地图定位。,功能描述,使用JavaScript操作节点实现评论的添加,01,02,03,使用social-sharing插件实现分享功能,使用camera实现拍照或从相册选择图片功能,基本框架,04,任务技能,01,02,03,04,任务,技能,指纹验证,加载指示器,社交分享插件,地图定位,1,手机设备具有多种安全模式，如密码、PIN、指纹验证等。目前，指纹验证被越来越多的用户所使用的，用户通过指纹即可进行身份验证，它具有方便、快速、无需用户记忆即可完成身份验证的特点。在Ionic中通过指纹验证插件可以实现这一效果。如果想实现该效果，在项目目录中打开命令提示符，输入命令安装Fingerprint Auth插件。,指纹验证,指纹验证,1,加载指示器是指加载效果覆盖在界面内容上面，以半透明的形式遮挡住界面中的内容，加载结束后关闭指示器，以恢复用户对应用的使用。加载中指示器也可在指定时间后通过自动关闭，默认情况下它会显示为旋转的圆形。加载指示器在页面更改期间也会显示，可通过dismissOnPageChange属性设为true来禁用。ionSpinner提供了许多种旋转加载的动画图标，当界面加载时通过spinner设置呈现给用户。,加载指示器,加载指示器,1,在很多社交软件中可以通过网络以各种形式分享文件、图片、网页链接等，分享功能主要是依赖SocialSharing插件实现的，实现分享功能首先要下载并安装SocialSharing插件。,社交分享插,件,社交分享插件,1,(1),注册高德开发者,(2),去控制台创建应用,(3),获取,Key,地图定位,地图定位,05,任务实施,输入标题,第一步：,分享界面制作，使用列表进行页面布局，当点击列表时进行跳转。,第二步：创建并制作分享详情界面，下载分享插件并进行功能的添加。,第三步：创建发布界面并进行制作，当点击相机图标时弹出列表进行选择。,第四步：下载,camera,插件，当点击相册时调取相册，点击拍照时调取相机。,点击输入说明文字,任务实施,06,任务总结,任务技能,任务实施,任务总结,任务描述,本项目通过Dancer时代分享模块界面及功能的学习，对分享功能的实现流程具有一定的了解，对Ionic中指纹验证、社交分享及地图定位等插件有所认识，掌握了分享插件的使用及地图定位的申请步骤。,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下载：,PPT,论坛：,Dancer时代我的模块实现,项 目 六,目 录,01,学习目标,02学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,了解视频录制、二维码扫描等实现流程,学习二维码扫描插件的相关知识及应用,掌握Ionic插件的相关知识及应用,学习,目标,通过Dancer时代我的模块的实现，了解视频录制、二维码扫描、语音识别及数据存储功能的实现流程，学习视频录制插件的相关知识，掌握二维码扫描插件的实际应用，具有使用Ionic插件实现功能的能力。,04,具有使用Ionic插件实现功能的能力,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,至此，以舞蹈为背景的Dancer时代界面设计大体完成。但项目负责人Richard和他的开发团队并不满意界面内容固定。因此，在本模块中介绍了调用服务器后端的API接口。通过API接口与数据库相连，及时更改数据，做到界面内容实时更新，极大的程度吸引用户。本模块主要通过实现Dancer时代与后台数据交互学习MongoDB数据库安装与测试。,功能描述,情境入,01,使用AlertController组件实现弹出框功能,01,02,03,04,使用media-capture插件实现录制视频功能,使用barcode-scanner插件实现扫描二维码功能,使用高德地图API接口实现定位功能,基本框架04,任务技能,01,02,03,04,任务,技能,媒体捕获,扫描二维码,语音识别,拨打电话,存储数据,05,1,Ionic3提供了对音频、图片和视频采集功能的插件-媒体捕获插件（Media Capture），它与Camera API相比，不仅能获取图像，还可以录视频或者音频。实现媒体捕获首先要安装相关插件。,媒体捕获,媒体捕获,1,扫描二维码插件可用于调用系统设备的摄像头，并自动扫描条形码，获取条形码的数据并将数据返回。,扫描二维码,扫描二维码,1,语音识别的目标是将用户的语音词汇内容转化为可读的文字输入，通常在语音拨号、发送消息、接受语音消息等功能中使用。用户在不能手动输入文字或不能接收语音信息时，通过语音识别，将语音转换为文字进行接收与发送信息，大大方便了用户的使用。使用SpeechRecognition插件即可实现拨打电话效果，在使用之前需要进行安装。,语音识别,语音识别,1,使用电话沟通具有快速、方便、联系广泛等特点。通过拨打电话，即使距离再远，无需见面，也能快速联系。相比于信纸等通信方法，使用拨打电话沟通更清晰。使用CallNumber插件即可实现拨打电话效果，在使用之前需要进行安装。,拨打电话,拨打电话,建设制造强,1,2,开发中，只要用户登录过一次，再次打开应用程序，都会自动填充用户名和密码，其实现是使用localStorage存储。localStorage保存的数据一般是永久保存的，即使用户关闭当前web浏览器后重新启动，数据依然存在。,通过SQLite也可以来存储数据，通过SQL语句来实现相关存储。当在本机应用环境运行时，优先选择SQLite，其具有使用广泛，稳定等特点。在使用之前需要进行安装。,存储数据,localStorage存储,SQLite存储,05,任务实施,输入标题,输入标题,第一步：创建我的界面并将相关配置及美化,第二步：当点击设置时跳转至设置界面，当点击,+,图标时弹出列表,第三步：下载视频捕获插件和扫描二维码插件并添加，点击我的视频时调用摄像头录制视频，点击二维码时扫描二维码。点击我的位置进入地图定位界面。,第四步：引入高德地图,api,接口，实现地图定位功能,点击输入说明文字,点击输入说明文字,任务实施,06,任务总结,任务技能,任务实施,任务总结,任务描述,本项目通过Dancer时代我的模块的学习，对视频录制、二维码扫描、语音识别及数据存储功能的实现流程具有初步了解，对视频录制插件的相关知识有所认识，同时掌握了二维码扫描插件的实际应用。,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下载：,PPT,论坛：,Ionic服务器模拟环境搭建,项 目 七,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施06 任务,总结,01,学习目标,学习目标,01,02,03,了解,Ionic,程序和后台交互的流程,学习,Postman、Express、,MonogoDB,的安装及使用,掌握,MonogoDB,的使用,学习,目标,通过Ionic服务器模拟环境搭建的学习，了解Ionic程序和后台交互的流程，学习Ionic服务器中Postman、Express、MonogoDB的安装及使用，掌握MonogoDB的使用，具有搭建Ionic服务器环境的能力。,04,具有搭建,Ionic,服务器环境的能力,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,至此，以舞蹈为背景的Dancer时代界面设计大体完成。但项目负责人小李和他的开发团队并不满意界面内容固定。因此，在本模块中介绍了调用服务器后端的API接口。通过API接口与数据库相连，及时更改数据，做到界面内容实时更新，极大的程度吸引用户。本模块主要通过实现Dancer时代与后台数据交互了解MongoDB数据库安装与测试。,功能描述,使用AJAX实现接口的调用,01,02,03,使用AJAX实现接口的调用,使用Mongodb进行数据的存储,04,任务技能,01,02,03,04,任务,技能,Postman安装与使用示例,使用Express初始化创建API示例,MongoDB安装与测试,使用Mongoose完善数据持久化,使用案例,05,简介,1,安装,2,使用说明,3,一般来说，所有的HTTP Request都分成URL、method、headers和body4个部分。而Postman针对这几部分都有针对性的工具界面。,第一步：打开官网（）下载postman插件,第二步：点击打开下载好的Postman,第三步：在,Postman,里面输入需要测试的接口地址,Postman安装与使用示例,（1）发送一个GET请求,：,比如向百度发送一个搜索请求。进入到postman界面中，选择GET请求，把百度网址在输入框中输入。输入完成之后，然后进行点击send。（2）发送POST请求,：,POST表单提交，设置了请求方法、URL、参数，但没有设置请求头。,安装,1,工程结构,2,工作原理,3,第一步：安装express。第二步：使用命令新建项目，项目名称为bloo,。,第三步：进入项目并安装相关依赖,。,第四步：启动express,。,第五步：在浏览器中输入localhost:3000/，并查看输出结果。,app.js：启动文件,。,package.json：存储着工程的信息及模块依赖,。,node_modules：存放 package.json 中安装的模块,。,public：存放 image、CSS、JS 等文件,。,routes：存放路由文件,。,views：存放视图、模版文件,。,bin：存放可执行文件,使用Express初始化创建API示例,Express的工作原理是routes中存放路由文件，views中存放视图文件,而 index.ejs 文件中的 是 ejs 模板引擎的语句，可以将后台传递来的 title 数据在页面中显示。使用Express大大减少了代码函数，而且逻辑更为简洁，所以使用Express可以提高开发效率并降低工程维护成本。,简介,1,安装和服务的启动,2,数据库管理,3,MongoDB 数据库旨在为 Web应用提供可扩展的高性能数据存储解决方案，它在多种场景下可用于替代传统关系型数据库的键/值存储方式。具有高性能、易部署、易使用、易存储等特点。,第一步：下载msi 文件。第二步：下载后双击该文件,进行安装,。第三步：指定一个文件夹存放数据,。第四步：配置Mongo服务端。第五步：在命令提示符输入 mongo命令。第六步：在浏览器输入localhost:27017/,MongoDB安装与测试,（1）数据库操作,：创建数据库、添加数据库、删除数据库、查看数据库、查看数据库名。,（2）集合操作：创建集合、查看数据库里的集合、删除items集合。,（,3,）文档操作：文档具有增、删、改、查等操作。,1,Mongoose是一款易于使用的Web服务器，它可以嵌入其它应用程序中，为其提供Web接口，是一个将JavaScript对象与数据库产生联系的框架。使用Mongoose可以新建数据库、新建集合、对集合内的文档进行CRUD操作，其提供了Schema、Model和Document对象，使操作更加方便。,使用Mongoose完善数据持久化,数据持久化,1,第一步：,安装,Mongoose,第二步：,修改,app.js,第三步：,定义一个,Schema,使用案例,使用案例,05,任务实施,输入标题,第一步：,创建,node,项目，编写验证手机号是否存在的接口、注册接口,第二步：,创建注册界面并制作，添加,ajax,进行数据的交互,第三步：编写登录接口,第四步：在登录界面添加,ajax,进行登录接口的调用,点击输入说明文字,任务实施,06,任务总结,任务技能,任务实施,任务总结,任务描述,本项目通过Dancer时代前端和后台的数据交互的实现，对Ionic程序和后台交互的流程具有初步的了解，并详细了解Ionic服务器中Postman、Express、MonogoDB的安装及使用，具有了搭建Ionic服务器环境的能力,任务总结,谢谢观赏,PPT,模板下载：,PPT,素材下载：,PPT,图表下载：,PPT,教程：,Excel,教程：,PPT,课件下载：,PPT,论坛：,Dancer时代发布,项 目 八,目 录,01,学习目标,02,学习路径,03 任务描述,04 任务技能,05 任务,实施,06 任务,总结,01,学习目标,学习目标,01,02,03,了解Ionic项目在Android及IOS手机下的发布流程,掌握如何发布Ionic项目,具有能够根据需求分析和设计制作并发布项目的能力,学习,目标,通过发布Dancer时代项目，了解Ionic项目在Android及IOS手机下的发布流程，学习Ionic环境如何签名和优化APK，掌握如何发布Ionic项目，具有能够根据需求分析和设计制作并发布项目的能力,。,02,学习路径,学习路径,03,任务描述,01,情境导入,02,功能描述,03,基本框架,04,开发环境,任务描述,情境导入,当完成与后台数据交互后，需要对Dancer时代进行打包、测试、发布，才能正式被用户所使用。目前手机版本主要为Android和IOS，因此，项目负责人Richard决定将Dancer时代生成Android和IOS应用包并进行发布。本模块主要通过对Dancer时代打包进行了解和操作，做出一个属于自己的APP引用。,功能描述,使用,I,onic列表组件实现界面布局,01,02,03,使用,I,onic插件实现指纹识别、屏幕亮度调节等功能,使用ionicbuildandroid命令进行打包,基本框架,04,任务技能,01,任务,技能,生成发布Android平台的应用包,生成发布iOS平台的应用,02,建设制造强国,1,2,Ionic功能开发完成后，就需要将应用打包发布到应用市场有两种打包的版本，一种是debug调试版，一种是release发布版。打包debug调试版需在工程目录下执行ionic build android；,（,1,）生成签名的秘钥,：,生成签名的秘钥需要使用,JDK,附带的,keytool,工具,（,2,）进行签名,:,对,APK,文件签名需要使用,JDK,附带的,jarsigner,工具,生成发布Android平台的应用包,打包APK,签名APK,建设制造强国,3,4,第一步：在,SDK,安装目录下的,build-tools,里找到,zipalign.exe,第二步：把需要优化的,.apk,文件复制到,D:sdkbuild-tools25.0.0,目录下。,第三步：在该目录下使用“,shift,键,+,鼠标右击”，执行命令,：,zipalign-v 4 android-debug.apk xing.apk,(1),打开安卓市场官网（APK.hiAPK.com/），在右上角找到注册按钮，先注册账号成为开发者。,(2),账号注册完以后进入网站，点击上传按钮，上传APP。,(3),填写应用信息。用户通过这些信息，了解APP并决定是否下载。包括应用程序的名称、语言、宣传文字等。,生成发布Android平台的应用包,优化APK文件,发布Android应用,环境准备,1,注册APP ID,2,上架登记,3,APP ID是发布应用程序的唯一标识。给iOS应用程序申请一个APP ID，首先需要登录苹果开发成员中心，点击“Account”进入登录界面。,（,1,）,登录,iTunes Connect,网站,（2）,点击“我的,APP,”。,（3）,点击“加号”，创建新的,APP,生成发布iOS平台的应用,（,1,）,申请苹果开发者帐号,（2）下载安装Xcode,（3）如果调试则需要一台iPhone,建设制造强国,4,5,在项目目录下运行命令：ionic build release ios,1.,在xcode界面里，在菜单中选择“Product-Scheme-Edit Scheme”,。,2.在弹出框的左栏列表中选择“Archive”选项，确认右侧的“Build Configuration”输入栏选中的是“Release”,。,3.选择Archive进行打包,。,4.点击右侧蓝色的按钮,生成发布iOS平台的应用,生成发布版应用,创建应用发布文档,05,任务实施,第一步：制作设置界面，它是由列表组成。,第二步：添加版本信息插件并进行功能的添加，查看软件版本相关信息。,第三步：添加指纹识别插件并进行功能的添加，可以进行指纹的验证,第四步：进行打包并生成发布版本的,apk,用于发布需要,任务实施,06,任务总结,任务技能,任务实施,任务总结,任务描述,本项目通过发布Dancer时代项目，对Ionic项目在Android及IOS手机下的