Cara Membuat Website dengan AI untuk Pemula, dari Ide sampai Terbit

Pernah terpikir membuat website sendiri, tetapi langsung mengurungkan niat karena tidak mengerti pemrograman? Kalau iya, Anda mungkin penasaran saat mendengar bahwa AI bisa membantu membuat website hanya dari penjelasan yang Anda ketik. Lalu, seperti apa prosesnya, dan apakah hasilnya bisa langsung digunakan?

Agar lebih terbayang, mari kita coba membuat website satu halaman untuk toko kue fiktif menggunakan Lovable, layanan yang membantu Anda membuat website dengan instruksi dalam bahasa sehari-hari. Anda tidak perlu menulis kode sendiri untuk mengikuti latihan ini. Kita akan mulai dari menyiapkan isi, memeriksa dan memperbaiki hasilnya, hingga menerbitkan website agar bisa dibuka melalui internet.

Tentukan dulu website yang ingin dibuat

Sebelum membuka Lovable, coba bayangkan dulu website seperti apa yang ingin Anda buat. Untuk latihan ini, kita akan memakai usaha rekaan bernama Dapur Sore. Anggap saja toko ini menjual kue rumahan dan ingin memperkenalkan tiga produknya: brownies, bolu pisang, dan kukis.

Kalau Anda menjadi pengunjungnya, informasi apa yang ingin Anda lihat? Kemungkinan besar nama toko, penjelasan singkat, dan pilihan kuenya. Karena itu, kita cukup membuat bagian pembuka, cerita singkat toko, serta daftar produk. Untuk tampilannya, kita akan memakai warna krem dan cokelat muda agar terasa hangat dan sederhana.

Kita juga akan meminta AI menampilkan keterangan bahwa Dapur Sore hanyalah contoh. Dengan begitu, orang yang membukanya tidak mengira ini toko sungguhan yang menerima pesanan. Untuk latihan awal, kita belum memerlukan formulir, pembayaran, atau akun pelanggan.

Bagaimana kalau Anda ingin memakai usaha sendiri sebagai contoh? Tentu boleh. Gunakan informasi yang sesuai keadaan usaha Anda, dan catat bagian yang belum siap agar tidak diisi AI dengan keterangan karangan. Kalau masih bingung bahan apa saja yang perlu dikumpulkan, Anda bisa membaca hal yang perlu disiapkan sebelum membuat website bisnis.

Buka Lovable dan tulis instruksi

Setelah gambaran website Anda jelas, sekarang buka lovable.dev, lalu masuk atau buat akun. Lovable menyediakan paket gratis dengan batas penggunaan AI. Batas ini dihitung dalam kredit, yang terpakai setiap kali Anda meminta AI membuat atau mengubah website, dan pada paket gratis jumlahnya dibatasi setiap hari. Anda bisa memeriksa ketentuan terbarunya di panduan kredit Lovable (berbahasa Inggris).

Setelah masuk, Anda akan disambut kolom besar di tengah halaman awal. Di kolom inilah Anda menjelaskan website yang ingin dibuat. Instruksi yang Anda tulis di sini disebut prompt. Jangan khawatir, Anda tidak perlu memakai istilah teknis. Cukup jelaskan website apa yang dibutuhkan, isi yang ingin ditampilkan, dan gaya tampilan yang Anda sukai.

Untuk contoh Dapur Sore tadi, Anda bisa memasukkan instruksi berikut:

Buat website satu halaman berbahasa Indonesia untuk toko kue fiktif bernama Dapur Sore. Buat bagian pembuka, cerita singkat toko, dan daftar tiga produk contoh: brownies, bolu pisang, dan kukis. Gunakan warna krem dan cokelat muda dengan tampilan sederhana, hangat, dan nyaman dibaca di HP. Tambahkan tombol “Lihat Menu” yang menuju bagian produk. Tampilkan keterangan yang jelas bahwa ini website demonstrasi, bukan toko sungguhan. Jangan membuat testimoni, harga, alamat, nomor kontak, atau klaim usaha yang tidak diberikan. Tidak perlu formulir, pembayaran, akun pengguna, atau database.

