Abstrak —Aplikasi chat yang sudah ada umumnya menggunakan keyboard  sebagai  media  input  dari  pengguna  untuk  mengirim pesan teks dan masih belum memberikan pengalaman yang lebih kepada pengguna dalam melakukan interaksi. Android menyediakan  sebuah  library  untuk  menampilkan    media  lukis layaknya  sebuah  kanvas  yaitu  Android  Graphics  Library  yang pemanfaatannya  saat  ini  hanya  sebatas  pembuatan  aplikasi menggambar seperti di kanvas. Menggunakan library ini, penulis bermaksud  memberikan  pengalaman  baru  kepada  pengguna dengan  mengembangkan  sebuah  aplikasi  yang  memiliki  fitur mengirim  pesan  dengan  media  input  berupa  kanvas  dan membagikan  kanvas  ke  pengguna  lain  sehingga  kedua  kanvas pengguna  tersinkronisasi  secara  realtime  dengan  dukungan Firebase sebagai back-end services.
Kata  Kunci —Android  Graphics,  Chat,  Firebase,  Keyboard, Library.

## I. PENDAHULUAN
EMASUKI  era  teknologi    saat  ini,  kebutuhan  akan fasilitas  penyebaran  media  informasi  yang  cepat  dan mudah  semakin    meningkat  terutama  pada  aplikasi  Android. Salah  satu  fasilitas  media  komunikasi  sekaligus  tempat bertukarnya  informasi  yang  paling  populer  dan  paling  banyak digunakan  masyarakat  adalah chat .  Pertukaran  informasi dalam fasilitas chat saat ini tidak hanya berupa data teks, akan tetapi  pengguna  juga  bisa  mengirimkan  berkas  berupa  video, gambar, audio, atau jenis  berkas lainnya.
Kebanyakan  dari  aplikasi chat yang  telah  bermunculan menggunakan keyboard sebagai  media  untuk input data  yang akan  dikirimkan  kepada  lawan chat .  Pada  penelitian  ini ditawarkan sebuah media lain yang disediakan oleh salah satu library yang terdapat dalam pemrograman Java untuk aplikasi Android yaitu kanvas. Kanvas menangani proses gambar yang didapat  dari  gerak  sentuhan  layar  pada  perangkat  telepon pintar. Hasil menggambar di kanvas inilah yang saling dikirim antar  pengguna  sebagai  sumber  informasi  atau  data.  Dengan adanya  aplikasi  ini,  pengguna  bisa  merasakan  pengalaman baru dalam melakukan percakapan online dengan lawan chat . Selain  itu,  untuk  membuat  aplikasi  menjadi  lebih  menarik, disediakan  juga  fasilitas  untuk  berbagi  kanvas  dengan  lawan chat sehingga  dua  pengguna  bisa  bekerja  dalam  satu  kanvas yang  terhubung  secara real  time .  Hal  ini  akan  membuat
aplikasi menjadi lebih interaktif dan menyenangkan.

## II. TINJAUAN PUSTAKA

## A. Aplikasi Chat Serupa
Beberapa  aplikasi  dengan  layanan  chat  telah  tersebar  di kalangan  pengguna smartphone ,  antara  lain  Line,  Messenger, WhatsApp. Selain itu, juga terdapat sebuah aplikasi yang telah mengimplementasikan  fitur  berbagi  kanvas  antar  pengguna. Nama  aplikasi  ini  adalah  FiveTalk.  Aplikasi  ini  merupakan aplikasi  yang  sudah  sangat  berkembang.  Namun,  aplikasi  ini masih memiliki error dalam penggunaannya. Aplikasi ini juga memerlukan  usaha  lebih  dari  pengguna  dalam  pendaftaran akun.  Pengguna  harus  memasukkan  ID  secara  manual sejumlah  20  karakter  yang  digunakan  sebagai  nilai  unik  yang berbeda  antar  pengguna.  Pada  kanvas  yang  disediakan  juga belum  terdapat  fitur  penambahan  bentuk  dua  dimensi  seperti persegi, lingkaran, atau garis.

