Meluncurkan situs portofolio Anda dengan AI

1. Pengantar

Ringkasan

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

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

versi akhir situs portofolio

Yang akan Anda lakukan

  • Minta Google AI Studio membuat prototipe situs portofolio pribadi.
  • Uji aplikasi di sandbox pratinjau interaktif.
  • Deploy aplikasi ke Cloud Run langsung dari UI Google AI Studio.

Yang akan Anda pelajari

  • Cara menggunakan mode Build 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 Anda belum memiliki Akun Google, buat Akun Google.
    • Tips: Jika memungkinkan, gunakan Akun Google pribadi untuk lab ini. Akun grup, perusahaan, atau sekolah dapat menerapkan kebijakan Workspace yang menonaktifkan fitur eksperimental atau integrasi cloud.
  2. Tinjau detail penagihan untuk deployment:
    • Tingkat Pemula Google Cloud: Memungkinkan penerbitan hingga dua aplikasi full-stack di wilayah tertentu tanpa biaya, tanpa membuat akun penagihan Google Cloud penuh.
    • Deployment Standar: Terhubung ke project Google Cloud berbayar yang sudah ada dan memperluas batas penyimpanan, resource CPU, dan API.

3. Membuat Situs Portofolio di Mode Pembuatan AI Studio

Buat shell aplikasi dan minta asisten kode AI untuk membuat 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).
    Link ini akan otomatis mengisi kotak perintah untuk Anda.
  3. Klik Build untuk memulai proses pembuatan aplikasi.

4. Uji dan Lakukan Iterasi

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

  1. Buka panel pratinjau di dalam Google AI Studio.
  2. Berinteraksilah 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 dalam chat, sehingga Anda dapat meminta agen untuk mendiagnosis dan memperbaiki masalah secara otomatis.
    Lokasi Tombol Perbaikan Google AI Studio
  3. Jika Anda ingin mengubah gaya atau perilaku, beri petunjuk kepada agen melalui jendela chat. Contoh:
    • "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 hingga agen memperbarui codebase dan periksa browser pratinjau untuk melihat pembaruan.

5. Men-deploy ke Cloud Run

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

  1. Di pojok kanan atas Google AI Studio, klik tombol Publish untuk memulai wizard deployment.Lokasi Tombol Publikasikan Google AI Studio
  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 Anda.
    • AI Studio akan otomatis membuat ID layanan unik untuk instance Cloud Run.
    • Secara opsional, Anda dapat menentukan awalan URL .ai.studio kustom (misalnya, your-portfolio-name.ai.studio) sebagai bagian dari konfigurasi deployment.
  3. Jika ini adalah pertama kalinya Anda men-deploy dan Anda menggunakan parameter Google Cloud standar, Anda mungkin 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 waktu 2–4 menit.
  6. Setelah deployment selesai, salin URL Aplikasi yang dihasilkan dan buka link aplikasi aktif di tab browser.
  7. Uji aplikasi web aktif 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 Anda.

Langkah 1: Tambahkan pemetaan domain di Cloud Run

  1. Buka halaman Cloud Run Domain Mappings 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 data A/AAAA atau CNAME) yang harus Anda buat dengan registrar domain Anda.

Langkah 2: Konfigurasi registrar DNS Anda

  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 catatan CNAME yang tercantum.
  4. Simpan perubahan konfigurasi DNS.

Langkah 3: Tunggu 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 propagasi DNS.
  3. Setelah selesai, domain kustom Anda akan dirutekan dengan aman ke situs portofolio Anda.

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 dalam 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 portofolio langsung dari Google AI Studio.

Pelajari Lebih Lanjut

Buka link ini untuk mengklaim badge Perjalanan Pembuat Selesai.

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