PROPOSAL TUGAS AKHIR

Pengembangan Website Inspeksi Mobil & Motor “AutoVision”

Berbasis ReactJS

NRP / Nama : 220116866 / Agustinus Ivan

Fakultas / Program Studi / : Fakultas Sains dan Teknologi / S1
Major Informatika / Internet Technology
Dosen Pembimbing : Kevin Setiono, [Link]., [Link].

I. Latar Belakang
Dalam beberapa tahun terakhir, platform media sosial seperti TikTok
dan Instagram telah mengalami pertumbuhan yang pesat dan menjadi bagian
integral dari kehidupan sehari-hari banyak orang. Platform ini tidak hanya
digunakan untuk hiburan, tetapi juga sebagai sumber informasi dan edukasi di
berbagai bidang, termasuk otomotif. Banyak inspektur mobil dan penggemar
otomotif yang memanfaatkan platform ini untuk berbagi pengetahuan, tips,
dan pengalaman mereka melalui video singkat dan menarik.
Fenomena ini menunjukkan adanya minat yang besar dari masyarakat
terhadap informasi yang berkaitan dengan inspeksi dan pemeliharaan
kendaraan. Video-video ini sering kali menampilkan proses inspeksi
kendaraan secara visual, memberikan wawasan tentang cara kerja mesin,
identifikasi masalah umum, dan tips pemeliharaan yang berguna. Hal ini tidak
hanya meningkatkan kesadaran akan pentingnya inspeksi kendaraan, tetapi
juga mendorong pemilik kendaraan untuk lebih proaktif dalam merawat
kendaraan mereka.
Proyek ini bertujuan untuk mengembangkan sebuah website inspeksi
kendaraan yang terinspirasi dari pendekatan visual dan interaktif media sosial,
namun dengan penambahan fitur-fitur canggih yang dapat memberikan
analisis mendalam dan rekomendasi yang dipersonalisasi. Dengan demikian,
platform ini tidak hanya akan menarik bagi pengguna yang sudah terbiasa
dengan konten media sosial, tetapi juga memberikan nilai tambah yang
signifikan dalam hal keamanan dan pemeliharaan kendaraan.
II. Tujuan
Dari permasalahan di atas, maka pembuatan website “AutoVision”
akan dikembangan dengan tujuan:

1. Meningkatkan Kesadaran dan Edukasi: Meningkatkan kesadaran pemilik

kendaraan tentang pentingnya inspeksi dan pemeliharaan rutin melalui
konten visual dan interaktif yang menarik.
2. Menyediakan Platform Interaktif: Mengembangkan platform digital yang
memungkinkan pengguna untuk mengakses informasi inspeksi kendaraan
secara mudah dan interaktif, mirip dengan pengalaman yang mereka
dapatkan di media sosial.
3. Memanfaatkan Teknologi Canggih: Mengintegrasikan teknologi seperti
analisis data real-time dan pembelajaran mesin untuk memberikan
rekomendasi pemeliharaan yang akurat dan dipersonalisasi.
4. Meningkatkan Aksesibilitas Layanan Inspeksi: Membuat layanan inspeksi
kendaraan lebih mudah diakses oleh masyarakat luas, tanpa harus
bergantung pada metode tradisional yang mungkin memakan waktu dan
biaya.
5. Mendorong Partisipasi Komunitas: Membangun komunitas pengguna yang
aktif di mana mereka dapat berbagi pengalaman, tips, dan saran tentang
pemeliharaan kendaraan, mirip dengan interaksi di platform media sosial.
6. Mengurangi Risiko Kerusakan dan Kecelakaan: Dengan memberikan
informasi dan rekomendasi yang tepat waktu, platform ini bertujuan untuk
membantu pengguna mengidentifikasi dan mengatasi masalah kendaraan
sebelum menjadi lebih serius, sehingga mengurangi risiko kerusakan dan
kecelakaan.
7. Menyediakan Alat untuk Analisis Biaya: Menyediakan fitur yang
membantu pengguna melacak dan menganalisis biaya operasional
kendaraan, sehingga mereka dapat mengelola anggaran pemeliharaan
dengan lebih baik.
8. Menyediakan Fitur Login yang Aman: Memungkinkan pengguna untuk
membuat akun dan login, sehingga mereka dapat mengakses fitur
personalisasi, menyimpan riwayat inspeksi, dan mendapatkan rekomendasi
yang lebih sesuai dengan kebutuhan mereka.

III. Teori Penunjang

