Сборка с помощью 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.
  • Как писать запросы и мутации для приложения для обзора фильмов.
  • Как создать Kotlin SDK и использовать его в приложении для Android.
  • (Необязательно) Как развернуть службу Data Connect в рабочей среде.

2. Настройте образец проекта

Создать проект Firebase

  1. Войдите в консоль Firebase под своей учетной записью Google.
  2. В консоли Firebase нажмите «Добавить проект».
  3. Введите имя своего проекта Firebase (например, «Обзор фильма») и нажмите «Продолжить».
  4. Вас могут попросить включить Google Analytics, для целей этой лаборатории ваш выбор не имеет значения.
  5. Примерно через минуту ваш проект Firebase будет готов. Нажмите Продолжить.

Загрузите код

Выполните следующую команду, чтобы клонировать пример кода для этой лаборатории кода. На вашем компьютере будет создан каталог 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
  2. Установите Node.js
  3. В VS Code откройте каталог codelab-dataconnect-android .
  4. Установите расширение Firebase Data Connect из Visual Studio Code Marketplace .

Инициализируйте Data Connect в проекте

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

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

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

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

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

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

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

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

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

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

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

93fb67962e96a7cb.png

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

8504ae0080923823.png

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

  1. Откройте Android-студию.
  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. Проверьте терминал Data Connect Execution, чтобы убедиться, что данные были успешно добавлены.

e2058cb4db857058.png

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

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

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

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

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

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

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

822bf32321df4716.png

Позвоните из приложения Android

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

В 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!

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

Что дальше

Необязательно: развертывание в рабочей среде

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

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

До сих пор это приложение было полностью локальным, все данные содержатся в пакете эмулятора Firebase. В этом разделе вы узнаете, как настроить проект 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 для PostgreSQL будет обновлен с учетом окончательной развернутой схемы и данных. Вы можете отслеживать статус в консоли Firebase.

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