Firebase Crash Course

이 프론트 엔드 개발자 가이드는 Firebase의 신비를 풀어줍니다. 우리는 Firebase의 능력, 그 이점 및 실제 사례를 탐색 할 것입니다. 그러나 먼저, 간단한 역사 ...

8 년 전 Andrew Lee와 James Tamplin은 실시간 채팅 스타트 업인 Envolve를 시작했습니다. Ricky Martin 및 Limp Bizkit과 같은 유명인 사용자가 연료를 공급 한 성공은 사용 편의성과 빠른 메시지 전달에서 비롯되었습니다. Envolve는 간단한 채팅 위젯이었습니다. 모든 것을 처리 한 페이지에 추가 된 스크립트 태그입니다. 채팅 메시지에 미리 구축 된 데이터베이스 및 서버를 효과적으로 제공했습니다.

Envolve가 성장함에 따라 놀라운 트렌드가 나타났습니다. 개발자는 채팅뿐만 아니라 다양한 목적 (게임, 높은 점수, 앱 설정 등)을 위해 (종종 보이지 않는) 위젯을 사용하고있었습니다. 그들은 복잡한 백엔드 개발의 필요성을 우회하여 원활한 데이터 동기화를위한 위젯의 실시간 기능을 활용했습니다.

이 주현절은 Firebase의 생성으로 이어졌습니다. 설립자들은 개발자들이 응용 프로그램을 신속하게 구축하고 확장 할 수 있도록 강화하여 백엔드 인프라의 부담을 제거하고 프론트 엔드에 집중할 수 있도록 플랫폼을 구상했습니다.

파이어베이스 이해

FireBase는 단지 데이터베이스입니까? 완전히 아닙니다. 처음에는 실시간 클라우드 데이터베이스이지만 FireBase는 마케팅 담당자를위한 개발자 및 도구를위한 인프라를 포함하는 포괄적 인 플랫폼으로 발전했습니다. 현재 19 개의 통합 제품을 자랑하며, 각각의 애플리케이션 개발의 특정 측면을 지원하고 앱 성능 및 사용자 행동에 대한 귀중한 통찰력을 제공하도록 설계되었습니다. 이 제품은 개별적으로 또는 집합 적으로 사용하여 완전한 백엔드 솔루션을 형성 할 수 있습니다.

다음은 Firebase의 다양한 제품을 엿볼 수 있습니다.

• 호스팅 : 모든 GitHub 풀 요청에 따라 웹 사이트 업데이트를 쉽게 배포합니다.
• Firestore : 서버 관리없이 실시간 데이터베이스 기능, 오프라인에서도.
• 인증 : 다양한 제공 업체를 사용한 사용자 인증 및 관리.
• 스토리지 : 사용자 생성 컨텐츠 (이미지, 비디오 등)를위한 보안 저장.
• 클라우드 기능 : 이벤트 (데이터 생성, 사용자 가입 등)에 의해 트리거 된 서버리스 기능.
• 확장 : 사용자 인터페이스 (예 : Stripe Payments, Translation Services)가있는 사전 제작 된 기능.
• Google 웹 로그 분석 : 포괄적 인 사용자 활동 추적 및 분석.
• 원격 구성 : 기능 플래그 및 A/B 테스트 용 동적 키 값 저장소.
• 성능 모니터링 : 자세한 성능 메트릭 및 사용자 정의 추적.
• 클라우드 메시징 : 크로스 플랫폼 푸시 알림.

이것은 Firebase의 기능의 일부일뿐입니다. 모든 서비스를 활용할 필요는 없습니다. 프로젝트를위한 관련 도구를 선택하는 것은 완벽하게 허용됩니다. 실제 응용 프로그램을 탐구합시다.

다음 섹션에서는 Firebase 설정을 안내하고 내장 된 예제를 사용하여 기능을 보여줍니다. 이것은 단계별 자습서가 아니라 높은 수준의 개요입니다. 자세한 튜토리얼은 의견을 남겨주세요!

Firebase 설정

이 섹션은 데모 앱을 자신의 Firebase Back End와 통합하려는 경우 중요합니다. Firebase 프로젝트에 익숙하다면 이것을 건너 뜁니다.

FireBase는 클라우드 기반이며 초기 계정 설정이 필요합니다. 그러나 로컬 에뮬레이터를 사용하여 개발이 오프라인에서 발생할 수 있습니다. 이 안내서는 Codepen을 사용하여 클라우드 연결이 필요합니다. 이 프로세스에는 Firebase 프로젝트를 작성하고 프론트 엔드 통합에 필요한 구성을 검색하는 것이 포함됩니다.

Firebase 프로젝트 생성

Firebase 콘솔로 이동하십시오. 지금은 Google 웹 로그 분석 설정을 건너 뛸 수 있습니다.

웹 파이어베이스 앱 생성

새 웹 앱을 만들고 이름을 지정하십시오. Firebase 프로젝트에는 여러 앱이 포함될 수 있습니다. 생성 후 구성 객체를받을 수 있습니다.

 firebaseconfig = {
  Apikey : "Your-Key",
  Authdomain : "your-domain.firebaseapp.com",
  ProjectID : "Your-Projectid",
  StorageBucket : "your-projectid.appspot.com",
  MessagingsenderId : "당신의 enderid",
  Appid : "당신의 아파드",
  측정 값 : "Your-MeasurementId"
};

이 구성은 프론트 엔드를 Firebase에 연결합니다. 이러한 속성을 프론트 엔드 코드에 포함시키는 것이 안전합니다. 보안 메커니즘은 나중에 설명됩니다.

이제이 앱을 코드로 대표하겠습니다. 이 앱은 Firebase 서비스의 공유 논리 및 인증을위한 컨테이너 역할을합니다. 우리는 CDN의 Firebase 라이브러리를 사용합니다 (모듈 Bundlers도 지원되지만).

 //이 펜은 Codepen에서 "외부 스크립트 추가"옵션을 통해 Firebase를 추가합니다.
// https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js
// https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js

// FireBase 콘솔에서 프로젝트를 만듭니다
// (console.firebase.google.com)
firebaseconfig = {
  Apikey : "Your-Key",
  Authdomain : "your-domain.firebaseapp.com",
  ProjectID : "Your-Projectid",
  StorageBucket : "your-projectid.appspot.com",
  MessagingsenderId : "당신의 enderid",
  Appid : "당신의 아파드",
  측정 값 : "Your-MeasurementId"
};

// Firebase 앱을 만듭니다
firebaseapp = firebase.initializeapp (firebaseconfig);
// 인스턴스 인스턴스
Console.log (FireBaseApp.auth ());

다음으로 필요한 Firebase 서비스를 활성화하십시오.

인증 제공 업체 활성화

이 예제는 사용자 로그인 및 데이터 보안에 인증을 사용합니다. 처음에는 인증 제공 업체가 보안상의 이유로 비활성화됩니다. 인증 탭에서 Google 및 익명 로그인 메소드를 활성화합니다. 테스트 목적으로 공인 도메인으로 CodePen을 추가하십시오 (그러나 생산에서 제거).

Firestore 데이터베이스 생성

"테스트 모드"에서 Firestore 데이터베이스를 만듭니다. 보안은 나중에 해결됩니다.

이제 실제 사용 사례를 살펴 보겠습니다.

사용자 인증

앱 기능에는 종종 사용자 계정이 필요합니다. 익명 인증 및 Google 로그인을 살펴 보겠습니다.

익명 인증

FireBase의 익명 인증을 통해 사용자는 등록없이 앱에 액세스 할 수있어 데이터 협회에 임시 사용자 ID를 제공 할 수 있습니다.

(신호를 위해 익명의 로그인 및 프로필 업데이트를 보여주는 코드 예제)

Google 인증

Google 로그인은 익명 인증과 유사하게 작동합니다.

(Brevity를 위해 생략 된 Google 로그인을 보여주는 코드 예제)

인증 상태 모니터링

onAuthStateChanged 메소드는 인증 변경을 추적하여 로그인 상태를 기반으로 UI 업데이트를 가능하게합니다.

(간결성을 위해 생략 된 onAuthStateChanged 보여주는 코드 예제)

손님을 영구 사용자로 전환합니다

Guest 계정은 linkWithRedirect 사용하여 영구 계정으로 업그레이드 할 수 있습니다.

(간결성을 위해 생략 된 계정 병합을 보여주는 코드 예제)

계정 병합 오류 처리

계정 병합 중에 오류 처리가 필수적입니다.

(간결성을 위해 생략 된 오류 처리를 보여주는 코드 예제)

데이터 시각화 및 실시간 데이터 스트림

이 섹션에서는 파이 차트를 만들고 Firestore 데이터와 동기화하는 데 중점을 둡니다.

(간결성을 위해 Conic-Gradient 및 CSS 사용자 정의 속성에 대한 설명)

(Firestore 데이터 검색 및 PIE 차트 업데이트를 보여주는 코드 예제 간결성을 위해 생략)

NOSQL 데이터베이스의 데이터 모델링

Firestore는 수집 및 문서의 계층 구조가있는 NOSQL 문서 데이터베이스입니다. 데이터 모델링에는 수집 및 하위 수집을 사용하여 데이터를 효과적으로 구조화하는 것이 포함됩니다.

(Brevity를 위해 Firestore 데이터 검색 및 쿼리를 보여주는 코드 예제)

시각화로 스트리밍 데이터

Firestore의 .onSnapshot() 메소드는 실시간 데이터 스트리밍을 가능하게합니다.

(간결성을 위해 실시간 데이터 스트리밍을 보여주는 코드 예제)

Firebase 보안 규칙으로 데이터베이스를 보호합니다

보안 규칙 Firebase에서 데이터 액세스를 제어합니다. 각 요청에 대해 서버에서 평가됩니다.

(간결성을 위해 생략 된 보안 규칙 및 사례에 대한 설명)

결론

이 안내서는 FireBase를 사용한 사용자 인증, 데이터 모델링, 실시간 데이터 동기화 및 데이터베이스 보안을 다루었습니다. 추가 학습을 위해 추가 Firebase 리소스를 탐색해야합니다. Firebase는 백엔드 관리를 단순화하여 개발자가 프론트 엔드에 집중할 수 있도록합니다.

위 내용은 Firebase Crash Course의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!