在Android 裡會是顯示成：

I/chromium: [INFO:CONSOLE(198)] “200”, source: file:///android_asset/www/build/main.js (198)

在 iOS 的 xcode 裡也會丟出來。

得到 Error:

ld: 165 duplicate symbols for architecture x86_64

clang: error: linker command failed with exit code 1 (use -v to see invocation)

** BUILD FAILED **

The following build commands failed:

Ld build/emulator/myIonicAirWatch2.app/myIonicAirWatch2 normal x86_64

(1 failure)

(node:10536) UnhandledPromiseRejectionWarning: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/max/Documents/cordova/myIonicAirWatch2/platforms/ios/cordova/build-debug.xcconfig,-workspace,myIonicAirWatch2.xcworkspace,-scheme,myIonicAirWatch2,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/max/Documents/cordova/myIonicAirWatch2/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/max/Documents/cordova/myIonicAirWatch2/platforms/ios/build/sharedpch

(node:10536) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)

(node:10536) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

ionic 官方文章：Deploying to a Device
https://ionicframework.com/docs/intro/deploying/

解法，先刪掉 ios 目錄：

1. rm -rf node_modules/ platforms/ios/
2. npm i
3. ionic cordova build ios

如果，我是  npm i 取顯示錯誤：

$ rm -rf node_modules/ platforms/ios/

max$ npm i

npm ERR! code E404

npm ERR! 404 Not Found: com.airwatch.awsdkplugin@~1.2.0

npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/max/.npm/_logs/2018-01-09T10_37_53_852Z-debug.log

應該是 airwatch-sdk-plugin 有檔案不見了，使用下面指令重新安裝：

$ npm i airwatch-sdk-plugin

npm WARN saveError ENOENT: no such file or directory, open ‘/Users/max/Documents/cordova/package.json’

npm WARN enoent ENOENT: no such file or directory, open ‘/Users/max/Documents/cordova/package.json’

npm WARN cordova No description

npm WARN cordova No repository field.

npm WARN cordova No README data

npm WARN cordova No license field.

+ airwatch-sdk-plugin@1.2.0

added 1 package in 4.1s

這個指令很奇怪，好像會 cache, 發現在其他空的資料夾裡，也可以下，會下載一些檔案。如果有程式 lock 住的話，可能需要重開機再試一次，避免檔案被 lock 住，也有可能是 「權限」造成的，一般使用者和 root 使用者可以看到的scope 不同，所以使用 npm i 和 sudo npm i 結果會不同！

build 不成功，中間都有log 檔案，要看 log 檔裡寫什麼。

試了很久，還是試不出來，可能是中間有什麼設定檔被改壞掉，重新開一個專案：

ionic start myApp tabs

修改掉 config.xml 裡的 package id 。再加入我們有使用到plugin 例如：

ionic cordova plugin add airwatch-sdk-plugin

再重新 build iOS 一次：

ionic cordova build ios --prod

居然 build 成功了。

再把之前寫好的 /src/ 裡的檔案 copy 到新的專案裡，就搞定了。

You can do it like that:

page.html

<ion-input id="amount" type="number" [(ngModel)]="value"></ion-input>
<button (click)="setInput()">Set Value</button>

page.ts

export class Page {
  value: number = 0; // Default is 0

  constructor() {}

  setInput() {
    this.value = 42;
  }
}

By using [(ngModel)]="value" you bind the value variable to that input field. That way it is always updated. If you change it in the UI, it is immediately updated “in the code”. And when you update it in your code, it automatically updates in the UI.

You should probably read an Angular 2 tutorial before you continue working on your app. Angular provides many tools to make that sort of thing a lot easier.

範例 2：

變數要先定義好在 .ts  檔案裡，不然會跑出 Error: Property does not exist on type

變數定義的範例：public accordition: any;

 code:

<ion-label>{{charactersRemaining}}</ion-label>
<form [formGroup]="viewForm" (ngSubmit)="submitView()">
    <ion-textarea type="text" placeholder="Enter your view here." [(ngModel)]="view.text" formControlName="viewTextArea" rows="6" (ngModelChange)="viewTextChange()"></ion-textarea>
    <button ion-button type="submit" block>Send</button>
