Apache Cordova - Introduction

在工作上碰 Cordova 已經有蠻長的一段時間，從他還叫做 PhoneGap 的時代就已經開始接觸，目前已經有許多的客戶使用這樣的方式進行 App 開發作業。當然，在很多部分這樣的開發模型是比不上原生 (Native) 的開發，再者會用這樣開發方式的業主大多是從做 Web 開始，想要有進一步延伸出來的管道。很多時候，開發人員除了要關注 App 端之外，也需要關注 Server 的狀況，時間久了就慢慢變成要同時處理 App 與 Backend Server 的人。

雖然，看似有蠻多的需求，而且很多專案其實都找不到人可以執行。再到天瓏找找有沒有這類相關的書籍，看起來也不多。網路上的社群也沒有非常熱絡，也有可能是需求太多了大家沒空討論吧！剛好，最近有一連串的需求要進行教育訓練教材的準備，就將這些內容在網路上註記下來。

Apache Cordova 是一個行動應用開發框架的開放原始碼專案，它讓程式開發人員可以使用 Web 技術 (HTML5 + CSS3 + JavaScript) 來進行跨平台行動應用程式的開發。透過 Apache Cordova 開發出來的應用程式，可打包至各個不同的應用平台 (iOS and Android)。Cordova 應用程式會使用各平台標準的 API 來存取設備相關資訊。

什麼時候適合使用 Cordova 來進行 App 開發？

• 假如你想要將你的應用程式拓展到不同的行動應用平台 (例如，iOS and Android)，但你又不想各自開發一次，那麼使用這樣的技術會是一個好的選項。
• 假如你是個 Web 應用工程師想要將 Web 應用程式打包並部署到不同的行動應用平台，以發布行動應用程式。
• 假如你是一個行動應用開發工程師，對於混合式開發 (Web + Native) 感興趣，並想要開發 Web 與 Native 的溝通介面的話，可以嘗試 Cordova Plugin 的開發

下圖是 Apache Cordova 的架構圖：

Web App

在上圖中的 Web App 是我們所撰寫的程式碼，使用 HTML、JavaScript、CSS 等構成，預設的首頁是 index.html 在 HTML 內會定義參考的 CSS、JavaScript 及圖片等資源。

HTML Rendering Engine (WebView)

Cordova 應用程式透過 WebView (HTML Rendering Engine) 載入專案內的HTML 畫面作為 App 的使用者操作介面。

Cordova Plugin

Plugin 是 Cordova 裡非常重要的一部分，是 Web 與 Native 溝通的主要介面。我們可以透過 JavaScript 使用 Cordova Plugin 來存取底層的 Device API。

Apache Cordova 專案維護許多的 Plugin  可以在 Core Plugins 取得相關資訊，這些 Plugin 可以協助我們存取 Device 相關特性，例如電池、相機及通續錄等。除了這些官方的 Plugin 之外，我們也可以從 plugin search 或 npm 找到第三方的 Plugin 。

[參考資料]

[1]  Apache Cordova 官網

Angular 5 Router Parameter

頁面的轉導以及相關參數的傳遞一直是 Web 應用程式發展的基礎，在 AngularJS 中，我們可以透過 Router 模組來定義各個頁面 (Component) 的繞送規則。然而，很多時候我們還需要將目前頁面上的參數往下一個頁面(Component)帶，才可以完成我們要做的工作。下列，說明如何在 AngularJS 裡進行參數傳遞的範例：

const routes: Routes = [
 { path: 'cmpa/:id', component: ComponentA },
 { path: 'cmpb/edit', component: ComponentB },
];

例如上述的 path/:id 即定義了一個 id 的變數，以變傳到 ComponentA 中。

2. 如何在 ComponentA 中接收 :id 參數？

import {ActivatedRoute} from "@angular/router";
.
.
.
constructor(private route: ActivatedRoute) {
    this.route.params.subscribe( params => console.log(params) );
}

使用 ActivateRoute 以取得相關參數資訊。在上述程式中，params 即為傳入的參數內容。


[參考資料]
1. https://codecraft.tv/courses/angular/routing/parameterised-routes/

IBM Application Center Push Notification of Application Update for Android and iOS

IBM Application Center Client 可以在應用程式更新時進行推播服務，告訴使用者已經有新版的應用程式上架，引導使用者進行下載新版的工作。

要完成這樣的功能，必須針對產品進行些許的設定，進一步說明如下：

1. Server 的設定
   IBM Application Center 可以安裝在 WebSphere Application Server、WebSphere Liberty Profile 以及 Tomcat 上。

   本文以 WebSphere Liberty 為例，需要在 server.xml 裡進行下列 JNDI 的設定：

Android:

<jndiEntry jndiName="ibm.appcenter.push.schedule.period.unit" value="hours" />
<jndiEntry jndiName="ibm.appcenter.push.schedule.period.amount value="2" />
<jndiEntry jndiName="ibm.appcenter.gcm.signature.googleapikey" value="AAAAX_7jiec:........" />

     其中 「ibm.appcenter.push.schedule.period.unit」的值建議使用 「hours」，避免伺服器過於頻繁檢查是否要進行推播，影響效能。(在測試的時候可以設定 seconds 以增進測試的效率)「ibm.appcenter.gcm.signature.googleapikey」可以使用 Firebase Cloud Message 上的 Server Key 來進行設定作業。

iOS 設定：

<jndiEntry jndiName="ibm.appcenter.apns.p12.certificate.location"  
     value='"D:/IBM/WebSphere/Liberty/usr/servers/MFPSrv2/PushNotification.p12"'/>

<jndiEntry jndiName="ibm.appcenter.apns.p12.certificate.password"  
     value='"yourpassword"'/>

<jndiEntry jndiName="ibm.appcenter.apns.p12.certificate.isDevelopmentCertificate"  
     value='"false"'/>

PushNotification.p12 憑證可以從 Apple Developer Account 針對包版的憑證進行 Push Notification 相關設定，設定完成後可以產生一個 .cer 檔案。將該 .cer 檔案匯入 MAC 上的「鑰匙圈存取」，再將其匯出成 p12 檔案，並設定密碼。

2. IBM App Center Client
   修改 CordovaAppCenterClient 內的 config.json 檔案內的「gcmProjectId」值。
   請建立一個 Firebase 專案，並且在專案設定頁面中進入 Cloud Messaging 的設定畫面，將「寄件者 id」抄出，並修改 gcmProjectId 值。

3. 進行測試
   接著我們可以上傳一個新的 ipa 或 apk 檔案，在上傳的時候記得將 Recommended 的 checkbox 打勾。接著，在一定時間內應該可以收到應用程式上版的推播通知。

4. 問題排解
   以上動作最好是在 App Center 上線前就完成，如果有人已經下載了 App 因相關推播內容設定值是錯誤的，例如：gcmProjectId 的值，那麼這時候可能就需要重置一下 App Center 的資料了。
 

參考資料：
[1] https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/appcenter/push-notifications/
[2] https://www.ibm.com/support/knowledgecenter/en/SSHS8R_8.0.0/com.ibm.worklight.appcenter.doc/appcenter/t_ac_gcm_connect.html