GSP344

Overview

In a challenge lab you’re given a scenario and a set of tasks. Instead of following step-by-step instructions, you will use the skills learned from the labs in the course to figure out how to complete the tasks on your own! An automated scoring system (shown on this page) will provide feedback on whether you have completed your tasks correctly.

When you take a challenge lab, you will not be taught new Google Cloud concepts. You are expected to extend your learned skills, like changing default values and reading and researching error messages to fix your own mistakes.

To score 100% you must successfully complete all tasks within the time period!

This lab is recommended for students who are enrolled in the Develop Serverless Apps with Firebase course. Are you ready for the challenge?

Setup and requirements

Before you click the Start Lab button

Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources will be made available to you.

This hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access Google Cloud for the duration of the lab.

To complete this lab, you need:

• Access to a standard internet browser (Chrome browser recommended).

Note: Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.

• Time to complete the lab---remember, once you start, you cannot pause a lab.

Note: If you already have your own personal Google Cloud account or project, do not use it for this lab to avoid extra charges to your account.

Provision the environment

1. Link to the project:

gcloud config set project $(gcloud projects list --format='value(PROJECT_ID)' --filter='qwiklabs-gcp')

2. Clone the repo:

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

Challenge scenario

In this lab you will create a frontend solution using a Rest API and Firestore database. Cloud Firestore is a NoSQL document database that is part of the Firebase platform where you can store, sync, and query data for your mobile and web apps at scale. Lab content is based on resolving a real world scenario through the use of Google Cloud serverless infrastructure.

You will build the following architecture:

Task 1. Create a Firestore database

In this scenario you create a Firestore Database in Google Cloud. The high level architecture diagram below summarizes the general architecture.

Requirements:

Field	Value
Cloud Firestore	Native Mode
Location

Create a Firestore database

To complete this section successfully, you are required to implement the following:

• Cloud Firestore Database
• Use Firestore Native Mode
• Add location

Click Check my progress to verify that you've performed the above task. Create a Firestore Database

Task 2. Populate the database

In this scenario, populate the database using test data.

A high level architecture diagram below summarizes the general architecture.

Populate the database

Example Firestore schema:

Collection	Document	Field
data	70234439	[dataset]

The Netflix Shows Dataset includes the following information:

Field	Description
show_id:	Unique ID for every Movie / Tv Show
type:	Identifier - A Movie or TV Show
title:	Title of the Movie / Tv Show
director:	Director of the Movie
cast:	Actors involved in the movie / show
country:	Country where the movie / show was produced
date_added:	Date it was added on Netflix
release_year:	Actual Release year of the move / show
rating:	TV Rating of the movie / show
duration:	Total Duration - in minutes or number of seasons

To complete this section successfully, you are required to implement the following tasks:

1. Use the sample code from pet-theory/lab06/firebase-import-csv/solution:

npm install

2. To import CSV use the node pet-theory/lab06/firebase-import-csv/solution/index.js:

node index.js netflix_titles_original.csv Note: Verify the Firestore Database has been updated by viewing the data in the Firestore UI.

Click Check my progress to verify that you've performed the above task. Populate the Firestore Database

Task 3. Create a REST API

In this scenario, create an example REST API.

A high level architecture diagram below summarizes the general architecture.

Cloud Run development

Field	Value
Container Registry Image	rest-api:0.1
Cloud Run Service	netflix-dataset-service
Permission	--allow-unauthenticated

To complete this section successfully, you are required to implement the following tasks:

1. Access pet-theory/lab06/firebase-rest-api/solution-01.
2. Build and Deploy the code to Google Container Registry.
3. Deploy the image as a Cloud Run service.

Note: Deploy your service with 1 max instance to ensure you do not exceed the max limit for Cloud Run instances.

4. Go to Cloud Run and click netflix-dataset-service then copy the service URL:

• SERVICE_URL=copy url from your netflix-dataset-service
• curl -X GET $SERVICE_URL should respond with: {"status":"Netflix Dataset! Make a query."}

Click Check my progress to verify that you've performed the above task. Deploy and test the REST API

Task 4. Firestore API access

In this scenario, deploy an updated revision of the code to access the Firestore DB.

A high level architecture diagram below summarizes the general architecture.

Deploy Cloud Run revision 0.2

Field	Value
Container Registry Image	rest-api:0.2
Cloud Run Service	netflix-dataset-service
Permission	--allow-unauthenticated

To complete this section successfully, you are required to implement the following tasks:

1. Access pet-theory/lab06/firebase-rest-api/solution-02.
2. Build the updated application.
3. Use Cloud Build to tag and deploy image revision to Container Registry.
4. Deploy the new image a Cloud Run service.

Note: Deploy your service with 1 max instance to ensure you do not exceed the max limit for Cloud Run instances.

5. Go to Cloud Run and click netflix-dataset-service then copy the service URL:

• SERVICE_URL=copy url from your netflix-dataset-service
• curl -X GET $SERVICE_URL/2019 should respond with json dataset

Click Check my progress to verify that you've performed the above task. Deploy and test the Rest API

Task 5. Deploy the Staging Frontend

In this scenario, deploy the Staging Frontend.

A high level architecture diagram below summarizes the general architecture.

Deploy Frontend

Field	Value
REST_API_SERVICE	REST API SERVICE URL
Container Registry Image	frontend-staging:0.1
Cloud Run Service	frontend-staging-service

To complete this section successfully, you are required to implement the following tasks:

1. Access pet-theory/lab06/firebase-frontend.
2. Build the frontend staging application.
3. Use Cloud Build to tag and deploy image revision to Container Registry.
4. Deploy the new image as a Cloud Run service.

Note: Deploy your service with 1 max instance to ensure you do not exceed the max limit for Cloud Run instances.

5. Frontend access to Rest API and Firestore Database.
6. Access the Frontend Service URL.

Note: It's using a demo dataset to provide the onscreen entries.

Click Check my progress to verify that you've performed the above task. Deploy the staging frontend

Task 6. Deploy the Production Frontend

In this scenario, update the Staging Frontend to use the Firestore database.

A high level architecture diagram below summarizes the general architecture.

Deploy Frontend

Field	Value
REST_API_SERVICE	REST API SERVICE URL
Container Registry Image	frontend-production:0.1
Cloud Run Service	frontend-production-service

To complete this section successfully, you are required to implement the following tasks:

1. Access pet-theory/lab06/firebase-frontend/public.
2. Update the frontend application i.e. app.js to use the REST API.
3. Don't forget to append the year to the SERVICE_URL.
4. Use Cloud Build to tag and deploy image revision to Container Registry.
5. Deploy the new image a Cloud Run service. Note: Deploy your service with 1 max instance to ensure you do not exceed the max limit for Cloud Run instances.
6. Frontend access to Rest API and Firestore Database.

Now that the services have been deployed you will be able to see the contents of the Firestore database using the frontend service.

Click Check my progress to verify that you've performed the above task. Deploy the production frontend

Congratulations!

Congratulations! In this lab, you have successfully created a Firestore database, populated it with data, created a REST API, and deployed a frontend application that interacts with the Firestore database and REST API. You also learned how to deploy a staging and production frontend application.

Earn your next skill badge

This self-paced lab is part of the Develop Serverless Apps with Firebase skill badge course. Completing this skill badge course earns you the badge above, to recognize your achievement. Share your badge on your resume and social platforms, and announce your accomplishment using #GoogleCloudBadge.

Google Cloud training and certification

...helps you make the most of Google Cloud technologies. Our classes include technical skills and best practices to help you get up to speed quickly and continue your learning journey. We offer fundamental to advanced level training, with on-demand, live, and virtual options to suit your busy schedule. Certifications help you validate and prove your skill and expertise in Google Cloud technologies.

Manual Last Updated May 2, 2024

Lab Last Tested May 2, 2024

Copyright 2024 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.