GSP643

개요

릴리는 12년 전에 Pet Theory 동물병원 체인을 시작했습니다. 지난 몇 년 동안 Pet Theory 동물병원은 급격히 성장했습니다. 기존의 일정 예약 시스템은 증가된 로드를 처리하거나 고객이 직접 방문 일정을 예약할 수 없으므로 릴리는 IT 부서의 패트릭과 컨설턴트인 루비에게 쉽게 확장 가능한 클라우드 기반 시스템을 빌드해 달라고 요청합니다. 이 실습에서는 사용자가 실시간으로 정보를 기록하고 방문 일정을 예약할 수 있는 완전한 Firebase 웹 앱을 빌드해 봅니다.

아키텍처

이 다이어그램은 사용할 서비스에 대한 개요와 이러한 서비스가 서로 연결되는 방식을 보여줍니다.

목표

이 실습에서는 다음 작업을 수행하는 방법을 배웁니다.

• Google Cloud 프로젝트에 Firebase API를 사용 설정합니다.
• Firebase 프로젝트를 만들고 구성합니다.
• Firestore 보안을 구성하여 서버 측 인증 및 승인을 자동화합니다.
• 웹 앱에 Google 로그인 기능을 추가합니다.
• 사용자가 연락처 정보를 추가할 수 있도록 데이터베이스를 구성합니다.
• 사용자가 방문 일정을 예약할 수 있게 하는 코드를 살펴보고 배포합니다.
• Firebase의 실시간 업데이트를 웹 앱에서 살펴봅니다.

기본 요건

이 실습은 중급 수준이며 Cloud 콘솔 및 셸 환경에 익숙하다는 가정하에 진행됩니다. Firebase 사용 경험이 있으면 도움이 되지만 필수는 아닙니다. 이 실습을 시작하기 전에 다음 실습을 완료하는 것이 좋습니다.

• Firestore 데이터베이스로 데이터 가져오기

파일 편집에도 익숙해야 합니다. 자주 사용하는 텍스트 편집기(nano, vi 등) 또는 상단 리본에서 찾을 수 있는 Cloud Shell의 코드 편집기를 실행할 수 있습니다.

준비가 되면 아래로 스크롤하여 아래 단계에 따라 실습 환경을 설정하세요.

작업 1. Firebase 환경 프로비저닝

루비가 패트릭에게 이메일을 보냅니다.

루비, 소프트웨어 컨설턴트	패트릭님, 안녕하세요. 지난주에는 정말 수고 많으셨습니다. 병원 데이터가 Firestore로 마이그레이션되었다니 기쁘네요. 이제 Firebase를 사용하여 Pet Theory 웹사이트를 호스팅해야 할 것 같습니다. 루비
패트릭, IT 관리자	루비님, 안녕하세요. Firebase 호스팅에 대해서는 들어본 적이 없는데 어떤 이점이 있나요? 어떻게 시작하면 되죠? 패트릭
루비, 소프트웨어 컨설턴트	패트릭님, 안녕하세요. Firebase 호스팅은 서버리스여서 관리할 인프라가 없다는 주요 이점이 있습니다. 보안 규칙도 애플리케이션에 기본 제공되므로 고객 데이터를 처리할 때 발생하는 문제를 최소화하기 위해 권한을 제한할 수 있죠. '사용한 만큼만 지불'하는 모델인 Firebase는 Pet Theory의 사용 사례에 적합한 포괄적인 모바일 개발 플랫폼입니다. 루비
패트릭, IT 관리자	루비님, 안녕하세요. Firebase를 사용하면 제가 맡고 있는 업무의 큰 부분인 보안 및 인프라 관리가 훨씬 쉬워질 것 같네요. 유휴 상태인 서버에는 비용이 청구되지 않는다는 점도 흥미롭고요. 패트릭

루비는 패트릭에게 이메일로 몇 가지 배경 정보를 보내고 두 사람은 회의를 열어 주요 활동을 결정합니다. 이 회의에서는 패트릭이 진행해야 할 다음 작업을 결정합니다.

• Firestore CLI를 Google Cloud 프로젝트에 추가합니다.
• Firestore 데이터베이스를 만듭니다.
• Firebase 프로젝트를 구성합니다.
• 보안 정책을 수립합니다.

다음으로, 패트릭을 도와 이러한 작업을 완료하세요.

작업 2. Firebase CLI 설치

참고: Firebase 도구를 통해 개발 환경이 사전 구성되었을 가능성이 있습니다.

1. '실습 세부정보' 패널에서 IDE 링크를 복사하고 새 브라우저 탭에 붙여넣어 Cloud Code를 엽니다.

2. 터미널을 열어 명령줄에 액세스합니다. 왼쪽 패널에서 애플리케이션 메뉴() > 터미널 > 새 터미널을 클릭합니다.

3. 명령줄에서 GitHub 저장소를 클론합니다.

git clone https://github.com/rosera/pet-theory.git

4. 왼쪽 패널에서 탐색기 아이콘을 클릭한 다음 폴더 열기 > pet-theory > lab02를 클릭합니다. 확인을 클릭합니다.

5. 터미널을 엽니다.

6. 필요한 노드 패키지를 설치합니다.

npm i && npm audit fix --force

출력:

+ firebase-tools@10.7.0 added 3 packages from 11 contributors, removed 1 package and updated 8 packages in 79.808s

이제 Firestore 데이터베이스를 만들 준비가 되었습니다.

작업 3. Firestore 데이터베이스 설정

터미널에서 Firestore 데이터베이스를 사용할 환경을 준비합니다.

1. 프로젝트 리전을 으로 설정합니다.

gcloud config set compute/region {{{project_0.default_region|REGION}}}

2. App Engine 애플리케이션을 사용 설정합니다.

   gcloud app create --region={{{project_0.startup_script.app_region|REGION}}}

3. Firestore 데이터베이스를 만듭니다.

   gcloud firestore databases create --region={{{project_0.startup_script.app_region|REGION}}}

이제 Firestore 프로젝트를 만들어 Google Cloud 계정에 연결할 준비가 되었습니다.

작업 4. Firebase 프로젝트 만들기

시크릿 창에서 Firebase Console을 엽니다.

참고: 실습에는 Firebase 사용 권한이 포함됩니다. Firebase Console 링크를 복사하여 Firebase에 액세스합니다. 실습에서 제공하는 사용자 이름/비밀번호를 사용하여 Firebase에 인증합니다.

1. 페이지 오른쪽 상단의 계정 아이콘을 클릭하여 이 실습에 프로비저닝된 Qwiklabs 수강생 계정인지 확인합니다.

2. 그런 다음 프로젝트 추가를 클릭합니다. 프로젝트 이름에 관한 메시지가 표시되면 드롭다운 메뉴의 프로젝트 ID를 사용합니다.

3. Firebase 약관에 동의하고 계속을 클릭합니다. '사용한 만큼만 지불' 요금제를 확인합니다.

4. 계속을 클릭하고 다음 페이지에서 Firebase 프로젝트의 Google 애널리틱스를 사용 중지합니다.

5. 그런 다음 Firebase 추가를 클릭합니다. 새 프로젝트가 준비되었다는 메시지가 표시되면 계속을 클릭합니다.

완료된 작업 테스트하기

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.

Firebase 프로젝트 만들기

작업 5. 앱 등록

마지막 단계를 완료하면 Firebase Console로 이동하게 됩니다. 해당 페이지를 닫은 경우 다른 시크릿 탭을 열어서 Firebase Console 링크를 사용합니다.

1. '앱에 Firebase를 추가하여 시작하기' 아이콘 목록에서 웹 아이콘(아래에 강조 표시됨)을 선택합니다.

2. '앱 닉네임'에 관한 메시지가 표시되면 Pet Theory를 입력합니다.

3. 그런 다음 '이 앱의 Firebase 호스팅도 설정합니다' 옆의 체크박스를 선택합니다.

4. 앱 등록 버튼을 클릭합니다.

5. 다음 > 다음 > Console로 이동을 클릭합니다. 그러면 다음 페이지가 표시됩니다.

프로젝트에 대한 Firebase를 구성했습니다. 다음으로는 Firebase 호스트를 참조할 프로젝트를 초기화합니다.

완료된 작업 테스트하기

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.

앱 등록

작업 6. Firebase에 인증 및 배포

IDE를 사용하여 Firebase에 연결하고 애플리케이션을 배포합니다. 편집기에서 사용 가능한 터미널에 명령을 입력합니다.

