Firebase Data Connect 시작하기

이 빠른 시작에서는 다음과 같은 방법을 학습합니다.

• Firebase 프로젝트에 Firebase 데이터 연결을 추가합니다.
• 프로덕션 인스턴스에서 작동하도록 Visual Studio Code 확장 프로그램을 포함한 개발 환경을 설정합니다.
• 다음 방법에 대한 안내가 제공됩니다.
  • 이메일 앱 예를 사용하여 스키마를 만듭니다.
  • 스키마의 쿼리 및 변형을 정의합니다.
  • 자동 생성된 SDK를 사용하여 클라이언트에서 이러한 쿼리와 변형을 호출합니다.
  • 최종 프로토타입을 프로덕션에 배포합니다.

기본 요건

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

• Linux, macOS 또는 Windows
• Visual Studio Code

프로젝트에 데이터 연결을 추가하고 데이터 소스 만들기

1. 아직 Firebase 프로젝트를 만들지 않았다면 지금 만듭니다.
   1. Firebase Console에서 프로젝트 추가를 클릭한 후 화면에 표시된 안내를 따릅니다.

2. 프로젝트를 Blaze 요금제로 업그레이드합니다. 이렇게 하면 PostgreSQL용 Cloud SQL 인스턴스를 만들 수 있습니다.

3. Firebase Console의 데이터 연결 섹션으로 이동하여 제품 설정 워크플로를 따릅니다.

4. PostgreSQL용 CloudSQL 데이터베이스의 위치를 선택합니다.

5. 나중에 확인할 수 있도록 프로젝트, 서비스, 데이터베이스 이름과 ID를 기록해 둡니다.

6. 나머지 설정 단계를 따른 다음 완료를 클릭합니다.

개발 환경 선택 및 설정

먼저 Visual Studio Code에서 앱의 프로토타입을 제작하여 데이터 연결을 시작합니다.

원하는 경우 데이터 연결 에뮬레이터를 사용한 로컬 개발을 위해 로컬 PostgreSQL 데이터베이스를 설치할 수 있습니다. 이 설정은 빠른 시작 가이드 끝부분에서 다룹니다.

Data Connect는 프로토타입 제작을 위한 두 가지 개발 환경을 지원합니다.

• 웹 또는 Kotlin Android 개발자는 PostgreSQL용 Cloud SQL 인스턴스에 연결하는 동안 로컬에서 스키마 및 작업의 프로토타입을 제작하거나 선택적으로 PostgreSQL을 로컬에서 실행할 수 있습니다.

• 웹 개발자는 IDX를 사용하여 PostgreSQL로 사전 구성된 IDX 템플릿, Data Connect 에뮬레이터가 있는 VS Code 확장 프로그램, 자동으로 설정된 빠른 시작 코드를 사용하여 IDX 작업공간에서 프로토타입을 제작할 수 있습니다.

로컬 프로젝트 설정

일반 안내에 따라 CLI를 설치합니다.

그런 다음 Firebase 데이터 연결 실험을 사용 설정합니다.

firebase experiments:enable dataconnect

로컬 프로젝트를 설정하기 위해 프로젝트 디렉터리를 초기화하고 코드 생성에 필요한 몇 가지 구성 파일을 업데이트합니다.

프로젝트 디렉터리 설정

프로젝트 디렉터리를 초기화합니다.

두 흐름 모두 firebase.json 및 .firebaserc 파일과 dataconnect 하위 디렉터리(중요한 dataconnect.yaml 및 connector.yaml 파일 포함)를 로컬 작업 디렉터리에 만듭니다.

SDK 코드가 생성되는 위치 구성

스키마를 수정하는 동안 Data Connect에서 자동으로 SDK 코드를 생성합니다.

SDK가 생성되는 위치를 지정하려면 dataconnect/connector/connector.yaml에서 초기 커넥터의 파일을 업데이트합니다.

connectorId: "my-connector"
authMode: "PUBLIC"
generate:
  javascriptSdk:
    outputDir: "../../js-email-generated"
    package: "@email-manager/emails"
    packageJsonDir: "../../"
  kotlinSdk:
    outputDir: "../kotlin-email-generated"
    package: com.myemailapplication

데이터 연결 도구함 익히기

Data Connect 도구 키트는 Visual Studio Code에서 직접 스키마 개발, 쿼리, 변형 관리를 지원하는 Firebase VS Code 확장 프로그램의 구성요소입니다.

도구함 기능을 살펴보려면 다음 단계를 따르세요.

1. 아직 열지 않았다면 VS Code에서 Firebase 프로젝트 디렉터리를 엽니다.
2. VS Code의 왼쪽 패널에서 Firebase 아이콘을 클릭하여 Firebase VS Code 확장 프로그램 UI를 엽니다.

개발 작업 전반에 걸쳐 도구함을 사용하면 프로덕션 리소스뿐만 아니라 로컬 환경과도 상호작용할 수 있습니다. 이 빠른 시작에서는 프로덕션 환경과 상호작용합니다.

확장 프로그램 UI는 여러 가지 유용한 기능을 제공합니다.

VS Code 기본 사이드바에서:

기본 사이드바

• Config 패널: Google에 로그인하고 Firebase 프로젝트를 선택할 수 있습니다.
• Firebase 데이터 연결 패널: 기본 제공 에뮬레이터를 제어하고 리소스를 프로덕션에 배포할 수 있습니다.
• 스키마를 기반으로 자동으로 생성된 암시적 쿼리와 변형을 나열하는 FDC 탐색기 패널

VS Code 하단 패널에서:

하단 패널

• Data Connect Execution(데이터 연결 실행) 탭: 요청에 데이터를 전달하고, 인증을 모방하고, 결과를 볼 수 있는 도구가 포함되어 있습니다.

앱 개발을 시작하기 전에 확장 프로그램의 몇 가지 기능을 살펴보겠습니다.

데이터 연결 스키마 및 쿼리 만들기

설정이 완료되었습니다. 이제 데이터 연결을 사용하여 개발을 시작할 수 있습니다.

GraphQL을 사용하여 사용자 및 이메일 모델링을 시작하세요. 다음 언어로 매체를 업데이트합니다.

• /dataconnect/schema/schema.gql
• /dataconnect/connector/queries.gql

스키마 개발 시작

Firebase 프로젝트 디렉터리에서 dataconnect 폴더를 확인합니다. 여기에서 GraphQL을 사용하여 Cloud SQL 데이터베이스의 데이터 모델을 정의합니다.

/dataconnect/schema/schema.gql 파일에서 사용자와 이메일을 포함하는 스키마를 정의합니다.

사용자

데이터 연결에서 GraphQL 필드는 열에 매핑됩니다. 사용자에게는 uid, name, 이메일 address이 있습니다. 데이터 연결은 여러 기본 데이터 유형(String 및 Date)을 인식합니다.

다음 스니펫을 복사하거나 파일에서 해당 줄의 주석 처리를 삭제합니다.

# File `/dataconnect/schema/schema.gql`

type User @table(key: "uid") {
   uid: String!
   name: String!
   address: String!
}

기본적으로 Firebase 데이터 연결은 UUID id 키를 제공하지 않으면 추가합니다. 그러나 이 경우에는 uid를 기본 키로 사용하고자 하며, 이는 @table(key: "uid") 지시어를 통해 할 수 있습니다.

이메일

이제 사용자가 있으므로 이메일을 모델링할 수 있습니다. 여기에서 이메일 데이터의 일반적인 필드 (또는 열)를 추가할 수 있습니다. 데이터 연결을 사용하여 관리할 수 있으므로 이번에는 기본 키 추가를 생략합니다.

# File `/dataconnect/schema/schema.gql`

type Email @table {
   subject: String!
   date: Date!
   text: String!
   from: User!
}

from 필드는 User 유형에 매핑됩니다. Data Connect는 Email과(와) User 간의 관계임을 이해하고 이 관계를 관리합니다.

프로덕션에 스키마 배포

Firebase VS Code 확장 프로그램을 사용하여 프로덕션 데이터베이스로 작업하고 있으므로 계속하기 전에 스키마를 배포해야 합니다.

1. Firebase VS Code 확장 프로그램을 사용하여 배포할 수 있습니다.
   • 확장 프로그램 UI의 Firebase 데이터 연결 패널에서 배포를 클릭합니다.

2. 또는 Firebase CLI를 사용할 수 있습니다.

   firebase deploy
   

3. 확장 프로그램 또는 CLI 흐름에서 스키마 변경사항을 검토하고 잠재적으로 파괴적인 수정사항을 승인해야 할 수 있습니다. 다음 작업을 수행하라는 메시지가 표시됩니다.

   • firebase dataconnect:sql:diff를 사용하여 스키마 변경사항 검토
   • 변경사항이 만족스러우면 firebase dataconnect:sql:migrate에서 시작된 흐름을 사용하여 변경사항을 적용합니다.

생성된 스키마 확장 확인

이메일 스키마를 수정하면 Data Connect에서 스키마 확장 프로그램, 쿼리, 변형, 필터, 테이블 관계를 자동으로 생성합니다. 이렇게 생성된 코드는 두 가지 방법으로 볼 수 있습니다.

• Firebase 확장 프로그램 UI의 FDC 탐색기 패널에서 생성된 암시적 쿼리 및 변형의 목록을 확인할 수 있습니다.
• .dataconnect/schema 디렉터리의 소스에서 로컬 생성된 모든 코드를 볼 수 있습니다.

변형을 실행하여 테이블에 데이터 추가

CodeLens 버튼이 /dataconnect/schema/schema.gql의 GraphQL 유형 위에 표시됩니다.

개발 시간 쿼리 및 변형

이러한 CodeLens 버튼과 연결된 작업은 빠르고 유용한 작업입니다. 이 경우 데이터를 테이블에 추가하는 작업입니다. Data Connect는 GraphQL 변형을 사용하여 데이터베이스에 대한 작업 방법과 사용자를 설명합니다. 이 버튼을 사용하면 빠른 데이터 시드를 위한 개발 시간 작업이 생성됩니다.

스키마를 프로덕션에 배포한 후에는 실행 (프로덕션) CodeLens 버튼을 사용하여 백엔드에서 이러한 작업을 수행할 수 있습니다.

쿼리를 작성하여 이메일 나열하기

이제 흥미로운 점은 쿼리입니다. 개발자는 GraphQL 쿼리보다는 SQL 쿼리를 작성하는 데 익숙하므로 처음에는 약간 달라진 느낌이 들 수 있습니다. 그러나 GraphQL은 원시 SQL보다 훨씬 간결하고 유형 안전성이 높습니다. 또한 VS Code 확장 프로그램을 통해 개발 환경이 수월해집니다.

/dataconnect/connector/queries.gql 파일 수정을 시작합니다. 모든 이메일을 가져오려면 다음과 같은 쿼리를 사용하세요.

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

query listEmails @auth(level: PUBLIC) {
  emails {
    id, subject, text, date
    from {
      name
    }
  }
}

여기서 정말 흥미로운 기능은 데이터베이스의 관계를 그래프처럼 취급하는 기능입니다. 이메일에 사용자를 참조하는 from 필드가 있으므로 필드에 중첩하여 사용자에 대한 정보를 다시 가져올 수 있습니다.

@auth 지시어

이 예에서는 @auth 지시어가 최대한 활용되지는 않지만 개념은 매우 강력합니다. 이는 데이터베이스 작업에 대한 승인 정책을 결정하는 방법입니다.

이 쿼리는 매우 간단합니다. 다대다 관계로 더 복잡한 조인을 수행할 때 Data Connect의 흥미로운 기능이 빛을 발하기 시작합니다. 이에 관해서는 도구와 문서를 살펴보면서 자세히 알아보게 됩니다.

쿼리 테스트

이제 이 쿼리를 만들었으므로 클라이언트 코드에 통합하기 전에 쿼리가 작동하는지 확인합니다. 데이터 연결 개발자 환경에는 데이터 연결 실행 패널을 사용하여 쿼리 결과를 빠르게 반복하고 테스트할 수 있는 기능이 포함되어 있습니다.

이 쿼리에 필요한 인수를 제공한 후 쿼리 이름 위에 있는 CodeLens 버튼을 클릭할 수 있습니다. 그러면 쿼리가 실행되고 결과가 표시되므로 예상대로 작동하는지 확인할 수 있습니다.

클라이언트 SDK 코드 생성 및 클라이언트 앱에서 데이터 쿼리

개발 주기를 마무리하려면 이 쿼리를 클라이언트 코드에 통합하세요.

