<html>
<h2><img src="https://steemitimages.com/0x0/https://cdn-images-1.medium.com/max/1146/1*vBw9_VPFiEcxgxDx-Oghzw.png" width="1146" height="328"/></h2>
<p><a href="https://steemitimages.com/0x0/https://cdn-images-1.medium.com/max/1146/1*vBw9_VPFiEcxgxDx-Oghzw.png">Image Source</a></p>
<h1>Repository </h1>
<p> <a href="https://github.com/nodejs/node">https://github.com/nodejs/node</a> </p>
<h1>What Will I Learn? </h1>
<p> I will learn how to handle errors ( routes , divide on 0 ..etc ) , how to parse bodies to read a specific JSON objects and finally what's the cross origin resource sharing also the important of using the CORS .</p>
<ul>
<li>Handling Routes and Interception Errors .</li>
<li>Parsing the body for the URL encoded and for the JSON objects .</li>
<li>Cross Origin Resource Sharing.</li>
</ul>
<h1>Requirements </h1>
<ul>
<li>Knowledge about JavaScript language .</li>
<li>Basic Knowledge about Command Line window .</li>
<li>An editor for example notepad ++ .</li>
</ul>
<h1>Difficulty </h1>
<ul>
<li>Basic </li>
</ul>
<h1>Tutorial Contents </h1>
<p>In this tutorial we will learn how to create a rest api with Node Js , in the previous tutorials we have created routes and install the nodemon package to restart the server, and today we will handle errors then learn how to parse the bodies and finally the important of using the cross origin resource sharing , so let's start .. </p>
<h2>1- Errors :</h2>
<p>While you are using a programming language , you will inevitably fall in the mistakes and to build a project without mistakes require a lot of focus , but firstly what I mean by mistakes ? </p>
<p>- When I am programming a calculator for example and I done all the operations ( + , / , * , ..etc ) , the calculator works well ! when I enter the number ' 4 ' and click on the division button then I enter another number ' 2 ' for example it will give me the result ' 2 ' , but if I enter the number ' 0 ' at place of ' 2' so the operation will be ( 4 / 0 ) , is correct to divide on ' 0 ' ? </p>
<p>- The mistake is we can't divide on ' 0 ' it will give us an <code>Error </code>and we know in the programming languages all problems have a solutions .</p>
<p>This error is one of a large number of errors , we can't cover all of them but I will give you what we need to this tutorial to be absolutely correct .</p>
<h3>a- Divide On 0 Error : </h3>
<p>To handle this error there is many ways , let's try one or two of them , firstly we have two variables </p>
<p><code>var x = 4;</code></p>
<p><code>var y = 0;</code></p>
<p>Then I will create another variable which is the result of the division </p>
<p><code>var res = x/y;</code></p>
<p>Let's print the result by the console.log(res) and see what happens on my command line interface</p>
<p><img src="https://f.top4top.net/p_903x2e151.png" width="646" height="70"/></p>
<p>It give us the infinity value , so it's an error to handle it we have many ways :</p>
<p><strong>If Condition :</strong></p>
<p><code>if(y == 0) </code>we will print for example you can't divide on 0 .</p>
<p><code>if(y == 0){</code></p>
<p><code> console.log("You can't divide on 0");</code></p>
<p><code>} else {</code></p>
<p><code>console.log(res);</code></p>
<p><code>}</code></p>
<p>Here I test if y equals to 0 I can't print the result so I print a message to the user that you can't divide but if it's not equals to 0 it will print the result .</p>
<p><img src="https://a.top4top.net/p_9036p4m81.png" width="385" height="63"/></p>
<p><strong>Try Catch : </strong></p>
<p>We can not apply the try catch for the division on 0 because the node js take the 'infinity' like a value not an error, to explain the try catch let's take another example. </p>
<p>- Firstly I need to import the ' fs ' package which allow us to use the readFile method and to import it we need to create a variable like it <code>var fs = require('fs');</code></p>
<p>After that I will try to read the file , but if there is an error in the reading operation I must throw the error </p>
<p><code>try{</code></p>
<p><code>fs.readFile('inCorrectDirectory', function(err,data){</code></p>
<p><code>if(err){</code></p>
<p><code>throw(err);</code></p>
<p><code>}</code></p>
<p><code>});</code></p>
<p><code>} </code></p>
<p>I gave the method an incorrect directory to make an error and I passed a callback function with two parameters the err and the data of the file and I checked if there is an error I will declare an error .</p>
<p><code>catch(err) {</code></p>
<p><code>console.log(err);</code></p>
<p><code>}</code></p>
<p>In the catch I will print the error to the user to understand what's the problem , and you can show a message at place of the error ..etc </p>
<h3>b - Routes Error : </h3>
<p>Let's return to our REST API application , we have created in<a href="https://steemit.com/utopian-io/@alexendre-maxim/node-js-tutorial-creating-a-rest-api-02-adding-routes-to-the-api-and-use-the-nodemon-package"> the last tutorial </a>the sponsors and contributions routes , when I send a request localhost:3000/sponsors it will give me a message ' Get request to /sponsors ' for example , but if I send an invalid request let's see what will the Postman show ..</p>
<p><img src="https://b.top4top.net/p_9031i5841.png" width="1366" height="569"/></p>
<p>It will give us an HTML page , the title is Error and the page shows a message ' Cannot GET / ' with a ' pre ' tag , it's a default error , I want to change this default error to another page show a message for example . </p>
<p>We have two middleware which forwards requests to sponsors and contributions , there is many ways to handle an invalid request , what I mean by invalid request ?</p>
<p><strong>Invalid request : </strong></p>
<p>When the user write '/sponsors' for example it will be forwarded to the sponsors page , but if it send an empty request , it means just 'localhost:3000/' as you have seen it will give an error , the same thing if he write an incorrect URL for example 'localhost:3000/sponsor' he forget the ' s ' at the end it will give the same error , what's the solution ? </p>
<p>- Simply we use the <code>app.use() </code>method , I used it when the request is ' /sponsors or /contributions ' , I can now use the <code>app.use('/') </code>but as I mentioned above if it write 'sponsor' without' s' it's an error also so I will let the first parameter empty and add just a function .</p>
<p><code>app.use(function(req, res, next){</code></p>
<p><code>var error = new Error("404 Error");</code></p>
<p><code>error.status = 404;</code></p>
<p><code>next(error);</code></p>
<p><code>});</code></p>
<p><strong>Creation new error : </strong></p>
<p>The node js allow us to create a specific new error , I have created an error with a specific message " 404 Error " , and I gave the 404 status also for this error , it's a predefined method and I give this variable or this error to the next method as parameter .</p>
<p><strong>Using the new error : </strong></p>
<p>As I return the error to the next method I will create another method with the error passed by parameter to show the message by using a json object ..</p>
<p><code>app.use(function(error, req, res, next){</code></p>
<p><code>res.status(error.status);</code></p>
<p><code>res.json({</code></p>
<p><code>error :{</code></p>
<p><code>message : error.message</code></p>
<p><code>}</code></p>
<p><code>});</code></p>
<p><code>});</code></p>
<p>I passed the error , request , response and next to the function , I set the status of the response as the same status of the error ' 404 ' and I send the message using the json , this is the result : </p>
<p><img src="https://a.top4top.net/p_903hain31.png" width="1358" height="444"/></p>
<p>I have written' localhost:3000/sp ' and while I haven't a route with this URL , the app.use() without ' /sponsors or /contributions ' will show an error message and this is what has already happened , we have an error with the message '404 Error ' .</p>
<p><img src="https://c.top4top.net/p_9031hwh12.png" width="1355" height="438"/></p>
<p>The same thing I have written just 'localhost:3000' without anything and an error 404 was found !</p>
<h2>2- Body Parser : </h2>
<p>The body parser is a middleware to extract the request body of incoming request, a Post request for example from the user because it's not readable automatically from node js , this middleware was a part of Express framework but now it's a separate package , you have to install this package for use .</p>
<h3>Installation of Body Parser :</h3>
<p>To install this package we need to use<a href="https://steemit.com/utopian-io/@alexendre-maxim/node-package-manager-tutorial-how-to-get-the-npm-and-how-to-create-the-package-json"> the Node Package Manager</a> and we have to install it like a dependency ( <a href="https://steemit.com/utopian-io/@alexendre-maxim/node-package-manager-tutorial-how-to-install-and-uninstall-global-and-local-packages-and-how-to-list-them">You Can Read About Installation</a> ) , this is the code : </p>
<p><code>npm install --save body-parser</code></p>
<p><img src="https://b.top4top.net/p_904i76011.png" width="964" height="275"/></p>
<p>The package was installed successfully , the version of body-parser is 1.18.3 , let's check if it's the same in the package.json file ..</p>
<p><img src="https://f.top4top.net/p_904rcn921.png" width="798" height="416"/></p>
<h3>Using Body Parser :</h3>
<p>After installation we must import this package in our app.js file and to import it we need to create a variable and use ' require method '</p>
<p><code>var bodyParser = require('body-parser'); </code></p>
<p>Now I want to apply the bodyParser to an incoming request , there is many kinds of bodies to parse , first I will parse a urlencoded body and to do it I have to use the ' use ' method with the bodyParser variable .</p>
<p><code>app.use(bodyParser.urlencoded()) </code></p>
<p>The urlencoded method has a parameters (extended , inflate , limit ..etc ) , in this tutorial I will use only the extended parameter , but firstly what's the extended parameter ?</p>
<p><strong>Extended : </strong></p>
<p>The extended<strong> </strong>has two values , true or false and these values depend to the query string if it's true or false , by default the value is true but now we will change it to false to just parse the body .</p>
<p><code>app.use(bodyParser.urlencoded(extended:false));</code></p>
<p><strong>Json:</strong></p>
<p>We need also to parse JSON data like we have parsed a URL , for that I will use the bodyParser with the method JSON without parameters , some incoming requests is on JSON so we must to parse them to JavaScript objects .</p>
<p><code>app.use(bodyParser.json());</code></p>
<p>After that I need to create an object to send inside the post function for the sponsors and the contributions to parse the bodies .</p>
<p>In the sponsors.js file and especially inside the post method for example , I will create a sponsor object with an id propriety , you can add more proprieties :</p>
<p><code>var sponsor = {</code></p>
<p><code>id : req.body.id</code></p>
<p><code>};</code></p>
<p>You can add more proprieties for example name : req.body.name ..etc , by the request body it will take the id , then I will show the sponsor inside the json object </p>
<p><code>res.status(200).json({</code></p>
<p><code>message : "Post request to /sponsors",</code></p>
<p><code>sponsor : sponsor</code></p>
<p><code>});</code></p>
<p>So I will send a response using JSON object with the message and the sponsor object which contains the id , the same thing for the contributions.js file </p>
<p><code>var contribution = {</code></p>
<p><code>id : req.body.id</code></p>
<p><code>};</code></p>
<p>The same thing I created a contribution object with the id and I will send it by the JSON ..</p>
<p><code>res.status(200).json({</code></p>
<p><code>message : "Contributions was created",</code></p>
<p><code>contribution : contribution</code></p>
<p><code>});</code></p>
<p>Let's try to send an empty request to the sponsors and see what's happens .</p>
<p><img src="https://c.top4top.net/p_904porb81.png" width="1356" height="510"/></p>
<p>We have the sponsor object but it's empty now because we haven't send a json data with the id propriety , and to do that we must firstly go to body </p>
<p><img src="https://e.top4top.net/p_904lahgb2.png" width="1357" height="397"/>In the body by default is the form-data , it's a table of data has the key , value , description ..etc and a search input to search data , to send a json request we chose ' raw ' </p>
<p><img src="https://f.top4top.net/p_904x5un63.png" width="1359" height="518"/></p>
<p>In the raw we have the type of data that we will send (text , json , javaScript , xml ..etc ) let's select the JSON (application/json) </p>
<p><img src="https://a.top4top.net/p_904bdgyk4.png" width="1360" height="297"/></p>
<p>I have created a javaScript object with the id propriety , always the propriety and value inside the " here " even if it's not a String value .</p>
<p><img src="https://b.top4top.net/p_904ae1h85.png" width="1355" height="483"/></p>
<p>I sent the request and now the sponsor object is not empty , it has the value of the json object that we sent , let's try the same thing with the contributions </p>
<p><img src="https://c.top4top.net/p_9042iozs6.png" width="1359" height="468"/></p>
<p>The same thing , we have the contribution object with the id that we sent , and this is how to parse URL and JSON objects to be a javaScript objects .</p>
<h2>3- Cross Origin Resource Sharing : </h2>
<p>It's a mechanism that allows a user to access to the site even the site is in another origin that different to the origin of the user , I know it's a bit tricky concept , the idea for example if a user connected to the localhost:port and the site in the localhost:port2 , and the port is not equals to the port2 no the same origin , it will give an error but when we are working with API , we have the CORS that resolve this problem , what we should do ?</p>
<p>- Firstly before the routes let's add another middleware with <code>app.use() </code>and I will add a function that has request and reponse as parameters </p>
<p><code>app.use(function(req, res, next){</code></p>
<p><code>});</code></p>
<p>After that I need to send a response , but now it's not a JSON response but it's a header response , I will create a new header , this one has the attribute ' Access-Control-Allow-Origin' , there is an error if the origin is different between the server and the client, the error is ( ' no access control allow origin header present ') but now by creating a header we will present it to resolve this error ..</p>
<p><code> res.header('Access-Control-Allow-Origin', '*'); </code></p>
<p>The attribute of the header is Access-Control-Allow-Origin and the value is ' * ' , you can give it a url for example https://site.com but it's an API so it's over for all users for that I prefer the ' * ' .</p>
<p>- The second header with the attribute (' Access-Control-Allow-Headers ') that means which kind of headers we want to accept , I can allow any kind of headers by using the ' * ' or I can also specify the types , for example content-type ..etc .</p>
<p><code>res.header('Access-Control-Allow-Headers', '*');</code></p>
<p>The browser sends an options when the user send a request , I will now check if the request method equals to the options for that I will give an access .</p>
<p><code>if (req.method == 'OPTIONS'){</code></p>
<p><code> res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE); </code></p>
<p><code>}</code></p>
<p>So by the ' Access-Control-Allow-Methods' attribute it will allow the methods that I want or all the methods as I explained before , for this example I will use the get , post , put , patch and delete methods , you can also return a json message or something else , this is the full code :</p>
<p><code>app.use(function(req, res, next) {</code></p>
<p><code>res.header("Access-Control-Allow-Origin", "*");</code></p>
<p><code>res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");</code></p>
<p><code>if(req.method === 'OPTIONS'){</code></p>
<p><code> res.header("Access-Control-Allow-Methods", "*");</code></p>
<p><code> return res.status(200).json({});</code></p>
<p><code> }</code></p>
<p><code> next();</code></p>
<p><code>});</code></p>
<p>I will just save and restart the server to see the result just I will save and it will automaticallty restart </p>
<p><img src="https://c.top4top.net/p_904xxi831.png" width="446" height="40"/></p>
<p>Let's send a request using postman , I am using the same orgin that the site so nothing will happens </p>
<p><img src="https://d.top4top.net/p_904cllqg2.png" width="1359" height="392"/></p>
<h4>In order to fully understand the terms that I have used, you should read past tutorials in which I have provided all about Node JS and Node Package Manager .</h4>
<h1>Curriculum </h1>
<ul>
<li><a href="https://steemit.com/utopian-io/@alexendre-maxim/node-js-tutorial-creating-a-rest-api-02-adding-routes-to-the-api-and-use-the-nodemon-package"> Node Js Tutorial Creating a REST API #02 Adding Routes To The API And Use The Nodemon Package</a></li>
<li><a href="https://steemit.com/utopian-io/@alexendre-maxim/node-js-tutorial-creating-a-rest-api-01-what-s-the-api-and-how-to-build-it"> Node Js Tutorial Creating a REST API #01 What's the API and How To Build It </a></li>
<li><a href="https://steemit.com/utopian-io/@alexendre-maxim/node-package-manager-tutorial-what-s-the-semantic-versioning-and-how-to-control-it-also-from-the-package-json-file">Node Package Manager Tutorial What's The Semantic Versioning And How To Control It Also From The Package.Json File</a></li>
<li><a href="https://steemit.com/utopian-io/@alexendre-maxim/node-package-manager-tutorial-how-to-install-and-uninstall-global-and-local-packages-and-how-to-list-them">Node Package Manager Tutorial How To Install And Uninstall Global And Local Packages And How To List Them</a></li>
<li><a href="https://steemit.com/utopian-io/@alexendre-maxim/node-package-manager-tutorial-how-to-get-the-npm-and-how-to-create-the-package-json"> Node Package Manager Tutorial How To Get The NPM and How To Create The Package.JSON</a></li>
<li><a href="https://steemit.com/utopian-io/@alexendre-maxim/node-js-tutorial-select-from-where-order-by-delete-and-limit-using-mysql-module">Node Js Tutorial Select From Where , Order by , Delete and Limit Using Mysql Module</a></li>
<li><a href="https://steemit.com/utopian-io/@alexendre-maxim/node-js-tutorial-serve-html-pages-serve-json-data-connect-and-insert-into-db-using-mysql-module"> Node Js Tutorial Serve HTML Pages , Serve JSON Data , Connect And Insert Into DB Using Mysql Module</a></li>
<li><a href="https://steemit.com/utopian-io/@alexendre-maxim/node-js-tutorial-how-to-create-read-and-write-stream-manually-and-automatically-for-big-files">Node Js Tutorial How To Create Read And Write Stream Manually And Automatically For Big Files</a></li>
<li><a href="https://steemit.com/utopian-io/@alexendre-maxim/node-js-tutorial-read-write-and-edit-files-and-directories-by-fs-module">Node Js Tutorial Read , Write and Edit files and directories by fs module</a></li>
<li><a href="https://steemit.com/utopian-io/@alexendre-maxim/node-js-tutorial-how-to-use-event-emitter-by-events-module">Node JS Tutorial How To Use Event Emitter By Events Module</a> </li>
</ul>
<h1><strong>Resources</strong> </h1>
<ul>
<li><a href="https://nodejs.org/api/">Node Js API </a></li>
</ul>
<h1>Proof of Work Done </h1>
<p>https://github.com/alexendre-maxim/routesUtopian</p>
</html>
hiveblocks