web analytics

Android Code : ทำ Push Notification ด้วย Firebase Cloud Messaging ตอนที่ 2

cover-1

 

ตอนที่ 1 พูดเรื่องของการ สมัคร Firebase , ติดตั้ง Firebase ใน Android project และ push ด้วย Firebase console

Android Code : ทำ Push Notification ด้วย Firebase Cloud Messaging ตอนที่ 1

 

การยิงไปที่ Firebase

ความจริงแล้วการส่ง Notification มันคือการยิง POST ไปที่ server ของ Firebase ซึ่งเป็นตัวกลางในการส่ง และเราจะต้องส่งเป็น json ไปด้วย เราจึงสามารถใช้โปรแกรม POST MAN , เขียนโค้ด php หรือใช้  AJAX ยิงได้เหมือนกัน ขอเรียกว่ายิงแบบ manual ละกัน

ลิงค์ที่รับ request ของ Firebase จงจำลิงค์นี้ไว้ให้ดี

   https://fcm.googleapis.com/fcm/send

 

Server Key

การส่งแบบ manual เอง หรือยิงเอง ต้องใช้ server key ด้วย วิธีการก็ให้ไปที่  Project settings

2

 

เลือกแถบ Cloud Messaging

3

 

ก็จะพบกับ Firebase Clound Messaging ให้ทำการ copy เอาไว้
จะเห็นว่าด้านล่างมี Server key ด้วย อันนี้ใช้ได้เหมือนกัน แต่กำลังจะถูกยกเลิกไป

22

 

 

ลองยิงด้วย POST MAN

คราวนี้มาลองยิงด้วยโปรแกรทดสอบ API ยอดนิยม ไม่รู้จักนี่ จัดว่าบาปมาก เพื่อดูว่ามันสามารถยิงเองได้จริงๆนะ

ใครไม่มีก็ให้โหลด POST MAN บน Chrome extensions
https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en-US

1

 

ต่อมาก็ให้เปิดโปรแรม เลือก Dropdown เป็น POST
ใส่ URL ของ firebase ลงไป
ที่ แถบ Header ใส่ ข้อมูลลงไปดังภาพ

คือส่วน Authorization แปะ “key=” ตามด้วย Firebase Clound Messaging key (มี key= ข้างหน้าด้วย)

 

6-1

https://fcm.googleapis.com/fcm/send
Content-Type:application/json
Authorization:key=AIzaSyB3N..9XC_KTB5CdtIc9....

 

เลื่อนมาที่แถบ Body
ให้เลือก raw แล้วแปะ json ลงไป โดย value ของ to ก็คือ token ของผู้รับ
จากนั้นกดยิงได้เลย ที่ปุ่ม Send

{
    "to" : "c5O-A1Fkrxo:APA91bGttyJfmq12ZsVsxJN33CgzaSK7UyozxeZUhxfMQ6tabzswqnGQoVkdWypoq3JS_eMNcbgbkbJG9-ZFW8f3cG5Vho0TfLh5xoRFb2Gdsi5o7R8Yw4El3bLD6qvHVig3FpOyP4G1....
    "notification" : {
      "body" : "ฆ่ามันซะ !!!",
      "title" : "เจ้ามังกรของข้า",
      "icon" : "ic_launcher"
      "color":"#f1c40f"
    }
}

7

 

และนี่คือผลลัพธ์ ที่ Firebase ส่งกลับมา ถ้าเห็น succes 1 ละ ก็แสดงว่าข้อความถูกส่งไปแล้ว

8

 

ซึ่งก็มีส่งมาจริงๆ

9

 

 

ยิงด้วย Php

ผมลองเขียนแบบยิงด้วย php แบบ native ก็ทำได้เหมือนกัน ยิงบน localhost ก็ได้
ใครไม่ชอบเขียน php ก็ข้ามไปเลยจ้า

<?php
$api_url = "https://fcm.googleapis.com/fcm/send";
$server_key = "key=AIzaSyB3NtpSTk9XC_KTB5CdtI....";

$token_target ="c5O-A1Fkrxo:APA91bGttyJfmq12ZsVsxJN33CgzaSK7UyozxeZUhxfMQ6tabzswqnGQoVkdWypoq3JS_eMNcbgbkbJG9-ZFW8f3cG5Vho0TfLh5xoRFb2Gdsi5o7R8Yw4El3bL...";

$color = "#f1c40f";
$title ="ขอให้พลังสถิตกับเจ้า";
$body = "และสถิตย์กับเจ้าด้วย";

$json = "{
	    \"to\" : \"$token_target\",
	    \"priority\" : \"high\",
	    \"notification\" : {
	      \"body\"  : \"$body\",
	      \"title\" : \"$title\",
	      \"icon\"  : \"ic_launcher\"
	      \"color\" : \"$color\"
	      }
	}";

$context = stream_context_create(array(
    'http' => array(
        'method' => "POST",
        'header' => "Authorization: ".$server_key."\r\n".
                    "Content-Type: application/json\r\n",
        'content' => "$json"
    )
));

$response = file_get_contents($api_url, FALSE, $context);

if($response === FALSE){
    die('Error');
}else{
    echo $response;
}

?>

การแจ้งเตือนก็ถูกยิงมา แล้ว

10

 

 

ยิงด้วย AJAX

การยิงด้วย ajax ก็ทำได้ง่ายๆ
ก่อนอื่น include jquery ด้วย จะได้ใช้ Ajax ได้ ถ้าไม่มีก็ไปโหลดมาให้เรียบร้อย
ผมจะทำโดยสร้าง form HTML แบบง่ายๆ เอาไว้กรอก พอกดปุ่ม send แล้ว ก็ยิงออกไป

<script src="jquery.min.js"></script>
<body>
<h2>Test firebase send notification.</h2>
<table>
        <tr><td>Token target</td><td><input type="text" id="txt_token"></td></tr>
	<tr><td>Title       </td><td><input type="text" id="txt_title"></td></tr>
	<tr><td>Body        </td><td><input type="text" id="txt_body"></td></tr>
	<tr><td><button id="btn_send">Send</button></td></tr>
</table>

ได้ฟอร์มแบบง่ายแล้วๆ

11

เขียน javascript โดยใช้ jquery ดึงพวก ข้อมูลจาก text box ออกมา พร้อม handle พวก onClick ให้เรียบร้อย
จากนั้นก็ให้เรียก AJAX ส่ง POST ไป พร้อมข้อมูลที่แปลงเป็น json

<script type="text/javascript">
  $("#btn_send").click(function(){
    sendNotification();
  });

  function sendNotification(){
  	var token = $("#txt_token").val();
	var title = $("#txt_title").val();
	var body = $("#txt_body").val();
	var obj = {
		          "to": token,
		          "priority": "high",
		          "notification" : 
		            {"body":body, "title":title, "icon":"ic_launcher" ,"color" :"#f1c40f"}
		  }
  $.ajax({
    type: "post",
    url: "https://fcm.googleapis.com/fcm/send",
    contentType: "application/json;",
    headers: {
    	"Authorization": "key=AIzaSyB3NtpSTk9XC_KTB5CdtIc9FlUWp1OtRIg"
    },
    data: JSON.stringify(obj),
    success: function(data) {
      console.log("Success");
      alert("success");
    },
    error: function(data){
      console.log("error ");
      alert("error");
    }
  });
}
</script>

ลองรันดูเลยจ้า

a1

 

รู้จัก collapse_key

collapse_key คือ การจัดกลุ่มให้กับข้อมูลที่ส่งไป มาดูประโยชน์ของมันกัน สมมุติ เรามีแจ้งเตือนส่งไปหาลูกค้า ในระยะเวลา 1 อาทิตย์ ส่งไป 20 อัน แต่ดันมี user คนนึง 1 อาทิตย์ที่ผ่านมาไม่ได้เปิดมือถือเลย พึ่งจะมาเปิดวันนี้ เกิดอะไรขึ้น?

ถ้าเราไม่ตั้ง collapse_key ไว้ อาจจะเกิดเหตุการณ์แบบนี้กับ user คนนั้น ตู้มๆ โดนยิงรัวๆ จะไปวัดหรือไปโรงพยาบาลดี
ซึ่งมันก็ดี ถ้าแจ้งเตือนนั้นสำคัญทุกอัน หรือจำเป็นต้องให้ผู้ใช้คนนั้นเห็น

a2-1

 

แต่ถ้า มันไม่ได้สำคัญอะไรมากนัก เช่น แจ้งเตือนโปรโมชัน ซึ่งวันนี้อาจหมดอายุเลย ก็ไม่มีความจำเป็นที่ต้องแสดง
การตั้ง collapse_key จะเป็นการบอกว่าถ้ามีมีอันใหม่ แล้วอันเก่าในกลุ่มเดียวกัน (มี key เดียวกัน) แล้วยังไม่ได้ส่ง ให้ก็ส่งเฉพาะอันใหม่ เมื่อ user online

พอ User คนนั้น online ก็จะได้รับเฉพาะข้อมูลที่ ล่าสุดของแต่ละ collapse_key
12

 

ยิงทีละหลายๆ Token

ถ้าจะส่งแบบหลายๆ token ในคราวเดียวก็ใช้วิธีการเปลี่ยน key จาก to เป็น registration_ids ส่วน token ก็ใส่เป็น array ไป

{
    "registration_ids":["Token1","Token2","Token3"],
    "priority" : "high",
    "notification" : {
      "body" : "Starwar IX is coming",
      "title" : "Your favorie movie,
      "icon" : "ic_launcher"
    }
}

 

กำหนดอายุของข้อความ

เราสามารถกำหนดอายุของมันได้ โดยใช้ time_to_live

"time_to_live" : 3000

โดยค่าของมันมีหน่วย วินาที มีได้มากที่สุด  2,419,200 หรือประมาณ 4 อาทิตย์

เช่น

{
    "registration_ids":["Token1","Token2","Token3"],
    "priority" : "high",
    "notification" : {
      "body" : "great match!",
      "title" : "Portugal vs. Denmark",
      "icon" : "myicon"
    },
    "time_to_live" : 3000
}

อาจจะเหมาะสำหรับ การแจ้งเตือน event หรือโปรโมชันอะไรสักอย่าง ถ้าผู้ใช้ปิดเครื่อง แล้วมาเปิดอีกที แต่เวลาหมดอายุ ก็จะไม่ได้รับข้อความ ซึ่งก็จัดว่าถูกต้องแล้ว

 

ขอจบตอนที่ 2 นี้ก่อน บทความนี้ไม่ได้เกี่ยวกับ Android มากนัก แต่มันก็เชื่อมโยงกันนั่นแหละ
ตอนหน้าจะทำการส่งแบบ data แล้วก็ handle ใน Android จ้า

ขอบคุณครับ

(:

 

Android Code : ทำ Push Notification ด้วย Firebase Cloud Messaging ตอนที่ 3