Membuat tombol untuk mengimpor kode ke Firebase Studio

Tambahkan tombol "Open in Firebase Studio" ke situs Anda untuk memudahkan pengguna mengimpor kode dari situs Anda langsung ke ruang kerja Firebase Studio, sehingga mereka dapat terus bekerja di lingkungan pengembangan agentic berbasis cloud.

Fitur ini dirancang untuk:

• Playground kode, tempat pengguna dapat beralih dari editor dasar ke lingkungan pengembangan yang lengkap.

• Alat pembuatan prototipe aplikasi, tempat situs Anda membuat kode dan prototipe visual, dan pengguna kemudian melakukan iterasi di Firebase Studio.

Menggunakan Open in Firebase Studio SDK

Tombol "Open in Firebase Studio" didukung oleh Open in Firebase Studio SDK, library JavaScript yang menghasilkan link yang sesuai untuk membuat dan mengisi ruang kerja baru. Bagian ini menyediakan beberapa opsi untuk mengimpor kode.

Metode impor

Anda dapat mengonfigurasi tombol untuk mengimpor kode menggunakan metode berikut:

• Dari repositori atau template Git: Tautkan ke repositori Git atau template Firebase Studio. Cara ini cocok untuk project yang sudah selesai atau template yang telah ditentukan. Untuk mengetahui informasi selengkapnya tentang kasus penggunaan ini, baca Membuat pintasan ke ruang kerja yang telah ditentukan di Firebase Studio.

• Dari sekumpulan file project: Buat ruang kerja secara dinamis dari sekumpulan file dan cuplikan kode langsung dari aplikasi web Anda. Opsi ini paling efektif untuk playground kode dan pembuat prototipe aplikasi karena dapat mengekspor pekerjaan pengguna saat ini, meskipun tidak disimpan di tempat lain.

Menambahkan tombol "Open in Firebase Studio" ke situs Anda

Open in Firebase Studio SDK: menyediakan semua yang Anda butuhkan, termasuk fungsi bantuan untuk membuat gambar tombol, membuat deep link, dan mengirim konten file untuk membuat ruang kerja Firebase Studio.

Untuk menambahkan tombol "Open in Firebase Studio" ke situs Anda:

1. Instal paket di direktori project Anda:

   npm install @firebase-studio/open-sdk
   

2. Tambahkan hal berikut ke kode Anda untuk mengimpor library:

   import * as FirebaseStudio from '@firebase-studio/open-sdk';
   

Untuk petunjuk mendetail, contoh kode, dan referensi API lengkap, baca dokumentasi SDK resmi.

Memahami lingkungan ruang kerja

Saat pengguna membuat ruang kerja dari situs Anda, Firebase Studio akan menyiapkan lingkungan pengembangan untuk pengguna. Tingkat otomatisasi bergantung pada jenis project-nya.

Lingkungan yang dioptimalkan

Untuk project React, Angular, dan HTML sederhana, Firebase Studio menyediakan lingkungan yang telah dikonfigurasi dan dioptimalkan, asalkan pemanggil menetapkan properti baselineEnvironment dengan benar dalam objek settings. Artinya, saat pengguna membuka link di Firebase Studio, Firebase Studio akan membuat ruang kerja dan otomatis:

• Menginstal semua dependensi yang diperlukan.
• Mengonfigurasi dan memulai server pengembangan yang benar.
• Menyiapkan lingkungan dengan alat dan ekstensi yang tepat.

Tindakan ini akan membuka lingkungan yang dapat digunakan pengguna untuk melihat pratinjau live aplikasi Anda dan berinteraksi langsung dengan kode.

Lingkungan generik

Untuk semua jenis project lainnya, Firebase Studio menggunakan pengimpor generik. Fitur ini mengupload file ke ruang kerja, tetapi pengguna harus melakukan penyiapan awal secara manual. Pengguna mungkin perlu:

• Menginstal dependensi dan runtime bahasa.
• Mengonfigurasi file dev.nix.

Untuk project ini, Firebase Studio membuat lingkungan yang tidak disesuaikan, sehingga pengguna memiliki kontrol penuh atas proses penyiapannya.

Pengalaman pengguna

Untuk kedua jenis ruang kerja, setelah pengguna mengklik tombol "Open in Firebase Studio", mereka akan diminta untuk memberi nama ruang kerja dan meninjau daftar file yang akan diimpor.

Saat pengguna mengklik Import, ruang kerja Firebase Studio baru akan terbuka. Ruang kerja ini berisi file project, pratinjau aplikasi, dan file README dengan langkah berikutnya.

Mendesain tombol "Open in Firebase Studio"

Anda dapat mendesain tombol menggunakan Open in Firebase Studio SDK atau menggunakan alat berikut untuk menghasilkan HTML untuk tombol Firebase Studio:

Jika menggunakan SDK, Anda dapat menyertakan properti konfigurasi opsional untuk tombol:

• label: Menetapkan label teks yang ditampilkan pada tombol.
  • Nilai yang diizinkan: open, try, export, atau continue.
• color: Menentukan skema warna tombol.
  • Nilai yang diizinkan: dark, light, blue, atau bright.
• size: Menentukan tinggi tombol dalam piksel.
  • Nilai yang diizinkan: 20 atau 32.
• imageFormat: Menentukan format file gambar yang dihasilkan.
  • Nilai yang diizinkan: svg atau png.

Contoh:

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

Langkah berikutnya

• Menginstal Open in Firebase Studio SDK
• Memahami cara menyesuaikan ruang kerja Firebase Studio