Z tego krótkiego wprowadzenia dowiesz się, jak:
- Dodaj Firebase Data Connect do swojego projektu Firebase.
- Skonfiguruj środowisko programistyczne z rozszerzeniem Visual Studio do pracy z instancją produkcyjną.
- Następnie pokażemy Ci, jak:
- Utwórz schemat aplikacji do poczty e-mail i wdróż ją w środowisku produkcyjnym.
- Zdefiniuj zapytania i mutacje dla schematu.
- Wdrożenie ostatecznego prototypu w środowisku produkcyjnym.
Wymagania wstępne
Aby skorzystać z tego krótkiego wprowadzenia, musisz mieć:
- Linux, macOS lub Windows
- Visual Studio Code
Dodawanie usługi Data Connect do projektu i tworzenie źródła danych
- Jeśli nie masz jeszcze utworzonego projektu Firebase,
- W konsoli Firebase kliknij Dodaj projekt i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.
Przenieś projekt na abonament Blaze. Pozwoli Ci to utworzyć instancję Cloud SQL for PostgreSQL.
Przejdź do sekcji Połączenie danych w konsoli Firebase i postępuj zgodnie z instrukcjami konfiguracji usługi.
Wybierz lokalizację bazy danych Cloud SQL for PostgreSQL.
Zapisz nazwy i identyfikatory projektów, usług i baz danych, aby móc je później potwierdzić.
Wykonaj pozostałe kroki konfiguracji i kliknij Gotowe.
Wybieranie i konfigurowanie środowiska programistycznego
Data Connect obsługuje 2 procesy programowania prototypów:
- Jeśli jesteś programistą Kotlin na Androida lub stron internetowych, możesz za pomocą projektowania kodu VS lokalnie tworzyć prototypy schematów i operacji przy nawiązywaniu połączenia z instancją Cloud SQL for PostgreSQL.
Jeśli jesteś programistą internetowym, możesz skorzystać z programowania IDX do utworzenia prototypu w obszarze roboczym IDX z użyciem wstępnie skonfigurowanego szablonu IDX z PostgreSQL, rozszerzenie VS Code z emulatorem Data Connect oraz skonfigurowanie kodu krótkiego wprowadzenia.
Programowanie w VS Code
Jeśli zamiast IDX wolisz programować lokalnie, skonfiguruj rozszerzenie Firebase VS Code, aby szybko tworzyć iteracje.
- Utwórz nowy katalog dla projektu lokalnego.
- Otwórz VS Code w nowym katalogu.
- Pobierz rozszerzenie z Firebase Storage w pakiecie VSIX.
- W aplikacji VS Code w menu Widok wybierz Rozszerzenia.
- Na pasku tytułu panelu Rozszerzenia kliknij ikonę menu more_horiz, a potem kliknij Zainstaluj z VSIX....
Programowanie w IDX
IDX to środowisko zoptymalizowane pod kątem tworzenia aplikacji internetowych. Jeśli jesteś programistą aplikacji na Androida Kotlin, wykonaj czynności opisane na karcie Tworzenie kodu VS.
Aby skonfigurować szablon Data Connect IDX:
- Szablon znajdziesz w witrynie Project IDX.
- Postępuj zgodnie z instrukcjami.
Opcjonalnie możesz zainstalować lokalną bazę danych PostgreSQL na potrzeby lokalnego programowania za pomocą emulatora Data Connect. Tę konfigurację opisujemy na końcu tego krótkiego przewodnika.
Skonfiguruj projekt lokalny
Zainstaluj interfejs wiersza poleceń, postępując zgodnie z zwykłymi instrukcjami.
Następnie włącz eksperyment Firebase Data Connect.
firebase experiments:enable dataconnect
Skonfiguruj katalog projektu
Aby skonfigurować projekt lokalny, zainicjuj katalog projektu.
W panelu po lewej stronie „VS Code” kliknij ikonę Firebase, aby otworzyć interfejs rozszerzenia kodu Firebase VS.
W interfejsie rozszerzenia Firebase:
- Zaloguj się na swoje konto.
- Sprawdź w konsoli Google Cloud, czy został ukończony proces konfiguracji Data Connect, w tym udostępnianie bazy danych.
- Kliknij przycisk Uruchom aplikację Firebase init.
- Sprawdź, czy na karcie Terminal (Terminal) w dolnym panelu VS Code (Kod VS) widzisz jakieś komunikaty.
- Wybierz Data Connect jako funkcję do użycia w tym katalogu.
- Gdy pojawi się prośba, podaj identyfikatory projektów, usług i baz danych utworzonego wcześniej projektu Data Connect w konsoli.
Ten proces utworzy pliki firebase.json i .firebaserc oraz podkatalogi dataconnect, w tym ważne pliki dataconnect.yaml i connector.yaml w lokalnym katalogu roboczym.
Tworzenie schematu i zapytania Data Connect
Zacznij używać GraphQL do modelowania użytkowników i adresów e-mail. Źródła będą aktualizowane w:
/dataconnect/schema/schema.gql/dataconnect/default-connector/queries.gql
Zacznij tworzyć schemat
Zwróć uwagę na folder dataconnect w katalogu projektu Firebase. Tutaj możesz zdefiniować model danych dla bazy danych Cloud SQL za pomocą GraphQL.
W pliku /dataconnect/schema/schema.gql zacznij definiować schemat obejmujący użytkowników i adresy e-mail.
Użytkownik
W Data Connect pola GraphQL są mapowane na kolumny. Użytkownicy mają uid, name i adres e-mail address. Usługa Data Connect rozpoznaje kilka podstawowych typów danych: String i Date.
Skopiuj ten fragment lub usuń znacznik komentarza z odpowiednich wierszy w pliku.
# File `/dataconnect/schema/schema.gql`
type User @table(key: "uid") {
uid: String!
name: String!
address: String!
}
Domyślnie usługa Firebase Data Connect doda klucz UUID id, jeśli nie zostanie podany żaden klucz. W tym przypadku jednak chcesz, aby mój uid był kluczem podstawowym, co możesz zrobić za pomocą dyrektywy @table(key: "uid").
Wyślij e-mailem
Gdy masz już użytkowników, możesz modelować adresy e-mail. Tutaj możesz dodać typowe pola (lub kolumny) danych poczty e-mail. Tym razem pomijamy dodawanie klucza podstawowego, ponieważ może nim zarządzać usługa Data Connect.
# File `/dataconnect/schema/schema.gql`
type Email @table {
subject: String!
sent: Date!
text: String!
from: User!
}
Zauważ, że pole from jest zmapowane na typ User.
Usługa Data Connect rozumie, że jest to relacja między Email a User, i będzie nią zarządzać za Ciebie.
Wdrażanie schematu w środowisku produkcyjnym
Jeśli do pracy z produkcyjną bazą danych używasz rozszerzenia Firebase VS Code, musisz wdrożyć schemat, zanim przejdziesz dalej. Po wdrożeniu schematu w produkcyjnej bazie danych powinien on być dostępny w konsoli.
- Do wdrożenia możesz użyć rozszerzenia Firebase VS Code.
- W interfejsie rozszerzenia w panelu Połączenie danych Firebase kliknij Wdróż.
Możesz też użyć interfejsu wiersza poleceń Firebase.
firebase deployW procedurze rozszerzenia lub interfejsu wiersza poleceń może być konieczne sprawdzenie zmian w schemacie i zatwierdzenie potencjalnie szkodliwych zmian. Wyświetli się prośba o:
- Sprawdź zmiany schematu za pomocą:
firebase dataconnect:sql:diff - Jeśli zmiany są zadowalające, zastosuj je, korzystając z procesu rozpoczętego przez
firebase dataconnect:sql:migrate.
- Sprawdź zmiany schematu za pomocą:
Wykonuj mutacje, aby dodać dane do tabel
W panelu edytora kodu VS przyciski CodeLens pojawiają się nad typami GraphQL w polu /dataconnect/schema/schema.gql.
Zapytania i mutacje w czasie programowania
Operacje bez nazwy powiązane z tymi przyciskami CodeLens to szybkie i przydatne działania, w tym przypadku dodawanie danych do tabeli. Usługa Data Connect wykorzystuje mutacje GraphQL, aby opisać, jak i kto może działać w bazie danych. Użycie tego przycisku powoduje rozpoczęcie operacji w czasie programowania, co przyspiesza przenoszenie danych.
Ponieważ schemat został wdrożony w środowisku produkcyjnym, możesz w wygenerowanych plikach wykonać te działania za pomocą przycisków Dodaj dane CodeLens w pliku schema.gql i Uruchom (produkcyjne) w wygenerowanych plikach, aby wykonać te działania w backendzie.
Aby dodać rekordy do tabel User i Email:
- W usłudze
schema.gqlkliknij przycisk Dodaj dane nad deklaracją typuUser. - W wygenerowanym pliku
User_insert.gqlzakoduj na stałe dane w 3 polach. - Kliknij przycisk Uruchom (produkcyjna).
- Powtórz poprzednie kroki, aby dodać rekord do tabeli
Email, podając w polufromUidpoleuidużytkownika, zgodnie z instrukcjami w wygenerowanej mutacjiEmail_insert.
Napisz zapytanie, aby wyświetlić listę adresów e-mail
Teraz najciekawsza część to zapytania. Programiści są przyzwyczajeni do tworzenia zapytań SQL zamiast zapytań GraphQL, więc na początku może się to wydawać nieco inne. Interfejs GraphQL jest jednak o wiele bardziej zwięzły i bezpieczny do pisania niż nieprzetworzony SQL. Rozszerzenie VS Code ułatwia programowanie.
Zacznij edytować plik /dataconnect/default-connector/queries.gql. Jeśli chcesz otrzymywać wszystkie e-maile, użyj podobnego zapytania.
# File `/dataconnect/default-connector/queries.gql`
query ListEmails @auth(level: NO_ACCESS) {
emails {
id, subject, text, sent
from {
name
}
}
}
Wykonaj zapytanie, korzystając z pobliskiego przycisku CodeLens.
Bardzo ciekawą funkcją jest możliwość traktowania
relacji bazy danych jak grafu. Adres e-mail zawiera pole from odwołujące się do użytkownika, więc możesz zagnieździć to pole i uzyskać o nim informacje.
Wdróż gotowy prototyp w środowisku produkcyjnym
Udało Ci się przejść iterację rozwojową. Możesz teraz wdrożyć schemat, dane i zapytania na serwerze za pomocą interfejsu rozszerzenia Firebase lub interfejsu wiersza poleceń Firebase, tak jak podczas korzystania ze schematu.
Jeśli do wdrożenia używasz rozszerzenia Firebase VS Code, kliknij przycisk Wdróż wszystkie.
Po wdrożeniu będziesz mieć możliwość wyświetlania i uruchamiania operacji w konsoli. Twoja usługa Data Connect będzie gotowa do przetwarzania operacji klientów. Instancja Cloud SQL for PostgreSQL zostanie zaktualizowana o ostatecznie wdrożony wygenerowany schemat i dane.
(Opcjonalnie) Zainstaluj lokalnie PostgreSQL
Lokalna instalacja PostgreSQL i integracja z emulatorem umożliwia tworzenie prototypów w całkowicie lokalnym środowisku programistycznym.
Możesz zainstalować nową instancję PostgreSQL lub użyć istniejącej.
Zainstaluj PostgreSQL
Zainstaluj PostgreSQL w wersji 15.x, postępując zgodnie z instrukcjami dla swojej platformy.
- macOS: Pobierz i zainstaluj Postgres.app.
- Windows: użyj instalatora EDB ze strony pobierania PostgreSQL.
- Docker: pobierz i uruchom obraz
pgvector/pgvector:15, który zapewnia obsługę PostgreSQL 15.x i obsługę wektorową. - Linux: zalecamy korzystanie z Dockera z poprzednim obrazem, ale możesz też wykonać alternatywne instrukcje dotyczące popularnych dystrybucji.
Zanotuj nazwę hosta, port, nazwę użytkownika i hasło oraz powiązane parametry wyjściowe podczas sekwencji instalacji.
Aby połączyć się z instancją PostgreSQL, emulator potrzebuje:
- Te parametry konfiguracji konfiguracji
- Nazwa bazy danych z
dataconnect.yamli odpowiednio nazwana baza danych zainicjowana w instancji lokalnej.
Zaktualizuj pole .firebaserc o ciąg znaków połączenia
Użyj szczegółów lokalnej konfiguracji PostgreSQL, w tym lokalnej nazwy użytkownika i hasła PostgreSQL, jako ciągu połączenia, aby dodać ciąg połączenia do poniższego klucza w pliku .firebaserc.
{
"projects": {},
...,
...,
"dataconnectEmulatorConfig": {
"postgres": {
"localConnectionString": "postgresql://postgresusername:postgrespassword@localhost:5432?sslmode=disable"
}}
}
Łączenie z lokalną instancją PostgreSQL
Po zakończeniu konfiguracji połączenie z lokalną bazą danych:
- W panelu po lewej stronie kliknij ikonę Firebase w panelu po lewej stronie, by otworzyć interfejs rozszerzenia Firebase VS Code.
- Kliknij przycisk Connect to Local PostgreSQL (Połącz z lokalnym programem PostgreSQL).