## B. Firebase
Adalah Backend as a Service (BaaS) yang saat ini dimiliki oleh  Google.  Firebase  merupakaan  solusi  yang  ditawarkan oleh  Google  untuk  mempermudah  pengembangan  aplikasi mobile [1].  Dua  fitur  menarik  dari  Firebase  adalah  Firebase Remote  Config  dan  Firebase  Real  Time  Database.  Selain  itu juga terdapat fitur pendukung untuk aplikasi yang memerlukan push notification yaitu Firebase Notification Console.
Firebase Database merupakan penyimpanan basis data non- SQL yang memungkinan untuk menyimpan beberapa tipe data. Tipe data itu antara lain  String, Long, dan Boolean. Data pada Firebase  Database  disimpan  sebagai  objek  JSON tree .  Tidak seperti  basis  data  SQL,  tidak  ada  tabel  dan  baris  pada  basis data  non-SQL.  Ketika  ada  penambahan  data,  data  tersebut akan  menjadi node pada  struktur  JSON. Node merupakaan simpul  yang  berisi  data  dan  bisa  memiliki  cabang-cabang berupa node lainnya  yang  berisi  data  pula.  Proses  pengisian suatu data ke Firebase Database dikenal dengan istilah push . Selain  Firebase  Database,  Firebase  menyediakan  beberapa layanan lainnya yang juga dimanfaatkan dalam pengembangan aplikasi ini. Layanan tersebut antara lain Firebase Authentication,  Storage,  dan  Cloud  Messaging.    Pada
Rancang Bangun Aplikasi Chat pada Platform Android dengan Media Input berupa Canvas dan Shareable Canvas untuk Bekerja Dalam Satu Canvas secara Online
Luffi Aditya Sandy, Rizky Januar ,dan Ridho Rahman Hariadi
Departemen Teknik Informatika, Fakultas Teknologi Informasi Institut Teknologi Sepuluh Nopember (ITS)
E-mail : rizky@if.its.ac.id
M
pengembangan aplikasi, layanan lainnya yang digunakan pada pengembangan  aplikasi  adalah  Firebase  Storage.  Layaknya sebuah  penyimpanan  awan,  Firebase  Storage  memungkin pengembang  untuk  mengunggah  atau  mengunduh  sebuah berkas. Pada pengembangan aplikasi,

## C. Android Graphics Library
Framework Android menyediakan sekumpulan fungsi untuk menggambar bentuk dua dimensi[2]. Library ini memungkinkan  programmer  untuk  membuat  grafik  kedalam kanvas  atau  memodifikasi  tampilan  yang  sudah  ada.  Kanvas adalah  antarmuka  untuk  menuju  ke layer tempat  grafis sebenarnya  digambarkan.  Melalui  kanvas,  gambar    secara aktual  ditunjukkan  dalam  sebuah  bitmap  dasar  yang ditempatkan dalam suatu jendela.

## D. Realm
Adalah  sebuah  alternatif  penyimpanan  data  pada  yang  bisa menggantikan SQLite sebagai penyimpanan data bawaan pada Android.  Realm  melakukan  penyimpanan  dengan  berorientasi pada objek ( native objects ). Tidak perlu melakukan penyalinan objek  dari  penyimpanan  basis  data,  memodifikasi,  dan menyimpannya  lagi  karena  pengembang  bekerja  dalam  objek yang  sesungguhnya.  Setiap  objek  tersinkronisasi  pada  setiap aktivitas  yang  dilakukan  pada  objek  tersebut  dan  data  dalam objek akan selalu tersimpan pada aplikasi[3].

## III. DESAIN SISTEM

## A. Perancangan Arsitektur
Pada  arsitektur  aplikasi,  digambarkan  dependensi  aplikasi terhadap komponen-komponen di  luar  aplikasi  yang digolongkan ke dalam dua kelompok komponen yaitu services dan library . Services adalah  layanan-layanan  yang  digunakan aplikasi dalam mendukung penyimpanan atau pengiriman data baik  lokal  maupun  antar  perangkat,  sedangkan library adalah kumpulan  fungsi  untuk  memudahkan  implementasi  program. Arsitektur ini dapat dilihat pada Gambar 1.
Gambar 1.  Arsitektur Sistem

## B. Perancangan Alur Kasus Penggunaan
Pada  perancangan  ini  dijelaskan  alur  penggunaan  aplikasi oleh  pengguna  seperti  pada  Gambar  1  sehingga  dapat digunakan  sebagai  acuan  untuk  membuat  antarmuka  aplikasi. Secara  umum,  pengguna  bisa  melakukan  dua  fungsi  utama yaitu  melakukan chat menggunakan  kanvas  dan  membagi kanvas dengan pengguna lain.
Gambar 2.  Diagram Alir Penggunaan Aplikasi

## C. Perancangan Alur Pemrosesan Data
Perancangan  alur  pemrosesan  data menjelaskan cara sistem dalam memproses data sehingga bisa ditampilkan ke pengguna sesuai  fungsinya.  Pada  alur  pemrosesan  data  dibagi  menjadi beberapa bagian yaitu pengolahan, penyimpanan, perpindahan, dan pengiriman data pada sistem.
1) Alur Pengolahan Data Sentuhan pada Kanvas
Alur  pengolahan  data  kanvas  berisi  langkah-langkah aplikasi  dalam  menerima  sentuhan  dan  menggambarkan sentuhan  tersebut  ke  dalam  kanvas  yang  ditampilkan  ke pengguna.
a. Aplikasi  menyediakan  suatu  fungsi  yang  menangani setiap  sentuhan  yang  diterima  kanvas.  Sentuhan  dibagi menjadi  tiga  jenis  yaitu  sentuhan  awal  saat  pengguna pertama  kali  memberi  sentuhan,  melakukan  perpindahan sentuhan,  dan  saat  pengguna  melepas  sentuhan  pada kanvas.
b. Aplikasi  menyediakan  suatu  variabel  yang  disebut path untuk  menyimpan  satu  grafis  mulai  dari  pengguna menyentuh hingga melepas sentuhan.
c. Ketika  satu  jenis  sentuhan  diterima,  aplikasi  melakukan pengecekan  jenis  gambar  yang  dipilih  pengguna.  Jenis gambar  dibagi  menjadi  beberapa  bentuk  yaitu  persegi, lingkaran, garis, dan abstrak ( freehand ).
d. Saat  pengguna  melepas  sentuhan  dari  kanvas, path menggambar  bentuk  yang  dipilih  pengguna  ke  dalam
kanvas  dengan  titik-titik  koordinat  yang  direkam  selama sentuhan berlangsung.
2) Alur Penyimpanan Data pada Offline Canvas
Alur  penyimpanan  data  pada offline  canvas melalui beberapa tahapan sebagai berikut:
a. Aplikasi  menyediakan  suatu  penyimpanan  yang  berisi daftar path yang disebut canvas path .
b. Setiap pengguna melepaskan sentuhan, maka canvas path menyimpan path tersebut pada urutan terakhir.
Langkah  pertama  sampai  kedua  diulang  setiap  pengguna mulai  memberikan gesture atau  menyentuh  layar  pada kanvas lagi.
3) Alur  Perpindahan  Data  pada  Fitur Undo dan Redo Offline Canvas Alur  penyimpanan  data    pada  fitur undo dan redo offline canvas melalui  beberapa  tahapan  untuk  setiap  satu  kali prosesnya.  Tahapan-tahapan  pada  satu  kali  penggunaan  fitur undo adalah  sebagai berikut:
a. Membuat  sebuah  variabel  yang  berisi  daftar path yang disebut redo path untuk menyimpan path yang dibatalkan oleh pengguna.
b. Melakukan  pengecekan  pada canvas  path .  Jika  kosong, maka fitur undo tidak bisa digunakan.
c. Jika canvas  path tidak  kosong,  maka path terakhir  pada canvas path akan dipindahkan ke dalam redo path . Setiap pengguna memberikan sebuah gesture , maka semua path pada redo  path akan  dihapus.  Selanjutnya  tahapan- tahapan  pada  satu  kali  penggunaan  fitur redo adalah  sebagai berikut :
a. Melakukan  pengecekan  pada redo  path .  Jika  kosong, maka fitur tidak bisa digunakan.
b. Jika redo  path tidak  kosong,  maka path terakhir  pada redo  path akan  dipindahkan  ke  urutah  terakhir  dalam canvas path . Kemudian canvas akan  menggambar  ulang  setiap path yang ada dalam canvas path sesuai dengan urutan masuk 4) Alur Penyimpanan Data pada Berbagi Kanvas
Alur  penyimpanan  data  pada  berbagi  kanvas  melalui beberapa tahapan sebagai berikut:
a. Aplikasi  menyediakan  sebuah global  path yang menyimpan  daftar  dari  semua path yang  dibuat  oleh kedua  pengguna  dan  sebuah canvas  path untuk menyimpan semua path milik masing-masing pengguna.
b. Ketika  pengguna  melepaskan  sentuhan  dan  disimpan kedalam sebuah path , maka path tersebut akan disimpan di urutan terakhir pada dua daftar path yaitu global path dan canvas path milik pengguna tersebut.
Shareable  canvas pada  pengguna  akan  menggambar  ulang setiap ada penambahan path di global path .
5) Alur  Perpindahan  Data Undo dan Redo pada Shareable Canvas
Alur  penyimpanan  data  pada  berbagi  kanvas  melalui beberapa tahapan sebagai berikut:
a. Aplikasi  menyediakan  sebuah global  path yang menyimpan  daftar  dari  semua path yang  dibuat  oleh kedua  pengguna  dan  sebuah canvas  path untuk menyimpan semua path milik masing-masing pengguna.
b. Ketika  pengguna  melepaskan  sentuhan  dan  disimpan kedalam sebuah path , maka path tersebut akan disimpan di urutan terakhir pada dua daftar path yaitu global path dan canvas path milik pengguna tersebut.
Shareable  canvas pada  pengguna  akan  menggambar  ulang setiap ada penambahan path di global path .

