使用Ionic創建一個簡單的APP

Posted on

上次成功建立一個 cordova project 並 build 到手機，這次要改試 Ionic.

[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 [email protected]: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/

 

Related Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *