Membuat Push Notification Menggunakan Layanan Third Party One Signal

Halo technogeeks, perkenalkan saya Bill, software engineer dari Technologue ID. Ini adalah tutorial pertama saya di Codepolitan, semoga kalian berkenan dengan isi konten yang mau saya angkat ini. Pada kesempatan kali ini saya mau berbagi ilmu yang saya dapat ketika meng-handle website menggunakan CMS Wordpres, yang kasusnya butuh sebuah push notification untuk browser (chrome, firefox, safari).
Tujuan kita pada kali ini adalah membuat push notification yang nantinya pengunjung website kita akan bisa berlangganan dan mendapatkan kabar apabila ada update pada website kita. Berikut contohnya:

Apabila kalian melihat gambar di atas pasti kalian sudah familiar. Ya, itu adalah goal kita kali ini. Jadi apabila kalian tertarik, mari kita lanjut ke pembahasan selanjutnya.
Kegunaan push notification adalah sebagai pengganti email subscriber yang biasa orang dari dulu gunakan untuk menyebarkan artikel ke pengguna, sekarang teknologi sudah banyak berkembang, dan munculnya solusi push notification adalah salah satu yang di tunggu-tunggu. Dengan satu klik di button subscribe pada web yang dikunjungi, kita sudah bisa mendapatkan pesan notifikasi tiap kali ada artikel baru di publish. Sangat mudah bukan? gratis lagi. Jadi, teknologi ini sangat baik di gunakan oleh portal berita atau blog tutorial. Codepolitan pun juga menggunakan teknologi ini. Betul tidak?
Apa lagi alasan kalian untuk tidak menggunakan teknologi ini? I think its worthed guys. Lets move to another step.
Layanan push notification sekarang sangat banyak sekali guys, jadi kalian tinggal pilih saja saat kalian googling dengan keyword "push notification service". tapi pada tutorial kali ini saya akan menggunakan jasa onesignal, karna penggunaannya yang mudah dan support yang besar, dia juga gratis di gunakan. mantap bukan? yoi bro.
Ok, saya kira cukup pengenalan push notification dari saya, kita lanjut ke langkah langkahnya.
Bahan-bahan yang harus di persiapkan adalah :

1. Website kita menggunakan wordpress
2. Register akun onesignal

Setelah semuanya siap, mari kita masuk ke langkah-langkahnya.
Langkah yang saya tulis di bawah akan di bagi menjadi 3 langkah besar, yaitu :

1. Create Project One Signal
2. Install Plugin One Signal di Wordpress
3. Testing Push Notification

CREATE PROJECT ONE SIGNAL

Langkah pertama, masuk ke dashboard onesignal, create new project.

Selanjutnya pilih platform yang mau kita pakai. Catatan: pada tutorial kali ini kita akan memakai platform web browser.


Setelah itu kita pilih cms mana yang mau kita pakai. Catatan: pada tutorial kali ini kita akan pakai CMS Wordpress.

Selanjutnya isi profile website kita, sesuai form yang tersedia, lihat contoh pada gambar di bawah.

Setelah itu klik Save, dan voilaaa!! Project sudah berhasil kita buat. pada tiap project onesignal yang telah di buat, akan ada pasangan APP ID dan API Key, seperti pada gambar di bawah.

Catatan: fokus pada APP ID dan API Key, karena nanti akan dipakai pada langkah berikutnya.

INSTALL PLUGIN WORDPRESS

Selanjutnya kita masuk ke website Wordpress dan install plugin OneSignal.

Klik menu onesignal untuk masuk kedalam halaman onesignal untuk melakukan konfigurasi. Catatan: pada plugin onesignal sebenernya sudah di berikan step by step nya untuk melakukan configurasi dan create project yang ada di onesignal.
Berikut step by step yang ada di plugin onesignal.

Selanjutnya klik tab configuration untuk melakukan konfigurasi pada onesignal. pada form account setting, terdapat field yang wajib kita isi, yaitu APP ID dan API Key milik kita tadi, isikan sesuai dengan punya kalian dan isikan field label sesuai keinginan kalian.

TESTING PUSH NOTIFICATION

Setelah sukses melakukan langkah di atas, kita akan langsung melakukan testing dengan harapan notification yang kita terkirim kepada subscribers. karna kita barus saja membuat project dan melakukan konfigurasi, maka sudah bisa di pastikan kita belum memiliki subscribers, maka dari itu kita awali dulu melakukan subscribe.
kunjungi website kita, dan lihat website kita sudah memiliki floating button bergambar lonceng merah pada pojok kanan bawah, seperti pada gambar berikut.

Catatan: silahkan klik button itu untuk melakukan subscribe.
Klik allow button untuk memberikan izin website mengirimkan notification.

Buka kembali halaman onesignal, lalu klik tab messages untuk mencoba mengirim pesan kepada subscribers.

Pada form message, isikan judul dan isi pesan yang akan di kirimkan.

Scroll ke halaman paling bawah, lalu kirim pesan dengan cara klik button confirm.

Voilaaa, pesan sudah terkirim. ke subscribers..
Sekian tutorial dari saya, apabila ada pertanyaan silahkan beri komentar di bawah.
Jangan lupa bagikan tutorial ini ya, thank you and see you in the next tutorial. Salam Technogeeks.