AI Web Building #06 — Review dan Revisi Website dengan AI

Artikel 6 dari 8 · Tahap Quality Assurance

Website Sudah Jadi, Apakah Sudah Siap Online?

Setelah menyelesaikan proses development, kita mungkin merasa website sudah selesai karena tampilannya terlihat menarik di layar laptop kita.

Namun, ada perbedaan mendasar antara website yang berhasil dibuat dan website yang siap digunakan.

• Website bisa terlihat indah di laptop, tetapi berantakan dan terpotong ketika dibuka melalui HP.
• Tombol mungkin tampak menyala, tetapi tidak melakukan aksi apa pun saat diklik.
• Fitur yang sebelumnya berjalan normal bisa saja mendadak rusak setelah kita meminta revisi di halaman lain.

Karena itu, sebelum mempublikasikan website ke publik, kita perlu melakukan proses review dan revisi terstruktur. Tahapan ini dikenal sebagai Quality Assurance (QA).

1. Review Berdasarkan Website Brief

Mulailah dengan membuka kembali dokumen WEBSITE_BRIEF.md yang sudah dibuat pada materi #04. Periksa apakah hasil website sudah memenuhi kriteria yang disepakati:

• Jika brief mewajibkan filter pencarian dokter berdasarkan spesialisasi, apakah fitur tersebut benar-benar ada dan berjalan?
• Jika brief menetapkan 5 rute halaman, apakah seluruh halaman bisa diakses lewat navbar dan footer tanpa 404?

Kamu bisa meminta AI bertindak sebagai auditor QA dengan prompt berikut:

Lakukan audit terhadap website berdasarkan WEBSITE_BRIEF.md.

Periksa:
1. Kelengkapan halaman.
2. Kesesuaian struktur dan konten.
3. Fungsionalitas setiap fitur.
4. Responsive design.
5. Konsistensi visual.
6. Aksesibilitas dasar.
7. Error handling.
8. Masalah teknis yang dapat diverifikasi.

Buat laporan dengan format:
- Bagian atau halaman
- Masalah
- Tingkat prioritas (Tinggi / Sedang / Rendah)
- Rekomendasi perbaikan
- Status verifikasi

Jangan mengklaim pengujian sudah dilakukan jika kamu belum benar-benar menjalankannya.

Jangan mengubah kode terlebih dahulu. Tampilkan temuan untuk saya review.

2. Uji Tampilan di Berbagai Ukuran Layar

Website modern wajib responsive dan nyaman digunakan di berbagai perangkat. Gunakan fitur Developer Tools (tekan F12 atau Ctrl+Shift+I, lalu klik ikon toggle device toolbar) di browser kamu.

Panduan Resolusi Uji Responsive:

[!TIP] Jangan hanya mengandalkan emulator browser. Jika memungkinkan, buka website preview langsung di layar HP kamu untuk merasakan respons sentuhan dan kenyamanan jari.

3. Uji Seluruh Interaksi (Functional Testing)

Sekarang, posisikan dirimu sebagai calon pasien atau pengguna awam yang baru pertama kali mengunjungi website.

Uji setiap item pada checklist fungsional berikut:

• Seluruh tautan menu navigasi berfungsi dan mengarah ke halaman yang tepat.
• Tombol CTA utama (misal: "Buat Janji Temu") membuka modal/formulir yang sesuai.
• Pencarian dan filter kata kunci memberikan hasil yang akurat.
• Formulir memiliki validasi (misal: memblokir input jika email tidak valid atau nomor HP kosong).
• Notifikasi sukses atau error muncul dengan pesan yang manusiawi dan jelas.
• Tidak ada halaman kosong (blank screen) atau status error tanpa penjelasan.
• Semua gambar, ikon, dan logo termuat utuh tanpa broken image.
• Data kontak (telepon, WhatsApp, email) dapat diklik (clickable links).

4. Periksa Konsistensi Desain

Desain yang konsisten membangun kepercayaan pengunjung. Perhatikan detail visual berikut:

• Warna & Tombol: Apakah warna tombol utama konsisten di seluruh halaman?
• Formulir & Kartu: Apakah rounded corner (border radius) seragam?
• Tipografi: Apakah heading level 1, 2, dan body text memiliki ukuran dan ketebalan font yang selaras?
• Spacing: Apakah margin dan padding antar-section terasa lapang dan seimbang?

5. Lakukan Revisi Secara Spesifik

Hindari memberikan instruksi revisi yang ambigu seperti "Tolong rapihin lagi dong". Berikan konteks masalah, target yang diinginkan, serta batasan yang tegas:

Perbaiki bagian hero pada halaman Home.

Masalah:
- Heading terlalu besar pada mobile sehingga memakan seluruh layar.
- Gambar banner keluar dari container (horizontal scroll bocor).
- Tombol CTA terlalu mepet dengan deskripsi teks.

Target:
- Heading memiliki ukuran responsive (fluid typography).
- Gambar banner tetap proporsional dan tidak keluar container.
- Spacing antar-elemen konsisten sesuai design system.
- Tidak ada horizontal overflow pada resolusi mobile 375px.

Batasan:
- Jangan mengubah teks atau copywriting.
- Jangan mengubah bagian navbar atau section lain yang sudah sesuai.
- Pertahankan desain desktop yang sudah rapi.

Setelah perubahan, jelaskan file yang diubah dan cara memverifikasi hasilnya.

[!NOTE] Selalu dahulukan revisi yang memperbaiki fungsi rusak (critical bugs), baru setelah itu lanjutkan ke penyempurnaan kosmetik dan estetika.

6. Jalankan Pemeriksaan Teknis

Jika kamu memiliki akses ke source code proyek (misal di folder komputer lokal), jalankan script pemeriksaan standar:

npm run build

Perintah build akan memverifikasi apakah ada sintaks yang rusak, broken imports, atau error kompilasi sebelum deploy.

Jika proyek dilengkapi linting dan testing:

npm run lint
npm test

Jika muncul error di terminal, salin pesan error secara lengkap ke AI beserta nama filenya. AI akan mendiagnosis baris penyebab dan memberikan solusinya.

7. Lakukan Final Review

Sebelum menandai website siap online:

1. Pastikan seluruh fitur inti dari brief sudah berjalan.
2. Pastikan build berhasil tanpa error (exit code 0).
3. Pastikan tidak ada data sensitif (seperti password atau API key pribadi) yang tertinggal di dalam kode frontend.

Hasil Akhir Materi #06

Website telah melalui proses audit dan pengujian fungsional secara ketat. Masalah tampilan responsif dan bug interaksi telah diperbaiki, sehingga website siap disimpan ke dalam sistem version control.

Kesimpulan

Proses review dan revisi adalah pembeda utama antara web developer amatir dan profesional. AI adalah asisten luar biasa untuk menemukan celah dan memperbaiki kode dengan kilat, tetapi ketelitian manusia tetap menjadi penentu kualitas akhir.

Setelah website teruji dan bebas error, materi selanjutnya akan memandu kamu menyimpan seluruh kode proyek ke GitHub.