[Cordova Week-5] Cordova Plugin Geolocation

前言

來到了第五週,這次要介紹的功能也是時常會用到的,衛星定位功能,無論是在生活還是實務中,一定會用到的功能,因此 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

[Cordova Week-4] Cordova File System

前言

開發 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

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

Read More

[Cordova Week-3] Cordova Push Notification - iOS

前言

上一篇我們介紹了如何建立 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

[Cordova Week-2] Cordova Push Notification - Android

前言

在 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 的。

Plugin version Cordova CLI Cordova Android Cordova iOS CocoaPods
2.0.0 7.0.0 6.2.1 4.4.0 1.1.1
1.9.0 6.4.0 6.0.0 4.3.0 1.1.1
1.8.0 3.6.3 4.0.0 4.1.0 N/A

Read More

[Cordova Week-1] Hello Cordova!

前言

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

什麼是 Cordova?

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

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

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

Read More

Angular Directive 初探 - Part.4

在初探 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 —NgIfNgForNgSwitch…等,在官網的 Template Syntax 文件中都有提到,也有提供參考的範例,以下為其中一個 template 的範例:

Read More

Angular Directive 初探 - Part.3

前兩篇文章,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.tstypeRoots 囉…

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

Read More

Angular Directive 初探 - Part.2

上一篇文章,我們初步了解 directive 基本的使用方式,這次來嘗試加入一些事件或值的傳遞,進一步體驗這強大又方便的 Angular Directive。

反應由使用者發起的事件

目前 appHighlight 很單純的去改變一個元素的樣式而已,但 directive 可以做得更動態,例如我們可以指定當使用者將滑鼠移入或移出元素的時候,進行背景色的改變。在最上方從 @angular/core import 的部分加入 HostListener

1
import { Directive, ElementRef, OnInit, HostListener, Input } from '@angular/core';

然後加入兩個 eventhandlers 負責處理 mouse enters 或 leaves 的事件,由於滑鼠的進入及離開共有兩個事件,要加上各自的 @HostListener decorator 共兩個:

1
2
3
4
5
6
7
@HostListener('mouseenter') onMouseEnter() {
this._el.nativeElement.style.backgroundColor = 'green';
}

@HostListener('mouseleave') onMouseLeave() {
this._el.nativeElement.style.backgroundColor = 'orange';
}

透過 HostListener 來監聽事件並進行處理,就可以讓 directive 實現更多動態的功能囉,那如果要從外部傳值進來讓 directive 進行處理的話呢?我們接著往下看。

Read More

Angular Directive 初探 - Part.1

最近買了一本中國的 Angular 2 簡體書,想看看有別於自己的角度,如何介紹 Angular ,再加上想深入研究 directive 的部分,因此除了 Angular 官網,也參考了這本書的部分內容,希望對大家有所幫助。

Directive 又翻做 “指令”,但我還是習慣直接叫 directive

在 Angular 的世界中,directive 扮演相當重要的角色之一,它可以在特定的 DOM 元素上執行,進而擴充這個元素的功能,為元素增加新的方法。而我們最常用的元件 ( Component ),基本上就是一個帶有 template 的 directive,它繼承了 directive,是 directive 的一個子類別,通常用來打造 UI 的部分。

在開始介紹 directive 之前,稍微複習一下 HTML 的相關內容。

Read More