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 wibracyjnym”), który umożliwia projektowanie, testowanie i tworzenie pełnych aplikacji internetowych przy użyciu generowania kodu opartego na modelach Gemini.

W tym module utworzysz aplikację do współpracy z listą zadań do wykonania, która będzie korzystać z bazy danych Firestore do trwałego przechowywania danych i 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 pełnych usług 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 tym module osobistego konta Google. Konta grupowe, firmowe lub szkolne mogą wymuszać stosowanie zasad 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, zasoby procesora i interfejsy 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łączane 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 w interaktywnym podglądzie.

  1. Otwórz okienko podglądu w Google AI Studio.
  2. Kliknij przycisk Zaloguj się, aby uruchomić uwierzytelnianie w piaskownicy za pomocą logowania przez Google.
    • Uwaga na temat 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 w czacie przycisk Napraw , który pozwoli Ci poprosić agenta o automatyczne zdiagnozowanie i naprawienie problemu.
    Lokalizacja przycisku Popraw w Google AI Studio
  3. Po zalogowaniu dodaj kilka zadań (np. „Przejrzyj dokumentację Cloud Run”, „Ukończ moduł”).
  4. Oznacz niektóre zadania jako ukończone i usuń jedno z nich, aby upewnić się, że po stronie klienta obsługiwane są prawidłowo 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, 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 menu Projekt Google Cloud odpowiada projektowi powiązanemu 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 (z etykietą AI Studio lub ręcznie powiązanym identyfikatorem 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ę Bezpieczeństwo w panelu Firestore.
  5. Otwórz Bezpieczeństwo > 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 pełną aplikację internetową do współpracy bezpośrednio z Google AI Studio.

Aby zdobyć plakietkę za ukończenie modułu dla twórców i znaleźć kolejny moduł, przejdź na stronę goo.gle/builders.

Więcej informacji