## D. Perancangan Basis Data
Perancangan basis data digunakan untuk menyusun struktur data  sistem  pada  penelitian  ini  dengan  mengimplementasikan Firebase  Database  sebagai  media  penyimpanan  data.  Firebase Database  merupakan  basis  data  non-SQL  sehingga  tidak memerlukan aturan tertentu untuk mengatur struktur basis data. Oleh karena itu, rancangan basis data pada Firebase Database disimpan  dalam  format  objek  JSON tree yang  tidak  memiliki tabel  atau  baris  seperti  data  SQL.  Pada  JSON tree dikenal dengan  istilah node untuk  setiap  proses  memasukkan  data  ke Firebase Database.

## IV. UJI COBA APLIKASI
Terdapat  beberapa  metode  yang  dapat  digunakan  untuk melakukan  pengujian  terhadap  perangkat  lunak.  Pada pengerjaan  aplikasi  ini,  digunakan  pengujian  dengan  metode White-Box dan Black-Box.
Metode White-Box adalah pengujian dengan meneliti kode- kode  pada  aplikasi  dan  menganalisis  kesalahan  yang terdeteksi.  Metode  Black-Box  adalah  pengujian  terhadap fungsionalitas dari perangkat  lunak. Metode Grey-Box adalah metode  pengujian  perangkat  lunak  yang  mengombinasikan antara  metode  Black-Box  dan  White-Box.  Metode  Grey-Box berusaha mengambil kelebihan dari kedua metode tersebut dan mengurangi kekurangan keduanya.

