Tworzenie przycisku importowania kodu do Firebase Studio

Dodaj do swojej witryny przycisk „Otwórz w Firebase Studio”, aby zapewnić użytkownikom możliwość bezproblemowego importowania kodu z Twojej witryny bezpośrednio do obszaru roboczego Firebase Studio, co pozwoli im kontynuować pracę w środowisku programistycznym w chmurze opartym na agentach.

Ta funkcja jest przeznaczona dla:

• środowiska do testowania kodu, w których użytkownicy mogą przejść od podstawowego edytora do pełnego środowiska programistycznego;

• Narzędzia do prototypowania aplikacji, w których witryna generuje kod i wizualny prototyp, a użytkownik może go później modyfikować w Firebase Studio.

Używanie pakietu SDK Otwórz w Firebase Studio

Przycisk „Otwórz w Firebase Studio” jest obsługiwany przez pakiet SDK Open in Firebase Studio, bibliotekę JavaScript, która generuje odpowiednie linki do tworzenia i wypełniania nowego obszaru roboczego. Udostępnia kilka opcji importowania kodu.

Metody importowania

Przycisk można skonfigurować tak, aby importował kod, korzystając z tych metod:

• Z repozytorium Git lub szablonu: link do repozytorium Git lub szablonuFirebase Studio. To świetne rozwiązanie w przypadku gotowych projektów lub predefiniowanych szablonów. Więcej informacji o tych przypadkach użycia znajdziesz w artykule Tworzenie skrótu do wstępnie zdefiniowanego obszaru roboczego w Firebase Studio.

• Z zestawu plików projektu: dynamicznie twórz obszar roboczy z zestawu plików i fragmentów kodu bezpośrednio w aplikacji internetowej. Jest to najskuteczniejsza opcja w przypadku środowisk do testowania kodu i prototypowania aplikacji, ponieważ eksportuje bieżącą pracę użytkownika, nawet jeśli nie jest ona zapisana w innym miejscu.

Dodawanie do witryny przycisku „Otwórz w Firebase Studio”

Pakiet SDK Open in Firebase Studio: zawiera wszystko, czego potrzebujesz, w tym funkcje pomocnicze do generowania obrazów przycisków, tworzenia precyzyjnych linków i wysyłania zawartości plików w celu tworzenia Firebase Studioobszarów roboczych.

Aby dodać przycisk „Otwórz w Firebase Studio” na swojej stronie:

1. Zainstaluj pakiet w katalogu projektu:

   npm install @firebase-studio/open-sdk
   

2. Aby zaimportować bibliotekę, dodaj do kodu ten wiersz:

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

Szczegółowe instrukcje, przykłady kodu i pełną dokumentację interfejsu API znajdziesz w oficjalnej dokumentacji pakietu SDK.

Omówienie środowisk obszaru roboczego

Gdy użytkownik utworzy przestrzeń roboczą w Twojej witrynie, Firebase Studio skonfiguruje dla niego środowisko programistyczne. Poziom automatyzacji zależy od typu projektu.

Zoptymalizowane środowisko

W przypadku projektów React, Angular i prostych projektów HTML usługa Firebase Studio udostępnia zoptymalizowane, wstępnie skonfigurowane środowisko, pod warunkiem że wywołujący prawidłowo ustawi właściwość baselineEnvironment w obiekcie settings. Oznacza to, że gdy użytkownik otworzy link w Firebase Studio, Firebase Studio utworzy przestrzeń roboczą i automatycznie:

• Instaluje wszystkie niezbędne zależności.
• Konfiguruje i uruchamia odpowiedni serwer programistyczny.
• Konfiguruje środowisko z odpowiednimi narzędziami i rozszerzeniami.

Otworzy się środowisko, w którym użytkownicy mogą wyświetlić podgląd na żywo Twojej aplikacji i bezpośrednio wchodzić w interakcje z kodem.

Środowisko ogólne

W przypadku wszystkich innych typów projektów Firebase Studio używa ogólnego importera. Przesyła pliki do obszaru roboczego, ale użytkownik musi ręcznie przeprowadzić wstępną konfigurację. Może być konieczne:

• Zainstaluj środowiska wykonawcze języka i zależności.
• Skonfiguruj plik dev.nix.

W przypadku tych projektów Firebase Studio tworzy nieprzystosowane środowisko, dając użytkownikowi pełną kontrolę nad procesem konfiguracji.

Interfejs użytkownika

W przypadku obu typów obszarów roboczych po kliknięciu przycisku „Otwórz w Firebase Studio” użytkownik zostanie poproszony o nadanie nazwy obszarowi roboczemu i sprawdzenie listy plików do zaimportowania.

Gdy użytkownik kliknie Importuj, otworzy się nowy obszar roboczy Firebase Studio. Zawiera pliki projektu, podgląd aplikacji i plik README z dalszymi instrukcjami.

Zaprojektuj przycisk „Otwórz w Firebase Studio”

Możesz zaprojektować przycisk za pomocą pakietu SDK Firebase Studio Otwórz w lub użyć tego narzędzia, aby wygenerować kod HTML przycisku Firebase Studio:

Jeśli korzystasz z pakietu SDK, możesz uwzględnić opcjonalne właściwości konfiguracji przycisku:

• label: określa etykietę tekstową wyświetlaną na przycisku.
  • Dozwolone wartości: open, try, export oraz continue.
• color: określa schemat kolorów przycisku.
  • Dozwolone wartości: dark, light, blue oraz bright.
• size: określa wysokość przycisku w pikselach.
  • Dozwolone wartości: 20 lub 32.
• imageFormat: określa format pliku wygenerowanego obrazu.
  • Dozwolone wartości: svg lub png.

Przykład:

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

Dalsze kroki

• Zainstaluj pakiet SDK Open in Firebase Studio
• Dowiedz się, jak dostosować Firebase Studio przestrzeń roboczą