Tutorial #20: Finalisasi dan Penyempurnaan Aplikasi Tabungan Bank
Halo para pahlawan coding! Akhirnya kita sampai di tutorial terakhir dari seri ini. Hari ini kita tidak akan membuat fitur baru, tapi merapikan, menguji, dan menyempurnakan aplikasi agar siap digunakan di dunia nyata. Kita akan perbaiki bug kecil, optimasi kode, pastikan keamanan, dan lakukan deployment final. Siap? Mari kita poles aplikasi kita sampai kinclong!
Apa yang akan kita lakukan:
- ✅ Review semua fitur dan memastikan tidak ada yang rusak.
- ✅ Menambahkan penanganan loading state yang konsisten di semua halaman.
- ✅ Memperbaiki bug kecil (redirect, validasi, error handling).
- ✅ Menambahkan konfirmasi SweetAlert untuk aksi berbahaya (hapus, logout).
- ✅ Optimasi kode: memisahkan komponen, menghapus console.log, mengatur ulang import.
- ✅ Menggunakan environment variable untuk URL API agar mudah dipindah ke production.
- ✅ Testing menyeluruh (manual) dari sisi nasabah, petugas, admin.
- ✅ Final deployment ke hosting dengan konfigurasi production.
- ✅ Tips perawatan dan pengembangan selanjutnya.
Langkah 1: Review Fitur dan Checklist
Sebelum kita mulai, mari kita buat daftar fitur yang sudah kita buat dari tutorial #1 sampai #19, dan pastikan semuanya berjalan dengan baik.
| No | Fitur | Status | Keterangan |
|---|---|---|---|
| 1 | Register nasabah | ✅ | Membuat akun nasabah baru + rekening otomatis |
| 2 | Login multi-level (nasabah, petugas, admin) | ✅ | Redirect sesuai role |
| 3 | Dashboard nasabah (saldo, mutasi) | ✅ | Menampilkan data real-time |
| 4 | Dashboard petugas (transaksi setor/tarik) | ✅ | Form dengan validasi |
| 5 | Dashboard petugas (lihat mutasi nasabah) | ✅ | Pencarian dan tabel |
| 6 | Dashboard admin (manajemen user CRUD) | ✅ | Tambah, edit, hapus admin/petugas |
| 7 | Dashboard admin (laporan transaksi + filter) | ✅ | Export Excel/PDF |
| 8 | Fitur ubah password (semua role) | ✅ | Dengan validasi |
| 9 | Fitur profil dan edit profil | ✅ | Nama dan email |
| 10 | Notifikasi SweetAlert di semua aksi | ✅ | Sukses, error, konfirmasi |
| 11 | Proteksi route berdasarkan role | ✅ | PrivateRoute dengan allowedRoles |
| 12 | Validasi client & server | ✅ | Form tidak kosong, email unik, dll |
Coba jalankan aplikasi dan uji satu per satu. Catat jika ada yang error atau tidak sesuai.
Langkah 2: Perbaikan Bug Kecil
Berdasarkan pengujian, mungkin kita menemukan beberapa bug. Berikut beberapa yang umum dan cara memperbaikinya:
Bug 1: Redirect setelah login ke dashboard yang salah
Pastikan di LoginPage.js, kita menggunakan user.role yang dikirim dari API. Jika role tidak ada, bisa default ke nasabah. Tambahkan pengecekan:
if (user.role === 'admin') navigate('/admin/dashboard');
else if (user.role === 'petugas') navigate('/petugas/dashboard');
else navigate('/dashboard');
Bug 2: Setelah edit profil, data tidak langsung update di navbar
Kita perlu memperbarui localStorage setelah edit profil. Di Profile.js, setelah sukses update, tambahkan:
const user = JSON.parse(localStorage.getItem('user'));
user.name = response.data.user.name;
user.email = response.data.user.email;
localStorage.setItem('user', JSON.stringify(user));
Bug 3: Filter tanggal di laporan tidak konsisten (timezone)
Di Laravel, gunakan whereDate untuk membandingkan tanggal tanpa waktu. Sudah kita lakukan. Pastikan format tanggal dari frontend YYYY-MM-DD.
Bug 4: Export PDF tidak support karakter Indonesia
Library jsPDF default tidak support Unicode. Kita bisa menambahkan font tambahan atau gunakan jspdf dengan opsi. Untuk sederhana, kita abaikan dulu, atau gunakan library lain.
storage/logs jika ada error server.
Langkah 3: Menambahkan Loading State yang Konsisten
Kita sudah punya loading state di beberapa komponen, tapi belum semua. Pastikan setiap kali mengambil data dari API, kita menampilkan spinner. Buat komponen LoadingSpinner agar bisa dipakai ulang.
Buat file src/components/LoadingSpinner.js:
import React from 'react';
function LoadingSpinner({ text = 'Memuat data...' }) {
return (
<div className="text-center my-5">
<div className="spinner-border text-primary" role="status">
<span className="visually-hidden">Loading...</span>
</div>
<p className="mt-2">{text}</p>
</div>
);
}
export default LoadingSpinner;
Gunakan di semua halaman yang memuat data (misal: AdminDashboard, PetugasDashboard, Profile, dll).
Langkah 4: Optimasi Kode
- Hapus console.log: Cari dan hapus semua
console.logyang tidak diperlukan. - Pisahkan komponen: Misalnya, buat komponen
TransactionTableuntuk tabel mutasi yang dipakai di beberapa tempat. - Gunakan environment variable: Buat file
.envdi root frontend dengan isiREACT_APP_API_URL=http://127.0.0.1:8000/api. Lalu di kode, panggil denganprocess.env.REACT_APP_API_URL. Ini memudahkan saat ganti domain. - Bersihkan import yang tidak terpakai: Gunakan ESLint atau manual cek.
Langkah 5: Testing Menyeluruh
Lakukan skenario berikut untuk memastikan aplikasi siap:
- Sebagai Nasabah:
- Register akun baru → cek apakah rekening terbuat.
- Login → dashboard muncul saldo 0, mutasi kosong.
- Edit profil → ubah nama, cek berubah.
- Ubah password → logout otomatis, login dengan password baru.
- Lihat mutasi (setelah ada transaksi dari petugas).
- Sebagai Petugas:
- Login → dashboard dengan dua tab.
- Lakukan setor tunai ke nasabah (masukkan ID rekening).
- Lakukan tarik tunai (pastikan saldo cukup).
- Cek mutasi nasabah melalui tab Lihat Mutasi.
- Ubah password dan profil.
- Sebagai Admin:
- Login → dashboard admin.
- Tambah user baru (petugas/admin).
- Edit user, hapus user (jangan hapus diri sendiri).
- Buka halaman laporan, filter berdasarkan tanggal, export Excel/PDF.
- Ubah password dan profil.
Pastikan tidak ada error dan semua notifikasi muncul sesuai.
Langkah 6: Deployment Final ke Hosting
Kita sudah membahas deployment di tutorial #12. Sekarang kita lakukan sekali lagi dengan konfigurasi yang sudah disempurnakan.
- Backend (Laravel):
- Upload ulang folder backend, pastikan file
.envsudah diset dengan DB production danAPP_ENV=production,APP_DEBUG=false. - Jalankan migration:
php artisan migrate --force(via terminal atau SSH). - Set permission storage dan bootstrap/cache.
- Upload ulang folder backend, pastikan file
- Frontend (React):
- Set
.env.productiondenganREACT_APP_API_URL=https://domainkamu.com/api. - Build:
npm run build. - Upload isi folder
buildke folderpublic_html/react(atau sesuai struktur). - Pastikan file
.htaccessdi folder react sudah benar untuk SPA.
- Set
- Konfigurasi domain: Arahkan domain utama ke folder public_html, atau buat subdomain untuk React. Sesuaikan dengan panduan hosting.
Setelah deploy, buka website dan uji lagi. Pastikan API URL sudah mengarah ke domain yang benar.
Langkah 7: Dokumentasi dan Perawatan
Aplikasi sudah selesai. Untuk ke depannya, ada beberapa hal yang perlu diperhatikan:
- Backup database secara rutin.
- Monitor error log (Laravel log dan browser console).
- Update library secara berkala untuk keamanan.
- Tambah fitur baru sesuai kebutuhan (misal: notifikasi email, laporan grafik).
Buat dokumentasi sederhana untuk pengguna atau admin, misalnya panduan penggunaan aplikasi.
Kesimpulan dan Ucapan Terima Kasih
Selamat! Anda telah berhasil membangun aplikasi tabungan bank yang lengkap dengan Laravel dan React, mulai dari nol hingga deployment. Anda telah belajar:
- Membangun REST API dengan Laravel, autentikasi Sanctum, multi-level role.
- Membangun frontend React dengan Bootstrap dan SweetAlert.
- Mengintegrasikan keduanya melalui Axios.
- Membuat fitur CRUD, transaksi, laporan, dan export data.
- Mengelola state, routing, proteksi halaman, dan validasi.
- Deploy ke hosting sungguhan.
Sekarang Anda resmi menjadi full-stack developer! Jangan berhenti di sini, teruslah belajar dan kembangkan aplikasi ini lebih jauh. Siapa tahu bisa jadi aplikasi bank beneran? 😉
Daftar Semua Tutorial (1-20)
Terima kasih telah mengikuti seri ini. Silakan kembali ke tutorial sebelumnya jika ada yang perlu diulang. Selamat berkarya!