1. Firebase에 인증합니다.

firebase login --no-localhost

2. Firebase에서 오류 보고 정보를 수집할 수 있는지 묻는 메시지가 표시되면 Y를 입력하고 Enter 키를 누릅니다.

3. 새 시크릿 모드 브라우저 탭에 생성된 URL을 복사하여 붙여넣고 Enter 키를 누릅니다(오류의 링크 결과 직접 클릭).

4. 실습 계정을 선택한 다음 허용을 클릭합니다. 계속하려면 예, 방금 이 명령어를 실행했습니다를 클릭합니다. 그런 다음 예, 세션 ID입니다를 클릭하여 세션 ID를 확인합니다. 그러면 액세스 코드가 주어집니다.

5. 액세스 코드를 복사하여 Cloud Shell 프롬프트 승인 코드 입력:에 붙여넣은 다음 Enter 키를 누릅니다. 다음과 유사한 응답이 출력됩니다.

출력:

✔ Success! Logged in as gcpstaging86673_student@qwiklabs.net

6. 이제 현재 작업 디렉터리에서 새 Firebase 프로젝트를 초기화합니다.

firebase init

이 명령어를 실행하면 프로젝트 디렉터리와 Firebase 제품에 대한 단계별 설정 과정이 안내됩니다.

7. 이 폴더에 설정하고 싶은 Firebase CLI 기능을 선택하라는 메시지가 표시됩니다. 화살표 키와 스페이스바를 사용하여 Firestore 및 호스팅을 선택합니다. 셸이 다음과 일치하는지 확인한 다음 Enter 키를 누릅니다.

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage

8. 그런 다음 나머지 단계에 따라 Firebase를 구성합니다.

• 아래쪽 화살표 키를 눌러 기존 프로젝트 사용으로 이동 후 Enter 키를 누릅니다.
• 목록에서 Qwiklabs 프로젝트 ID('qwiklabs-gcp-'로 시작되는 ID)를 선택한 다음 Enter 키를 누릅니다.
• Enter 키를 누른 다음 N을 눌러 firestore.rules 파일을 유지합니다.
• Enter 키를 누른 다음 Y를 눌러 firestore.indexes.json 파일을 유지합니다.
• 공개 디렉터리를 유지하기 위해 Enter 키를 누른 다음 /index.html 파일에 대한 다시 쓰기를 허용하지 않도록 N을 누릅니다.
• 'GitHub로 자동 빌드 및 배포를 설정하시겠습니까?'라는 메시지에서 Enter 키를 누른 다음 N을 누릅니다.
• 404.html 파일을 덮어쓸지에 관한 메시지가 나타나면 N을 입력합니다.
• index.html 파일을 덮어쓸지에 관한 메시지가 나타나면 N을 입력합니다.

다음과 같은 출력이 표시됩니다.

✔ Wrote public/404.html ✔ Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebase... i Writing gitignore file to .gitignore... ✔ Firebase initialization complete!

이제 로컬 구성이 완료되었습니다. 이제 서비스 간에 액세스를 제공하기 위해 데이터베이스 인증 단계가 요구됩니다.

작업 7. 인증 및 데이터베이스 설정

Firebase Console로 돌아가 이 단계를 완료합니다.

1. 왼쪽 탐색 메뉴에서 프로젝트 개요 버튼을 클릭합니다.

2. 인증 타일을 선택한 다음 시작하기를 클릭합니다.

3. 로그인 제공업체를 클릭한 다음 Google 항목을 클릭합니다.

4. 오른쪽 상단의 프로젝트 지원 이메일에서 사용 설정 전환 버튼을 클릭하고 드롭다운 목록에서 실습 계정을 선택합니다. 이제 다음과 유사한 페이지가 나타납니다.

5. 위의 내용을 확인했으면 저장 버튼을 클릭합니다.

Firestore 인증을 설정했습니다. 다음 단계에서는 Firebase로 애플리케이션을 호스팅합니다.

완료된 작업 테스트하기

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.

인증 및 데이터베이스 설정

작업 8. 시나리오: 애플리케이션 설정

