Coders Packet

Minified POSTMAN using JavaScript

By Umang Mundhra

A user can create a GET, POST, PUT, PATCH, DELETE request from the app and will get the appropriate Response.

To run this application in your system:

> open the folder in vs code

> In the terminal, run the command npm install and npm start.


Packages Used :
Axios - allows us to make all kinds of API request
snowpack(dev dependency) - bundle up all the different  node modules into our javascript code
bootstrap - for styling different things in our application
pretty-bytes- Convert bytes to a human-readable string
CodeMirror - Package used for the Editor View in the Response and the Request Parts of the project.(npm i @codemirror/basic-setup @codemirror/view @codemirror/commands @codemirror/lang-JSON)

"index.html" is the file containing all the forms to get the user input. There is a select method to select the type of request made by the user, alongside there is input field of type URL having to get the URL from the user. Then there is an unordered list for the tabs such as "Query Parameters", "Request Headers" and "JSON" tab. Both the "Query Parameters" and "Request Headers" tab have the template to attach the key-value pair along with the request made.  In the template, there are 2 input fields one for key and the other for value.
There are 3 Buttons on the Home Page :
1. SEND - To send the request with the given methods, URL, parameters.
2. ADD - To add a Key-value pair in any of the two mentioned tabs.
3. REMOVE - To Delete the Key-Value Pair.

Appropriate data-attributes have been given to the corresponding input fields so that we can get them in the javascript code such as attribute 'data-URL has been given to input field for URL, 'data method attribute has been provided to the select input field, 'data query params' for the tab "Query Parameters", 'data request headers' for the tab "Request-Headers" etc. After the forms, the file contains Response div which gives the output we receive when I make a particular request such as the Time taken, the size as well as Status. This div is also further divided into tabs of Body and Headers corresponding to the output of the request.   The accurate method to populate the fields such as Time, Status, Size, Headers, etc . are specified in the "script.js".
So, the index.html contains all the UI logic and the input fields but all the logic to implement it is contained in the file "script.js".

"script.js" is the file that contains all the logic to add, remove templates, or to send the request, appropriate methods for them. We have several methods in the script.js file such as createKeyValuePair() to create a key-value pair when the user clicks on the ADD or DELETE button in the "Query Parameters" & "Request Headers" tabs.  The QueySelector selects the required field or div using the data attribute provided and then uses the logic to add or remove a key-value pair.  We have a function keyValuePairsToObjects()  that takes the container as an input and converts all the text (key-value pairs) in the container to the javascript objects. We will use "AXIOS"  for making all kinds of requests. We are passing the URL, the method, the params, and the headers to Axios inside our script.js file to get the response to the request made. the response we receive is further used as a parameter in various functions such as updateResponseDetails(to populate the status, time, and size in the output), updateResponseHeaders( to update the headers in the output we display when the request is made).

The file "setupEditor.js" contains the initialization of the JSON editors we are using while Requesting and getting a response from a URL. These editors are made using "@codemirror" basic editors. They are being used along with some extensions that they need. Each editor view needs 2 things one is the state and the other is the parent. There is a function updateResponseEditor() which populates or updates the Response Editor's content when we get a response from a URL and puts it on the screen.

Download Complete Code


No comments yet