Week 6.1— FLASK
Constructing API’s to Connect to Personal Projects
--
The moment has finally come. It is time to build a bridge between our front-end and back-end skills by introducing the idea of “servers.”
Today, we’ll be constructing our own server by pairing HTML up with MongoDB. Oh, it is important to note that we only have 1 computer in which we will be building the server and making requests. Therefore, in our case, client = server. This is called a “local developing environment” and intuitively described by the drawing below:
Now, let’s use FLASK.
Downloading an Running Flask
First, on the python interpreter tab, download the FLASK package:
Then, create a file named “app.py” and paste the following framework:
from flask import Flask
app = Flask(__name__) @app.route('/')
def home():
return 'This is Home!' if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
When you run the FLASK successfully, the window should look like this:
Now, create the following directories:
- “static” (stores images and css files)
- “templates” (stores HTML files)
Inside the templates folder, create an HTML file titled “index.html.” This is the file that will be printed by the browser upon the client’s request and server’s approval/proseessing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/
jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h1>Show this!!</h1>
</body>
</html>Now, you can import this HTML by using the following command words:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)We have covered the basics. Now, before getting into the actual work, let’s do a brief review of GET/POST functions.
GET/POST
We have covered this in the second post of Week 2. Find it below:
Yet, now we have to be more specific as to which functions that GET and POST are responsible. The following is the updated version:
GET
- Making a request for data to be read (ex. importing a list of movie seats available on a website or an app)
- Data transmission: place a “?” after the URL to transmit as key=value (ex. google.com?q=polarbear)
POST
- Making a request for data creation, update, or deletion (ex. creating or deleting an account and changing passwords)
- Data transmission: transmit as key:value in the invisible HTML body
Great. Now we can dive into the construction of API’s.
API Construction
Say we are to transmit a piece of data from the client to the server in the form of a key value (ex. title_give). Through the codes below, we can complete the task. Note the four steps:
- Requesting GET
@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give')
print(title_receive)
return jsonify({'result':'success', 'msg': 'This a a GET!'})- Confirming GET
$.ajax({
type: "GET",
url: "/test?title_give=Gone with the Wind",
data: {},
success: function(response){
console.log(response)
}
})- Requeting POST
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': 'This is a POST!'})- Confirming POST
$.ajax({
type: "POST",
url: "/test",
data: { title_give:'Gone with the Wind' },
success: function(response){
console.log(response)
}
})I know that these seem very abstract. Let me show their applications through my projects below:
Well, I hope those examples provide clear demonstrations.
Next time, we will be publishing the projects to the web so others can get access to them. Exciting, right? Then, see you next week!
Fin.