1 of 13

Intro to MVC and Flask RESTful

CSCI 344: Advanced Web Technologies

Spring 2023

2 of 13

Announcements

  1. HW7 due next Wednesday (4/10)
  2. This Friday: complete the GET methods for the /api/posts and /api/posts/<int:id> endpoints.
  3. Next Friday: class cancelled (Sarah will be at a conference).

3 of 13

The “Model-View-Controller” (MVC) Design Pattern

MVC is an architectural pattern for implementing user interfaces. Divides an application into three interconnected parts: the Model, the View, and the Controller.

  • Model – represents the data (not dependent on the controller or the view)
  • View – the presentation layer (displays the information; allows user to interact with the system.
  • Controller – The “middleman” between the view and the controller – determines which data should be sent / modified to which view

4 of 13

The “Model-View-Controller” (MVC) Design Pattern

There aren’t always clear lines between the “view” and the “controller”

For instance, in our Flask RESTful app, much of the logic that is typically put in the “controller” is actually situated in the “views” folder.

  • Logic in the views folder will determine whether the user can read / create / modify / delete a resource (security) and how that resource should be displayed (representing the data).
  • In other words, the Resource classes that are defined in the views directory perform the role of both the view and the controller.

5 of 13

What is Flask RESTful?

  • Flask RESTful is a convenience library for building REST API Endpoints in flask.
  • We will be using Flask RESTful’s “Resource” class to organize our endpoints.

6 of 13

Code Walkthrough

Let’s walk through how Flask, Flask RESTful, and SQLAlchemy can work together to create a REST API for Photo App. Specifically, we’ll talk about:

  1. Models
  2. Views
  3. app.py
  4. Tests
  5. python populate.py

7 of 13

Models (see models folder)

  • Stored in the models directory
  • In the context of SQLAlchemy, a model is a user-defined Python class that makes it easier to interact with a database table.
  • Each model file has a corresponding database table that it’s associated with.
  • Each model can also define relationships to other models. For instance, a post can easily access its associated comments and author using “dot” notation

post = Post.query.get(5)

print(post.user.username) # does the join for you

print(post.comments) # does the join for you

8 of 13

Views (see views folder)

In the context of Flask RESTful, views are organized using the Resource class.

  • Each resource maps to a route (scroll to the bottom of, say, posts.py to take a look).
  • The methods within the resource class map to the method (GET, POST, PATCH, PUT, DELETE)
  • Most resources in our app (Post, Bookmark, Like, etc.) use two “Resource” classes:
    • One to represent the “List View” – for collections of resources and for creating new resources (GET, POST)
    • One to represent the “Detail View” – for reading, updating, and deleting individual resources (GET, POST, PUT, PATCH, DELETE)

9 of 13

app.py

app.py is the entry point to our app. All traffic is first routed to app.py and then forwarded on to the appropriate Resource instance. Things to note:

  • DB connection string (from .env file / environment variable)
  • CORS (we’re allowing requests from any requestor). Can change this to be more selective.
  • app.current_user – note that this isn’t really how things work in the real world. For now, we are hardcoding a global, application-level variable. But really, we want this to refer to which user is logged into the system.

10 of 13

Tests (see tests folder)

Sarah has created a bunch of tests that are verifying that you have implemented your queries correctly (i.e. that the user can only see data they’re supposed to see and that they can’t modify resources they’re not allowed to modify.

Update:

  • If you only want to run the tests that are Homework 7 specific, download this file: run_tests_hw07.py and save it in your tests folder.

11 of 13

Tips for Using Automated Tests

  • Take it slow and steady
  • Comment out the tests you’re not immediately addressing to simplify your life
  • If you accidentally mess up your database data, just recreate your database (using python populate.py) and restart your flask server
  • The tests can certainly be made more robust, but good enough for a homework assignment!
  • Code to run a test…

12 of 13

If time: Start Tutorial 11

Building your first REST API endpoint

13 of 13

Tips for Organizing Code

  • Keep the “DRY” (don’t repeat yourself) principle in mind as you create your endpoints.
  • One way to organize your code is to use helper functions and decorators (we’ll take a look at this next week)