Panduan Lengkap Menyebarkan Aplikasi Google AI Studio: Tutorial Praktis Ekspor Kode + Integrasi API Murah

Catatan Penulis: Penjelasan lengkap mengenai alur deployment aplikasi menggunakan mode Build di Google AI Studio. Pelajari cara mengekspor kode ke IDE lokal, menghubungkannya ke API perantara (proxy) murah seperti APIYI, dan memangkas biaya pengembangan secara signifikan.

Deployment aplikasi Google AI Studio adalah topik yang menarik bagi banyak pengembang. Mode Build di AI Studio memungkinkan pembuatan aplikasi React/Angular dengan cepat menggunakan bahasa alami, namun harga API resminya cukup tinggi. Jadi, cara menekan biaya menjadi kunci utama.

Nilai Utama: Setelah membaca artikel ini, kamu akan menguasai alur deployment lengkap aplikasi AI Studio, belajar mengekspor kode ke IDE lokal, serta menghubungkannya ke API perantara yang murah. Biaya pengembangan pun bisa terpangkas hingga 50%-80%.

Poin Inti Deployment Aplikasi AI Studio

Mengapa harus ekspor kode dan pakai API perantara?

Meskipun pengembangan online di Google AI Studio itu praktis, ada satu masalah krusial: aplikasi tersebut menggunakan harga API resmi yang normal.

Harga Resmi Gemini API (Januari 2026):

Untuk aplikasi yang membutuhkan banyak panggilan API, biayanya akan membengkak dengan cepat. Dengan menggunakan API perantara (seperti APIYI apiyi.com, wentuo.ai, dll.), kamu bisa mendapatkan harga yang jauh lebih murah.

Masalahnya adalah: Editor online AI Studio tidak memungkinkan kita mengubah alamat request API secara langsung. Solusinya adalah mengekspor kode ke IDE lokal (seperti Cursor atau VS Code), mengubah konfigurasinya, baru kemudian melakukan deployment.

Langkah Pertama Deployment Aplikasi AI Studio: Membuat Aplikasi dengan Mode Build

Masuk ke Mode Build

1. Akses aistudio.google.com
2. Klik "Build" di navigasi sebelah kiri
3. Pilih "Create new app"
4. Gunakan bahasa natural untuk mendeskripsikan aplikasi yang ingin kamu buat

Contoh petunjuk:

Buat aplikasi terjemahan AI, setelah pengguna memasukkan teks,
panggil Gemini API untuk menerjemahkannya ke bahasa yang ditentukan.
Dukung terjemahan antara empat bahasa: Mandarin, Inggris, Jepang, dan Korea.
Tampilan antarmuka ringkas dan modern, gunakan tema gelap.

Fitur Mode Build

Mode Build akan secara otomatis menghasilkan struktur proyek yang lengkap, termasuk:

• geminiService.ts: Logika pemanggilan API
• File komponen: Kode antarmuka UI
• File konfigurasi: Dependensi dan pengaturan proyek

Petunjuk: Kode yang dihasilkan mode Build menggunakan GenAI TypeScript SDK untuk memanggil Gemini API. Setelah diekspor, kamu bisa dengan mudah mengubahnya ke endpoint API lainnya.

Langkah Kedua Deployment Aplikasi AI Studio: Ekspor Kode ke Lokal

Editor online AI Studio tidak bisa mengubah alamat permintaan API, inilah alasan utama mengapa kita perlu mengekspor kode.

Cara Ekspor 1: Unduh ZIP

1. Di antarmuka mode Build, klik tombol "Download" di pojok kanan atas
2. Pilih "Download as ZIP"
3. Ekstrak ke folder lokal
4. Buka proyek menggunakan IDE seperti Cursor, VS Code, dll.

Cara Ekspor 2: Push ke GitHub

1. Klik ikon GitHub di pojok kanan atas
2. Perlu otorisasi OAuth untuk penggunaan pertama kali
3. Pilih "Create new repository" atau push ke repositori yang sudah ada
4. Clone repositori ke lokal untuk pengembangan lebih lanjut

Cara Ekspor 3: Dapatkan Potongan Kode

Untuk aplikasi sederhana, kamu bisa langsung mengambil kode pemanggilan API:

1. Klik tombol "Get code"
2. Pilih bahasa: Python / JavaScript / REST API
3. Salin kode ke dalam proyekmu

Menjalankan Proyek yang Diekspor secara Lokal

# Ekstrak ZIP lalu masuk ke direktori proyek
cd your-ai-studio-app

# Instal dependensi
npm install

# Jalankan server pengembangan
npm run dev

Proyek akan berjalan di lokal, dan untuk saat ini masih menggunakan API Key asli serta endpoint resmi.

Langkah Ketiga Deployment Aplikasi AI Studio: Menghubungkan ke Stasiun Perantara API Murah

Ini adalah langkah kunci untuk menekan biaya. Mari kita ambil contoh dengan menghubungkan ke APIYI (apiyi.com).

Temukan File Pemanggilan API

Di dalam proyek yang sudah diekspor, cari geminiService.ts atau file pemanggilan API serupa. Struktur kode tipikalnya adalah sebagai berikut:

// 原始代码 - 使用官方 API
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });

Ubah ke API Stasiun Perantara

Stasiun perantara seperti APIYI biasanya kompatibel dengan format OpenAI. Cara mengubahnya adalah sebagai berikut:

// 修改后 - 使用 APIYI中转站
import OpenAI from "openai";

const client = new OpenAI({
    apiKey: "your-apiyi-key",  // 替换为 APIYI的 Key
    baseURL: "https://vip.apiyi.com/v1"  // APIYI端点
});

async function generateContent(prompt: string) {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",  // 模型名称保持不变
        messages: [{ role: "user", content: prompt }]
    });
    return response.choices[0].message.content;
}

// geminiService.ts - 完整修改版本
import OpenAI from "openai";

// 配置 APIYI中转站
const client = new OpenAI({
    apiKey: process.env.APIYI_KEY || "your-apiyi-key",
    baseURL: "https://vip.apiyi.com/v1"
});

// 翻译函数示例
export async function translateText(
    text: string,
    targetLang: string
): Promise<string> {
    const systemPrompt = `你是一个专业翻译，将文本翻译成${targetLang}，只返回翻译结果。`;

    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",
        messages: [
            { role: "system", content: systemPrompt },
            { role: "user", content: text }
        ],
        max_tokens: 2000
    });

    return response.choices[0].message.content || "";
}

// 通用对话函数
export async function chat(
    messages: { role: string; content: string }[]
): Promise<string> {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",
        messages: messages as any,
        max_tokens: 4000
    });

    return response.choices[0].message.content || "";
}

Konfigurasi Variabel Lingkungan

Buat file .env untuk menyimpan API Key Anda:

# .env 文件
APIYI_KEY=your-apiyi-api-key

Tips Keamanan: Jangan pernah melakukan hard-code API Key langsung di dalam kode atau mengirimkannya ke repositori publik. Gunakan variabel lingkungan (environment variables) untuk mengelola informasi sensitif.

Perbandingan Stasiun Perantara API Deployment Aplikasi AI Studio

Perbandingan Solusi API: Resmi vs Stasiun Perantara

API Resmi Google

Gemini 2.5 Pro $1.25 / $10.00 per juta Token

Gemini 3 Pro Preview $2.00 / $12.00 per juta Token

✗ Perlu akses VPN/Proxy ✗ Hanya mendukung format Google SDK ✗ Terbatas pada seri model Gemini ✗ Kuota gratis terbatas ✗ Biaya tinggi, tidak cocok untuk skala besar

VS

Stasiun Perantara APIYI

Pemanggilan model yang sama Mengurangi biaya 50%-80%

Format kompatibel OpenAI Satu kode untuk berbagai model

✓ Akses langsung, tanpa perlu VPN ✓ Format kompatibel SDK OpenAI ✓ Mendukung Gemini/GPT/Claude, dll ✓ Tersedia kuota uji coba gratis ✓ Cocok untuk lingkungan produksi skala besar

Solusi yang Direkomendasikan: Hubungkan ke stasiun perantara APIYI setelah ekspor kode

Rekomendasi APIYI: Stasiun perantara API Model Bahasa Besar yang stabil dan andal, harga murah, uji coba gratis

Mengapa memilih stasiun perantara API?

