{"id":6213,"date":"2020-05-02T11:31:12","date_gmt":"2020-05-02T11:31:12","guid":{"rendered":"https:\/\/max-drake.cc\/?p=6213"},"modified":"2020-05-02T11:31:17","modified_gmt":"2020-05-02T11:31:17","slug":"building-an-api-in-node","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=6213","title":{"rendered":"Building an API in Node"},"content":{"rendered":"\n<div class=\"wp-block-cover has-luminous-vivid-amber-background-color has-background-dim lazyload\" style=\"background-image:inherit\" data-bg-image=\"url(https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-05-02-11_22_45-COVID-19-current-cases-_-Ministry-of-Health-NZ.jpg)\"><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size\"><span style=\"color:#0693e3\" class=\"color\"><span style=\"background-color:#8ed1fc\" class=\"background-color\">This is a cover block I&#8217;m trying out<\/span><\/span><\/p>\n<\/div><\/div>\n\n\n\n<p>I&#8217;m going to try and follow this tutorial, some of the early ones are stuff I&#8217;ve done before, but the reference to the npm video was interesting. Also to the npm site for looking at packages.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"8.4: RESTful Routes with Parameters - Programming with Text\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/oMhAd864bBc?list=PLRqwX-V7Uu6Yyn-fBtGHfN0_xCtBwUkBp\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Two other resources I just want to highlight. 1\/ Daniel Sh<strong><a rel=\"noreferrer noopener\" href=\"https:\/\/shiffman.net\/learning\/\" target=\"_blank\">iffman website<\/a><\/strong> and 2\/ <strong><a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">npm website<\/a><\/strong> for packages.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Objectives<\/h4>\n\n\n\n<p><strong>First objectives with API<\/strong><\/p>\n\n\n\n<p>After playing around with Node.js I&#8217;m starting to get the feel of it and what it does, now I need to reconfirm my objectives. I want to:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li> scrape a site and get data from a table, <\/li><li>add the data to a JSON file, this is not necessarily the case actually, I just need, in the terms he uses in the videos &#8220;persistence&#8221; where I can store the data, (<em>and I think at the end of this it will be a database table and making calls<\/em>) so I need to get some data , <\/li><li>store some data <\/li><li>serve that data up<\/li><\/ol>\n\n\n\n<p><strong>2nd Objective<\/strong>&#8211; hosting the node server<\/p>\n\n\n\n<p>Next I need to host the Note server instance, so I think this will be another post, and I think the first part is doing it on a Horuku site , but I have a feeling I&#8217;ll need to go via Github. <\/p>\n\n\n\n<p>I want to be able to have the server running continuously so I can make requests to it at anytime from anywhere. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The building an API in Node tutorial<\/h3>\n\n\n\n<p>tut 1 &amp; 2 ok, tut 8.2 have initial setup running, all basic, no problem.  Now Routes, I thought this was interesting for linkages and API calls , especially with queries to aPI&#8217;s. So starting that tutorial now:<\/p>\n\n\n\n<p>So using : <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app.use(express.static('website'));\n\napp.get ('\/flower', sendFlower);\nfunction sendFlower(request, response){\nresponse.send(\"I think flowers are nice too\");\n}<\/code><\/pre>\n\n\n\n<p>you can go to the server and : <strong>http:\/\/localhost:3500<span style=\"color:#cf2e2e\" class=\"color\">\/flower<\/span><\/strong> add the \/flower on the end it feeds back information <strong><span style=\"color:#cf2e2e\" class=\"color\">without the HTML page doing anything<\/span><\/strong>. So this is calling a function and rendering the result directly to the page. <\/p>\n\n\n\n<p class=\"has-background has-luminous-vivid-amber-background-color\">This is something different and I need to get my head around this. <span style=\"color:#cf2e2e\" class=\"color\">I didn&#8217;t know you could do that!<\/span><\/p>\n\n\n\n<p>So the next stage is : app.get&nbsp;(<strong>&#8216;\/search\/:<span style=\"color:#cf2e2e\" class=\"color\">flower&#8217;<\/span><\/strong>,&nbsp;sendFlower); <\/p>\n\n\n\n<p>This means the &#8216;\/search\/ is the<strong> route<\/strong> annd the &#8220;<strong> :<\/strong>&#8221; is something that the user wil give which will be put in thr REQUEST. So in <span style=\"color:#ff6900\" class=\"color\">http:\/\/localhost:3500\/search<\/span>\/<span style=\"background-color:#ff6900\" class=\"background-color\">poppy<\/span>,  I added poppy, so that came out in the page, not written on the index.html page but rendered directly from JavaScript.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"374\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_27_52-Mozilla-Firefox-1024x374.jpg\" alt=\"\" class=\"wp-image-6215 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_27_52-Mozilla-Firefox-1024x374.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_27_52-Mozilla-Firefox-300x110.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_27_52-Mozilla-Firefox-768x281.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_27_52-Mozilla-Firefox-1536x562.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_27_52-Mozilla-Firefox-50x18.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_27_52-Mozilla-Firefox-137x50.jpg 137w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_27_52-Mozilla-Firefox-100x37.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_27_52-Mozilla-Firefox-274x100.jpg 274w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_27_52-Mozilla-Firefox-640x234.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_27_52-Mozilla-Firefox.jpg 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/374;\" \/><\/figure>\n\n\n\n<p>So the final tut show iteration where if you put in a flower, then number, it will iterate through and repeat the text the number of times you&#8217;ve put it in. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const express = require('express');\n\nconst lg= console.log;\nvar app = express();\nvar server = app.listen(3500, listening);\nfunction listening (){\n    lg(\"listening...\");\n}\n\napp.use(express.static('website'));\n\napp.get ('\/search\/:flower\/:num', sendFlower);\n\nfunction sendFlower(request, response){\nvar data = request.params; \/\/we are adding parameters\nvar num = data.num;\nvar reply= \"\";\nfor (var i=0; i&lt;num; i++){\n    reply += \"I think a \" + data.flower + \" is nice too &lt;br>\";\n}\nresponse.send(reply);\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"480\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox-1024x480.jpg\" alt=\"\" class=\"wp-image-6216 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox-1024x480.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox-300x141.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox-768x360.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox-1536x721.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox-50x23.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox-107x50.jpg 107w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox-100x47.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox-213x100.jpg 213w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox-1364x640.jpg 1364w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox-640x300.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-02-12_34_25-Mozilla-Firefox.jpg 1554w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/480;\" \/><\/figure>\n\n\n\n<p>So, in this tutorial we have defind a route and also added parameters to the route with keywords. The route <strong>\/Search<\/strong>, and the keywords<strong> \/:flower <\/strong>(<em>you specify<\/em>)<strong> \/:number<\/strong> (<em>you specify<\/em>)<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Tut 4 &#8211; sentiment analysis<\/h4>\n\n\n\n<p>This is about adding some persistance using json data in a sentiment analyser. So follwoing video wen well, so can now get all the DB, add to the DB &amp; search in the DB. But no persistence if you restart the server, as the file is not saved, so added values are not saved.  I&#8217;m putting code below as it alters over the tutorials, so its good to have an indication of what happens at each step, easier to go back and check code. <\/p>\n\n\n\n<p>So 3 routes created, <strong>&#8220;\/all&#8221;, &#8220;\/add&#8221; &amp; &#8220;\/search&#8221;<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const express = require('express');\nconst lg= console.log;\n\nvar words={\n\"happy\" : 2,\n\"joy\": 3,\n\"euphoria\":8,\n\"gloom\": -2,\n\"melancholy\": -1,\n\"despondancy\":-4\n}\n\n\n\nvar app = express();\nvar server = app.listen(3500, listening);\nfunction listening (){\n    lg(\"listening...\");\n}\n\napp.use(express.static('website'));\n\napp.get ('\/add\/:word\/:score?', addWord);\/\/ adding ? to last will make it optional \n\nfunction addWord(request, response){\nvar data = request.params; \/\/we are adding parameters\nvar word = data.word;\nvar score =Number(data.score);\nvar reply;\nif(!score){\n    reply={\n        msg:\"Score is required.\"\n    }\n        } else {\n            words&#91;word] = score;\n            reply={\n                msg:\"Thank you for your word.\"\n        }\n}\nresponse.send(reply);\n}\n\napp.get('\/all', sendAll);\n\nfunction sendAll(request, response){\n    response.send(words);\/\/ words is structured as JSON so express will send it out as JSOn\n}\n\napp.get ('\/search\/:word\/', searchWord);\n\nfunction searchWord(request, response){\n    var word = request.params.word;\n    var reply;\nif(words&#91;word]){\n    reply={\n        status: \"found\",\n        word: word,\n        score: words&#91;word]\n    }\n}else {\n    reply = {\n        status: \"NOT found\",\n        word: word\n    }\n}\nresponse.send(reply);\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">T5 Saving data to JSON file<\/h3>\n\n\n\n<p>This is creating a JSON file as store of data for persistance and then loading file, syncronously, so data loads first before it goes to next step, then can add to the file, but write asyncronously (otherwise it re-loads all the file again, which we do not want to happen each time. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const express = require('express');\nconst fs = require('fs'); \n\nconst lg= console.log;\n\nvar app = express();\nvar server = app.listen(3500, listening);\nfunction listening (){\n    lg(\"listening...\");\n}\n\n\nvar data1= fs.readFileSync('words.json');\/\/readFileSync means that the data all has to be loaded before it goes to the next step.GOOD\nvar words=JSON.parse(data1);\nlg (words);\n\napp.use(express.static('website'));\n\napp.get ('\/add\/:word\/:score?', addWord);\/\/ adding ? to last will make it optional \n\nfunction addWord(request, response){\nvar data = request.params; \/\/we are adding parameters\nvar word = data.word;\nvar score =Number(data.score);\n\/\/var reply;\nif(!score){\n    var reply1={\n        msg:\"Score is required.\"\n    }\n    response.send(reply1);  \n        } else {\n            words&#91;word] = score;\n            var data = JSON.stringify(words, null, 2);\n            fs.writeFile('words.json',data, finished);\/\/ this is not writeFileSync ans we dont want to re-upload file each time, so just writeFile\n\n            function finished(err){\n                lg('word added');\n                var reply2={\n                    word: word,\n                    score: score,\n                    status : \"success. Thank you for your word.\"\n                }\n                response.send(reply2);   \n                }\n            }\n\napp.get('\/all', sendAll);\n\nfunction sendAll(request, response){\n    response.send(words);\/\/ words is structured as JSON so express will send it out as JSOn\n}\n\napp.get ('\/search\/:word\/', searchWord);\n\nfunction searchWord(request, response){\n    var word = request.params.word;\n    var reply;\nif(words&#91;word]){\n    reply={\n        status: \"found\",\n        word: word,\n        score: words&#91;word]\n    }\n}else {\n    reply = {\n        status: \"NOT found\",\n        word: word\n    }\n}\nresponse.send(reply);\n}\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">T6 Showing Clientside on page &amp; T7 doing sentiment analysis<\/h4>\n\n\n\n<p>I just watched these videos as I&#8217;m not particularly interested in this part except for the POST and COR&#8217;s parts in video T7. He went through those pretty fast, so I&#8217;ll need a project to look at to go back and use. He also did a lot with the P5.js package which I haven&#8217;t used so I may have to go and look into that later. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">End comment <\/h3>\n\n\n\n<p>For the moment I wonder if I can add HTML into the information coming back from get request so that it renders in the browser (it didn&#8217;t , although I did use linebreak somewhere and that worked. <\/p>\n\n\n\n<p><strong>P5.js<\/strong><\/p>\n\n\n\n<p>Also I may have to go back and do a bit with the P5.js modules. Actually that looks quite graphical, pretty but you can draw elements with it so may be worth exploring for something like responsive plans  <\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Start learning here!\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/videoseries?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Objectives form Tutorials. Good but I still need a lot more from other sources. <\/strong><\/p>\n\n\n\n<p>From <strong>First objectives with API<\/strong> on the list I think I have an ideaon how to use put data into a <strong>JSON file<\/strong> and how to access it, server side, (items 2\/3) so I need to konw how to append to a file. But first I need to get the NodeJS server running on Horuku or something similar, I need a live source to play with. <\/p>\n\n\n\n<p>From previous post I have got information from tables, now I have to combine that with what this series has taught me to try and build a JSON file and append the data. <\/p>\n\n\n\n<p>Later I&#8217;ll need to render it client side, which will mean calling that data. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m going to try and follow this tutorial, some of the early ones are stuff I&#8217;ve done before, but the reference to the npm video was interesting. Also to the npm site for looking at packages. Two other resources I just want to highlight. 1\/ Daniel Shiffman website and 2\/ npm website for packages. Objectives [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6218,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,43,445,29],"tags":[],"class_list":["post-6213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-api_json","category-javascript","category-node_js","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-03-11_29_17-http___localhost_3500_all.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-03-11_29_17-http___localhost_3500_all.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6213"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6213\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/6218"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}