Meluncurkan situs portofolio Anda dengan AI

1. Pengantar

Ringkasan

Di mana proses pengembangan dengan AI dimulai saat ini? Bagi sebagian besar dari kita, proses ini dimulai dengan kueri atau prototipe. Google AI Studio menawarkan Mode Pengembangan yang canggih (sering disebut sebagai "vibe coding") yang memungkinkan Anda mendesain, menguji, dan membangun aplikasi web menggunakan pembuatan kode yang didukung oleh model Gemini.

Dalam codelab ini, Anda akan membangun situs web portofolio pribadi. Agen AI Studio akan menulis kode frontend. Setelah aplikasi disempurnakan, Anda akan men-deploy-nya langsung ke Cloud Run dengan satu klik.

Yang akan Anda lakukan

• Meminta Google AI Studio untuk membuat prototipe situs web portofolio pribadi.
• Menguji aplikasi di sandbox pratinjau interaktif.
• Men-deploy aplikasi ke Cloud Run langsung dari UI Google AI Studio.

Yang akan Anda pelajari

• Cara menggunakan mode Pengembangan Google AI Studio untuk membuat prototipe layanan frontend dengan cepat menggunakan bahasa alami.
• Cara men-deploy aplikasi AI Studio sebagai container serverless di Cloud Run.

2. Penyiapan Project

Sebelum meluncurkan AI Studio, verifikasi status akun dan prasyarat Anda.

Informasi Akun Google &Tingkat

1. Jika belum memiliki Akun Google, buat Akun Google.
   • Tips: Gunakan Akun Google pribadi untuk lab ini jika memungkinkan. Akun grup, perusahaan, atau sekolah dapat menerapkan kebijakan Workspace yang menonaktifkan fitur eksperimental atau integrasi cloud.
2. Tinjau detail penagihan untuk deployment:
   • Google Cloud Starter Tier: Memungkinkan publikasi hingga dua aplikasi full-stack di wilayah tertentu tanpa biaya, tanpa membuat akun penagihan Google Cloud lengkap.
   • Deployment Standar: Terhubung ke project Google Cloud berbayar yang ada dan memperluas batas penyimpanan, resource CPU, dan API.

3. Membuat Situs Web Portofolio dalam Mode Pengembangan AI Studio

Buat shell aplikasi dan minta asisten kode AI untuk membangun tata letak frontend.

1. Buka panel Aplikasi Google AI Studio, lalu klik Aplikasi Baru.
2. Di kotak perintah chat, masukkan deskripsi untuk aplikasi portofolio Anda:

   Build a professional personal portfolio website. The site should
   have a modern, responsive design and sections for my biography,
   projects showcase, skills, and links to my professional profiles
   (e.g., GitHub, LinkedIn).
   

3. Klik Buat untuk memulai proses pembuatan aplikasi.

4. Menguji dan Melakukan Iterasi

Sebelum meluncurkan layanan secara langsung, jalankan pemeriksaan validasi di pratinjau interaktif.

1. Buka panel pratinjau di dalam Google AI Studio.
2. Berinteraksi dengan tombol navigasi, link, atau tata letak apa pun di sandbox pratinjau untuk memverifikasi pengalaman visual.
   • Catatan tentang memperbaiki error: Selama pembuatan atau pengujian, Anda mungkin sesekali menghadapi masalah runtime atau error kompilasi. Jika hal ini terjadi, AI Studio akan menampilkan tombol Perbaiki di chat, sehingga Anda dapat meminta agen untuk mendiagnosis dan memperbaiki masalah secara otomatis.
   
3. Jika ingin mengubah gaya atau perilaku, instruksikan agen melalui jendela chat. Misalnya:
   • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
   • "Include a new section to showcase my recent presentations and talks."
4. Tunggu agen memperbarui codebase dan periksa browser pratinjau untuk melihat pembaruan.

5. Men-deploy ke Cloud Run

Setelah prototipe berfungsi penuh, deploy sebagai layanan publik di Cloud Run.

1. Di pojok kanan atas Google AI Studio, klik tombol Publikasikan untuk memulai wizard deployment.
2. Klik Mulai untuk mengonfigurasi project Google Cloud Anda.
   • Pastikan drop-down Project Google Cloud target cocok dengan project yang Anda kaitkan dengan ruang kerja.
   • AI Studio akan otomatis membuat ID layanan unik untuk instance Cloud Run.
3. Jika ini adalah deployment pertama Anda dan Anda menggunakan parameter Google Cloud standar, Anda mungkin akan diminta untuk menentukan jenis organisasi dan memberikan detail penagihan.
4. Klik Publikasikan Aplikasi.
5. Langkah-langkah pembuatan container, pendaftaran container, dan deployment layanan terjadi di latar belakang. Proses ini biasanya selesai dalam 2–4 menit.
6. Setelah deployment selesai, salin URL Aplikasi yang dibuat dan buka link aplikasi langsung di tab browser.
7. Uji aplikasi web langsung di browser Anda.

6. (OPSIONAL) Menambahkan domain kustom

Secara default, Cloud Run menghosting layanan Anda di subdomain run.app yang dikelola Google. Jika ingin menggunakan domain pribadi (seperti yourname.com atau portfolio.yourname.com), Anda dapat memetakan domain kustom ke layanan.

Langkah 1: Menambahkan pemetaan domain di Cloud Run

1. Buka halaman Pemetaan Domain Cloud Run di Konsol Google Cloud.
2. Klik Tambahkan Pemetaan.
3. Pilih layanan Cloud Run yang ingin Anda petakan dari menu drop-down.
4. Masukkan nama domain kustom Anda (misalnya, yourname.com atau portfolio.yourname.com).
5. Klik Berikutnya atau Lanjutkan. Cloud Run akan menampilkan data DNS (seperti A/AAAA atau CNAME data) yang harus Anda buat dengan registrar domain.

Langkah 2: Mengonfigurasi registrar DNS

1. Login ke panel administrasi registrar domain Anda (misalnya, Squarespace, GoDaddy, atau Namecheap).
2. Buka halaman konfigurasi setelan DNS atau pengelolaan DNS untuk domain Anda.
3. Buat data DNS yang cocok dengan nilai yang ditampilkan di wizard pemetaan Cloud Run:
   • Untuk pemetaan domain apex (misalnya, yourname.com), tambahkan data A dan AAAA yang tercantum.
   • Untuk pemetaan subdomain (misalnya, portfolio.yourname.com), tambahkan data CNAME yang tercantum.
4. Simpan perubahan konfigurasi DNS.

Langkah 3: Menunggu penyediaan sertifikat SSL

Setelah perubahan DNS diterapkan:

1. Google Cloud akan otomatis menyediakan sertifikat SSL/TLS terkelola untuk koneksi aman Anda.
2. Proses ini biasanya selesai dalam waktu sekitar 15 menit, tetapi dapat memerlukan waktu hingga 24 jam, bergantung pada penerapan DNS.
3. Setelah selesai, domain kustom Anda akan di-routing dengan aman ke situs web portofolio Anda.

Catatan: Pemetaan domain Cloud Run masih dalam pratinjau dan hanya tersedia di region tertentu. Jika layanan Cloud Run Anda berada di region yang tidak mendukung Pemetaan Domain, Anda dapat memetakan domain menggunakan Load Balancer Aplikasi Eksternal Global atau Firebase Hosting.

7. Pembersihan

Untuk menghindari tagihan yang tidak terduga atau membersihkan resource ruang kerja Anda:

1. Di Google AI Studio, buka halaman Aplikasi.
2. Temukan aplikasi Anda di petak atau daftar.
3. Klik ikon sampah untuk menghapus status aplikasi dan membatalkan publikasi layanan dari Cloud Run.
4. Jika Anda men-deploy menggunakan project standar dan ingin menonaktifkan semua resource sepenuhnya, buka Setelan Project Konsol Google Cloud dan hapus project yang mendasarinya.

8. Kesimpulan

Selamat! Anda telah mendesain, mengembangkan, dan men-deploy situs web portofolio langsung dari Google AI Studio.

Pelajari Lebih Lanjut

Buka link ini untuk mengklaim badge Perjalanan Developer Selesai.

Untuk melanjutkan perjalanan Anda, buka goo.gle/builders untuk lab berikutnya.

• Dokumen Cloud Run
• Membangun aplikasi di Google AI Studio