Ionic APP + Firebase

Ionic 是什麼?

• Web APP 框架(可用來發展純web 供行動方便瀏覽) 
• 結合Cordova 可運用開發跨平台App 目前支援(Android、Blackberry 10、iOS、OS X、Ubuntu、Windows 10)
• 可結合以下的javascript 的框架 (angular、vue.js )

示範 https://ionicframework.com/docs/components/#card-background

Firebase 是什麼?

Firebase 是一個同時支援 Android、iOS 及網頁的 app 雲端開發平台，協助 app 開發者在雲端快速建置後端服務，提供即時資料庫，有效縮短 app開發時間

• 推播訊息（notification）
• 即時資料庫 (RealTime DataBase)
• 當離線存檔時，等連線後自動同步到雲端資料庫
• Firebase 數據分析功能（Firebase Analytics

https://firebase.google.com/

環境設置

• 裝NODE.JS
• 設置ANDROID的開發環境
• MAC 環境 或 MAC的VM

安裝過程 https://github.com/tomlinNTUB/ionic/blob/master/%E7%AC%AC01%E8%AA%B2%20%E5%AE%89%E8%A3%9Dionic%E7%92%B0%E5%A2%83.md

感謝網友們的詳細安裝說明… 

開始囉…

安裝cordova 元件

  

  有三種範本可供參考…   其他要客製化

安裝Firebase的FCM 元件

CONFIG.XML 設定App的應用名稱

專案架構-說明

app.module.ts 注入要用元件FCM

app.component.ts 設定起啟頁

每一個pages 都包含一隻(*ts,*.html,*.scss)

home/hotm.ts 將fcm 注入controller後，進行訂閱，後續可接收推播等功能

接收推播要發什麼訊息(可以讓app關閉時仍可接收推播)

產生Android APP

以上是要發布的app 的指令語法，詳細再自行上網研究 功能

也可以直接在你的手機上連上電腦後，直接在你的手機上DEBUG… 功能超強大

產生檔案

專案目錄/platforms/Android/build/outputs/apk

測試推播

輸入訊息‧‧‧‧在標題/自訂資料，輸入一些資訊