앱을 연결하고 프로토타입 제작하기

Firebase Local Emulator Suite을(를) 시작하기 전에 먼저 개발 환경을 설정하고 시작하기 전에 플랫폼에 맞는 Firebase 주제: Apple Android 또는 웹

프로토타입 제작 및 테스트

Local Emulator Suite에는 다음에 설명된 대로 여러 제품 에뮬레이터가 포함되어 있습니다. Firebase Local Emulator Suite 소개. 프로덕션에서 사용 중인 Firebase 제품에 해당하는 개별 에뮬레이터를 사용하거나 여러 에뮬레이터를 조합하여 프로토타입을 제작하고 테스트할 수 있습니다.

</ph>

이 주제에서는 Local Emulator Suite 워크플로를 소개하기 위해 다음과 같이 가정해 보겠습니다. 일반적인 제품 조합인 Firebase 해당 데이터베이스의 작업으로 트리거되는 Cloud Functions와 같은 데이터베이스입니다.

Firebase 프로젝트를 로컬에서 초기화한 후 다음을 사용하여 개발 주기 Local Emulator Suite는 일반적으로 3단계로 이루어집니다.

1. 에뮬레이터 및 Emulator Suite UI를 사용하여 대화형으로 기능 프로토타입을 제작합니다.

2. 데이터베이스 에뮬레이터 또는 Cloud Functions 에뮬레이터를 사용하는 경우 앱을 에뮬레이터에 연결하는 일회성 단계를 실행합니다.

3. 에뮬레이터와 커스텀 스크립트로 테스트를 자동화합니다.

로컬에서 Firebase 프로젝트 초기화

CLI를 설치하거나 최신 버전으로 업데이트해야 합니다.

curl -sL firebase.tools | bash

아직 초기화하지 않았다면 화면의 안내에 따라 Cloud Functions와 Cloud Firestore 또는 Realtime Database를 사용하도록 지정하여 현재 작업 디렉터리를 Firebase 프로젝트로 초기화합니다.

firebase init

이제 프로젝트 디렉터리에 Firebase 구성 파일, 데이터베이스의 Firebase Security Rules 정의 파일(functions 디렉터리) Cloud Functions 코드 및 기타 지원 파일이 포함됩니다

대화형 방식으로 프로토타입 제작하기

Local Emulator Suite은(는) 새로운 기능의 프로토타입을 빠르게 제작하고 도구 모음의 기본 제공 사용자 인터페이스는 도구 모음에서 사용할 수 있는 있습니다. Firebase 콘솔을 로컬에서 실행하는 것과 유사합니다.

Emulator Suite UI를 사용하면 데이터베이스 설계를 반복하고 Cloud Functions와 관련된 다양한 데이터 흐름, 보안 규칙 변경사항 평가, 로그를 확인하여 백엔드 서비스의 성능 등을 확인할 수 있습니다. 그런 다음 처음부터 다시 시작하려면 데이터베이스를 지우고 새로운 설계 아이디어로 시작하면 됩니다.

다음을 사용하여 Local Emulator Suite를 시작하면 모두 사용할 수 있습니다.

firebase emulators:start

가상의 앱의 프로토타입을 제작하기 위해 기본 Cloud 함수를 설정하고 테스트합니다. 데이터베이스의 텍스트 항목을 수정하고 해당 데이터베이스를 만들고 채우기 위해 Emulator Suite UI에서 사용하여 트리거됩니다.

1. 프로젝트 디렉터리에서 functions/index.js 파일을 수정하여 데이터베이스 쓰기에 의해 트리거되는 Cloud 함수를 만듭니다. 기존 파일의 콘텐츠를 다음 스니펫으로 바꿉니다. 이 함수는 messages 컬렉션의 문서 변경사항을 수신 대기하고, 문서의 original 필드 콘텐츠를 대문자로 변환하고 결과를 해당 문서의 uppercase 필드에 저장합니다.

  const functions = require('firebase-functions/v1');

  exports.makeUppercase = functions.firestore.document('/messages/{documentId}')
      .onCreate((snap, context) => {
        const original = snap.data().original;
        console.log('Uppercasing', context.params.documentId, original);
        const uppercase = original.toUpperCase();
        return snap.ref.set({uppercase}, {merge: true});
      });
  

2. 다음을 사용하여 Local Emulator Suite를 실행합니다. firebase emulators:start입니다. Cloud Functions 및 데이터베이스 에뮬레이터가 시작되고, 자동으로 상호 운용되도록 구성됩니다.
3. http://localhost:4000에서 브라우저의 UI를 확인합니다. 포트 4000이 UI의 기본값이지만 Firebase CLI 사용 가능한 에뮬레이터의 상태를 확인합니다. 이 경우에는 Cloud Functions 및 Cloud Firestore 에뮬레이터가 실행됩니다.
   UI 기본 페이지 <ph type="x-smartling-placeholder"></ph>
4. UI의 Firestore > 데이터 탭에서 컬렉션 시작을 클릭하고 표시되는 메시지에 따라 messages 컬렉션에서 필드 이름이 original이고 값이 test인 새 문서를 만듭니다. 이렇게 하면 Cloud 함수가 트리거됩니다. 곧 'TEST' 문자열로 채워진 새로운 uppercase 필드가 표시되는지 확인합니다.
   컬렉션 만들기 함수에 의한 업데이트 확인
5. Firestore > 요청 탭에서 에뮬레이션된 데이터베이스(수행된 모든 Firebase Security Rules 평가 포함) 이러한 요청을 처리하는 과정에서 액세스할 수 있습니다
6. 로그 탭을 확인하여 함수가 데이터베이스를 업데이트할 때 오류가 발생하지 않았는지 확인합니다.

인앱 데이터베이스 액세스 코드를 수정하거나 테스트 모음을 다시 컴파일 및 실행하지 않고도 원하는 데이터 흐름을 얻을 때까지 Cloud 함수 코드와 대화형 데이터베이스 수정 작업을 간편하게 반복할 수 있습니다.

에뮬레이터에 앱 연결

대화형 프로토타입 제작을 성공적으로 진행하고 설계를 결정했다면 적절한 SDK를 사용하여 앱에 데이터베이스 액세스 코드를 추가할 수 있습니다. 데이터베이스 탭을 계속 사용하며 함수의 경우 Emulator Suite UI의 로그 탭에서 앱의 동작을 확인합니다. 정답입니다.

Local Emulator Suite는 로컬 개발 도구입니다. 프로덕션 데이터베이스에 대한 쓰기는 로컬에서 프로토타입을 제작하는 함수를 트리거하지 않습니다.

앱이 데이터베이스에 쓰기 작업을 수행하도록 전환하려면 다음을 수행해야 합니다. 테스트 클래스 또는 인앱 구성이 Cloud Firestore를 가리키도록 합니다. 에뮬레이터입니다.

// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
val firestore = Firebase.firestore
firestore.useEmulator("10.0.2.2", 8080)

firestore.firestoreSettings = firestoreSettings {
    isPersistenceEnabled = false
}
EmulatorSuite.kt

// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
FirebaseFirestore firestore = FirebaseFirestore.getInstance();
firestore.useEmulator("10.0.2.2", 8080);

FirebaseFirestoreSettings settings = new FirebaseFirestoreSettings.Builder()
        .setPersistenceEnabled(false)
        .build();
firestore.setFirestoreSettings(settings);
EmulatorSuite.java

let settings = Firestore.firestore().settings
settings.host = "127.0.0.1:8080"
settings.cacheSettings = MemoryCacheSettings()
settings.isSSLEnabled = false
Firestore.firestore().settings = settings
ViewController.swift

import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";

// firebaseApps previously initialized using initializeApp()
const db = getFirestore();
connectFirestoreEmulator(db, '127.0.0.1', 8080);
fs_emulator_connect.js

// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.useEmulator("127.0.0.1", 8080);
}
emulator-suite.js

커스텀 스크립트로 테스트 자동화

이제 전체 워크플로의 마지막 단계입니다. 기능 인앱의 프로토타입을 제작하고 모든 플랫폼에서 문제없이 작동될 것으로 보이면 최종 구현 및 테스트로 전환할 수 있습니다. 단위 테스트 및 CI 워크플로의 경우 exec 명령어 하나로 에뮬레이터를 시작하고 스크립트 테스트를 실행하며 에뮬레이터를 종료할 수 있습니다.

firebase emulators:exec "./testdir/test.sh"

개별 에뮬레이터에 대해 자세히 살펴보기

지금까지 기본 클라이언트 측 워크플로에 대해 살펴봤으므로 이제는 서버 측 앱 개발에 사용하는 방법을 비롯하여 도구 모음의 개별 에뮬레이터에 대해 좀 더 자세히 알아보겠습니다.

• 프로토타입 제작 워크플로에 Authentication 에뮬레이터 추가
• Realtime Database 에뮬레이터 기능 자세히 알아보기
• Cloud Storage for Firebase 에뮬레이터 기능 자세히 알아보기
• Cloud Firestore 에뮬레이터 기능 자세히 알아보기
• Cloud Functions 에뮬레이터에 앱 연결
• Extensions 에뮬레이터로 청구 비용을 최소화하면서 Firebase Extensions 평가

다음 단계

위에 링크된 특정 에뮬레이터와 관련된 주제를 읽어보세요. 그런 다음 아래를 실행합니다.

• 선별된 동영상 모음 및 자세한 방법 예시는 Firebase 에뮬레이터 학습 재생목록을 참조하세요.
• 보안 규칙 테스트 및 Firebase Test SDK: 보안 규칙 테스트 (Cloud Firestore) , 보안 규칙 테스트 (Realtime Database), 보안 규칙 테스트 (Cloud Storage for Firebase).