About
The Graph Blitz Website was just as much about learning the basics of and how to use cloud services (Google Cloud Platform in particular) as it was about creating a homepage for my Android application. There were a few challenges, but in the end I learnt a lot. On this page I'll give a brief overview of how the site works and the tools used to build it.
Front End
The site is written with HTML, CSS (using SASS and Bulma). The 'Total Games Played' and 'Win Ratio' statistics are updated by using Javascript to fetch data from a Firestore database. The site is static and stored in a Google Cloud Storage bucket.
The site will cache the gameplay data. It will only pull new data from Firestore if there has been an update to the database since the last time the site retrieved (and then cached) data. By caching data we reduce the number of hits to Firestore. For our uses the number of hits saved is small, but still worthwhile to reduce costs.
The site itself is hosted using Firebase Hosting, with a custom domain name pointing at it. This provides a simple and cost-effective way of hosting the site.
Back End
When a user plays (and finishes) a game in the Graph Blitz app the app sends an HTTP POST request to a custom API built-in Cloud Functions. The Cloud Function API updates the Firestore (database) document, which tracks the total games won and lost. An API Gateway manages access to said Cloud Function API by only allowing access to authorised users. The Graph Blitz app uses an API key, which is only valid from this Android app, for its authorisation.
There is also a small cloud function that tracks the last time the Firestore database has been updated. It does this with a Firestore update trigger and then writing the update time to a field in the database.
CI/CD
Pushing to the GitHub repo that contains the site activates a GitHub action, which automatically builds the site (CSS via SASS and JS via Webpack/Bulma) and uploads it to Firebase Hosting.
The Cloud Function API is stored in a Cloud Source repository, which is connected to GitHub repository. This means that when I push to the GitHub repository the Cloud Function is automatically updated.
