How To Move My App To Google Cloud

Building a mobile app with Google Cloud Platform — BurgerApp

Background

As an engineer, I like to keep learning and refreshing my knowledge on things to keep my skills up to date. I wanted to build and launch an app to brush up on my app skills as this is an area that is moving fast and I haven't done too much on lately.

My favourite type of food is burgers, so I thou g ht it would be fun to create a social network for people who love burgers to review and share the burgers they are eating. It would also give me a great excuse to eat more burgers to test the app.

This is a high-level overview on how I approached building the app and why I decided to use the tools that I used. I mention a lot of services in here, so please feel free to reach out and ask any questions you have about any of them.

Please note, I worked on this project for fun and learning, not to build a company and try and get rich from burger reviews (although professional burger reviewer would be a great job).

React Native with Microsoft CodePush (and trialling Flutter)

I've been curious about Flutter as it's becoming more popular and I've been hearing good things about it. After playing around for a few days, I didn't feel like committing to Flutter for the app would provide anywhere near enough upside to outweigh my current knowledge and experience of building the app with React Native where I could reuse my JavaScript skills to build the Node.js API and potential future web app using React.

I thought Flutter was quite fun and interesting, but the community just isn't there yet, documentation isn't great so it just didn't make sense to continue with Flutter, so I decided to go with React Native.

Microsoft has a great tool called CodePush which makes it really easy to deploy code changes to your app, such as new features and bug fixes, without having to publish a new version of your app via the iOS and Android app stores when using React Native. It's free so I would completely recommend checking it out.

Design

I've never been a designer, so I looked to some popular apps for design inspiration.

Having worked for Skyscanner, who have recently went through a brand refresh (and have a super talented design team), I played around with the latest version of the app and noticed the use of white space, big, bold titles and the lack of the old, traditional app headers and footer icon navigation which definitely felt very modern, clean and really nice to use.

Airbnb is well known for having beautiful design, I went looking for inspiration in their app too. I found similar themes to the Skyscanner app with the white space, footer icon navigation, titles and again, no header bars.

Based on this research, I decided to follow these principles to create a clean, modern feeling app.

Design inspiration — Skyscanner & Airbnb

Google Cloud Platform

I've been using Google Cloud Platform for a few years now, mainly using Kubernetes (GKE), and fancied trying out some of their other services such as Cloud Run, Cloud Build and the Identity Platform. Here's what I used, why I used it, and what I learned along the way.

User Accounts with Identity Platform

I used Identity Platform for authentication for the app.

Identity Platform provides secure authentication with a variety of authentication methods such as email/password and social login.

The client library is very easy to set up and use (same as the Firebase library) and provides functionality for using tokens to send to the API to secure your API endpoints.

Identity Platform doesn't yet have 2-factor-authentication, but this is on the roadmap and will hopefully be available soon.

Storing images with Firebase Storage

To let the user upload their _amazing_ burger photos with their reviews, I used Firebase Storage to upload and store the images.

Firebase Storage integrates with Identity Platform which makes it really easy to set up permissions to secure your storage.

Once a file has been uploaded from the users device, a script is triggered to resize the image to make it easier on the network! This can be done a number of ways:

Cloud Storage triggers:
https://firebase.google.com/docs/functions/gcp-storage-events
Firebase Extensions:
https://firebase.google.com/products/extensions/storage-resize-images/
Manually on your API

I decided to include this functionality on the API for now to keep it simple, and so I can catch any errors and return feedback to the user on the event of anything going wrong. I could improve performance by doing this processing asynchronously using something like Cloud Functions, but for now I'm happy to keep it in the API and tackle this at a later date if required.

Running the API on Cloud Run

I needed somewhere to run the API. The API is a Node.js application which is packaged up as a Docker Container.

Cloud Run is a relatively new service from Google that is based on Knative, a "Kubernetes-based platform to build, deploy, and manage modern serverless workloads".

Cloud Run can run Docker containers either on your own clusters (using Anthos), or as a managed service. For this project, I opted for using the managed service so Google can take care of all of the infrastructure for me (thanks Google!).

Literally all you need to do to get started is to publish your Docker container (I deployed mine to Google Container Registry), adjust some config such as your auto-scaling min & max instances, CPU/Memory requirements, environment variables and you're good to go — easy!

I really enjoyed working with Cloud Run and plan to do another blog post soon to share my learnings in more detail.

Deploying the API with Cloud Build

Although deploying a new version of your service to Cloud Run is easy, I don't want to have to manually redeploy after every code change, so I set up Cloud Build to rebuild and deploy a new version automatically whenever code is merged into the master branch.

Cloud Build uses a simple configuration (YAML) file to specify the steps for the build. In this project, here are the steps I needed to do:

Docker Build
I tag my changes with latest and the short SHA — this is just personal preference

          - name: 'gcr.io/cloud-builders/docker'
            args: [
            'build',
            '-t', 'gcr.io/burgers-5c670/burger-api:latest',
            '-t', 'gcr.io/burgers-5c670/burger-api:$SHORT_SHA',
            '.'
            ]

Docker Push
Push my changes up to Google Container Registry

          - name: 'gcr.io/cloud-builders/docker'
            args: [ 'push', 'gcr.io/burgers-5c670/burger-api:latest' ]
- name: 'gcr.io/cloud-builders/docker'
            args: [ 'push', 'gcr.io/burgers-5c670/burger-api:$SHORT_SHA' ]

Deploy to Cloud Run
Deploy the new image (tagged with Short SHA) to the Burger API Cloud Run service

          - name: 'gcr.io/cloud-builders/gcloud'
            args: [
            'beta', 'run', 'deploy', 'burger-api',
            '--image', 'gcr.io/burgers-5c670/burger-api:$SHORT_SHA',
            '--platform', 'managed',
            '--region', 'europe-west1',
            '--allow-unauthenticated'
            ]

Saving data with Cloud SQL (vs Cloud Firestore)

Google Cloud Platform has a great selection of managed data stores that you can use to save your apps data. For me, I had to make the decision of going down the route of either using a SQL database, or a NoSQL database. I've used both for many years and would be comfortable developing using either option.

One of the advantages of using a NoSQL database is that you are able to store unstructured data, but this wasn't a requirement for this app.

Cloud Firestore integrates really well with the Identity Platform and would allow me to set permissions to the database easily. It has basic querying abilities and it would be possible to implement my data model although it would require more work than using a normalised database with SQL.

As the data is all predictable and structured, I decided to go with Cloud SQL (MySQL), although this was just my preference at the time and I would happily use either in future projects. I do enjoy writing a good SQL query!

Restaurant information from Google Maps Platform

In order to search for nearby venues, I implemented the Google Maps API, available through Google Cloud Platform.

The Nearby Search API allows you to specify types of venues, such as restaurants, and filter results based on distance so this was the perfect API to allow the users to find the restaurant they are in based on the users location.

I consume this data and assign it as a Location object, meaning I can easily consume other location provider APIs, such as Foursquare if ever required.