생성된 Flutter SDK 사용

Firebase Data Connect 클라이언트 SDK를 사용하면 Firebase 앱에서 직접 서버 측 쿼리와 변형을 호출할 수 있습니다. Data Connect 서비스에 배포하는 스키마, 쿼리, 변형을 설계할 때 동시에 맞춤 클라이언트 SDK를 생성합니다. 그런 다음 이 SDK의 메서드를 클라이언트 로직에 통합합니다.

다른 곳에서 언급했듯이 Data Connect 쿼리 및 변형은 클라이언트 코드에서 제출되지 않으며 서버에서 실행됩니다. 대신 배포 시 Data Connect 작업은 Cloud Functions와 같이 서버에 저장됩니다. 즉, 기존 사용자를 손상시키지 않도록 (예: 이전 앱 버전) 상응하는 클라이언트 측 변경사항을 배포해야 합니다.

그렇기 때문에 Data Connect는 서버에 배포된 스키마, 쿼리, 변형의 프로토타입을 만들 수 있는 개발자 환경과 도구를 제공합니다. 또한 프로토타입을 만드는 동안 클라이언트 측 SDK를 자동으로 생성합니다.

서비스 및 클라이언트 앱 업데이트를 반복한 후에는 서버 측 업데이트와 클라이언트 측 업데이트를 모두 배포할 수 있습니다.

클라이언트 개발 워크플로는 무엇인가요?

시작하기를 따랐다면 Data Connect의 전반적인 개발 흐름을 알아봤습니다. 이 가이드에서는 스키마에서 Flutter SDK를 생성하고 클라이언트 쿼리 및 변형을 사용하는 방법에 관해 자세히 설명합니다.

요약하자면 클라이언트 앱에서 생성된 Flutter SDK를 사용하려면 다음과 같은 기본 단계를 따르세요.

  1. Flutter 앱에 Firebase를 추가합니다.
  2. flutterfire CLI dart pub global activate flutterfire_cli를 설치합니다.
  3. flutterfire configure를 실행합니다.

그런 다음 아래를 실행합니다.

  1. 앱 스키마를 개발합니다.

  2. SDK 생성 설정:

  3. 클라이언트 코드 초기화 및 라이브러리 가져오기

  4. 쿼리 호출 및 변형을 구현합니다.

  5. Data Connect 에뮬레이터를 설정하고 사용하고 반복합니다.

Flutter SDK 생성

대부분의 Firebase 프로젝트와 마찬가지로 Firebase Data Connect 클라이언트 코드 작업은 로컬 프로젝트 디렉터리에서 이루어집니다. Data Connect VS Code 확장 프로그램과 Firebase CLI는 모두 클라이언트 코드를 생성하고 관리하는 데 중요한 로컬 도구입니다.

SDK 생성 옵션은 프로젝트를 초기화할 때 생성된 dataconnect.yaml 파일의 여러 항목에 키가 지정됩니다.

SDK 생성 초기화

connector.yaml에서 outputDir, package, 웹 SDK의 경우 packageJsonDir를 추가합니다. 
connectorId: movies
generate:
  dartSdk:
    outputDir: ../../lib/generated # Feel free to change this to a different path
    package: movies

outputDir는 생성된 SDK를 출력할 위치를 지정합니다. 이 경로는 connector.yaml 파일 자체가 포함된 디렉터리를 기준으로 합니다. 원하는 경우 outputDir의 절대 경로를 제공할 수 있습니다.

package은 패키지 이름을 지정합니다.

프로토타입 제작 중에 SDK 업데이트

Data Connect VS Code 확장 프로그램 및 Data Connect 에뮬레이터로 대화형으로 프로토타입을 제작하는 경우 스키마, 쿼리, 변형을 정의하는 .gql 파일을 수정하는 동안 SDK 소스 파일이 자동으로 생성되고 업데이트됩니다. 이 기능은 핫 (재)로드 워크플로에 유용할 수 있습니다.

다른 시나리오에서는 Firebase CLI에서 Data Connect 에뮬레이터를 사용하는 경우 .gql 업데이트에 워치를 설정하고 SDK 소스를 자동으로 업데이트할 수 있습니다.

또는 .gql 파일이 변경될 때마다 CLI를 사용하여 SDK를 다시 생성할 수 있습니다.

firebase dataconnect:sdk:generate --watch

통합 및 프로덕션 출시용 SDK 생성

CI 테스트를 위해 제출할 프로젝트 소스를 준비하는 등의 시나리오에서는 Firebase CLI를 호출하여 일괄 업데이트할 수 있습니다.

이러한 경우에는 firebase dataconnect:sdk:generate를 사용합니다.

클라이언트 코드 설정

Data Connect 앱 초기화

먼저 표준 Firebase 설정 안내에 따라 앱을 초기화합니다.

그런 다음 Data Connect 플러그인을 설치합니다.

flutter pub add firebase_data_connect

Data Connect Flutter SDK 초기화

Data Connect를 설정하는 데 사용한 정보를 사용하여 Data Connect 인스턴스를 초기화합니다 (Firebase 콘솔의 Data Connect 탭에서 모두 사용 가능).

라이브러리 가져오기

클라이언트 코드를 초기화하는 데 필요한 두 가지 가져오기 세트, 즉 일반 Data Connect 가져오기와 생성된 특정 SDK 가져오기가 있습니다.

// general imports
import 'package:firebase_data_connect/firebase_data_connect.dart';

// generated queries and mutations from SDK
import 'generated/movies.dart';

클라이언트 측에서 쿼리 사용

생성된 코드에는 사전 정의된 쿼리 참조가 이미 포함되어 있습니다. execute를 가져와서 호출하기만 하면 됩니다.

import 'generated/movies.dart';

await MoviesConnector.instance.listMovies().execute();

SDK 쿼리 메서드 호출

다음은 이러한 작업 바로가기 함수를 사용하는 예입니다.

import 'generated/movies.dart';

function onBtnClick() {
  // This will call the generated Dart from the CLI and then make an HTTP request to the server.
  MoviesConnector.instance.listMovies().execute().then(data => showInUI(data)); // == MoviesConnector.instance.listMovies().ref().execute();
}

선택 필드

일부 쿼리에는 선택사항 필드가 있을 수 있습니다. 이 경우 Flutter SDK는 빌더 메서드를 노출하며 별도로 설정해야 합니다.

예를 들어 createMovie를 호출할 때 rating 필드는 선택사항이므로 빌더 함수에서 제공해야 합니다.

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi"}).rating(5).execute();

변경사항 구독

변경사항을 구독할 수 있으며, 변경사항은 쿼리를 실행할 때마다 업데이트됩니다.

QueryRef<ListMoviesData, void> listRef = MoviesConnector.instance.listMovies().ref();

// subscribe will immediately invoke the query if no execute was called on it previously.
listRef.subscribe().listen((data) {
  updateUIWithMovies(data.movies);
});

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();
await listRef.execute(); // will update the subscription above`

클라이언트 측에서 변형 사용

변형은 쿼리와 동일한 방식으로 액세스할 수 있습니다.

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();

Flutter 앱 프로토타입 제작 및 테스트

로컬 에뮬레이터를 사용하도록 클라이언트 계측

Data Connect VS Code 확장 프로그램 또는 CLI에서 Data Connect 에뮬레이터를 사용할 수 있습니다.

에뮬레이터에 연결하도록 앱을 계측하는 방법은 두 시나리오 모두 동일합니다.

import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'generated/movies.dart';

MoviesConnector.instance.dataConnect
          .useDataConnectEmulator('127.0.0.1', 9399);

// Make calls from your app
QueryRef<ListMoviesData, void> ref = MoviesConnector.instance.listMovies.ref();

프로덕션 리소스로 전환하려면 에뮬레이터에 연결하는 선을 주석 처리합니다.

Dart SDK의 데이터 유형

Data Connect 서버는 일반적인 GraphQL 데이터 유형을 나타냅니다. 이는 SDK에서 다음과 같이 표현됩니다.

데이터 연결 유형 Dart
타임스탬프 firebase_data_connect.Timestamp
정수 (32비트) int
날짜 DateTime
UUID 문자열
Int64 int
부동 소수점 수 double
불리언 부울
모두 firebase_data_connect.AnyValue