Начните работу с Firebase Data Connect локально,Начните работу с Firebase Data Connect локально

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

  • Добавьте Firebase Data Connect в свой проект Firebase.
  • Настройте среду разработки, включая расширение Visual Studio Code, для работы с локальным экземпляром.
  • Тогда мы покажем вам, как:
    • Создание схемы для приложения для просмотра фильмов
    • Определите запросы и мутации , которые будут использоваться в вашем приложении.
    • Протестируйте свои запросы и мутации с помощью образцов данных на локальном эмуляторе.
    • Создавайте строго типизированные SDK и используйте их в своем приложении.
    • Разверните окончательную схему, запросы и данные в облаке (необязательно, при обновлении плана Blaze).

Выберите локальный поток разработки

Data Connect предлагает два способа установки инструментов разработки и работы локально.

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

Чтобы использовать это краткое руководство, вам понадобится следующее.

  • Проект Firebase. Если вы еще его не создали, сделайте это в консоли Firebase .

Настройка среды разработки

  1. Создайте новый каталог для вашего локального проекта.

  2. Запустите следующую команду в новом созданном каталоге.

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

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

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

Настройте каталог вашего проекта

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

  1. Нажмите кнопку «Войти через Google» .
  2. Нажмите кнопку «Подключить проект Firebase» и выберите в консоли проект, который вы создали ранее.
  3. Нажмите кнопку «Запустить инициализацию Firebase» .

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

Создать схему

В каталоге проекта Firebase в файле /dataconnect/schema/schema.gql начните определять схему GraphQL для фильмов.

Фильм

В Data Connect поля GraphQL сопоставляются со столбцами. У фильма есть id , title , imageUrl и genre . Data Connect распознает примитивные типы данных: String и UUID .

Скопируйте следующий фрагмент или раскомментируйте соответствующие строки в файле. 

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

ФильмМетаданные

Скопируйте следующий фрагмент или раскомментируйте соответствующие строки в файле.

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # This time, we omit adding a primary key because
  # you can rely on Data Connect to manage it.

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

Обратите внимание, что поле movie сопоставлено с типом Movie . Data Connect понимает, что это связь между Movie и MovieMetadata , и будет управлять этой связью за вас.

Дополнительные сведения о схемах Data Connect см. в документации.

Добавьте данные в свои таблицы

На панели редактора IDE вы увидите, что кнопки CodeLens появляются над типами GraphQL в /dataconnect/schema/schema.gql . Вы можете использовать кнопки «Добавить данные» и «Выполнить» (локально) для добавления данных в локальную базу данных.

Чтобы добавить записи в таблицы Movie и MovieMetadata :

  1. В schema.gql нажмите кнопку «Добавить данные» над объявлением типа Movie .
    Кнопка добавления данных CodeLens для Firebase Data Connect
  2. В созданном файле Movie_insert.gql содержатся данные жесткого кода для трех полей.
  3. Нажмите кнопку «Выполнить (локально)» .
    Кнопка запуска CodeLens для Firebase Data Connect
  4. Повторите предыдущие шаги, чтобы добавить запись в таблицу MovieMetadata , указав id вашего фильма в поле movieId , как это было предложено в созданной мутации MovieMetadata_insert .

Для быстрой проверки данных добавлено:

  1. Вернувшись в schema.gql , нажмите кнопку «Читать данные» над объявлением типа Movie .
  2. В полученном файле Movie_read.gql нажмите кнопку «Выполнить (локально)», чтобы выполнить запрос.

Узнайте больше о мутациях Data Connect в документации.

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

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

Однако GraphQL гораздо более краток и типобезопасен, чем чистый SQL. А наше расширение VS Code упрощает разработку.

Начните редактировать файл /dataconnect/connector/queries.gql . Если вы хотите получить все фильмы, используйте такой запрос.

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

Выполните запрос, используя расположенную рядом кнопку CodeLens.

По-настоящему интересной особенностью является возможность рассматривать отношения базы данных как граф. Поскольку запись MovieMetadata имеет поле movie , которое ссылается на фильм, вы можете вложить его в поле и получить обратно информацию о фильме. Попробуйте добавить сгенерированный тип movieMetadata_on_movie в запрос ListMovies .

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

Дополнительные сведения о запросах Data Connect см. в документации.

Создавайте SDK и используйте их в своем приложении.

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

  1. Нажмите кнопку «Добавить SDK в приложение» .

  2. В появившемся диалоговом окне выберите каталог, содержащий код вашего приложения. Data Connect . Код SDK будет сгенерирован и сохранен там.

  3. Выберите платформу своего приложения и обратите внимание, что код SDK сразу же создается в выбранном вами каталоге.

Узнайте, как использовать сгенерированный SDK для вызова запросов и мутаций из клиентских приложений ( веб , Android , iOS , Flutter ).

Разверните свою схему и запросите ее в рабочей среде

После того как у вас есть локальная настройка вашего приложения, вы можете развернуть свою схему, данные и запросы в облаке. Для настройки экземпляра Cloud SQL вам понадобится план Blaze.

  1. Перейдите в раздел «Подключение данных» консоли Firebase и создайте бесплатный пробный экземпляр Cloud SQL.

  2. В интегрированном в IDE терминале запустите firebase init dataconnect и выберите идентификатор региона/службы, который вы только что создали на консоли.

  3. Выберите «Y» при появлении запроса «Файл dataconnect/dataconnect.yaml уже существует, перезаписать?» .

  4. В пользовательском интерфейсе расширения VS Code нажмите кнопку «Развернуть в рабочую среду» .

  5. После развертывания перейдите в консоль Firebase чтобы убедиться, что схема, операции и данные загружены в облако. У вас должна быть возможность просматривать схему и выполнять операции на консоли. Экземпляр Cloud SQL для PostgreSQL будет обновлен с учетом окончательной развернутой сгенерированной схемы и данных.

Следующие шаги

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

  • Добавляйте данные в свою базу данных, проверяйте и изменяйте свои схемы, а также отслеживайте работу службы Data Connect в консоли Firebase .

Дополнительную информацию можно найти в документации. Например, после завершения краткого руководства:

,

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

  • Добавьте Firebase Data Connect в свой проект Firebase.
  • Настройте среду разработки, включая расширение Visual Studio Code, для работы с локальным экземпляром.
  • Тогда мы покажем вам, как:
    • Создание схемы для приложения для просмотра фильмов
    • Определите запросы и мутации , которые будут использоваться в вашем приложении.
    • Протестируйте свои запросы и мутации с помощью образцов данных на локальном эмуляторе.
    • Создавайте строго типизированные SDK и используйте их в своем приложении.
    • Разверните окончательную схему, запросы и данные в облаке (необязательно, при обновлении плана Blaze).

Выберите локальный поток разработки

Data Connect предлагает два способа установки инструментов разработки и работы локально.

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

Чтобы использовать это краткое руководство, вам понадобится следующее.

  • Проект Firebase. Если вы еще его не создали, сделайте это в консоли Firebase .

Настройка среды разработки

  1. Создайте новый каталог для вашего локального проекта.

  2. Запустите следующую команду в новом созданном каталоге.

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

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

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

Настройте каталог вашего проекта

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

  1. Нажмите кнопку «Войти через Google» .
  2. Нажмите кнопку «Подключить проект Firebase» и выберите в консоли проект, который вы создали ранее.
  3. Нажмите кнопку «Запустить инициализацию Firebase» .

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

Создать схему

В каталоге проекта Firebase в файле /dataconnect/schema/schema.gql начните определять схему GraphQL для фильмов.

Фильм

В Data Connect поля GraphQL сопоставляются со столбцами. У фильма есть id , title , imageUrl и genre . Data Connect распознает примитивные типы данных: String и UUID .

Скопируйте следующий фрагмент или раскомментируйте соответствующие строки в файле. 

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

ФильмМетаданные

Скопируйте следующий фрагмент или раскомментируйте соответствующие строки в файле.

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # This time, we omit adding a primary key because
  # you can rely on Data Connect to manage it.

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

Обратите внимание, что поле movie сопоставлено с типом Movie . Data Connect понимает, что это связь между Movie и MovieMetadata , и будет управлять этой связью за вас.

Дополнительные сведения о схемах Data Connect см. в документации.

Добавьте данные в свои таблицы

На панели редактора IDE вы увидите, что кнопки CodeLens появляются над типами GraphQL в /dataconnect/schema/schema.gql . Вы можете использовать кнопки «Добавить данные» и «Выполнить» (локально) для добавления данных в локальную базу данных.

Чтобы добавить записи в таблицы Movie и MovieMetadata :

  1. В schema.gql нажмите кнопку «Добавить данные» над объявлением типа Movie .
    Кнопка добавления данных CodeLens для Firebase Data Connect
  2. В созданном файле Movie_insert.gql содержатся данные жесткого кода для трех полей.
  3. Нажмите кнопку «Выполнить (локально)» .
    Кнопка запуска CodeLens для Firebase Data Connect
  4. Повторите предыдущие шаги, чтобы добавить запись в таблицу MovieMetadata , указав id вашего фильма в поле movieId , как это было предложено в созданной мутации MovieMetadata_insert .

Для быстрой проверки данных добавлено:

  1. Вернувшись в schema.gql , нажмите кнопку «Читать данные» над объявлением типа Movie .
  2. В полученном файле Movie_read.gql нажмите кнопку «Выполнить (локально)», чтобы выполнить запрос.

Узнайте больше о мутациях Data Connect в документации.

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

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

Однако GraphQL гораздо более краток и типобезопасен, чем чистый SQL. А наше расширение VS Code упрощает разработку.

Начните редактировать файл /dataconnect/connector/queries.gql . Если вы хотите получить все фильмы, используйте такой запрос.

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

Выполните запрос, используя расположенную рядом кнопку CodeLens.

По-настоящему интересной особенностью является возможность рассматривать отношения базы данных как граф. Поскольку запись MovieMetadata имеет поле movie , которое ссылается на фильм, вы можете вложить его в поле и получить обратно информацию о фильме. Попробуйте добавить сгенерированный тип movieMetadata_on_movie в запрос ListMovies .

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

Дополнительные сведения о запросах Data Connect см. в документации.

Создавайте SDK и используйте их в своем приложении.

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

  1. Нажмите кнопку «Добавить SDK в приложение» .

  2. В появившемся диалоговом окне выберите каталог, содержащий код вашего приложения. Data Connect . Код SDK будет сгенерирован и сохранен там.

  3. Выберите платформу своего приложения и обратите внимание, что код SDK сразу же создается в выбранном вами каталоге.

Узнайте, как использовать сгенерированный SDK для вызова запросов и мутаций из клиентских приложений ( веб , Android , iOS , Flutter ).

Разверните свою схему и запросите ее в рабочей среде

После того как у вас есть локальная настройка вашего приложения, вы можете развернуть свою схему, данные и запросы в облаке. Для настройки экземпляра Cloud SQL вам понадобится план Blaze.

  1. Перейдите в раздел «Подключение данных» консоли Firebase и создайте бесплатный пробный экземпляр Cloud SQL.

  2. В интегрированном в IDE терминале запустите firebase init dataconnect и выберите идентификатор региона/службы, который вы только что создали на консоли.

  3. Выберите «Y» при появлении запроса «Файл dataconnect/dataconnect.yaml уже существует, перезаписать?» .

  4. В пользовательском интерфейсе расширения VS Code нажмите кнопку «Развернуть в производство» .

  5. После развертывания перейдите в консоль Firebase чтобы убедиться, что схема, операции и данные загружены в облако. У вас должна быть возможность просматривать схему и выполнять операции на консоли. Экземпляр Cloud SQL для PostgreSQL будет обновлен с учетом окончательной развернутой сгенерированной схемы и данных.

Следующие шаги

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

  • Добавляйте данные в свою базу данных, проверяйте и изменяйте свои схемы, а также отслеживайте работу службы Data Connect в консоли Firebase .

Дополнительную информацию можно найти в документации. Например, после завершения краткого руководства: