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

React Native ส่ง Notification ด้วย Onesignal [Android]

codebee
React-Native-ส่ง-Notification-ด้วย-Onesignal-3

React-Native-ส่ง-Notification-ด้วย-Onesignal-3

<h2>React Native ส่ง Notification ด้วย Onesignal<&sol;h2>&NewLine;<p><strong>React Native ส่ง Notification ด้วย Onesignal<&sol;strong><&sol;p>&NewLine;<p><strong>Onesignal<&sol;strong> คือบริการ Push Notification หรือตัวกลางในการส่งข้อมูลไปยังเครื่อง Client ที่สามารถทำงานได้แบบ Crossplatform ทั้งบน Website ระบบปฏิบัติการทั้ง iOS และ Android สามารถทำงานได้ในหลากหลายเทคโนโลยี คำว่าหลากหลายเทคโนโลยี ความหมายคือ ตัว Onesignal ได้ถูกพัฒนา SDK ให้สามารถนำไปใช้ได้กับหลากหลายเครื่องมือที่ใช้ในการพัฒนา เช่น Java&comma; Objective-C&comma; Swift&comma; Unity&comma; Ionic&comma; React Native และ อื่น ๆ <&excl;--more--><&sol;p>&NewLine;<p><strong>React Native<&sol;strong> เป็น JavaScript Framework ตัวนึงที่พัฒนาโดย Facebook ซึ่งจะช่วยให้เราสามารถ เขียน Mobile Application แบบ Cross platform ได้ โดยจุดเด่นของ React Native ระดับ Performance ที่ใกล้เคียงกับการพัฒนาแบบ Native และเป็น Native UI ทั้ง iOS และ Android<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;ในบทความนี้เราจะทดสอบการใช้งาน Onesignal กับ React Native<&sol;p>&NewLine;<h4>เริ่มติดตั้งและสร้างโปรเจค React Native<&sol;h4>&NewLine;<p>สำหรับขั้นตอนการติดตั้ง React Native และเครื่องมือต่าง ๆ ที่จำเป็นในการพัฒนา แนะนำว่าให้เข้าไปดูที่เว็บไซต์หลักเลย https&colon;&sol;&sol;facebook&period;github&period;io&sol;react-native&sol; ในบทความนี้จะอธิบายเพียงคร่าว ๆ เท่านั้น <&sol;p>&NewLine;<ul>&NewLine;<li>1&period; เปิด Terminal และใช้คำสั่งสำหรับติดตั้ง React Native&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;npm install -g react-native-cli &NewLine;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>2&period; ใช้คำสั่งด้านล่างเพื่อสร้าง React Native Project ในที่นี้ตั้งชื่อว่า &&num;8220&semi;HelloOnesignal&&num;8221&semi; จากนั้นรอจนกว่าคำสั่งจะทำงานเสร็จเรียบร้อย&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;react-native init HelloOnesignal &NewLine;<&sol;pre>&NewLine;<p>ถ้าไม่มีอะไรผิดพลาดเราจะได้ React Native ไว้ที่ root ของเครื่องเลย ตัวอย่างดังภาพด้านล่าง<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2018&sol;06&sol;React-Native-ส่ง-Notification-ด้วย-Onesignal-1&period;jpg" alt&equals;"React-Native-ส่ง-Notification-ด้วย-Onesignal-1" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<li>3&period; ทำการติดตั้ง Onesignal sdk โดยการใช้คำสั่ง ดังนี้<br &sol;>&NewLine;&&num;8211&semi; ติดตั้ง react-native-onesignal คำสั้ง <&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >npm install --save react-native-onesignal<&sol;pre>&NewLine;<p>&&num;8211&semi; เชื่อมต่อ ไลบรารี่ ด้วยคำสั่ง<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >react-native link react-native-onesignal<&sol;pre>&NewLine;<li>4&period; หลังจากที่เราสร้างโปรเจค React Native และติดตั้ง Onesignal SDK เสร็จเรียบร้อยแล้ว ขั้นตอนต่อไปให้สร้าง Onesignal Project และเลือกไปที่ React Native SDK ทำทุกขั้นตอนให้ถูกต้อง จนได้ App ID และ REST API KEY มา สามารถดูตัวอย่างได้ที่ ใช้งาน <a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;ใช้งาน-onesignal-ส่ง-push-notification&sol;" target&equals;"&lowbar;blank">OneSignal ส่ง Push Notification<&sol;a><&sol;li>&NewLine;<li>5&period; ไปที่โปรเจคและ android -> app -> src -> main -> AndroidManifest&period;xml เพิ่มข้อมูลลงไปดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;uses-permission android&colon;name&equals;"android&period;permission&period;ACCESS&lowbar;COARSE&lowbar;LOCATION"&sol;&gt&semi; &NewLine;&lt&semi;uses-permission android&colon;name&equals;"android&period;permission&period;ACCESS&lowbar;FINE&lowbar;LOCATION"&sol;&gt&semi; &NewLine;&lt&semi;activity android&colon;launchMode&equals;"singleTop"&gt&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>6&period; ไปที่ android&sol;app&sol;build&period;gradle เพิ่มคำสั่งด้านล่างไว้บนสุดของไฟล์&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >buildscript &lbrace; &NewLine; &Tab;repositories &lbrace; &NewLine; &Tab;maven &lbrace; url 'https&colon;&sol;&sol;plugins&period;gradle&period;org&sol;m2&sol;' &rcub; &sol;&sol; Gradle Plugin Portal &NewLine; &Tab;&rcub; &NewLine; &Tab;dependencies &lbrace; &NewLine; &Tab;classpath 'gradle&period;plugin&period;com&period;onesignal&colon;onesignal-gradle-plugin&colon;&lbrack;0&period;10&period;0&comma; 0&period;99&period;99&rsqb;' &NewLine; &Tab;&rcub; &NewLine; &rcub; &NewLine; &NewLine; plugins &lbrace; &NewLine; &Tab;id 'com&period;onesignal&period;androidsdk&period;onesignal-gradle-plugin' version '0&period;8&period;1' &NewLine; &rcub; &NewLine; apply plugin&colon; 'com&period;onesignal&period;androidsdk&period;onesignal-gradle-plugin' &NewLine; repositories &lbrace; &NewLine; &Tab;maven &lbrace; url 'https&colon;&sol;&sol;maven&period;google&period;com' &rcub; &NewLine; &rcub;<&sol;pre>&NewLine;<&sol;li&NewLine;&NewLine;&NewLine;<li>6&period; แก้ไข compileSdkVersion และ buildToolsVersion อย่างน้อย API ระดับ 26 หรือสูงกว่า<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;compileSdkVersion 26 &NewLine;buildToolsVersion "26&period;0&period;0"<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>7&period; เพิ่ม dependencies ดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >compile 'com&period;onesignal&colon;OneSignal&colon;&lbrack;3&period;9&period;1&comma; 3&period;99&period;99&rsqb;' &NewLine;compile 'com&period;google&period;android&period;gms&colon;play-services-maps&colon;8&period;1&period;0' &NewLine;compile 'com&period;google&period;android&period;gms&colon;play-services-plus&colon;8&period;1&period;0'<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>8&period; ไปที่ android&sol;build&period;gradle เพิ่มคำสั่งที่ repositories ดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >mavenCentral&lpar;&rpar; &NewLine;maven &lbrace; &NewLine; url 'https&colon;&sol;&sol;maven&period;google&period;com' &NewLine;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>9&period; ทดสอบใช้งานด้วยคำสั่ง&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >react-native run-android <&sol;pre>&NewLine;<p>ถ้าทุกอย่างปกติดีให้ Build APK ด้วยคำสั่ง<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >cd android &amp&semi;&amp&semi; gradlew assembleRelease<&sol;pre>&NewLine;<p>จากนั้นให้ติดตั้งไฟล์ APK ลงเครื่องมือถือ หลังจากติดตั้งแล้วให้เข้าระบบที่ onesignal&period;com และทดสอบสร้าง message ส่งข้อมูลดู ถ้าไม่มีอะไรผิดพลาด ก็จะสามารถส่ง Push Notification ได้ปกติ ให้ตรวจสอบว่ามี device token เข้าไปที่ระบบหลังบ้านหรือไม่ และตรวจสอบก่อนการส่งว่ามี Recipient หรือป่าว<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2018&sol;06&sol;React-Native-ส่ง-Notification-ด้วย-Onesignal-4&period;jpg" alt&equals;"React-Native-ส่ง-Notification-ด้วย-Onesignal-3" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;

Exit mobile version