</form>

  public viewTextChange() {
    var left = this.viewMaxLength-this.view.text.length;

    if (left < 0) {
      this.view.text = '' + this.oldViewText;
      left = this.viewMaxLength-this.view.text.length;
    }

    this.charactersRemaining = (this.viewMaxLength-this.view.text.length) + ' characters remaining.';
    this.oldViewText = this.view.text;

    /* this.view.text = 'frank'; */
  }

XMLHttpRequest cannot load http://api.ionic.com/endpoint.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8100' is therefore not allowed access.

Chrome 瀏覽器有插件（套件）可以直接解決這個問題：

使用Allow-Control-Allow-Origin: *插件：

设置-更多工具-扩展程序 找到Allow-Control-Allow-Origin: *插件

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US

那么，什么是CORS？ 为什么在这里会发生这个错误呢？

什么是CORS？

CORS = Cross origin resource sharing 跨域资源共享
origin是你当前所在页面的主机地址。
如果你在浏览http://ionicframework.com/blog/handling-cors-issues-in-ionic页面，它的origin就是ionicframework.com。在此页面上，如果你要向http://cors.api.com/api发送一个AJAX请求,您的主机源将由Origin标头指定，该标头会自动包含在浏览器的CORS请求中。因为ionicframework.com和主机api.com并不匹配，我们从ionicframework.com的请求必须要经过服务器的批准，才能够访问该资源，以Http Options请求头的形式。

如果我们遇到了上面的错误，说明服务器没有给我们的地址ionicframework.com赋予访问该资源的权限。

下面来看一下，当通过ionic serve,ionic run,ionic run -l三种不同方式运行app时，你的origin分别是什么？

在浏览器中运行时

在执行ionic serve时，发生了什么？

• 启动了一个本地web服务器
• 你的浏览器自动打开了指向本地服务器地址的一个页面

这时你可以看到你的app加载到了你的浏览器上，地址是http://localhost:8100(如果你选择了localhost)。

这时，你的origin是localhost:8100。

任何发送到主机而不是localhost:8100的AJAX请求，都将以localhost:8100作为其origin，因此需要经过CORS预检请求，来查看是否有权限访问该资源。

在设备上运行时

当执行ionic run时，又发生了些什么呢？

• 应用程序文件被复制到设备（或模拟器）。
• app开始运行，然后启动一个设备（或模拟器）上的浏览器来打开这些文件，类似file://some/path/www/index.html

这样，你的origin将不存在了，因为你正在运行于一个文件（file://）URI。理所当然，你的任何向外请求将不需要通过CORS预检。

在设备上通过自动加载（livereload）运行时

执行ionic run -l时，又将发生什么呢？

• 首先启动一个本地web服务器
• 设备（或模拟器）上app开始运行，启动一个浏览器来开地址http://192.168.1.1:8100（你的本地IP地址）上的文件。

这时，你的origin是192.168.1.1:8100。

任何发送到主机而不是192.168.1.1:8100的AJAX请求，都将以192.168.1.1:8100作为其origin，因此需要经过CORS预检请求，来查看是否有权限访问该资源。

在Ionic中处理CORS问题

CORS问题仅仅发生在，当我们以ionic serve或ionic run -l来运行或测试app的时候。

有2种方法来解决这个问题.

第一种，比较容易的方法，是设置远端服务器，让它可以接受所有源的请求。第二种，有时候我们没有权限去修改远端服务器，此时就需要一个不指定源的请求。

我们可以使用代理服务器来实现这个方案。ionic cli给我们提供了一个很方便的配置代理服务器的方法，下面我们看一下如何来实现。

Ionic CLI代理服务器

下面是关于代理（proxy）的一个定义：

In computer networks, a proxy server is a server (a computer system or an application) that acts as an intermediary for requests from clients seeking resources from other servers.

在计算机网络中，代理服务器是一个客户端请求的中介服务器（计算机系统或应用），它用于帮助客户端寻找位于其他服务器上的资源。