여러분은 패트릭을 도와 웹 개발자가 코드를 배포할 수 있는 Firebase 호스팅 환경을 설정했습니다. 하지만 패트릭은 Firebase 인증을 사용 설정하거나 Firebase에 코드를 배포해 본 적이 없어서 루비에게 도움을 요청하는 이메일을 보냅니다.

패트릭, IT 관리자	루비님, 안녕하세요. 알려주신 모든 팁에 감사드립니다. Firebase 환경 설정은 모두 완료된 것 같습니다. 다음으로 웹사이트 개발자의 코드를 배포해야 하는데요. 코드 배포에 필요한 게 무엇인지 그리고 이제 무엇을 해야 하는지 알려주실 수 있을까요? 패트릭
루비, 컨설턴트	패트릭님, 안녕하세요. 다행입니다. 애플리케이션을 실행하고 다음 기능을 추가하는 방법을 보내 드릴게요. 로그인을 위한 웹 인증 설정 기능 프로필 페이지에 고객 세부정보를 기록하는 기능 예약을 위한 셀프서비스 포털을 구축하는 기능 루비
패트릭, DevOps 엔지니어	루비님, 안녕하세요. 처리할 작업이 꽤 많겠네요. 새로운 기능을 추가할 때마다 구조적 변경이 필요할까요? 업데이트를 확인하는 데 걸리는 시간도 상당하겠네요. 패트릭
루비, 컨설턴트	패트릭님, 안녕하세요. 까다로운 작업은 대부분 Firebase 라이브러리로 처리할 수 있어요. 브라우저에서 업데이트를 확인하는 작업은 명령줄에서 firebase deploy를 호출하는 것만큼 간단합니다. 변경과 배포를 진행한 후 웹사이트에서 변경사항을 확인하세요. 루비
패트릭, IT 관리자	루비님, 안녕하세요. 정말 안심이 되네요. Firebase 호스팅이 점점 좋아집니다. :-) 패트릭

패트릭이 필요한 작업을 잘 이해했으니 이제 패트릭을 도와 Pet Theory를 Firebase 애플리케이션으로 배포하세요.

작업 9. Firestore 인증 구성 및 웹 앱에 로그인 기능 추가

이 단계를 수행하려면 터미널로 돌아가야 합니다. 이전 Firebase 초기화에서 사용한 명령줄 세션이 아직 열려 있을 것입니다.

1. 다음 명령어를 실행하여 lab02 디렉터리의 폴더와 파일을 나열합니다.

ls -1

2. 출력이 다음과 비슷한지 확인합니다.

README.md firebase.json firestore.indexes.json firestore.rules node_modules package-lock.json package.json public solution

3. 코드 편집기를 사용하여 pet-theory/lab02/firestore.rules를 엽니다.

rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{email} { allow read, write: if request.auth.token.email == email; } match /customers/{email}/{document=**} { allow read, write: if request.auth.token.email == email; } } } 참고: 이 구성은 Firestore 데이터베이스 사용자가 자체 데이터에만 액세스할 수 있도록 합니다. firestore.rules 파일은 Firestore 데이터베이스 보안을 제공하는 데 사용됩니다. Firestore 데이터베이스 보안에 대해 자세히 알아보세요.

작업 10. 애플리케이션 배포

모든 변경사항이 적용되면 애플리케이션을 배포할 수 있습니다. 아직 pet-theory/lab02 폴더에 있어야 합니다.

1. 다음 명령어를 실행하여 Firebase 애플리케이션을 배포합니다.

firebase deploy

출력:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

2. 다음 호스팅 URL([PROJECT-ID].web.app과 유사해야 함)을 복사하여 새 탭에서 엽니다.
3. Google 계정으로 로그인 버튼을 클릭합니다.

참고: 브라우저가 지원되지 않거나 서드 파티 쿠키 및 데이터가 사용 중지되었다는 오류가 나타날 경우 사용 중인 브라우저에 쿠키가 사용 설정되었는지 확인해야 합니다. 이렇게 하려면 Chrome에서 URL 탭의 맨 오른쪽에 있는 눈 모양 아이콘을 클릭하고 팝업의 파란색 링크를 따라 이동합니다. 사이트가 작동하지 않나요?라는 링크를 클릭하여 쿠키를 수락하도록 브라우저 설정을 업데이트합니다.

4. Google 계정을 선택합니다. 다음 페이지가 열립니다.

