Сборка с помощью Firebase Data Connect (Android)

1. Обзор

ddc52cd46f923cf1.png

В этом практическом занятии вы интегрируете Firebase Data Connect с базой данных Cloud SQL для создания Android-приложения для обзоров фильмов. Вы узнаете, как:

  • Напишите схему GraphQL для Firebase Data Connect.
  • Пишите запросы и мутации.
  • Внедрите аутентификацию пользователей для защиты ваших данных.

Предварительные требования

  • Последняя версия Android Studio
  • Эмулятор Android с API уровня 23 или выше

Что вы узнаете

  • Как настроить Firebase Data Connect с помощью локальных эмуляторов.
  • Как разработать схему данных с использованием Data Connect и GraphQL.
  • Как писать запросы и мутации для приложения, публикующего отзывы о фильмах.
  • Как сгенерировать SDK Kotlin и использовать его в Android-приложении.
  • (Необязательно) Как развернуть службу Data Connect в рабочей среде.

2. Настройте тестовый проект.

Создайте проект Firebase.

  1. Войдите в консоль Firebase, используя свою учетную запись Google.
  2. Нажмите кнопку, чтобы создать новый проект, а затем введите название проекта (например, Movie Review »).
  3. Нажмите «Продолжить» .
  4. Если появится запрос, ознакомьтесь с условиями использования Firebase и примите их, после чего нажмите «Продолжить» .
  5. (Необязательно) Включите помощь ИИ в консоли Firebase (в Firebase она называется "Gemini").
  6. Для этого практического занятия вам не понадобится Google Analytics, поэтому отключите эту опцию.
  7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

Скачать код

Выполните следующую команду, чтобы клонировать пример кода для этого практического занятия. В результате на вашем компьютере будет создана директория с именем codelab-dataconnect-android :

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

Если у вас нет Git на компьютере, вы также можете загрузить код напрямую с GitHub.

Добавить конфигурацию Firebase

  1. В консоли Firebase выберите «Обзор проекта» в левой панели навигации. Нажмите кнопку Android, чтобы выбрать платформу. При запросе имени пакета используйте com.google.firebase.example.dataconnect
  2. Нажмите «Зарегистрировать приложение» и следуйте инструкциям, чтобы загрузить файл google-services.json и переместить его в каталог app/ загруженного вами кода. Затем нажмите «Далее».

3. Настройка подключения к данным

Установка

Автоматическая установка

Выполните следующую команду в каталоге codelab-dataconnect-android :

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

Этот скрипт пытается настроить для вас среду разработки и запустить браузерную IDE. Эта IDE предоставляет инструменты, включая предварительно установленное расширение VS Code, которые помогут вам управлять схемой, определять запросы и мутации для использования в вашем приложении, а также генерировать строго типизированные SDK.

После запуска скрипта VS Code должен открыться автоматически.

Примечание: Если у вас уже установлена ​​настольная версия VS Code, скрипт должен открыть её автоматически. Если скрипт не сработает, воспользуйтесь описанными ниже шагами по ручной установке.

Ручная установка

  1. Установите Visual Studio Code.
  2. Установите Node.js
  3. В VS Code откройте каталог codelab-dataconnect-android .
  4. Установите расширение Firebase Data Connect из магазина расширений Visual Studio Code .

Инициализируйте подключение к данным в проекте.

В левой панели щелкните значок Firebase, чтобы открыть пользовательский интерфейс расширения Data Connect для VS Code:

  1. Нажмите кнопку « Войти через Google» . Откроется окно браузера; следуйте инструкциям, чтобы войти в расширение с помощью своей учетной записи Google. ef59f25a9e9cbfff.png
  2. Нажмите кнопку «Подключить проект Firebase» и выберите проект, созданный ранее в консоли. 951a836ba0682494.png

Нажмите кнопку «Запустить firebase init» и следуйте инструкциям во встроенном терминале.

Настройка генерации SDK

После нажатия кнопки «Запустить инициализацию Firebase» расширение Firebase Data Connect инициализирует для вас каталог dataconnect/ .

В VS Code откройте файл dataconnect/connector/connector.yaml , и вы найдете конфигурацию по умолчанию. Чтобы упростить визуализацию генерации кода в этом практическом занятии, измените connectorId на movies , а package на com.google.firebase.example.dataconnect.generated :

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

