Perancangan Prototype Aplikasi Pengumuman Kelas...

19
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 SALATIGA 1

Transcript of Perancangan Prototype Aplikasi Pengumuman Kelas...

Page 1: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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

SALATIGA

1

Page 2: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

JULI 2016

2

Page 3: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

3

Page 4: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

4

Page 5: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

5

Page 6: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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.

6

Page 7: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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.

7

Page 8: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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

sesuai dengan tujuan dan kebutuhan sistem.

8

Page 9: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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

mahasiswaterima 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

dilihat pada Gambar 3.

9

Page 10: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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

MahasiswaSistemDosen

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.

10

Page 11: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

: 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

pada Gambar 5.

11

Page 12: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

tb_mhs

NIMNama_mhs

lihat_jadwal()lihat_pengumuman()

tb_detailkelas

ID_kelasNIM

1..* 0

tb_dosen

ID_dosenNama_dosenEmail

tambah_kelas()edit_kelas()hapus_kelas()kirim_pengumuman()

tb_kelas

ID_kelasNama_kelasID_dosenHariJam

0..*1 0..*1

01..*

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

12

Page 13: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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); 4. Firebase newFirebase = firebase.push();

13

Page 14: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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 pushnotification, device terlebih dahulu diregistrasikan unique IDnya kefirebase cloud. Dari firebase akan membuat ID secara acak. Kode program1 merupakan kode untuk meminta unique ID ke server firebase.

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.

14

Page 15: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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

15. if(isset($_REQUEST[‘success’])){?>

15

Page 16: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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,

16

Page 17: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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

Alpha testing. Di tahap Alpha Testing, pengujian dilakukan pada setiap

17

Page 18: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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 dapatmemasukkanNIM yangtelah terdaftar.

MemasukkanNIM yangsama.

Munculalert“Alreadyregistered”

Pengiriman pushnotification

Mengirimkanpesan pushnotification

Memilih kelasdanmemasukkanpengumumansertamengirimnyake deviceandroid.

Pesan pushnotificationtertampil diandroid.

Pengecekanpengumumanterkirim

Menampilkanhasil daripengirimanpengumuman

Pengumumanyang akandikirimkan kedevice android

Daftar IDyangmengambilkelas danNIM

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-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

18

Page 19: Perancangan Prototype Aplikasi Pengumuman Kelas ...repository.uksw.edu/bitstream/123456789/11242/2/T1_672010016_Full... · kelas dan mengirimkannya dalam bentuk push notification

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.

19