Tutorial Lengkap: Membuat Aplikasi Web Sendiri secara Gratis dengan Google Gemini dan Google Apps Script

Membangun aplikasi web kini bukan lagi ranah eksklusif pemrogram profesional. Dengan bantuan kecerdasan buatan (AI) seperti Google Gemini yang dipadukan dengan Google Apps Script, siapa pun—termasuk yang tidak pernah menulis satu baris kode—dapat membangun aplikasi fungsional dalam hitungan jam, tanpa biaya sepeser pun.

Konsep dasarnya sederhana. Ada tiga komponen yang saling terhubung:

Gemini berperan sebagai "programmer" yang menulis kode atas instruksi Anda.
Google Apps Script berperan sebagai server yang menjalankan kode tersebut dan menerbitkannya sebagai halaman web yang bisa diakses lewat tautan (URL).
Google Spreadsheet berperan sebagai basis data (database) tempat semua data yang diinput pengguna aplikasi tersimpan secara otomatis.

Anda tidak wajib memahami bahasa pemrograman untuk mengikuti tutorial ini. Namun, memahami konsep di atas akan sangat membantu ketika Anda perlu memperbaiki kesalahan kecil di kemudian hari.

Yang Anda Butuhkan Sebelum Memulai

Akun Google (Gmail) yang aktif.
Peramban (browser) modern seperti Chrome, Edge, atau Firefox.
Koneksi internet yang stabil.
Waktu luang sekitar 30–60 menit untuk percobaan pertama.

Tidak diperlukan instalasi perangkat lunak apa pun. Seluruh proses berjalan di dalam browser.

BAGIAN I — Merancang Aplikasi dengan Google Gemini

Langkah 1: Buka Gemini dan Pilih Model yang Tepat

Buka gemini.google.com lalu masuk dengan akun Google Anda.

Gemini menyediakan beberapa varian model dengan kemampuan berbeda. Untuk urusan menulis kode, pilih model dengan kemampuan penalaran (reasoning) tertinggi yang tersedia di akun Anda—biasanya ditandai sebagai model kelas "Pro" atau model terbaru yang direkomendasikan untuk tugas coding dan agentik. Model kelas ringan ("Flash") tetap bisa dipakai dan cukup cepat, tetapi model kelas atas umumnya menghasilkan kode yang lebih rapi dan lebih jarang salah pada percobaan pertama.

Jika Anda pengguna gratis, gunakan saja model default tertinggi yang ditawarkan; jika berlangganan Google AI Pro atau Ultra, pilih model paling mumpuni yang tersedia di menu pemilihan model.

Langkah 2: Susun Instruksi (Prompt) secara Spesifik dan Lengkap

Kualitas aplikasi yang dihasilkan sangat bergantung pada kejelasan instruksi Anda. Instruksi yang samar akan menghasilkan kode yang juga samar. Sertakan lima unsur berikut dalam prompt Anda:

Nama dan tujuan aplikasi — apa fungsinya, siapa penggunanya.
Daftar fitur — apa saja yang bisa dilakukan pengguna di dalamnya.
Struktur data — kolom atau informasi apa saja yang perlu disimpan.
Gaya tampilan — kesan visual yang diinginkan (minimalis, berwarna, formal, dsb).
Instruksi teknis eksplisit — bahwa kode harus kompatibel dengan Google Apps Script.

Poin kelima ini sering terlewat oleh pemula, padahal krusial. Tanpa instruksi ini, Gemini cenderung menuliskan kode web biasa (seperti untuk Node.js atau React) yang tidak bisa langsung dijalankan di Apps Script.

Contoh prompt yang lengkap:

Saya ingin membuat aplikasi web pencatatan keuangan pribadi bernama "Aplikasi Uangku". Fiturnya: formulir input transaksi (tanggal, kategori, jenis pemasukan/pengeluaran, nominal, catatan), daftar riwayat transaksi, dan ringkasan total saldo. Tampilan harus modern, bersih, dan responsif untuk layar ponsel.

Buatkan kode agar bisa langsung saya jalankan di Google Apps Script, dengan ketentuan teknis berikut:

Pisahkan kode menjadi dua bagian: kode back-end dalam file Code.gs, dan kode tampilan dalam file HTML bernama index.
Di Code.gs, sertakan fungsi doGet(e) yang me-render file HTML tersebut.
Gunakan SpreadsheetApp untuk menyimpan dan membaca data dari Google Spreadsheet yang terhubung.
Gunakan google.script.run di sisi HTML untuk memanggil fungsi back-end (bukan fetch ke API eksternal).
Tuliskan kode back-end dan HTML dalam dua blok kode terpisah agar mudah saya salin satu per satu.

