bab iii pembahasan · database firebase. setelah input kemudian klik login untuk mendapatkan akses...

39
39 BAB III PEMBAHASAN 3.1. Tinjauan Kasus Untuk memperoleh kesimpulan yang lebih jelas dan spesifik sehingga dapat membantu dalam perancangan aplikasi maka perlu dilakukan analisis. Analisis juga dilakukan sebagai media pengumpulan data untuk mengembangkan aplikasi yang dibuat. 3.1.1. Identifikasi Masalah Kendaraan bermotor merupakan alat yang paling dibutuhkan sebagai media transportasi. Pesatnya kemajuan jaman, membuat kendaraan bermotor sangat dibutuhkan sebagai media transportasi. Kendaraan bermotor membuat efisiensi waktu dan tenaga karena diciptakan memang untuk membantu aktivitas manusia. Jumlah kendaraan bermotor di Indonesia dapat dilihat pada tabel berikut ini: Sumber : Korlantas Polri Gambar III.1 Jumlah Kendaraan Bermotor Di Indonesia Salah satu faktor yang dapat mengakibatkan masalah dalam berkendara adalah ban kendaraan bocor dalam perjalanan. Hal tersebut berpengaruh terhadap kebutuhan akan layanan bengkel tambal ban, sehingga diperlukan media informasi untuk

Upload: others

Post on 10-Nov-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

39

BAB III

PEMBAHASAN

3.1. Tinjauan Kasus

Untuk memperoleh kesimpulan yang lebih jelas dan spesifik sehingga dapat

membantu dalam perancangan aplikasi maka perlu dilakukan analisis. Analisis juga

dilakukan sebagai media pengumpulan data untuk mengembangkan aplikasi yang

dibuat.

3.1.1. Identifikasi Masalah

Kendaraan bermotor merupakan alat yang paling dibutuhkan sebagai media

transportasi. Pesatnya kemajuan jaman, membuat kendaraan bermotor sangat

dibutuhkan sebagai media transportasi. Kendaraan bermotor membuat efisiensi

waktu dan tenaga karena diciptakan memang untuk membantu aktivitas manusia.

Jumlah kendaraan bermotor di Indonesia dapat dilihat pada tabel berikut ini:

Sumber : Korlantas Polri

Gambar III.1 Jumlah Kendaraan Bermotor Di Indonesia

Salah satu faktor yang dapat mengakibatkan masalah dalam berkendara adalah

ban kendaraan bocor dalam perjalanan. Hal tersebut berpengaruh terhadap kebutuhan

akan layanan bengkel tambal ban, sehingga diperlukan media informasi untuk

Page 2: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

40

membantu mencari lokasi bengkel-bengkel tambal ban berada. Media informasi

tersebut dapat berupa teknologi yang mengikuti perkembangan teknologi informasi

yaitu teknologi Global Positioning Sistem (GPS), yang terintegrasi dengan

smartphone-smartphone pada saat ini, salah satunya smartphone yang berbasis

sistem operasi Android.

Android adalah sistem operasi untuk ponsel yang berbasis Linux. Menurut

informasi dari analisis Asymco dan Horace Dediu, Android hanya butuh 5 tahun atau

20 kwartal untuk mencapai 1 miliar pengguna. Sedangkan produk lainnya, BlackBerry

butuh 43 kwartal untuk mencapai 225 juta pengguna. Windows Mobile yang

dikembangkan oleh Microsoft butuh 30 kwartal untuk mencapai 72 juta pengguna.

Saat ledakan penggunaan smartphone terjadi, Apple butuh 23 kwartal agar iOS

buatannya bisa digunakan hingga mencapai 700 juta pengguna.

Untuk mengetahui bengkel tambal ban, diperlukan teknologi yang mampu

menyimpan dan mendistribusikan data bengkel tambal ban. Teknologi yang cocok

digunakan adalah cloud computing karena kita dapat menyimpan dan mengakses data

bengkel tambal ban dari mana saja dan kapan saja.

3.1.2. Analisa Kebutuhan Aplikasi

Dalam pembuatan aplikasi yang dibangun harus dapat memenuhi kebutuhan

seperti berikut:

1. Bagi User

a. Pengguna dapat melihat halaman menu utama berisikan lokasi tambal ban

terdekat

b. Pengguna dapat melihat rute ke tempat penyedia tambal ban

c. Pengguna dapat menghubungi tukang tambal ban

d. Pengguna bisa berbagi tips dan trik seputar permasalahan kendaraan

Page 3: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

41

2. Bagi Admin

a. Admin bisa menambahkan, mengurangi dan mengedit daftar bengkel

b. Admin menambahkan tips dan trik bagi user

c. Admin bisa menerima atau menolak tip dan trik dari user

d. Sebelum menambahkan daftar bengkel tambal ban, admin akan menerima

request via whatsapp dari pemohon

3.2. Spesifikasi Rancangan Program

Setelah mengidentifikasi masalah dan menganalisa kebutuhan aplikasi yang

akan dibangun, maka langkah selanjutnya merancang spesifikasi program. Spesifikasi

rancangan program sangat diperlukan guna menunjang kelancaran dalam

menyelesaiakan aplikasi. Sebuah program diawali dari sebuah rancangan untuk

mendapatkan hasil terbaik. Berikut adalah penjelasannya:

3.2.1. Spesifikasi Bentuk Masukan

Untuk mempermudah pengolahan data dan kenyamanan pengguna (user),

aplikasi Go Tumbal terbagi 2 dibedakan untuk admin dan user. Pertama akan

membahas spesifikasi untuk admin.

1. Splash Screen Admin

Nama : activity_splash_screen

Fungsi : Untuk menampilkan halaman awal program

Media : Layout

Frekuensi : Akan muncul otomatis pada saat aplikasi dijalankan.

Keterangan : Pada rancangan activity_splash_screen ini terdapat nama

aplikasi dan tagline.

Page 4: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

42

Gambar III.2. Layout Splashscreen

2. Login Admin

Nama : activity_login

Fungsi : Untuk masuk (login) bagi admin.

Media : Layout

Frekuensi : Akan muncul saat admin pertama kali membuka aplikasi.

Keterangan : Pada rancangan activity_login admin akan diminta

memasukan email dan password yang sudah tersimpan di

database firebase. Setelah input kemudian klik login untuk

mendapatkan akses admin pada aplikasi.

Page 5: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

43

Gambar III.3. Layout Login

3. Menu Utama Admin

Nama : activity_dashboard_drawer

Fungsi : Menampilkan menu utama.

Media : Menu

Frekuensi : Akan muncul otomatis setelah splashscreen dan login

Keterangan : Pada tampilan activity_dashboard_drawer menampilkan

logo dan nama aplikasi. Admin memiliki 5 akses utama

dashboard, tips dan trik, tips dan trik user, tentang aplikasi

dan logout

Page 6: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

44

Gambar III.4. Layout Menu

4. Dashboard Admin

Nama : activity_main

Fungsi : Menampiilkan google maps dan daftar bengkel terdekat

Media : Layout

Frekuensi : Akan muncul otomatis setelah splashscreen

Keterangan : Pada tampilan activity_main akan muncul pin lokasi

terkini dari perangkat. Kemudin dibagian bawah ada

fragment detail bengkel yang berfungsi untuk

menampilkan lokasi tambal ban terdekat dari perangkat.

Di tampilan ini tersedia button menu, detail bengkel, edit

bengkel, dan tambahkan bengkel yang hanya akan tampil

pada aplikasi khusus untuk admin.

Page 7: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

45

Gambar III.5. Layout Dashboard

5. Tips & Trik Admin

Nama : fragment_tips_and_trik

Fungsi : Menampiilkan video tips dan trik

Media : Layout

Frekuensi : Akan muncul setelah klik button tips dan trik di layout

menu

Keterangan : Pada tampilan fragment_tips_and_trik akan muncul video

tutorial seputar permasalahan ban dan video lain yang

terkait. Pada tapilan ini admin berhak merubah dan

menghapus video pilihan. Admin juga bisa menambahkan

video tips dan trik terbaru dengan mengklik tombol +

Page 8: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

46

Gambar III.6. Layout Tips dan Trik

6. Tips & Trik Dari User

Nama : fragment_tips_and_trik_dari_user

Fungsi : Menampiilkan video tips dan trik kiriman dari user

Media : Layout

Frekuensi : Akan muncul setelah klik button tips dan trik user di

layout menu

Keterangan : Pada tampilan fragment_tips_and_trik_dari_user setelah

user upload video maka sebelum bisa dilihat oleh user lain

video akan difilter terlebih dahulu, apakah akan diterima

atau ditolak. Ketika admin memilih menerima maka video

akan muncul di tampilan Tips & Trik. Namun, ketika

admin memutuskan menolak maka video tersebut tidak

akan di tampilkan di aplikasi user dan akan terhapus dari

database.

Page 9: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

47

Gambar III.7. Layout Tips & Trik Dari User

7. Tentang Aplikasi

Nama : fragment_tentang_aplikasi

Fungsi : Menampiilkan info tentang aplikasi

Media : Layout

Frekuensi : Akan muncul setelah klik button tentang aplikasi di layout

menu

Keterangan : Layout ini memberikan informasi aplikasi. Akan ada

tampilan logo dan nama aplikasi, deskripsi aplikasi, logo

universitas, dan developer aplikasi.

Page 10: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

48

Gambar III.8. Layout Tentang Aplikasi

Selanjutnya akan membahas spesifikasi aplikasi untuk user

1. Menu User

Nama : activity_dashboard_drawer

Fungsi : Menampilkan menu utama.

Media : Menu

Frekuensi : Akan muncul saat user mengklik button menu

Keterangan : Pada tampilan activity_dashboard_drawer menampilkan

logo dan nama aplikasi. User memiliki 4 akses utama

dashboard, tips dan trik, daftarkan bengkelmu, dan tentang

aplikasi.

Page 11: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

49

Gambar III.9. Layout Menu

2. Dashboard User

Nama : activity_main

Fungsi : Menampiilkan google maps dan daftar bengkel terdekat

Media : Layout

Frekuensi : Akan muncul otomatis saat user membuka aplikasi

Keterangan : Pada tampilan activity_main akan muncul pin lokasi

terkini dari perangkat. Kemudin dibagian bawah ada

fragment detail bengkel yang berfungsi untuk

menampilkan lokasi tambal ban terdekat dari perangkat.

Di tampilan ini tersedia button detail bengkel.

Page 12: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

50

Gambar III.10. Layout Dashboard

3. Tips & Trik

Nama : fragment_tips_and_trik

Fungsi : Menampiilkan video tips dan trik

Media : Layout

Frekuensi : Akan muncul setelah klik button tips dan trik di layout

menu

Keterangan : Pada tampilan fragment_tips_and_trik akan muncul video

tutorial seputar permasalahan ban dan video lain yang

terkait. Pada tapilan ini user ser juga bisa mengirimkan

request ke developer untuk menambahkan tip dan trik

milik user dengan mengklik button +

Page 13: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

51

Gambar III.11. Layout Tips & Trik

4. Tentang Aplikasi

Nama : fragment_tentang_aplikasi

Fungsi : Menampiilkan info tentang aplikasi

Media : Layout

Frekuensi : Akan muncul setelah klik button tentang aplikasi di layout

menu

Keterangan : Layout ini memberikan informasi aplikasi. Logo dan nama

aplikasi, deskripsi aplikasi, logo universitas, dan developer

aplikasi.

Page 14: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

52

Gambar III.12. Layout Tentang Aplikasi

3.2.2. Spesifikasi Bentuk Keluaran

Aplikasi Go Tumbal memiliki spesifikasi bentuk keluaran sebagai berikut :

1. Detail Bengkel

Nama : activity_detail_bengkel

Fungsi : Menampiilkan info detail bengkel

Media : Layout

Frekuensi : Akan muncul setelah klik detail bengkel di fragment

dashboard

Keterangan : Pada tampilan activity_detail_bengkel ini baik admin

ataupun user bisa melihat info detail bengkel, nama

bengkel, pemilik bengkel, alamat bengkel, deskripsi

bengkel, jam operasional. Khusus di layout alamat bengkel

Page 15: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

53

ada button buka maps untuk melihat rute ke lokasi bengkel

dan hubungi bengkel apabila user ingin berkomunikasi

langsung via whatsapp.

Gambar III.13. Layout Detail Bengkel

2. Tambah Bengkel

Nama : activity_tambah_bengkel

Fungsi : Menampiilkan info detail bengkel yang akan di daftarkan

di aplikasi

Media : Layout

Frekuensi : Akan muncul setelah klik buton + oleh admin di fragment

dashboard

Keterangan : Pada tampilan activity_tambah_bengkel ini hanya admin

yang bisa akses, setelah sebelumnya mendapatkan request

pendaftaran bengkel Go Tumbal dari user via whatsapp.

Setelah menerima request dari user, admin bisa langsung

Page 16: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

54

mensurvey ke lokasi untuk mendapatkan info detail

bengkel dan lokasi secara akurat. Selain itu admin juga

bisa menambahkan via offline dengan menginputkan

koordinat lokasi bengkel tambal ban atau dengan cek

lokasi menggunakan google maps.

Gambar III.14. Layout Tambah Bengkel

3. Daftarkan Bengkelmu

Fungsi : Menampiilkan video tips dan trik

Media : Whatsapp

Frekuensi : Akan muncul setelah klik daftakan bengkelmu

Keterangan : Pada tampilan ini aplikasi akan dialihkan ke whatsapp

untuk berkomunikasi antara developer dengan penyedia

jasa tambal ban yang ingin mendaftarkan bengkelnya ke

dalam daftar bengkel di aplikasi Go Tumbal.

Page 17: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

55

Gambar III.15. Layout Tambah Bengkel

3.2.3. Spesifikasi File

Dalam membangun aplikasi Go Tumbal memerlukan database untuk

penyimpanan data. Firebase merupakanan platform database buatan dari google,

firebase memiliki banyak fitur seperti realtime database, cloud storage, analyticts dan

salah satunya adalah firebase authentication. Firebase auth ini digunakan untuk

mengidentifikasi user, biasanya digunakan untuk register ke apps kita, di firebase auth

juga ada banyak fitur, bisa membuat login / register dengan password/email, bisa juga

hanya dengan no telp user. Developer yang menggunakan realtime database dapat

mengamankan data dengan menggunakan aturan keamanan yang diberlakukan oleh

server perusahaan. Menyesuaikan dengan pilihan developer untuk login. Berikut

spesifikasi database aplikasi Go Tumbal :

1. Tabel Bengkel

Nama child : bengkel

Page 18: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

56

Tugas Akronim : keyBengkel

Fungsi : Untuk menyimpan data bengkel

Software : Firebase

Tabel III.1. Layout Tambah Bengkel

No Child Tipe

1 Alamat String

2 deskripsiBengkel String

3 jamBuka String

4 jamTutup String

5 Latitude String

6 Longtitude String

7 namaBengkel String

8 nomerHp String

9 pemilikBengkel String

2. Tabel Tips

Nama child : tips

Tugas Akronim : keyTips

Fungsi : Untuk menyimpan tips dan trik

Software : Firebase

Tabel III.2. Layout Tambah Bengkel

No Child Tipe

1 namaTips String

2 Penjelasan String

3 Urlyoutube String

Page 19: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

57

3.2.4. Spesifikasi Program

1. Splash Screen

public class SplashScreenActivity extends AppCompatActivity {

private Context context = SplashScreenActivity.this;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_splash_screen);

Timer timer = new Timer();

timer.schedule(new Splash(), 3000);

}

class Splash extends TimerTask {

@Override

public void run() {

startActivity(new Intent(context, LoginActivity.class));

finish();

}

}

}

Keterangan : Program diatas merupakan contoh program untuk menampilkan

splashscreen saat aplikasi pertama kali dibuka. Menampilkan logo dan nama

aplikasi.

2. Login

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

firebaseAuth = FirebaseAuth.getInstance();

databaseReference = FirebaseDatabase.getInstance().getReference();

drawer_layout = findViewById(R.id.drawer_layout);

toolbar = findViewById(R.id.toolbar);

fl_content = findViewById(R.id.fl_content);

nav_view = findViewById(R.id.nav_view);

setSupportActionBar(toolbar);

Objects.requireNonNull(getSupportActionBar()).setTitle("GO

TUMBAL ADMIN");

getSupportActionBar().setSubtitle("Dashboard");

Page 20: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

58

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(

this, drawer_layout, toolbar, R.string.app_name,

R.string.app_name);

drawer_layout.addDrawerListener(toggle);

toggle.syncState();

nav_view.setNavigationItemSelectedListener(this);

nav_view.getMenu().getItem(0).setChecked(true);

TextView tv_emailPengguna =

nav_view.getHeaderView(0).findViewById(R.id.tv_emailPengguna);

tv_emailPengguna.setText(Objects.requireNonNull(firebaseAuth.getCurre

ntUser()).getEmail());

getSupportFragmentManager().beginTransaction()

.replace(R.id.fl_content, new DashboardFragment(),

"dashboard_fragment")

.commit();

}

Keterangan : Program ini berfungsi untuk menampilkan layout login. Admin

akan diminta memasukan key sesuai dengan data di firebase

3. Dashboard

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".Activity.MainActivity">

<com.google.android.material.appbar.AppBarLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/AppTheme.AppBarOverlay">

<androidx.appcompat.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

app:popupTheme="@style/AppTheme.PopupOverlay" />

</com.google.android.material.appbar.AppBarLayout>

<FrameLayout

android:id="@+id/fl_content"

android:layout_width="match_parent"

android:layout_height="match_parent" />

Page 21: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

59

</LinearLayout>

<com.google.android.material.navigation.NavigationView

android:id="@+id/nav_view"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

android:fitsSystemWindows="true"

app:headerLayout="@layout/nav_header_dashboard"

app:menu="@menu/activity_dashboard_drawer" />

Keterangan : Program ini merupakan tampilan awal pin lokasi user,

menampilkan maps dan selanjutnya user bisa memilih untuk masuk ke menu

utama atau melihat bengkel terdekat

4. Menu Utama

@Override

public boolean onNavigationItemSelected(@NonNull MenuItem item) {

int id = item.getItemId();

FragmentTransaction FT = getSupportFragmentManager()

.beginTransaction()

.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);

if (id == R.id.nav_dashboard) {

FT.replace(R.id.fl_content, new DashboardFragment(),

"dashboard_fragment").commit();

} else if (id == R.id.nav_tipsTrik) {

FT.replace(R.id.fl_content, new TipsAndTrikFragment(),

"tips_and_trik_fragment").commit();

} else if (id == R.id.nav_about) {

FT.replace(R.id.fl_content, new TentangAplikasiFragment(),

"tentang_aplikasi_fragment").commit();

} else if (id == R.id.nav_TipsTrikUser) {

FT.replace(R.id.fl_content, new TipsDanTrikDariUserFragment(),

"tips_and_trik_user_fragment").commit();

} else if (id == R.id.nav_logout) {

AlertDialog.Builder builder = new AlertDialog.Builder(context);

builder.setMessage("Apakah anda ingin logout aplikasi ?");

builder.setPositiveButton("Ya", new

Dialoginterface.OnClickListener() {

@Override

public void onClick(Dialoginterface dialoginterface, int i) {

firebaseAuth.signOut();

startActivity(new Intent(context, LoginActivity.class));

finish();

}

});

builder.setNegativeButton("Batal", null);

Page 22: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

60

builder.show();

}

drawer_layout.closeDrawer(GravityCompat.START);

return true;

}

Keterangan : Program ini berfungsi menampilkan fragment menu utama

5. Daftar Bengkel

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/white"

android:paddingStart="@dimen/dp_16"

android:paddingEnd="@dimen/dp_16"

android:paddingBottom="@dimen/dp_8"

android:text="Daftar Bengkel"

android:textAlignment="center"

android:textColor="@color/black"

android:textSize="@dimen/sp_16"

android:textStyle="bold" />

<androidx.recyclerview.widget.RecyclerView

android:id="@+id/rvBengkel"

android:layout_width="match_parent"

android:layout_height="match_parent" />

Program ini untuk menampilkan recycleview daftar bengkel. Pada tampilan

dashboard swipe up daftar bengkel, maka akan mucul daftar urut bengkel

dimulai dari yang terdekat

6. Detail Bengkel

databaseReference = FirebaseDatabase.getInstance().getReference();

setSupportActionBar(toolbar);

getSupportActionBar().setTitle("Detail Bengkel");

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

tvNamaBengkel.setText(getIntent().getStringExtra("data"));

if (getIntent().getExtras() != null) {

data = (BengkelModel) getIntent().getSerializableExtra("data");

assert data != null;

tvNamaBengkel.setText(data.getNamaBengkel());

tvPemilikBengkel.setText(data.getPemilikBengkel());

tvAlamatBengkel.setText(data.getAlamat());

Page 23: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

61

tvJarakBengkel.setText(new

DecimalFormat("#.##").format(data.getJarak()) + " Km");

tvDeskripsiBengkel.setText(data.getDeskripsiBengkel());

tvJamBukaBengkel.setText(data.getJamBuka() + " - " +

data.getJamTutup());

tvNoHpBengkel.setText(data.getNomerHp());

Keterangan : Program ini untuk menampilkan detail bengkel yang sudah

diferivikasi oleh admin

7. Tambah Bengkel

setSupportActionBar(toolbar);

Objects.requireNonNull(getSupportActionBar()).setTitle("GO

TUMBAL");

getSupportActionBar().setSubtitle("Tambah Bengkel");

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Keterangan : Program ini untuk menambahkan daftar bengkel. Hanya admin

yang berhak mengakses action ini

8. Menampilkan Maps

btnBukaDiGoogleMaps.setOnClickListener(new View.OnClickListener()

{

@Override

public void onClick(View view) {

startActivity(new Intent(Intent.ACTION_VIEW,

Uri.parse("http://maps.google.com/maps?daddr=" +

data.getLatitude() + "," + data.getLongitude())));

}

});

Keterangan : Program ini berfungsi untuk menampilkan rute dari user menuju

lokasi tambal ban pilihan

9. Tips & Trik

private void getDataTipsAndTrik() {

databaseReference.child("tips")

.addValueEventListener(new ValueEventListener() {

@Override

public void onDataChange(@NonNull DataSnapshot

dataSnapshot) {

list.clear();

Page 24: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

62

if (dataSnapshot.exists()) {

tvBelumAdaData.setVisibility(View.GONE);

for (DataSnapshot data : dataSnapshot.getChildren()) {

TipsModel tipsModel = new TipsModel();

tipsModel.setKeyTips(data.getKey());

tipsModel.setNamaTips(data.child("namaTips").getValue(String.class));

tipsModel.setPenjelasan(data.child("penjelasan").getValue(String.class));

if (data.child("urlyoutube").exists()) {

tipsModel.setURLYoutube(data.child("urlyoutube").getValue(String.class

));

}

list.add(tipsModel);

}

} else {

tvBelumAdaData.setVisibility(View.VISIBLE);

}

LinearLayoutManager linearLayoutManager = new

LinearLayoutManager(getActivity(), RecyclerView.VERTICAL, false);

TipsAdapter tipsAdapter = new TipsAdapter(list,

getActivity(), getLifecycle());

rvTipsDanTrik.setLayoutManager(linearLayoutManager);

rvTipsDanTrik.setAdapter(tipsAdapter);

}

@Override

public void onCancelled(@NonNull DatabaseError

databaseError) {

}

});

}

Keterangan : Program ini berfungsi menampilkan fragment Tips & Trik yang

sudah tersimpan di firebase

10. Tentang Aplikasi

public class TentangAplikasiFragment extends Fragment {

public TentangAplikasiFragment() {

// Required empty public constructor

}

Page 25: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

63

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup

container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_tentang_aplikasi, container,

false);

}

}

Keterangan : Program ini untuk menampilkan informasi tentang aplikasi.

Dalam tampilan ini user akan melihat nama aplikasi, logo aplikasi, deskripsi

aplikasi, logo Universitas, nama developer

3.2.5. Implementasi

1. Implementasi rancangan antar muka admin

a. Halaman Login

Gambar III.16. Halaman Login

Page 26: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

64

b. Halaman Dashboard

Gambar III.17. Halaman Dashboard

c. Halaman Menu Utama

Gambar III.18. Halaman Menu Utama

Page 27: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

65

d. Halaman Tambah Bengkel

Gambar III.19. Halaman Tambah Bengkel

e. Halaman Detail Bengkel

Gambar III.20. Halaman Detail Bengkel

Page 28: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

66

f. Halaman Edit Bengkel

Gambar III.21. Halaman Edit Bengkel

g. Halaman Buka Google Maps

Gambar III.22. Halaman Google Maps

Page 29: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

67

h. Halaman Hubungi Bengkel

Gambar III.23. Halaman Hubungi Bengkel

i. Halaman Tips dan Trik

Gambar III.24. Halaman Tips dan Trik

Page 30: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

68

j. Halaman Tambah Tips dan Trik

Gambar III.25. Halaman Tambah Tips dan Trik

k. Halaman Tips dan Trik dari User

Gambar III.26. Halaman Tips dan Trik dari User

Page 31: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

69

l. Halaman Tentang Aplikasi

Gambar III.27. Halaman Tentang Aplikasi

2. Implementasi rancangan antar muka user

a. Halaman Dashboard

Gambar III.28. Halaman Dashboard

Page 32: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

70

b. Halaman Menu Utama

Gambar III.29. Halaman Menu Utama

c. Halaman Detail Bengkel

Gambar III.30. Detail Bengkel

Page 33: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

71

d. Halaman Buka Google Maps

Gambar III.31. Buka Google Maps

e. Halaman Tips dan Trik

Gambar III.33. Tips dan Trik

Page 34: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

72

f. Halaman Daftarkan Bengkelmu

Gambar III.34. Daftarkan Bengkelmu

g. Halaman Tentang Aplikasi

Gambar III.35. Tentang Aplikasi

Page 35: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

73

3.2.6. HIPO (Hierarchy Input Process Output)

HIPO (Hierarchy Input Process Output) Chart digunakan sebagai alat untuk

mnganalisis problem dan memvisualisasikan solusi menggunakan pendekatan top-

down design. Dimulai dari level global (makro), diagram secara bertahap diperluas

hingga ke bentuk detilnya (logical building blocksatau functions-nya teridentifikasi).

1. HIPO User

Gambar III.17. HIPO User

Page 36: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

74

2. HIPO Admin

Gambar III.16. HIPO Admin

Page 37: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

75

3.2.7. Flowchart

Flowchart adalah suatu bagan yang menggambarkan arus logika dari data yang

akan diproses dalam suatu program dari awal sampai akhir. Flowchart terdiri dari

symbol-simbol yang mewakili fungsi-fungsi langkah program dan garis alir

menunjukan urutan dari simbol-simbol yang akan dikerjakan.

1. Aplikasi Go Tumbal User

Gambar III.18. Flowchart User

Diagram proses kerja aplikasi Go Tumbal admin diatas menunjukan bagaimana

aplikasi bekerja mulai dari mulai admin masuk, menampilkan layout login. Ketika

login berhasil admin akan dibawa langsung ke tampilan pin lokasi. Selanjutnya admin

memiliki 3 akses utama yaitu daftar bengkel, tambahkan bengkel, dan menu utama.

Admin berhak menambah, merubah dan menghapus daftar bengkel. Dalam layout tips

Page 38: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

76

& trik admin memiliki tugas utama menambahkan info dan memfilter tips & trik

kiriman dari user.

2. Aplikasi Go Tumbal Admin

Gambar III.19. Flowchart Admin

Diagram proses kerja aplikasi diatas menunjukan bagaimana aplikasi bekerja mulai

dari mulai user masuk, menampilkan layout dashboard, detail bengkel, menu. User

bisa melihat daftar bengkel terdekat dari lokasi, dan menampilkan rute dalam. User

memiliki akses ke menu aplikasi seperti bengkel terdekat, tips & trik daftarkan

bengkel, dan tentang aplikasi.

Page 39: BAB III PEMBAHASAN · database firebase. Setelah input kemudian klik login untuk mendapatkan akses admin pada ... tips dan trik user, tentang aplikasi dan logout . 44 Gambar III.4

77

3.3. Sarana Pendukung Program

Dalam penulisan Tugas Akhir ini penulis di dukung oleh perangkat keras

(hardware) dan perangkat lunak (software) dengan spesifikasi seperti berikut ini:

A. Perangkat Keras (hardware)

1. Laptop

Tipe : ASUS A455L

Prosesor : Intel(R) Core(TM) i3-4005U

Memori : 6144 MB

Kartu Gravis : NVIDIA GEFORCE 930M

2. Smartphone

Tipe : Xiaomi Redmi 3

Prosesor : Snapdragon 616

CPU : Octa –core Max 1.50 GHz

Memori : 2 GB

Penyimpanan : 16 GB

Sistem Operasi : Android

B. Perangkat Lunak (software)

Perangkat lunak yang dibutuhkan untuk pembuatan program Tugas Akhir ini

adalah sebagai berikut:

1. Sistem Operasi : Windows 10

2. Paket Program : Android Studio 3.3.2, Java Development Kit (JDK),

Android Software Development Kit (SDK), Firebase