แจกตัวอย่างโค้ด ionic material รองรับการตั้งค่า Push Notification

30 November 2016 เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee

ionicframework ionicmaterial

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionicframework ionicmaterial

ดูแล้ว 10,183 ครั้ง

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

โค้ด app ionic material ในโฟลเดอร์ www มาให้ดาวน์โหลดไปใช้เป็นแนวทาง

โดยโค้ดตัวปรับแต่ง ได้จัดในส่วนของเมนูด้านซ้าย มีไอคอนกำกับ โดยมีการใช้งาน

icon จาก Font Awesome สามารถดูรายการ icon เพิ่มเติมได้ที่ http://fontawesome.io/icons/

มีการเพิ่มส่วนของหน้าตั้งค่าระบบ โดยในที่นี้เพิ่มมาแค่ การเปิด และปิดการับข้อความ push

โดยมีการจัดเก็บข้อมูลลงใน database ด้วย SQLite

plugin ต่างๆ ที่จำเป็นให้ดูบทความที่ผ่านมาเป็นแนวทาง

รายชื่อ plugin ที่ติดตั้งแล้วทั้งหมด (จากตัวทดสอบ)

com.phonegap.plugins.nativesettingsopener 1.2 "Native settings"
cordova-plugin-actionsheet 2.3.1 "ActionSheet"
cordova-plugin-app-event 1.2.0 "Application Events"
cordova-plugin-battery-status 1.1.2 "Battery"
cordova-plugin-camera 2.1.1 "Camera"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.4 "Console"
cordova-plugin-contacts 2.0.1 "Contacts"
cordova-plugin-device 1.1.3 "Device"
cordova-plugin-device-motion 1.2.2 "Device Motion"
cordova-plugin-device-orientation 1.0.4 "Device Orientation"
cordova-plugin-dialogs 1.2.1 "Notification"
cordova-plugin-file 4.3.0 "File"
cordova-plugin-file-transfer 1.5.1 "File Transfer"
cordova-plugin-geolocation 2.1.0 "Geolocation"
cordova-plugin-globalization 1.0.4 "Globalization"
cordova-plugin-inappbrowser 1.3.0 "InAppBrowser"
cordova-plugin-media 2.2.0 "Media"
cordova-plugin-media-capture 1.2.0 "Capture"
cordova-plugin-network-information 1.2.1 "Network Information"
cordova-plugin-spinner-dialog 1.3.1 "SpinnerDialog"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-themeablebrowser 0.2.17 "ThemeableBrowser"
cordova-plugin-vibration 2.1.2 "Vibration"
cordova-plugin-whitelist 1.2.2 "Whitelist"
cordova-plugin-x-socialsharing 5.1.3 "SocialSharing"
cordova-plugin-x-toast 2.5.2 "Toast"
cordova-sqlite-storage 1.4.8 "Cordova sqlite storage plugin"
phonegap-plugin-push 1.8.4 "PushPlugin"

แต่ที่ใช้ใน app ที่ได้ใช้งานไปแล้ว

com.phonegap.plugins.nativesettingsopener 1.2 "Native settings"
cordova-plugin-actionsheet 2.3.1 "ActionSheet"
cordova-plugin-app-event 1.2.0 "Application Events"
cordova-plugin-camera 2.1.1 "Camera"
cordova-plugin-device 1.1.3 "Device"
cordova-plugin-dialogs 1.2.1 "Notification"
cordova-plugin-file 4.3.0 "File"
cordova-plugin-geolocation 2.1.0 "Geolocation"
cordova-plugin-network-information 1.2.1 "Network Information"
cordova-plugin-spinner-dialog 1.3.1 "SpinnerDialog"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-themeablebrowser 0.2.17 "ThemeableBrowser"
cordova-plugin-vibration 2.1.2 "Vibration"
cordova-plugin-whitelist 1.2.2 "Whitelist"
cordova-plugin-x-socialsharing 5.1.3 "SocialSharing"
cordova-plugin-x-toast 2.5.2 "Toast"
cordova-sqlite-storage 1.4.8 "Cordova sqlite storage plugin"
phonegap-plugin-push 1.8.4 "PushPlugin"

ในไฟล์ตัวอย่าง จะมีส่วนของโค้ดการใช้งาน push notification ในตอนที่ผ่านมา

รหัส SENDER_ID ในตัวอย่างให้เปลี่ยนเป็นรหัสของเราเอง และจะมาอธิบาย

การใช้งานส่วนของข้อความ push เพิ่มเติมในบทความต่อไป โดยจะกล่าวถึงการเก็บค่า

การตั้งค่ารับข้อความ push ใน database

ดาวน์โหลดโค้ดตัวอย่างโฟลเดอร์ www ได้ที่ https://goo.gl/uF9n8d

ดาวน์โหลด apk ไฟล์ตัวอย่างไปทดสอบที่เครื่องได้ที่ https://goo.gl/H6hYP0

ตัวอย่างรูป app

เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-06-2017

ดูคำอธิบายได้ที่บทความ

อธิบายโค้ด เพิ่มหน้าตั้งค่าระบบใน app เปิดปิด Push Notification

https://www.ninenik.com/content.php?arti_id=752 via @ninenik

เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 28-06-2017

เราสามารถใช้คำสั่งต่อไปนี้ เพื่อดูว่าโปรเจ็ค app ของเรามี plugin อะไรติดตั้ง

อยู่แล้วบ้างโดยใช้คำสั่ง

phonegap plugin ls