要解决我们在ionic中遇到的CORS问题，我们需要设置一个代理服务器，它接受我们的请求，并向API端点发出新的请求，然后接受响应，并将其转发回我们的应用程序。

由于代理服务器需要向目标发送新的请求，因此请求中将不会有origin(源)，也就不再需要CORS了。 需要非常注意一点是，origin是浏览器自动帮我们添加在请求头中的。

Ionic CLI具有为客户端请求设置代理服务器的能力，用来帮助您解决CORS问题，下面来看一下Ionic CLI设置代理的方法。

设置代理服务器

再次说明一下，仅仅在ionic serve或ionic run -l的时候需要设置代理。

首先，我们需要在ionic.project（注意，ionic2 cli新版本已经将此文件重命名为ionic.config.json）配置文件中设置代理。 这将告诉Ionic本地服务器监听这些路径并将这些请求转发到目标网址。

在app中，我们需要替换包含endpoint的URLS，并设置为我们的代理服务器地址。（In our app, we will need to replace our endpoint URLS to be set to the proxy server address for when we are running serve or run -l.）

什么是endpoint？

在项目中 endpoint有时也写作baseUrl，比如这个http://cors.api.com/api/book/2/detail的endpoint是http://cors.api.com/api，再比如http://localhost:8101/api/user/123的endpoint是http://localhost:8101/api。

笔者没有想到好的中文来替代这个英文单词，所以没有进行翻译，希望小伙伴们能够理解它的意思就好啦~

我们可以通过设置一些gulp任务，用gulp中的替换模块(replace)来替换出这些URLS，来简化这一步骤。

比较推荐的方法是设置一个Angular Constant来同一设置的endpoint，方便统一进行修改和维护。

下面是操作步骤。我们需要设置一个Angular Service ApiEndpoint来获取数据。

配置代理地址

配置代理有两个需要注意的地方。

• path：你在本地Ionic服务器上访问它们的路径
• proxyUrl：你最终希望通过API调用达到的proxyUrl

修改ionic.config.json(旧版本Ionic CLI是ionic.project)：

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/api", 
      "proxyUrl": "http://cors.api.com/api"
    }
  ]
}

如上所述，当您请求访问http://localhost:8100/api的ionic服务器时，它会替你代理请求到http://cors.api.com/api上。这样，就不需要CORS了。

设置Angular Constant

很容易将你的ApiEndpoint设置为Angular Constant。下面，我们已经将ApiEndpoint指定为我们的代理url。然后，我们就可以使用这个url作为一个常数。

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.constant('ApiEndpoint', {
  url: 'http://localhost:8100/api'
})

//For the real endpoint, we'd use this
// constant('ApiEndpoint', {
//  url: 'http://cors.api.com/api'
// })

设置Angular Service

angular.module('starter.services', [])

//NOTE: We are including the constant `ApiEndpoint` to be used here.
.factory('Api', function($http, ApiEndpoint) {
  console.log('ApiEndpoint', ApiEndpoint)

  var getApiData = function() {
    return $http.get(ApiEndpoint.url + '/tasks')
      .then(function(data) {
        console.log('Got some data: ', data);
        return data;
      });
  };

  return {
    getApiData: getApiData
  };
})

使用Gulp实现URL自动切换

首先，需要安装replace module

npm install --save replace

然后，我们需要修改gulpfile.js，并添加2个任务，来添加代理地址、移出代理地址。

// `npm install --save replace`
var replace = require('replace');
//注意下面的文件地址，它是包含你endpoint或baseurl的文件
var replaceFiles = ['./www/js/app.js'];

gulp.task('add-proxy', function() {
  return replace({
    regex: "http://cors.api.com/api",
    replacement: "http://localhost:8100/api",
    paths: replaceFiles,
    recursive: false,
    silent: false,
  });
})

gulp.task('remove-proxy', function() {
  return replace({
    regex: "http://localhost:8100/api",
    replacement: "http://cors.api.com/api",
    paths: replaceFiles,
    recursive: false,
    silent: false,
  });
})

结束语

这个教程展示给你了在运行ionic serve或ionic run -l的时候，一个处理CORS问题的方法。

