Flask-AppBuilder Tutorial

Flask-AppBuilder is a "Simple and rapid application development framework, built on top of Flask, that includes detailed security, auto CRUD generation for your models, google charts, and much more." We are using F.A.B. in CS 374 to limit the amount of web programming you need to do (and learn) for rapid prototyping, especially for CRUD operations.

In this tutorial, you will create a web application for managing the Conference Review System tables you generated in HW4. The application will connect to your schema in the sec1/sec2 database.

Part 1. Getting Started

1. Install F.A.B. in your virtual environment:

   pip install Flask-AppBuilder
   

2. Create a folder named fab near your homework files (outside of your project repo).
3. Download the following files from the profs repository into your fab folder:
   • README.md
   • app.py
   • config.py
   • mvstubs.py
4. Create two (blank) files named models.py and views.py (in your fab folder):

   touch models.py views.py
   

5. Edit the config.py file:
   • Delete the TEAM global variable – you'll use that later for your group project.
   • Change the SQLALCHEMY_DATABASE_URI to the URI you used for HW4.
   • Change the APP_NAME to "Conference Review System" (or similar).
6. Run the following command to create an admin user account for your web app:

   flask fab create-admin
   

7. Run the following command to start a local web server for development:

   flask run --debug
   

8. Open http://127.0.0.1:5000 in a new tab, and sign in to your application.
9. When running fab for the first time, 11 new tables starting with ab_ were automatically created in your database. These tables are used to manage user accounts and permissions in the web application. Open your schema in pgAdmin and look at the new tables that were created.

Part 2. Edit models.py

Note

This part of the tutorial will walk you through the steps of GP4. For simplicity, we will focus on only five of the tables from hw4: paper, history, conference, topic, and paper_topic.

10. Replace models.py with the file you generated (and didn't edit) during HW4.
11. Make each class extend F.A.B. instead of SQLAlchemy:
    • Add from flask_appbuilder import Model
    • Remove class Base(DeclarativeBase)
    • Find and replace (Base) with (Model)
    • Find and replace Base.metadata with Model.metadata
12. Add the following __str__() method to the Paper class:

    def __str__(self):
        return f"Paper #{self.paper_id}: {self.title}"
    

13. Add the following __str__() method to the History class:

    def __str__(self):
        return f"History for #{self.paper_id} at {self.timestamp}"
    

14. Add __str__() methods to the Conference and Topic classes.
15. Rename the following attributes (on both sides of the relationship):
    • In the Conference class, rename paper to papers.
      • In the Paper class, change back_populates of conference to papers.
    • In the Paper class, rename topic to topics.
      • In the Topic class, change back_populates of paper to topics.
    • In the Topic class, rename paper to papers.
      • In the Paper class, change back_populates of topics to papers.

    Important!

    Take a minute to understand what you just did:

    • Conference → Paper is a 1-to-many relationship, so Conference.papers (plural) is a list of Paper objects. On the other side of the relationship, Paper.conference (singular) is a Conference object.
    • Paper → Topic is a many-to-many relationship with the paper_topic table in between. So Paper has a list of Topic objects, and Topic has a list of Paper objects. Notice that secondary='paper_topic' is in the relationship().

Part 3. Edit views.py

16. Edit the mvstubs.py file:
    • Delete the TEAM global variable – you'll use that later for your group project.
    • Edit psycopg.connect() to use your username and database name (sec1 or sec2).
    • In the SQL statement, change table_schema to be your username instead of public.
17. Run mvstubs.py and redirect the output to views.py:

    python mvstubs.py > views.py
    

    This script generates a ModelView class for every table in your database. That way, you don't have to write so much starter code by hand.
18. In views.py:
    • Delete all classes except for Conference, History, Paper, and Topic.
    • Delete the corresponding appbuilder.add_view() statements as well.
    • Add the following import statements at the top:

      import models
      from app import appbuilder
      from flask_appbuilder import ModelView
      from flask_appbuilder.models.sqla.interface import SQLAInterface
      

    • Also find and replace Historys with History (since "Historys" is not a word). The mvstubs.py script adds an s to nouns, but the plural is not always correct.
19. At this point, refresh your application and browse each of the four tables.
    • If needed, restart with flask run --debug in the Terminal.
    • Click the Edit button on the conference record, and notice how the papers are shown.
20. Add the following to the Conference class:

    add_exclude_columns = edit_exclude_columns = show_exclude_columns = ["papers"]
    related_views = [Paper]
    

    Move the Paper class definition above the Conference class, so that the code compiles.
21. Add the following to the Paper class:

    add_exclude_columns = edit_exclude_columns = show_exclude_columns = ["topics", "history"]
    related_views = [Topic, History]
    

    Reorder the class definitions so that the code compiles.
22. Edit a Paper record to make sure the History and Topics tabs are shown.
    • Notice how "Paper Author" and "Review" are rendered. Ideally these would say "Authors" and "Reviews", and the objects would have a __str__() method so they were human-readable.
    • In your actual project, you will complete the above steps for all tables, not just four. Have fun!