Firebase 웹 코드랩

1. 개요

이 코드 랩에서는 사용하는 방법을 학습합니다 중포 기지를 쉽게 구현하고 중포 기지의 제품과 서비스를 사용하여 채팅 클라이언트를 배포하여 웹 응용 프로그램을 만들 수 있습니다.

3b1284f5144b54f6.png

배울 내용

  • Cloud Firestore 및 Firebase용 Cloud Storage를 사용하여 데이터를 동기화합니다.
  • Firebase 인증을 사용하여 사용자를 인증합니다.
  • Firebase 호스팅에 웹 앱을 배포합니다.
  • Firebase 클라우드 메시징으로 알림을 보냅니다.
  • 웹 앱의 성능 데이터를 수집합니다.

필요한 것

  • 같은 당신의 선택의 IDE / 텍스트 편집기, WebStorm , 아톰 , 숭고한 또는 VS 코드
  • 패키지 관리자 NPM 일반적으로 함께 제공, Node.js를
  • 터미널/콘솔
  • Chrome과 같은 원하는 브라우저
  • Codelab의 샘플 코드(코드를 가져오는 방법은 Codelab의 다음 단계를 참조하세요.)

2. 샘플 코드 받기

코드 랩의 복제 GitHub의 저장소 명령 줄에서을 :

git clone https://github.com/firebase/codelab-friendlychat-web

당신이 자식이 설치되어 있지 않은 경우 또는, 당신은 할 수 ZIP 파일로 저장소를 다운로드 .

시작 앱 가져오기

개방, 당신의 IDE를 사용하거나 📁 가져올 web-start 복제 된 저장소에서 디렉토리를. 이 📁 web-start 디렉토리는 완전한 기능을 채팅 웹 응용 프로그램이 될 코드 랩,의 시작 코드가 포함되어 있습니다.

3. Firebase 프로젝트 생성 및 설정

Firebase 프로젝트 만들기

  1. 로그인 중포 기지 .
  2. 중포 기지 콘솔에서 프로젝트 추가 클릭 한 다음 중포 기지 프로젝트 FriendlyChat의 이름을 지정합니다. Firebase 프로젝트의 프로젝트 ID를 기억하세요.
  3. 선택을 취소합니다이 프로젝트에 대한 Google 웹 로그 분석을 사용
  4. 프로젝트 만들기를 클릭합니다.

빌드할 애플리케이션은 웹 앱에 사용할 수 있는 Firebase 제품을 사용합니다.

  • 중포 기지 인증은 쉽게 사용자가 앱에 로그인 할 수 있도록합니다.
  • 클라우드 경우 FireStore는 클라우드에 구조화 된 데이터를 저장할 때 데이터가 변경 즉시 알림을받을 수 있습니다.
  • 중포 기지에 대한 클라우드 스토리지는 클라우드에 파일을 저장합니다.
  • 중포 기지 호스트에 호스팅 및 자산을 제공합니다.
  • 중포 기지 클라우드 메시징 푸시 알림 및 디스플레이 브라우저 팝업 알림을 보낼 수 있습니다.
  • 중포 기지 성능 앱 수집 사용자 성능 데이터를 모니터링.

이러한 제품 중 일부는 특별한 구성이 필요하거나 Firebase 콘솔을 사용하여 활성화해야 합니다.

프로젝트에 Firebase 웹 앱 추가

  1. 웹 아이콘을 클릭하십시오 58d6543a156e56f9.png 새 Firebase 웹 앱을 만듭니다.
  2. 별명 친절한 채팅으로 응용 프로그램을 등록하고 또한이 앱 호스팅 중포 기지를 설정 옆의 상자를 선택합니다. 등록 응용 프로그램을 클릭합니다.
  3. 다음 단계에서는 구성 개체가 표시됩니다. 단지 JS 객체 복사 (하지를 HTML 주변)에 중포 기지-config.js

웹 앱 스크린샷 등록

구글 중포 기지 인증을위한 로그인에 사용

사용자가 자신의 구글 계정과 웹 앱에 로그인 할 수 있도록하기 위해, 우리는 구글 로그인 방법을 사용합니다.

당신은 구글 로그인을 사용하도록 설정해야합니다 :

  1. 중포 기지 콘솔에서, 왼쪽 패널에서 빌드 섹션을 찾습니다.
  2. 인증을 클릭 한 다음 로그인 방법 탭을 클릭합니다 (또는 여기를 클릭하여 바로 거기에 가고).
  3. 구글 로그인 공급자를 활성화 한 다음 저장을 클릭합니다.
  4. 친절한 채팅 앱 공개에 직면 이름을 설정하고 드롭 다운 메뉴에서 프로젝트 지원 이메일을 선택합니다.
  5. 에서의 OAuth 동의 화면을 구성 Google 클라우드 콘솔 과 로고를 추가 :

d89fb3873b5d36ae.png