我们知道，如果按这个方法处理，当我们需要在ionic serve和ionic run -l切换的时候，将ApiEndpoint替换出来可能会比较麻烦。因此我们推荐使用gulp在程序启动时自动完成这个过程。

其实，最简单的处理CORS问题的方法，是要求你的api提供服务器来允许所有的origin。但是，有时候我们无法这么做。

使用Angular Constant和replace module会给我们一个愉快的解决方法来处理CORS问题。

如果你需要一个具体的例子，可以看一下这个示例工程。

上面说的就是所有的当你访问一个API服务器时，关于处理CORS问题的全部。

URL：https://ionicframework.com/docs/api/platform/Platform/

Platform

Improve this doc

The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the platformsmethod, including whether the app is being viewed from a tablet, if it’s on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device.

Usage

import { Platform } from 'ionic-angular';

@Component({...})
export MyPage {
  constructor(public plt: Platform) {

  }
}

遇到Error: Uncaught (in promise): Error: StaticInjectorError[HTTP]: 的 error，發生的原因是沒有加入到 providers 清單裡，加入的範例，檔案在 /src/app/app.module.ts :

Add Plugins to Your App’s Module

After installing a plugin’s package, add it to your app’s NgModule.

...

import { Camera } from '@ionic-native/camera';

...

@NgModule({
  ...

  providers: [
    ...
    Camera
    ...
  ]
  ...
})
export class AppModule { }

如果是透過 ‘@angular/http’ 範例如下：

‘@angular/http’ 的在 “/src/app/app.module.ts” 設定：

import { Http } from ‘@angular/http’;
import { HttpModule } from ‘@angular/http’;

..

..

imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],

GET Example

this.posts = null;

this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=2&sort=hot').map(res => res.json()).subscribe(data => {
    this.posts = data.data.children;
});

console.log(this.posts);

https://www.joshmorony.com/using-http-to-fetch-remote-data-from-a-server-in-ionic-2/

POST Example

let headers = new Headers();
headers.append('Content-Type', 'application/json');

let body = { 
  message:"do you hear me?"
};

this.http.post('http://spstest.000webhostap..., JSON.stringify(body), {headers: headers})
 .map(res => res.json())
 .subscribe(data => {
   console.log(data);
  });
}

如果是要取 html 而不是 json，範例：

var response = this.http.get(link);
response.subscribe(
res => {
console.log(res.text());
let alert = this.alerCtrl.create({
title: ‘Responsed!’,
message: res.text(),
buttons: [‘Ok’]
});
alert.present()
},
err => {
console.log(err);
},
() => console.log(‘call http API Complete’)
);

[Cordova] 在 Mac 上安裝 Cordova 與建立第一個 HelloWorld 專案
https://stackoverflow.max-everyday.com/2017/12/cordova-mac-helloworld/

Ionic的App都是基於Cordova的，所以Cordova工具可以用來構建，部署和測試App。

安裝最新版本的Cordova和Ionic，指令如下：

sudo npm install -g cordova ionic

當安裝完成時，試著用一個標籤模版如下圖所示創建一個新的ionic project：

ionic start myIonicApp tabs

在建立 ionic project 時，會先問：

 Would you like to integrate your new app with Cordova to target native iOS and Android?

我是選 Yes，因為不知道要選什麼，所以隨便選一個。

建議先註冊一個 ionic 的帳號：

https://dashboard.ionicjs.com/signup

第2個問題會問我們：

Install the free Ionic Pro SDK and connect your app?

選 Yes 的話，需要輸入 ionic email/password.

預設會幫我們把source code 上傳到ionic 的 git 耶：

git remote add ionic git@git.ionicjs.com:max32002/myIonicApp.git

切換到 ionic project 目錄，添加ionic平台，如下所示建立app：

cd myIonicApp

Run your App 指令：

ionic serve

ionic 比 cordova 多做很多東西，cordova 要 preview 比較麻煩，用 ionic 方便很多。

ionic 增加 plugin 方法：

Synopsis

$ ionic cordova plugin [<action>] [<plugin>]

