Scribd
Unggah
282 tayangan42 halaman

React Native Push Notification

Diunggah oleh

Roman
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF atau baca online di Scribd
282 tayangan42 halaman

React Native Push Notification

Diunggah oleh

Roman
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF atau baca online di Scribd
digital book Prawito Hudoro < . a a React Native Push Notification Step by step implementasi push notification di dalam aplikasi React Native (Khusus Android) A React Native Push Notification Daftar isi buku Setiap saya mendapatkan sebuah project mobile app, hampir di pastikan kesemuanya meminta untuk disediakan ftur push notification. Memang fitur push notification ini send bisa dikatakan bagian yang tidak dapat kita pisahkan dari pembuatan sebuah mobile app. Karena, persepsi orang terhadap mobile app adalah keuntungannya untuk bisa mengjrimkan push notification. Padahal push notification ini hanya sebagian kecl saa ftur yang disediakan olen mobile app. Masih banyak fitur lainnya yang disediakan oleh mobile app itu sendi Mengingat begitu banyaknya permintaan ftur push notification dalam sebuah aplikasi mobile maka saya mencoba menyampaikan fundamental push notification di aplikasi mobile React Native. Dalam buku ini saya akan mencoba mengupas tuntas terkait apa ity push notification, contoh-contoh push notification hingga bagaimana cara setup step by step nya di dalam aplikasi mobile React Native. Mari kita mula Apa itu push notification? ‘Sebelum kita mempelejarilebin dalam tentang push notification, hal pertama yang perlu kita ketahul adalah “apa itu push notification?" Push notification adalah pesan singkat yang user terima di dalam device mereka. Blasanya push notification ini muncul taninhan tapi int ‘Sretacohssagingiersion = °0! 1) 3 , ‘selanjutnya di rsaecro0e/anros/app/se/asnyanrastanstestumt mari tambahkan code berikut: Kemudian di dalam application tambahkan juga aesdiarouree-eator/naste/> cs or Ganosdtcalor/ ane) Yo tz 8 standard color => tae="con Renta acon QUA FuRON"> ‘Sehingga keseluruhan file AndroidManifest saya menjadi tage=con usa Sap" cs or fanasaolar (ame) fo ie 8 standard color => ‘0a jangan lupa, Kalin juga perlu membuat variable colors nya disinisvsro/ap/areasn/res/vsuee/storsint - Kala belum ada, silahkan bust fle coiss..01 nya di root tersebut.Isi dar fle tersebut dengan code berikut: Implementasi Push Notification di React Native ‘Oke setelah cukup pusing setup di sisi android nya, sekarang kita beralh untuk menggunakannya di dalam project React Native nya, ‘Caranya kita buat dulu configurasi Push Notification, Mari buat fle baru bernama jo:iicatsoanierjs Sejalar dengan cnetster(tatan urbe seat ion Snoiaio not ication nmegistrationrror eer sceacop ster antl React Native Push Notification hts _enagtetr = nance cnmegister: hander soseoster ns anger cnmegistraionerar:haréler onesie stsogeror bind Pane - baage: Eu popistsenotsfcation: true File tersebut berfungsi sebagai configurasi yang akan kita gunakan dalam penggunaan push notifnantinya, Setelah configura, kta akan lanjut untuk membuat service | fungsi-fungsi untuk mempermudah pemanggilan push notif kedepannya kita buat file baru lagi untuk service push notif in, saya beri nama yoeisarsss. strstr omagiter,entiicaion)( totittentinandte.attacnepstar (ong uso tiation getpp sat enconndgenber Function (nrber} rutinor ication stigp sat sotceesapoutber(0) React Native Push Notification brates trie, // option) canta 1g( ‘ersten ‘cetate-canel-sa! ratured ‘erented)'*)// (optional) ealtbck returns nether the shane; *srnd-chmmaid", 77 (rut ‘hanmelbeseription: vA sound channel, //(opeonat) detest: aetna ” » (ereates) = canes tog-eretecnnnel“soun. chanel raturneg‘s(erated)") // (options catltackraturne wether he ck > crenatripatethrat() ( shamattd;‘cuton-taoaltdt, // (ramura ‘anne lane: Corton shoe! - counter: fehis aetChameltaunter)// (regis) ‘hanmelbeseription” "A custon chanel to eategorice jour ston natficat ins ante at: (04 o04))°, (1 (ptson) manana "fault, // optional) See seuttane’ parameter of Loeinottication unetin portance: 4177 (otiont) detautts 4. Int vain of the snared notification importance » (ereates) => cansts-to(-cretecnnnel returned ‘erentad)'")// (optional) ealtbck returns nether the chanel was erates, > popise saat stcatin() > tecattetie(somato) { heer: iy meetaettion eter") 77 (opting). Tirgstea’ ‘ie tauchor // (options) fests “de taycnar* seaticon: ‘se notification’, // (options) defaults “se oritscation” wlth fatlback for “Ac tauneher ‘igre: ny tert that with be shun hen netitication is expanded, 77 (optional) atest "esa nites "hie ten stent’, // (options) a Gators red, (aptienat) aetatesayaten Tage "sone tap //(optionat) aa tag £0 ese rp: "raup// optional) aa praup tomes (Foupumary. talae, 71 (tions) set this notification tobe the group sumary for a oraup of ntstiations, ceaule: talze roong: alae, // optical) set whether tue iz an “ongoing” notsfieation Seta: "rer, "w'], 17 (aniosd iy) Seu the aoe far ogeifieationsettne to know wore Sotaipe! true, // option) This enable click on actioee toring back the apliceien fo foreground or stay im backgroun, 4 ten: mutt, // (opttonat) Aad a tinstanp pertaining te the rottication (tally the tine te event scarred). oe ‘escronoater! false, // (optional) stow the atan™ fuel ass stopatch- inst af presenting “une at lmnovtartar: ntl, (optional) specities a duration in willseeznds after which this natticaton thou 1s ue tsetd,// (optsnat) vated nique 22 W sneger spectied az string. faults Auogenrated Unique 10 ‘iets “una otitiction' 1 (ontonat) meee: ny ttitiation eseage'y 7 (reuired) rerio: seren:are”). 7) (opeonat) Playin: \Teonatane 7) (Spent) setae fimber! ie, 7/ (operat) vated 22 Bt ine nF > (0 (using mt thous 23504 value “* error) 1 apecttied az sting. aetautt noe (enna be 22) Putin tention toatnotitienonschaaie(¢ ‘cher: “hy notification Ticker", // (option) Aargetcon: "launcher", ( te taucner” ‘yy big text that wll be shawn ween notstication is expanded", // (optional) cefauit: wessa ‘ag: ‘some tag, // (optionat) aad tag to message. - raup: "group", // (tional) aia grou to message React Native Push Notification 16 Smtaige: tatze | sessge: ty cst Towed) Sertnto: (seen: thane}. // (optional) defeut: () (using nul thraue 2 3E0U value “ento! error) leyauel Termite) 7 (optional oats tr Bagian service ini nanti yang akan menentukan kontent dari push not kita. Seperti «seis atau soo) dari push notif yang akan kita kirimkan. Local Push Notification Selanjutnya, barulah akan kita panggil push notif ini dai fle ay. ys nya Untuk memudahkan elaborasi untuk seluruhfitur push notif yang disediakan oleh zo0r, kita akan rubah juga fle seo. nya supaya lebih mudsh penggunaannya. Saya ubah menjadi sepert in: inst fenupistered,attrenmepstered) React Native Push Notification v7 ee eter = ieoth » ‘vi syle=(stytes.cantaner)> “Tot style tyler tte)” tetera syle eytes textFeta) ‘ue FpistrToke) terer etree etal Tosa opacy syle syler atte) Set » “Tosa opaeey syle syler atte) eet » “roca opacity syle syler ute) ere o 2 “roca opacity syle syler atte) tebreee) = “Tosa opaeey syle syler atte) eet »” “roca opacity syle syler ute) eee o 2 “roca opacity syle syler atte) Sty » “roca opaeey ‘syle (eyes. button) eet »” “roca opacity syle syler ute) seorese) = » “Tosa opaeey syle syler atte) React Native Push Notification 8 oieanate og Seba echabeapesty| “oxeanate og Seliveres abt ications ose Tuctabetpaity| Toweraate or opante a channel "ox Techabeapesty| ovpapnseta wae stieatin Tae tevmapstare st est-FO Cons Surtinycotant: ‘cote Rgntters"eocer™ eceatign: "cote peating 5 peating relate 0 feneaesght "ola eceatign: "cota port detautt A Setelah saya merubah code di js maka tampilan emulator saya sekarang menjadi seperti ini: React Native Push Notification 7a res Example app react-native-push-notification sky SS 601 (eaten (See netctsn wate } [Remestremisions [rosnson remissions J | Console Log Delivered Notifications } [ropintiaNowfeston SSekarang kallan bisa coba satu per satu dar fitur push notif yang ada. Saya ambil contoh untuk Local Notification di button yang paling pertama, kalau saya tekan maka akan muncul push notif seperti berkut (See notes wate } [Remestremisions =a j Console Log Delivered Notifications } [pepinmianenteaton Selamat... Bi 6 Push notification pertama anda telah berhasildibuat Nah sekarang, untuk push notification local yang lainnya silahkan kalian coba masing-masing ya. Bir tau fungsi dari masing-masing button diatas, Remote Push Notification Sekarang mari kita coba push notification via online nya atau dengan FCM (Firebase Cloud Messaging), Pertama, mari kita manfaatkan fiebase console untuk mengirimkan push notification tersebut kita kembali ke console firebase Pada frebase console, silahkan kalian click menu sus seein) Pada sidebar sebelah ki dibagian yang agak bawah (di section Engage). Nah kalau kalian baru pertama kali membuka menu iow! yessssiy , Kurang lebih tampilan kalian akan sepert int Cen errr} Pada menu tersebut, selanjutnya click button send first message. —1@) Saya akan membuat simple push notification seperti di atas. Kalau kalian pethatikan di bagian sebelah ki kita bisa melinat form isian yang dari form tersebut nantinya akan menjadi content push notification seperti halnya lustrasi di sebelah kanan nya Setelah cukup dengan kontent push notification nya, selanjutnya kita tekan nest, dan pith target application kita Setelah itu kemudian tekan button next kemball ct Native Push Not Halo Prawito Iniadalah FCM pertara kamu Horaaaay...Remote push notification nya sudah sampai di emulator kita. Nah, diatas itu adalah tampilan push notification kalau kita masih membuka apikasi nya (ini yang disebut dengan foreground pus not). Kalau semisal kita menutup aplikasi nya, dan kita kirim push notif, maka tampilannya akan menjadi seperti berikut in t Native Push Notific Nah push notif kita akan tetep masuk juga meskipun apikasinya sedang kita tutup. (ini disebut dengan backaround push notification), ‘0a, Perlu al ingat, mungkin ketika kita menggunakan dashboard firebase Cloud Messaging in, kta akan mendapatkan notifsangat lama sekall (Saya juga gak tau kenapa) Pengalaman saya di buku ini, untuk dapat notif itu sampai 30 menit baru notfikasi nya sampai Jadi Kalan jangan khawatr ya kalau notif nya gak sampai-sampaikalian tinggalin makan aja ‘duly, setelah 30 menit baru bali lal, semoga ada keajaiban. @ ‘Tapi sebenernya case lama itu hanya terjadi di emulator saja Ketka saya coba install di real device. Push notification nya itu cepat ko sampainya, tidak sampai 1 menit push notifrya selalu sampai dengan balk. Jadi, buat kalian yang gak sabar dengan ke lemotan yang entah kenapa itu, coba aja ganti ke real device, past lebih cepet push notification nya sampai Remote Push Notification dengan REST API Selain menggunakan console frebase, menariknya dari FCM ini juga mereka menyediakan fitur pengiriman push notification melalui REST API yang telah mereka sediakan. Dengan adanya REST API inlah proses pengiriman push notification menjadi sangat dinamis, kita bisa mengjrimkannya lewat apa saja dan bisa kita trigger kapan saja tanpa harus masuk dulu kedalam dashboard firebase ‘Sebelum terlalu panjang penjelasan manfaat dari REST API FCM ini mari kita coba dulu Dalam percobaan ii, saya akan mencoba meng hit API ECM nya dengan menggunakan postman. Initerserah prefrensi kalian saja. mau menggunakan tools lain juga boleh. Dan jka kalan menggunakan postman, caranya kurang lebih React Native Push Notification 24 seperti benkut in: buka aplikasi postman dati laptop kalian: Kurang lebih nant tampilannya mitip-mirip sepertl ini ah Nah, ketka kita menggunakan postman in, kita akan memeriukan sebuah Key yang bernama tursiace arr key. Key in ‘akan berfungst sebagal identifier aplikasi mana yang akan kta ktimi sebuah push notification, Untuk mendapatkan server key nya, silahkan kalian masuk kembali ke console frebase. Disana silahkan kalian click icon gear pada menu rrsject ouervsn di paling atas, Akan muncul 3 menu utama seperti berikut in: ct Native Push Notification Peet Slahkan pilin menu project setting. Kemuclan pilh tab Cloud Messaging. Project eattings Dibagian yang saya block, itulah server Key yang bisa kita gunakan, Silahkan kalan copy server key tersebut. Selanjutnya kta buka kemball apikasi postman nya. Di postman tersebut mai kita import curl yang sudah saya buat Caranya klan click saja button import di pojok Kiri atas. Kemucian pilh tab aw text, disana masukan saja curl berikut React Native Push Notific Jangan lupa, saya menuliskan huruf capital yang tujuannya perlu kalian ganti dengan nilai yang sesual GANTLINLDENGAN_SERVER_KEY_KALIAN: ini ganti dengan value server key dari frebase console GANTLLINLDENGAN_TOKEN_DARI_APLIKASI_KALIAN: ini ganti dengan token yang di dapat dari terminal, etika aplikasi kita running, Kalian bisa hat token nya disini Pr oaeEy L0G ees om eras Peeerietn ny Cee Cree eae f11C0GJ2RS}G46nyonTIyO1 : APA9TDGL SMHEeTBNEAT JtVYk}PVP7Un54oqSFOWKHHAB: 102d -yBcdOFZRGYsntb30VOmOF uctGJ6Vy--rwfNLUDPiCkxbd ocean OS eec re eee eC ee Bagian yang saya block adalah token nya, Selain itu, kalan juga sebenarnya bisa copy token tersebut dari apikasi nya Example app react-native-push-notification Nah, bagian situ juga bisa digunakan, Terserah kalian lebih mudah yang mana. Kalau saya karena berada di terminal jai yang saya gunekan token dari terminal. Click continue, kemudian import Oke setelah itu, tampilan postman kalian sekerang sepert in ac Tentunya dengan rilal GANTI_INI_DENGAN.SERVER_KEY_KALIAN dan (GANTLINLDENGAN_TOKEN_DARL_APLIKASL KALIAN yang sudan berganti dengan value dari masing-masing Selanjutnya langsung saja kita hit si button biru yang bertuliskan sos. Tak lama kalau emulator kalian normal, push notif akan sampai: ct Native Push Not tion Halo Prawito Iniadalah FCM meta postman Dan kalau aplikasinya sedang ditutup, maka tampilannya akan sepert ini t Native Push Notific vad Heran nya kalau saya merasa push notification dengan REST AP! in lebih cepat sampai nya ke kita daripada push notif yang dikirim dar irebase console. Tapi saya juga gak tau kenapa. Apalagi kalau saya install aplikasi nya di real device, ssampai nya jauh lebih cepat dan nyaris gak pemah lebih dari 1 ment. (Pengalaman saya) Nah saya akan lanjut menejelaskan tentang kenapa push notification dengan REST API ini sangat membantu sekali {dalam proses pengiriman yang dinamis? jawabannya adalah ketika kita bisa mengirim push notif dengan REST API, maka kita bisa menggunakannya dimana saja. Kita bisa menggunakannya langsung di sis front end nya. Bisa juga kita ‘gunakan di sisi backend nya. Hal ini sangat menarik, karena ketika kita bisa hit push notif di backend, berarti kita bisa menambahkan logic-logic tertentu terlebih dahulu sebelum push notf nya dikirim Kita ambil contoh saya akan mengirimkan push notif untuk customer aplikasi ecommerce saya ketika mereka telah berhasil melakukan pembayaran. Nah, gimana cara saya melakukan pengiriman push notif? Logika saya, saya akan mmelakukan transaksi order terlebih dahulu di aplkasi ecommerce kita, kemudian biarkan customer melakukan pembayaran. Nah, setelah pembayarannya terverifikasi maka langkah selanjutnya di backend kita langsung saja hit REST API FCM ini dengan value-value yang kita buat custom sesuai dengan keperiuan. Ini kan sangat keren...@ Dari REST API ini sendir kita bisa mengembangkan proses pengiriman push notification dari berbagai kemungkinan. Maka dari situlah push notification dengan REST API ini banyak sekal digunakan. Custom Push Notification React Native Push Notification Matert inti dari push notification telah kita pelajari di bab-bab sebelumnya. Kini tba saatnya kita percantk lagi push ‘notification yang kita krimkan. Karena, push notif basic yang kita lhat tad, rasa-rasenya kurang sedap kalau tidak kita ppetcantik dengan hal-hal yang bersifat specifik ke aplkasi kita, ‘Sekarang mari kita mulai membuat push notif ni lebih custom lagi dengan menggantiicon nya, Mengganti icon notification Hal pertama yang perlu kita lakukan adalah merubah sce oxe/sirots/sop/ra/asn/anssusnnsren at Kalan, Silahkan tambahkan bagian ini di dalam file tersebut ire en eee ett tee ee cece ee et ee het ‘Sliahkan kalian tempatkan code tesebut diatas bagian in: rldnnecon. tote. firease staging faut pti tteation camel Kalau kalian perhatikan balk-baik codingan untuk membuat custom push neti kita, di bagian akhir kita melihat ‘mipmap notarication*. Nah ini maksudnya adalah, kta akan mengganti icon notiikasi kita dengan icon yang bernama s: jrsssssson. Pertanyaan saya, apa kita punya icon yang bermama tu? Kalau kalian kuti saya dari awa, ‘pastinya kalian belum memilki icon tersebut dalam aplikasi kali, Nah sekarang, mari kita mulai membuat icon custom tersebut Kalau saya biasa membuat icon custom untuk push notif it dink berkut in: hntps/romannurk github io/AndroidAssetStudiolicons-notification Disana kalian bisa memibuat icon custom, atau bisa juga menggunakan icon yang sudah mereka sediakan. Jka ingin ‘con custom sesuai dengan design sendii kalian bisa memilh tab image untuk mengupload image kalian. Nah untuk kepertuan tutorial saya inl, saya akan menggunakan default icon yang telah mereka seciakan, Perhatikan baik-baik penamaan icon di pojok kiri bawah, nama ini harus sama dengan nama yang telah kita buat di ‘manifest xml tadi, Namanya ss yotsscetsn ‘Setelah semuanya cocok,tinggal kta download dan tambahkan file mage png kalian di beberapa folder berikut sarets/gp/eremauvees Kemudian, masukan icon-icon sesual dengan ukuran masing-masing React Native Push Notification 31 Sebelah Kirin adalah folder project saya, dan sebelah kanan ini adalah folder yang saya download dari generator notification tad Setelah saya copy-copy icon nya ke folder yang sesuai, sekarang kita tinggal build lang aplikasi android nya, karena kita telah merubah bagian int dari sebuah aplikasi Andro. Setelah aplikasi nya di build ulang dengan ars sous. Kalau saya coba kirimkan push notif local maka sekarang kita bisa melihat icon push notif nya berubah sesual dengan icon yang tadi kita masukan Gambardiatas ity, muncul kalau saya coba melakukan push notification local, dan saya lakukan swipe pada menu top bar nya. Icon merah tersebut adalah icon yang tadi saya masukan Selanjutnya berikut ini adalah tampilan ketika saya mencoba untuk melakukan schedule push notification: Een) (Gear [roansonremisine J [ConscleLea Deivered Notieatens | [crest or upsateachennet [ropintiaNowfeston Icon push notification kita sekarang telah berubah. Mengganti large icon notification Ideainya icon push not inibiasanya sama dengan icon aplikas kita, namun kadang kala icon nott ini senciri memiiki value yang berbeda Karena kta tadi sudah membuat icon notif yang berbeda, maka sekarang saya akan membuat juga icon notif untuk large nya dengan membuat dari httos//romannurik ithub io/AndroidAssetStudiyicons-launcher html Dar sana saya membuat sama persis dengan icon nott, hanya saja berbeda warnanya, supaya nantiterlnat ketika push notif di buat or nxo+0 © —— =] m= Pethatikan kembal penamaan icon nya ics nah ini untuk memudahkan saya memberikan nama agar sama dengan icon notification. {download dan simpan sama seperti proses penyimpanan icon notification sebelumnya Build lang aplkasi nya dengan yar s ‘us. Dan sekarang kita tinggal ubah saja naming di bagan josirsrvice je SSekarang kalau saya coba local push notifnya, tampilanya menjadi seperti ink ct Native Push Not tion Een) (Gear (anon remssone ] console Log Delivered Notfications: ] Large icon yang sebelah kanan sekarang sudah berubah. Menambah Image pada content Push Notification Untuk menambahkan image pada push not kta, ada property yang peru kita perhatikan Di sorte. tambahkan bagian berkut i SSekarang mari kita coba dan bahas satu persatu. untuk 1srytcawrs inl akan menjaclkan icon large yang kita buat tad, httos-/ojthub.com/zo0rjreact-native-push-notification + Firebase > hitos:/trebase. google com) ‘+ FCM REST API > tips://fom. googleapis.com/send/ ‘+ Custom Icon Notification - httos./romannurik github io/AndroidAssetStudiolicons-notification ‘+ Custom Icon Android > https:/romannurik github jo/AndroidAssetStudiojicons-launcher htm ‘+ Sample dummy image unsplash > https:{/source.unsplash com/random/1024*S00 + Github code ini > https_/oithub,com/prawito/samp Profil Prawito Hudoro Halo semua, Terimakasih banyak telah membaca dan membeli buku ketiga saya ini Saya sangat senang akhirnya saya dapat menyelesaikan buku "React Native Push Notification’. Dengan bangga saya sampaikan buku ini kepada pembaca Menulis buku in tentu bukanlah suatu hal yang mudah. Saya mencoba memibaca sebanyak mungkin artikelartkel yang membantu saya dalam mater ini. Saya juga mencoba melihat video-video tutorial lain yang mendukung isi dai materi buku ini. Kendati demikian, saya mencoba memberikan yang terbaik untuk pembaca semua agar buku ini mudah di fahami dan dapat di manfaatkan sebalk-baiknya. ‘Sebagai penulis dari buku "React Native Push Notification” ini, saya menyadari betul masih banyak yang perlu saya perbaiki. Mulai dari tata bahasa, penulisan coding hingga step-step dalam menyampaikan isi dari buku ini Tentu kekurengan tersebut dengan senang hati saya menerima masukan dari pembaca semua. Masukan yang membangun tentu akan membantu saya untuk terus memperbaik karya-karya saya yang lan di kemudian har Mari terus terhubung dengan saya di beberapa media berikut: Email: [email protected] Telegram & 1G: @prawitohudoro Komunitas Coding: @kabayan_coding ‘Semoga bermanfeat, Salam, Hudoro ct Native Push Notification 41

Anda mungkin juga menyukai