Uruchamianie aplikacji internetowej z listą zadań z wykorzystaniem AI

1. Wprowadzenie

Przegląd

Od czego zacząć tworzenie z wykorzystaniem AI? Większość z nas zaczyna od prostego zapytania lub prototypu. Google AI Studio oferuje zaawansowany tryb tworzenia (często nazywany „kodowaniem w odpowiednim nastroju”), który umożliwia projektowanie, testowanie i tworzenie pełnych aplikacji internetowych przy użyciu generowania kodu opartego na modelach Gemini.

W tym ćwiczeniu w Codelabs utworzysz aplikację do wspólnego tworzenia listy zadań do wykonania z bazą danych Firestore do pamięci trwałej i usługą Uwierzytelnianie 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, możesz ją wdrożyć w Cloud Run jednym kliknięciem.

Jakie zadania wykonasz

  • Poproś Google AI Studio o utworzenie prototypu aplikacji internetowej z listą zadań do wykonania, nad którą może pracować wiele osób.
  • Skonfiguruj i włącz integrację z Firebase, aby udostępnić bazę danych Firestore i skonfigurować uwierzytelnianie za pomocą logowania przez Google.
  • Przetestuj aplikację w piaskownicy interaktywnego podglądu.
  • wdrażać 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 prototypować pełną usługę za pomocą języka naturalnego.
  • Jak Google AI Studio automatycznie konfiguruje integracje Firebase Firestore i Authentication.
  • Jak wdrożyć aplikację AI Studio jako bezserwerowy kontener w Cloud Run.
  • Jak sprawdzać rekordy bazy danych i stan zabezpieczeń w konsoli Firebase.

2. Konfiguracja projektu

Przed uruchomieniem 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 tym module osobistego konta Google. Konta grupowe, firmowe lub szkolne mogą wymuszać stosowanie zasad Google 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 publikowanie maksymalnie 2 aplikacji pełnostosowych w wybranym regionie bezpłatnie, bez zakładania pełnego konta rozliczeniowego Google Cloud.
    • Wdrożenie standardowe: łączy się z istniejącym płatnym projektem Google Cloud i zwiększa limity miejsca na dane, zasoby procesora i interfejsy API.

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

Utwórzmy powłokę aplikacji i poprośmy asystenta do kodowania opartego na 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 promptu czatu wpisz opis aplikacji z listą zadań: 
    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 Build (Skompiluj).

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 przestrzeni roboczej pojawi się karta integracji z prośbą o włączenie Firebase.
  2. Kliknij przycisk Włącz Firebase, aby potwierdzić i zaakceptować warunki korzystania z usługi.
  3. Agent przeprowadzi konfigurację w tle. Pod maską:
    • Udostępniana jest instancja bazy danych Firestore.
    • Uwierzytelnianie Firebase jest włączone, a logowanie się przez Google jest aktywne.
    • Konfiguracja konta usługi jest ustalana (np. tworzenie src/lib/firebase.ts zawierającego dane logowania do interfejsu API).
    • Dodawana jest firestore.rules zawierająca domyślne granice zabezpieczeń (reguły izolacji użytkowników).

4. Testowanie i wdrożenie

Zanim uruchomisz usługę na żywo, przeprowadź weryfikację w interaktywnym podglądzie.

  1. Otwórz okienko podglądu w Google AI Studio.
  2. Kliknij przycisk Logowanie, aby uruchomić uwierzytelnianie w piaskownicy za pomocą logowania przez Google.
    • Uwaga na temat naprawiania błędów: podczas generowania lub testowania mogą czasami wystąpić problemy z czasem działania, błędy kompilacji lub błędy uprawnień Firestore z powodu niezgodności reguł bezpieczeństwa. W takim przypadku w czacie AI Studio pojawi się przycisk Napraw, który umożliwia poproszenie agenta o automatyczne zdiagnozowanie i rozwiązanie problemu.
    Lokalizacja przycisku Popraw w Google AI Studio
  3. Po zalogowaniu dodaj kilka zadań (np. „Sprawdź dokumentację Cloud Run”, „Ukończ Codelab”).
  4. Oznacz niektóre zadania jako ukończone i usuń jedno z nich, aby mieć pewność, że po stronie klienta obsługiwane są prawidłowe aktualizacje stanu bazy danych.
  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, a potem sprawdź zmiany 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 wdrażania.Lokalizacja przycisku publikowania w Google AI Studio
  2. Aby skonfigurować projekt Google Cloud, kliknij Rozpocznij.
    • Sprawdź, czy menu Projekt Google Cloud zawiera projekt powiązany z Twoim obszarem roboczym.
    • AI Studio automatycznie wygeneruje unikalny identyfikator usługi dla instancji Cloud Run.
  3. Jeśli wdrażasz usługę po raz pierwszy i używasz standardowych parametrów Google Cloud, może pojawić się prośba o określenie typu organizacji i podanie szczegółów 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 działającą aplikację internetową w przeglądarce.

6. Sprawdzanie w konsoli Firebase

Sprawdź, jak działają schematy danych i jak śledzeni są użytkownicy.

  1. Otwórz konsolę Firebase.
  2. Wybierz projekt (z etykietą AI Studio lub ręcznie powiązanym identyfikatorem projektu).
  3. W panelu nawigacji po lewej stronie wybierz Kompilacja > 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 uwierzytelniającymi użytkownika.
  4. Na karcie Bezpieczeństwo w panelu Firestore możesz sprawdzić automatycznie wygenerowane dyrektywy bezpieczeństwa, które ograniczają uprawnienia do odczytu i zapisu do zweryfikowanych właścicieli dokumentów.
  5. Otwórz Bezpieczeństwo > Uwierzytelnianie, aby zobaczyć listę aktywnych danych logowania użytkowników, która została wypełniona 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. Kliknij ikonę kosza, aby usunąć stan aplikacji i cofnąć publikację usługi w Cloud Run.
  4. Jeśli wdrożono usługę za pomocą standardowego projektu i chcesz całkowicie zamknąć wszystkie zasoby, otwórz ustawienia projektu w konsoli Google Cloud i usuń projekt bazowy.

8. Podsumowanie

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

Więcej informacji