Prompt seperti ini jauh lebih efektif dibanding sekadar menulis "buatkan aplikasi pencatatan keuangan". Jika Anda belum punya gambaran fitur yang lengkap, Anda tetap boleh meminta Gemini memberi rekomendasi fitur tambahan yang relevan.

Langkah 3: Manfaatkan Fitur Canvas untuk Pratinjau

Saat Gemini menghasilkan kode, aktifkan atau perhatikan tampilan Canvas—fitur bawaan yang menampilkan kode sekaligus pratinjau visualnya secara langsung di layar. Fitur ini memudahkan Anda menilai tampilan tanpa harus menyalin kode terlebih dahulu.

Langkah 4: Minta Revisi Sampai Sesuai Keinginan

Jangan langsung menyalin kode dari hasil pertama. Uji dulu tampilannya lewat Canvas, lalu minta perbaikan spesifik, misalnya:

"Ubah skema warna menjadi biru dan putih."
"Buat tombol simpan lebih besar dan mudah ditekan di layar ponsel."
"Tambahkan validasi supaya kolom nominal tidak bisa dikosongkan."
"Tambahkan notifikasi kecil setelah data berhasil tersimpan."

Ulangi proses ini beberapa kali sampai Anda puas dengan hasilnya. Semakin detail revisi yang Anda minta, semakin dekat hasil akhirnya dengan bayangan Anda.

Langkah 5: Salin Kode yang Dihasilkan

Setelah desain final disetujui, salin kode dalam dua bagian terpisah:

Kode back-end (berisi fungsi doGet, SpreadsheetApp, dan logika penyimpanan data).
Kode front-end (berupa HTML lengkap dengan CSS dan JavaScript di dalamnya).

Simpan sementara kedua kode ini di aplikasi catatan (misalnya Notepad atau Google Docs) agar mudah diakses pada langkah berikutnya.

BAGIAN II — Menyiapkan Google Spreadsheet sebagai Basis Data

Langkah 1: Buat Spreadsheet Baru

Buka sheets.google.com, lalu klik Spreadsheet kosong (Blank spreadsheet).

Langkah 2: Beri Nama Sesuai Aplikasi

Klik judul "Spreadsheet tanpa judul" di kiri atas, lalu ganti dengan nama yang jelas, misalnya "Data Uangku". Penamaan yang jelas membantu Anda tidak tertukar jika suatu saat memiliki banyak proyek serupa.

Langkah 3: Sesuaikan Nama Sheet dan Header Kolom (Jika Diperlukan)

Beberapa kode yang dihasilkan AI akan otomatis membuat header kolom saat pertama kali dijalankan. Namun, ada juga yang mengasumsikan header sudah tersedia lebih dulu. Untuk amannya:

Perhatikan nama tab sheet di pojok kiri bawah (default: "Sheet1"). Jika kode yang Anda salin merujuk ke nama tertentu (misalnya "Transaksi"), sesuaikan nama tab sheet dengan nama tersebut.
Jika prompt Anda pada Langkah 2 Bagian I menyebutkan kolom seperti "Tanggal, Kategori, Jenis, Nominal, Catatan", Anda bisa menuliskan header itu secara manual di baris pertama sebagai jaga-jaga.

Langkah ini mencegah kesalahan umum "data tidak tersimpan di kolom yang benar" yang sering dialami pemula.

BAGIAN III — Memasukkan Kode ke Google Apps Script

Langkah 1: Buka Editor Apps Script

Pada Spreadsheet yang baru dibuat, klik menu Ekstensi (Extensions) > Apps Script. Sebuah tab baru akan terbuka berisi editor kode.

Langkah 2: Kenali Struktur Proyek

Secara default, proyek baru berisi satu file bernama Code.gs yang masih kosong. Inilah tempat kode back-end akan dimasukkan.

Langkah 3: Masukkan Kode Back-End

Hapus seluruh isi bawaan pada Code.gs, lalu tempelkan (paste) kode back-end yang telah Anda salin dari Gemini.

Langkah 4: Tambahkan File HTML untuk Front-End

Klik ikon tambah (+) di samping tulisan "Files" pada panel kiri, lalu pilih HTML. Beri nama file tersebut index (huruf kecil, tanpa spasi)—nama ini harus sama persis dengan nama file yang dipanggil oleh fungsi doGet di kode back-end. Setelah file terbuat, hapus isi bawaannya dan tempelkan kode front-end (HTML) yang telah Anda salin.

Catatan penting: jika nama file HTML tidak sesuai dengan yang dirujuk dalam fungsi doGet, aplikasi akan menampilkan halaman error saat dibuka nanti. Pastikan keduanya cocok.

Langkah 5: Simpan Proyek

Tekan Ctrl+S (atau Cmd+S di Mac) untuk menyimpan. Anda akan diminta memberi nama proyek—isi dengan nama aplikasi Anda, misalnya "Aplikasi Uangku".

BAGIAN IV — Menerbitkan (Deploy) Aplikasi sebagai Web App

Inilah tahap yang mengubah kode Anda menjadi aplikasi yang benar-benar bisa diakses lewat internet.

Langkah 1: Mulai Proses Deployment

Klik tombol Deploy di pojok kanan atas editor, lalu pilih New deployment (Deployment baru).

Langkah 2: Pilih Jenis Deployment

Klik ikon roda gigi (⚙️) di samping tulisan "Select type", lalu pilih Web app.

Langkah 3: Atur Konfigurasi Eksekusi dan Akses

Akan muncul beberapa kolom pengaturan:

Description: isi bebas, misalnya "Versi pertama".
Execute as: pilih Me (akun Anda sendiri), agar skrip berjalan menggunakan izin akun Anda, bukan izin pengunjung aplikasi.
Who has access: pilih Anyone (Siapa saja), agar aplikasi bisa dibuka oleh siapa pun yang memiliki tautannya, termasuk yang tidak memiliki akun Google.

Langkah 4: Klik Deploy dan Berikan Izin Akses

Klik tombol Deploy. Google akan meminta Anda memberikan otorisasi karena skrip ini baru dan belum diverifikasi. Ikuti urutan berikut dengan tenang—ini adalah prosedur keamanan standar Google, bukan tanda ada yang salah:

Pilih akun Google Anda.
Akan muncul peringatan "Google hasn't verified this app". Klik Advanced (Lanjutan).
Klik tautan "Go to [nama proyek Anda] (unsafe)".
Tinjau daftar izin yang diminta (biasanya akses ke Spreadsheet Anda), lalu klik Allow (Izinkan).

Peringatan "tidak aman" muncul semata-mata karena skrip ini dibuat pribadi dan belum melalui proses peninjauan aplikasi publik oleh Google—hal ini normal untuk proyek Apps Script pribadi dan tidak berarti ada malware di dalamnya, selama Anda yakin dengan isi kode yang Anda masukkan sendiri.

Langkah 5: Salin URL Aplikasi Web

Setelah izin diberikan, akan muncul jendela berisi Web app URL. Salin tautan ini—inilah alamat aplikasi Anda yang sudah aktif dan bisa dibuka dari perangkat mana pun.

BAGIAN V — Menguji dan Memvalidasi Aplikasi

Langkah 1: Buka Tautan di Tab Baru

Tempelkan URL yang telah disalin ke tab browser baru, lalu tekan Enter.

Langkah 2: Uji Coba Input Data

Isi formulir yang tersedia dengan data contoh, lalu klik tombol simpan atau submit.

Langkah 3: Verifikasi Data Masuk ke Spreadsheet

Kembali ke tab Google Sheets, lalu periksa apakah data yang baru saja Anda input muncul sebagai baris baru. Jika muncul dengan benar di kolom yang sesuai, berarti alur aplikasi—dari formulir, ke server, ke basis data—sudah berjalan sempurna.

Langkah 4: Uji di Perangkat Lain

Buka tautan yang sama di ponsel atau perangkat lain untuk memastikan tampilan tetap rapi dan berfungsi (responsif).

BAGIAN VI — Memperbarui Aplikasi di Kemudian Hari

Ini adalah bagian yang paling sering membuat pemula bingung: mengedit kode di Code.gs atau index.html tidak akan otomatis mengubah aplikasi yang sudah dipakai lewat URL yang sama. URL yang sudah diterbitkan tetap menjalankan versi kode yang aktif saat itu.

Untuk memperbarui aplikasi yang sudah live, ikuti langkah berikut setiap kali Anda mengubah kode:

Edit kode seperlunya di editor Apps Script, lalu simpan (Ctrl+S).
Klik Deploy > Manage deployments (Kelola deployment).
Klik ikon pensil (edit) di samping deployment yang sudah ada.
Pada bagian Version, pilih New version (Versi baru).
Klik Deploy.

Dengan cara ini, URL aplikasi Anda tetap sama, tetapi kini menjalankan kode versi terbaru.

Kesalahan Umum dan Solusinya

Gejala	Penyebab Umum	Solusi
Halaman menampilkan error "Script function not found: doGet"	Fungsi `doGet(e)` tidak ada atau salah ketik di `Code.gs`	Periksa kembali kode back-end, pastikan fungsi `doGet` benar-benar ada
Halaman kosong atau error saat dibuka	Nama file HTML tidak cocok dengan yang dipanggil `doGet`	Samakan nama file HTML (harus persis, termasuk huruf besar/kecil)
Data tidak masuk ke spreadsheet	Nama sheet di kode tidak sama dengan nama tab di spreadsheet	Sesuaikan nama tab sheet dengan nama yang dirujuk kode, atau minta Gemini merevisi kodenya
Muncul peringatan "This app isn't verified"	Perilaku standar Google untuk skrip pribadi baru	Klik Advanced > Go to [nama proyek] (unsafe) > Allow, ini aman untuk skrip milik sendiri
Perubahan kode tidak terlihat di aplikasi yang sudah dipakai	Belum membuat deployment versi baru	Ikuti langkah pembaruan pada Bagian VI di atas
Aplikasi berhenti merespons pada penggunaan berat	Melewati batas kuota harian Apps Script	Lihat bagian "Batasan yang Perlu Diketahui" di bawah

Batasan yang Perlu Diketahui

Google Apps Script gratis untuk digunakan, tetapi tetap memiliki sejumlah batasan wajar yang perlu Anda ketahui sebelum membangun aplikasi untuk penggunaan serius:

Batas waktu eksekusi: setiap kali skrip dijalankan (misalnya saat pengguna menekan tombol simpan), prosesnya harus selesai dalam maksimal 6 menit. Batas ini berlaku sama baik untuk akun Gmail biasa maupun akun Google Workspace.
Kuota harian: ada batas jumlah pemanggilan layanan tertentu per hari (misalnya jumlah permintaan ke layanan eksternal), yang di-reset 24 jam setelah permintaan pertama. Akun Google Workspace berbayar umumnya mendapat kuota lebih besar dibanding akun Gmail gratis.
Bukan untuk trafik sangat tinggi: Apps Script dirancang untuk automasi pribadi atau tim kecil, bukan aplikasi dengan ribuan pengguna bersamaan. Jika aplikasi Anda berkembang pesat, pertimbangkan migrasi ke platform hosting yang lebih matang.
Angka kuota bisa berubah sewaktu-waktu karena kebijakan Google. Untuk kepastian angka terkini, periksa halaman resmi Apps Script Quotas di situs developer Google sebelum merancang aplikasi berskala besar.

Untuk aplikasi pribadi, catatan tim kecil, formulir surat-menyurat, atau content planner sederhana, batasan-batasan ini pada praktiknya jarang menjadi masalah.

Tips Tambahan

Domain sendiri: jika Anda memiliki nama domain pribadi, URL bawaan Apps Script yang panjang dapat disematkan (embed) di dalam halaman situs Anda sendiri lewat elemen iframe, sehingga terlihat lebih ringkas dan profesional bagi pengunjung.
Metode ini fleksibel: pola yang sama—Gemini merancang kode, Apps Script menjalankannya, Spreadsheet menyimpan data—berlaku untuk berbagai jenis aplikasi lain, mulai dari pencatat rencana kerja, formulir administrasi surat-menyurat, hingga content planner untuk media sosial.
Selalu simpan salinan kode: setiap kali Anda meminta revisi besar ke Gemini, salin dulu kode versi sebelumnya ke catatan terpisah, agar Anda punya versi cadangan jika revisi baru justru merusak fitur yang sudah berjalan baik.

Penutup

Hambatan teknis yang selama ini membatasi orang untuk membangun aplikasi sendiri kini banyak terpangkas oleh kombinasi AI generatif dan platform gratis seperti Google Apps Script. Yang dibutuhkan bukan lagi kemampuan menulis kode dari nol, melainkan kemampuan menyusun instruksi yang jelas dan ketekunan menguji hasilnya langkah demi langkah.

Referensi video demonstrasi terkait topik ini dapat ditonton di: https://www.youtube.com/watch?v=uNreLaXgqog