Description

Express Contact merupakan proyek pengembangan platform komunikasi anonim yang dirancang untuk memungkinkan pengguna mengirim pesan tanpa mengungkapkan identitas mereka. Proyek ini memanfaatkan teknologi Full Stack, yakni menggunakan Express.js untuk pengembangan Back End dan React.js untuk pengembangan Front End, dengan tujuan untuk memahami dan mengintegrasikan kedua komponen ini dalam konteks aplikasi web.

Proyek ini memanfaatkan teknologi Full Stack untuk menciptakan pengalaman pengguna yang mulus dan intuitif. Back End proyek diimplementasikan menggunakan Express.js, sementara Front End-nya menggunakan React.js. Integrasi ini bertujuan untuk memperdalam pengetahuan dalam pengembangan aplikasi web dari sisi server hingga klien, serta menyediakan solusi teknologi yang dapat digunakan oleh pengguna akhir.

Tujuan

Tujuan utama proyek ini adalah untuk membangun pemahaman yang kuat tentang integrasi antara Back End dan Front End dalam pengembangan aplikasi web. Selain itu, proyek ini juga bertujuan untuk mengasah keterampilan dalam merancang dan mengimplementasikan solusi teknologi yang nyata dan bermanfaat bagi pengguna akhir.

Ruang Lingkup

Proyek "Express Contact" mencakup pengembangan dua komponen utama:

1. Back End (Express.js): Memproses permintaan pengguna, menangani logika bisnis aplikasi, dan mengelola komunikasi dengan basis data.
2. Front End (React.js): Menyediakan pengalaman pengguna yang interaktif dan responsif, memungkinkan pengguna untuk mengirim pesan anonim dengan mudah dan intuitif.

Selain itu, proyek ini juga mencakup pengujian fungsional dan kinerja untuk memastikan aplikasi beroperasi dengan baik dan responsif, serta memberikan saran untuk pengembangan di masa depan yang dapat meningkatkan keamanan, kinerja, dan pengalaman pengguna.

Rancangan dan Implementasi

Back End (Express.js)

• Endpoint API: Menyediakan endpoint RESTful untuk menerima permintaan pengiriman pesan anonim.
• Database: Menggunakan database seperti MongoDB untuk menyimpan data pengguna dan pesan.
• Middleware: Penggunaan middleware untuk validasi permintaan dan pengelolaan sesi pengguna.

Front End (React.js)

• Komponen UI: Desain antarmuka dengan komponen React untuk memasukkan pesan dan memilih penerima.
• Koneksi API: Menghubungkan antarmuka pengguna dengan API backend untuk mengirimkan pesan.

Integrasi Antara Back End dan Front End

• Komunikasi: Mengatur komunikasi antara Back End dan Front End menggunakan HTTP requests (fetch API atau axios).
• Data Handling: Pengiriman data dari Front End ke Back End dan pengelolaan respons dari Back End di Front End.

Endpoint

Berikut adalah daftar endpoint yang digunakan dalam proyek Express Contact.

Kontak

1. Search Message
   1. Endpoint: GET /api/contacts
   2. Deskripsi: Mencari pesan berdasarkan parameter query.
   3. Authorization: Bearer Token
2. Get Message
   1. Endpoint: GET /api/contacts/:contactId
   2. Deskripsi: Mendapatkan detail pesan berdasarkan ID kontak.
   3. Authorization: Bearer Token
3. Store Message
   1. Endpoint: POST /api/contacts
   2. Deskripsi: Menyimpan pesan baru.
   3. Authorization: Bearer Token
4. Delete Message
   1. Endpoint: DELETE /api/contacts/:contactId
   2. Deskripsi: Menghapus pesan berdasarkan ID kontak.
   3. Authorization: Bearer Token

Pengguna

1. Login
   1. Endpoint: POST /api/users/login
   2. Deskripsi: Masuk ke dalam sistem.
   3. Authorization: Bearer Token
2. Register
   1. Endpoint: POST /api/users
   2. Deskripsi: Mendaftarkan pengguna baru.
   3. Authorization: Bearer Token
3. Update Data
   1. Endpoint: PUT /api/users/current
   2. Deskripsi: Memperbarui data pengguna saat ini.
   3. Authorization: Bearer Token
4. Logout
   1. Endpoint: DELETE /api/users/logout
   2. Deskripsi: Keluar dari sistem.
   3. Authorization: Bearer Token
5. Check User
   1. Endpoint: GET /api/users/:username
   2. Deskripsi: Memeriksa keberadaan pengguna berdasarkan username.
   3. Authorization: Bearer Token

Implementasi Antarmuka Pengguna

Desain antarmuka pengguna dirancang untuk memberikan pengalaman yang intuitif dan mudah digunakan. Beberapa halaman utama yang dikembangkan meliputi:

• Halaman Home: Landing Page untuk Express Contact.
• Halaman Kirim Pesan: Menampilkan formulir untuk mengirim pesan anonim.
• Halaman Dashboard: Tampilan setelah user login.
• Halaman Login
• Halaman Register
• Halaman Pesan Terkirim: Menampilkan daftar pesan yang telah dikirim.
• Halaman Detail Pesan: Menampilkan detail pesan berdasarkan ID pesan.

Proyek Express Contact berhasil mengimplementasikan integrasi antara Back End dan Front End menggunakan Express.js dan React.js. Berdasarkan pengembangan dan pengujian yang dilakukan, aplikasi ini dapat mengirimkan pesan anonim dengan efektif dan memiliki potensi untuk ditingkatkan lebih lanjut dalam hal fungsionalitas dan kinerja.