例如：加入 airwatch plugin

ionic cordova plugin add airwatch-sdk-plugin

ionic 加入 button / alert 範例：

https://ionicframework.com/docs/components/#alert

html UI 的 demo source code:

https://github.com/ionic-team/ionic-preview-app/blob/master/src/pages/alerts/basic/template.html

<ion-header>
  <ion-navbar>
    <ion-title>Alerts</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button block color="dark" (click)="doAlert()">Show Basic Alert</button>
</ion-content>

script 的 demo source code:

https://github.com/ionic-team/ionic-preview-app/blob/master/src/pages/alerts/basic/pages.ts

import { Component } from '@angular/core';

import { AlertController } from 'ionic-angular';


@Component({
  templateUrl: 'template.html'
})
export class BasicPage {

  constructor(public alerCtrl: AlertController) { }

  doAlert() {
    let alert = this.alerCtrl.create({
      title: 'New Friend!',
      message: 'Your friend, Obi wan Kenobi, just approved your friend request!',
      buttons: ['Ok']
    });
    alert.present()
  }

}

ionic build 成 Andoid/iOS:

https://ionicframework.com/docs/intro/deploying/

Android, 透過下面指令就可以 adb build 進手機裡，超神奇！

ionic cordova run android --device

Sign Android APK

If you want to release your app in the Google Play Store, you have to sign your APK file. To do this, you have to create a new certificate/keystore.

Let’s generate your private key using the keytool command that comes with the JDK:

keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias

You’ll first be prompted to create a password for the keystore. Then, answer the rest of the nice tools’s questions and when it’s all done, you should have a file called my-release-key.jks created in the current directory.

Note: Make sure to save this file somewhere safe, if you lose it you won’t be able to submit updates to your app!

To sign the unsigned APK, run the jarsigner tool which is also included in the JDK:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks android-release-unsigned.apk my-alias

This signs the APK in place. Finally, we need to run the zip align tool to optimize the APK. The zipalign tool can be found in /path/to/Android/sdk/build-tools/VERSION/zipalign. For example, on OS X with Android Studio installed, zipalign is in ~/Library/Android/sdk/build-tools/VERSION/zipalign:

zipalign -v 4 android-release-unsigned.apk HelloWorld.apk

To verify that your apk is signed run apksigner. The apksigner can be also found in the same path as the zipalign tool:

apksigner verify HelloWorld.apk

Now we have our final release binary called HelloWorld.apk and we can release this on the Google Play Store for all the world to enjoy!

All steps can also be found here: Android SDK docs

但我透過上面的指令，實際上會失敗。錯誤訊息如下：

(node:4866) UnhandledPromiseRejectionWarning: CordovaError: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle 
in your path, or install Android Studio
 at Object.module.exports.check_gradle (/Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/cordova/lib/check_reqs.js:150:18)
 at StudioBuilder.prepEnv (/Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/cordova/lib/builders/StudioBuilder.js:216:23)
 at Api.module.exports.run (/Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/cordova/lib/build.js:154:20)
 at /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/cordova/Api.js:342:43
 at _fulfilled (/Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/cordova/node_modules/q/q.js:854:54)
 at self.promiseDispatch.done (/Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/cordova/node_modules/q/q.js:883:30)
 at Promise.promise.promiseDispatch (/Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/cordova/node_modules/q/q.js:816:13)
 at /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/cordova/node_modules/q/q.js:624:44
 at runSingle (/Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/cordova/node_modules/q/q.js:137:13)
 at flush (/Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/cordova/node_modules/q/q.js:125:13)
(node:4866) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:4866) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

很多英文字，都看不懂，只好跳過，用 Android Studio 來 import.

在匯入的時候會顯示 Gradle 版本不同，除非你對 Gradle有略懂，還是建議你和我一樣，先跳過 Gradle 版本升級的問題。

Build iOS Devices

Running Your App

1. Run a production build of your app with ionic cordova build ios --prod
2. Open the .xcodeproj file in platforms/ios/ in Xcode
3. Connect your phone via USB and select it as the run target
4. Click the play button in Xcode to try to run your app