Cloud Firestore 사용

웹 응용 프로그램은 사용하는 클라우드 경우 FireStore을 채팅 메시지를 저장하고 새 채팅 메시지를 수신 할 수 있습니다.

Cloud Firestore를 사용 설정해야 합니다.

  1. 중포 기지 콘솔의 빌드 섹션의 경우 FireStore 데이터베이스를 클릭합니다.
  2. 클라우드 경우 FireStore 창에서 데이터베이스 만들기를 클릭합니다.

729991a081e7cd5.png

  1. 테스트 모드 옵션에서 시작을 선택한 다음 보안 규칙에 대한 면책 조항을 읽은 후 다음을 클릭합니다.

테스트 모드를 사용하면 개발 중에 데이터베이스에 자유롭게 쓸 수 있습니다. 이 코드랩의 뒷부분에서 데이터베이스를 더 안전하게 만들 것입니다.

77e4986cbeaf9dee.png

  1. Cloud Firestore 데이터가 저장되는 위치를 설정합니다. 이것을 기본값으로 두거나 가까운 지역을 선택할 수 있습니다. 제공하는 경우 FireStore에 완료를 클릭합니다.

9f2bb0d4e7ca49c7.png

클라우드 스토리지 활성화

웹 앱은 Firebase용 Cloud Storage를 사용하여 사진을 저장, 업로드, 공유합니다.

Cloud Storage를 사용 설정해야 합니다.

  1. 중포 기지 콘솔의 빌드 섹션에서 저장을 클릭합니다.
  2. 버튼이 시작하기 더 있다면, 그것은 클라우드 스토리지가 이미 활성화되어 있음을 의미합니다, 당신은 아래의 단계를 수행 할 필요가 없습니다.
  3. 시작하기를 클릭합니다.
  4. 당신의 중포 기지 프로젝트에 대한 보안 규칙에 대한 면책 조항을 읽은 후 다음을 클릭합니다.

기본 보안 규칙을 사용하면 인증된 모든 사용자가 Cloud Storage에 무엇이든 쓸 수 있습니다. 이 코드랩의 뒷부분에서 스토리지를 더 안전하게 만들 것입니다.

62f1afdcd1260127.png

  1. Cloud Storage 위치는 Cloud Firestore 데이터베이스에 대해 선택한 것과 동일한 지역으로 미리 선택되어 있습니다. 설치를 완료하려면 완료를 클릭합니다.

1d7f49ebaddb32fc.png

4. Firebase 명령줄 인터페이스 설치

Firebase CLI(명령줄 인터페이스)를 사용하면 Firebase 호스팅을 사용하여 웹 앱을 로컬로 제공하고 웹 앱을 Firebase 프로젝트에 배포할 수 있습니다.

  1. 다음 npm 명령을 실행하여 CLI를 설치합니다.
npm -g install firebase-tools
  1. 다음 명령을 실행하여 CLI가 올바르게 설치되었는지 확인하십시오.
firebase --version

Firebase CLI의 버전이 v4.1.0 이상인지 확인합니다.

  1. 다음 명령어를 실행하여 Firebase CLI를 승인합니다.
firebase login

앱의 로컬 디렉토리(이전에 Codelab에서 복제한 리포지토리)에서 Firebase 호스팅에 대한 앱 구성을 가져오도록 웹 앱 템플릿을 설정했습니다. 그러나 구성을 가져오려면 앱을 Firebase 프로젝트와 연결해야 합니다.

  1. 확인 명령 줄 앱의 로컬에 접속되어 있는지 확인 web-start 디렉토리.
  2. 다음 명령어를 실행하여 앱을 Firebase 프로젝트와 연결합니다.
firebase use --add
  1. 메시지가 표시되면 다음 중포 기지 프로젝트를 별칭을 제공, 당신의 프로젝트 ID를 선택합니다.

별칭은 여러 환경(프로덕션, 스테이징 등)이 있는 경우에 유용합니다. 그러나,이 코드 랩에 대한, 그냥의 별칭 사용할 수 있도록 default .

  1. 명령줄의 나머지 지침을 따릅니다.

5. 로컬에서 스타터 앱 실행

이제 프로젝트를 가져오고 구성했으므로 웹 앱을 처음 실행할 준비가 되었습니다.

  1. 로부터 콘솔에서 web-start 디렉토리, 다음과 같은 중포 기지 CLI 명령을 실행 :
firebase serve --only hosting
  1. 명령줄에 다음 응답이 표시되어야 합니다.
✔  hosting: Local server: http://localhost:5000

우리는 사용하고있는 중포 기지 호스팅 로컬로 우리의 응용 프로그램을 제공하기 위해 에뮬레이터를. 웹 응용 프로그램은 지금부터 사용할 수 있어야 에 http : // localhost를 : 5000 . 언더있는 모든 파일 public 하위 디렉토리가 제공됩니다.

  1. 브라우저를 사용하여 귀하의 응용 프로그램을 열 에 http : // localhost를 : 5000 .

