How to convert your data and HTML/CSS drafts into
a minimal end-to-end system that includes
HTML/CSS, Javascript, Flask website, Flask API,
and the API accessing your postgresql database

Walkthrough, 9 Nov 2020

=================

Assumptions:
- You have webapp/pages/ filled with your work from last week

- You have cloned my GitHub repository (https://github.com/ondich/cs257_2020_fall)
which has a tiny-webapp/ subdirectory and a books-webapp/ subdirectory

- You have your data in some form

=================

Pieces your end-to-end system will have
- app.py
- api.py
- a postgresql database
- templates/*.html (your web pages)
- static/*.css
- static/*.js
- static/[other files your site needs]

=================

STEP 0: Decide what API-generated data you want to see
- For me: just a list of movies from 1961, no special formatting

STEP 1: get your web pages served by a Flask web server
- Create templates/
- Copy my HTML files there
- Create static/
- Copy my CSS files and extra files (images, etc.) there
- Copy api.py and app.py and config.py from tiny-webapp to our webapp directory
- Edit your template/*.html files to change relative links from "webapp.css"
    to the Flask template version "{{ url_for('static', filename='webapp.css') }}"
    etc. (for images hosted on your site, for webapp.js, etc.)

STEP 2: implement a dummy API endpoint and show its results on your homepage
- Create the endpoint in api.py
- Hard-code some data for it to return as JSON. I just typed in a short
list of dictionaries, like this:
        movies = [{'title':'The Apartment', 'year':1961}, {'title':'Star Wars', 'year':1977}]
- Copy webapp.js from tiny-webapp to static/
- Edit webapp.js to call the API and put some data onto the home page
- Edit index.html to load webapp.js
- Edit index.html to have an HTML element into which my webapp.js code inserts my list of movies

STEP 3: put enough data into your database to serve the dummy API endpoint

- Mess with your data and get it ready as a CSV file. (In my example, I made a super-simple CSV file--just two columns--movie title and year.)
- Create a database (called webapp) for the project
- Create a table for your data (I called mine "movies")
- \copy the data from the CSV into your table
- Test a simple SQL query that you can use for your dummy endpoint. I used
    SELECT title, year FROM movies ORDER BY year LIMIT 100
  intended to give me the earliest 100 movies in my table.

STEP 4: re-implement your dummy API endpoint to use the data in your database
- Make sure your config.py is set up with your postgres user, database, and password. (For me, it was user='jondich', database='webapp', and password='')
- Copy some starter database code from my repository, books-webapp/books_api.py, into your api.py. (I took the get_connection() function and the code for the /authors/ route.)
- Edit the database code to obtain your simple data from the database using the query you cooked up in STEP 3.
- Note that the JSON returned by your endpoint needs to be in the form expected by the Javascript in STEP 2.