This sample demonstrates how to use Google Cloud Firestore on Google App Engine standard environment.
Run the following command to clone the Github repository:
git clone https://github.com/GoogleCloudPlatform/hackathon-toolkit.git
Change directory to the sample code location:
cd hackathon-toolkit/firestore
- Open the Firebase Console and create a new project.
- On the left navigation bar, click
Develop
, then clickDatabase
, then clickCreate Database
. - Click the button for
Start in test mode
, then clickEnable
. - On the left navigation bar at the top, click
Project Overview
.- Under
Get started by adding Firebase to your app
, click the</>
button. This will help you add Firebase to your web app. - Set an
App nickname
and pressNext
. - Copy everything from the
var firebaseConfig = {
line down to the};
line.
- Under
- In the
templates/homepage.html
code file, find the// Firebase Configuration - REPLACE WITH YOUR OWN VALUES
comment and replace the existing config values with your own config values that you just copied from the Firebase console. Make sure to fix the spacing. - In the
templates/dashboard.html
code file, find the// Firebase Configuration - REPLACE WITH YOUR OWN VALUES
comment and replace the existing config values with your own config values that you just copied from the Firebase console. Make sure to fix the spacing.
In the Firebase Console, click Database
on the left navigation bar.
- Click
Start Collection
.- Set
Collection ID
toanswers
and pressNext
.
- Set
- Next you will create your first document for this collection.
- Set the
Document ID
to besunsetPhoto
. - Name your field
answers
and change the type toarray
. - Add a few array
string
values likesunset
,beach
,ocean
, andtree
.- (These will be your sample correct answers for the app.)
- Click
Save
to create your new collection.
- Set the
- Click
Start Collection
again.- Set
Collection ID
toscores
and pressNext
.
- Set
- Next you will create your first document for this collection.
- Set the
Document ID
to begroupScore
.- Name your field
correct
, change its type tonumber
, and set its value to be0
. - Click the
Add field
button to create another field namedincorrect
, with type ofnumber
, and a value of0
.
- Name your field
- Click
Save
to create your new collection.
- Set the
Congrats! Your Cloud Firestore database is all set up for this sample app.
Set up your virtual environment:
virtualenv env
Note: If you do not already have virtualenv
installed, run sudo easy_install pip
and then pip install virtualenv
.
Enter your virtual environment:
source env/bin/activate
Install dependencies:
pip install -r requirements.txt
Test your application locally:
python main.py
Visit localhost:8080
to view your application running locally. The root URL is where users play the game and guess which labels the Cloud Vision API detected for the photo. Visit localhost:8080/dashboard
to view the dashboard for a summary of scores and guesses and a demonstration of the realtime aspect of the app.
Press Control-C
from command line when you are finished.
When you are ready to leave your virtual environment:
deactivate
Download the Google Cloud SDK command line tool, also known as gcloud
.
Initialize gcloud, selecting your Google account and project ID (the same one you created in the Firebase console):
gcloud init
Deploy your application to App Engine (takes 10-20 seconds).
gcloud app deploy
Once it finishes deploying, visit your app at YOUR_PROJECT_ID.appspot.com
and YOUR_PROJECT_ID.appspot.com/dashboard
.