BAB III

PERANCANGAN SISTEM DAN IMPLEMENTASI

3.1 Diagram Blok Sistem

Perancangan sistem Water Level Monitoring secara keseluruhan dibagi menjadi dua
bagian, yaitu bagian hardware dan software. Diagram blok sistem Water Level Monitoring
dapat dilihat pada gambar berikut:

Software
internet

internet

internet
Sensor
Arduino Uno Sim 808 Web Server Firebase Aplikasi Android
Ultrasonik

Hardware

Menampilkan nilai ketinggian air

Menampilkan koordi nat latitude

Menampilkan Grafik Ketinggian

Menampilkan Status Ketinggian
Terhubung secara kabel

longitude alat monitoring

Terhubung secara nirkabel
Air

Air
Gambar 3.1 Diagram Blok Sistem Water Level Monitoring

Pada Gambar 3.1 menjelaskan terdapat 2 bagian yang dikerjakan pada pembuatan
Water Level Monitoring, yaitu hardware yang meliputi pengerjaan pengiriman informa s i
data dari alat monitoring dan software yang meliputi pengerjaan penerimaan informasi yang
dikirimkan oleh alat monitoring. Pada proyek akhir ini, bagian yang dikerjakan adalah
bagian software untuk memonitor dan menampilkan informasi yang di dapat dari alat
monitoring yang telah disimpan di Firebase database.

Software akan dipasangkan pada smartphone android yang akan menerima informa s i
dari alat monitoring berupa data ketinggian air, dan data lokasi melalui Firebase. Data yang
didapat akan diproses berdasarkan ketinggian air, ketika ketinggian air telah mencapai dan
atau melebihi kondisi tertentu, maka akan muncul notifikasi status ketinggian pada
smartphone.

8
3.1.1 Perancangan Web server

Web server yang akan digunakan pada pembuatan Proyek Akhir ini adalah penyedia
layanan hosting gratis hostinger.id. Web server ini berfungsi sebagai jembatan penghubung
antara Arduino Uno dengan Firebase. Arduino Uno tidak dapat mengirimkan data secara
langsung ke Firebase, hal ini disebabkan oleh alasan keamanan oleh sistem firebase itu
sendiri, karena arduino tidak mempunyai kemampuan enkripsi data. Web server juga
berfungsi untuk membangun struktur pada firebase berdasarkan data yang dikirimkan dari
alat monitoring. Kode untuk membangun struktur pada firebase dapat dilihat pada Gambar
3.2.
<?php

require_once 'firebaseLib.php';

$url = 'https://waterlevelmonitoring-7c225.firebaseio.com/';

$token = 'Pq6pLbYPc1kgoT4d1Fep6p30Yn2lLX5z5nNySVv9';

$angka=1;

while($angka<5){

$arduino_data1latitude = $_GET['arduino_data'.$angka.'latitude'];

$arduino_data1longitude = $_GET['arduino_data'.$angka.'longitude'];

$arduino_data1status = $_GET['arduino_data'.$angka.'status'];

$arduino_data1tinggi = $_GET['arduino_data'.$ angka.'tinggi'];

$firebasePath1latitude = 'data_monitoring'.$angka.'/latitude/';

$firebasePath1longitude = 'data_monitoring'.$angka.'/longitude/';

$firebasePath1status = 'data_monitoring'.$angka.'/status/';

$firebasePath1tinggi = 'data_monitoring'.$angka.'/tinggi/';

Gambar 3.2 Source Code pada Web Server

3.1.2 Perancangan Database

Pada pembuatan Proyek Akhir ini, penyimpanan data dari perangkat yang ada akan
disimpan dengan menggunakan fitur pada Firebase. Fitur layanan pada firebase ini
memudahkan untuk mengembangkan aplikasi yang dibuat sehingga tidak perlu membuat
databasenya dari nol. Firebase database sudah dilengkapi dengan kemampuan event
handler, yang mana setiap perubahan yang terjadi di database bisa dengan segera dideteksi,
sehingga sangat cocok untuk penyimpanan data yang kolaboratif. Pada database ini data
yang akan disimpan berupa data ketinggian air, dan data lokasi yang berupa latitude dan

9
longitude. Pada gambar 3.3 dapat dilihat struktur database yang digunakan untuk Proyek
Akhir ini.

Gambar 3.3 Struktur Database Firebase

3.2 Diagram Alir Sistem

Gambar 3.4 merupakan diagram alir sistem pada aplikasi Water Level Monitoring.

Mulai

Splash Screen

Menampilkan Lokasi alat

di peta

Mengambil data dari

Firebase

Menampilkan data status, data

ketinggian air, serta koordinat dari alat

Ketinggian air > T

150 cm

y
Memunculkan
notifikasi

Selesai

Gambar 3.4 Diagram Alir Sistem pada Water Level Monitoring

10
 Gambar 3.4 menjelaskan proses kerja sistem pada aplikasi water level monitoring.
Pada saat pengguna memasuki aplikasi, maka secara otomatis aplikasi akan menampilka n
splash screen, lalu pengguna akan masuk ke halaman peta yang menunjukan lokasi alat
monitoring. Saat berada pada halaman peta ini pengguna dapat memilih marker untuk
melihat data yang dikirimkan oleh alat monitoring, lalu aplikasi akan mengambil data yang
dikirim dari Firebase untuk ditampilkan pada halaman monitoring. Jika terjadi kondisi
seperti ketinggian air melebihi 150 cm, maka aplikasi akan segera memunculkan notifika s i
kepada pengguna.

3.3 Diagram Alir Data

Untuk data yang dialirkan oleh sistem dapat dilihat pada diagram alir data berikut :
3.3.1 Diagram Alir Data Level 0

Data Report
Alat monitoring System Android

Gambar 3.5 Diagram Alir Data level 0

Pada Gambar 3.5, dapat dilihat cara kerja secara sederhana dari alat monitor ing
ketinggian air, yaitu informasi dari alat monitoring dikirimkan dan diproses pada sistem, dan
data diteruskan ke android secara realtime.

3.3.2 Diagram Alir Data Level 1

Informasi Status Status Detail status

Informasi
Alat Data Data tinggi air
Tinggi air Informasi Android
monitoring management Detail Laporan
tinggi air informasi

Informasi Lokasi Lokasi Detail lokasi

Gambar 3.6 Diagram Alir Data Level 1

11
 Pada Gambar 3.6, memperlihatkan cara kerja sistem monitoring ketinggian air.
Informasi dari alat monitoring akan dikirim dan diproses lalu disimpan oleh database
berdasarkan status, tinggi air, dan lokasi alat monitoring tersebut, lalu akan dikirimka n
sebagai laporan ke android secara realtime.

3.4 Diagram Use Case

Pada aplikasi yang dirancang, terdapat 3 fitur utama yaitu menampilkan lokasi alat
monitoring di peta, mendapat data monitoring status ketinggian air, tinggi air, dan data
koordinat dari alat monitoring, diagram use case aplikasi dapat dilihat pada gambar 3.7.

Aplikasi sistem

Google Maps

User

Gambar 3.7 Diagram Use Case Aplikasi

3.4.1 Deskripsi Diagram Use Case

Pada tabel 3.1 dijelaskan deskripsi dari setiap use case, terdapat 4 use case pada
aplikasi water level monitoring.
Tabel 3.1 Deskripsi Diagram Use Case

No Use case Deskripsi

1 peta lokasi alat
2 Mendapat data status
3 Mendapat data ketinggian air
4 Mendapat data lokasi
Menampilkan lokasi alat pada Google
maps
Mendapat data status ketinggian air pada
database, terdapat tiga parameter status:
Aman, Siaga, Bahaya.
Mendapat data ketinggian air pada
database.
Mendapat data lokasi berdasarkan
Latitude dan Longitude alat monitoring
pada database.

12
3.4.2 Skenario Use case

Berikut adalah skenario untuk use case yang telah didefinisikan sebelumnya.

1. Use case Peta Lokasi

Nama Use case : Mendapat peta lokasi alat.
Deskripsi : Proses ini menjelaskan kegiatan aktor saat memasuki
aplikasi, akan menampilkan lokasi alat monitoring.
Pre-Condition : Aktor memasuki aplikasi sistem.
Post-Condition : Aktor mendapat peta lokasi alat.

2. Use case Monitoring

Nama Use case : Monitoring
Deskripsi : Proses ini menjelaskan kegiatan aktor untuk mendapat data
status ketinggian air yang berupa: Aman Siaga Bahaya, data
ketiggian air, data latitude longitude.
Pre-Condition : Aktor telah berada pada halaman maps
Post-Condition : Aktor berada pada halaman monitoring.

3.5 Perancangan Antar Muka dan Diagram Aktifitas Sistem

Untuk membangun “Aplikasi Monitoring Ketinggian Air” perlu dibuat perancangan

antar muka sebagai gambaran dari aplikasi yang akan dibuat yaitu sebagai berikut:

3.5.1 Perancangan Antar Muka Halaman Splash Screen

Pada antar muka halaman splash screen menampilkan logo dari aplikasi Water Level
Monitoring dapat dilihat pada Gambar 3.8.

Hasil Perancangan

Gambar 3.8 Antar Muka Halaman Splash Screen

13
 Gambar 3.9 dibawah ini merupakan diagram aktifitas halaman splash screen, ketika
pengguna memasuki aplikasi Water Level Monitoring maka sistem akan memunculka n
halaman splash screen.

Pengguna Splash Screen

Masuk Aplikasi

Gambar 3.9 Diagram Aktifitas Halaman Splash Screen

Gambar 3.10 merupakan source code untuk membuat halaman Splash Screen. Pada
pembuatan halaman splash creen, fungsi splashInterval adalah untuk membuat waktu lama
splash screen adalah selama 2 detik, fungsi Intent disini berfungsi untuk menuju ke
halaman berikutnya setelah aplikasi menampilkan splash screen.

public class SplashScreen extends Activity {

private static int splashInterval = 2000;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash_screen);

new Handler().postDelayed(new Runnable() {

@Override
public void run() {
Intent i = new Intent(SplashScreen.this, MapsActivity.class);
startActivity(i);
this.finish();
}
private void finish(){
}
},splashInterval);
};
}

Gambar 3.10 Code Halaman Splash Screen

14
3.5.2 Perancangan Antar Muka Halaman Peta

Gambar 3.11 merupakan antar muka halaman peta, aplikasi akan menampilkan lokasi
alat monitoring dengan menggunakan marker sebagai simbolnya, ketika marker disentuh
maka pengguna akan menuju ke halaman monitoring.

Hasil Perancangan

Gambar 3.11 Antar Muka Halaman Peta

Gambar 3.12 merupakan diagram aktifitas halaman peta, halaman peta merupakan
halaman utama dari aplikasi Water Level Monitoring. Data latitude dan longitude akan
diambil dari database yang sebelumnya sudah dikirim oleh hardware monitoring ketinggia n
air lalu menampilkan data tersebut dalam bentuk marker pada peta.

Splash Halaman
Database
Screen Peta

Ambil data latitude longitude

Output lokasi

Gambar 3.12 Diagram Aktifitas Halaman Peta

15
 Gambar 3.13 merupakan source code dari halaman maps. Pada halaman maps,
“latitude” dan “longitude” didapat dari data yang disimpan database.

@Override
public void onLocationChanged(Location location) {

mLastLocation = location;
if (mCurrLocationMarker != null) {
mCurrLocationMarker.remove();
}

Intent intent= getIntent();

Double latitude =
intent.getDoubleExtra("latitude",location.getLatitude());
Double longitude =
intent.getDoubleExtra("longitude",location.getLongitude());
LatLng latlng = new LatLng(latitude, longitude);
mMap.moveCamera(CameraUpdateFactory.newLatLng(latlng));
mMap.animateCamera(CameraUpdateFactory.zoomTo(14));

if (mGoogleApiClient != null) {

LocationServices.FusedLocationApi.removeLocationUpdates(mGoogleApiClient,
this);
}
}

Gambar 3.13 Code Halaman Peta

Berdasarkan gambar 3.13 dapat dijelaskan fungsi dari moveCamera adalah untuk
menggerakkan peta sesuai dengan koordinat yang didapat dari aplikasi. Fungsi
animateCamera adalah untuk memerintahkan peta melakukan perbesaran gambar (zoom in).

3.5.3 Perancangan Antar Muka Halaman Monitoring

Pada halaman monitoring ini Gambar 3.14, akan menampilkan data Status, Tinggi
air, dan Lokasi dari pada alat monitoring. Pada halaman monitoring ini juga terdapat tombol
Grafik Tinggi Air yang berfungsi untuk menampilkan grafik tinggi air.

Hasil Perancangan

Gambar 3.14 Antar Muka Halaman Monitoring

16
 Gambar 3.15, merupakan diagram aktifitas halaman monitoring, aplikasi mengamb il
data status, data ketinggian air, dan data koordinat lokasi alat dari database dan menampilka n
data tersebut pada halaman monitoring ini.

Halaman Halaman
Database
Peta Monitoring

Pilih marker Ambil data

Output

Gambar 3.15 Diagram Aktifitas Halaman Monitoring

Data dari database diambil dengan menggunakan metode .getValue() dengan tipe
data string. Dibawah ini Gambar 3.16, merupakan contoh kode pengambilan data status dan
ketinggian air dari database.

private void getData(final Context context) {

pDialog = new ProgressDialog(context);
pDialog.setMessage("Mengambil data ...");
pDialog.setCancelable(false);
pDialog.show();
myDb = database.getReference();

DatabaseReference db = myDb.child("data_monitoring1/status");
db.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
txt_value_status.setText(dataSnapshot.getValue().toString());
}
@Override
public void onCancelled(DatabaseError databaseError) {
}
});
DatabaseReference db2 = myDb.child("data_monitoring1/tinggi");
db2.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
txt_value_ketinggian.setText(dataSnapshot.getValue().toString());
}
@Override
public void onCancelled(DatabaseError databaseError) {
}
});

Gambar 3.16 Code Halaman Monitoring

17
 Pengambilan data dilakukan oleh metode addValueEventListener dimana pada
metode ini terdapat fungsi onDataChange yang berfungsi untuk mendeteksi perubahan data
pada database dan segera memperbaruinya.

3.5.4 Perancangan Antar Muka Halaman Grafik Ketinggian Air

Pada Gambar 3.17 merupakan halaman grafik, aplikasi akan menampilkan tanggal dan
waktu, serta tampilan grafik Ketinggian Air. Grafik ini menampilkan ketinggian air pada
hari tertentu dari Pukul 07:00-21:00.

Hasil Perancangan

Gambar 3.17 Antar Muka Halaman Grafik

Gambar 3.18 merupakan diagram aktifitas halaman grafik ketinggian air, pada saat
berada pada halaman grafik, aplikasi akan mengambil data ketinggian air dari database dan
menampilkannya di halaman grafik.

Halaman Halaman
Database
Monitoring Grafik

Pilih halaman Ambil data

Output

Gambar 3.18 Diagram Aktifitas Halaman Grafik

18
 Di bawah ini Gambar 3.19 merupakan source code pengambilan data dari halaman
grafik.

private void getData() {

myRef1 = database.getReference();
DatabaseReference T0 = myRef1.child("grafik/t0");
T0.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
temp0 = Float.parseFloat(dataSnapshot.getValue().toString());
updateGraph();
}
@Override
public void onCancelled(DatabaseError databaseError) {
}
});
DatabaseReference T1 = myRef1.child("grafik/t1");
T1.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
temp1 = Float.parseFloat(dataSnapshot.getValue().toString());
updateGraph();
}
@Override
public void onCancelled(DatabaseError databaseError) {

}
});

Gambar 3.19 Source Code Pengambilan Data Pada Halaman Grafik

Pada gambar 3.19 pengambilan data halaman grafik dilakukan dengan cara yang
sama dengan halaman monitoring, dengan menggunakan metode addValueEventListener.

3.6 Perancangan Pengiriman Notifikasi Sistem

