TypeScript intro and migrating

Background

It’s not easy to build a great project that is easy to maintain. Especially when you are in a large company, you have to work with other members. There are many different opinions and ideas even for the simplest of things. Fortunately we have a lot of talent members in RingCentral. We maintain a high quality in our libraries, widgets and products which we build. But, as the project or requirements increase, more and more issue appear. It’s time to prepare our project for facing huge projects in the future with innovations.

Current problems

1. Project scaling
   As described above, more and more source code have been pushed into the projects. There will be a day when our projects grow to enormous sizes. How to make our source code easy to maintain and read, that is the challenge we would have to overcome.

Read More

Hybrid App

談到 Hybrid App 你會想到什麼呢？大部分的人都一定會想到 Phonegap 或是 Cordova 吧，這些框架讓我們可以將 Web 封裝成 App 的形式，並且能夠在行動裝置的作業系統上運作，例如 Android, iOS 等主流的行動平台。並且讓我們透過各種原生的 plugin 的方式，以一份原始碼能夠在不同平台上執行的目的，提供開發者更有效率且容易維護的一套解決方案。而 Capacitor 呢？

Native Progressive Web Apps

Capacitor 的靈感來自其他熱門的跨平台工具例如： React Native 以及 Turbolinks ， 並繼承 Apache Cordova 和 Adobe PhoneGap 的精神，完全專注於使現代的網站應用能很簡單的在目前主流的平台上執行。同時也向後兼容許多現有的 Cordova plugins。要入門 Capacitor 其實是相當簡單，馬上就來試試看吧。

Read More

前言

來到了第五週，這次要介紹的功能也是時常會用到的，衛星定位功能，無論是在生活還是實務中，一定會用到的功能，因此 Cordova 官方也將 cordova-plugin-geolocation 列為核心套件並持續提供維護。套件支援的平台有 Windows, Android 以及 iOS，這次一樣針對 Android & iOS 的部分來做介紹。

安裝方式

安裝方式與前面幾篇介紹的一樣，透過 cordova cli 安裝套件：

1

$ cordova plugin add cordova-plugin-geolocation

初始化

在安裝並建置完成之後，套件會建立全域的物件 navigator 下的一個 geolocation 屬性，雖然是全域屬性，但與其它套件一樣，要在 deviceready 觸發之後才能開始使用，因此可以透過事件監聽的方式 console.log 物件：

1
2
3
4

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log("navigator.geolocation works well");
}

Read More

前言

開發 App 的時候，時常會遇到要處理裝置中的圖片或檔案，一陣子沒有碰了，因此這次就來聊聊 Cordova App 中的 File System！Cordova 針對 File System 提供了核心套件 ( Core Plugin ) - cordova-plugin-file，主要實作了檔案操作相關的 API 使我們能讀寫裝置中的檔案，不同的平台，提供的屬性或方法都不盡相同，我們先從 Android 的部分開始介紹。

安裝套件

透過 Cordova CLI 進行安裝：

1

$ cordova plugin add cordova-plugin-file

在執行時期，若有正確引入 cordova.js，加入 cordova-plugin-file 後，會在全域屬性中找到 cordova.file 物件。所以我們可以在 javascript 的部分加入事件監聽 ( Event Listener )，並 console.log 物件確認是否有成功加入：

1
2
3
4

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(cordova.file);
}

支援的平台

根據套件 Repo 提供的 README，目前支援的平台如下：

• Android
• iOS
• OS X
• Windows
• Browser

其中 Ｗindows 平台目前不支援 FileReader.readAsArrayBuffer 以及 FileWriter.write(blob) 的方法。 但這次的介紹主軸在於 Android & iOS，因此這部分有個基本的了解即可。

Read More

前言

Angular 終於發布 6.0 正式版了，當然馬上拿手邊的專案來升級啦！後面也順利升級完成了，在論壇蓋大樓回報區回報的同時，也在這紀錄一下。

使用 ng update 進行更新

首先更新了 node_modules 的 @angular/cli：

1
2

全域：yarn global upgrade @angular/[email protected]
專案目錄：yarn upgrade @angular/[email protected]

Read More

前言

上一篇我們介紹了如何建立 FCM 並將 API 金鑰設定至 Azure，最後完成訊息推播測試，本篇將繼續說明 iOS 訊息推播要如何設定，主要的步驟有：

1. 建立 iOS 推播通知憑證
2. 上傳 p12 與設定 Azure Notification Hub
3. 進行推播測試

建立 App Identity (App ID)

iOS 平台需要先進入 Apple Developer 的管理介面建立 AppId，並啟動 Push Notifications 的功能。另外，要準備一台 MacOS 裝置，透過鑰匙圈 ( Keychain ) 工具建立 CSR ( Certificate Signing Request )，將檔案上傳轉換成憑證並下載，點擊加入鑰匙圈後匯出 p12 檔，將 p12 檔上傳至 Azure Notification Hub 的 Apple 設定中。

Read More

前言

在 Mobile App 的開發中，推播通知已經是不可或缺的 App 功能之一，大部分的商業 APP 都一定有推播通知的功能，因此，這次要介紹如何安裝與使用 Phonegap Plugin Push 並透過 Azure Notification Hub 實現 Android 與 iOS 的即時推播訊息功能。