쿼리를 호출하고 Data Connect 서비스에서 응답을 처리하는 방법을 보여주는 클라이언트를 작성할 수 있습니다.

1. 이전에 connector.yaml 파일에서 지정한 위치에서 자동 생성된 소스를 찾습니다.

2. 프로젝트에 Firebase를 추가하고 앱을 등록한 다음 관련 Firebase Core SDK를 설치합니다.

   • JavaScript의 경우 이 안내를 따르세요.
   • Kotlin의 경우 이 안내를 따르세요.

3. IDX를 사용하지 않는 경우 명령줄에서 호출 가능한 클라이언트를 설정할 수 있습니다.

const { initializeApp } = require("firebase/app");
const {
  connectDataConnectEmulator,
  getDataConnect,
} = require("firebase/data-connect");
const { listEmails, connectorConfig } = require("@email-manager/emails");

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const dc = getDataConnect(app, connectorConfig);

// Remove the following line to connect directly to production
connectDataConnectEmulator(dc, "localhost", 9399);

listEmails().then(res => {
  console.log(res.data.emails);
  process.exit(0);
});
    

    node clientTest.js
    

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    lifecycleScope.launch {
      val connector = MyConnector.instance
      connector.dataConnect.useEmulator() // Remove to connect to production
      try {
        println(connector.listEmails.execute().data.emails)
      } catch (e: Throwable) {
        println("ERROR: $e")
      }
    }
  }
}
    

완성된 프로토타입을 프로덕션에 배포

개발 반복을 거쳤습니다. 이제 스키마에서와 마찬가지로 Firebase Extensions UI 또는 Firebase CLI를 사용하여 스키마, 데이터, 쿼리, 변형을 서버에 배포할 수 있습니다.

배포된 데이터 연결 서비스는 클라이언트의 작업을 처리할 준비가 된 것입니다. PostgreSQL용 Cloud SQL 인스턴스가 배포된 최종 스키마 및 데이터로 업데이트됩니다.

(선택사항) 로컬에 PostgreSQL 설치

PostgreSQL을 로컬에 설치하고 에뮬레이터와 통합하면 완전 로컬 개발 환경에서 프로토타입을 제작할 수 있습니다.

PostgreSQL의 새 인스턴스를 설치하거나 기존 인스턴스를 사용할 수 있습니다.

PostgreSQL 설치

플랫폼별 안내에 따라 PostgreSQL 버전 15.x를 설치합니다.

• macOS: Postgres.app을 다운로드하여 설치합니다.
• Windows: PostgreSQL 다운로드 페이지에서 EDB 설치 프로그램을 사용합니다.
• Docker: PostgreSQL 15.x 및 벡터 지원이 모두 제공되는 pgvector/pgvector:15 이미지를 가져와서 실행합니다.
• Linux: 이전 이미지와 함께 Docker를 사용하는 것이 좋지만 인기 배포를 위한 대체 안내를 따를 수도 있습니다.

설치 시퀀스 중에 호스트 이름, 포트, 사용자 이름, 비밀번호, 관련 매개변수 출력을 기록합니다.

PostgreSQL 인스턴스에 연결하려면 에뮬레이터에 다음이 필요합니다.

• 설정 구성 매개변수
• dataconnect.yaml의 데이터베이스 이름 및 로컬 인스턴스에서 초기화된 상응하는 이름의 데이터베이스

.firebaserc를 연결 문자열로 업데이트

로컬 PostgreSQL 사용자 이름 및 비밀번호를 포함한 로컬 PostgreSQL 구성 세부정보를 사용하여 연결 문자열을 .firebaserc 파일의 다음 키에 추가합니다.

{
  "projects": {},
  ...,
  ...,
  "dataconnectEmulatorConfig": {
    "postgres": {
      "localConnectionString": "postgresql://postgresusername:postgrespassword@localhost:5432?sslmode=disable"
    }}
}

로컬 PostgreSQL 인스턴스에 연결

구성이 완료되면 로컬 데이터베이스에 연결하려면 다음 단계를 따르세요.

1. VS Code의 왼쪽 패널에서 Firebase 아이콘을 클릭하여 Firebase VS Code 확장 프로그램 UI를 엽니다.
2. 로컬 PostgreSQL에 연결 버튼을 클릭합니다.

다음 단계