การทำ push notification (ฟรี) บน mobile app ที่เขียนด้วย IONIC 1 สำหรับ android

เกริ่น

      สำหรับผู้ที่เขียน mobile app สิ่งสำคัญอีกอย่างหนึ่งที่ควรจะมีก็คือ PUSH NOTIFICAION หรือแจ้งเตือนไว้สำหรับ แจ้งข่าวสารต่างๆ ซึ่งมีวิธีทำหลากหลาย ในบทความนี้ ผมจะมานำเสนอ การทำ PUSH NOTIFICAION แบบง่าย โดยใช้บริการฟรีจาก onesignal ครับ ซึ่งรองรับการทำ push notfi ได้หลากหลาย device ไม่ว่า android  ios  ionic  หรือ web ซึ่งในตัวอย่างนี้ ผมจะใช้ push notifi ของ one signal กับ mobile app ที่ผมเขียนจาก IONIC น่ะครับ  ionic เป็น cross platfrom น่ะครับ คือ เขียนครั้งเดียวใช้ได้ทั้ง android  ios และ windows phone
 
   บริการของ one signal ฟรีทั้งหมดครับ

  สำหรับใครที่นึกไม่ออกว่า push notification บน mobile app คืออะไร ดูได้จากรูปข้างล่างนี้เลยครับ

 สำหรับภาพนี้เป็นภาพในส่วนของ app ที่  one signal รองรับน่ะครับ เห็นได้ว่ามีเยอะแยะ

แนวคิด

 เนื่องจากผมได้พัฒนา mobile app ด้วย ionic เป็นระบบตรวจสอบการแจ้งปัญหา และ inventory ให้กับที่ทำงาน เลยมีความคิดที่ว่าถ้ามีระบบแจ้งเตือนเวลา server หรือ network มีปัญหาได้ด้วยก็น่าจะดี  เพราะเคยเห็นพวก line หรือ facebook ที่มีระบบ notification แจ้งเตือนได้ จึงได้หาข้อมูลเพิ่มเติม ว่าจะทำได้อย่างไร  

   และจากบทความเก่าๆ ของผมได้เขียนบทความเรื่องการทำระบบแจ้งเตือน server network down แจ้งเตือนผ่าน Line application group โดยเขียน backend ด้วย python มาถึงตอนนี้ผมเลยมาประยุกต์ใช้ใน code เดิมของ python โดยแทนที่จะแจ้งเตือนผ่าน Line group อย่างเดียว ก็ให้แจ้งเตือนผ่าน mobile app ที่ผมเขียนขึ้นด้วย โดยเมื่อ server down มันก็จะส่ง push notifi มายังมือถือหรือ tablet ที่ติดตั้ง app ของเรา

รูปแสดงหน้าจอ push notifi เวลา server down

รูปแสดงหน้าจอ push notifi แสดง  user ใช้งาน internet 

ขอบคุณแหล่งที่มาของข้อมูล 

http://www.codebee.co.th/labs/%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99-onesignal-%E0%B8%AA%E0%B9%88%E0%B8%87-push-notification-2-%E0%B9%83%E0%B8%8A%E0%B9%89-php-%E0%B8%AA%E0%B9%88%E0%B8%87%E0%B8%82%E0%B9%89/

และ 

https://documentation.onesignal.com/

เครื่องมือที่ใช้ทำ push notification 

คือ https://onesignal.com  ครับ  ใช้ฟรีครับ  มี api รองรับหลายภาษา เช่น  PHP, PYTHON ,SHELL และอีกมากมาย

มาลงมือทำเลยครับ

1. สมัครบริการ push ฟรี ได้ที่ https://onesignal.com (ควรสมัครด้วยบัญชี google เพราะไม่ต้องรอยืนยัน)  ทำการสมัครสมาชิกและยืนยันอีเมล 

  หลังจากสมัครเรียบร้อย ให้สร้าง NEW PROJECT

2.สมัคร google developer

   สำหรับ Android จะใช้ Google API Key วิธีสร้างคีย์ให้ไปที่ Google Developer Console และทำการสร้าง Google Project และเลือก google cloud messaging จากนั้นหน้าจอจะไปที่  https://console.firebase.google.com

ให้ทำการ create new project firebase 

3. COPY  GOOGLE API KEY มาใส่ใน https://onesignal.com/apps ที่เราสร้างขึ้นใน ข้อ 1 

4.ที่ https://onesignal.com/apps เลือก sdk ที่เราใช้อยู่เช่น  IONIC

5.เข้า command line แล้วไปที่ project ionic ของเรา สั่ง ionic plugin add onesignal-cordova-plugin

