Differences
This shows you the differences between two versions of the page.
|
ii:labs:s2:04:tasks:02 [2022/05/18 18:56] radu.ciobanu |
ii:labs:s2:04:tasks:02 [2024/04/11 13:08] (current) radu.ciobanu [02. [20p] Building an image] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ==== 02. [00p] Testing a web application using Postman ==== | + | ==== 02. [20p] Building an image ==== |
| - | + | ||
| - | The application started earlier is a web application that does not have a graphical interface (i.e., a frontend). For this reason, it can only be tested by sending HTTP requests using a tool such as [[https://www.postman.com|Postman]]. We will now show how to use Postman to connect to a web application backend. | + | |
| - | + | ||
| - | In the Postman application, we can create the two types of requests that we want to test: | + | |
| - | * //**GET**// - requests information from the backend (in our case, the list of books in the library) | + | |
| - | * //**POST**// - sends information to the backend (in our case, adds a book to the library). | + | |
| - | + | ||
| - | The steps to accomplish this are outlined below. Firstly, once we have opened the Postman application, we press the //**+**// button, as can be seen in the image below (the button is circled in red). | + | |
| - | + | ||
| - | {{:ii:labs:s2:04:tasks:screen1.png?direct&700|}} | + | |
| - | + | ||
| - | Next, we select the //**HTTP Request**// option, as shown below. | + | |
| - | + | ||
| - | {{:ii:labs:s2:04:tasks:screen2.png?direct&700|}} | + | |
| - | + | ||
| - | We add the first request, whose type should be //**GET**//. In the address bar, we write //**http://localhost:5555/api/books/**// and then we press the //**Send**// button (shown in red in the image below). | + | |
| - | + | ||
| - | {{:ii:labs:s2:04:tasks:screen3.png?direct&700|}} | + | |
| - | + | ||
| - | Once the request is sent and everything is in order, we should receive a reply with the status //**200 OK**// (circled in the image below), which contains an empty string (because there are currently no books in the library), as shown below. | + | |
| - | + | ||
| - | {{:ii:labs:s2:04:tasks:screen4.png?direct&700|}} | + | |
| - | + | ||
| - | Next, we can create a //**POST**// request. We start by pressing the circled //**+**// button in the image below. | + | |
| - | + | ||
| - | {{:ii:labs:s2:04:tasks:screen5.png?direct&700|}} | + | |
| - | + | ||
| - | Next, we set the request type to //**POST**// and then put the same address as before. | + | |
| - | + | ||
| - | {{:ii:labs:s2:04:tasks:screen6.png?direct&700|}} | + | |
| - | + | ||
| - | Because we are now adding a book, we need to place the book information in the //**POST**// request we are making. This is done by selecting the //**Body**// component of the request (circled in red in the image below), marking the data as //**Raw**// and //**JSON**// (also in red in the image) and adding the book information in JSON format (see below an example for "Harry Potter and the Prisoner of Azkaban"): | + | |
| - | + | ||
| - | {{:ii:labs:s2:04:tasks:screen7.png?direct&700|}} | + | |
| - | + | ||
| - | When we press the //**Send**// button, if everything is fine, we will receive a reply with the status //**200 OK**// and the ID of the newly-added book, as can be seen in the image. | + | |
| - | + | ||
| - | {{:ii:labs:s2:04:tasks:screen8.png?direct&700|}} | + | |
| - | + | ||
| - | Finally, if we run the //**GET**// request again, we can check the existence of the book we added in the library. | + | |
| - | + | ||
| - | {{:ii:labs:s2:04:tasks:screen9.png?direct&700|}} | + | |
| - | + | ||
| - | <note important>If you are using Play with Docker instead of running on your own computer, you need to replace the //**localhost:5555**// part of the address with the VM's actual address (see [[ii:labs:s2:03|lab 3]] for a reminder on how to do this).</note> | + | |
| == Subtasks == | == Subtasks == | ||
| - | - install Postman | + | - go to the //**flask_app**// folder from the {{:ii:labs:s2:04:lab4_docker.zip|lab archive}} |
| - | - send a //**GET**// request to your application based on the steps above and check that it returns //**200 OK**// and an empty list of books | + | - modify the //**images**// array in the //**app.py**// file to make the application display other images of your choice |
| - | - add a book of your choosing in the library using a //**POST**// request based on the steps above and check that it returns //**200 OK**// | + | - modify the //**templates/index.html**// file to display a different title related to your chosen images (i.e., change line 22) |
| - | - send a //**GET**// request again and check that you can see the book you just added | + | - build a Docker image entitled //**myflaskimage**// based on the provided //**Dockerfile**// |
| + | - run a container based on your image on port 8888 | ||
| + | - check [[http://localhost:8888]] to see if your container was started successfully | ||
| - | == What to upload == | + | <note important>If you are solving this lab on Play with Docker, you can access an exposed port by clicking on the port button as shown in red in the image below.</note> |
| - | * print screens from Postman with the requests and responses from the server | + | {{:ii:labs:s2:03:tasks:pwd_port.png?direct&800|}} |