1. Keunggulan Biaya: Untuk volume pemanggilan yang sama, biaya dapat ditekan hingga 50%-80%.
2. Antarmuka Seragam: Kompatibel dengan format OpenAI, sehingga Anda bisa berganti model tanpa harus merombak kode.
3. Stabilitas Akses: Koneksi langsung, tidak memerlukan VPN atau alat khusus lainnya.
4. Dukungan Multi-model: Cukup dengan satu Key, Anda bisa memanggil berbagai model seperti Gemini, GPT, Claude, dan lainnya.

Rekomendasi: Daftar melalui APIYI (apiyi.com) untuk mendapatkan API Key. Platform ini menyediakan kuota uji coba gratis dan mendukung seluruh seri model Gemini.

AI Studio Deployment Aplikasi Langkah Keempat: Deployment Online

Setelah modifikasi kode selesai, ada beberapa metode deployment yang bisa kamu pilih.

Cara 1: Deploy ke Vercel (Direkomendasikan)

# Instal Vercel CLI
npm install -g vercel

# Login dan deploy
vercel login
vercel

Atur variabel lingkungan (environment variable) APIYI_KEY di dashboard Vercel.

Cara 2: Deploy ke Cloud Run

AI Studio mendukung deployment satu-klik ke Google Cloud Run:

1. Klik tombol "Deploy" di pojok kanan atas.
2. Pilih proyek Google Cloud Anda.
3. Konfigurasi variabel lingkungan.
4. Konfirmasi deployment.

Catatan: Deployment Cloud Run tetap menggunakan API Key dari AI Studio. Jika kamu ingin menggunakan API layanan proxy, disarankan untuk mengekspor kode, memodifikasinya, lalu melakukan deployment secara manual.

Cara 3: Deploy ke Server Sendiri

# Build versi produksi
npm run build

# Jalankan menggunakan alat seperti PM2
pm2 start npm --name "ai-app" -- start

FAQ Deployment Aplikasi AI Studio

Ringkasan Alur Lengkap Deployment Aplikasi AI Studio

Kesimpulan

Poin-poin inti deployment aplikasi Google AI Studio:

1. Mode Build: Membuat aplikasi React/Angular dengan cepat menggunakan bahasa alami.
2. Ekspor Kode: Unduh ZIP atau push ke GitHub untuk pengembangan lokal.
3. Penggantian API: Ubah baseURL dan Key untuk terhubung ke gateway API.
4. Optimasi Biaya: Mengurangi biaya sebesar 50%-80% melalui gateway seperti APIYI.

AI Studio adalah platform pengembangan online yang tangguh. Dengan menggabungkan ekspor kode dan gateway API, Anda bisa mencapai kombinasi sempurna antara pembuatan prototipe cepat dan deployment berbiaya rendah.

Direkomendasikan untuk mengakses Gemini API melalui APIYI (apiyi.com). Platform ini menyediakan kuota pengujian gratis, antarmuka yang kompatibel dengan OpenAI, dan pemanggilan terpadu untuk berbagai model.

📚 Referensi

1. Dokumentasi Mode Build Google AI Studio: Panduan resmi penggunaan Mode Build

   • Tautan: ai.google.dev/gemini-api/docs/aistudio-build-mode
   • Keterangan: Menjelaskan secara detail fitur Mode Build dan ekspor kode

2. Halaman Harga Gemini API: Informasi harga resmi API

   • Tautan: ai.google.dev/gemini-api/docs/pricing
   • Keterangan: Harga terbaru untuk setiap model dan kuota gratis

3. Tutorial Deployment AI Studio ke Cloud Run: Codelab resmi Google

   • Tautan: codelabs.developers.google.com/deploy-from-aistudio-to-run
   • Keterangan: Alur lengkap deployment sekali klik ke Google Cloud

4. Panduan Menjalankan Proyek AI Studio secara Lokal: Tutorial komunitas

   • Tautan: medium.com/lets-code-future/how-to-run-your-google-ai-studio-project-locally
   • Keterangan: Langkah-langkah detail pengembangan lokal setelah mengekspor kode

Penulis: Tim Teknis
Diskusi Teknis: Selamat berdiskusi di kolom komentar. Untuk informasi lebih lanjut, kunjungi komunitas teknis APIYI apiyi.com