Backend: Flask

For Phase III of the project, we restructured our backend using Flask. Flask is a Python package that facilitates interaction between the website and the backend; specifically, it's good at routing information to pages based on the URL. Hence, it is typically used to standardize the layout of a page, passing dynamic data to a static template. To implement Flask, we hewed closely to Ryan Fuller’s helpful tutorial.

The upside of Flask, when used as intended, is that it allows you to create a dynamic set of pages from a static template. You can pass a dictionary of data (which you populate beforehand using API calls or database queries) to a single template file. In our case, however, since we’re not using API calls, the point of using Flask was more to familiarize us with the process involved in setting up a professional, dynamic website with many pages. So rather than having a single template to which we passed dynamic data, we continued hard-coding one HTML file per page, using Flask simply to change the URL to route to them.

The following section shows how we set up and used Flask to test our project.

Getting Started

Part One: Restructure the Repo

Our main folder had previously consisted of several folders and a bunch of loose files. It now consists of two folders: Templates, which stores our hard-coded HTML pages; and Static, which holds our supplementary files like images, Javascript, and CSS. In the main repo, we would put our app.py file, which would eventually be used to route information to the website.

Part Two: Establish a Virtual Environment

Using a virtual environment allowed us to test the links between our pages without pushing onto our actual website. There were three simple steps here:

1. Install the virtual environment. In Terminal, we entered pip install virtualenv.
2. Create the virtual environment inside a cloned copy of the repo. In Terminal, we first entered cd cs329e-idb, and then virtualenv venv.
3. Activate the virtual environment. In Terminal, we entered source venv/bin/activate.

Part Three: Install Flask within the Virtual Environment

Like all Python packages, Flask is installed through Terminal using the pip command: pip install flask.

Using Flask: app.py

The file app.py is the core of Flask in our project: it's what routes a given URL to a certain page. Recall that, because our pages were static HTML, we didn't use Flask in the typical way. The section below shows both the ideal use of Flask and our use.

In a Perfect World: How to Use Flask

For most applications (the kind using API/DB calls rather than hard-coded HTML--not our kind), each type of page would have its own function in app.py, like so:

@app.route(/game/<gameName>)
def gamePage(gameName):
  data = getData("game", gameName)
  return render_template('game_page.html', data = data)

In the code above, the decorator (@app.route(/game/<gameName>)) ensures that this particular function will always be called when the user accesses a navigates to a game URL.

You can also see that within the function (in line 3, data = getData("game", gameName)), the variable data is set to the result of getData (which would be a custom function), which takes two arguments; the first argument is the type of API call or DB lookup it should make, and the second is the record it should search for. data would thus be set to contain all the information the page would contain.

Line 4 simply passes that data to a single template file.

In the RL: How We Used Flask

Instead of having a single function for a type of page (e.g. game instance, as above), we had a function for every possible page. This looks like the following:

@app.route('/streamer_asmongold')
def streamer_asmongold():
    return render_template('/streamers/streamer_asmongold.html')

In our function, the URL is not variable. Whenever a user clicks or taps a link to Asmongold's page, this function will be called thanks to the decorator in line 1. Not having a database or API to call from, we simply pass to render_template a pointer to the relevant file within the folder Templates.

To ensure that the correct URL was passed to app.py, we edited our HTML files' anchor references to include a double-bracket notation: <a href={{url_for('asmongold')}}>Asmongold</a>. The URL retrieved within the double brackets will ensure that the correct function in app.py gets called.