Ionic2 & cordova APP & Jersey

1. Ionic & Cordova & Jersey简介

   -- Ionic & Cordova & Jersey 是什么

Ionic是什么？

        ionic 是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。这个框架的目的是从web的角度开发手机应用，可以实现编译成各个平台的应用程序。
特点：
        1.ionic 基于Angular语法，简单易学。
        2.ionic 是一个轻量级框架。
        3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， 代码易维护。
        4.ionic 提供了漂亮的设计，它提供了很多 UI 组件来帮助开发者开发强大的应用。
        5.ionic 专注原生，让你看不出混合应用和原生的区别
        6.ionic 提供了强大的命令行工具。

        7.ionic 性能优越，运行速度快。

Cordova APP是什么？

        Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

Jersey是什么？

        Jersey RESTful 框架是开源的RESTful框架, 实现了JAX-RS (JSR 311 & JSR 339) 规范。它扩展了JAX-RS 参考实现， 提供了更多的特性和工具， 可以进一步地简化 RESTful service 和 client 开发。尽管相对年轻，它已经是一个产品级的 RESTful service 和 client 框架。与Struts类似，它同样可以和hibernate,spring框架整合。
开发APP的话，主要是用到Jersey对Json的支持。开发中，json已经常用到无处不在了，jersey对json的支持很好。
接收json，需要使用@Consumes，注解指定解压方式：
@Consumes(MediaType.APPLICATION_JSON) 
返回json，需要使用@Produces注解，指定压缩方式：

@Produces(MediaType.APPLICATION_JSON)

2. 开发环境介绍

   -- 所需软件及其安装

开发环境说明

        本次开发移动端 APP主要用到的技術有 Ionic2 & 点击打开链接 Angular Js2 (前端) / Jersey(Java 後台的框架)，中間的傳遞是用JSON格式；

Ionic的開發工具是 VS Studio， Java的開發工具是 Eclipse
Java 用 jdk1.8.0，還外掛apache-maven-3.3.9
使用Maven需要配置环境变量等，具体Maven项目配置操作见:
百度
安装Ionic首先要安装node.js，会用到其工具NPM，如果不能用node.js，还可能要安装cntlm，这两个软件一定要安装在默认路径下，否则可能会有错，一般是C:\Program Files\nodejs和C:\Program Files (x86)\Cntlm，具体安装操作见:
百度

安装Ionic & Cordova

        在npm(开始->node.js->node.js command prompt)下输入:npm install -g cordova ionic，但是由于网络限制可能会报错，解决办法是先下载淘宝镜像(npm install -g cnpm --registry=https://registry.npm.taobao.org),再将npm换成cnpm进行下载，或者把一个下载过Ionic和cordova的npm文件夹复制到C:\Users\username\AppData\Roaming文件夹下，然后启动一个APP
生成空白APP，输入:ionic start myApp blank
生成有组件的APP，输入:ionic start myApp tabs
生成有菜单的APP，输入:ionic start myApp sidemenu

学习手册参考官网http://ionicframework.com

                空白APP                                                组件APP                                            菜单APP

其他需要的软件及插件

        1.Android SDK 2. Gradle                    3. VS code 4.Apache Ant
Gradle和Apache Ant需要配置环境变量，参照JDK配置方式。

打开Android SDK Manager,依照如下status中Installed与Update available去下载。

检验安装环境

        去npm下输入以下命令，如出现如下图的版本号，则安装完成。

3. 开发APP

   --代码解读

启动项目

用VS code打开项目

打开vs code -> File -> Open Folder ,选择创建好的项目

 

node_modules:nodeJS的各类依赖包
resources: 发布成app需要用到的图标资源目录
src: Ionic的主文件区域,我们的工作主要就在这个文件夹下进行
www: src源码编译后会自动生成到此目录下
src/index.html:程序入口
src/app/:系统及启动相关类
src/app/main.ts: ts文件启动入口
src/app/app.module.ts:页面组件注册文件
src/app/app.component.ts:系统首页控制器
src/app/app.html:系统首页模板
src/pages:开发功能页面及代码

hooks:cordova 的readMe

src/index.html:程序入口
src/app/:系统及启动相关类
src/app/main.ts: ts文件启动入口
src/app/app.module.ts:页面组件注册文件
src/app/app.component.ts:系统首页控制器
src/app/app.html:系统首页模板

src/pages:开发功能页面及代码

代码解读-app.module.ts

NgModule:管理模块内部的Components、Directives、Pipes，引入Service
Declarations:声明，声明本模块包含的内容,要展示的模块都要在此处声明
Imports:导入其他模块，就是要使用其他模块的功能，必须要导入
Bootstrap:启动模块。只在根模块使用。除了根模块以外的其他模块不能使用
Providers:服务提供者，主要用来定义服务

Exports:外部可见的内容。相当于Java中声明为public的那些类

代码解读-tabs.ts

5.如何使用chrome debug

6. 如何将项目发布到Android

1.为项目添加android平台
    进入项目根目录并执行: ionic cordova platform add android

(执行这个命令后有可能会报错,这时再次执行一次add android的命令,若出现Platform android already exists,则表示添加成功)

2.产生.APK文档
    进入项目根目录并执行: ionic cordova build android
(执行这个命令后有可能会报错,这时请使用cordova build android 命令,出现BUILD SUCCESSFUL,则表示成功),此时在platforms/android/build/outputs/apk目录下，会产生一个apk文件,将其放到andorid手机上安装即可

7. 示例

   --开发实例及其UI效果

UI效果图