什麼是 Phonegap-plugin-push?

Phonegap-plugin-push 提供使用單一獨立的 API 來支援接收及處理原生 push notification。但這不是指我們可以發送單一個訊息並在不同作業系統上都能收到。基本上 Android 使用的是 FCM，iOS 則使用 APNS，而且他們的 payload 都很不一樣。即使在 Android 及 iOS 都使用 FCM，也是需要提供不同的 payload 才能使套件正常運作。對 Android 來說，每一次的推播內容都會在 payload 存放 data 的物件，可以參考 Notification vs Data Payload 這篇文章。iOS 的話可以依照 FCM documentation。

筆者主要是透過 Azure Notification Hub 發送推播訊息， Azure Notification Hub 同時提供了方便管理的介面，讓我們只需要透過一個通知中樞，並根據不同的平台提供不同的 payload 即可輕鬆的實現推播訊息通知的功能！

安裝需求

在安裝之前需要檢查一下對應的 Cordova 所支援的版本，若選擇的版本是較舊的 Cordova-Android 6.0.0 與 Cordova-iOS 4.3，則需要留意套件的版本要裝 1.9.0 的。

Read More

前言

潛水了很久，是時候出來還債分享一下了，在工作上跟 Cordova 真的很有緣，雖然主要是 Angular 的專案開發，但幾乎都是要打包成 APP 的方式呈現，在開發的過程中也踩了不少地雷，經歷過多少次的絕望深淵中爬出，為此，將自身的經驗紀錄下來分享給大家，若有錯誤或需補充的地方還請大家不吝指教。

什麼是 Cordova？

Apache Cordova 是一個開源的行動開發框架，它可以讓我們透過標準的 Web 技術例如：HTML, CSS3 與 JavaScript 進行跨平台的行動應用開發，應用程式可以在每個不同的平台包裝並執行，並依靠符合標準的 API 綁定來存取裝置的功能，例如傳感器，資料或網路狀態等。

有以下的情況可以使用 Cordova：

• 你的行動應用開發想要沿用現有的專案，跨到其他平台，不想再使用該平台的程式語言與工具重新開發。
• 你是網站開發者，想要將你的網站應用封裝並部署到各個應用商店平台。
• 你是原生的行動應用開發者，對混合式的原生應用存取原生裝置層級 API 的 WebView 元件感興趣，或是你想開發一個可以在原生與 WebView 間運作的套件。

Read More

在初探 part.1 的時候，提到了 Angular directive 有分三種，Component, Attribute Directive and Structural Directive，而之前介紹了 Attribute Directive，知道如何建立與使用，這次就來研究一下 Structural Directive 吧！

什麼是 structural directive ?

Structural directives 負責 HTML 的 layout。通常是藉由加入、移除或操作 element ，將 DOM 架構進行繪製或重繪的動作，就和其他的 directives 使用方式一樣，套用到 HTML host element 上，並且依照這個 directive 有什麼功能去進行處理，而被套用的 host element 本身以及其底下的其他後代都是在 directive 執行的範圍內。

structural directive 很好分辨，directive 的名稱前面有星號 ( * ) 的 directive 就是 structural directive。

1

<div *ngIf="isChecked"> is checked </div>

像上方的範例，我們很常在使用的 directive 之一 *ngIf ，只要帶著設定的屬性名稱，不需要加上任何括號就能執行。稍後會提到使用星號帶來的方便性，以及後面的字串其實是 microsyntax 而不是一般的 template expression 喔，Angular 會對星號的標記語法進行解語法糖 的動作，並且將結果放進 <template> 標記中，而這個 template 的影響範圍在 host element 以及其底下的後代。每個 strucural directive 都和對應的 template 內容不太一樣。

三個內建且常用的 structural directive —NgIf、 NgFor、 NgSwitch…等，在官網的 Template Syntax 文件中都有提到，也有提供參考的範例，以下為其中一個 template 的範例：

Read More

前兩篇文章，Part.1 和 Part.2 的介紹，可以認識到如何寫一個簡單且富有彈性的 directive 並套用，這次來嘗試將 jQuery datepicker 的執行改成 directive ，並認識一下 Angular Directive 的 Decorator 吧！

製作 jQuery datepicker 的 directive

首先，npm 要先準備好 jquery 以及 bootstrap-datepicker，包含定義檔的部分：

1

npm install jquery bootstrap @types/jquery @types/bootstrap-datepicker --save

相依套件安裝完成後，到 tsconfig.app.ts 中，將 types 的陣列加上 “jquery” 字串，代表加入定義。或許你會有疑問，為什麼 tsconfig.json 中已經有設定 typeRoots 了，為何 tsconfig.app.json 還要再加上 “jquery”？

雖然 tsconfig.app.json 繼承了 tsconfig.json 但這裡的 types 是空陣列，因此造成 tsconfig 的 typeRoots 不會讀進來，在編譯的過程中就會報錯，這還滿雷的…Orz 除了在 tsconfig.app.json補上 types 之外，你也可以直接刪除 types，如此一來就只會抓 tsconfig.ts 的 typeRoots 囉…

npm, tsconfig 都準備好之後，把剛才安裝好的套件加入 Angular-CLI 的設定檔，主要是 jquery 的 js 以及 datepicker 的 css & js 檔案要進行引入的動作：

Read More