Working with Google's Remote Services

 

We will go through the following steps to enable our server to access Google's Cloud Services:

• Create Google Credentials
• Create Firebase Project
• Creating a Storage Project
• Enabling a Database

Getting Started

For this exercise we will be working with three projects within module06_examples so make sure you have downloaded the latest version from Gitlab:

• Logging in with OAuth: multiuser_favorite_colors
  
• Storing "large" data: image_storage
• Saving JSON data in a Database: url_list

These apps are all complete except for the secrets needed to access their relevant Google Cloud service. Thus, this exercise will focus on creating a project, setting options in Google Cloud services, and downloading the appropriate JSON configuration information to access them within your server code.

Note, if you have not already done so at some point in your life, create a Google account (or make a separate one for experimenting in this course).

Create Google Credentials

Start by setting up the colors example:

cd multiuser_favorite_colors
npm install

Currently, you should be able to run it only using the local-only NPM Script — using start should result in the error below:

This "local only" mode allows you to easily test your project with a set of predefined users and passwords. When you press the "Login" link on the page in the browser, a modal form should appear where you can enter the login information for either "alice" or "bob". If you have not already done so, spend some experimenting with the project to better understand how it works.

Visit Google Cloud's Credentials Console to make the necessary secret information to fix the OAUTH error by enabling access to Google login credentials for your app:

1. Choose Create Credentials -> OAuth Client ID
   
2. Choose Web Application for Application Type
   
3. Give it a more useful name if you want (I chose "CompSci 290 Example")
4. Add an authorized Redirect URI to exactly match the one used in the current app (http://localhost:9995/auth/google/redirect)
   
   Note, for your final project, you will also need to add a URL that matches your Heroku app (but you can do that later when you are ready)
5. Save these options and then Download a JSON representation of them
   
6. Then we recommend copying the text of the JSON object into this project's secrets.js file (rather than importing the file into code) since that provides one file for your secrets that can be easily ignored when pushing to GIT.

You can check that the app can now login using your Google account by stopping the local-only version of the server (using Crtl-C) and running a new one using the start NPM Script. This time it should not produce any errors and, when you you press the Login link, you should be redirected to a Google login form to enter your actual Google account email and password (which is okay because the password will never be seen by this app).

Spend some more time experimenting with the project to better understand how this "production-ready" version works. When you are done experimenting, you can stop the running the server (Ctrl-C) since we will not be interacting with it anymore.

Create Firebase Project

Enabling OAuth Credentials requires only minimal interaction with Google's services, but to use its other services requires making a project (because Google needs to allocate resources for it).

Visit Google's Firebase Console to create a project (Firebase used to be the name of just its Realtime Database, but now it is an umbrella term for a number of free services):

1. Create a new project and give it a name (I chose "CompSci 290 Example")
   
2. Enable Analytics by simply clicking Continue (which simply maintains information on how and when your services are accessed)
3. Select the Default Account for Firebase to Configure Google Analytics and then click Create Project
4. Wait a few minutes :)

Once the project has been created, we will need to get the necessary secret information to connect to it:

1. Go to the Project's Settings under the gear icon in the top left corner next to the label Project Overview
   
2. Select the tab Service Accounts
   
3. Make sure Node.js is the selected type for the configuration snippet and click on Generate New Private Key to download the JSON data
   
4. Then we recommend copying the text of the JSON object into both the image_storage/server/secrets.js and url_list/server_db/secrets.js files (however, for your final project there will likely be only one backend server).

Creating a Storage Project

Start by setting up the images example:

cd ../image_storage/server
npm install
cd ../ui
npm install

Now that your secret keys have "connected" your server to your new Google Firebase project, you will need to let Google know you intend to use the Storage feature by creating a new bucket:

1. Click on the Storage tab from the options in the left column and then click Get Started
2. Use the default security rules by simply clicking Next
3. Use the default storage location by simply clicking Done
4. Wait for a few minutes :)
5. To match the expectations of the existing web app, create a new top-level folder called images in the newly created bucket
   

Now you should be able to run the backend server, using the start NPM Script in the project's server folder, and verify it is working by visiting http://localhost:3000/ in your browser (it should return a list of just one item, the folder you just created, rather than an error message). You can also run the frontend UI server, using the serve NPM Script in the project's ui folder, to add new images that will be saved in your new online project!

Spend some more time experimenting with the project to better understand how this project works. When you are done experimenting, you can stop the running the server (Ctrl-C) since we will not be interacting with it anymore.

Also, feel free to visit the public "class version" of this app and contribute a clean image of your own to be shared with others!

Enabling a Database

Start by setting up the url_list example:

cd ../url_list/server_db
npm install
cd ../ui
npm install

Now that your secret keys have "connected" your server to your new Google Firebase project, you will need to let Google know you intend to use the Realtime Database feature by enabling it:

1. Click on the Realtime Database tab from the options in the left column and then click Create Database
2. Use the default storage location by simply clicking Next
3. Select the option Start in Test Mode for the security rules for these projects and then click Enable
4. This should be setup almost instantaneously!
5. To match the expectations of the existing web app, create a new top-level item called data in the newly created database or upload this starting example data
   

Now you should be able to run the backend server, using the start NPM Script in the project's server_db folder, and verify it is working by visiting http://localhost:3000/ in your browser (it should return the contents you just added to the database, rather than an error message). You can also run the frontend UI server, using the serve NPM Script in the project's ui folder, to add new links that will be saved in your new online database!

Spend some more time experimenting with the project to better understand how this project works. When you are done experimenting, you can stop the running the server (Ctrl-C) since we will not be interacting with it anymore.

Also, feel free to visit the public "class version" of this app and contribute a clean link of your own to be shared with others!