4th week of Web development course

Olivia·2022년 5월 18일

API Flask ajax pymongo python

Web development course

목록 보기

4/4

The Goals

1. Use framework 'Flask' to make my own API

2. Make 'Buying land on Mars API' and connect it to a client

3. Make 'Spartapedia API' and connect it to a client

🤓Practice-Apply 'POST' and 'GET' method on our fanpage

Let's remind us of what we are aiming for!

So, first week we made this web site with using HTML, CSS and JavaScript and through second, third week, we learned what API is and how to control it. We also learned Python and Beautifulsoup which made us work conveniently!

This time we will move further.
We will connect HTML with MongoDB to make server!
But since we have only one computer, we will make server and request for it. So basically, we will be ourselves a client and server at the same time which we call "local development environment"!

What is Flask?

Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions. However, Flask supports extensions that can add application features as if they were implemented in Flask itself. Extensions exist for object-relational mappers, form validation, upload handling, various open authentication technologies and several common framework related tools.

Let's try!

Make an own API

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time we use an app like Facebook, send an instant message, or check the weather on the phone, we’re using an API.

Practice an API

1. Buying land on Mars API

The above picture shows how we prepare server (flask) to post data through interacting with HTML (client-ajax).

This is HTML part and it will try to get data from our input and send it out to our server.

Check data comes properly to Mongo DB.

Set server to bring data and return it as name 'orders'.

Use jQuery to call data we want and append it to the spot we want to put data, so we can see on our website.

2. Spartapedia API

We will give a movie url, comment and rating with using ajax to server(flask). Then server will do crawling through url and bring a image, title, description, star and comment total 5 information and save it on DB. At last, this server will send a message to a client about the result.

Write the information on the input places and click upload button.

It will show the message we set on the pop-up alert.

We can check data has been moved safely to DB.

We used 'GET' method to request data from server to show on our website. For this, I used below code.

function listing() {
            $.ajax({
                type: 'GET',
                url: '/movie',
                data: {},
                success: function (response) {
                    let rows = response['movies']
                    for (let i = 0; i < rows.length; i++) {
                        let comment = rows[i]['comment']
                        let title = rows[i]['title']
                        let desc = rows[i]['desc']
                        let image = rows[i]['image']
                        let star = rows[i]['star']

                        let star_image = '⭐'.repeat(star)

                        let temp_html = `
                        <div class="col">
                        <div class="card h-100">
                        <img src="${image}"
                         class="card-img-top">
                        <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${desc}</p>
                        <p>${star_image}</p>
                        <p class="mycomment">${comment}</p>
                        </div>
                        </div>
                        </div>`

                        $('#cards-box').append(temp_html)
                    }
                }
            })
        }

🤔Practice-Apply 'POST' and 'GET' method on our fanpage

I tried to write code myself to practice what I have learned. Used 'POST' method first to upload data on DB and used 'GET' method to show data on our html website.

👍🏻 I could understand the process of using 'POST' and 'GET', also how we can make API to contact server.
👎🏻 I just dealt with some data so I wonder how it will work with a lot of data. I definitely need more studying!