## A. Pengujian Fungsionalitas
Pengujian  fungsionalitas  dilakukan  dengan  menyiapkan beberapa  skenario  pengujian  sebagai  tolak  ukur  keberhasilan pengujian  dan  mengacu  pada  fungsionalitas  aplikasi.  Metode pengujian  yang  digunakan  pada  pengujian  fungsionalitas mengacu pada metode White-Box dan Black-Box.

## B. Pengujian Aplikasi terhadap Pengguna
Pengujian  perlu  dilakukan  oleh  pengguna  secara  langsung sehingga  bisa  mengetahui  bahwa  aplikasi  telah  memenuhi tujuan  aplikasi  atau  belum,  yaitu  memberi  pengalaman  baru dalam  berinteraksi  dengan  pengguna  lain.  Pengujian  juga dilakukan  untuk  mengetahui  bahwa  fitur  utama  aplikasi  telah berjalan sesuai dengan rancangan. Fitur utama yang diuji oleh pengguna  pada  bagian  ini  adalah  pengiriman  gambar  sebagai hasil  konversi  dari  kanvas  yang  pengguna  buat  dan  membagi kanvas dengan pengguna lain sehingga bisa bekerja dalam satu kanvas  yang  terhubung.  Hasil  kuisioner  untuk  dua  fitur  dapat dilihat pada Tabel 1 dan Tabel 2.
Tabel 1. Hasil Kuisioner Fitur Mengirim Pesan No Pertanyaan Nilai 1 Apakah pesan gambar/teks yang dikirim oleh pengguna lain kepada anda dapat diterima dengan baik? 4,0 2 Apakah tampilan aplikasi mempermudah dan membuat anda nyaman dalam menggunakan aplikasi? 3,5 3 Apakah aplikasi memberikan pengalaman baru dalam melakukan chat ? 3,7 Tabel 2. Hasil Kuisioner Fitur Berbagi Kanvas No Pertanyaan Nilai 1 Apakah aplikasi menghubungkan kanvas milik anda dengan pengguna lain? 3,9 2 Apakah kanvas secara cepat diperbarui ketika pengguna lain yang terhubung membuat suatu gambar/goresan? 3,3 3 Apakah tampilan aplikasi mempermudah anda dalam menggunakan fitur “share canvas”? 3,0 4 Apakah aplikasi memberikan pengalaman baru kepada anda dalam berinteraksi kepada pengguna?
3,5

## V. KESIMPULAN
Berdasarkan pengujian fungsionalitas yang dilakukan, dapat semua pengujian menunjukkan nilai keberhasilan. Oleh karena itu  dapat  disimpulkan  bahwa  aplikasi  sudah  memenuhi semua fungsionalitas  yang  diharapkan.  Selain  itu,  Pengujian  yang dilakukan terhadap pengguna menghasilkan kesimpulan dalam berupa  rata-rata  yang  menunjukkan  persetujuan  pengguna terhadap  kesesuaian,  kemudahan,  dan  ketertarikan  fitur  yang disediakan aplikasi.
Berdasarkan  Tabel  1  dan  Tabel  2,  dapat  diketahui  bahwa nilai rata-rata hasil kuesioner adalah 3,557. Nilai rata-rata yang telah  melebihi  angka  3  atau  memiliki  arti  “setuju” menunjukkan  bahwa  aplikasi  sudah  nyaman  dan  mudah digunakan  serta  fitur  pada  aplikasi  telah  memberikan pengalaman baru kepada pengguna dalam berinteraksi dengan pengguna lain.

## DAFTAR PUSTAKA
[1] B. Octavianus, [Android] Apa itu Firebase ? 2016.
[2] Developer.android.com,  “Canvas  and  Drawables  |  Android Developers,” developer.android.com ,  2016.  [Online].  Available: https://developer.android.com/guide/topics/graphics/2d- graphics.html.
[3] Realm.io,  “Realm  Mobile  Platform  Overview,” realm.io ,  2017. [Online]. Available: https://realm.io/docs/get-started/overview.