Perhatikan bahwa instruksi itu juga menjelaskan apa yang tidak perlu ditambahkan. Mengapa? AI belum mengetahui keadaan usaha Anda, sehingga Anda perlu memberi batasan agar hasilnya tetap sesuai kebutuhan.

Sebelum mengirim, lihat pilihan mode di sebelah tombol kirim. Pastikan yang terpilih adalah Bangun (Build pada tampilan berbahasa Inggris), karena mode inilah yang membuat dan mengubah website. Setelah itu, tekan tombol panah untuk mengirim instruksi.

Lovable lalu mulai bekerja dan menunjukkan apa yang sedang dikerjakannya. Prosesnya biasanya hanya beberapa saat, jadi tunggu sampai hasilnya muncul.

Nama tombol dan letak menu Lovable bisa berubah dari waktu ke waktu. Namun, alurnya tetap sama: Anda menjelaskan kebutuhan, lalu AI membuatkan rancangannya.

Periksa hasil awal website

Begitu selesai, halaman Lovable terbagi dua. Di kiri ada kolom obrolan berisi penjelasan AI tentang apa yang sudah dibuatnya, sedangkan di kanan ada pratinjau, yaitu tampilan website yang bisa Anda periksa sebelum diterbitkan.

Apakah hasilnya persis seperti yang Anda bayangkan? Belum tentu, dan itu wajar. Anggap saja hasil pertama ini sebagai bahan untuk diperiksa dan diperbaiki bersama.

Coba gulir halamannya dari atas sampai bawah. Perhatikan apakah nama toko terbaca jelas, ketiga produk sudah muncul, dan keterangan bahwa website ini hanya contoh mudah ditemukan. Baca juga ceritanya: adakah harga, alamat, atau ulasan pelanggan yang ditambahkan padahal tidak Anda berikan?

Perhatikan pula fotonya. Pada percobaan kami, Lovable menambahkan foto kue yang dibuat oleh AI. Untuk latihan, hal ini tidak masalah. Namun, untuk website usaha sungguhan, foto seperti itu sebaiknya diganti dengan foto asli produk Anda, agar calon pelanggan tidak mengira kue yang mereka lihat adalah kue yang benar-benar Anda jual.

Setelah itu, tekan tombol Lihat Menu. Tombol tersebut seharusnya membawa Anda ke daftar produk. Bayangkan pengunjung sudah tertarik melihat pilihan kuenya, tetapi tombolnya tidak melakukan apa-apa. Sayang sekali, bukan? Karena itu, periksa juga fungsi website, selain warna dan gambarnya.

Perbaiki dengan instruksi lanjutan

Kalau Anda menemukan bagian yang kurang sesuai, bagaimana cara memperbaikinya? Anda cukup menjelaskan perubahan yang diinginkan melalui kolom instruksi. Sebutkan bagian yang bermasalah dan hasil yang Anda harapkan, seperti saat memberi masukan kepada orang yang membantu Anda.

Kembali ke Dapur Sore tadi. Misalkan judul pembukanya terlalu panjang dan nama produk sulit dibaca di HP. Anda bisa menulis:

Perpendek judul pembuka agar lebih mudah dibaca. Buat nama dan deskripsi ketiga produk lebih jelas, terutama di layar HP. Pertahankan warna dan susunan bagian lainnya. Pastikan tombol “Lihat Menu” menuju daftar produk.

Sebaiknya minta satu kelompok perubahan yang berkaitan, lalu periksa hasilnya lagi. Dengan begitu, Anda lebih mudah melihat apakah masalahnya sudah teratasi dan apakah bagian lain ikut berubah. Cara ini juga membantu Anda mempertimbangkan permintaan berikutnya, karena perubahan melalui AI menggunakan kredit.

