Ionic3 + FCM (推播)

Firebase 推出FCM 目的將用來取代GCM，雖然GCM 仍然不滅，但我們先來嘗鮮看看，連推播的介面都已經設計好了，只要簡單幾行Code就可以完成推播的功能，廢話不說，就先看示範吧。

一、   下戴必要的套件

二、   設定Config.XML

修改widget id的名稱，因為要對應到FCM準備要推播的應用程式名稱，所以如果不一致就無法接收推播了喔!!!  很重要

三、注入model

import { FCM } from '@ionic-native/fcm'; @NgModule({   declarations: [     MyApp,     AboutPage,     ContactPage,     HomePage,     TabsPage   ],   imports: [     BrowserModule,     IonicModule.forRoot(MyApp)   ],   bootstrap: [IonicApp],   entryComponents: [     MyApp,     AboutPage,     ContactPage,     HomePage,     TabsPage   ],   providers: [     StatusBar,     SplashScreen,     {provide: ErrorHandler, useClass: IonicErrorHandler},     FCM   ] }) export class AppModule {}

FCM 推播的物件是要被注入Provider ，如果沒注入 就會失敗囉~

四、呼叫FCM 的實作演練

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { FCM } from '@ionic-native/fcm';   //注入FCM 到Constructor

@Component({

  selector: 'page-home',

  templateUrl: 'home.html'

})

export class HomePage {

  constructor(public navCtrl: NavController, private fcm: FCM) {

  

  fcm.subscribeToTopic('marketing');

 

//取得FCM 的token

  fcm.getToken().then(token => {

    alert("getToken")

  })

 //取得FCM 的推播訊息

   fcm.onNotification().subscribe(data => {

    if (data.wasTapped) { //取得背景監聽

      alert("message in background!");

    } else {

      alert("message in front! "); //前景

      alert(JSON.stringify(data)); //取得推播資訊

    };

  })

  //取消推播

  fcm.unsubscribeFromTopic('marketing');

  }

}

根據Ionic的官方文件 需要訂閱名稱，位置放在constructor fcm.subscribeToTopic('marketing');

在結束時就要將訂閱名稱取消…。

fcm.unsubscribeFromTopic('marketing');

五、設定推播內容

Project OverView à 新增其他應用程式 (config.xml的 widget id)

點選新增訊息

選擇剛剛新增 應用程式

設定前景資料(當應用程式是開啟)

接收的推播

Angular5 + ng-Chart 簡易示範

圖表的工具有很多，如果朋友們還不知道從何下手，我們就簡單超基本圖表的ng-chart來，因為最簡單~ 超級簡單~  因為太簡單了…所以第一次玩angular的朋友也會玩出動感的圖表喔!!!

1.    下戴ng-chart.js

 https://valor-software.com/ng2-charts/

2.    注入到angular 的 model

  import { ChartsModule } from 'ng2-charts/ng2-charts';

加入 imports

imports: [

    BrowserModule,

    IonicModule.forRoot(MyApp),

    AngularFireModule.initializeApp(firebaseConfig),

    AngularFirestoreModule,

    ChartsModule

  ],

Chart.htmlè 目前先示範bar 的圖表

  <div >

    <div style="display: block">

        <canvas baseChart width="400" height="200"

        [datasets]="barChart3Data"

        [labels]="barChart3Labels"

        [options]="barChart3Options"

        [colors]="barChart3Colors"

        [legend]="barChart3Legend"

        [chartType]="barChart3Type"

        (chartHover)="chartHovered($event)"

        (chartClick)="chartClicked($event)"></canvas>

    </div>

        <ion-list>

            <ion-item >

              <ion-label><font color=black>年份</font></ion-label>

              <ion-select [(ngModel)]="choiseYear"

               (ionChange)="onChange()">

                <ion-option  *ngFor="let y of years" >{{y}}</ion-option>

              </ion-select>

            </ion-item>

          </ion-list>

  </div>

Chart.ts

客製化圖表的內容，有些參數用來顯示圖表的外觀，搭配html的參數設定

public barChart3Options: any = {

    scaleShowVerticalLines: false,

    responsive: true

  };

 

  //用來顯示橫軸的名稱

  public barChart3Labels: string[] = ['一月', '二月', '三月', '四月',

    '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];

  public barChart3Type: string = 'bar'; //圖示的類型

  public barChart3Legend: boolean = true; //顯示圖例

//這是顯示圖表的陣列格式

  public barChart3Data: any[] = [

    { data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], label: '2017' }

  ]; //用來顯示圖表的數據

 

//用來顯示圖片的背景色和前景色，依照barChart3Data的陣列值顯示不同顏包

  public barChart3Colors: Array<any> = [

    { // green

      backgroundColor: 'lightgreen',

      borderColor: 'green'

    },

    { // red

      backgroundColor: 'pink',

      borderColor: 'red'

    }

  ];

建立圖表的函式

doBarchartData(items) {

    var groupData = [];

    var data = [];

    var sumByMonth = 0;

    // 以下程式用來整理出，可以匯出到chart圖表的的陣列集合

    var example = this.myService.getGroupByMonth(items).subscribe(d => {

        this.barChart3Labels.forEach((day, key) => {

if (d.length == 0) {

          return [];

        } else if (d[this.choiseYear] == undefined) {

          return [];

        }

        if (d[this.choiseYear][key + 1] == undefined) {

data.push(0);

        } else {

          sumByMonth = 0;

          d[this.choiseYear][key + 1].forEach((data, key) => {

            sumByMonth = sumByMonth + Number(data.cost);

          })

          data.push(sumByMonth);

        }

      })

      //將結果匯出到圖表中

      this.barChart3Data = [

        { data: data, label: this.choiseYear },

      ];

    });

  }