附註：直接修改 /src/pages/ 目錄裡的檔案，可以透過 ionic serve 直接看到修改後的結果，但實際上 android 並不是直接去讀取 /src/pages/ 目錄下的檔案，而是讀取

platforms/android/app/src/main/assets/www/build/main.js

所以，需要手動執行一下 ionic cordova run android 來轉換 source code 為 javascript.

ionic change package id：

預設 package id =io.ionic.starter , 設定值在 /config.xml 檔裡：

<widget id="io.ionic.starter"

修改完設定值，重跑一次

ionic cordova run android

所有的設定值就變成預想的結果了。

附註：似乎還是會有錯誤，訊息如下：

$ adb install-multiple -r -t /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/intermediates/split-apk/debug/dep/dependencies.apk /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/intermediates/split-apk/debug/slices/slice_0.apk /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/intermediates/split-apk/debug/slices/slice_2.apk /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/intermediates/split-apk/debug/slices/slice_1.apk /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/intermediates/split-apk/debug/slices/slice_3.apk /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/intermediates/split-apk/debug/slices/slice_4.apk /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/intermediates/split-apk/debug/slices/slice_5.apk /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/intermediates/split-apk/debug/slices/slice_6.apk /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/intermediates/split-apk/debug/slices/slice_7.apk /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/intermediates/split-apk/debug/slices/slice_8.apk /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/intermediates/split-apk/debug/slices/slice_9.apk /Users/max/Documents/cordova/myIonicAirWatch2/platforms/android/app/build/outputs/apk/debug/app-debug.apk
Split APKs installed
$ adb shell am start -n “io.ionic.starter/com.airwatch.gateway.ui.GatewaySplashActivity” -a android.intent.action.MAIN -c android.intent.category.LAUNCHER
Error while executing: am start -n “io.ionic.starter/com.airwatch.gateway.ui.GatewaySplashActivity” -a android.intent.action.MAIN -c android.intent.category.LAUNCHER
Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=io.ionic.starter/com.airwatch.gateway.ui.GatewaySplashActivity }
Error type 3
Error: Activity class {io.ionic.starter/com.airwatch.gateway.ui.GatewaySplashActivity} does not exist.

Error while Launching activity

修改 Android 的 Preference 參數，在 Build 選項裡，停用掉 Instant run 還是一樣的結果 Q_Q;。

手動修改檔案：

platforms/android/android.json
plugins/android.json

然後一定要「關掉 Android Studio」再開啟，就可以了！

build iOS ：

ionic cordova build ios --prod

附註：修改 app package id, 可能會有「同步」上的錯誤，部份舊的設定值 ionic 不會去修改他，會套用不到 xcode 裡，會造成怎麼 build 出來的 app 都是錯誤的。這個問題的解法有 2：

1：platform remove 再 platform add 一次，而且要先「刪掉舊的 node_modules」資料夾，不然設定值改不掉。

2：找到有問題的地方，手動去修改。這個難度高，需要清楚地知道要去修改 plist 的那一個地方！

要使用 http request 在 ionic 裡：
https://ionicframework.com/docs/native/http/

Installation

1. Install the Cordova and Ionic Native plugins:

   $ ionic cordova plugin add cordova-plugin-advanced-http
   $ npm install --save @ionic-native/http
   

2. Add this plugin to your app’s module

Usage

import { HTTP } from '@ionic-native/http';

constructor(private http: HTTP) { }

...

this.http.get('http://ionic.io', {}, {})
  .then(data => {

    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });

資料來源：

https://ionicframework.com/getting-started/

1. 建立一個 Hello World 專案：

cordova create hello_airwatch com.example.hello_airwatch HelloAirwatch

2. 進入 hello_airwatch 目錄下

cd hello_airwatch

3. 加入了 ios 和 android平台：

cordova platform add ios
cordova platform add android

4. 加入了 airwatch SDK：

cordova plugin add airwatch-sdk-plugin

加入 Airwatch SDK 後，服用下列的範例就可以存取到目前的使用者。

