Proyek ini berfokus pada pengembangan aplikasi e-commerce berbasis web yang akan
memudahkan distribusi dan penjualan produk kelautan dan perikanan. Aplikasi ini akan
mencakup fitur-fitur seperti dashboard, manajemen stok, pencarian produk, keranjang belanja,
dan berbagai filter produk untuk memaksimalkan kemudahan pengguna dalam berbelanja.
Kami akan mengembangkan aplikasi yang responsif, sehingga dapat diakses dengan lancar
melalui berbagai perangkat, termasuk desktop dan perangkat seluler.
4.1. Platform dan Teknologi
● Web Frontend:
a. JS Framework:
● React.js digunakan untuk interface dinamis dan reactive, memungkinkan
pengelolaan state yang kompleks untuk aplikasi yang lebih interaktif.
● Next.js memfasilitasi server-side rendering (SSR) dan static site
generation (SSG), sehingga mempercepat performa dan pengindeksan
SEO.
b. Component-Based Architecture:
● Penggunaan reusable components untuk meningkatkan efisiensi
pengembangan antarmuka pengguna.
c. CSS Framework:
● Tailwind CSS: Digunakan untuk styling antarmuka pengguna dengan
pendekatan mobile-first yang responsif dan modular.
● Ant Design: Menyediakan komponen UI siap pakai yang dapat
disesuaikan untuk mempercepat pengembangan antarmuka yang
konsisten dan profesional.
d. State Management:
● Redux Toolkit: Digunakan untuk mengelola state aplikasi secara global
dengan pendekatan yang lebih efisien dan terstruktur, mempermudah
manajemen data antar komponen.
e. API Integration:
● Axios: Digunakan untuk komunikasi dengan backend melalui REST API,
termasuk untuk melakukan operasi CRUD dan pengelolaan token
otentikasi.
● Fetch API: Alternatif bawaan untuk berkomunikasi dengan backend
secara langsung melalui JavaScript, khususnya untuk operasi sederhana.
f. Real-time Features:
● WebSockets: Mendukung fitur real-time, seperti notifikasi, update status
pengiriman, dan pelacakan paket secara langsung.
g. UI Design Tools :
● Whimsical: Untuk pembuatan wireframe dan diagram user flow.
● Figma: Untuk desain UI yang kolaboratif, interaktif, dan prototyping.
Web Backend:
a. Framework:
● Laravel (PHP): Laravel mendukung arsitektur MVC, API development,
manajemen middleware, otentikasi, dan manajemen role user.
● Node.js: Node.js digunakan sebagai backend yang bersifat asinkron dan
non-blocking, ideal untuk aplikasi real-time dan high-performance.
b. Database:
● MySQL: Untuk manajemen data dengan performa tinggi dan skalabilitas.
● Redis: Untuk caching dan antrian tugas, meningkatkan kecepatan akses
data.
● ElasticSearch: Untuk pencarian data yang lebih cepat dan terstruktur.
c. Autentikasi dan Otorisasi:
● Laravel Passport: Untuk manajemen token berbasis API.
● JWT (JSON Web Tokens): Untuk otentikasi pengguna dan session
management.
d. Integrasi Payment Gateway:
● Midtrans: Untuk mengelola transaksi pembayaran online, mendukung
berbagai metode pembayaran (e-wallet, transfer bank, kartu kredit).
e. Push Notification & Messaging:
● Firebase Cloud Messaging (FCM): Untuk mengirimkan notifikasi push
real-time pada web.
f. Queue Management:
● Redis / RabbitMQ: Untuk memanajemen job asynchronous (misalnya
pengiriman email, notifikasi push).
g. Chat Box Integration:
● Tawk.to: Integrasi fitur chat box yang memungkinkan interaksi langsung
antara pengguna dan admin atau penjual secara real-time, memberikan
dukungan pelanggan yang cepat dan responsif.
4.2. Infrastruktur dan Hosting
● VPS (Virtual Private Server) Hosting:
Aplikasi akan di-hosting menggunakan VPS untuk menyediakan kontrol penuh atas
lingkungan server, memungkinkan penyesuaian yang lebih fleksibel dan performa yang
optimal. VPS memberikan kemampuan untuk mengelola sumber daya server secara
dedicated, yang ideal untuk aplikasi dengan kebutuhan kinerja yang tinggi.
● CDN (Content Delivery Network):
Cloudflare akan digunakan sebagai CDN untuk mempercepat pengiriman konten ke
pengguna di berbagai lokasi geografis. Selain meningkatkan kecepatan akses,
Cloudflare juga menawarkan perlindungan keamanan melalui mitigasi serangan DDoS
dan pengelolaan cache yang efisien.
4.3. Keamanan dan Pengelolaan Data
● SSL/TLS: Untuk memastikan komunikasi data yang aman antara pengguna dan server.
Sertifikat SSL/TLS akan digunakan untuk enkripsi data dan perlindungan privasi.
● OAuth 2.0: Protokol otentikasi dan otorisasi yang digunakan untuk mengelola akses
pengguna ke aplikasi dan integrasi dengan sistem pihak ketiga.
4.4. Pengujian dan DevOps
● Unit Testing dan Integration Testing:
○ PHPUnit: Digunakan untuk pengujian unit pada backend Laravel.
○ Jest: Untuk pengujian unit dan integrasi di frontend React.js.
● CI/CD (Continuous Integration/Continuous Deployment):
○ GitHub Actions: Untuk otomatisasi proses build, testing, dan deployment
aplikasi, memastikan bahwa kode baru dapat diintegrasikan dan disebarkan
dengan cepat dan andal.
4.5. Dokumentasi dan Pelatihan
● Dokumentasi Pengguna:
○ Postman: Untuk dokumentasi API, memudahkan pengembang dan pengguna
untuk memahami dan menggunakan endpoint API dengan jelas.
● Pelatihan Pengguna:
○ Video Tutorial dan Manual Book: Disediakan untuk memudahkan pengguna
dalam memahami fitur dan fungsi aplikasi.
4.6. Manajemen Proyek dan Kolaborasi
● Tool Manajemen Proyek:
○ ClickUp: Digunakan untuk melacak tugas, bug, dan kemajuan proyek.
Memudahkan komunikasi antara tim pengembang dan klien.
● Version Control System:
○ Git dan GitHub: Untuk version control dan kolaborasi pengembangan kode.
Memastikan manajemen perubahan kode yang efektif dan koordinasi antara
pengembang.