Uruchamianie aplikacji internetowej z listą zadań z wykorzystaniem AI

1. Wprowadzenie

Przegląd

Gdzie dziś zaczyna się tworzenie z wykorzystaniem AI? Większość z nas zaczyna od prostego zapytania lub prototypu. Google AI Studio oferuje zaawansowany tryb tworzenia (często nazywany „vibe coding”), który umożliwia projektowanie, testowanie i tworzenie aplikacji internetowych full stack za pomocą generowania kodu opartego na modelach Gemini.

W tych ćwiczeniach z programowania utworzysz aplikację do współpracy z listą zadań do wykonania, która będzie korzystać z bazy danych Firestore do pamięci trwałej oraz z Uwierzytelniania Firebase do logowania użytkowników. Agent AI Studio skonfiguruje wszystkie usługi backendu i napisze kod interakcji z frontendem i bazą danych. Gdy aplikacja będzie gotowa, wdrożysz ją bezpośrednio w Cloud Run jednym kliknięciem.

Jakie zadania wykonasz

  • Poproś Google AI Studio o utworzenie prototypu aplikacji internetowej do współpracy z listą zadań do wykonania.
  • Skonfiguruj i włącz integrację z Firebase, aby udostępnić bazę danych Firestore i skonfigurować uwierzytelnianie za pomocą logowania przez Google.
  • Przetestuj aplikację w interaktywnej piaskownicy podglądu.
  • Wdróż aplikację w Cloud Run bezpośrednio z interfejsu Google AI Studio.

Czego się nauczysz

  • Jak używać trybu tworzenia w Google AI Studio, aby szybko tworzyć prototypy usług full stack za pomocą języka naturalnego.
  • Jak Google AI Studio automatycznie konfiguruje integracje z Firebase Firestore i uwierzytelnianiem.
  • Jak wdrożyć aplikację AI Studio jako kontener bezserwerowy w Cloud Run.
  • Jak sprawdzać rekordy bazy danych i stan bezpieczeństwa w konsoli Firebase.

2. Konfiguracja projektu

Zanim uruchomisz AI Studio, sprawdź stan konta i wymagania wstępne.

Informacje o koncie Google i poziomie

  1. Jeśli nie masz jeszcze konta Google, utwórz je.
    • Wskazówka: jeśli to możliwe, użyj w tych ćwiczeniach osobistego konta Google. Konta grupowe, firmowe lub szkolne mogą mieć włączone zasady Workspace, które wyłączają funkcje eksperymentalne lub integracje z chmurą.
  2. Sprawdź szczegóły płatności za wdrożenia:
    • Poziom startowy Google Cloud: umożliwia bezpłatne publikowanie maksymalnie 2 aplikacji full stack w wybranym regionie bez konieczności tworzenia pełnego konta rozliczeniowego Google Cloud.
    • Wdrożenie standardowe: łączy się z istniejącym płatnym projektem w chmurze Google Cloud i zwiększa limity miejsca na dane, zasobów procesora i interfejsów API.

3. Tworzenie aplikacji z listą zadań do wykonania w trybie tworzenia AI Studio

Utwórzmy powłokę aplikacji i poprośmy asystenta kodu AI o utworzenie warstw zabezpieczeń i trwałości.

  1. Otwórz panel Aplikacje w Google AI Studio i kliknij Nowa aplikacja.
  2. W polu prompta czatu wpisz opis aplikacji z listą zadań do wykonania: 
    Build a collaborative to-do list application using Firebase as a
backend. Users must be able to securely sign in using Google Sign-In,
view their personal tasks, add new task items, toggle status as
completed, and delete tasks. The database must isolate tasks so users
can only view and modify their own records.
  3. Aby rozpocząć proces generowania aplikacji, kliknij Utwórz.

Gdy agent AI Studio rozpozna potrzebę przechowywania danych w bazie danych i bezpiecznego logowania użytkowników, uruchomi automatyczny proces konfiguracji Firebase.

  1. Po około minucie w obszarze roboczym pojawi się karta integracji Włącz Firebase.
  2. Aby potwierdzić i zaakceptować warunki korzystania z usługi, kliknij przycisk Włącz Firebase.
  3. Agent przeprowadzi konfigurację w tle. Dla zaawansowanych:
    • Udostępniana jest instancja bazy danych Firestore.
    • Włączone jest uwierzytelnianie Firebase z włączonym logowaniem przez Google.
    • Konfigurowane jest konto usługi (np. tworzony jest plik src/lib/firebase.ts zawierający dane logowania do interfejsu API).
    • Dodawany jest plik firestore.rules zawierający domyślne granice bezpieczeństwa (reguły izolacji użytkowników).

4. Testowanie i wdrożenie

Zanim uruchomisz usługę, przeprowadź testy weryfikacyjne w interaktywnym podglądzie.

  1. Otwórz okienko podglądu w Google AI Studio.
  2. Aby uruchomić uwierzytelnianie za pomocą logowania przez Google w piaskownicy, kliknij przycisk Zaloguj się.
    • Uwaga dotycząca rozwiązywania błędów: podczas generowania lub testowania mogą czasami wystąpić problemy z czasem działania, błędy kompilacji lub błędy uprawnień Firestore spowodowane niezgodnością reguł bezpieczeństwa. W takim przypadku AI Studio wyświetli na czacie przycisk Napraw , który umożliwi automatyczne zdiagnozowanie i naprawienie problemu przez agenta.
    Lokalizacja przycisku Popraw w Google AI Studio
  3. Po zalogowaniu dodaj kilka zadań (np. „Przejrzyj dokumentację Cloud Run”, „Wykonaj ćwiczenia z programowania”).
  4. Oznacz niektóre zadania jako ukończone i usuń jedno z nich, aby sprawdzić, czy moduły obsługi po stronie klienta i stan bazy danych są prawidłowo aktualizowane.
  5. Jeśli chcesz zmienić styl lub zachowanie, poinstruuj agenta w oknie czatu. Na przykład:
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Show a count of remaining incomplete tasks at the footer of the task list."
  6. Poczekaj, aż agent zaktualizuje bazę kodu, i sprawdź aktualizacje w przeglądarce podglądu.

5. Wdrożenie w Cloud Run

Gdy prototyp będzie w pełni funkcjonalny, wdróż go jako usługę publiczną w Cloud Run.

  1. W prawym górnym rogu Google AI Studio kliknij przycisk Opublikuj, aby uruchomić kreator wdrożenia.Lokalizacja przycisku publikowania w Google AI Studio
  2. Aby skonfigurować projekt Google Cloud, kliknij Rozpocznij.
    • Sprawdź, czy docelowe menu Projekt Google Cloud jest zgodne z projektem powiązanym z obszarem roboczym.
    • AI Studio automatycznie wygeneruje unikalny identyfikator usługi dla instancji Cloud Run.
  3. Jeśli wdrażasz aplikację po raz pierwszy i używasz standardowych parametrów Google Cloud, może pojawić się prośba o podanie typu organizacji i danych rozliczeniowych.
  4. Kliknij Opublikuj aplikację.
  5. Kroki tworzenia kontenera, rejestracji kontenera i wdrażania usługi są wykonywane w tle. Zwykle trwa to 2–4 minuty.
  6. Po zakończeniu wdrażania skopiuj wygenerowany adres URL aplikacji i otwórz link do aplikacji w karcie przeglądarki.
  7. Przetestuj aplikację internetową w przeglądarce.

6. Sprawdzanie w konsoli Firebase

Sprawdź, jak śledzone są schematy danych i użytkownicy.

  1. Otwórz konsolę Firebase.
  2. Wybierz projekt (który ma etykietę AI Studio lub ręcznie powiązany identyfikator projektu).
  3. W panelu nawigacji po lewej stronie kliknij Utwórz > Baza danych Firestore:
    • Wyświetl kolekcje i dokumenty bazy danych utworzone przez aplikację.
    • Sprawdź, czy każdy dokument ma identyfikator właściciela zgodny z aktywnymi danymi logowania użytkownika.
  4. Aby sprawdzić automatycznie wygenerowane dyrektywy bezpieczeństwa ograniczające uprawnienia do odczytu i zapisu do zweryfikowanych właścicieli dokumentów, kliknij kartę Zabezpieczenia w panelu Firestore.
  5. Otwórz Zabezpieczenia > Uwierzytelnianie , aby zobaczyć listę aktywnych danych logowania użytkowników wypełnioną podczas testów logowania.

7. Czyszczenie

Aby uniknąć nieprzewidzianych opłat lub zwolnić miejsce w zasobach obszaru roboczego:

  1. W Google AI Studio otwórz stronę Aplikacje.
  2. Znajdź aplikację w siatce lub na liście.
  3. Aby usunąć stan aplikacji i cofnąć publikację usługi w Cloud Run, kliknij ikonę kosza.
  4. Jeśli wdrożono aplikację za pomocą standardowego projektu i chcesz całkowicie wyłączyć wszystkie zasoby, otwórz Ustawienia projektu w konsoli Google Cloud i usuń projekt.

8. Podsumowanie

Gratulacje! Zaprojektowano, utworzono i wdrożono aplikację internetową full stack bezpośrednio z Google AI Studio.

Aby odebrać odznakę Ukończono ścieżkę dla twórców, kliknij ten link.

Aby kontynuować, otwórz goo.gle/builders i wybierz kolejne ćwiczenia z programowania.

Więcej informacji