<!DOCTYPE html>
<html>
<head>
    <title>Device Properties Example</title>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        var element = document.getElementById('deviceProperties');
        element.innerHTML = 'Device Model: 123';

        window.plugins.airwatch.setSDKEventListener(sdkEventCallback);
    }

    function sdkEventCallback(event, info)
    {
        var element = document.getElementById('deviceProperties');
        element.innerHTML = 'event: ' + event;
        if (event === "initSuccess") {
            window.plugins.airwatch.username(usernameEventCallback);
        }
    }

    function usernameEventCallback(successCallback, errorCallback)
    {
        var element = document.getElementById('usernameProperties');
        element.innerHTML = 'username: ' + successCallback;
    }

    </script>
</head>
<body>
<p id="deviceProperties">Loading device properties...</p>
<p id="usernameProperties">Loading username properties...</p>
</body>
</html>

附註：我是使用 Android Studio 去匯入 Cordova 目錄下的 android 目錄，就可以 build 成 apk 了，當然，也可以透過 adb 或其他的 command line 來 build apk ，理論上不需要安裝 Android Studio, 只需要安裝 Android SDK.
附註：如果遇到 build 的 error message, 可能是 airwatch-dsk-plugin 會使用到 aar 格式的檔案, 如果build 的 error message 是：
Error:Failed to resolve: :AirWatchSDK-release
是因為 aar 檔案的檔案沒有被 comiple 成功。解法是把 aar 放到 /app/libs/ 目錄下，就可以正常抓到。

可以 build 成功之後，就可以透過上述的範例存取到 airwatch SDK 所提供的資料。

Airwatch SDK資料來源：

https://www.npmjs.com/package/airwatch-sdk-plugin

附註：

Airwatch plugin 的 build.gradle 裡的設定值：

minSdkVersion 14

這行可能會造成無法 build 成功，請修改為：

minSdkVersion 16

也許需要調整：

• plugins/com.airwatch.awsdkplugin/src/android/build.gradle

• node_modules/airwatch-sdk-plugin/src/android/build.gradle

• platforms/android/com.airwatch.awsdkplugin/starter-build.gradle

執行結果如下：

進入 Android Studio 之後，點選 “Import project” 就可以把 Cordova 的 /platforms/android/ 目錄匯入，就可以直接 build 成 apk 了，滿簡單的。

2. 在 Mac 上可以加到 ~/.bash_profile 裡面，例如：

export PATH=~/Library/Android/sdk/platform-tools:~/Library/Android/sdk/tools:/usr/local/bin:${PATH}

上面指令加好之後，需要先把 Terminal 關掉再開啟，才能套用到 path 參數。

套用到 path 參數後，可以下指令 adb 看看能不能「直接」執行到 path 上的指令。

3. 安裝 Node.js

先安裝 homebrew，指令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

詳全文：https://brew.sh/index_zh-tw.html

安裝 Node:

brew install node

安裝 ant

brew install ant

4. 用 npm 安裝 ios-sim 和 ios-deploy 兩個套件，

npm install -g ios-sim
npm install -g ios-deploy

5. 用 npm 來安裝 Cordova：

sudo npm install -g cordova

附註：如果直接使用 npm 沒有 sudo 不會出錯的話，代表目前帳號的存取權限夠大，不夠大時請加 sudo 來執行 npm.

6. 建立一個 Hello World 專案：

cordova create hello com.example.hello HelloWorld

7. 進入 hello 目錄下

cd hello

8. 加入了 ios 和 android平台：

cordova platform add ios
cordova platform add android

要移掉一個平台：

cordova platform remove ios

9. 分別把 Android 和 iOS 的模擬器跑起來:

cordova emulate android
cordova emulate ios

要知道安裝了那些外掛：

cordova plugin list

要移除外掛, you can simply do:

cordova plugin remove <PLUGIN_NAME>

For example:

cordova plugin remove org.apache.cordova.media

要新增外掛：

cordova plugin add airwatch-sdk-plugin

要部署到 iOS:

https://cordova.apache.org/docs/zh-cn/latest/guide/platforms/ios/index.html

要部署的應用程式連接的 iOS 設備上：

    $ cordova run ios --device