Tworzenie pierwszej aplikacji internetowej opartej na bazie danych za pomocą Google AI Studio i Cloud SQL

1. Zanim zaczniesz

Jeśli kiedykolwiek próbowałeś zorganizować weekendowy bieg ze znajomymi lub sąsiadami, wiesz, z czym to się wiąże: miejsca spotkań gubią się w niekończących się czatach grupowych, ludzie ciągle pytają, w jakim tempie biegną inni, a nowi uczestnicy nigdy nie mają pewności, kto się pojawi.

W tym ćwiczeniu rozwiążesz ten codzienny problem, tworząc Running Club – przyjazną aplikację internetową, w której lokalni biegacze mogą przeglądać ulubione trasy, planować weekendowe spotkania, potwierdzać udział jednym kliknięciem i rozmawiać z innymi biegaczami.

Dlaczego ta aplikacja potrzebuje bazy danych?

Aplikacja społecznościowa potrzebuje niezawodnej pamięci, czyli bazy danych. Gdy biegacz doda nową trasę widokową, potwierdzi udział w sobotnim porannym biegu lub opublikuje komentarz z pytaniem o parking, te informacje nie mogą zniknąć po zamknięciu telefonu lub wyłączeniu komputera. Baza danych bezpiecznie przechowuje i organizuje wszystkie trasy, listy uczestników i wiadomości od członków, dzięki czemu każdy w klubie widzi aktualne informacje, gdy tylko otworzy aplikację.

Aplikację utworzysz w trybie tworzenia w Google AI Studio. Nie musisz pisać skomplikowanego kodu ani samodzielnie konfigurować infrastruktury technicznej – wystarczy, że opiszesz, co chcesz zrobić, używając języka naturalnego. Google AI Studio generuje aplikację, łączy ją z prawdziwą bazą danych Cloud SQL for PostgreSQL, aby zapamiętywać dane, i publikuje ją na żywo w Cloud Run, dzięki czemu Twoja społeczność może od razu zacząć z niej korzystać.

Co utworzysz

Utworzysz i uruchomisz Running Club, czyli społecznościową aplikację internetową, która obejmuje:

• Logowanie przez Google: szybkie i bezpieczne logowanie przy użyciu istniejącego konta Google.
• Profile biegaczy: profile członków, które pokazują preferencje dotyczące biegania i docelowe tempo.
• Biblioteka tras: zbiór ulubionych tras w okolicy z informacjami o dystansie, trudności podjazdu i miejscach spotkań.
• Harmonogram najbliższych biegów: tablica wydarzeń do organizowania najbliższych biegów grupowych i łączenia ich z trasami.
• Proste potwierdzenia udziału: przycisk, który pozwala członkom jednym kliknięciem potwierdzić udział w wydarzeniu i zobaczyć, kto jeszcze się wybiera.
• Prowadzenie dyskusji: przestrzeń do komentowania każdego biegu, w której można koordynować szczegóły, zadawać pytania i udostępniać aktualizacje.

Czego się nauczysz

• Jak utworzyć działającą aplikację internetową w Google AI Studio za pomocą jednego prompta w języku naturalnym.
• Jak Google AI Studio automatycznie konfiguruje logowanie przez Google.
• Jak Google AI Studio tworzy i łączy prawdziwą bazę danych Cloud SQL for PostgreSQL, aby zapamiętywać Twoje dane.
• Jak dodawać nowe funkcje i rozszerzać bazę danych, po prostu rozmawiając z AI.
• Jak sprawdzić, czy dane klubu są bezpiecznie zapisywane podczas wizyt.
• Jak opublikować aplikację w internecie za pomocą Cloud Run.
• Jak wyświetlić aktywną aplikację i bazę danych w konsoli Google Cloud.

Czego potrzebujesz

• nowoczesną przeglądarkę, np. Google Chrome;
• Standardowe konto Google do logowania się w Google AI Studio.

Kryteria kwalifikacji i limity wersji Cloud SQL Starter Edition

Najważniejsze informacje o poziomie Starter: możesz tworzyć i wdrażać maksymalnie 2 aplikacje pełnostosowe z Cloud SQL bezpłatnie i bez konfigurowania konta rozliczeniowego.

Google AI Studio oferuje poziom startowy Google Cloud, który pomaga twórcom eksperymentować z aplikacjami generatywnymi i zarządzanymi bazami danych:

• Wymagania:
  • Dostępne dla osób korzystających ze standardowego konta Google.
  • Nie kwalifikują się użytkownicy, którzy mają lub mieli konta rozliczeniowe Google Cloud, a także konta powiązane z Google Workspace, Google Workspace for Education lub Google for Nonprofits.
  • Jeśli Twoje konto nie kwalifikuje się do poziomu Starter, możesz ukończyć ten przewodnik, wybierając w AI Studio istniejący projekt Google Cloud z włączonymi rozliczeniami.
• Specyfikacje zasobów:
  • Tworzy instancję Cloud SQL for PostgreSQL w wersji Developer Edition z PostgreSQL 18.
  • Zawiera 0, 5 vCPU, 2 GB pamięci RAM i 1 GB miejsca na dane. Powinno to wystarczyć na setki wizyt dziennie przez kilka miesięcy lub dłużej, w zależności od aktywności.
  • Obsługuje skalowanie do zera, czyli automatyczne wstrzymywanie obliczeń, gdy nie ma aktywnych połączeń z bazą danych, aby oszczędzać limit.
• Quota
  • Obejmuje bezpłatny miesięczny limit 50 jednostek obliczeniowych i 10 GB miejsca na dane.

2. Otwieranie Google AI Studio i tworzenie nowej aplikacji

Aby rozpocząć, otwórz Google AI Studio w przeglądarce. To Twoje miejsce pracy, w którym możesz tworzyć i testować aplikacje, po prostu opisując, czego potrzebujesz.

Krok 1. Zaloguj się w Google AI Studio

1. Otwórz przeglądarkę (np. Google Chrome) i wejdź na stronę aistudio.google.com.
2. Kliknij Rozpocznij i zaloguj się na standardowe konto Google (np. konto Gmail).

3. Jeśli podczas pierwszej wizyty pojawi się prośba o zapoznanie się z warunkami korzystania z usługi, przeczytaj je i zaakceptuj, aby kontynuować.

Krok 2. Rozpocznij składanie nowego wniosku

1. W panelu u dołu pośrodku kliknij Start building (Rozpocznij tworzenie) lub w panelu po prawej stronie kliknij + New App (+ Nowa aplikacja).

3. Zacznij od prostego promptu i uwierzytelniania Firebase

Aby rozpocząć, nie potrzebujesz skomplikowanych diagramów architektury. Możesz uruchomić pierwszą aplikację, skonfigurować logowanie przez Google i połączyć bazę danych za pomocą jednego zdania.

Wpisz prompta początkowego

W polu promptu w trybie tworzenia AI Studio wpisz ten prompt i naciśnij Enter:

Build a running club web app with a Cloud SQL database
where members can post upcoming runs.

Ten link automatycznie wypełni pole promptu.

Informacje o obszarze roboczym

Po przesłaniu promptu Google AI Studio otworzy pełny obszar roboczy aplikacji. Poświęć chwilę, aby przyjrzeć się 3 głównym obszarom na ekranie:

• Pole czatu / promptu (u dołu): w tym miejscu możesz kontynuować czat z AI w prostym języku, aby dodawać funkcje, dostosowywać projekty lub zadawać pytania.
• Obszar plików i kodu (po lewej): wyświetla pliki tworzone przez AI za kulisami. Nie musisz samodzielnie pisać ani edytować kodu, ale w tym panelu możesz obserwować, jak AI tworzy poszczególne elementy aplikacji.
• Okno podglądu na żywo (po prawej stronie): wyświetla aktualnie używaną aplikację w czasie rzeczywistym. Gdy tylko aplikacja zostanie wygenerowana, możesz klikać przyciski, wpisywać tekst w polach tekstowych i testować ją bezpośrednio w tym oknie.
• Edytor kodu (po prawej stronie): wyświetla kod wygenerowany przez AI. Możesz ją zmienić, jeśli chcesz, ale nie jest to wymagane.
• Wdrażanie i udostępnianie (prawy górny róg): w tym miejscu możesz wdrożyć aplikację w internecie i udostępnić ją innym osobom.

Automatyczne działania Google AI Studio

Gdy AI przetwarza Twoją prośbę, możesz obserwować, jak krok po kroku tworzy aplikację:

1. Konfiguruje logowanie przez Google: AI automatycznie integruje logowanie przez Google, dzięki czemu uczestnicy mogą bezpiecznie logować się za pomocą kont Google – nie musisz zarządzać hasłami użytkowników ani ustawieniami zabezpieczeń.
2. Łączy się z prawdziwą bazą danych: AI konfiguruje zarządzaną bazę danych Cloud SQL do przechowywania danych Twojej społeczności. Jeśli pojawi się prośba, kliknij, aby włączyć bazę danych w projekcie.

3. Porządkuje tabele danych (schema.ts): schemat bazy danych to zbiór uporządkowanych arkuszy kalkulacyjnych. AI automatycznie tworzy strukturę pamięci na potrzeby aplikacji:
   • userstabela: przechowuje profile członków, ich imiona i nazwiska, awatary oraz tempo biegu.
   • runstabela: przechowuje zaplanowane wydarzenia wraz z tytułem, odległością, docelowym tempem, lokalizacją i datą.
   • commentstabela: przechowuje wiadomości i pytania pozostawione przez biegaczy w ramach każdego biegu.
   Wszystkie te zmiany są wprowadzane automatycznie w obszarze kodu. Możesz zobaczyć, jak te kategorie są uporządkowane, jeśli przejdziesz z karty Podgląd na kartę Kod. Nie musisz jednak pisać kodu samodzielnie – wszystko odbywa się automatycznie.(Uwaga: nie musisz pisać ani edytować tego kodu ręcznie – AI aktualizuje go za Ciebie, gdy poprosisz o nowe funkcje).
4. Tworzy interfejs wizualny: AI tworzy strony internetowe, które widzisz na ekranie, w tym nagłówek, listę nadchodzących biegów, formularz tworzenia wydarzeń i sekcję komentarzy.

Weryfikacja uwierzytelniania i publikowanie

Po zakończeniu generowania przetestuj nową aplikację w panelu Podgląd:

1. W oknie podglądu kliknij Zaloguj się jako członek (lub kliknij przycisk Opublikuj nadchodzący bieg, który spowoduje uwierzytelnienie).
2. Uwierzytelnij się za pomocą konta Google w oknie dialogowym Firebase Auth.
3. Po zalogowaniu się na pasku nawigacyjnym pojawią się nazwa i awatar Twojego profilu Google, a Twoje preferencje dotyczące tempa będą zarządzane automatycznie.
4. W formularzu „Opublikuj nadchodzący bieg” wpisz tytuł (np. Morning 5K Shakeout).
5. Wybierz datę i godzinę oraz wpisz lokalizację spotkania (np. Central Park West Entrance).
6. Kliknij PublishRun.
7. Sprawdź, czy nowy bieg od razu pojawi się w kanale nadchodzących biegów, a jako organizator będzie wyświetlany Twój uwierzytelniony profil i odznaka tempa.
8. Opublikuj krótką wiadomość w sekcji dyskusji o biegu (np. Bringing extra water bottles!) i sprawdź, czy pojawi się ona w wątku komentarzy.

4. Tworzenie biblioteki tras

Kluby biegowe często korzystają z popularnych lokalnych tras. Zamiast ciągle wpisywać te same informacje o trasie, możesz pozwolić członkom zapisywać ulubione trasy w katalogu i dołączać je podczas planowania biegu.

Poproś AI o dodanie biblioteki tras

W polu promptu czatu wpisz to żądanie i naciśnij Enter:

Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.

Jak AI łączy trasy z biegami w tle

Aby to zrobić, AI automatycznie tworzy nową tabelę pamięci masowej dla tras i łączy ją bezpośrednio z tabelą przebiegów. Dzięki temu połączeniu aplikacja może automatycznie pobierać szczegóły dotyczące odległości i lokalizacji, gdy organizator wybierze trasę.

(Nie musisz niczego zmieniać w tym kodzie – AI zaktualizuje strukturę bazy danych za Ciebie).

Testowanie nowej biblioteki tras w wersji testowej

Gdy AI zakończy aktualizowanie aplikacji, wypróbuj nową funkcję trasy w oknie podglądu na żywo:

1. W menu nawigacyjnym aplikacji kliknij kartę Biblioteka tras. Jeśli nie ma takiej karty, sprawdź dolną część podglądu na żywo – może pojawić się prośba o kliknięcie przycisku Zapisz, aby odświeżyć podgląd. Jeśli to nie pomoże, spróbuj porozmawiać z AI w oknie czatu i zapytać, gdzie znajduje się biblioteka tras.
2. Kliknij Zapisz nową trasę (lub Dodaj trasę) i wpisz przykładowe dane:
   • Tytuł trasy: Riverfront Trail Loop
   • Odległość: 8.5 km
   • Poziom trudności: Moderate
   • Lokalizacja początkowa: Waterfront Pier 4
3. Kliknij Zapisz w bibliotece.
4. Teraz możesz zaplanować bieg na tej trasie, klikając przycisk Zaplanuj bieg bezpośrednio na karcie nowej trasy.
5. Zwróć uwagę, jak automatycznie wypełniają się szczegóły dotyczące odległości, trudności i lokalizacji.
6. Kliknij Opublikuj bieg i sprawdź, czy nowy bieg grupowy pojawił się na stronie głównej.

5. Wdrażanie potwierdzeń i zaproszeń dla członków

Aplikacje społecznościowe rozwijają się dzięki zaangażowaniu użytkowników. Możesz pozwolić biegaczom zobaczyć, kto weźmie udział w nadchodzącym biegu, zapisać się jednym kliknięciem i udostępnić znajomym link z zaproszeniem.

Poproś AI o dodanie potwierdzeń i zaproszeń

W polu promptu czatu wpisz to żądanie i naciśnij Enter:

Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.

Jak AI śledzi uczestników za kulisami

Aby śledzić, którzy biegacze przychodzą na poszczególne biegi, AI automatycznie tworzy w Twojej bazie danych tabelę rsvps. Można to porównać do cyfrowego formularza rejestracyjnego, który łączy imię i nazwisko biegacza z konkretnym wydarzeniem.

(Nie musisz pisać ani edytować tego kodu – AI automatycznie zarządza tym arkuszem rejestracji w Twojej bazie danych).

Testowanie odpowiedzi i zaproszeń w podglądzie

Gdy AI zakończy aktualizowanie aplikacji, przetestuj nowe funkcje RSVP w oknie podglądu na żywo:

1. W oknie podglądu znajdź na stronie głównej nadchodzący bieg.
2. Kliknij przycisk Dołącz do biegu (lub Potwierdź udział).
3. Sprawdź, czy Twoje imię i nazwisko oraz awatar są widoczne w sekcji Uczestniczący biegacze, a licznik uczestników zwiększył się o 1.
4. Kliknij Skopiuj link z zaproszeniem i sprawdź, czy został wygenerowany link do udostępniania.

6. Testowanie trwałości danych i skalowania do zera w Cloud SQL

Podczas tworzenia aplikacji najważniejsze jest, aby mieć pewność, że informacje o społeczności są bezpieczne. Jeśli odświeżysz przeglądarkę, zamkniesz kartę lub wyłączysz komputer, chcesz, aby wszystkie zapisane trasy, odpowiedzi i dyskusje były nadal dostępne po powrocie.

W tym kroku sprawdzisz, czy dane są bezpiecznie zapisywane w bazie danych Cloud SQL, i dowiesz się, jak Google Cloud oszczędza energię i koszty, gdy aplikacja jest nieaktywna.

