Membuat tombol untuk mengimpor kode ke Firebase Studio

Tambahkan tombol "Open in Firebase Studio" ke situs Anda untuk memberikan cara yang lancar bagi pengguna untuk mengimpor kode dari situs Anda langsung ke ruang kerja Firebase Studio, sehingga mereka dapat terus bekerja di lingkungan pengembangan berbasis cloud yang cerdas.

Fitur ini dirancang untuk:

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

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

Menggunakan SDK Buka di Firebase Studio

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 cara kode diimpor.

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, lihat Membuat pintasan ke ruang kerja yang telah ditentukan sebelumnya di Firebase Studio.

  • Dari sekumpulan file project: Buat ruang kerja secara dinamis dari sekumpulan file dan cuplikan kode langsung dari aplikasi web Anda. Ini adalah opsi yang paling efektif untuk platform uji coba kode dan pembuat prototipe aplikasi, karena mengekspor pekerjaan pengguna saat ini, meskipun tidak disimpan di tempat lain.

Menambahkan tombol "Open in Firebase Studio" ke situs Anda

SDK Buka di Firebase Studio: menyediakan semua yang Anda butuhkan, termasuk fungsi helper 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 kode berikut ke kode Anda untuk mengimpor library:

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

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

Memahami lingkungan ruang kerja

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

Lingkungan yang dioptimalkan

Untuk project React, Angular, dan HTML sederhana, Firebase Studio menyediakan lingkungan yang telah dikonfigurasi sebelumnya 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 tempat pengguna dapat melihat pratinjau live aplikasi Anda dan berinteraksi langsung dengan kode.

Lingkungan generik

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

  • Instal runtime bahasa dan dependensi.
  • Konfigurasi file dev.nix.

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

Pengalaman pengguna

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

Dialog Buka di Firebase Studio Impor Ruang Kerja

Saat pengguna mengklik Impor, ruang kerja Firebase Studio baru akan terbuka. Folder 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'
});

Contoh tombol Ekspor ke Firebase Studio

Langkah berikutnya