Tworzenie przycisku importowania kodu do Firebase Studio

Dodaj do swojej witryny przycisk „Otwórz w Firebase Studio”, aby użytkownicy mogli bezproblemowo importować kod z Twojej witryny bezpośrednio do obszaru roboczego Firebase Studio i kontynuować pracę w środowisku programistycznym opartym na chmurze.

Ta funkcja jest przeznaczona dla:

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

• narzędzi do prototypowania aplikacji, w których Twoja witryna generuje kod i prototyp wizualny, a użytkownik może je iteracyjnie ulepszać w Firebase Studio.

Korzystanie z pakietu SDK Open in Firebase Studio

Przycisk „Otwórz w Firebase Studio” jest obsługiwany przez pakiet SDK Open in Firebase Studio, czyli bibliotekę JavaScript, która generuje odpowiednie linki do tworzenia i wypełniania nowego obszaru roboczego. Umożliwia ona importowanie kodu na kilka sposobów.

Metody importowania

Możesz skonfigurować przycisk tak, aby importował kod za pomocą tych metod:

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

• Z zestawu plików projektu: dynamiczne tworzenie obszaru roboczego na podstawie zestawu plików i fragmentów kodu bezpośrednio z aplikacji internetowej. Jest to najskuteczniejsza opcja w przypadku środowisk do testowania kodu i narzędzi do prototypowania aplikacji, ponieważ eksportuje bieżącą pracę użytkownika, nawet jeśli nie jest ona nigdzie zapisana.

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 treści plików w celu utworzenia Firebase Studio obszarów roboczych.

Aby dodać do swojej witryny przycisk „Otwórz w Firebase Studio”:

1. Zainstaluj pakiet w katalogu projektu:

   npm install @firebase-studio/open-sdk
   

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

   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.

Informacje o środowiskach obszaru roboczego

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

Zoptymalizowane środowisko

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

• zainstaluje wszystkie niezbędne zależności;
• skonfiguruje i uruchomi odpowiedni serwer programistyczny;
• skonfiguruje środowisko z odpowiednimi narzędziami i rozszerzeniami.

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

Ogólne środowisko

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

• Zainstalowanie środowisk wykonawczych i zależności języka.
• Skonfigurowanie pliku dev.nix.

W przypadku tych projektów Firebase Studio tworzy niezmodyfikowane środowisko, dzięki czemu użytkownik ma pełną kontrolę nad procesem konfiguracji.

Interfejs użytkownika

W przypadku obu typów obszarów roboczych, gdy użytkownik kliknie przycisk „Otwórz w Firebase Studio”, pojawi się prośba o podanie nazwy obszaru roboczego i sprawdzenie listy plików do zaimportowania.

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

Projektowanie przycisku „Otwórz w Firebase Studio”

Przycisk możesz zaprojektować za pomocą pakietu SDK Open in Firebase Studio lub użyć tego narzędzia do wygenerowania kodu HTML przycisku Firebase Studio:

Jeśli używasz pakietu SDK, możesz uwzględnić opcjonalne właściwości konfiguracyjne przycisku:

• label: ustawia etykietę tekstową wyświetlaną na przycisku.
  • Dozwolone wartości: open, try, export lub continue.
• color: określa schemat kolorów przycisku.
  • Dozwolone wartości: dark, light, blue lub 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ć obszar roboczyFirebase Studio