T1 672010016 Full text

PERANCANGAN PROTOTYPE APLIKASI PENGUMUMAN KELAS MENGGUNAKAN TEKNOLOGI FIREBASE CLOUD MESSAGE PADA

ANDROID

JURNAL SKRIPSI

Disusun Oleh: FEBRIAN PRAYOGA

NIM : 672010016

FAKULTAS TEKNOLOGI INFORMASI

UNIVERSITAS KRISTEN SATYA WACANA

1. Pendahuluan

Selama ini pengajar-pengajar Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana masih menggunakan online

announcement di website lokal yang terkadang tidak semua mahasiswa

sering mengakses website tersebut atau lupa mengaksesnya.

Maka dari itu dikembangkanlah aplikasi yang memanfaatkan Firebase

Cloud Message untuk memudahkan dosen atau pengajar dalam memberi

pengumuman terkait kegiatan belajar mengajar di kelas secara real time.

Aplikasi ini akan menginformasikan pengumuman apa saja yang ada di

kelas dan mengirimkannya dalam bentuk push notification di ponsel

android masing-masing.

Firebase Cloud Message adalah sebuah layanan pada Android yang

berfungsi untuk menjalankan sebuah Push Notification. Di Android

layanan FCM dijalankan oleh sebuah aplikasi yang berjalan di latar belakang. Layanan ini akan membangunkan aplikasi yang bersangkutan saat menerima notifikasi baru dan akan menampilkan notifikasi tersebut pada panel notifikasi Android.

Android adalah satu sistem operasi perangkat mobile berbasis linux

yang mencakup sistem operasi middleware dan aplikasi [1]. Berdasarkan

data penggunaan mobile phone dengan sistem Android oleh StatCounter

menunjukkan bahwa sistem operasi inilah yang sangat diminati.[2]

2. Tinjauan Pustaka

Penelitian sebelumnya yang berjudul “Rancang Bangun Aplikasi

Mobile Notifikasi Berbasis Android Untuk Mendukung Kinerja Di Instansi

Pemerintahan” [3] menggunakan teknologi Google Cloud Message untuk

memantau bagaimana kinerja pegawai-pegawai di instansi pemerintahan. Dalam pengoperasiannya sistem ini dapat menjadi media penyampaian informasi dan dapat mengawasi serta memberikan peringatan kepada semua pegawai secara otomatis.

Berdasarkan dari penelitian tersebut, muncullah ide untuk membuat

satu aplikasi untuk pengumuman kelas secara real time dengan studi kasus

Fakultas Teknologi Dan Informasi Universitas Kristen Satya Wacana. Aplikasi ini nantinya akan digunakan untuk mengirimkan pengumuman kepada mahasiswa-mahasiswa yang mengambil kelas tertentu dalam

bentuk push notification.

Aplikasi mobile adalah perangkat lunak yang berjalan pada perangkat

mobile seperti smartphone atau tablet PC. Aplikasi Mobile juga dikenal sebagai aplikasi yang dapat diunduh dan memiliki fungsi tertentu sehingga

menambah fungsionalitas dari perangkat mobile itu sendiri. Untuk

mendapatkan mobile application yang diinginkan, user dapat

mengunduhnya melalui situs tertentu sesuai dengan sistem operasi yang dimiliki. Google Play dan iTunes merupakan beberapa contoh dari situs yang menyediakan beragam aplikasi bagi pengguna Android dan iOS

untuk mengunduh aplikasi yang diinginkan. (Mobile Marketing

Association, 2015).

Firebase Cloud Messaging untuk Android (FCM) adalah layanan yang

membantu pengembang mengirim data dari server untuk aplikasi mereka

Android pada perangkat Android. Ini bisa menjadi pesan ringan memberitahu aplikasi Android bahwa ada data baru yang akan diambil dari

server (misalnya, film diunggah oleh seorang teman), atau bisa juga pesan yang berisi sampai dengan 4KB data payload (sehingga aplikasi seperti instant messaging dapat mengkonsumsi pesan langsung). Layanan FCM menangani semua aspek antrian pesan dan pengiriman ke aplikasi target Android berjalan pada perangkat target.

3. Metode Dan Perancangan Sistem

Pada bagian ini akan dijelaskan mengenai metode penelitian yang dipakai dalam menerapkan sistem penjawalan ujian skripsi dengan menggunakan Android Studio. Metode yang dipakai menggunakan

 Waterfall Model

Waterfall adalah suatu metodologi pengembangan perangkat lunak yang mengusulkan pendekatan kepada perangkat lunak sistematik dan sekuensial yang mulai pada tingkat kemajuan sistem pada seluruh analisis, design, kode, pengujian dan pemeliharaan.

Model ini sering disebut dengan “classic life cycle” atau model

waterfall. Model ini sering dianggap kuno, tetapi merupakan model yang paling banyak dipakai didalam Software Engineering (SE). Model ini melakukan pendekatan secara sistematis dan urut mulai dari level kebutuhan sistem lalu menuju ke tahap analisis, desain, pemrograman, pengetesan, dan perawatan.

Berikut adalah gambar dari waterfall model.

Gambar 1 Bagan Metode Waterfall [4].

Metode waterfall diawali dengan pengumpulan data yang dibutuhkan.

Pengumpulan data dilakukan dengan cara komunikasi, dapat berupa kuisioner atau wawancara dengan pengguna aplikasi. Pengembang dan pengguna aplikasi kemudian menentukan kebutuhan, tujuan, dan gambaran tentang suatu sistem dan kemudian membangun model

purwarupa yang dapat menggambarkan sistem. Model purwarupa yang

dibuat kemudian diuji oleh pengguna yang kemudian hasil pengujian

sistem akan dijadikan sebagai acuan apakah model purwarupa tersebut

Perancangan dimulai dari hasil kebutuhan sistem berupa use case dan

diagram activity, kemudian diidentifikasi dan dimodelkan dengan diagram sequence. Selanjutnya, dilakukan perancangan sistem aplikasi “Perancangan Prototype Aplikasi Pengumuman Kelas Menggunakan Firebase Cloud Messaging Pada Android” dengan mengidentifikasi class

dan layout yang dibutuhkan, dan dimodelkan ke dalam class diagram.

Perancangan basis data perlu dilakukan untuk mengetahui representasi data yang akan diolah oleh sistem ini. Kemudian yang terakhir tahap perancangan antarmuka pengguna.

kirim pengumuman menu start

Dosen

menu keluar

edit kelas

mahasiswa terima pengumuman

<<include>>

<<include>>

<<include>>

Gambar 2 Use Case Diagram

Gambar 2 merupakan gambar use case diagram yang menjelaskan

fungsi-fungsi dari sistem. Pengguna dapat memilih menu mulai untuk menjalankan fungsi dari aplikasi pengumuman kelas. Di dalam menu mulai, pengguna dapat memasukkan jadwal dosen, mengubah jadwal dosen dan mengirimkan pengumuman terkait kelas yang diampu oleh dosen yang bersangkutan.

Activity diagram berguna untuk memberikan visualisasi alur tindakan dalam sistem, percabangan yang mungkin terjadi, bagaimana alur sistem

dari mulai hingga berakhir. Activity diagram pengguna dalam sistem dapat

Mulai

Memilih kelas yang akan diberi pengumuman

Memasukkan pesan pengumuman

Kirim

pengumuman Pengumuman dikirim ke smartphone mahasiswa

Mahasiswa menerima pengumuman yang berupa push notification

Selesai

Mahasiswa Sistem

Dosen

Gambar 3 Activity Diagram

User memulai proses dengan memilih menu mulai. Pertama, sistem akan mengecek daftar jadwal kelas dari dosen yang bersangkutan yang sudah terdaftar dalam sistem. Apabila ada data yang belum dimasukkan,

maka user dapat memasukkan data jadwal perkuliahan. Setelah data

jadwal dosen sudah lengkap dimasukkan, maka selanjutnya user memilih

kelas mana yang akan dikirimi pengumuman. Setelah itu sistem akan memulai proses pengiriman pengumuman terkait kegiatan belajar-mengajar ke mahasiswa yang mengambil kelas yang diampu oleh dosen

tersebut dalam bentuk push notification ke smartphone yang dimiliki

mahasiswa yang berisi pengumuman terkait kegiatan kelas.

Sequence diagram berfungsi untuk menggambarkan interaksi antara setiap komponen baik di dalam maupun di sekitar sistem (berupa

pengguna dan tampilan) secara berurutan. Sequence diagram

menggambarkan urutan dari sebuah aksi dan memberikan respon untuk menghasilkan keluaran tertentu.

: User

: User : interface : interface : controller : controller : database : database

Memilih kelas

Cek apakah jadwal kelas yang dipilih sudah ada dalam database

Data kelas dicek

Data kelas ditemukan

Tampilkan data kelas Data ditampilkan

Masukkan pengumuman

Kirim pengumuman

Mengirimkan pengumuman ke ponsel android mhsw

Pengumuman berhasil dikirim Proses menampilkan daftar mhsw beserta isi pengumuman

Daftar mhsw dan isi pengumuman ditampilkan

Gambar 4 Sequence diagram.

Gambar 4 merupakan sequence diagram interaksi pengguna dengan

sistem. Proses diawali dengan pengguna memilih jadwal kelas yang ada di dalam sistem. Setelah data ditemukan, pengguna memasukkan pesan pengumuman terkait kegiatan kelas untuk selanjutnya dikirim ke

smartphone mahasiswa yang mengambil kelas yang diampu oleh dosen tersebut. Selanjutnya aplikasi akan memulai proses pengiriman pesan

pengumuman menggunakan push notification.

Class diagram menggambarkan struktur objek, deskripsi objek, serta

relasinya satu sama lain. Class diagram untuk aplikasi ini ditunjukkan

tb_mhs NIM Nama_mhs lihat_jadwal() lihat_pengumuman() tb_detailkelas ID_kelas NIM 1..* 0 tb_dosen ID_dosen Nama_dosen Email tambah_kelas() edit_kelas() hapus_kelas() kirim_pengumuman() tb_kelas ID_kelas Nama_kelas ID_dosen Hari Jam 0..* 1 0..* 1 0 1..*

Gambar 5 Class Diagram.

Gambar 5 menerangkan bahwa kelas FCM hanya menampilkan push

notification dari admin. Disini dosen juga hanya bisa melihat isi pesan

dari push notification yang dikirim oleh admin.

Gambar 6 Arsitektur Firebase Cloud Message.

Gambar 6 menjelaskan tentang arsitektur dari FCM itu sendiri. Pertama, android akan mengirim permintaan registrasi ke FCM. Selanjutnya FCM akan mengirim ID registrasi ke perangkat android. Setelah mendapat ID, perangkat mengirim ID yang telah diterima dari

FCM untuk selanjutnya ID ini akan disimpan di server yang nantinya akan

digunakan dalam mengirimkan push notification ke perangkat android.

4. Hasil dan Pembahasan

Aplikasi yang dirancang merupakan Perancangan Aplikasi Pengumuman Kelas Menggunakan Teknologi Firebase Cloud Message Pada Android (Studi Kasus : Fakultas Teknologi Informasi Universitas Kristen Satya Wacana) yang bertujuan untuk memberikan kemudahan bagi para dosen pengajar dalam menginformasikan pengumuman ke mahasiswa-mahasiswa yang mengambil kelas yang diamu oleh dosen yang bersangkutan. Antarmuka sistem yang dirancang terdiri dari dua bagian, yaitu bagian yang dapat diakses oleh dosen pengajar melalui website, dan bagian registrasi ID yang diakses oleh mahasiswa melalui ponsel android.

Gambaran aplikasi android dapat dilihat pada Gambar 7 di bawah ini.

Gambar 7 Proses registrasi NIM.

Kode Program 1 Proses registrasi dari android untuk mendapatkan

unique ID dari Firebase.

1. private void registerDevice() {

2. Firebase firebase = new

3. Firebase(Constants.FIREBASE_APP);

5. _{Map<String, String> val = new HashMap<>();}

6. _{val.put("msg", "none");}

7. _{newFirebase.setValue(val);}

8. _{String uniqueId = newFirebase.getKey();}

9. _sendIdToServer_(uniqueId);}

Sebelum device android dapat digunakan untuk dikirimi pesan push

notification, device terlebih dahulu diregistrasikan unique IDnya ke

firebase cloud. Dari firebase akan membuat ID secara acak. Kode program

1 merupakan kode untuk meminta unique ID ke serverfirebase.

Kode Program 2 Proteksi NIM.

1. if (response.trim().equalsIgnoreCase("success")) { 2. _Toast.makeText_{(MainActivity.this, "Registered}

3. successfully", Toast.LENGTH_SHORT).show(); 4. _{SharedPreferences sharedPreferences =}

5. getSharedPreferences(Constants.SHARED_PREF, 6. MODE_PRIVATE);

7. _{SharedPreferences.Editor editor =}

8. sharedPreferences.edit();

9. _{editor.putString(Constants.UNIQUE_ID,}

10. uniqueId);

11. _{editor.putBoolean(Constants.REGISTERED,}

12. true);

13. _{editor.apply();}

14. _{startService(new}

15. Intent(getBaseContext(), 16. NotificationListener.class)); 17. } else {

18. Toast.makeText_{(MainActivity.this,}

19. "Choose a different NIM", 20. Toast.LENGTH_SHORT).show();}

Kode Program 2 merupakan fungsi proteksi dalam aplikasi ini. Saat

menginputkan NIM dan nama dan klik register, aplikasi akan mengecek ke

database apakah NIM tersebut telah terdaftar dalam database atau belum.

Apabila belum terdaftar, device akan meregistrasikan NIM, nama serta

device ID ke server firebase untuk selanjutnya akan diberi unique ID.

Gambar 8 Proteksi NIM.

Kode Program 3 Pengiriman push notification.

1. $sql = “SELECT * FROM tb_kelas”;

2. $result = mysqli_query($con,$sql);

3. while($row = mysqli_fetch_array($result)){?>

4. <option value=’<?php echo $row[‘ID_kelas’];?>’>

5. <?php echo $row[‘ID_kelas’];?></option>

6. <?php}?></select>

7. <?php

8. $con =

9. mysqli_connect(‘localhost’,’root’,’’,’skripsi’);

10.$sql = “SELECT * FROM tb_firebase”;

11.$result = mysqli_query($con,$sql);?>

12.<textarea name=’message’></textarea><br />

13.<button>Kirim</button><br />

14.</form><?php

Kode Program 3 pada baris 1-6 merupakan kode program untuk

memilih kelas mana yang akan dikirimi pengumuman push notification. Di

sini server akan menyimpan pilihan ke dalam variabel option. Baris 7-15,

merupakan kode program untuk mengirim pesan push notification ke

device masing-masing mahasiswa.

Gambar 9 Antar muka pemilihan kelas.

Gambar 9 merupakan tampilan dari aplikasi saat admin memilih kelas mana yang akan dikirimi pengumuman. Sedangkan pada Gambar 10,

merupakan tampilan untuk mengecek apakah pengumuman tersebut telah

berhasil dikirimkan ke device masing-masing mahasiswa yang mengambil

kelas yang bersangkutan.

Gambar 10 Pengecekan hasil pengiriman notifikasi ke mahasiswa.

Gambar 11 Push notification yang berhasil dikirimkan ke mahasiswa.

Dalam perancangan aplikasi ini, pengujian aplikasi dilakukan dengan

operasi pengecekan pengiriman pesan, pengiriman push notification, dan

proteksi bagi ID yang sama. Jika pengujian berhasil, diberikan tanda ()

dan apabila tidak berhasil, maka diberikan tanda (_{). Hasil dari Alpha}

Testing dapat dilihat pada Tabel 1.

Fungsi Pengujian Input Hasil Validitas Proteksi NIM Tidak dapat

memasukkan NIM yang telah terdaftar.

Memasukkan NIM yang sama. Muncul alert “Already registered” 

Pengiriman push notification

Mengirimkan pesan push notification Memilih kelas dan memasukkan pengumuman serta mengirimnya ke device android.

Pesan push notification tertampil di android.  Pengecekan pengumuman terkirim Menampilkan hasil dari pengiriman pengumuman Pengumuman yang akan dikirimkan ke device android

Daftar ID yang mengambil kelas dan NIM



Tabel 1 Hasil dari Alpha Testing.

5. Simpulan

Setelah melalui analisis dan pengujian “Aplikasi Pengumuman Kelas

Menggunakan Teknologi Firebase Cloud Message Pada Android” dapat

disimpulkan bahwa aplikasi dapat memberikan informasi kegiatan belajar-mengajar, seperti pindah kelas, pergantian waktu belajar-belajar-mengajar, atau kelas kosong kepada mahasiswa yang mengambil kelas tersebut yang

dikirim melalui web server ke client. Untuk sementara ini, aplikasi ini

memindahkan mahasiswa ke kelasnya, pengujian untuk mengirimkan push notification ke beberapa ponsel android masih belum bisa dilakukan. Saran untuk pengembangan aplikasi ini adalah, fungsi-fungsi seperti dosen

dapat memindahkan mahasiswa dapat ditambah, mmlti-platform, tidak

hanya bisa dijalankan di Android saja, tapi bisa dijalankan di platform

yang lain, seperti iOS.

6. Daftar Pustaka

[1] Safaat, Nazrudin. 2011. Android : Pemrograman Aplikasi Mobile

Smartphone dan Tablet PC (Edisi Revisi), Bandung: Informatika Bandung.

[2] StatCounter, 2016, Top 8 Mobile and tablet Operating Systems from

Jun 2015 to Jun 2016, http://gs.statcounter.com/#mobile+tablet-os-ww-monthly-201506-201606. (diakses tanggal 30 Juli 2016)

[3] Irsan, Muhammad, 2013, Rancang Bangun Aplikasi Moblile

Notifikasi Berbasis Android Untuk Mendukung Kinerja Di Instansi Pemerintahan.

[4] Pressman, Roger. 2002. Rekayasa Perangkat Lunak pendekatan

praktisi. Yogyakarta : Penerbit Andi.

[5] Sommerville, Ian. 2001. Software Engineering 6th_{. Penerbit Addison}

Wesley Publishing Company.

[6] Santoso, Agus. 2012. Pembuatan Aplikasi Mobile Broadcast

Informasi Perkuliahan Berbasis Android. Program Studi Teknik Informatika Fakultas Teknologi Industri Universitas Kristen Petra.

5. _{Map<String, String> val = new HashMap<>();} 6. _{val.put("msg", "none");}

7. _{newFirebase.setValue(val);}

8. _{String uniqueId = newFirebase.getKey();} 9. _sendIdToServer_(uniqueId);}

Sebelum device android dapat digunakan untuk dikirimi pesan push notification, device terlebih dahulu diregistrasikan unique IDnya ke

firebase cloud. Dari firebase akan membuat ID secara acak. Kode program 1 merupakan kode untuk meminta unique ID ke serverfirebase.

Kode Program 2 Proteksi NIM.

1. if (response.trim().equalsIgnoreCase("success")) { 2. _Toast.makeText_{(MainActivity.this, "Registered}

3. successfully", Toast.LENGTH_SHORT).show(); 4. _{SharedPreferences sharedPreferences =} 5. getSharedPreferences(Constants.SHARED_PREF, 6. MODE_PRIVATE);

7. _{SharedPreferences.Editor editor =} 8. sharedPreferences.edit();

9. _{editor.putString(Constants.UNIQUE_ID,} 10. uniqueId);

11. _{editor.putBoolean(Constants.REGISTERED,}

12. true);

13. _{editor.apply();} 14. _{startService(new} 15. Intent(getBaseContext(), 16. NotificationListener.class)); 17. } else {

18. Toast.makeText_{(MainActivity.this,}

19. "Choose a different NIM", 20. Toast.LENGTH_SHORT).show();}

Kode Program 2 merupakan fungsi proteksi dalam aplikasi ini. Saat menginputkan NIM dan nama dan klik register, aplikasi akan mengecek ke

database apakah NIM tersebut telah terdaftar dalam database atau belum. Apabila belum terdaftar, device akan meregistrasikan NIM, nama serta

device ID ke server firebase untuk selanjutnya akan diberi unique ID. Gambar 8 menunjukkan proteksi pada registrasi NIM yang sama.

Gambar 8 Proteksi NIM.

Kode Program 3 Pengiriman push notification.

1. $sql = “SELECT * FROM tb_kelas”;

2. $result = mysqli_query($con,$sql);

3. while($row = mysqli_fetch_array($result)){?>

4. <option value=’<?php echo $row[‘ID_kelas’];?>’>

5. <?php echo $row[‘ID_kelas’];?></option>

6. <?php}?></select>

7. <?php

8. $con =

9. mysqli_connect(‘localhost’,’root’,’’,’skripsi’);

10.$sql = “SELECT * FROM tb_firebase”;

11.$result = mysqli_query($con,$sql);?>

12.<textarea name=’message’></textarea><br />

13.<button>Kirim</button><br />

14.</form><?php

Kode Program 3 pada baris 1-6 merupakan kode program untuk memilih kelas mana yang akan dikirimi pengumuman push notification. Di sini server akan menyimpan pilihan ke dalam variabel option. Baris 7-15, merupakan kode program untuk mengirim pesan push notification ke

device masing-masing mahasiswa.

Gambar 9 Antar muka pemilihan kelas.

Gambar 9 merupakan tampilan dari aplikasi saat admin memilih kelas mana yang akan dikirimi pengumuman. Sedangkan pada Gambar 10,

merupakan tampilan untuk mengecek apakah pengumuman tersebut telah berhasil dikirimkan ke device masing-masing mahasiswa yang mengambil kelas yang bersangkutan.

Gambar 10 Pengecekan hasil pengiriman notifikasi ke mahasiswa.

Gambar 11 Push notification yang berhasil dikirimkan ke mahasiswa.

Dalam perancangan aplikasi ini, pengujian aplikasi dilakukan dengan

operasi pengecekan pengiriman pesan, pengiriman push notification, dan proteksi bagi ID yang sama. Jika pengujian berhasil, diberikan tanda () dan apabila tidak berhasil, maka diberikan tanda (_{). Hasil dari Alpha} Testing dapat dilihat pada Tabel 1.

Fungsi Pengujian Input Hasil Validitas Proteksi NIM Tidak dapat

memasukkan NIM yang telah terdaftar.

Memasukkan NIM yang sama. Muncul alert “Already registered” 

Pengiriman push notification Mengirimkan pesan push notification Memilih kelas dan memasukkan pengumuman serta mengirimnya ke device android.

Pesan push notification

tertampil di android.  Pengecekan pengumuman terkirim Menampilkan hasil dari pengiriman pengumuman Pengumuman yang akan dikirimkan ke

device android

Daftar ID yang mengambil kelas dan NIM



Tabel 1 Hasil dari Alpha Testing.

5. Simpulan

Setelah melalui analisis dan pengujian “Aplikasi Pengumuman Kelas Menggunakan Teknologi Firebase Cloud Message Pada Android” dapat disimpulkan bahwa aplikasi dapat memberikan informasi kegiatan belajar-mengajar, seperti pindah kelas, pergantian waktu belajar-belajar-mengajar, atau kelas kosong kepada mahasiswa yang mengambil kelas tersebut yang dikirim melalui web server ke client. Untuk sementara ini, aplikasi ini masih ada kekurangan, seperti, dosen belum bisa menambahkan atau

memindahkan mahasiswa ke kelasnya, pengujian untuk mengirimkan push notification ke beberapa ponsel android masih belum bisa dilakukan. Saran untuk pengembangan aplikasi ini adalah, fungsi-fungsi seperti dosen dapat memindahkan mahasiswa dapat ditambah, mmlti-platform, tidak hanya bisa dijalankan di Android saja, tapi bisa dijalankan di platform

yang lain, seperti iOS.

6. Daftar Pustaka

[1] Safaat, Nazrudin. 2011. Android : Pemrograman Aplikasi Mobile Smartphone dan Tablet PC (Edisi Revisi), Bandung: Informatika Bandung.

[2] StatCounter, 2016, Top 8 Mobile and tablet Operating Systems from Jun 2015 to Jun 2016, http://gs.statcounter.com/#mobile+tablet-os-ww-monthly-201506-201606. (diakses tanggal 30 Juli 2016)

[3] Irsan, Muhammad, 2013, Rancang Bangun Aplikasi Moblile Notifikasi Berbasis Android Untuk Mendukung Kinerja Di Instansi Pemerintahan.

[4] Pressman, Roger. 2002. Rekayasa Perangkat Lunak pendekatan praktisi. Yogyakarta : Penerbit Andi.

[5] Sommerville, Ian. 2001. Software Engineering 6th_{. Penerbit Addison}

Wesley Publishing Company.

[6] Santoso, Agus. 2012. Pembuatan Aplikasi Mobile Broadcast Informasi Perkuliahan Berbasis Android. Program Studi Teknik Informatika Fakultas Teknologi Industri Universitas Kristen Petra.