Testowanie odświeżania aplikacji

1. W oknie podglądu AI Studio kliknij przycisk Załaduj ponownie (lub odśwież kartę przeglądarki).

2. Sprawdź aplikację w podglądzie: zobaczysz, że wszystko, co zostało utworzone – profil wspierającego, zapisane trasy, zaplanowane biegi, potwierdzenia udziału i komentarze – jest na swoim miejscu.
3. Aplikacja nie tylko tymczasowo przechowywała informacje na ekranie, ale też bezpiecznie zapisywała je w bazie danych Cloud SQL.

Jak Cloud SQL oszczędza energię i koszty („skalowanie do zera”)

Co się stanie, gdy nikt nie będzie korzystać z aplikacji klubu biegacza w środku nocy?

• Automatyczne uśpienie („skalowanie do zera”): gdy nikt nie odwiedza aplikacji ani nie rejestruje się na biegi, baza danych automatycznie wstrzymuje działanie, aby oszczędzać zasoby.
• Natychmiastowe wybudzanie: gdy tylko biegacz otworzy aplikację lub kliknie link z zaproszeniem, baza danych natychmiast się wybudzi i będzie zawierać wszystkie zapisane informacje.
• Brak kosztów bezczynności: gdy aplikacja jest nieaktywna, przechodzi w stan uśpienia, więc nie zużywasz zasobów obliczeniowych, gdy nie jest używana.

Dlaczego prawdziwa baza danych jest ważna: ponieważ AI uporządkowała informacje w połączonych tabelach, Twoja aplikacja pozostanie przejrzysta. Jeśli na przykład bieg zostanie anulowany i usunięty, wszystkie komentarze do niego zostaną automatycznie usunięte, aby nie pozostały żadne mylące wiadomości.

7. Publikowanie i wdrażanie w Cloud Run

Aplikacja Running Club została utworzona i przetestowana w wersji podglądowej, więc możesz ją teraz udostępnić swojej społeczności. Nie musisz kupować hostingu ani konfigurować serwerów – możesz uruchomić aplikację w internecie jednym kliknięciem.

Publikowanie aplikacji w internecie

1. W prawym górnym rogu Google AI Studio kliknij przycisk Opublikuj.
2. Pojawi się okno podsumowania z potwierdzeniem szczegółów:
   • Hosting: hostowany i wdrażany w Google Cloud Run.
   • Połączone usługi: logowanie przez Google i baza danych Cloud SQL.
3. Aby uruchomić aplikację, kliknij Opublikuj.

Otwieranie i udostępnianie aplikacji na żywo

1. Po zakończeniu publikowania Google AI Studio podaje aktywny adres internetowy oraz kod QR.
2. Kliknij link, aby otworzyć aktywną aplikację internetową w nowej karcie przeglądarki, lub zeskanuj kod QR aparatem telefonu.
3. Wypróbuj na telefonie: zaloguj się na telefonie, potwierdź udział w jednym z biegów zaplanowanych wcześniej na komputerze i obserwuj, jak liczba uczestników aktualizuje się w czasie rzeczywistym dzięki udostępnionej bazie danych Cloud SQL.

8. (Dodatkowo) Sprawdzanie zasobów w konsoli Google Cloud

Dodatkowe eksplorowanie: ten krok jest całkowicie opcjonalny. Aplikacja jest już aktywna i działa. Jeśli chcesz dowiedzieć się więcej o Google Cloud i zobaczyć, co AI stworzyła w tle, zapoznaj się z infrastrukturą na żywo.

Gdy Google AI Studio tworzy i wdraża aplikację, nie zamyka jej w prywatnym, niedostępnym środowisku. Zamiast tego tworzy w Twoim imieniu prawdziwe usługi Google Cloud gotowe do wdrożenia w środowisku produkcyjnym. Konsola Google Cloud to centrum sterowania, w którym możesz wyświetlać aktywną aplikację i bazę danych.

Krok 1. Otwórz konsolę Google Cloud