Setelah tampilannya di komputer terasa sesuai, coba periksa tampilan HP. Caranya, tekan ikon layar di bagian atas pratinjau (lihat kotak biru kecil pada gambar sebelumnya) untuk berganti ke ukuran layar HP. Langkah ini penting, karena AI sendiri pun belum tentu memeriksanya. Pada percobaan kami, Lovable bahkan menulis bahwa ia belum melihat tampilan HP dan meminta kami mengeceknya sendiri. Apakah tulisannya tetap terbaca tanpa perlu memperbesar layar? Apakah tombolnya mudah ditekan? Kalau masih ada yang terasa kurang nyaman, jelaskan bagian itu dalam instruksi berikutnya.

Periksa sebelum website diterbitkan

Setelah beberapa kali diperbaiki, mungkin Anda sudah ingin segera membagikan hasilnya. Sebelum itu, coba posisikan diri sebagai orang yang baru pertama kali mengenal Dapur Sore. Periksa kembali beberapa hal berikut:

1. Baca seluruh tulisannya. Pastikan tidak ada informasi karangan atau kalimat yang terasa janggal.
2. Coba semua tombol dan tautan. Jangan biarkan pengunjung menekan sesuatu yang ternyata tidak berfungsi.
3. Buka tampilan HP. Pastikan tulisan, gambar, dan bagian produk tersusun dengan baik.
4. Periksa informasi pribadi. Pastikan tidak ada data pribadi yang tidak ingin Anda tampilkan atau data orang lain yang belum mendapat izin untuk dipublikasikan.
5. Pastikan status demonstrasi terlihat. Karena Dapur Sore adalah contoh, pengunjung harus tahu bahwa ini bukan toko yang menerima pesanan.

Mengapa perlu diperiksa lagi? AI membantu membuat rancangan dan melakukan perubahan, tetapi Anda yang mengetahui apakah isinya sudah benar dan hasilnya sudah sesuai tujuan. Kalau masih ada masalah, kembali dulu ke kolom instruksi dan perbaiki bagian tersebut sebelum menerbitkannya.

Terbitkan dan buka alamat website

Sekarang website Anda sudah siap untuk dicoba di luar editor. Tekan tombol Publikasikan (Publish) di kanan atas editor Lovable. Sebuah jendela kecil akan muncul, dan ada beberapa hal yang perlu Anda perhatikan di sana:

• URL situs web. Ini alamat website Anda. Lovable membuatkannya secara otomatis dari nama proyek, dan Anda bisa mengubahnya lewat ikon pensil di ujung kanan.
• Siapa yang bisa melihat. Pada paket gratis, website bersifat publik, sehingga siapa pun yang memiliki tautannya bisa membukanya. Karena itu, pastikan isinya memang sudah siap dilihat orang lain.
• Pemeriksaan keamanan. Lovable menjalankan pemeriksaan singkat secara otomatis dan menampilkan hasilnya sebelum Anda menerbitkan.

Kalau semuanya sudah sesuai, tekan Publikasikan di bagian bawah jendela tersebut untuk menerbitkan website Anda.

Seperti terlihat pada gambar, Lovable menyediakan alamat bawaan berakhiran lovable.app, sehingga Anda tidak harus membeli domain sendiri untuk latihan ini. Di jendela yang sama ada juga pilihan Tambah domain berlabel Pro, yang artinya domain sendiri baru bisa dipakai pada paket berbayar. Kalau masih bingung apa bedanya alamat bawaan dan domain milik usaha Anda, penjelasan tentang keduanya ada di artikel apa itu domain dan hosting.

Setelah prosesnya selesai, salin alamat yang diberikan dan buka melalui tab atau browser lain. Kali ini yang Anda lihat bukan lagi pratinjau, melainkan website yang benar-benar dibuka oleh pengunjung.

Perhatikan pojok kanan bawah halaman. Pada paket gratis, Lovable menampilkan label kecil Edit with Lovable di website yang sudah terbit. Untuk latihan, label ini tidak mengganggu, tetapi perlu Anda ketahui sebelum memakai website tersebut untuk usaha.

