Uruchamianie aplikacji internetowej z listą zadań z wykorzystaniem AI

1. Wprowadzenie

Przegląd

Gdzie dziś zaczyna się tworzenie z użyciem 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 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ą jednym kliknięciem bezpośrednio w Cloud Run.

gotowa wersja strony portfolio,

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ą 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 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.
    Ten link automatycznie wypełni pole prompta.
  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 zabezpieczeń (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. Kliknij przycisk Zaloguj się, aby uruchomić uwierzytelnianie w piaskownicy za pomocą logowania przez Google.
    • 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 w oknie czatu 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ć kreatora wdrożenia.Lokalizacja przycisku publikowania w Google AI Studio
  2. Aby skonfigurować projekt Google Cloud, kliknij Rozpocznij.
    • Sprawdź, czy docelowa lista Projekt Google Cloud jest zgodna z projektem powiązanym z obszarem roboczym.
    • AI Studio automatycznie wygeneruje unikalny identyfikator usługi dla instancji Cloud Run.
    • Opcjonalnie możesz określić niestandardowy prefiks adresu URL .ai.studio (np. your-portfolio-name.ai.studio) w ramach konfiguracji wdrożenia.
  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. Ten proces zwykle trwa 2–4 minuty.
  6. Po zakończeniu wdrożenia 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 zabezpieczeń ograniczające uprawnienia do odczytu i zapisu do zweryfikowanych właścicieli dokumentów, w panelu Firestore kliknij kartę Zabezpieczenia.
  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 bazowy.

8. Podsumowanie

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

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

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

Więcej informacji