1. Na nowej karcie przeglądarki otwórz konsolę Google Cloud.
2. U góry ekranu kliknij menu projektu i wybierz projekt utworzony dla aplikacji AI Studio (jego nazwa zwykle zaczyna się od continual-run-).

Krok 2. Sprawdź, gdzie działa Twoja aplikacja internetowa (Cloud Run)

1. Na pasku wyszukiwania u góry wpisz Cloud Run i wybierz go z wyników.
2. Kliknij nazwę aplikacji (np. running-club).
3. Tutaj możesz sprawdzić silnik, który hostuje Twoją witrynę:
   • Dane: przydatne wykresy pokazujące, ilu użytkowników odwiedza Twoją witrynę.
   • Dzienniki: zapis aktywności na żywo pokazujący, co się dzieje, gdy użytkownicy wchodzą w interakcję z Twoją aplikacją.

Krok 3. Sprawdź działanie bazy danych (Cloud SQL)

1. Na pasku wyszukiwania u góry wpisz Cloud SQL i wybierz go z wyników.
2. Kliknij instancję bazy danych PostgreSQL.
3. W tym miejscu możesz zobaczyć szczegóły bazy danych na żywo, potwierdzając, że jest ona aktywna i gotowa do przechowywania danych Twojego klubu biegowego.

9. Zwalnianie miejsca

Jeśli ta aplikacja została utworzona jako projekt ćwiczeniowy, możesz ją łatwo usunąć. Jeśli chcesz nadal korzystać z aplikacji Running Club ze swoją społecznością, możesz ją pozostawić włączoną.

1. W Google AI Studio na pasku bocznym po lewej stronie kliknij Moje aplikacje.
2. Znajdź aplikację Klub biegowy.
3. Kliknij Usuń aplikację (lub ikonę kosza). Spowoduje to wyłączenie aktywnej strony internetowej i usunięcie bazy danych testów w jednym kroku.

10. Gratulacje

Udało Ci się utworzyć, dostosować i opublikować pierwszą aplikację internetową opartą na bazie danych przy użyciu Google AI Studio i Cloud SQL.

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

Aby kontynuować, przejdź do goo.gle/builders i wybierz kolejne ćwiczenie.

Co udało Ci się osiągnąć

• Tworzenie aplikacji za pomocą prostych poleceń: utworzyliśmy kompletną aplikację dla społecznościowego klubu biegowego za pomocą prostych promptów.
• Włączono Logowanie przez Google: automatycznie skonfiguruj bezpieczne logowanie za pomocą kont Google.
• Połączona prawdziwa baza danych: bezpieczne przechowywanie tras, zaplanowanych biegów, odpowiedzi na zaproszenia i dyskusji w Cloud SQL.
• Dodawanie funkcji w formie rozmowy: budowanie biblioteki tras i śledzenie odpowiedzi na zaproszenia przez zwykłą rozmowę z AI.
• Opublikowano w internecie: aplikacja została wdrożona w internecie jednym kliknięciem i przetestowana na różnych urządzeniach.
• Sprawdzanie działania: sprawdź, jak Google Cloud hostuje Twoją aktywną aplikację internetową i bazę danych.

Co dalej?

Możesz kontynuować rozmowę z AI w Google AI Studio, aby rozszerzyć aplikację o nowe funkcje:

• Interaktywne mapy: poproś AI o dodanie podglądów map i tras GPS.
• Dobieranie partnerów do biegania: poproś AI o sugerowanie partnerów do biegania o podobnych celach dotyczących tempa.
• Prognozy pogody: poproś AI o wyświetlanie prognoz pogody na weekend na kartach nadchodzących biegów.
• Udostępnianie zdjęć: poproś AI o umożliwienie biegaczom udostępniania zdjęć po biegu grupowym.

Więcej informacji

• Dokumentacja Google AI Studio
• Wdrażanie aplikacji z Google AI Studio
• Omówienie Cloud SQL for PostgreSQL
• Kodowanie z pomocą AI i Cloud SQL
• Dokumentacja Cloud Run