(아직!) 작동하지 않는 FriendlyChat 앱의 UI가 표시되어야 합니다.

4c23f9475228cef4.png

앱이 지금은 아무 것도 할 수 없지만 여러분의 도움으로 곧 할 수 있습니다! 지금까지는 UI만 배치했습니다.

이제 실시간 채팅을 만들어 봅시다!

6. Firebase 가져오기 및 구성

Firebase SDK 가져오기

Firebase SDK를 앱으로 가져와야 합니다. 로이 작업을 수행하는 여러 가지 방법이 있습니다 우리의 문서에 설명가 . 예를 들어 CDN에서 라이브러리를 가져올 수 있습니다. 또는 npm을 사용하여 로컬에 설치한 다음 Browserify를 사용하는 경우 앱에 패키징할 수 있습니다.

우리는 NPM에서 중포 기지 SDK를 얻고 사용하는거야 웹팩을 우리의 코드를 번들로. 우리는 Webpack이 불필요한 코드를 제거할 수 있도록 하기 위해 JS 번들 크기를 작게 유지하여 앱이 최대한 빨리 로드되도록 합니다. 이 코드 랩, 우리가 이미 만든 web-start/package.json 상단에 종속성과 중포 기지 SDK뿐만 아니라 수입에 필요한 기능을 포함 파일 web-start/src/index.js .

패키지.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

이 코드랩에서는 Firebase 인증, Cloud Firestore, Cloud Storage, Cloud Messaging, Performance Monitoring을 사용할 것이므로 모든 라이브러리를 가져옵니다. 향후 앱에서는 앱 로드 시간을 단축하기 위해 필요한 Firebase 부분만 가져오는지 확인하세요.

Firebase SDK 설치 및 Webpack 빌드 시작

앱 빌드를 시작하려면 몇 가지 명령을 실행해야 합니다.

  1. 새 터미널 창 열기
  2. 당신은에 있는지 확인 web-start 디렉토리
  3. 실행 npm install 중포 기지 SDK를 다운로드
  4. 실행 npm run start 웹팩을 시작합니다. 이제 Webpack은 나머지 코드랩에 대한 소스 코드를 계속해서 재구축할 것입니다.

Firebase 구성

또한 사용 중인 Firebase 프로젝트를 알려주도록 Firebase SDK를 구성해야 합니다.

  1. 당신의 이동 중포 기지 콘솔에서 프로젝트 설정
  2. "내 앱" 카드에서 구성 개체가 필요한 앱의 닉네임을 선택합니다.
  3. Firebase SDK 스니펫 창에서 "구성"을 선택합니다.
  4. 다음에 추가의 구성 객체 조각을 복사 web-start/src/firebase-config.js .

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

이제, 하단으로 이동 web-start/src/index.js 및 초기화 중포 기지 :

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. 사용자 로그인 설정

이 수입에서 초기화 것 때문에 중포 기지 SDK는 이제 사용할 준비해야 index.html . 우리는 지금 사용하여 로그인 사용자 구현하는거야 중포 기지 인증을 .

Google 로그인으로 사용자 인증

사용자가 구글 버튼에서 로그인을 클릭 할 앱에서 signIn 기능이 실행됩니다. (이미 설정했습니다!) 이 코드랩에서는 Firebase가 Google을 ID 공급자로 사용하도록 승인하려고 합니다. 우리는 팝업을 사용 하겠지만, 여러 가지 다른 방법 중포 기지에서 사용할 수 있습니다.

  1. 에서 web-start 디렉토리, 하위 디렉토리에있는 src/ 오픈 index.js .
  2. 기능 찾기 signIn .
  3. 전체 함수를 다음 코드로 바꿉니다.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

signOut 사용자가 버튼에서 로그인을 클릭하면 기능이 트리거됩니다.

  1. 파일로 이동 src/index.js .
  2. 함수 찾기 signOutUser .
  3. 전체 함수를 다음 코드로 바꿉니다.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

인증 상태 추적

그에 따라 UI를 업데이트하려면 사용자가 로그인했는지 로그아웃했는지 확인하는 방법이 필요합니다. Firebase 인증을 사용하면 인증 상태가 변경될 때마다 트리거되는 인증 상태에 대한 관찰자를 등록할 수 있습니다.

  1. 파일로 이동 src/index.js .
  2. 기능 찾기 initFirebaseAuth .
  3. 전체 함수를 다음 코드로 바꿉니다.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

위의 코드 레지스터 기능 authStateObserver 인증 상태 관측기있다. 인증 상태가 변경될 때마다(사용자가 로그인하거나 로그아웃할 때) 트리거됩니다. 이 시점에서 로그인 버튼, 로그아웃 버튼, 로그인한 사용자의 프로필 사진 등을 표시하거나 숨기도록 UI를 업데이트합니다. 이러한 모든 UI 부분은 이미 구현되었습니다.

로그인한 사용자의 정보 표시

로그인한 사용자의 프로필 사진과 사용자 이름을 앱 상단 표시줄에 표시하고 싶습니다. 중포 기지에서 로그인 한 사용자의 데이터는 항상 사용할 수 있습니다 currentUser 객체입니다. 앞서, 우리는 설정 authStateObserver 경우에 사용자가 로그인 그래서 우리의 UI 업데이트가 따라 트리거 기능을. 그것은 호출 getProfilePicUrlgetUserName 트리거 할 때.

  1. 파일로 이동 src/index.js .
  2. 기능 찾기 getProfilePicUrlgetUserName .
  3. 두 함수를 다음 코드로 바꿉니다.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

사용자가 로그인하지 않은 상태에서 메시지를 보내려고 하면 오류 메시지가 표시됩니다. (그래도 시도해 볼 수 있습니다!) 따라서 사용자가 실제로 로그인했는지 감지해야 합니다.

  1. 파일로 이동 src/index.js .
  2. 기능 찾기 isUserSignedIn .
  3. 전체 함수를 다음 코드로 바꿉니다.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

앱 로그인 테스트

  1. 앱이 계속 제공되는 경우 브라우저에서 앱을 새로고침하세요. 그렇지 않으면, 실행 firebase serve --only hosting 에서 응용 프로그램을 제공하는 시작하는 명령 행에 // localhost를 : 5000 HTTP 한 다음 브라우저에서 엽니 다.
  2. 로그인 버튼과 Google 계정을 사용하여 앱에 로그인합니다. 오류 메시지가 나타 나타나면 auth/operation-not-allowed 당신이 사용할 수 있음을, 검사가 있는지 확인하기 위해 구글 로그인-에서 중포 기지 콘솔에서 인증 공급자로.
  3. 로그인한 후 프로필 사진과 사용자 이름이 표시되어야 합니다. c7401b3d44d0d78b.png

8. Cloud Firestore에 메시지 쓰기

이 섹션에서는 앱의 UI를 채울 수 있도록 일부 데이터를 Cloud Firestore에 씁니다. 이는 수동으로 수행 할 수 있습니다 중포 기지 콘솔 , 그러나 우리는 기본적인 클라우드 경우 FireStore 기록을 보여 앱 자체에서 할 수 있습니다.

데이터 모델

Cloud Firestore 데이터는 컬렉션, 문서, 필드, 하위 컬렉션으로 분할됩니다. (이)라는 최상위 컬렉션에서 문서로 채팅의 각 메시지를 저장합니다 messages .

688d7bc5fb662b57.png

Cloud Firestore에 메시지 추가

사용자들에 의해 기록 된 채팅 메시지를 저장하기 위해 사용합니다 클라우드 경우 FireStore을 .

이 섹션에서는 사용자가 데이터베이스에 새 메시지를 작성하는 기능을 추가합니다. 보내기 버튼을 클릭하면 사용자는 아래의 코드를 트리거합니다. 그것은 당신의 클라우드 경우 FireStore 인스턴스 메시지 필드의 내용과 메시지 개체 추가 messages 모음. add() 메소드는 컬렉션에 자동으로 생성 된 ID를 가진 새 문서를 추가한다.

  1. 파일로 이동 src/index.js .
  2. 함수 찾기 saveMessage .
  3. 전체 함수를 다음 코드로 바꿉니다.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

메시지 전송 테스트

  1. 앱이 계속 제공되는 경우 브라우저에서 앱을 새로고침하세요. 그렇지 않으면, 실행 firebase serve --only hosting 에서 응용 프로그램을 제공하는 시작하는 명령 행에 // localhost를 : 5000 HTTP 한 다음 브라우저에서 엽니 다.
  2. 로그인 후, 예 : "안녕!"하고 다음을 클릭 SEND로 메시지를 입력합니다. 그러면 Cloud Firestore에 메시지가 기록됩니다. 우리는 여전히 데이터합니다 (코드 랩의 다음 섹션을) 검색 구현해야하기 때문에, 아직 실제 웹 응용 프로그램의 데이터를 볼 수 없습니다.
  3. Firebase 콘솔에서 새로 추가된 메시지를 볼 수 있습니다. Firebase 콘솔을 엽니다. 빌드 섹션에서 경우 FireStore 데이터베이스를 클릭 (또는 클릭 여기에 당신의 프로젝트를 선택합니다) 당신은 당신의 새로 추가 된 메시지와 함께 메시지 수집을 볼 수 :

6812efe7da395692.png

9. 메시지 읽기

동기화 메시지

앱에서 메시지를 읽으려면 데이터가 변경될 때 트리거되는 리스너를 추가한 다음 새 메시지를 표시하는 UI 요소를 만들어야 합니다.

앱에서 새로 추가된 메시지를 수신 대기하는 코드를 추가합니다. 이 코드에서는 데이터 변경 사항을 수신하는 수신기를 등록합니다. 로딩 시 매우 긴 기록이 표시되지 않도록 채팅의 마지막 12개 메시지만 표시합니다.

  1. 파일로 이동 src/index.js .
  2. 함수 찾기 loadMessages .
  3. 전체 함수를 다음 코드로 바꿉니다.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

데이터베이스에 메시지를 들으려면, 우리는 사용하여 컬렉션 쿼리를 만들 collection 우리가에 듣고 싶은 것을하는 수집 된 데이터를 지정하는 기능. 코드에서, 우리 위에있는 거 청취를 내 변화에 messages 채팅 메시지가 저장되는 컬렉션입니다. 우리는 또한만을 사용하여 지난 12 메시지를 듣고에 의해 제한을 적용하는 것 .limit(12) 과 사용 날짜별로 메시지를 주문 orderBy('timestamp', 'desc') 12 최신 메시지를받을 수 있습니다.

onSnapshot 함수는 첫번째 파라미터로서 질의 및 제로서 콜백 함수 걸린다. 쿼리와 일치하는 문서에 변경 사항이 있을 때 콜백 함수가 트리거됩니다. 메시지가 삭제, 수정 또는 추가된 경우일 수 있습니다. 당신은이에 대한 자세한 내용을보실 수 있습니다 클라우드 경우 FireStore 문서 .

메시지 동기화 테스트

  1. 앱이 계속 제공되는 경우 브라우저에서 앱을 새로고침하세요. 그렇지 않으면, 실행 firebase serve --only hosting 에서 응용 프로그램을 제공하는 시작하는 명령 행에 // localhost를 : 5000 HTTP 한 다음 브라우저에서 엽니 다.
  2. 데이터베이스에 이전에 생성한 메시지는 FriendlyChat UI에 표시되어야 합니다(아래 참조). 새 메시지를 자유롭게 작성하십시오. 그들은 즉시 나타나야 합니다.
  3. (선택 사항), 삭제, 수정, 또는 중포 기지 콘솔의 데이터베이스 섹션에서 직접 새 메시지를 추가 수동으로 시도 할 수 있습니다; 모든 변경 사항은 UI에 반영되어야 합니다.

축하합니다! 앱에서 Cloud Firestore 문서를 읽고 있습니다!

2168dec79b573d07.png

10. 이미지 보내기

이제 이미지를 공유하는 기능을 추가하겠습니다.

Cloud Firestore는 구조화된 데이터를 저장하는 데 적합하지만 Cloud Storage는 파일을 저장하는 데 더 적합합니다. 중포 기지에 대한 클라우드 스토리지는 파일 / BLOB 스토리지 서비스이며, 우리는 사용자 주가는 우리의 응용 프로그램을 사용하는 것이 어떤 이미지를 저장하는 데 사용할 수 있습니다.

Cloud Storage에 이미지 저장

이 코드랩에서는 파일 선택기 대화 상자를 트리거하는 버튼을 이미 추가했습니다. 파일을 선택한 후, saveImageMessage 함수가 호출되고, 당신은 선택한 파일에 대한 참조를 얻을 수 있습니다. saveImageMessage 기능은 다음을 수행 :

  1. 채팅 피드에 "자리 표시자" 채팅 메시지를 만들어 이미지를 업로드하는 동안 사용자에게 "로드 중" 애니메이션이 표시되도록 합니다.
  2. 이 경로에 클라우드 스토리지에 이미지 파일 업로드 : /<uid>/<messageId>/<file_name>
  3. 이미지 파일에 대해 공개적으로 읽을 수 있는 URL을 생성합니다.
  4. 임시 로딩 이미지 대신 새로 업로드된 이미지 파일의 URL로 채팅 메시지를 업데이트합니다.

이제 이미지를 보내는 기능을 추가합니다.

  1. 파일로 이동 src/index.js .
  2. 함수 찾기 saveImageMessage .
  3. 전체 함수를 다음 코드로 바꿉니다.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

이미지 전송 테스트

  1. 앱이 계속 제공되는 경우 브라우저에서 앱을 새로고침하세요. 그렇지 않으면, 실행 firebase serve --only hosting 에서 응용 프로그램을 제공하는 시작하는 명령 행에 // localhost를 : 5000 HTTP 한 다음 브라우저에서 엽니 다.
  2. 로그인 후 이미지 업로드 버튼 클릭 13734cb66773e5a3.png 파일 선택기를 사용하여 이미지 파일을 선택합니다. 당신이 이미지를 찾고 있다면,이 사용 주시기 커피 컵의 멋진 사진을 .
  3. 선택한 이미지와 함께 앱의 UI에 새 메시지가 표시되어야 합니다. 3b1284f5144b54f6.png

로그인하지 않은 상태에서 이미지를 추가하려고 하면 이미지를 추가하려면 로그인해야 한다는 알림 메시지가 표시되어야 합니다.

11. 알림 표시

이제 브라우저 알림에 대한 지원을 추가합니다. 채팅에 새 메시지가 게시되면 앱에서 사용자에게 알립니다. 중포 기지 클라우드 메시징 (FCM)은 안정적으로 무료로 메시지 및 알림을 제공 할 수있는 크로스 플랫폼 메시징 솔루션이다.

FCM 서비스 작업자 추가

웹 응용 프로그램은 필요 서비스 작업자 수신 및 디스플레이 웹 통지됩니다.

  1. 로부터 web-start 디렉토리의에서 src 디렉토리 오픈 firebase-messaging-sw.js .
  2. 해당 파일에 다음 내용을 추가합니다.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

서비스 작업자는 알림 표시를 처리하는 Firebase 클라우드 메시징 SDK를 로드하고 초기화하기만 하면 됩니다.

FCM 장치 토큰 받기

알림 장치 또는 브라우저에서 활성화 된 경우 토큰 장치를 제공 할 수 있습니다. 이 장치 토큰은 특정 장치 또는 특정 브라우저에 알림을 보내는 데 사용합니다.

사용자 기호-에서, 우리는 호출하면 saveMessagingDeviceToken 기능을. 우리가 브라우저에서 토큰 FCM 장치를 얻을 수 있습니다의는 그것과 그것을 저장 클라우드 경우 FireStore합니다.

  1. 파일로 이동 src/index.js .
  2. 기능 찾기 saveMessagingDeviceToken .
  3. 전체 함수를 다음 코드로 바꿉니다.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

그러나 이 코드는 처음에는 작동하지 않습니다. 앱이 기기 토큰을 검색할 수 있으려면 사용자가 앱에 알림을 표시할 수 있는 권한을 부여해야 합니다(Codelab의 다음 단계).

알림 표시 권한 요청

사용자가 앱에 알림을 표시할 권한을 아직 부여하지 않은 경우 기기 토큰이 제공되지 않습니다. 이 경우, 우리는 전화 firebase.messaging().requestPermission() 브라우저 대화 상자가 (이 권한을 요청하는 표시 방법, 지원되는 브라우저에서 ).

8b9d0c66dc36153d.png

  1. 파일로 이동 src/index.js .
  2. 함수 찾기 requestNotificationsPermissions .
  3. 전체 함수를 다음 코드로 바꿉니다.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

장치 토큰 가져오기

  1. 앱이 계속 제공되는 경우 브라우저에서 앱을 새로고침하세요. 그렇지 않으면, 실행 firebase serve --only hosting 에서 응용 프로그램을 제공하는 시작하는 명령 행에 // localhost를 : 5000 HTTP 한 다음 브라우저에서 엽니 다.
  2. 로그인하면 알림 권한 대화 상자가 나타납니다. bd3454e6dbfb6723.png
  3. 허용을 클릭합니다.
  4. 브라우저의 JavaScript 콘솔을 엽니다. 다음과 같은 메시지가 나타납니다 Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. 장치 토큰을 복사합니다. 코드랩의 다음 단계에 필요합니다.

기기에 알림 보내기

이제 장치 토큰이 있으므로 알림을 보낼 수 있습니다.

  1. 열기 중포 기지 콘솔의 클라우드 메시징 탭을 .
  2. "새 알림"을 ​​클릭하십시오.
  3. 알림 제목과 알림 텍스트를 입력합니다.
  4. 화면 오른쪽에서 "테스트 메시지 보내기"를 클릭합니다.
  5. 브라우저의 JavaScript 콘솔에서 복사한 장치 토큰을 입력한 다음 더하기("+") 기호를 클릭합니다.
  6. "테스트" 클릭

앱이 포그라운드에 있는 경우 JavaScript 콘솔에 알림이 표시됩니다.

앱이 백그라운드에 있는 경우 다음 예와 같이 브라우저에 알림이 표시되어야 합니다.

de79e8638a45864c.png

12. Cloud Firestore 보안 규칙

보기 데이터베이스 보안 규칙

클라우드 경우 FireStore는 특정의 사용 규칙 언어를 액세스 권한, 보안, 데이터 유효성 검사를 정의 할 수 있습니다.

이 Codelab의 시작 부분에서 Firebase 프로젝트를 설정할 때 데이터 저장소에 대한 액세스를 제한하지 않도록 "테스트 모드" 기본 보안 규칙을 사용하도록 선택했습니다. 에서 중포 기지 콘솔 , 데이터베이스 섹션의 규칙 탭에서, 당신은보고 이러한 규칙을 수정할 수 있습니다.

지금 바로 데이터 저장소에 대한 액세스를 제한하지 않는 기본 규칙이 표시되어야 합니다. 즉, 모든 사용자가 데이터 저장소의 모든 컬렉션을 읽고 쓸 수 있습니다.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

다음 규칙을 사용하여 사물을 제한하도록 규칙을 업데이트합니다.

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

데이터베이스 보안 규칙 업데이트

Firebase 콘솔에서 또는 Firebase CLI를 사용하여 배포된 로컬 규칙 파일에서 데이터베이스 보안 규칙을 수정하는 두 가지 방법이 있습니다.

Firebase 콘솔에서 보안 규칙을 업데이트하려면 다음 안내를 따르세요.

  1. 왼쪽 패널에서 데이터베이스 섹션으로 이동 한 다음 규칙 탭을 클릭합니다.
  2. 콘솔에 이미 있는 기본 규칙을 위에 표시된 규칙으로 바꿉니다.
  3. 게시를 클릭합니다.

로컬 파일에서 보안 규칙을 업데이트하려면:

  1. 로부터 web-start 디렉토리 오픈 firestore.rules .
  2. 파일에 이미 있는 기본 규칙을 위에 표시된 규칙으로 바꿉니다.
  3. 로부터 web-start 디렉토리 오픈 firebase.json .
  4. 추가 firestore.rules 가리키는 속성 firestore.rules 아래와 같이. 합니다 ( hosting 속성은 이미 파일에 있어야합니다.)

Firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. 다음 명령어를 실행하여 Firebase CLI를 사용하여 보안 규칙을 배포합니다.
firebase deploy --only firestore
  1. 명령줄에 다음 응답이 표시되어야 합니다.
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

13. 클라우드 스토리지 보안 규칙

Cloud Storage 보안 규칙 보기

중포 기지에 대한 클라우드 스토리지는 특정의 사용 규칙 언어를 액세스 권한, 보안, 데이터 유효성 검사를 정의 할 수 있습니다.

이 Codelab의 시작 부분에서 Firebase 프로젝트를 설정할 때 인증된 사용자만 Cloud Storage를 사용할 수 있도록 허용하는 기본 Cloud Storage 보안 규칙을 사용하기로 선택했습니다. 에서 중포 기지 콘솔 , 스토리지 섹션의 규칙 탭에서, 당신은보고 규칙을 수정할 수 있습니다. 로그인한 모든 사용자가 스토리지 버킷의 모든 파일을 읽고 쓸 수 있도록 허용하는 기본 규칙이 표시되어야 합니다.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

다음을 수행하도록 규칙을 업데이트합니다.

  • 각 사용자가 자신의 특정 폴더에만 쓸 수 있도록 허용
  • 누구나 Cloud Storage에서 읽을 수 있도록 허용
  • 업로드된 파일이 이미지인지 확인
  • 업로드할 수 있는 이미지의 크기를 최대 5MB로 제한

이것은 다음 규칙을 사용하여 구현할 수 있습니다.

storage.rules

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

Cloud Storage 보안 규칙 업데이트

저장소 보안 규칙을 수정하는 방법은 Firebase 콘솔에서 또는 Firebase CLI를 사용하여 배포된 로컬 규칙 파일에서 수정하는 두 가지 방법이 있습니다.

Firebase 콘솔에서 보안 규칙을 업데이트하려면 다음 안내를 따르세요.

  1. 왼쪽 패널에서 스토리지 섹션으로 이동 한 다음 규칙 탭을 클릭합니다.
  2. 콘솔에 이미 있는 기본 규칙을 위에 표시된 규칙으로 바꿉니다.
  3. 게시를 클릭합니다.

로컬 파일에서 보안 규칙을 업데이트하려면:

  1. 로부터 web-start 디렉토리 오픈 storage.rules .
  2. 파일에 이미 있는 기본 규칙을 위에 표시된 규칙으로 바꿉니다.
  3. 로부터 web-start 디렉토리 오픈 firebase.json .
  4. 추가 storage.rules 받는 가리키는 속성 storage.rules 다음과 같이 파일. ( hostingdatabase 속성은 이미 파일에 있어야합니다.)

Firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. 다음 명령어를 실행하여 Firebase CLI를 사용하여 보안 규칙을 배포합니다.
firebase deploy --only storage
  1. 명령줄에 다음 응답이 표시되어야 합니다.
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14. 성능 데이터 수집

Performance Monitoring SDK를 사용하여 앱에서 실제 성능 데이터를 수집한 다음 Firebase 콘솔에서 해당 데이터를 검토하고 분석할 수 있습니다. 성능 모니터링을 사용하면 앱의 성능을 언제 어디서 개선할 수 있는지 이해하여 해당 정보를 사용하여 성능 문제를 해결할 수 있습니다.

Firebase Performance Monitoring JavaScript SDK와 통합하는 방법에는 여러 가지가 있습니다. 이 코드 랩에서 우리는 호스팅 URL의 모니터링 성능을 사용할 수. 받는 사람 참조 문서 SDK를 가능하게하는 다른 방법을 볼 수 있습니다.

자동 추적

우리는 이미 오기 때문에 getPerformance 상단에 web-start/src/index.js , 우리는 단지 사용자가 배포 된 사이트를 방문 할 때 당신을 위해 자동으로 수집 페이지로드 및 네트워크 요청 메트릭 모니터링 성능을 얘기 한 줄을 추가해야합니다!

  1. 에서 web-start/src/index.js , 기존의 아래에 다음 줄을 추가 TODO 성능 모니터링을 초기화 할 수 있습니다.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

첫 번째 입력 지연 측정(옵션)

먼저 입력 지연은 사용자 상호 작용에 응답 브라우저 앱의 응답에 대해 사용자에게 자신의 첫 인상을 제공하기 때문에 유용합니다.

첫 번째 입력 지연은 사용자가 버튼이나 하이퍼링크를 클릭하는 것과 같이 페이지의 요소와 처음 상호작용할 때 시작됩니다. 브라우저가 입력에 응답할 수 있는 즉시 중지됩니다. 즉, 브라우저가 페이지 콘텐츠를 로드하거나 구문 분석하는 데 바쁘지 않습니다.

첫 번째 입력 지연을 측정하려면 다음 코드를 직접 포함해야 합니다.

  1. 열기 public/index.html .
  2. 주석을 제거 script 다음 줄에 태그를.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

첫 번째 입력 지연 polyfill에 대한 자세한 내용을 읽으려면 한 번 봐 걸릴 문서를 .

성능 데이터 보기

아직 사이트를 배포하지 않았으므로(다음 단계에서 배포할 예정) 다음은 사용자가 배포된 사이트와 상호작용한 후 30분 이내에 Firebase 콘솔에 표시되는 페이지 로드 성능에 대한 측정항목을 보여주는 스크린샷입니다. :

29389131150f33d7.png

Performance Monitoring SDK를 앱에 통합하면 앱이 성능의 여러 중요한 측면을 자동으로 모니터링하기 전에 다른 코드를 작성할 필요가 없습니다. 웹 앱의 경우 SDK는 콘텐츠가 포함된 첫 번째 페인트, 사용자가 앱과 상호 작용할 수 있는 기능 등과 같은 측면을 기록합니다.

또한 앱의 특정 측면을 측정하기 위해 사용자 지정 추적, 측정항목 및 속성을 설정할 수 있습니다. 에 대해 더 알아 보려면 문서를 방문하여 사용자 추적 및 통계사용자 지정 특성 .

15. Firebase 호스팅을 사용하여 앱 배포

중포 기지 이벤트는 호스팅 서비스 자산 및 웹 응용 프로그램을 제공합니다. Firebase CLI를 사용하여 Firebase 호스팅에 파일을 배포할 수 있습니다. 배포하기 전에, 당신은 당신에 지정해야 firebase.json 로컬 파일을 배포 할 파일. 이 코드랩의 경우 이 코드랩에서 파일을 제공하는 데 이 단계가 필요했기 때문에 이미 이 작업을 수행했습니다. 호스팅 설정은 아래 지정됩니다 hosting 속성 :

Firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

이러한 설정은 우리가 모든 파일을 배포 할 것을 CLI에게 ./public 디렉토리 ( "public": "./public" ).

  1. 확인 명령 줄 앱의 로컬에 접속되어 있는지 확인 web-start 디렉토리.
  2. 다음 명령어를 실행하여 Firebase 프로젝트에 파일을 배포합니다.
firebase deploy --except functions
  1. 콘솔에 다음이 표시되어야 합니다.
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. 이제 자체 Firebase 하위 도메인 중 두 곳에서 Firebase 호스팅을 사용하여 글로벌 CDN에서 완전히 호스팅되는 웹 앱을 방문하세요.
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

다른 방법으로는 실행할 수있는 firebase open hosting:site 명령 줄을.

에 대해 자세히 알아 보려면 문서를 방문 중포 기지가 작품을 호스팅하는 방법을 .

당신의 전개함에의 역사 앱의 이전 버전 롤 후면에 기능 및 사용자 지정 도메인을 설정하는 워크 플로우를 포함하여 유용한 호스팅 정보와 도구를 볼 수 프로젝트의 중포 기지 콘솔 호스팅 섹션으로 이동합니다.

16. 축하합니다!

Firebase를 사용하여 실시간 채팅 웹 애플리케이션을 구축했습니다.

우리가 다룬 내용

  • Firebase 인증
  • 클라우드 파이어스토어
  • Cloud Storage용 Firebase SDK
  • Firebase 클라우드 메시징
  • Firebase 성능 모니터링
  • Firebase 호스팅

다음 단계

Learn more