로컬에서 Firebase Data Connect 시작하기

이 빠른 시작에서는 Firebase Data Connect를 빌드하는 방법을 알아봅니다. 프로덕션 SQL 인스턴스를 설정하지 않고 로컬에서 애플리케이션을 빌드할 수 있습니다.

  • Firebase 프로젝트에 Firebase Data Connect를 추가합니다.
  • Visual Studio를 포함한 개발 환경 설정 로컬 인스턴스에서 작동하는 코드 확장 프로그램
  • 그리고 다음 작업을 수행하는 방법을 보여드리겠습니다. <ph type="x-smartling-placeholder">
      </ph>
    • 영화 앱의 스키마 만들기
    • 앱에서 사용할 쿼리 및 변형 정의
    • 로컬 에뮬레이터에서 샘플 데이터를 사용하여 쿼리 및 변형을 테스트합니다.
    • 강력한 유형의 SDK를 생성하고 앱에서 사용
    • 최종 스키마, 쿼리, 데이터를 클라우드에 배포합니다 (선택사항, Blaze 요금제 필요).

기본 요건

이 빠른 시작을 사용하려면 다음이 필요합니다.

개발 환경 설정

스키마를 관리하고 애플리케이션에 사용될 쿼리를 정의하려면 Visual Studio Code가 필요하며, 강력한 유형의 SDK가 자동으로 생성됩니다.

  1. 로컬 프로젝트의 새 디렉터리를 만듭니다.
  2. 새 디렉터리에서 VS Code를 엽니다.
  3. Visual Studio Code Marketplace에서 Firebase Data Connect 확장 프로그램을 설치합니다.

프로젝트 디렉터리 설정

로컬 프로젝트를 설정하려면 프로젝트 디렉터리를 초기화합니다. VS Code에서 왼쪽 패널에서 Firebase 아이콘을 클릭하여 Data Connect VS Code 확장 프로그램 UI:

  1. Google 계정으로 로그인 버튼을 클릭합니다.
  2. Firebase 프로젝트 연결 버튼을 클릭하고 연결할 프로젝트를 선택합니다. 확인할 수 있습니다
  3. firebase init 실행 버튼을 클릭합니다.

  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님이 이 관계를 관리하게 됩니다.

문서에서 데이터 연결 스키마 자세히 알아보기

표에 데이터 추가

VS Code 편집기 패널에 /dataconnect/schema/schema.gql의 GraphQL 유형 위에 CodeLens 버튼이 표시됩니다. 데이터 추가 Run (Local) 버튼은 데이터를 로컬 데이터베이스에 추가합니다.

레코드를 Movie 및 MovieMetadata 테이블에 추가하려면 다음 안내를 따르세요.

  1. schema.gql에서 Movie 유형 선언 위의 데이터 추가 버튼을 클릭합니다.
    Firebase Data Connect용 코드 렌즈 데이터 추가 버튼
  2. 생성된 Movie_insert.gql 파일에서 필드 3개가 있습니다.
  3. Run (Local)(실행(로컬)) 버튼을 클릭합니다.
    Firebase Data Connect의 Code Lens 실행 버튼
  4. 이전 단계를 반복하여 MovieMetadata 테이블에 레코드를 추가하고 생성된 MovieMetadata_insert 변형에서 메시지에 따라 movie 필드에 영화의 uid를 제공합니다.

데이터가 추가되었는지 빠르게 확인하려면 다음 단계를 따르세요.

  1. schema.gql로 돌아가 데이터 읽기 버튼을 클릭합니다.
  2. 생성된 Movie_read.gql 파일에서 Run (Local) 버튼을 클릭하여 쿼리를 실행합니다.

문서에서 데이터 연결 변형에 대해 자세히 알아보기

검색어 정의

이제 재미있는 부분입니다. 애플리케이션에 필요한 쿼리를 정의해 보겠습니다. 개발자는 GraphQL 쿼리 대신 SQL 쿼리를 작성하는 데 익숙하므로 처음에는 약간 다르게 느껴질 수 있습니다. 그러나 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를 생성하여 앱에서 사용

VS Code 왼쪽 패널에서 Firebase 아이콘을 클릭하여 Data Connect VS Code 확장 프로그램 UI:

  1. Add SDK to app(앱에 SDK 추가) 버튼을 클릭합니다.

  2. 대화상자가 나타나면 코드가 포함된 디렉터리를 선택합니다. 할 수 있습니다. Data Connect SDK 코드가 생성되고 있습니다.

  3. 앱 플랫폼을 선택합니다. SDK 코드는 즉시 모든 포드를 표시합니다

생성된 SDK를 사용하여 클라이언트 앱(웹, Android, iOS, Flutter)에서 쿼리 및 변형을 호출하는 방법을 알아봅니다.

스키마 및 쿼리를 프로덕션에 배포

앱에 로컬 설정을 완료했으면 이제 스키마, 데이터, 쿼리를 클라우드에 배포할 수 있습니다. Blaze 요금제를 사용해야 합니다. Cloud SQL 인스턴스

  1. Firebase 콘솔의 데이터 연결 섹션으로 이동하여 Cloud SQL 인스턴스를 무료 체험판으로 사용하세요

  2. VS Code 통합 터미널에서 firebase init dataconnect를 실행하고 방금 콘솔에서 만든 리전/서비스 ID를 선택합니다.

  3. '파일 dataconnect/dataconnect.yaml이 이미 존재합니다. 덮어쓰시겠습니까?'라는 메시지가 표시되면 'Y'를 선택합니다.

  4. Data Connect VS Code 확장 프로그램 UI에서 프로덕션에 배포를 클릭합니다. 버튼을 클릭합니다.

  5. 배포가 완료되면 Firebase 콘솔로 이동하여 스키마, 작업, 데이터가 클라우드에 업로드되었는지 확인합니다. 스키마를 확인하고 콘솔에서 작업을 실행할 수도 있습니다. PostgreSQL용 Cloud SQL 인스턴스가 최종 버전으로 업데이트됩니다. 스키마와 데이터를 배포합니다

다음 단계

배포된 프로젝트를 검토하고 더 많은 도구를 탐색하세요.

  • Firebase Console에서 데이터베이스에 데이터를 추가하고, 스키마를 검사 및 수정하고, Data Connect 서비스를 모니터링합니다.

문서에서 자세한 내용을 확인하세요. 예를 들어 빠른 시작을 완료했습니다.