참고: 비밀번호 관리는 매우 까다로운 작업이며, 회사가 추가적인 위험에 노출되는 결과로 이어질 수도 있습니다. 그리고 사용자는 사용자 ID와 비밀번호를 추가로 만들고 싶어 하지 않습니다.

Pet Theory처럼 규모가 작은 회사에는 이를 위한 리소스나 기술 역량이 부족합니다. 이러한 경우 애플리케이션 사용자가 기존의 Google 계정(또는 다른 ID 공급업체)을 사용해 로그인하도록 하는 편이 훨씬 낫습니다.

사용자가 Google 인증을 사용하여 예약 앱에 액세스할 수 있도록 코드를 배포했습니다.

작업 11. 웹 앱에 고객 페이지 추가

터미널로 돌아가서 편집기를 사용하여 public 폴더에서 파일을 봅니다.

1. customer.js 파일을 열고 다음 코드를 복사하여 붙여넣습니다.

let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })

2. styles.css 파일을 열고 다음 코드를 붙여넣습니다.

body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }

3. 명령줄에서 다음 명령어를 실행합니다.

firebase deploy

출력:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

4. 애플리케이션 탭에서 CMND+Shift+R(Mac) 또는 Ctrl+Shift+R(Windows) 키를 눌러 페이지를 강제로 새로고침합니다. 단순한 새로고침으로는 필요한 업데이트가 표시되지 않습니다. 고객 정보를 입력합니다. 가상의 이름과 전화번호를 입력한 다음 프로필 저장을 클릭합니다.

5. Firebase Console로 돌아간 다음 빌드 > Firestore 데이터베이스를 클릭하여 저장된 프로필 정보를 봅니다.

6. 웹 앱 페이지로 돌아가서 예약 링크를 클릭합니다. 아직 예약 코드를 배포하지 않았으므로 빈 페이지가 표시됩니다.

완료된 작업 테스트하기

내 진행 상황 확인하기를 클릭하여 목표를 확인합니다.

웹 앱에 고객 페이지 추가

작업 12. 사용자의 방문 예약 허용

사용자가 방문 일정을 예약할 수 있는 페이지를 빌드합니다.

1. '코드 편집기' 탭으로 돌아갑니다. public 디렉터리의 파일 2개에 코드를 추가합니다.

2. 사이드 메뉴에서 appointments.html을 선택하고 다음 코드를 붙여넣습니다.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pet Theory appointments</title> <script src="/__/firebase/6.4.2/firebase-app.js"></script> <script src="/__/firebase/6.4.2/firebase-auth.js"></script> <script src="/__/firebase/6.4.2/firebase-firestore.js"></script> <script src="/__/firebase/init.js"></script> <link type="text/css" rel="stylesheet" href="styles.css" /> </head> <body> <div id="message"> <h2>Scheduled appointments</h2> <div id="appointments"></div> <hr/> <h2>Schedule a new appointment</h2> <select id="timeslots"> <option value="0">Choose time</option> </select> <br><br> <button id="makeAppointment">Schedule</button> </div> <script src="appointments.js"></script> </body> </html>

3. 이제 appointments.js 파일을 열고 다음 코드를 붙여넣습니다.

let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); const appColl = db.collection('customers').doc(user.email).collection('appointments'); appColl.orderBy('time').onSnapshot(function(snapshot) { const div = document.getElementById('appointments'); div.innerHTML = ''; snapshot.docs.forEach(appointment => { div.innerHTML += formatDate(appointment.data().time) + '<br/>'; }) if (div.innerHTML == '') { div.innerHTML = 'No appointments scheduled'; } }); } }); const timeslots = document.getElementById('timeslots'); getOpenTimes().forEach(time => { timeslots.add(new Option(formatDate(time), time)); }); document.getElementById('makeAppointment').addEventListener('click', function(ev) { const millis = parseInt(timeslots.selectedOptions[0].value); if (millis > 0) { const db = firebase.firestore(); db.collection('customers').doc(user.email).collection('appointments').add({ time: millis }) timeslots.remove(timeslots.selectedIndex); } }) function getOpenTimes() { const retVal = []; let startDate = new Date(); startDate.setMinutes(0); startDate.setSeconds(0); startDate.setMilliseconds(0); let millis = startDate.getTime(); while (retVal.length < 5) { const hours = Math.floor(Math.random() * 5) + 1; millis += hours * 3600 * 1000; if (isDuringOfficeHours(millis)) { retVal.push(millis); } } return retVal; } function isDuringOfficeHours(millis) { const aDate = new Date(millis); return aDate.getDay() != 0 && aDate.getDay() != 6 && aDate.getHours() >= 9 && aDate.getHours() <= 17; } function formatDate(millis) { const aDate = new Date(millis); const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; return days[aDate.getDay()] + ' ' + aDate.getDate() + ' ' + months[aDate.getMonth()] + ', ' + aDate.getHours() + ':' + (aDate.getMinutes() < 10? '0'+aDate.getMinutes(): aDate.getMinutes()); }

4. 파일이 빌드되었으니 변경사항을 확인합니다. Cloud Shell에서 다음 명령어를 실행하여 애플리케이션을 배포합니다.

firebase deploy

출력:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

5. 이전에 빈 페이지가 표시되었던 웹 앱 탭을 새로고침합니다. 이제 방문 일정을 두어 개 예약해 봅니다.

6. 이제 Firebase Console로 이동하여 빌드 > Firestore 데이터베이스를 클릭하고 사용자 아래에서 방금 생성한 appointments 모음을 선택합니다.

7. 다음과 유사한 예약 코드 모음이 표시됩니다.

작업 13. Firestore 실시간 업데이트 보기

Firestore는 실시간 데이터베이스입니다. 이를 활용할 수 있도록 애플리케이션에 실시간 업데이트를 추가합니다.

1. 새 브라우저 탭을 열어 [프로젝트 ID].web.app을 마우스로 가리킨 다음 Google 버튼을 사용하여 로그인하고 예약을 클릭합니다.

2. 두 브라우저 탭을 나란히 배치합니다. 첫 번째 브라우저 창에서 새 방문 일정을 예약합니다.

3. 다른 브라우저 탭에서 새로고침하지 않아도 예약이 자동으로 추가된 것을 볼 수 있습니다.

정말 유용한 기능입니다. Firestore는 사용자가 새로고침하거나 다시 로드할 필요 없이 클라이언트(웹 앱 및 기본 모바일 앱)를 실시간으로 업데이트합니다.

4. Firebase Console로 이동한 다음 Cloud Firestore에서 데이터 탭을 클릭하고 데이터를 편집합니다. 심지어 사용자 레코드에 있는 appointments 모음을 삭제할 수도 있습니다. 두 브라우저 창 모두 실시간으로 계속 업데이트됩니다.

수고하셨습니다

이번 실습에서는 Firebase를 사용하여 강력한 서버리스 웹 애플리케이션을 만들어 보았습니다. Firebase 프로젝트를 만들고 구성한 후 Firestore 보안을 추가하여 서버 측 인증 및 승인을 자동화했습니다. 그런 다음 웹 앱에 Google 로그인 기능을 추가하고 사용자가 연락처 정보와 예약을 추가할 수 있도록 데이터베이스를 구성했습니다. 마지막으로, 사용자가 방문 일정을 예약할 수 있게 하는 코드를 살펴본 후 배포했으며, 웹 앱에서 Firebase의 실시간 업데이트를 확인했습니다. 수강생 여러분은 이제 이 학습 경로에서 추가적인 실습을 진행할 준비가 되었습니다.

다음 단계/더 학습하기

• Google Cloud - 서버리스란?

Google Cloud 교육 및 자격증

Google Cloud 기술을 최대한 활용하는 데 도움이 됩니다. Google 강의에는 빠른 습득과 지속적인 학습을 지원하는 기술적인 지식과 권장사항이 포함되어 있습니다. 기초에서 고급까지 수준별 학습을 제공하며 바쁜 일정에 알맞은 주문형, 실시간, 가상 옵션이 포함되어 있습니다. 인증은 Google Cloud 기술에 대한 역량과 전문성을 검증하고 입증하는 데 도움이 됩니다.

설명서 최종 업데이트: 2024년 1월 30일

실습 최종 테스트: 2023년 1월 8일

Copyright 2024 Google LLC All rights reserved. Google 및 Google 로고는 Google LLC의 상표입니다. 기타 모든 회사명 및 제품명은 해당 업체의 상표일 수 있습니다.