นี่คือรายการ plugin ค่าเริ่มเต้นที่ cordova เพิ่มให้เราเมื่อตอนทำคำสั่ง build android

cordova-plugin-battery-status 1.1.2 "Battery"
cordova-plugin-camera 2.1.1 "Camera"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.7 "Console"
cordova-plugin-contacts 2.0.1 "Contacts"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-device-motion 1.2.5 "Device Motion"
cordova-plugin-device-orientation 1.0.7 "Device Orientation"
cordova-plugin-dialogs 1.2.1 "Notification"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-transfer 1.5.1 "File Transfer"
cordova-plugin-geolocation 2.1.0 "Geolocation"
cordova-plugin-globalization 1.0.7 "Globalization"
cordova-plugin-inappbrowser 1.3.0 "InAppBrowser"
cordova-plugin-media 2.2.0 "Media"
cordova-plugin-media-capture 1.2.0 "Capture"
cordova-plugin-network-information 1.2.1 "Network Information"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-vibration 2.1.5 "Vibration"
cordova-plugin-whitelist 1.2.2 "Whitelist"

ค่าข้างต้นจะเปลี่ยนไปตามเวอร์ชั่นของ cordova ในขณะนั้น

นี่คือ plugin เพิ่มเติม ที่เราสามารถ เพิ่มเข้ามาใน app ได้ รายการที่ * ด้านหน้า

คือ plugin ที่เรามีการใช้งานภายในไฟล์ app ตัวอย่างของเรา ควรติดตั้ง plugin ที่มี * ด้านหน้า

เพื่อให้ไฟล์ app ตัวอย่างเมื่อ build แล้ว ทำงานได้ถูกต้อง

com.phonegap.plugins.nativesettingsopener 1.2 "Native settings"
* cordova-plugin-actionsheet 2.3.1 "ActionSheet"
cordova-plugin-app-event 1.2.0 "Application Events" // ตัวนี้ไม่ได้ใช้งาน ใช้กับ ios
* cordova-plugin-spinner-dialog 1.3.1 "SpinnerDialog"
* cordova-plugin-themeablebrowser 0.2.17 "ThemeableBrowser"
* cordova-plugin-x-socialsharing 5.1.3 "SocialSharing"
* cordova-plugin-x-toast 2.5.2 "Toast"
* cordova-sqlite-storage 1.4.8 "Cordova sqlite storage plugin"
phonegap-plugin-push 1.8.4 "PushPlugin"

สามารถใช้คำสั่งเพิ่ม plugin ด้วยคำสั่งเรียงตามลำดับ แต่ละรายการดังนี้

cordova plugin add https://github.com/selahssea/Cordova-open-native-settings.git
cordova plugin add cordova-plugin-actionsheet
cordova plugin add cordova-plugin-app-event
cordova plugin add cordova-plugin-spinner-dialog
cordova plugin add cordova-plugin-themeablebrowser
cordova plugin add cordova-plugin-x-socialsharing
cordova plugin add cordova-plugin-x-toast
cordova plugin add cordova-sqlite-storage

ส่วนของ plugin ถ้ามีการใช้งาน

เราต้องกำหนด SENDER_ID ในขั้นตอนการเพิ่ม plugin ด้วย

cordova plugin add phonegap-plugin-push --variable SENDER_ID="XXXXX"

อ่านเพิ่มเติมที่หัวข้อ

ประยุกต์ใช้งาน Push Notification plugin ใน ionic metarial

https://www.ninenik.com/content.php?arti_id=749 via @ninenik

กรณีเราไม่ต้องการ plugin สามารถทำการลบออกได้

เมื่อไม่ได้ใช้งาน ด้วยคำสั่ง ดังนี้ สมมติต้องการลบ plugin ชื่อ app event

cordova plugin rm cordova-plugin-app-event
// หรือ
cordova plugin remove cordova-plugin-app-event

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

เนื้อหาที่เกี่ยวข้อง

27 Oct
2016

โหลดฟรี ionic material ตัวปรับแต่ง สำหรับประยุกต์เพิ่มเติม อ่าน 5,794
ionic material ตัวปรับแต่งที่นำมาให้ดาวน์โหลดนี้ เป็นตัวเดียวกันใน บทความ
26 Nov
2016

เตรียมพร้อม ใช้งาน Push Notification ใน ionic material app อ่าน 7,236
สำหรับเนื้อหาในตอนนี้ จะเป็นการแนะนำการเตรียมพร้อมสำหรับ การใช้งาน
27 Nov
2016

ประยุกต์ใช้งาน Push Notification plugin ใน ionic metarial อ่าน 9,433
จากเนื้อหาในตอนที่แล้ว เราได้เตรียมความพร้อมในเบื้องต้นสำหรับใช้งาน Push
กำลังอ่านเนื้อหานี้อยู่

30 Nov
2016

แจกตัวอย่างโค้ด ionic material รองรับการตั้งค่า Push Notification อ่าน 10,183
สำหรับในเนื้อหาตอนนี้ จะไม่ได้ลงรายละเอียดเกี่ยวกับโค้ดเพิ่มเติม แต่จะนำตัวอย
02 Dec
2016

อธิบายโค้ด เพิ่มหน้าตั้งค่าระบบใน app เปิดปิด Push Notification อ่าน 6,397
เนื้อหาต่อไปนี้เป็นแนวทางสำหรับการสร้างหน้า app เพื่อใช้ในการตั้งค่าต่างๆ ในร

Tags:: ionicframework ionicmaterial

URL สำหรับอ้างอิง

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน