bab iii pembahasan · database firebase. setelah input kemudian klik login untuk mendapatkan akses...
TRANSCRIPT
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
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
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.
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.
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
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.
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 +
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.
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.
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.
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.
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 +
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.
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
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
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.
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
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
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");
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" />
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);
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());
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();
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
}
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
64
b. Halaman Dashboard
Gambar III.17. Halaman Dashboard
c. Halaman Menu Utama
Gambar III.18. Halaman Menu Utama
65
d. Halaman Tambah Bengkel
Gambar III.19. Halaman Tambah Bengkel
e. Halaman Detail Bengkel
Gambar III.20. Halaman Detail Bengkel
66
f. Halaman Edit Bengkel
Gambar III.21. Halaman Edit Bengkel
g. Halaman Buka Google Maps
Gambar III.22. Halaman Google Maps
67
h. Halaman Hubungi Bengkel
Gambar III.23. Halaman Hubungi Bengkel
i. Halaman Tips dan Trik
Gambar III.24. Halaman Tips dan Trik
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
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
70
b. Halaman Menu Utama
Gambar III.29. Halaman Menu Utama
c. Halaman Detail Bengkel
Gambar III.30. Detail Bengkel
71
d. Halaman Buka Google Maps
Gambar III.31. Buka Google Maps
e. Halaman Tips dan Trik
Gambar III.33. Tips dan Trik
72
f. Halaman Daftarkan Bengkelmu
Gambar III.34. Daftarkan Bengkelmu
g. Halaman Tentang Aplikasi
Gambar III.35. Tentang Aplikasi
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
74
2. HIPO Admin
Gambar III.16. HIPO Admin
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
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.
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