Чтобы понять, что означает каждый из этих пунктов:

  • connectorId — уникальное имя для этого коннектора.
  • outputDir — путь, куда будет сохранен сгенерированный SDK Data Connect. Этот путь является относительным к каталогу, содержащему файл connector.yaml.
  • package — имя пакета, которое будет использоваться в сгенерированном SDK.

Запустите эмуляторы Firebase

В VS Code нажмите кнопку «Запустить эмуляторы» .

93fb67962e96a7cb.png

Встроенный терминал должен показать запуск эмулятора. Если запуск пройден успешно, вы увидите примерно такой вывод:

8504ae0080923823.png

Настройте Android-приложение для использования локального эмулятора.

  1. Откройте Android Studio.
  2. На экране приветствия Android Studio нажмите кнопку «Открыть» и выберите каталог codelab-dataconnect-android . Дождитесь синхронизации Gradle.
  3. После завершения синхронизации Gradle откройте файл app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt и вызовите 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. Определите схему и предварительно заполните базу данных.

В этом разделе вы определите структуру и взаимосвязи между ключевыми сущностями в приложении для просмотра фильмов в схеме. Такие сущности, как Movie , User и Review , сопоставляются с таблицами базы данных, а взаимосвязи устанавливаются с помощью Firebase Data Connect и директив схемы GraphQL.

Основные сущности и взаимоотношения

Тип Movie содержит ключевые сведения, такие как название, жанр и теги, которые приложение использует для поиска и создания профилей фильмов. Тип User отслеживает взаимодействия пользователей, например, отзывы и добавление в избранное. Review связывает пользователей с фильмами, позволяя приложению отображать пользовательские оценки и отзывы.

Таблица пользователей

Тип «Пользователь» определяет сущность пользователя, который взаимодействует с фильмами, оставляя отзывы или добавляя фильмы в избранное.

В VS Code откройте файл dataconnect/schema/schema.gql и раскомментируйте (или добавьте) определение таблицы 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
}

Киностол

Тип «Фильм» определяет основную структуру объекта «Фильм», включая такие поля, как название, жанр, год выпуска и рейтинг.

В VS Code откройте файл dataconnect/schema/schema.gql и раскомментируйте (или добавьте) определение таблицы 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
}

Таблица метаданных фильмов

Тип MovieMetadata устанавливает однозначное соответствие с типом Movie. Он включает дополнительные данные, такие как режиссер фильма.

В VS Code откройте файл dataconnect/schema/schema.gql и раскомментируйте (или добавьте) определение таблицы 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
}

Таблица обзора

Тип «Отзыв» представляет собой сущность отзыва и связывает типы «Пользователь» и «Фильм» в отношении «многие ко многим» (один пользователь может оставить много отзывов, и у каждого фильма может быть много отзывов).

В VS Code откройте файл dataconnect/schema/schema.gql и раскомментируйте (или добавьте) определение таблицы 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")
}

Автоматически генерируемые поля и значения по умолчанию

Схема использует выражения типа @default(expr: "uuidV4()") для автоматической генерации уникальных идентификаторов и временных меток. Например, поле id в типах «Фильм» и «Отзыв» автоматически заполняется UUID при создании новой записи.

Вставьте фиктивные данные

После определения схемы вы можете предварительно заполнить базу данных тестовыми данными для проверки.

  1. В VS Code откройте dataconnect/moviedata_insert.gql . Убедитесь, что эмуляторы в расширении Firebase Data Connect запущены.
  2. В верхней части файла вы должны увидеть кнопку «Запустить (локально)». Нажмите на неё, чтобы вставить данные фиктивного фильма в вашу базу данных.

b070f025e573ab9b.png

  1. Проверьте терминал выполнения подключения данных, чтобы убедиться в успешном добавлении данных.

e2058cb4db857058.png

После того, как данные будут подготовлены, перейдите к следующему шагу, чтобы узнать, как создавать запросы в Data Connect.

5. Создайте запрос для вывода списка фильмов.

Для начала создайте запрос для получения списка фильмов. Для каждого фильма вам потребуется получить идентификатор, название, imageUrl и жанр.

Определите запрос

В VS Code откройте файл dataconnect/connector/queries.gql и раскомментируйте (или добавьте) запрос ListMovies :

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

Чтобы протестировать новый запрос, нажмите кнопку «Выполнить (локально)», чтобы выполнить запрос к вашей локальной базе данных. Список фильмов из базы данных должен отобразиться в разделе «Результат» терминала выполнения запроса Data Connect.

822bf32321df4716.png

Вызовите его из приложения для Android.

Теперь, когда вы протестировали запрос в эмуляторе Data Connect, пришло время добавить его в приложение.

В Android Studio откройте файл app/src/main/java/com/google/firebase/example/dataconnect/MoviesScreen.kt и добавьте следующий код для отображения списка фильмов в виде сетки: 

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())
                }
            )
        }
    }
}

Запустите приложение

В Android Studio нажмите кнопку «Запустить», чтобы запустить приложение в эмуляторе Android.

После запуска приложения вы увидите экран, который выглядит примерно так:

ddc52cd46f923cf1.png

6. Создайте запрос с подробными сведениями о фильме.

Теперь, когда приложение может отображать список фильмов, давайте создадим запрос для вывода подробной информации о каждом фильме.

Определите запрос

В VS Code откройте файл dataconnect/connector/queries.gql и раскомментируйте (или добавьте) запрос 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
      }
    }
  }
}

Вызовите его из приложения для Android.

В Android Studio откройте файл app/src/main/java/com/google/firebase/example/dataconnect/MovieDetailScreen.kt и добавьте следующий код: 

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,
        )
    }
}

Запустите приложение

В Android Studio нажмите кнопку «Запустить», чтобы запустить приложение в эмуляторе Android.

7. Создайте мутацию для добавления пользователей.

Теперь, когда приложение может отображать данные, пришло время добавить новые данные из приложения. Для безопасного выполнения этой задачи следует использовать аутентификацию Firebase.

В рамках данного практического занятия приложение использует анонимную аутентификацию для входа пользователей, но для повышения безопасности приложения рекомендуется использовать другой метод аутентификации, например, аутентификацию по электронной почте/паролю или федеративный поставщик идентификации.

Определите мутацию

В VS Code откройте файл dataconnect/connector/mutations.gql и раскомментируйте (или добавьте) запрос 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
    }
  )
}

Вызовите его из приложения для Android.

В Android Studio откройте файл app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt и вызовите мутацию: 

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)
  }
}

Запустите приложение

В Android Studio нажмите кнопку «Запустить», чтобы запустить приложение в эмуляторе Android.

8. Поздравляем!

Поздравляем, вы успешно добавили Firebase Data Connect в Android-приложение!

Теперь вы знаете основные шаги, необходимые для настройки Data Connect, создания запросов и мутаций, а также обработки аутентификации пользователей.

Что дальше?

Необязательно: развернуть в продакшене

На данный момент это приложение использует только эмуляторы Firebase. Если вы хотите узнать, как развернуть это приложение в реальном проекте Firebase, перейдите к следующему шагу.

9. (Необязательно) Разверните ваше приложение

До сих пор это приложение работало полностью локально, все данные хранились в Firebase Emulator Suite. В этом разделе вы узнаете, как настроить ваш проект Firebase, чтобы это приложение работало в продакшене.

Включить аутентификацию Firebase

В консоли Firebase перейдите в раздел «Аутентификация» и нажмите «Начать». Перейдите на вкладку «Метод входа» и выберите в списке поставщиков услуг вариант «Анонимный вход».

Включите анонимный вход и нажмите «Сохранить».

Разверните схему Firebase Data Connect.

Важно: Если вы впервые развертываете схему в своем проекте, в процессе будет создан экземпляр Cloud SQL PostgreSQL, что может занять около 15 минут. Вы не сможете развернуть схему, пока экземпляр Cloud SQL не будет готов и интегрирован с Firebase Data Connect.

  1. В пользовательском интерфейсе расширения Firebase Data Connect для VS Code нажмите «Развернуть в продакшене» .
  2. Вам может потребоваться проверить изменения схемы и утвердить потенциально деструктивные модификации. Вам будет предложено:
    • Проверьте изменения схемы с помощью firebase dataconnect:sql:diff
    • Когда вы будете удовлетворены внесенными изменениями, примените их, используя процесс, запущенный командой firebase dataconnect:sql:migrate

Ваш экземпляр Cloud SQL for PostgreSQL будет обновлен с использованием окончательно развернутой схемы и данных. Вы можете отслеживать статус в консоли Firebase.

Теперь вы можете нажать кнопку «Запустить (Производственная среда)» на панели Firebase Data Connect, как и в случае с локальными эмуляторами, чтобы добавить данные в производственную среду.