6.copy code นี้ ไปใส่ใน project ของเรา ที่   /www/js/app.js

// Add the following to your existing ready fuction.

.run(function($ionicPlatform) {

  $ionicPlatform.ready(function() {

 

  var notificationOpenedCallback = function(jsonData) {

    console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));

  };

  window.plugins.OneSignal

    .startInit("YOUR_APPID")   //เอามาจาก onsignal

    .handleNotificationOpened(notificationOpenedCallback)

    .endInit();

   

})

เอา app id จาก onesignal project มาใส่ใน app.js

7. Build project  เป็น apk ด้วยคำสั่ง ionic  build android ซึ่งไฟล์จะอยู่ใน  ชื่อโปรเจ็ค\platforms\android\build\outputs\apk\ ชื่อ android-debug.apk

 จากนั้นให้ทำไฟล์ที่ได้ android-debug.apk  ติดตั้งลงบนมือถือแล้ว run  จากนั้นให้กดปุ่ม check user subscribe ถ้าขึ้นสีเขียว แสดงว่าผ่าน สามารถใช้งานได้ ถ้ายังขึ้นสีแดงแสดงว่ายังใช้งานไม่ได้น่ะครับ 

8.ทดสอบส่งข้อความ push notification จาก https://onesignal.com แล้วเลือกชื่อโปรเจ็คที่เราสร้างใน ข้อ 1 แล้วเลือก new message ทดลองส่งข้อความ  ซึ่งถ้าเราเลื่อนไปล่างๆ จะมี option ในการส่งมามาก เช่น ส่งรูปได้ด้วย หรือส่ง url เมื่อกด ก็จะไปตาม url ที่เราตั้งค่าไว้

หน้าจอให้กรอกข้อความ ถ้าเราส่งผ่านจากหน้าเว็บของ one signal เอง จะสามารถใส่รูป logo หรือให้เวลากดแล้วไปที่ url ไหน ก็ได้ครับ แต่ถ้าส่งผ่าน php api จะมีแค่ข้อความเพียงอย่างเดียว

หน้าจอผลลัพธ์ในการส่งครับ

9.หน้าจอผลลัพธ์การส่งข้อความที่มือถือของเรา

10.การประยุกต์ใช้ API ด้วย PHP  เพื่อใช้ในการทดสอบส่งข้อความ

ทดลองใช้งาน  http://localhost/push.php?message=ทดสอบการส่งข้อความ

 อย่าลืมไปเปิดการใช้งาน php.ini ตรง php_curl ด้วยน่ะครับ

    ** ให้ copy  app-id กับ REST API KEY จาก onesignal->project-> app setting-> key & id  ไปใส่ใน code php ครับ

<?php

$message = $_REQUEST["message"];  รับค่า

$API_URL = "https://onesignal.com/api/v1/notifications";

$APP_ID = '9xxxxx-xxx2-xxxxc-xxe-xxx7';    //ดูจาก onesignal  project ->app setting keys & id  ของเรา

$API_KEY = 'Nxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';  //ดูดูจาก onesignal  project ->app setting keys & id  ของเรา

//$message = 'xxxxxxxxx'; // ข้อความที่เราต้องการส่ง

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $API_URL); 

$headers = array(

    'Content-type: application/json',

    'Authorization: Basic '.$API_KEY,

);

curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);

curl_setopt($ch, CURLOPT_HEADER, FALSE);

curl_setopt($ch, CURLOPT_POST, TRUE);

curl_setopt($ch, CURLOPT_POSTFIELDS, "{\"app_id\":\"".$APP_ID."\",

\"isIos\": true,

\"isAndroid\":true,

\"included_segments\": [\"All\"],

\"contents\": {\"en\":\"".$message."\"}}");

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

$response = curl_exec($ch);

curl_close($ch);

var_dump($response);

?>

*** สำหรับบทความนี้จะเขียนเกี่ยวกับการทำ push notification อย่างเดียวน่ะครับ
    ส่วนบทความที่เขียนเกี่ยวกับการ monitor server ด้วย python อยู่ที่นี่ครับ http://havespirit.blogspot.com/2015/10/send-message-to-line-when-server-down.html   โดยผมเอา code เดิมที่เขียนด้วย python มาประยุกต์ใช้ โดยเวลา server down มันจะ push notifi มายังมือถือเรา

  โดย onesignal สามารถเลือกส่งการแจ้งเตือน ว่าจะส่งให้ใครบ้างก็ได้ครับ ไม่จำเป็นจะต้องส่งไปยังคนที่ติดตั้ง app ทั้งหมด

*** เพิ่มเติมน่ะครับ google developer console ยอมให้สร้างได้แค่ 3 project