Creating a cloud-based Pokédex: overview
Tags: flask, mysql, googlecloud
Published: 2020-01-28 17:39:22

This blog series details what I learned on my Python 3 app development journey and the roadblocks I hit along the way. In this post I give an overview of a Python 3 app I created using Flask and a variety of [Google Cloud Platform (GCP)](https://cloud.google.com/products/) offerings.

If you’re new to Python 3 web app development, you’ll quickly learn that you have a lot of choices to make. You might ask yourself:



*   Is there a preferred framework?
*   How do I handle user authentication?
*   How do I show the world my app?

These are the same questions I asked myself. As with many questions in life, the answer is “It depends”, but you can take out the guesswork by building from a credible sample.


## The final result

For my first Python web app, I decided to create a simple Pokédex. It includes the following features:



*   Data displayed from a [Cloud SQL](https://cloud.google.com/sql/) database
*   User account creation and persistent sign in
*   A Pokédex for each user
*   The ability for users to toggle and store the catch status of pokémon through POST requests
*   Automatic scaling with [App Engine](https://cloud.google.com/appengine/) once deployed

Here’s the [final result](https://abbycar-test.appspot.com/) deployed to App Engine. Log in with my test account to scope things out.

Username: **test**
Password: **testtest**

It’s not too pretty or feature packed, but feel free to “catch” some pokémon by clicking on the pokéballs!

Check out the code on GitHub
{% github abbycar/pokedex-project no-readme%}

![pokéview app](https://thepracticaldev.s3.amazonaws.com/i/9dx3f3pkbgtzwmkueved.png)


## Get rolling with starter code

Choosing what technologies you want your app to use is hard. I find learning new concepts easiest when building off existing projects. I tried a handful of tutorials that used a variety of technologies before settling.

I got my bearings with the [Python + MySQL bookshelf example](https://github.com/GoogleCloudPlatform/getting-started-python/tree/828ff9106bce1177cfb5392d22f25d831b2797d4/3-binary-data). Note that since starting this project the docs and code sample have changed. You can see a snapshot of the docs I used [here](https://web.archive.org/web/20181130130303/https://cloud.google.com/python/getting-started/tutorial-app).

I chose to build off this project because it had the bones of what I wanted to do. The choice of tech was handled for me. All I had to do was trim some fat and slap a bit o’ muscle on it. A fair bit of tweaking was involved to get where I wanted to go, but in the end you’re learning from a (hopefully) credible source on what a good app looks like.  


The app I created utilizes the tech listed below. Note that I’ve chosen to use Google Cloud products for this sample. AWS and Azure have similar offerings.


### Flask and Jinja2

When it comes to my apps, I hate boilerplate code. I want to get my app up and running without an additional 1,000 lines of code clogging things up.

To limit this in my app, I picked Flask as my framework and Jinja2 as my templating engine. Both add hardly any boilerplate to my app.

[Flask](http://flask.palletsprojects.com/en/1.1.x/) is a light-weight Python web framework that’s great for beginners because out of the box you get the basics of what you need. If you find yourself needing other features like user sign in and database management, just install an extension.

By default, you need to install the[ Jinja2](https://jinja.palletsprojects.com/en/2.10.x/) template engine to use Flask.

Sticking with Jinja2 was an easy choice for me since I didn’t want boilerplate code and because I didn’t choose Django as my Python web framework. 


#### Why no Django?

Django is another popular route to go, but I know that my app will stay relatively small. I don’t need all the bells and whistles it offers. Also, Django apps are usually [monolithic](http://www.codingthearchitecture.com/2014/11/19/what_is_a_monolith.html) in nature.

 

Flask puts an emphasis on [microservice](https://opensource.com/resources/what-are-microservices) based architectures and modularity, making it better for beginners. While my app doesn’t have microservices, it does have [Blueprints](https://flask.palletsprojects.com/en/1.0.x/blueprints/) which provide separation of operations at the application level, and share one app config.


### Cloud SQL and Cloud Storage

I wanted all my app’s content to live in the cloud. Google Cloud in particular.

Cloud SQL for MySQL is a fully-managed database service that makes it easy to create and manage MySQL relational databases instances in the [Google Cloud Console](https://console.cloud.google.com/).

It also supports secure external connections and local development with the [Cloud SQL Proxy](https://cloud.google.com/sql/docs/mysql/sql-proxy).

Cloud Storage was something I didn’t know I needed until I learned about hotlinking. Hotlinking (also known as bandwidth theft) is when you display static assets (such as images) on one website that are hosted on another website.

To be respectful of others web resources, I downloaded what I needed and stored it in a Cloud Storage bucket. This gives me full control of my resources.


### SQLAlchemy


![sqlalchemy](https://thepracticaldev.s3.amazonaws.com/i/n4va0f000rf1v8bscims.png)


[SQLAlchemy](https://www.sqlalchemy.org/) is a database toolkit and [object-relational mapper (ORM)](https://www.fullstackpython.com/object-relational-mappers-orms.html) implementation. It provides an interface for creating and executing database-agnostic code without needing to write SQL statements. For my example I chose to go with MySQL, but I could’ve picked PostgreSQL or MongoDB and used the exact same code I’ve written in my app.

Not having to write SQL statements is a pro if you’re a SQL beginner. However, you do need to have a good grasp of query logic to use SQLAlchemy statements.


### App Engine

App Engine is one of GCP’s web hosting options. App Engine automatically handles scaling my app’s network resources up and down depending on how many requests are hitting my app.

It’s a good fit if you don’t want to think about the nitty gritty of load balancing.

In the end my app has the following structure.


![App components](https://thepracticaldev.s3.amazonaws.com/i/mnw4meqazvk7wmj6g2p8.png)




Stay tuned for the next part of this series. We’re going over how to locally test Flask apps with Cloud SQL Proxy.