Tworzenie za pomocą Firebase Data Connect (Android)

1. Omówienie

ddc52cd46f923cf1.png

W tym laboratorium programistycznym zintegrujesz Firebase Data Connect z bazą danych Cloud SQL, aby utworzyć aplikację na Androida do tworzenia recenzji filmów. Poznasz też te sposoby:

  • Tworzenie schematu GraphQL dla Firebase Data Connect
  • pisać zapytania i mutacje,
  • Implementowanie uwierzytelniania użytkowników w celu zabezpieczenia danych

Wymagania wstępne

  • najnowsza wersja Android Studio,
  • emulator Androida z poziomem interfejsu API 23 lub wyższym,

Czego się nauczysz

  • Jak skonfigurować Firebase Data Connect za pomocą emulatorów lokalnych.
  • Jak zaprojektować schemat danych za pomocą Data Connect i GraphQL.
  • Jak pisać zapytania i mutacje w przypadku aplikacji z recenzjami filmów.
  • Jak wygenerować pakiet SDK Kotlin i użyć go w aplikacji na Androida.
  • (Opcjonalnie) Jak wdrożyć usługę Data Connect w środowisku produkcyjnym.

2. Konfigurowanie przykładowego projektu

Tworzenie projektu Firebase

  1. Zaloguj się w konsoli Firebase za pomocą konta Google.
  2. W konsoli Firebase kliknij Dodaj projekt.
  3. Wpisz nazwę projektu Firebase (np. „Recenzja filmu”) i kliknij Kontynuuj.
  4. Możesz otrzymać prośbę o włączenie Google Analytics, ale w ramach tego ćwiczenia nie ma to znaczenia.
  5. Po około minucie Twój projekt Firebase będzie gotowy. Kliknij Kontynuuj.

Pobieranie kodu

Aby skopiować przykładowy kod do tego ćwiczenia, uruchom to polecenie. Spowoduje to utworzenie na komputerze katalogu o nazwie codelab-dataconnect-android:

git clone https://github.com/firebaseextended/codelab-dataconnect-android.git

Jeśli nie masz git na komputerze, możesz też pobrać kod bezpośrednio z GitHuba.

Dodawanie konfiguracji Firebase

  1. W konsoli Firebase kliknij Omówienie projektu w menu nawigacyjnym po lewej stronie. Kliknij przycisk Android, aby wybrać platformę. Gdy pojawi się prośba o podanie nazwy pakietu, wpisz com.google.firebase.example.dataconnect.
  2. Kliknij Zarejestruj aplikację i postępuj zgodnie z instrukcjami, aby pobrać plik google-services.json i przesunąć go do katalogu app/ pobranego właśnie kodu. Następnie kliknij Dalej.

3. Konfigurowanie Data Connect

Instalacja

Automatyczna instalacja

W katalogu codelab-dataconnect-android uruchom to polecenie:

curl -sL https://firebase.tools/dataconnect | bash

Ten skrypt próbuje skonfigurować środowisko programistyczne i uruchomić IDE w przeglądarce. To środowisko IDE udostępnia narzędzia, w tym wstępnie skompilowane rozszerzenie VS Code, które ułatwia zarządzanie schematem i definiowanie zapytań oraz mutacji do użycia w aplikacji, a także generowanie pakietów SDK o ścisłym typowaniu.

Po uruchomieniu skryptu VS Code powinien otworzyć się automatycznie.

Uwaga: jeśli masz już zainstalowaną wersję na komputer VS Code, skrypt powinien otworzyć ją automatycznie. Jeśli skrypt się nie powiedzie, wykonaj podane niżej czynności związane z ręczną instalacją.

Instalacja ręczna

  1. Zainstaluj Visual Studio Code.
  2. Zainstaluj Node.js
  3. W VS Code otwórz katalog codelab-dataconnect-android.
  4. Zainstaluj rozszerzenie Firebase Data Connect ze sklepu Visual Studio Code Marketplace.

Inicjowanie usługi Data Connect w projekcie

W panelu po lewej stronie kliknij ikonę Firebase, aby otworzyć interfejs rozszerzenia Data Connect w VS Code:

  1. Kliknij przycisk Zaloguj się przez Google. Otworzy się okno przeglądarki. Postępuj zgodnie z instrukcjami, aby zalogować się w rozszerzeniu za pomocą konta Google. ef59f25a9e9cbfff.png
  2. Kliknij przycisk Połącz z projektem Firebase i wybierz projekt utworzony wcześniej w konsoli. 951a836ba0682494.png

Kliknij przycisk Uruchom init firebase i postępuj zgodnie z instrukcjami wyświetlanymi w zintegrowanym terminalu.

Konfigurowanie generowania pakietu SDK

Po kliknięciu przycisku Uruchom inicjalizację Firebase rozszerzenie Firebase Data Connect powinno zainicjować katalog dataconnect/.

W VS Code otwórz plik dataconnect/connector/connector.yaml, aby znaleźć domyślną konfigurację. Aby ułatwić wizualizację generowania kodu w tym ćwiczeniu, zmień wartość parametru connectorId na movies, a parametr package na com.google.firebase.example.dataconnect.generated:

connectorId: movies
generate:
  kotlinSdk:
    outputDir: ../../app/src/main/java
    package: com.google.firebase.example.dataconnect.generated

Aby zrozumieć, co oznaczają poszczególne stany:

  • connectorId – unikalna nazwa tego łącznika.
  • outputDir – ścieżka do katalogu, w którym będzie przechowywany wygenerowany pakiet SDK Data Connect. Ta ścieżka jest względna do katalogu zawierającego plik connector.yaml.
  • package – nazwa pakietu, która ma być używana w wygenerowanym pakiecie SDK.

Uruchom emulatory Firebase.

W VS Code kliknij przycisk Uruchom emulatory.

93fb67962e96a7cb.png

Emulator powinien się uruchomić w zintegrowanym terminalu. Jeśli wszystko się zacznie, powinny pojawić się dane wyjściowe podobne do tych:

8504ae0080923823.png

Konfigurowanie aplikacji na Androida do korzystania z lokalnego emulatora

  1. Otwórz Android Studio.
  2. Na ekranie powitalnym Android Studio kliknij przycisk Otwórz i wybierz katalog codelab-dataconnect-android. Zaczekaj na synchronizację Gradle.
  3. Po zakończeniu synchronizacji Gradle otwórz plik app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt i wywołaj funkcję useEmulator():
import com.google.firebase.example.dataconnect.generated.MoviesConnector
import com.google.firebase.example.dataconnect.generated.instance

class MainActivity : ComponentActivity() {
  ...

  // Initialize Firebase Data Connect
  MoviesConnector.instance.dataConnect.useEmulator("10.0.2.2", 9399)

  ...
}

4. Zdefiniuj schemat i wstępnie wypełnij bazę danych

W tej sekcji określisz w schemacie strukturę i relacje między najważniejszymi elementami w aplikacji filmowej. Elementy takie jak Movie, User i Review są mapowane na tabele bazy danych, a relacje są ustanawiane za pomocą poleceń Firebase Data Connect i direktiw schematu GraphQL.

Podstawowe elementy i powiązania

Typ Movie zawiera kluczowe informacje, takie jak tytuł, gatunek i tagi, których aplikacja używa do wyszukiwania i profili filmów. Typ User śledzi interakcje użytkowników, takie jak opinie i ulubione. Review umożliwia użytkownikom oglądanie filmów, pokazując oceny i opinie użytkowników.

Tabela użytkowników

Typ użytkownika definiuje użytkownika, który wchodzi w interakcję z filmami, pozostawiając opinie lub dodając filmy do ulubionych.

W VS Code otwórz plik dataconnect/schema/schema.gql i usuń komentarz (lub dodaj) z definicji tabeli User:

# Users
# Suppose a user can leave reviews for movies
# user  -> reviews is a one to many relationship,
# movie -> reviews is a one to many relationship
# movie <-> user is a many to many relationship
type User @table {
  id: String! @col(name: "user_auth")
  username: String! @col(name: "username", dataType: "varchar(50)")
  # The following are generated by the user: User! field in the Review table
  # reviews_on_user 
  # movies_via_Review
}

Tabela Movie

Typ Movie definiuje główną strukturę encji filmu, w tym pola takie jak tytuł, gatunek, rok wydania i ocena.

W VS Code otwórz plik dataconnect/schema/schema.gql i usuń komentarz (lub dodaj) z definicji tabeli Movie:

# Movies
type Movie @table {
  # The below parameter values are generated by default with @table, and can be edited manually.
  # implies directive `@col(name: "movie_id")`, generating a column name
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

Tabela MovieMetadata

Typ MovieMetadata tworzy relację jeden-do-jednego z typem Movie. Zawiera ono dodatkowe dane, takie jak reżyser filmu.

W VS Code otwórz plik dataconnect/schema/schema.gql i usuń komentarz (lub dodaj) z definicji tabeli MovieMetadata:

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # @unique indicates a 1-1 relationship
  movie: Movie! @unique 
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

Tabela opinii

Typ opinii reprezentuje element opinii i łączy typy Użytkownik i Film w relacji wiele do wielu (jeden użytkownik może pozostawić wiele opinii, a każdy film może mieć wiele opinii).

W VS Code otwórz plik dataconnect/schema/schema.gql i usuń komentarz (lub dodaj) z definicji tabeli Review:

# Reviews
type Review @table(name: "Reviews", key: ["movie", "user"]) {
  id: UUID! @default(expr: "uuidV4()")
  user: User!
  movie: Movie!
  rating: Int
  reviewText: String
  reviewDate: Date! @default(expr: "request.time")
}

Pola i ustawienia domyślne utworzone automatycznie

Schemat używa wyrażeń takich jak @default(expr: "uuidV4()") do automatycznego generowania unikalnych identyfikatorów i sygnatur czasowych. Na przykład pole identyfikatora w typach Film i Opinia jest automatycznie wypełniane identyfikatorem UUID podczas tworzenia nowego rekordu.

Wstawianie danych testowych

Po zdefiniowaniu schematu możesz wstępnie wypełnić bazę danych testowymi danymi.

  1. W VS Code otwórz dataconnect/moviedata_insert.gql. Upewnij się, że emulatory w rozszerzeniu Firebase Data Connect działają.
  2. U góry pliku powinien pojawić się przycisk Uruchom (lokalnie). Kliknij, aby wstawić do bazy danych dane testowe filmu.

b070f025e573ab9b.png

  1. Sprawdź terminal Data Connect Execution, aby potwierdzić, że dane zostały dodane.

e2058cb4db857058.png

Gdy dane są już dostępne, przejdź do następnego kroku, aby dowiedzieć się, jak tworzyć zapytania w Data Connect.

5. Tworzenie zapytania dotyczącego listy filmów

Zacznij od utworzenia zapytania, które wyświetli listę filmów. W przypadku każdego filmu pobierasz identyfikator, tytuł, adres URL obrazu i gatunek.

Definiowanie zapytania

W VS Code otwórz plik dataconnect/connector/queries.gql i usuń komentarz (lub dodaj) z zapytania ListMovies:

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

Aby przetestować nowe zapytanie, kliknij przycisk Uruchom (lokalnie), aby wykonać zapytanie w lokalnej bazie danych. Lista filmów z bazy danych powinna być wyświetlana w sekcji „Wynik” terminala Data Connect Execution.

822bf32321df4716.png

Rozmowa nawiązywana z poziomu aplikacji na Androida

Gdy już przetestujesz zapytanie w edytorze Data Connectivity, możesz je dodać do aplikacji.

W Android Studio otwórz plik app/src/main/java/com/google/firebase/example/dataconnect/MoviesScreen.kt i dodaj ten kod, aby wyświetlić listę filmów w formacie siatki:

import com.google.firebase.example.dataconnect.generated.ListMoviesQuery
import com.google.firebase.example.dataconnect.generated.MoviesConnector
import com.google.firebase.example.dataconnect.generated.execute
import com.google.firebase.example.dataconnect.generated.instance

@Composable
fun MoviesScreen(
    onMovieClicked: (id: String) -> Unit
) {
    var movies by remember { mutableStateOf(emptyList<ListMoviesQuery.Data.MoviesItem>()) }
    LaunchedEffect(Unit) {
        // Queries need to be executed in a coroutine context
        try {
          movies = MoviesConnector.instance.listMovies.execute().data.movies
        } catch (e: Exception) {
          // Will be done at a later step
        }
    }
    LazyVerticalGrid(GridCells.Adaptive(150.dp)) {
        items(movies) { movie ->
            MovieCard(
                movieId = movie.id.toString(),
                movieTitle = movie.title,
                movieImageUrl = movie.imageUrl,
                movieGenre = movie.genre,
                onMovieClicked = {
                    onMovieClicked(movie.id.toString())
                }
            )
        }
    }
}

Uruchamianie aplikacji

W Android Studio kliknij przycisk Uruchom, aby uruchomić aplikację w emulatorze Androida.

Po uruchomieniu aplikacji powinien pojawić się ekran podobny do tego:

ddc52cd46f923cf1.png

6. Tworzenie zapytania dotyczącego szczegółów filmu

Teraz, gdy aplikacja może wyświetlać listę filmów, utwórz zapytanie, aby wyświetlić szczegóły każdego filmu.

Definiowanie zapytania

W VS Code otwórz plik dataconnect/connector/queries.gql i usuń komentarz (lub dodaj) z zapytania GetMovieById:

# Get movie by id
query GetMovieById($id: UUID!) @auth(level: PUBLIC) {
  movie(id: $id) {
    id
    title
    imageUrl
    genre
    metadata: movieMetadata_on_movie {
      rating
      releaseYear
      description
    }
    reviews: reviews_on_movie {
      id
      reviewText
      reviewDate
      rating
      user {
        id
        username
      }
    }
  }
}

Rozmowa nawiązywana z poziomu aplikacji na Androida

W Android Studio otwórz plik app/src/main/java/com/google/firebase/example/dataconnect/MovieDetailScreen.kt i dodaj ten kod:

importcom.google.firebase.example.dataconnect.generated.GetMovieByIdQuery
importcom.google.firebase.example.dataconnect.generated.MoviesConnector
importcom.google.firebase.example.dataconnect.generated.execute
importcom.google.firebase.example.dataconnect.generated.instance

@Composable
fun MovieDetailScreen(
    movieId: String
) {
    var movie by remember { mutableStateOf<GetMovieByIdQuery.Data.Movie?>(null) }
    LaunchedEffect(Unit) {
        movie = MoviesConnector.instance.getMovieById.execute(
            UUID.fromString(movieId)
        ).data.movie
    }
    if (movie == null) {
        LoadingScreen()
    } else {
        MovieDetails(
            movieTitle = movie!!.title,
            movieImageUrl = movie!!.imageUrl,
            movieGenre = movie!!.genre,
            movieRating = movie!!.metadata?.rating,
            movieReleaseYear = movie!!.metadata?.releaseYear,
            movieDescription = movie!!.metadata?.description,
        )
    }
}

Uruchamianie aplikacji

W Android Studio kliknij przycisk Uruchom, aby uruchomić aplikację w emulatorze Androida.

7. Tworzenie zapytania typu mutation w celu wstawiania użytkowników

Teraz, gdy aplikacja może wyświetlać dane, możesz dodać nowe dane z aplikacji. Aby zrobić to bezpiecznie, użyj uwierzytelniania Firebase.

W ramach tego ćwiczenia aplikacja używa uwierzytelniania anonimowego do logowania użytkowników, ale aby zwiększyć bezpieczeństwo aplikacji, rozważ użycie innej metody uwierzytelniania, np. uwierzytelniania za pomocą adresu e-mail i hasła lub uwierzytelniania przez federacyjnego dostawcę tożsamości.

Definiowanie mutacji

W VS Code otwórz plik dataconnect/connector/mutations.gql i usuń komentarz (lub dodaj) z zapytania UpsertUser:

# Upsert (update or insert) a user's username based on their auth.uid
mutation UpsertUser($username: String!) @auth(level: USER) {
  user_upsert(
    data: {
      id_expr: "auth.uid"
      username: $username
    }
  )
}

Rozmowa nawiązywana z poziomu aplikacji na Androida

W Android Studio otwórz plik app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt i wywołaj mutację:

import com.google.firebase.example.dataconnect.generated.execute

LaunchedEffect(Unit) {
  // If there's no user signed in, sign in an anonymous user
  if (firebaseAuth.currentUser == null) {
    firebaseAuth.signInAnonymously().await()
    val newUsername = getRandomUsername()
    MoviesConnector.instance.upsertUser.execute(newUsername)
  }
}

Uruchamianie aplikacji

W Android Studio kliknij przycisk Uruchom, aby uruchomić aplikację w emulatorze Androida.

8. Gratulacje

Gratulacje! Udało Ci się dodać Firebase Data Connect do aplikacji na Androida.

Znasz już najważniejsze kroki wymagane do konfigurowania Data Connect, tworzenia zapytań i mutacji oraz obsługi uwierzytelniania użytkowników.

Co dalej

Opcjonalnie: wdrożenie w gałęzi produkcyjnej

Do tej pory aplikacja używała tylko emulatorów Firebase. Jeśli chcesz dowiedzieć się, jak wdrożyć tę aplikację w prawdziwym projekcie Firebase, przejdź do następnego kroku.

9. (Opcjonalnie) Wdróż aplikację

Dotychczas ta aplikacja była całkowicie lokalna, a wszystkie dane były przechowywane w Pakiecie emulatorów Firebase. W tej sekcji dowiesz się, jak skonfigurować projekt Firebase, aby aplikacja działała w produkcji.

Włączanie uwierzytelniania Firebase

W konsoli Firebase otwórz sekcję uwierzytelniania i kliknij Rozpocznij. Otwórz kartę Metoda logowania i wybierz opcję logowania anonimowego od dostawców.

Włącz metodę logowania anonimowego i kliknij Zapisz.

Wdrażanie schematu Firebase Data Connect

Ważne: jeśli wdrażasz schemat w swoim projekcie po raz pierwszy, ten proces utworzy instancję Cloud SQL PostgreSQL, co może potrwać około 15 minut. Nie będzie można wdrożyć usługi, dopóki instancja Cloud SQL nie będzie gotowa i zintegrowana z Firebase Data Connect.

  1. W interfejsie rozszerzenia Firebase Data Connect w VS Code kliknij Wdróż w środowisku produkcyjnym.
  2. Może być konieczne sprawdzenie zmian w schemacie i zatwierdzenie potencjalnie szkodliwych modyfikacji. Pojawi się prośba o:
    • Sprawdzanie zmian schematu za pomocą firebase dataconnect:sql:diff
    • Gdy już to zrobisz, zastosuj zmiany, korzystając z procesu rozpoczętego przez firebase dataconnect:sql:migrate

Twoja instancja Cloud SQL for PostgreSQL zostanie zaktualizowana o ostateczny wdrożony schemat i dane. Stan możesz sprawdzać w konsoli Firebase.

Aby dodać dane do środowiska produkcyjnego, możesz teraz w panelu Firebase Data Connect kliknąć Uruchom (produkcja), tak jak w przypadku lokalnych emulatorów.