2018年8月20日 星期一

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

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

開始囉…

安裝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

測試推播

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









沒有留言:

張貼留言