🖥️ Creating a REST API

What is a REST API?

Your REST API is how your server connects to the front end aspects of your app. It sends data to your app when you call it and it deals with all the computation and model making as your app sends data to it. Think of it as a way for your app to retrieve data from your backend and a way for it to send data that’s inputted by a user.

🌍 Before we get started, here are some function descriptors you should know about (Note: this is all convention, like everything with code you can do whatever you want, we highly don’t recommend changing these conventions, it’s an industry-wide standard)

  1. GET Function
  1. This is used to pull data from your server so that you can display it to a user. 
  1. POST Function
  1. Used to take user-submitted responses entered through your app and pushing it to the server (normally you do some sort of computation to store the data the way you want to).
  1. Note: This isn’t a function descriptor but something you should know: Think of routes as part of a url, your server runs on some url, ie localhost:5000. route ‘/’ represents localhost:5000/, route ‘/home’ would be localhost:5000/home. If you have get requests under a route its the url where the data is sent to from the server. 

🖥️ Let’s build a basic REST API with Flask!

  1. Flask is a python framework for creating backends.
  1. Let’s install everything we need to use flask
  1. Go to https://cs61a.org/lab/lab00/ for instructions on installing Python (make sure this is Python3).
  1. If you have a terminal use sudo apt install virtualenv (if this doesn’t work because pip isn’t installed, use the command that your terminal displays).
  1. Make sure git is installed, you can check by typing git --version in your terminal.
  1. Clone our starter repository with  git clone https://github.com/calhacks/full-stack-demo then cd full-stack-demo to get into the directory
  1. Install flask using pip install flask flask-cors then, assuming you are in the git repo directory, run touch main.py (this creates a python file called main.py)
  1. If you have terminal use open main.py (or atom main.py or subl main.py depending on your text editor), if you are using Windows’ ubuntu subsystem, simply open up the file in windows explorer and open main.py with your text editor.
  1. In main.py input this code:

from flask import Flask, render_template #imports flask and flask CORS (this allows us to make our
from flask_cors import CORS #server)
app = Flask(__name__) #initializes the app

CORS(app) #allows cross-origin sharing (meaning anyone can send requests to the app)
counter = 0 #this makes counter global (we need this so that when a user changes counter it persists and doesn't get set back to 0 every time).
@app.route('/', methods=['GET'])
def index():  # pragma: no cover #this loads index.html as the primary web page
    return render_template('index.html')
@app.route('/counter', methods=['GET']) #this creates a route called /counter that we can reference in the front end called /counter and makes it a get method
def get_counter(): #this function returns counter as a string
        global counter
        return str(counter), 200
@app.route('/add', methods=['POST'])#this creates a route that we can reference in the front end called /add and makes it a post method
def add_1(): #adds one to counter (remember this doesn't display counter, the         front-end needs to deal with this
        global counter
        counter = counter + 1
        return '', 200
@app.route('/subtract', methods=['POST'])
def subtract_1(): #subtracts one from counter (also doesn't display counter)
        global counter
        counter = counter - 1
        return '', 200

If you are confused as to what this does read the comments.
  1. At this point we have created our REST API and if you’ve followed the instructions and put this code with the repo, you can run the server!
  1. on your terminal run export FLASK_APP=main.py (make sure you are in the my_server directory for this) this tells flask to run the server from main.py, then run flask run --port = 5005 this runs the server from port 5005. 
  1. After doing the export command above you can check which flask server is running by doing echo $FLASK_APP, if main.py is there you can just run the flask run command above.