Dalam pengembangan website inspeksi kendaraan yang terinspirasi
dari platform media sosial, beberapa teknologi dan konsep kunci mendukung
implementasi proyek ini. Berikut adalah penjelasan mendetail mengenai
landasan teoretis yang digunakan:
1. HTML
HTML atau Hypertext Markup Languange adalah bahasa standar
pemrograman yang digunaka untuk membuat halaman website, yang diakses
melalui internet.
2. CSS
CSS atau Cascading Style Sheets, adalah bahasa yang digunakan
untuk menentukan tampilan dan format dari sebuah website, CSS bisa
mengatur jenis font, warna tulisan, dan latar belakang halaman. CSS juga
selalu dipakai bersama dengan HTML dan XML untuk membangun sebuah
website dengan tujuan untuk memperindah halaman website yang dibuat, CSS
juga membantu mengatasi kekurangan dari HTML dalam mengattur format
halaman website.

3. Basis Data
Basis data yang digunakan adalah MongoDB, MongoDB adalah database
yang bersifat NoSQL dan berbasis dokumen yang dirancang untuk
menyimpan data dengan format yang fleksibel. Dengan menggunakan
MongoDB sebagai database nya, program ini memiliki fleksibilitas dalam
penyimpanan dan pengelolaan data, skalabilitas tinggi untuk aplikasi yang
membutuhkan performa tinggi dan volume data besar, dan pengembangan
yang cepat dikarenakan tidak terikat pada skema data yang kaku.

4. Keamanan dan Privasi Data

Keamanan data adalah aspek kritis dalam pengelolaan informasi inspeksi
kendaraan. Praktik terbaik dalam enkripsi data dan otentikasi pengguna
diterapkan untuk melindungi data yang diunggah oleh inspektur. Ini termasuk
penggunaan protokol HTTPS untuk komunikasi yang aman dan implementasi
mekanisme otentikasi seperti OAuth atau JWT (JSON Web Tokens) untuk
memastikan hanya pengguna yang berwenang yang dapat mengakses data.
Selain itu, perlindungan privasi pengguna menjadi prioritas dalam
pengumpulan dan penyimpanan data, dengan mematuhi regulasi seperti
GDPR jika berlaku.

5. React JS
React JS atau React adalah library JavaScript populer buatan Facebook
yang digunakan dalam proses pengembangan aplikasi mobile dan web. React
berisi kumpulan snippet kode JavaScript (disebut ‘komponen’) yang bisa
digunakan berulang kali untuk mendesain antarmuka pengguna.
React JS ini akan digunakan sebagai Frontend untuk admin dan customer
yang bertanggung jawab mengurus UI responsif, react juga digunakan untuk
mengatasi login/register pada customer dan admin, mengatasi booking, status
reservasi, riwayat penyewaan, jadwal ketersediaan lapangan, pembayaran dan
transaksi, profil, member, dan Home.
6. [Link]
[Link] [Link] adalah lingkungan runtime JavaScript gratis dan bersifat
open source yang lintas platform, yang memungkinkan developer membuat
server, aplikasi web, alat baris perintah, dan skrip.
7. MidTrans
Midtrans merupakan perusahaan finansial berbasis teknologi yang
mendukung pertumbuhan berbagai lini bisnis online lewat solusi pembayaran
komprehensif dan inklusif. Midtrans lebih fokus melayani pasar e-commerce
indonesia, UMKM hingga perusahan startup dan juga perusahaan besar.
sehingga apapun skala bisnisnya mereka bisa menerima pembayaran online.
dengan integrasi yang mudah dalam satu dashboard serta dilengkapi sistem
keamanan seperti sistem anti-fraud. payment gateway midtrans memiliki mitra
pembayaran yang juga sangat bervariatif. Diantaranya yaitu Visa, MasterCard,
BCA, BNI, Mandiri, BCA Klikpay, CIMB Clicks, Permata Bank, BRIVA,
ALTO, ATM Bersama, Prima, QRIS, Gopay, ShopeePay, ePay BRI, OCTO
Clicks, XL Tunai, Mandiri Clickpay, T-Cash hingga gerai minimarket seperti
Indomaret, Alfamart dll.
8. Tauri
Tauri adalah framework open-source untuk membangun aplikasi desktop
menggunakan teknologi web seperti HTML, CSS, dan JavaScript, tetapi
dengan kelebihan berupa performa yang lebih ringan dan efisiensi
dibandingkan framework lain seperti Electron. Tauri akan digunakan untuk
mengemas website jasa penyewaan ini menjadi aplikasi desktop yang dapat
dijalankan di sistem operasi seperti Windows, macOS, atau Linux. Fitur yang
digunakan untuk menerapkan Tauri ini ada di fitur Admin, fitur fitur admin
diantaranya: Login, Setiap dari master (Gedung, Jadwal, Pengguna, Transaksi,
Fasilitas), keuangan, Admin Dashboard.

IV. Ruang Lingkup

Pada subbab ini akan dijelaskan mengenai sistem yang akan
dikembangkan pada aplikasi ini. Subbab ini akan menjelaskan mulai dari
arsitektur sistem dan daftar fitur – fitur untuk setiap pengguna yang disertai
dengan alur kerja pada masing – masing fitur. Untuk mempermudah penjelasan
yang akan diberikan, maka akan disertakan gambar – gambar yang
berhubungan untuk memberikan visusalisasi terhadap penjelasan yang
diberikan mengenai konsep aplikasi ini.

A. Arsitektur Sistem

Gambar 1 Arsitektur sistem

Gambar 1 adalah gambar arsitektur sistem pada aplikasi website Jasa
Inspeksi kendaraan Mobil & Motor “Otospektor”. Terdapat 2 user di
aplikasi ini yaitu Admin dan Customer. Setiap user akan memiliki fitur
yang berbeda-beda, untuk user Admin akan melakukan mengolah data
lewat aplikasi desktop yang terhubung dengan internet, sedangkan
Customer akan melakukan kegiatan login, register, reservasi inspeksi dan
lainnya di website yang terhubung dengan jaringan internet. Sehingga
request dari user customer akan diteruskan dan diproses oleh web service
dan untuk user Admin akan diteruskan dan diproses oleh desktop app, jika
sudah melewati kedua proses tadi maka semua data akan disimpan di
dalam database yaitu mongoDB.

Alur sistem yang dimaksud untuk Admin adalah sebagai berikut:

1. Administrator (admin)
Admin dari sistem Inspeksi ini bertugas untuk mengatur semua
modul master, mulai dari master Inspeksi, jadwal, pengguna,
transaksi, dan keuangan. Untuk melakukan semua hal tersebut
admin diharuskan melakukan login terlebih dahulu melalui app
desktop.

a) Master gedung Master gedung mengatasi hal yang berhubungan

dengan status ketersedian lapangan, apakah sedang tersedia,
terpakai, atau dalam masa pemeliharaan. Didalam master gedung
ini menampilkan gambar lapangan dan status dari lapangannya.

b) Master jadwal Master jadwal berfungsi untuk mengatur jadwal

operasional Inspeksi, termasuk slot waktu yang tersedia untuk
kedatangan Inspektor dan informasi tentang pemesanan yang sudah
dilakukan oleh pengguna lain, sehingga tidak terjadi bentrok antar
jadwal. Menampilkan jadwal dari Inspektor baik itu sedang
melakukan Inspeksi atau Tidak.

c) Master pengguna Master pengguna mengurus data

pelanggan/customer yang mencakup nama, kontak, riwayat
inspeksi, dan informasi data pelanggan terkait akun pengguna
seperti username dan kata sandi. Didalam fitur ini terdapat daftar
user yang sudah registrasi beserta melakukan inspeksi.

d) Master transaksi Master Transaksi berisikan data transaksi

pembayaran yang meliputi metode pembayaran, misalnya: transfer
bank atau e wallet), status pembayaran, dan riwayat pembayaran
akan diatasi oleh master transaksi.
 Customer
Customer harus melakukan registrasi dulu untuk melakukan
penyewaan dan transaksi, setelah berhasil registrasi user akan
diminta untuk login dan dapat melakukan penyewaan, jika user
belum melakukan registrasi dan login maka user hanya dapat
melihat lihat websitenya saja. Didalam home untuk customer
terdapat fitur member, 5 booking, status reservasi, riwayat
penyewaan, jadwal ketersediaan lapangan, pembayaran dan
transaksi, profil. Fitur-fitur itu memiliki kegunaan bagi user
sebagai berikut:
a) Member Fitur member ini beguna untuk memperlihatkan
gambar lapangan yang memiliki diskon member serta memiliki
pengingat jika membership akan jatuh tempo.

b) Booking Booking memperlihatkan daftar lapangan yang sudah

di booking oleh customer.

c) Status reservasi Fitur ini memberitahu kepada customer sebuah

informasi tentang penyewaan yang sedang aktif, seperti: waktu dan
tanggal penyewaan yang sudah dijadwalkan, lapangan telah
dipesan, detail pemesanan yang mencakup jumlah total yang harus
dibayar atau status pembayaran.

d) Riwayat penyewaan Pada halaman riwayat penyewaan akan

ditampilakan histori dari lapangan yang sudah pernah disewa oleh
customer beserta detailnya.

e) Jadwal ketersediaan lapangan Jadwal ketersedian lapangan

berguna untuk menunjukkan user apakah lapangan yang ingin
disewa tersedia atau tidak.

f) Pembayaran dan transaksi Menampilkan sebuah gambar

lapangan yang sudah pernah disewa beserta tanggal transaksi,
metode pembayaran, status pembayaran(sukses, pending, dan
gagal), dan Invoice atau bukti pembayaran.

g) Profil Bisa diakses oleh customer yang sudah berhasil

melakukan login dan register, didalam fitur profil ini terdapat nama
lengkap, alamat, nomor telepon, foto profil, tanggal lahir.

B. Fitur-fitur sistem/website
Pada bagian fitur-fitur sistem akan dijelaskan apa saja fitur yang dimiliki
dari website ini, fitur ini didasarkan pada program yang sudah ada dan
juga menambahkan fitur tambahan untuk memenuhi kebutuhan yang
diperlukan, berikut merupakan penjelasannya.
 User/ Customer
Berikut adalah gambaran konsep dan penjelasan sistem customer dari website
yang akan dibuat.

 Mendaftarkan akun (Register)

Fitur ini berfungsing untuk customer yang belum memiliki akun/belum
terdaftar dalam website dan ingin melakukan transaksi berupa membeli jasa
dari website, customer diharuskan membuat akun lalu melakukan Login
dengan akun yang sudah dibuat.
 Melakukan login (Login)
Fitur ini digunakan oleh customer untuk masuk website/ingin membeli jasa
tetapi dalam keadaan belum terdaftar sebagai user dalam website.
 Melihat beranda (Home)
Home digunakan untuk menampilkan gambar,informasi, jasa yang
disediakan.
 Melakukan booking inspeksi
Fitur booking digunakan customer untuk melakukan sebuah reservasi
pemesanan jasa sesuai dengan ketersediaan yang menunjukkan slot waktu
kosong.
 Memeriksa status pembayaran
Pembayaran dan transaksi dapat dilakukan oleh customer lewat transfer
bank atau e-wallet, selain itu fitur ini juga memiliki riwayat pembayaran
yang mencakup: tanggal transaksi, metode pembayaran, status
pembayaran(sukses, pending, dan gagal), dan Invoice atau bukti
pembayaran.
 Melihat riwayat Inspeksi
Riwayat Inspeksi digunakan untuk melihat hasil Inspeksi yang telah di
upload oleh inspektur Mobil.

 Mengecek status Inspeksi (Status Inspeksi)

Status Inspeksi menampilkan sebuah informasi tentang Inspeksi yang
sedang aktif, seperti: waktu dan tanggal Inspeksi yang sudah dijadwalkan,
data Inspektor (Nama, Nomor Telepon), detail Inspeksi yang mencakup
jumlah total yang harus dibayar atau status pembayaran.
 Integrasi dengan Bengkel Terdekat
Menyediakan fitur untuk menghubungkan pengguna dengan bengkel
terdekat yang bisa melakukan perbaikan yang direkomendasikan.
 Fitur Chat atau Konsultasi Langsung
Menawarkan fitur chat atau konsultasi langsung dengan ahli inspeksi untuk
menjawab pertanyaan pengguna secara real-time.
 Rekomendasi Perbaikan dan Estimasi Biaya
Setelah inspeksi, memberikan rekomendasi perbaikan yang diperlukan
beserta estimasi biaya untuk membantu pengguna dalam merencanakan
anggaran mereka.
 Laporan Inspeksi yang lebih mendetail
 Menyediakan laporan inspeksi yang lebih mendetail dan interaktif, termasuk
foto dari setiap bagian yang diperiksa untuk memberikan gambaran yang
lebih jelas kepada pengguna.

C. Batasan Masalah
Dalam membuat website ini memiliki beberapa batasan masalah yang
diuraikan sebagai berikut:
- Website ini harus terhubung dengan internet.
- Website ini menggunakan bahasa Indonesia.
- Dalam aplikasi website yang akan dibangun ini hanya memiliki 2 tipe
user, yaitu: pengelola (admin), dan pemesan (Customer).

D. Uji Coba
E. Cara Kerja
F. Perbandingan

9. Tahapan pembuatan
Tahapan pembuatan tugas akhir adalah cara yang digunakan untuk meraih
kebenaran menggunakan penelusuran tata cara tertentu dalam menemukan
kebenaran. Sumber masalah dari tugas ini adalah bagaimana cara membuat
website Cahaya Berlian Sport yang digunakan sebagai media penyewaan
alat olahraga maupun penyewaan gedung olahraga. Oleh sebab itu, metode
yang digunakan adalah metode waterfall. Berikut adalah metodologi nya:

[Link] Pustaka