MemulaiMigrasiImpor dari AI Studio

Cara Mengekspor Proyek Google AI Studio Anda ke GitHub

Panduan ini adalah cara termudah untuk mengubah kode yang dihasilkan oleh Google AI Studio (Gemini) menjadi proyek permanen yang dapat Anda simpan, edit, dan bagikan ke seluruh dunia.

Ikhtisar

Google AI Studio luar biasa untuk “Vibe Coding” — meminta Gemini membuat aplikasi React, game, atau alat dalam hitungan detik. Namun, AI Studio adalah sandbox; agar Anda benar-benar memiliki kode dan dapat mengembangkannya lebih lanjut, Anda perlu memindahkannya ke GitHub.

Alur Kerja:

  • Buat: Hasilkan aplikasi Anda di AI Studio (Build Mode).
  • Ekspor: Push kode langsung ke GitHub dengan satu klik.
  • Sempurnakan: Clone ke komputer Anda (VS Code/Cursor) untuk dikembangkan lebih lanjut.

📝 Catatan Penting: Panduan ini berfokus pada mode “Build” (membuat aplikasi/situs web lengkap). Jika aplikasi Anda menggunakan API key (seperti Gemini API), ingatlah bahwa demi alasan keamanan, Anda tidak boleh meng-commit key tersebut langsung ke GitHub. Kami akan membahas cara menanganinya pada langkah Pengaturan Lokal.

Prasyarat

Ikhtisar Migrasi

Rencana ini memindahkan Anda dari hasil generate AI yang bersifat sementara ke lingkungan pengembangan yang profesional.

  • Sumber: Google AI Studio (Gemini 2.0 Flash/Pro).
  • Jembatan: Integrasi GitHub AI Studio.
  • Tujuan: Repositori GitHub Anda.

Langkah 1: Buat Aplikasi Anda di AI Studio

Sebelum dapat mengekspor, Anda memerlukan sebuah proyek. Kita akan menggunakan fitur Build (terkadang disebut “Vibe Coding”) untuk menghasilkan aplikasi lengkap.

  1. Masuk ke Build Mode:
    • Buka Google AI Studio.
    • Klik Create New lalu pilih App (atau pastikan toggle di bagian atas diatur ke “Build”, bukan “Prompt”).
  2. Beri Prompt ke AI:
    • Ketik permintaan Anda (misalnya “Create a Pomodoro timer with a cyberpunk aesthetic using React and Tailwind”).
    • Tunggu hingga pratinjau dimuat di sisi kanan.
  3. Sempurnakan (Opsional):
    • Mengobrollah dengan Gemini untuk menyesuaikan desain (misalnya “Make the start button green”).
    • Setelah Anda puas dengan pratinjaunya, Anda siap untuk mengekspor.

Langkah 2: Push Kode ke GitHub

Setelah kode Anda siap, Anda akan memindahkannya dari sandbox Google ke sistem version control milik Anda sendiri.

  1. Temukan Integrasi GitHub:

    • Lihat bilah header di atas panel kode/pratinjau.
    • Klik ikon GitHub (siluet kucing).

    AI Studio github icon

  2. Otorisasi (Hanya Pertama Kali):

    • Jika Anda belum pernah menghubungkannya, sebuah pop-up akan meminta izin.
    • Klik Connect Account dan otorisasi Google AI Studio untuk membuat repositori atas nama Anda.

    Sign In Github (If you didn't done it before)

  3. Konfigurasikan Repositori:

    • Repository Name: Masukkan nama yang rapi (misalnya cyberpunk-pomodoro). Catatan: Spasi tidak diperbolehkan.
    • Description: (Opsional) “Generated by Gemini”.
    • Visibility: Pilih Public (terlihat oleh semua orang) atau Private (hanya terlihat oleh Anda).

    Fill in the repo name and description

    • Klik Push.

    Click Stage and commit

  4. Verifikasi:

    • Tunggu pesan berhasil: “Successfully pushed to GitHub”.
    • Klik tautan yang tersedia di pesan tersebut untuk membuka repositori baru Anda di GitHub.

Langkah 3: Siapkan Lingkungan Lokal (Cursor)

Setelah kode berada di GitHub, Anda akan menyiapkannya secara lokal untuk memverifikasi dependensi dan melakukan penyesuaian untuk production.

  1. Clone Repositori: Buka Cursor, buka Command Palette (Cmd+Shift+P atau Ctrl+Shift+P), lalu ketik > Git: Clone. Tempelkan URL repositori baru Anda.

    Alternatifnya, melalui terminal:

    git clone <https://github.com/your-username/your-repo-name.git>
cd your-repo-name

  2. Instal Dependensi: Proyek AI Studio biasanya mendeteksi package manager secara otomatis. Periksa keberadaan lock file (pnpm-lock.yaml, package-lock.json, atau yarn.lock).

    # Jika menggunakan npm
npm install
 
# Jika menggunakan pnpm
pnpm install

  3. Pengaturan Environment:

    • Temukan file .env.example (jika ada) dan duplikat file tersebut untuk membuat file .env.
    • Penting: Jika aplikasi AI Studio Anda menggunakan API key (Gemini API, dll.), Anda harus menambahkan key tersebut secara manual ke file .env lokal Anda. AI Studio tidak mengekspor secret Anda ke GitHub demi alasan keamanan.

  4. Uji Lokal: Jalankan development server untuk memastikan aplikasi berfungsi di luar sandbox AI Studio.

    npm run dev

Langkah 4: Buka di Editor Lokal dan Instal Ekstensi Zeabur

Buka folder proyek di editor kode lokal (seperti VS Code atau Cursor). Agar proses deploy menjadi sangat mudah, Anda akan menggunakan ekstensi Zeabur.

  1. Buka Extensions Marketplace di editor Anda.
  2. Cari “Zeabur” lalu klik Install. Download Zeabur Extension.png

Langkah 5: Deploy dengan Satu Klik

Sekarang saatnya momen ajaib. Dengan ekstensi yang sudah terinstal, men-deploy proyek Anda hanya butuh beberapa klik.

  1. Klik ikon Zeabur yang baru di activity bar sebelah kiri.
  2. Klik tombol “Deploy”.

Editor Anda akan meminta izin untuk membuka tautan di browser. Klik “Open”.

Click Deploy and Open.png

Langkah 6: Biarkan AI Agent Zeabur Menangani Sisanya

Setelah Anda dialihkan ke Zeabur, AI agent platform akan mengambil alih. Agent ini menganalisis kode Anda untuk memahami struktur proyek, dependensi, dan kebutuhan build.

Agent Zeabur akan:

  • Mengenali bahwa Anda memiliki aplikasi full-stack (misalnya frontend React dan backend Express).
  • Mengonfigurasi build command dan start command secara otomatis.
  • Menyediakan semua layanan yang diperlukan.

Zeabur Agent Handles the Rest.png

Anda akan diminta memilih proyek dan region deployment. Setelah itu, Zeabur akan menangani semuanya.

Anda dapat melihat secara real-time saat layanan Anda di-build hingga beroperasi sepenuhnya. Zeabur bahkan langsung memberikan domain yang aktif begitu deployment berhasil.

Langkah 7: Domain & Jaringan

  1. Klik layanan Anda di Zeabur.
  2. Buka tab Jaringan.
  3. Klik Generate Domain (untuk mendapatkan domain .zeabur.app) atau Domain Kustom (untuk menghubungkan domain Anda sendiri).
  4. Kunjungi URL tersebut. Aplikasi Google AI Studio Anda kini telah menjadi aplikasi siap production yang ter-deploy sepenuhnya.

Selesai! Anda telah berhasil memindahkan proyek Anda dari prototipe di Google AI Studio menjadi aplikasi yang online dan siap production di Zeabur tanpa menulis satu baris kode konfigurasi pun. Alur kerja yang mulus ini memungkinkan Anda fokus pada hal yang paling penting: membangun perangkat lunak yang hebat.

Impor dari EmergentFAQ & Dukungan