1 of 14

Back-end Workshop

(feat. Python + Flask)

Victor Lin

victorl.in

2 of 14

WHAT IS FLASK?

  • Flask is a web framework written in Python, for Python
  • How can YOU use it for your project?
    • create a website (or even better, a webapp)
    • serve an API
      • GET https://www.googleapis.com/customsearch/v1?q=flask
    • learn something new!

3 of 14

WEB DEVELOPMENT

Front-end: what the user sees

  • HTML, CSS, JavaScript

Back-end: logic for front-end

  • Python: Flask!
  • Used by Uber, Pinterest, LinkedIn

credit: https://twitter.com/stickermule

4 of 14

SETUP: PYTHON ENVIRONMENT

  • if python installed
    • make sure you can run virtualenv and python (or python3) in a Terminal
  • else
    • Download/install Anaconda (anaconda.com)

5 of 14

SETUP: PYTHON ENVIRONMENT (cont'd)

Create virtual environment

$ virtualenv -p python3 venv

Start environment

$ source venv/bin/activate

Install Flask (and pandas for later)

$ pip install flask�$ pip install pandas

Anaconda Navigator > Environments

  • change "Installed" to "All"
  • search for "flask" and "pandas"
  • make sure they're installed

Anaconda Prompt

cd path\to\flask-workshop

6 of 14

SETUP: PYTHON ENVIRONMENT (cont'd)

7 of 14

SETUP: PYTHON ENVIRONMENT (cont'd)

Final commands!

UNIX/macOS

$ export FLASK_APP=hack-end.py�$ export FLASK_DEBUG=1�$ flask run

Windows

$ set FLASK_APP=hack-end.py�$ set FLASK_DEBUG=1�$ flask run

8 of 14

LET'S HACK

9 of 14

HACK THIS APP TOGETHER!

  • This will be a fun CTF-style "competition" (without prizes)
  • Work by yourself or with others!
  • If you finish early, help the person next to you. We can only move to the next step once everyone is finished.
  • Note: link previewing will be useful

  • Download victorl.in/hack-end/0-start.py and copy contents to hack-end.py
  • Go to localhost:5000/ in your browser
  • Hack away!

10 of 14

CREATING AN API: STOCK DATA

  • data in data/individual_stocks_5yr
    • <STOCK NAME>_data.csv

AAPL_data.csv

...

11 of 14

CREATING AN API: STOCK DATA

AAPL_data.csv

...

[

67.8542,

68.5614,

...

163.03,

159.54

]

GET /stocks/AAPL?column=close

12 of 14

MORE INFO

Deployment (Heroku and more)

flask-base (https://github.com/hack4impact/flask-base)

  • database support (Flask-SQLAlchemy)
  • forms and validation (Flask-WTF)
  • … more

Find these slides: https://victorl.in/back-end/presentation

13 of 14

Questions?

14 of 14

victorl.in/hack-end/0-start.py

victorl.in/hack-end/1-www.py

victorl.in/hack-end/2-anaconda.py

victorl.in/hack-end/3-matlab.py

victorl.in/hack-end/4-python.py

victorl.in/hack-end/5-hacked.py

copy AND REPLACE contents to hack-end.py