Angular 8 Firebase 튜토리얼: @angular/fire를 사용하여 Firebase를 Angular 8 앱에 통합

https://grokonez.com/frontend/angular/angular-8/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire

Firebase은 Google에서 개발한 모바일 및 웹 애플리케이션 개발 플랫폼입니다. 복잡한 백엔드 시스템을 만들지 않고도 앱을 매우 빠르게 구축할 수 있습니다. 가장 큰 앱의 경우에도 자동으로 확장하는 데 도움이 됩니다. 이 Angular 8 Firebase 자습서에서는 @angular/fire 모듈(Firebase 및 Angular용 공식 라이브러리)을 사용하여 Firebase를 Angular 8 앱에 통합할 것입니다.

관련 게시물:

Angular 8 Firebase Realtime Database CRUD operations with @angular/fire

Angular 8 Firestore tutorial with CRUD application example – @angular/fire

Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire

기술

각진 8

@앵귤러/파이어 5.1.2

파이어베이스 5.9.4

교육 비디오

Firebase를 Angular 8 앱에 통합

1단계: Firebase 프로젝트 설정

Firebase Console 로 이동하여 Google 계정으로 로그인한 다음 프로젝트 추가를 클릭합니다.

프로젝트 이름을 입력하고 프로젝트 ID를 설정한 다음 국가/지역을 선택합니다.



CREATE PROJECT를 누르면 브라우저가 다음과 같이 바뀝니다.



Web App을 클릭하면 팝업이 표시됩니다.



나중에 사용할 수 있도록 정보를 저장하십시오.

왼쪽에서 데이터베이스(Firebase 기능 목록) -> 실시간 데이터베이스 -> 탭 규칙을 선택한 다음 .read 및 .write 값을 true로 변경합니다.

2단계: @angular/fire 및 firebase 설치

실행 명령:npm install firebase @angular/fire --save

3단계: 환경 변수에 Firebase 구성 추가

/src/environments/environment.ts를 열고 팝업 창이 표시될 때 저장한 Firebase 구성을 추가합니다.

export const environment = {
  production: false,
  firebase: {
    apiKey: 'xxx',
    authDomain: 'gkz-angular-firebase.firebaseapp.com',
    databaseURL: 'https://gkz-angular-firebase.firebaseio.com',
    projectId: 'gkz-angular-firebase',
    storageBucket: 'gkz-angular-firebase.appspot.com',
    messagingSenderId: '189575342164'
  }
};

더보기: https://grokonez.com/frontend/angular/angular-8/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire