Restaurant menu database exercise using the Flask microframework and Knockout.js with a PostgreSQL VM server.

• Summary
• Required Packages
• File List
• Instructions
• References

Fullstack project built using Flask with a PostgreSQL database on a virtual machine.

This is a website that saves restaurant menu information along with a review system for helping people remember what was good or bad at various restaurants. It also features a randomized recommendation system using a person's favorite in case they need help deciding where to go eat.

Built with:

• Flask microframework connected to a PostgreSQL database
• KnockoutJS MVVM for a dynamic front-end
• OAuth2 Google+ third-party login
• Grunt-Readme to generate the README from templates
• Sphinx for creating the project and API documentation website

Author: Jay W Johnson

Link to GitHub repository

Link to Documentation

• Flask - Python web framework

• SQLAlchemy - Python SQL Toolkit and ORM

• Psycopg - PostgreSQL adapter for Python

• Flask-Testing - Testing extension for Flask

catalog_app.py - Main program that runs the server side operations.

catalog_app_test.py - Test suite for catalog_app.

catalog/__init__.py - Package init file.

catalog/api.py - Flask routing methods that return JSON data.

catalog/signin.py - Flask routing methods for handling signin and signout from Google+ and returns JSON data.

catalog/views.py - Flask routing methods that return HTML pages.

catalog/database_setup.py - When running this file, it deletes an existing database and builds a new database with empty tables. Contains the database table information and a method for getting a connection (get_database_session()).

catalog/fake_data.py - Run this file to fill the database with fictional sample data.

static/js/ajaj.js - Contains javascript methods that simplify HTTP requests.

static/js/signin.js - Contains a javascript method for the google signin button.

templates/ - The base.html file contains the head and html code used by all other files. Other *.html files are inserted as the body to the base.html file.

website_mockup/ - Sample pages from the application saved as static pages showing what the site would look like with a server connection.

*.rst - reStructuredText files used in Sphinx documentation.

conf.py - Configuration file for Sphinx documentation program.

make.bat - Batch file for executing Sphinx documenting program.

sphinx_build/ - Contains the compiled documentation website.

clientsecrets.json - File containing app authentication data for communicating with the Google+ API.

1. Virtual Machine setup:

   • Follow the instructions here (on Udacity.com) to set up the Vagrant virtual machine used in this project.

2. Open project in Vagrant VM:

   • Save this repository to disk and navigate to the vagrant directory. From there, run vagrant up then vagrant ssh and that will bring you to the VM prompt. Navigate to the /vagrant/catalog directory in VM.

3. Database setup:

   • The database_setup.py file contains all the code to set up the resttest database, tables and views. Run this file within the VM:

   ...-trusty-32:/vagrant/catalog$ python database_setup.py
   

   You should see the database setup commands echo to the command terminal without error. The default is you add a postgresql database to the VM server. (There is a sqlite3 dbapi option by changing the value of use_postgresql but it is not thoroughly tested.)

4. Add filler data:

   • Preset data can be added to the database by following the setup with running the fake_data.py file within the VM:

   ...-trusty-32:/vagrant/catalog$ python fake_data.py
   

5. Run the server file:

   • Run catalog_app.py from in the vagrant directory VM prompt:

   ...-trusty-32:/vagrant$ python catalog_app.py
    * Running on http://0.0.0.0:8000/
    * Restarting with reloader
   

6. Navigate to http://localhost:8000:

   • The home page of website is at http://localhost:8000 while the server (catalog_app.py) is running.

7. Website navigation

   • The main page is a listing of restaurants. All pages will have a blue button that goes back to the home page restaurant list. Blue editing buttons, shown with a pencil image (Glyphicon) appear for each restaurant and each item only if a user is logged in.
   • There is a Google+ signin button at the top-right corner of all pages which changes to a logout button with user photo when logged in. Click this button to log in and log out.
   • Click on any restaurant row to view the saved items from that restaurant on another page. The menu page displays a list including price, description and the user's critique of the item.
   • Critique has three choices: A heart means it is a favorite item, thumb up means it is good and might get it again, and a thumb down means NEVER get it again!
   • Critiques and the ability to add/edit items and restaurants is reserved for logged in members. Look for blue buttons with a pencil image in the item row when logged in.
   • See "Urban Burger" restaurant to see how user critiques are aggregated and ordered (user critiques created in fake_data.py).

8. Test the application:

   • Install the Flask-Testing package with pip in the virtual environment if it doesn't already exist. You can go to http://localhost:8000/environment to see a list of installed packages in the VM or just run the test and see if it is missing.

   sudo pip install Flask-Testing
   

   Run the test suite file called catalog_app_test.py in the vagrant directory.

Stackoverflow.com

• Create database programmatically
• Delete file if exists with Python
• Select a few from list
• Need to flush() to get new record id
• Credentials not serializable error fix
• How to return a list of python packages installed on a server
• How to serialize SQLAlchemy row data
• SQL multi-column composite uniqueness
• How to get Sphinx documentation to load resources properly on Github pages
• How to expire a cookie
• SQLAlchemy filter match any in set

SQLAlchemy.org

• Connecting and using PostgreSQL

Flask.pocoo.org

• How to organize a bigger app
• Log in decorator needs 'wraps'

Jinja.pocoo.org

• How to use templates
• How to replace and escape characters

Knockoutjs.com

• Has-focus option
• Show item index in foreach loop

Developers.google.com

• Add sign-in button

Udacity.com

• Authentication & Authorization course

Gruntjs.com

• Getting started guide for Grunt

NPMjs.com

• Grunt-Readme guide

Docs.Python-Requests.org

• Using Requests Quickstart Guide

Flask-Testing

• Installing and using Flask-Testing
• API references: assert____ methods

Blog posts

• How to set headers in a testing post with JSON data

W3Schools.com

• How to use and delete cookies

Sphinx-doc.org

• Getting started with Sphinx documentation
• reStructuredText guide

Docs.Python.org

• unittest assert-methods

Sphinxcontrib

• Documenting RESTful HTTP APIs