Scribd
Upload
36 views

TP2 Api

1. The document provides instructions to set up a MongoDB database on a Linux virtual machine and connect a Vue.js frontend application to a Python Flask backend API. 2. The setup includes installing MongoDB, configuring it to listen publicly, cloning a Git repository containing the backend and frontend code, installing dependencies, and launching the backend and frontend applications on different ports. 3. Users are instructed to make API calls to get, add, update and delete movie data in order to validate that the full stack application is functioning properly.

Uploaded by

Ange Stephen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
36 views

TP2 Api

1. The document provides instructions to set up a MongoDB database on a Linux virtual machine and connect a Vue.js frontend application to a Python Flask backend API. 2. The setup includes installing MongoDB, configuring it to listen publicly, cloning a Git repository containing the backend and frontend code, installing dependencies, and launching the backend and frontend applications on different ports. 3. Users are instructed to make API calls to get, add, update and delete movie data in order to validate that the full stack application is functioning properly.

Uploaded by

Ange Stephen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

1 SETUP

1.1 ENVIRONNMENT SETUP


Connect to your Linux Virtual Machine (Username and password have been provided by email)

Your user and password should have been already created.

• User: #firstname
• Password: #Password sent by email
• IP : #IP sent by email

1.2 CREATE A DEDICATED DIRECTORY


a) Create the directory /opt/tp2

cd /opt

sudo mkdir tp2

sudo chown #firstname tp2

cd tp2

1.3 MONGODB SETUP


a) Install and start the mongodb database

sudo apt update

sudo apt install -y mongodb

sudo systemctl start mongodb

b) Update mongodb configuration to listen via 0.0.0.0

Update the file /etc/mongodb.conf

sudo sed -i 's/^bind_ip.*/bind_ip=0.0.0.0/' /etc/mongodb.conf

sudo systemctl restart mongodb

1.4 UPDATE /ETC/ENVIRONMENT


a) Update the file « /etc/environment » to create a new environment variable ENV_MONGO_IP
with the ip of your server

sudo sed -i -n -e '/^export ENV_MONGO_IP=/!p' -e '$aexport ENV_MONGO_IP=#IP' /etc/environment

source /etc/environment
1.5 GET THE SOURCE CODE OF MRIT-TP2
a) From /opt/tp2, perform a git clone

git clone https://gitlab.com/fsanys/mrit-tp2.git

cd mrit-tp2

b) Install python3 dependencies

cd backend

pip3 install -r requirements.txt

2 BACKEND UPDATE

2.1 LAUNCH THE APPLICATION


• Start the backend application

python3 app.py

Keep this command running in order to keep running the application.

2.2 TEST WITH YOUR BROWSER


Connect with your the browser to this URL:

http://#IP:8080/movies

You should get a result like this:

2.3 PERFORM REQUEST VIA CURL


Connect with a second SSH session to the server (Don’t stop the one running “python3 app.py”)

• Verify the list of movies (GET)


curl -i -H "Accept: application/json" -H "Content-Type: application/json" -X GET
http://localhost:8080/movies

• Add a new movie with a specific note (POST)


curl -i -H "Accept: application/json" -H "Content-Type: application/json" -X
POST http://localhost:8080/movies -d '{"title":"snatch","rate":20}'

• Verify that the movie has been added to the list (GET)
curl -i -H "Accept: application/json" -H "Content-Type: application/json" -X GET
http://localhost:8080/movies

You could also verify from your browser :

Get the movie’s ID you have created. You will use this ID to update the note

• Modifiez la note (PUT)


curl -i -H "Accept: application/json" -H "Content-Type: application/json" -X PUT
http://localhost:8080/movies/#ID -d '{"title":"snatch","rate":17}'

You have manipulated an API to get and update the values.

3 MANIPULATION BACKEND
1 – Create a new entry with one of your favorite movie with a rate under 10 (You will update it in the
next step)

2 – Once the entry has been added, update the rate with a value above 10

3 – Create a second entry with one of your most disliked movie with a rate under 10

4 – Delete the movie “snatch” which has been created in the part “Backend Update”

5 – TO TO PROVIDE (Report) - Take a screenshot of your browser with the URL (IP) - include it in
your report

4 CONNECT A FRONTEND TO THE BACKEND


We have now a database that stores the data and a backend API that publish some routes to get and
update the values. Now we will set a frontend with vue.js.

We will keep the backend running (python3 app.py) and launch a new terminal (Putty) to launch the
frontend. Perform these actions with a new terminal :

• Upgrade Node to version 10

cd /tmp

curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh

chmod +x nodesource_setup.sh

sudo ./nodesource_setup.sh

sudo apt-get install -y nodejs


• Install yarn

sudo npm install yarn --global

• Go to the frontend directory

cd /opt/tp2/mrit-tp2/frontend

• Install the dependencies

sudo chown -Rf $LOGNAME ~/.config

yarn install

• Launch the frontend

yarn serve --port 8081

With your browser navigate to the URL : http://#IP:8081

You should get a result like this:

You might also like