Jangan lupa, buka juga alamat tersebut langsung dari HP, lalu ulangi pemeriksaan tulisan, susunan halaman, dan tombol Lihat Menu tadi. Hasilnya kurang lebih akan tampak seperti ini:

Ada satu hal yang mudah terlewat. Kalau Anda mengubah website setelah diterbitkan, perubahan itu tidak langsung muncul pada alamat yang sudah dibagikan. Anda perlu membuka kembali tombol Publikasikan, lalu memilih opsi untuk menerbitkan perubahan terbaru (Publish changes pada tampilan berbahasa Inggris). Sebagai pengingat, Lovable menandai tombol tersebut dengan titik kecil setiap kali ada perubahan yang belum diterbitkan. Langkah dan pilihan lengkapnya tersedia di panduan publikasi Lovable (berbahasa Inggris).

Kapan website buatan AI sudah cukup?

Setelah berhasil menerbitkan Dapur Sore, mungkin Anda bertanya: apakah cara ini juga cukup untuk website usaha sungguhan? Jawabannya bergantung pada kebutuhan Anda.

Untuk mencoba ide, membuat halaman promosi sederhana seperti landing page, atau sekadar memahami cara kerja website, alat AI seperti Lovable sangat membantu. Anda bisa melihat hasilnya dalam hitungan menit dan memperbaikinya sendiri. Namun, website usaha biasanya menuntut lebih dari sekadar tampilan. Sebelum memakainya untuk usaha Anda, coba pertimbangkan beberapa hal berikut:

• Alamat dan identitas website. Alamat berakhiran lovable.app memuat nama layanannya, dan paket gratis menampilkan label Edit with Lovable. Kalau ingin memakai domain sendiri, seperti namausaha.id, Lovable mensyaratkan paket berbayar.
• Kebenaran isi. AI bisa saja menulis kalimat yang terdengar meyakinkan padahal keliru, sehingga setiap informasi tetap perlu Anda periksa sebelum dibaca calon pelanggan.
• Perawatan jangka panjang. Website usaha perlu diperbarui setiap kali harga, layanan, atau kontak berubah. Pikirkan siapa yang akan melakukannya, dan berapa kredit yang mungkin terpakai setiap kali ada perubahan.
• Kebutuhan yang lebih rumit. Fitur seperti pemesanan, pembayaran, atau penyimpanan data pelanggan menuntut pengaturan keamanan dan pengujian yang jauh lebih teliti.

Pada akhirnya, tidak ada jawaban yang sama untuk semua usaha. Kalau kebutuhan Anda sederhana dan Anda senang mengerjakannya sendiri, membuat website dengan AI bisa menjadi langkah awal yang baik. Sebaliknya, kalau website itu akan menjadi andalan usaha Anda, pertimbangkan juga waktu, tenaga, dan keahlian yang dibutuhkan untuk membangun serta merawatnya.

Ringkasan

Jadi, bagaimana cara membuat website dengan AI? Mulailah dari gambaran yang jelas tentang isi dan tujuan website, lalu sampaikan melalui instruksi sederhana. Setelah hasil awal muncul, periksa, perbaiki, dan terbitkan ketika sudah sesuai. Latihan Dapur Sore tadi menunjukkan alurnya melalui satu halaman sederhana yang bisa Anda coba sendiri.

Anda memang tidak perlu menulis kode untuk memulai, tetapi tetap perlu membaca hasilnya dan mencoba setiap fungsinya. Mulailah dengan satu langkah kecil: tuliskan nama website, isi yang ingin ditampilkan, dan gaya tampilan yang Anda sukai. Dari catatan itulah Anda bisa menyusun instruksi pertama, lalu memperbaikinya sambil melihat hasilnya.

Sudah mencoba membuat website pertama, tetapi masih ragu bentuk website seperti apa yang paling pas untuk usaha Anda? Anda bisa melanjutkan dengan membaca apa bedanya company profile dan landing page agar langkah berikutnya lebih terarah.