今天來到FCM的下篇的部分

在上篇碼農日常-『Android studio』FCM雲端推播與通知系統(上)-建立第一個基本推播通知APP

我已經為我們的APP建立了一個FCM的基礎系統

但是!英文叫做But!!

請問在實際開發上,你會真的叫行銷人員每次都開那個網頁來發送推播訊息嗎Σ(°ロ°)

我看他還不打死你??

一般在開發上,我們在做這類功能時通常還會做一個「後台系統」以供行銷人員方便使用

而今天要來講的有兩個重點: 

1. 使用Postman模擬後端發送

2. 手機接到通知後,點擊它即可直接前往我所指定的網站

 

為什麼我要用Postman模擬呢?因為其實網路上還蠻多人的教學都是直接去寫一個後端來使用

但是...

image

 

攤手┐(‘~` )┌

講到後端閒聊一下,其實像我來講我因為有一些別的需求,實際上我自己是有租後端的

而租金來說的話其實也是1年6000台幣,實際上有那麼點貴(還好它對我來說是會賺錢的)

但其實我了解了一下身邊的工程師朋友,我發現有在認真研究的人也會自己租後端研究

所以大家不妨可以考慮看看租一個玩歐!

那如過真的有興趣,其實也是可以在本地端直接開一個Serve(像是xampp、Apache、Node.js等等),使用localhost做測試一樣可行的

OK回來

總之,反正我就懶,所以直接用Postmam模擬發送吧

來看看以下範例

了解範例後再來是Github(Postman的內容寫在Readme)

->https://github.com/thumbb13555/FCM_Example

 


 

1. 找出FCM的發送key

 

首先要了解,FCM的發送是可以透過後端的程式碼執行的

也就是說你時常看到仿間應用程式有通知的功能,多數都是靠此完成

這部分可以搭配著文件一起看

->https://firebase.google.com/docs/cloud-messaging/http-server-ref

 

文件中有描述到了你的API發送的body格式,那部分由於範圍太廣了,所以今天的範例只取一部分使用

那麼,關於Http的發送除了Body帶資料外,還有Headers需要做身份上的驗證,於是,我們就必須得先找到專屬於你的key

 

首先,請先來到設定主頁->專案的部分

截圖 2021-09-19 下午2.20.12

找到你的應用程式(紅框處),點擊它

 

截圖 2021-09-19 下午2.22.49

 

然後點擊齒輪,進到專案設定

截圖 2021-09-19 下午2.24.21

 

複製下來你的金鑰,再來我們來到Postman

 


 

2. 設定Postman

 

首先請去下載Postman

->https://www.postman.com/

當然,你要用網頁版的也是可以

請新增一個新的

截圖 2021-09-19 下午2.34.17

 

會看到一個全新的request

截圖 2021-09-19 下午2.37.06

再來,請填入基本URL,並將傳輸方式設定為「Post

截圖 2021-09-19 下午2.38.56

再來切到Headers的部分,填入3個Hearders

截圖 2021-09-19 下午2.41.50

我的Github中的Readme都有寫入哪裡該填什麼,可以參考一下

->https://github.com/thumbb13555/FCM_Example/blob/master/README.md#%E6%8C%87%E5%AE%9A%E6%9F%90%E8%A3%9D%E7%BD%AE%E7%99%BC%E9%80%81

 

比較需要注意的是是伺服器金鑰的部分

截圖 2021-09-19 下午2.51.54

這邊再填入的時候,請務必寫上"key=(你的伺服器金鑰)",請特別要注意歐

然後切到Body的部分,點選raw,在空白處貼上我在Github內給你的body

截圖 2021-09-19 下午2.56.24

OK,寫到這邊就完成後端的發送設定了

接著我們回到Android專案,來到FCMService.java的部分,目前在onMessageReceived底下應該只有一個Log,那們我們來發送看看

@SuppressLint("UnspecifiedImmutableFlag")
@Override
public void onMessageReceived(@NonNull RemoteMessage remoteMessage) {
    super.onMessageReceived(remoteMessage);
    Log.d(TAG, "onMessageReceived: " + remoteMessage.getData());

}

這時候你就會在你的Logcat內找到你剛剛發送的內容囉!

截圖 2021-09-19 下午3.10.30

現在後端的發送完成了,接著要來寫手機接收的部分囉:D

 


 

3. 設置通知

現在,你已經能夠在Logcat看到訊息了,但是我們要實際轉為通知要怎麼做呢?

其實,我之前有寫過一篇

->碼農日常-『Android studio』Notification通知之用法(含點擊事件)

就是為了今天的主題鋪路的XD

來來來,我直接給你程式看看

FCMServices.java

public class FCMService extends FirebaseMessagingService {
    public static final String TAG = FCMService.class.getSimpleName()+"My";
    private String CHANNEL_ID = "Coder";
    public FCMService() {}

    @Override
    public void onNewToken(@NonNull String s) {
        super.onNewToken(s);
        Log.d(TAG, "裝置Token: "+s);
    }

    @SuppressLint("UnspecifiedImmutableFlag")
    @Override
    public void onMessageReceived(@NonNull RemoteMessage remoteMessage) {
        super.onMessageReceived(remoteMessage);
        Log.d(TAG, "onMessageReceived: " + remoteMessage.getData());
        //從這邊開始往下
        /**檢查手機版本是否支援通知;若支援則新增"頻道"*/
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            NotificationChannel channel = new NotificationChannel(
                    CHANNEL_ID, "DemoCode", NotificationManager.IMPORTANCE_DEFAULT);
            NotificationManager manager = getSystemService(NotificationManager.class);
            assert manager != null;
            manager.createNotificationChannel(channel);

        }
        Map<String,String> s = remoteMessage.getData();
        Intent intent = new Intent(this,NotificationTarget.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        intent.putExtra("data",s.get("key_1"));
        PendingIntent pendingIntent = PendingIntent.getActivity(this,0
                ,intent,PendingIntent.FLAG_UPDATE_CURRENT);

        /**建置通知欄位的內容*/
        NotificationCompat.Builder builder
                = new NotificationCompat.Builder(FCMService.this,CHANNEL_ID)
                .setSmallIcon(R.drawable.ic_baseline_fiber_new_24)
                .setContentTitle(s.get("title"))
                .setContentText(s.get("body"))
                .setAutoCancel(true)
                .setPriority(NotificationCompat.PRIORITY_HIGH)
                .setCategory(NotificationCompat.CATEGORY_MESSAGE)
                .setContentIntent(pendingIntent);

        /**發出通知*/
        NotificationManagerCompat notificationManagerCompat
                = NotificationManagerCompat.from(FCMService.this);
        notificationManagerCompat.notify(1,builder.build());
        //到這邊
      }
}

 

基本上整段複製就可以了XD

不過還是有個重點做個講解

那就是橘底白字的部分

這部分其實就是銜接下一段的「跳轉網頁事件」有關

這個地方是設置一個Intent,告訴Meaage說我稍後點擊到通知時,我會將頁面跳轉至NotificationTarget這個Activity內的意思

並且還有把從body內取得的資料帶上,一併傳入

到這裡大家也可以執行看看,寫到這裡應該就會有通知顯示囉

然後藍底白字的部分,這個地方我上面沒有寫載入圖片,因此這裡會報錯,請特別注意了!(所以你就自己載入圖片吧XD)

到此一樣在執行看看,就可以看到通知

且按下通之後她會跳轉到NotificationTarget.java這個Activity內喔!

 


 

4. 點擊後導向網頁

 

其實,做到上一步驟就已經差不多結束了,那一段就是將收到的資訊直接轉到網頁去而已

看程式便能很清楚地了解囉

NotificationTarget.java

public class NotificationTarget extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_notification_target);
        String result = getIntent().getStringExtra("data");

        TextView tvResult = findViewById(R.id.textView_Result);
        tvResult.setText("收到訊息:\n"+result);

        Intent intent = new Intent();
        intent.setAction(Intent.ACTION_VIEW);
        intent.setData(Uri.parse(result));
        startActivity(intent);
        finish();

    }
}

 

對,就是一個很簡單的網頁跳轉,沒了攤手)

好啦,也不要說我寫得太隨便

 


 

結語

本篇的FCM系列就到這邊

實際上這系列也是個我很之前就想寫的系列,但無奈一直無法付出實際(笑)

因為這部分的東西,程式雖然不多但是設定一大堆,有夠麻煩

而且Google其實有事沒事就會改他的UI,有可能我今天寫完後,然後又會有人問我「為什麼我找不到功能??」這類的問題

可是Google也很無奈呀XD因為他們一直都在把東西推陳出新,為了達到最好的UI效果,就...只好改惹QQ

好啦,那文章就寫到這邊,感謝大家點閱!

TK

arrow
arrow

    碼農日常 發表在 痞客邦 留言(4) 人氣()