My 100daysOfCode Journal — Day 02
Tags: python, react, webdev, mongodb
Published: 2019-11-01 19:05:29


Hey folks!

So it’s day 02 of my 100daysofcode journal. Today, we’ll do first POST call for flask api.

Here is a list of what we’ll be covering today:

1. Setup ROBO 3T  
2. Writing POST Call 🤩  
3. Using our letterbox aka POSTMAN :)

### **Setup ROBO 3T**

  

We’re going to setup ROBO 3T on mac, so in order to install that you need to go to https://robomongo.org/download

Once you’ve installed ROBO 3T, open the application and than follow the steps to add a new MongoDB connection. P.S for tutorial purposes, I haven’t actually used any DB authentication, will do so later down the line .

So as soon as you open your ROBO 3T app , you will be greeted with something like this:

![](https://cdn-images-1.medium.com/max/1200/1*8bFSCWuq9augurhhaxkuWw.png)

Now we’re going to connect do the connection. Click on the small computer like icon on top left and fill up the connection details like shown(name it whatever you want) and than hit saveeeeee!!!

![](https://cdn-images-1.medium.com/max/800/1*Vf1Af9ToXZeSKxD8JqPJdQ.png)

Okay , now that we have our connection in place. We will go back to our window and select the connection and click on connect button

![](https://cdn-images-1.medium.com/max/800/1*BLTCuINd5GqOPi-QpIiFRA.png)

On next window that opens we will create our very first database first here. Select the connection name and right click on connection name and click on create database option on the menu presented like shown below.

  

![](https://cdn-images-1.medium.com/max/800/1*9jSH0emd472tjonXkBPTrQ.png)

As soon as you click on “Create database” option you will see a window to post Database Name and than you need to enter name and hit create.

![](https://cdn-images-1.medium.com/max/800/1*D00Qi-5x-6BiQ76r_-zfTA.png)

Now we have our database created. If you all goes right there shall be the db in left pane like shown in figure above.

### Writing POST Call

  

We are going to write our very first POST call, excited?? Let’s do it!

  

So continuing with our app.py as we’ve done in my last post**.** If you don’t know what we’re talking about here, you can go through my post [**here**](https://medium.com/@aidataguy/my-100daysofcode-journal-day-01-202767ecdc27)**.**

Open the very same file and paste the code right after our very first **GET** call before the __main__ declaration like this.

    @app.route(“/add_articles”, _methods_=[“POST”])
    def_ add_articles():
	    article = mongo.db.articles
	    title = request.json[‘title’]
	    description = request.json[‘description’]
	    tags = request.json[‘tags’]
	    article_id = article.insert(
	     {‘title’: title, ‘description’: description, ‘tags’: tags})
	    new_article = article.find_one({‘_id’: article_id})
	    output = {‘title’: new_article[‘title’],
	    ‘description’: new_article[‘description’], ‘tags’: new_article[‘tags’]}
    
	    return jsonify({‘result’: output})

Don’t worry, I will explain the code as I always do 😁.

  

Okay so as you know our articles had following fields, **title, description, tags.** So accordingly we want to post our data in same manner right?

So first thing first,

    @app.route(“/add_articles”, _methods_=[“POST”])

The code above is definition of POST route which is using route **add_articles,** so something like this will be our url “**http://localhost:5000/add_articles**”

Next step is to add definition that will define how our add article will work. We will define each our our variables like **request.json[‘title’],** what this means? whatever we’ll be sending in title will be a json value. We’ll do same for our rest of the values that we want to insert.

    def_ add_articles():
	    article = mongo.db.articles
	    title = request.json[‘title’]
	    description = request.json[‘description’]
	    tags = request.json[‘tags’]

Now next step is to insert the values into database. Alright! let’s do it.

So for this we will be using article.insert ( as it will be one single article at a time). The article_id variable is very important keep an eye on it !!

    article_id = article.insert(
    {‘title’: title, ‘description’: description, ‘tags’: tags})

So what we did here is inserting key:value pair while inserting them.

One more thing is that we’ve have to set a new_article variable and new_article = article.find_one({‘_id’: article_id}) will set the same along with article_id as _id. So every new article that we post, will have a new unique ID thanks to the new_article we’ve set here.

  

    new_article = article.find_one({‘_id’: article_id})

Okay now we will set an output variable which will output our new post values. and we’ve set a result key which will return json for us with the ID 😁

    output = {‘title’: new_article[‘title’],
    ‘description’: new_article[‘description’], ‘tags’: new_article[‘tags’]}
    return jsonify({‘result’: output})

  

### Using our letterbox aka POSTMAN

  

Okay, you must be saying… dude how on earth are we going to test this 😆

  

Let’s post it using letterbox.. aka Postman :)

Okay first thing first what is postman?? As per [**Postman official website**](https://www.getpostman.com/):

> Postman is a collaboration platform for API development. Postman’s features simplify each step of building an API and streamline collaboration so you can create better APIs — faster.

Now, you need download and install the postman at your end and open the postman app. You will see a window like this

![](https://cdn-images-1.medium.com/max/800/1*AE7RUnwflRhckHbrhxZb4A.png)

On this window, we will put our URL in request tab, put “localhost:5000/add_articles” and choose POST from drop down. Than click on “Body” option below and than what you need to do is , select raw option under Body and paste your json like this:

       {  
         “title”: “Hi this is the zero post”,  
         “description”: “This is the zero description”,  
         “tags”: “hi, testing, zero post”  
        }

![](https://cdn-images-1.medium.com/max/800/1*xxidno1R1GZO4s0_lROrvQ.png)

Once you have everything set like that, hit send. You shall see a response below something like this:

![](https://cdn-images-1.medium.com/max/800/1*Fb4O0Di5JyCWWBQBu3291A.png)

Wooohooo!!! we have made the post call tooo 😎

  

That’s all folks!! If you have any questions let me know!!