Site icon บริษัท โค๊ดบี จำกัด

ใช้งาน OneSignal ส่ง Push Notification

codebee

<h3>ใช้งาน OneSignal ส่ง Push Notification<&sol;h3 >&NewLine;<&sol;br><br &sol;>&NewLine;Push Notification คือรูปแบบการส่งข้อความแบบ Remote Message ไปที่โมบายแอพพลิเคชั่นที่ถูกติดตั้งไว้ที่เครื่องโทรศัพท์มือถือ ซึ่งตัวข้อความสามารถทำได้หลาย platform ทั้ง iOS&comma; Android หรือ Window Phone รูปแบบการส่งข้อความแบบนี้ เป็นจุดเด่น มีประโยชน์และมีความสำคัญเป็นอย่างมาก เหมาะที่จะนำไปใช้กับทุก ๆ ประเภทแอพพลิเคชั่น<&excl;--more--><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;OneSignal เป็นบริการ Cross Platform Push Notification ทำให้เราสามารถส่งข้อความ<br &sol;>&NewLine;ไปได้ทั้ง iOS&comma; Android&comma; Window Phone รวมถึง Notification บน Browser<br &sol;>&NewLine;หลาย ๆ feature เราอาจจะหาไม่ได้ใน Native Plugins ตัวอื่น ๆ แต่หาได้ใน OneSignal<br &sol;>&NewLine;ตัวอย่างเช่น Badge Number ใน Android สำหรับ OneSignal แล้วมีให้ใช้งานแบบ Easy Customize<br &sol;>&NewLine;และที่สำคัญใช้ฟรี 100&percnt; ไม่มีค่าใช้จ่าย <&sol;p>&NewLine;<h4>1&period; สมัครสมาชิกเพื่อใช้งาน<&sol;h4>&NewLine;<p>เข้าไปที่ <a href&equals;"https&colon;&sol;&sol;onesignal&period;com" target&equals;"&lowbar;blank">https&colon;&sol;&sol;onesignal&period;com<&sol;a> ทำการสมัครสมาชิกและยืนยันอีเมล<&sol;p>&NewLine;<h4>2&period; ตั้งค่าให้ใช้งาน iOS และ Android<&sol;h4 >&NewLine;&&num;8211&semi; สำหรับ Android จะใช้ Google API Key วิธีสร้างคีย์ให้ไปที่ <a href&equals;"https&colon;&sol;&sol;console&period;developers&period;google&period;com" target&equals;"&lowbar;blank">Google Developer Console<&sol;a><br &sol;>&NewLine;ทำการสร้าง Google Project และก๊อปปี้ API key มาใส่ในช่อง Google Server API Key<br &sol;>&NewLine;<img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;onesignal-push-notification-1&period;png" alt&equals;"ใช้งาน OneSignal ส่ง Push Notification" &sol;><&sol;p>&NewLine;<p>&&num;8211&semi; สำหรับ iOS จะใช้ไฟล์ &period;p12 ทั้งแบบ Development และ Production วิธีสร้างให้ดูจากกระทู้นี้ <a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;วิธีสร้างไฟล์-pem-สำหรับใช&sol;" target&equals;"&lowbar;blank">วิธีสร้างไฟล์ &period;pem สำหรับ iOS Push Notification<&sol;a><br &sol;>&NewLine; เสร็จแล้วก็อัพโหลดขึ้นไปทั้ง 2 ไฟล์ใส่รหัสผ่าน กดปุ่ม save<br &sol;>&NewLine;<img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;onesignal-push-notification-2&period;png" alt&equals;"ใช้งาน OneSignal ส่ง Push Notification" &sol;><&sol;p>&NewLine;<p>< h4 >ติดตั้ง OneSignal Plugin ใน UNITY<&sol;h4 >&NewLine;&&num;8211&semi; ดาวน์โหลด onesignal unity plugin ที่ <a href&equals;"https&colon;&sol;&sol;github&period;com&sol;OneSignal&sol;OneSignal-Unity-SDK&sol;releases" target&equals;"&lowbar;blank">onesignal plugin download<&sol;a><br &sol;>&NewLine;&&num;8211&semi; สร้าง Unity project และดับเบิ้ลคลิ๊กที่ตัว plugin ที่ดาวน์โหลดมา &lpar; ดูว่าเราใช้ unity4&period;xx หรือ unity5&period;xx &rpar;<br &sol;>&NewLine;&&num;8211&semi; เข้าไปแก้ AndroidManifest&period;xml ที่ Assets&sol;Plugins&sol;Android&sol;OneSignalConfig&sol;AndroidManifest&period;xml<br &sol;>&NewLine; โดยให้เปลี่ยน &dollar;&lbrace;manifestApplicationId&rcub; เป็น Bundle id ของเรา<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&dollar;&lbrace;manifestApplicationId&rcub;<&sol;pre>&NewLine;<p> ก็จะได้โค๊ด xml ประมาณนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;manifest xmlns&colon;android&equals;"http&colon;&sol;&sol;schemas&period;android&period;com&sol;apk&sol;res&sol;android" &NewLine; package&equals;"com&period;onesignal&period;onesignalsdk" &NewLine; android&colon;versionCode&equals;"1" &NewLine; android&colon;versionName&equals;"1&period;0" &gt&semi; &NewLine; &NewLine; &lt&semi;permission android&colon;name&equals;"com&period;codebee&period;tustpush&period;permission&period;C2D&lowbar;MESSAGE" android&colon;protectionLevel&equals;"signature" &sol;&gt&semi; &NewLine; &lt&semi;uses-permission android&colon;name&equals;"com&period;codebee&period;tustpush&period;permission&period;C2D&lowbar;MESSAGE" &sol;&gt&semi; &NewLine; &lt&semi;application&gt&semi; &NewLine; &lt&semi;receiver &NewLine; android&colon;name&equals;"com&period;onesignal&period;GcmBroadcastReceiver" &NewLine; android&colon;permission&equals;"com&period;google&period;android&period;c2dm&period;permission&period;SEND" &gt&semi; &NewLine; &lt&semi;intent-filter&gt&semi; &NewLine; &lt&semi;action android&colon;name&equals;"com&period;google&period;android&period;c2dm&period;intent&period;RECEIVE" &sol;&gt&semi; &NewLine; &lt&semi;category android&colon;name&equals;"com&period;codebee&period;tustpush" &sol;&gt&semi; &NewLine; &lt&semi;&sol;intent-filter&gt&semi; &NewLine; &lt&semi;&sol;receiver&gt&semi; &NewLine; &lt&semi;&sol;application&gt&semi; &NewLine;&lt&semi;&sol;manifest&gt&semi;<&sol;pre>&NewLine;<p>&&num;8211&semi; เปิดไฟล์ตัวอย่างของ onesignal ไปที่ Assets&sol;OneSignal&sol;Example&sol;GameControllerExample&period;cs<br &sol;>&NewLine; แก้ไข OneSignal&period;Init โดยพารามิเตอร์ตัวแรกให้เป็น OneSignal App ID ที่เราสมัครสมาชิกไว้<br &sol;>&NewLine; และตัวที่สองเป็น Google Sender ID ซึ่งได้จาก <a href&equals;"https&colon;&sol;&sol;console&period;developers&period;google&period;com" target&equals;"&lowbar;blank">Google Project<&sol;a><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >OneSignal&period;Init&lpar;"OneSignal App ID"&comma; "Google Sender ID"&comma; HandleNotification&rpar;&semi;<&sol;pre>&NewLine;<p>&&num;8211&semi; เสร็จแล้วให้ลอง Build apk &lpar;android &rpar; และ ipa &lpar;iOS&rpar; เปิดแอพขึ้นมาเพื่อทำการ register Push Token<br &sol;>&NewLine; <img width&equals;"300" src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;onesignal-push-notification-3&period;jpeg" alt&equals;"ใช้งาน OneSignal ส่ง Push Notification" &sol;><&sol;p>&NewLine;<p>&&num;8211&semi; เข้าสู่ระบบที่ <a href&equals;"https&colon;&sol;&sol;www&period;onesignal&period;com" target&equals;"&lowbar;blank">onesignal&period;com<&sol;a><br &sol;>&NewLine; เลือกแอพพลิเคชั่นที่เราสร้างไว้ กดปุ่ม New Message ใส่ Title และ Content กด Preview และ Send<br &sol;>&NewLine; <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;onesignal-push-notification-4&period;png" alt&equals;"ใช้งาน OneSignal ส่ง Push Notification" &sol;><br &sol;>&NewLine; <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;onesignal-push-notification-5&period;png" alt&equals;"ใช้งาน OneSignal ส่ง Push Notification" &sol;><&sol;p>&NewLine;<p>&&num;8211&semi; ถ้าไม่มีอะไรผิดพลาด ทั้งการ configuration ในเว็บของ onesignal และการติดตั้ง onesignal plugin<br &sol;>&NewLine;เราก็จะได้รับ notification<br &sol;>&NewLine;<img width&equals;"300" src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;onesignal-push-notification-6&period;jpeg" alt&equals;"ใช้งาน OneSignal ส่ง Push Notification" &sol;><br &sol;>&NewLine;<img width&equals;"300" src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;onesignal-push-notification-7&period;jpeg" alt&equals;"ใช้งาน OneSignal ส่ง Push Notification" &sol;><&sol;p>&NewLine;<p>เราสามารถตั้งค่ารูปแบบการส่งได้ ทั้งรูปภาพ ข้อความ action ของการคลิก ตรวจสอบสถานะการส่ง<br &sol;>&NewLine;ส่งไปแล้วมีการคลิกเข้ามาดูหรือป่าว ซึ่ง onesignal มีการรายงานสถิติค่อนข้างละเอียด<&sol;p>&NewLine;<p><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;onesignal-push-notification-8&period;png" alt&equals;"ใช้งาน OneSignal ส่ง Push Notification" &sol;><&sol;p>&NewLine;<p>สำหรับการใช้งาน onesignal นั้น เราที่ลองใช้งานดู ค่อนข้างจะสะดวกสบายครับ<br &sol;>&NewLine;เพราะมี documentation ให้เกือบทุกภาษา และแทบจะเกือบทุก Platform<br &sol;>&NewLine;มีรายละเอียดตั้งแต่การติดตั้ง และหากเราติดตั้งไม่ได้ เขามีบริการติดตั้งให้อีก<br &sol;>&NewLine;แถมยังส่งเมลมาถามว่าเราติดปัญหาอะไรอยู่เรื่อย ๆ อะไรจะใจดีปานนั้น<&sol;p>&NewLine;<p>สามารถเข้าไปอ่านข้อมูลเพิ่มเติมได้ที่ <a href&equals;"https&colon;&sol;&sol;documentation&period;onesignal&period;com&sol;docs&sol;" target&equals;"&lowbar;blank">https&colon;&sol;&sol;documentation&period;onesignal&period;com&sol;docs&sol;<&sol;a><&sol;p>&NewLine;

Exit mobile version