Gambar 3.20 merupakan source code yang berfungsi untuk memunculkan noifikasi pada
aplikasi. Notifikasi akan muncul ketika ketinggian air berada pada kondisi tertentu.
Notifikasi yang dimunculkan oleh aplikasi adalah “Bahaya Ketinggian Air Melebihi Batas”
disertai dengan bunyi dan getaran pada smartphone.
if (tinggi > 150 && tinggi <= 200) {
shownotification("Water Level Monitoring 1", "Bahaya Ketinggian Air Melebihi Batas!", (tinggi));}
public void shownotification(String a, String b, int id){
NotificationCompat.Builder builder =
(NotificationCompat.Builder) new NotificationCompat.Builder(this)
.setSmallIcon(R.mipmap.ic_water_level2)
.setContentTitle(a)
.setContentText(b);
builder.setDefaults(Notification.DEFAULT_SOUND|Notification.DEFAULT_LIGHTS|Notification.DEFAULT_V
IBRATE);
NotificationManagerCompatnotificationManager=NotificationManagerCompat.from(MapsActivity.this);
notificationManager.notify(id, builder.build());
Intent notificationIntent = new Intent(this, MapsActivity.class);
PendingIntent contentIntent = PendingIntent.getActivity(this, id, notificationIntent,
PendingIntent.FLAG_UPDATE_CURRENT);
builder.setContentIntent(contentIntent);
builder.setAutoCancel(true);
NotificationManager manager = (NotificationManager)
getSystemService(Context.NOTIFICATION_SERVICE);
manager.notify(id, builder.build());
}

Gambar 3.20 Source Code Perancangan Pengiriman Notifikasi Sistem

19
 Pada gambar 3.20 merupakan Code perancangan notifikasi pada aplikasi. Terdapat
fungsi if (tinggi > 150 && tinggi <= 200). Didefinikasi jika ketinggian air lebih dari
150 dan kurang dari sama dengan 200 maka sistem akan mengirimkan notifikasi, dengan
menggunakan fungsi “shownotification("Water Level Monitoring 1", "Bahaya
Ketinggian Air Melebihi Batas!") ”.

Gambar 3.21 Pengiriman Notifikasi

3.7 Pengembangan Sistem

Berikut merupakan spesifikasi yang digunakan dalam pembuatan aplikasi Water Level
Monitoring.
Tabel 3.2 Spesifikasi Pengembangan Sistem
No Jenis Spesifikasi
1 Sistem Operasi Smartphone Android
2 Script Editor Android Studio 2.3.3
3 Database Firebase
4 Versi Android Marshmallow 6.0

Berdasarkan tabel 3.2 dapat dijelaskan untuk pengerjaan aplikasi Water Level
Monitoring akan diimplementasikan pada smartphone dengan sistem operasi Android versi
6.0. Untuk pembuatan aplikasinya pengembang menggunakan software Android Studio versi
2.3.3. Pada pembuatan aplikasi ini dibutuhkan suatu database untuk penyimpanan data,
database yang digunakan pada pebuatan aplikasi adalah Firebase.

20
3.8 Implementasi

Implementasi aplikasi monitoring air ini akan dijalankan pada 3 perangkat dengan
sistem operasi yang berbeda yaitu Lolipop, Marshmallow, dan Nougat untuk mengeta hui
sistem berjalan dengan baik.

3.9 Skenario Pengujian

Pada Tabel 3.3 merupakan skenario pengujian yang akan dilakukan. Skenario pengujia n
meliputi pengujian fungsionalitas aplikasi, pengujian keseluruhan sistem, dan pengujia n
delay.
Tabel 3.3 Skenario Pengujian

Skenario Tujuan
Identifikasi
Pengujian
Fungsionalitas Mengukur Akurasi data
Skenario 1 Pembacaan koordinat yang
Lokasi dihasilkan oleh alat
Fungsionalitas
Pembacaan Data Mengukur akurasi
Skenario 2
Status dan pembacaan data aplikasi
Ketinggian Air
Menguji notifikasi yang
Fungsionalitas dimunculkan aplikasi
Skenario 3
Notifikasi saat ketinggian air berada
pada kondisi tertentu
Menghitung berapa
banyak penggunaan data
Pengujian yang dikonsumsi saat
Skenario 4
Penggunaan Data aplikasi idle dan saat
aplikasi memunculkan
notifikasi
Pengujian Menguji alat dapat
Skenario 5 Keseluruhan terhubung dengan
Sistem aplikasi
Menghitung berapa lama
Skenario 6 Pengujian Delay delay pengiriman data
dari alat ke database
Menghitung berapa lama
Skenario 7 Pengujian Delay delay pengiriman data
dari database ke aplikasi

Berdasarkan Tabel 3.3 ada 7 skenario pengujian yang akan dilakukan untuk meliha t
fungsionalitas aplikasi berjalan dengan baik.

21