Build a full stack application with Node-RED

welcome to the course build a full-stack application in minutes with no red in our first lecture we will introduce what is now red and what were we going to do in this course we're going to build a medium monitoring application and we will do that by dividing it in a back-end and an API and front-end we will not need any kind of hosting or anything outside our computer we will not require any kind of coding or prior knowledge of programming languages how is that possible because we're going to use visual programming and we're gonna use no dread the only requirement it will be to install nodejs which is an open source platform but we will do that on the next lecture let's start by defining what's medium monitoring medium monitoring is something invented long time ago in the past century when for example a company a was investing in advertising products or services in newspapers TV or radio company a will hire at the same time Company B to monitor the media and Company B will send in a monthly or weekly basis reports to Company A with exact information about when and how many times the advertising's appeared this of course evolving in time and companies who use it this not only for advertising but in general to be aware of what was happening on the media with the invention of the Internet of course the online media became more important this includes of course online newspapers microblogs blogs and social networks and of course internet made possible for companies to became paperless and migrate everything to a web application so that company a could access this application anytime and have access to dashboards reports or receive alerts immediately to react timely but also this model kept evolving let's assume it that there are many companies the company a that are interested on the same service so what would company be do company we will create a front-end for them so they will all use the same web application but with different credentials and they will access their information through a unique channel Company B will use a back-end to make the necessary adjustments and to fulfill the requirements of all these companies so both back-end and front-end will be communicating through an API without interrupting the service at any moment and this exactly is what is also known as full stack so why is it called full stack because as you can see it's conformed by many layers which are in the form of a stack so in the backend typically you will need to know programming languages like PHP Ruby Python or Java or C sharp and in the front-end you will use mainly JavaScript along with HTML and CSS and also databases are part of the full stack and even sometimes mobile applications for the most common operating systems so when you hear that someone is looking for a full stack developer they are actually looking for someone that knows all of these which is crazy right anyway fortunately we're not going to learn anything like this here because we're going to use visual programming and we're going to use no red to connect this front-end with the with the backend using building blocks so we one need to know programming languages like PHP ruby orange or javascript perhaps we will need to copy and paste some HTML and link some external CSS but no programming in this course but apart from not going white visual programming is good well personally think that if we are capable of figuring out our application using diagrams and box why can't we just use diagrams and block to deploy the application itself so that's possible right now with this new paradigm of visual programming finally if you search for knowledge you will find that it's intimately related with the Internet of Things and indeed Norrell was created with the Internet of Things in mind and because it's a lightweight application it can run inside gateways for sensors however no read is actually built over nodejs which is a full programming language so potentially everything that is available in all GS is available in all red and it includes a lot of models for web development and that's why we're going to use it for web development however if you think about it everything can be a thing it's not that only sensors like weather traffic or home automation are things actually instant messages emails post news videos etc there are all things as well and more generally speaking web requests and responses are things as well and that's what we will be working with so it seems that we are entering an age where everything is converging into IOT and it's a good idea I strongly suggest you to start thinking as everything can be a thing you will be able to combine things like news media robots devices transactions everything in the same place and create new things out of the things that already exists there on the Internet so just think that everything that travels in the Internet is a message and the message can only be either data or recommend all right so enough about theory now in our next lecture we will start installing no Joe yes and inside no we will install node read and build our first color world example all right see you then this is our second lecture here we will do a couple things we will install node-red and also create our first application a hello world example so what are the installation steps first of all we need to download and install nodejs we can do that by going into this URL nodejs dot org this website will automatically detect your operating system so you don't have to worry about that I suggest you to always choose the option on the left LTS version so we'll click here and then we will save the file on our computer on the desktop is fine so once it is finished we can simply just go and execute it accept everything running accepted terms in the license agreement and go ahead and install everything so now that note is in style we need to open comment line come online you can find it using any of these names depending on your operating system for example in Windows I can use command or simply CMD for short and then I will open this black window next we will need to install no red model I've forgot the command to install this model but I can simply search in the internet how to install no red install I will find easy this command here will come in style if you are on a Mac or Linux machine you will need to use sudo otherwise you can just simply copy this go to your common line and paste it and run it alright so now that already is in itself let's review some of the basic information to launch no red we need to open a common line and type no - red so we type here CMD to open the common line and here we type no red now we need to wait for it to load and when it's running we can see these last message that it says is running on this URL we can copy here and paste it in our browser we can just simply go and type it as 127.0.0.1 : 1880 and here this is no red and it's running now however if you don't want to type this number we just simply type cat host so instead of juicing this number and simply use localhost it's easier for you to remember so if I try this I'll get the same page if we want to stop no red you want stop just by closing the browser we will need to close the common line as long as this common line is open no red will be working if you wanna stop now red you can simply do ctrl C if you're on a Windows or a Linux machine or come and see if you're on a Mac or if you forget about this you just simply click here and close it if you close that window you will see that no red will not work anymore so let's go back and open it again so now let's go to our first example what we gonna do we're gonna create a hello world example we can do that just by simply dragging HTTP and then a template and finally an HTTP response this is all the blog's that we need for this example I always when I work with no read I always like to show the grade so it's up to you if you like that too you can also check these to snap things into the grade so you can see this beautiful grid then we will just connect the dots also it's very good practice to name your flow so here you will call it hello world so we will start by configuring the first no we will need to create a URL for this let's call it hello what we need is to answer with some HTML return some plain text in the form of HTML if you don't know HTML you can simply type HTML basic basic page you can simply copy and paste this this is the most basic HTML document that you can see so let's change this and put hello world and then we can click the boy here so if we go to localhost hello you can see our application running as you can see it's very easy it's a very simple thing only three nodes here and you have your first web application the next thing to do would be to Allen style with CSS and we will do it by linking an external CDN CDN stands for content delivery network and URL where you can always find a file we can simply type would watch which is a website that contains three themes for bootstrap so as you can see there are many skins here that you can use we will choose slate which is my favorite so slate looks like this so what we want is to find a CDN for food watch so we type here we'll find this or you can find the CDN for this template so let's copy the HTML link and back to our application what we need here is to quickly open here and add this as you can see I just copied and pasted this whether you use it should use HTTPS or HTTP it's a good question so if you want to avoid that problem you can just simply start from the double slash with apply again and we will see now is that our application looks much better now it has the style that we took from both watch on the next lecture what we want to do it's going to start reading RSS feeds from online newspapers detect keywords on the fly and send automatic notifications all right see then this is our third lecture and first approach to online media monitoring in this lecture we will create an RSS news reader you're going to read RSS feeds from online newspapers detect key words on the fly and send automatic notifications if those keywords match for this example we're going to focus just in sports newspapers and we're going to track only one team of NBA basketball which is the Walden State Warriors we're gonna use these four keywords which are waters is the name of team Golden State is a nickname for the city of San Francisco Stephen Curry is the main star and Steve Kerr is the head coach but first of all what are RSS and atom both are types of web feeds people refer to them also as site summary or syndication in there based on XML so we're going to use them because suppose that there are a lot of online newspapers that we want to monitor but they all present information in different format we're going to use an standardized format which is RSS this format also give us direct access to these four things that are essential for all the news which are a headline an abstract link to read the complete article and a timestamp so let's go and open know read let's create a new flow and name it RSS reader here you'll see there is one node called feed parser and this is what we want to use it's a very simple node we only need to build this with an URL and put the interval of the minutes who want to refresh it let's use one minute so where do we find the URLs can simply search for sports RSS feeds here you find most popular online newspapers for example let's start with the first one ESPN and here you can only please simply go top headlines as soon as you see this XML means that this is actually the RSS Channel and you can also confirm that because it starts with RSS just copy this and paste it here let's put a short name ESPN connect the bug here to read the output I also recommend always to use complete message object and also when you're working with multiple workflows it's a better idea to choose only to deploy modify those let's connect this and deploy it we look into the debug window we can see it of the news and they are biases an article with the title description link and so on so now what we want is to look for some keywords for that we're going to use switch this know allows us to look for property of our object in this case what we're looking is for the description article that description we're going to look it contains warriors or if it contains Golden State or if it contains curry or if it contains care we'll also need to add one option any other to send it to the fifth port so as you can see now we have no that has five ports in what we want to do is to send an email if the keywords match for the others not called email so let's configure it now that we have our credentials here we need to see what inputs do we need to pass to this no click into info we need to fill the payload with the body of the message and topic with the subject also we need to provide from with another that we can identify for that we need a change no recalling from here we want to catch any of the first four outputs so I'm gonna wire the first four it matches any of these four we will send an email otherwise we're going to dispose that result also know that if this word comes with a no / case like this you want match because we're only using lower case to fix that we can simply switch these two red X and do that for all and also check the ignore case checkbox also if you know reg X you can merge all these four in just one expression if you know how to do that but we're going to keep it like this right now well we won now is to set the payload would be the body of our email with the description of the article so we can simply say article description and as a subject we would like to have the title there finally the feel from to be something like this so once we have these three rules we can simply connect this here this is my email and here we see that we have an RSS alert and see that there is something about the wired however there is something missing the link where I can read the whole story of the article unfortunately it's not possible to say okay something like this so I'm going to delete this here we're not going to handle the description here and we're going to add a template here so we will open our template we're going to use more such template you can simply just put here article description and then read more put the link so what is mustache more such is a library of JavaScript that uses these curly brackets twice so with a little bit of imagination you can see a message here let's just save this and the boy again look at our inbox we can see that now that we have the description the summary of of the article and also we have this read more with the link however the link here as you can see is not well rendered let's take a look at the info box from for this node and see by default most such will escape the HTML entities so to prevent this we need to use triple braces ripple braces here try again now we will refresh this this seems to work if I click on it I can see the link is working so let's go and add more feet we read it for ESPN let's go for the next one which is Fox Sports all headlines and then we can copy this find our feed parcel here paste the URL that's at one minute Fox you can simply just wire here and apply it and go to our e-mail and see now that we have this is the one from ESPN and we also have one from Fox Sports if I click here I can see this one is from Fox and as you can see there's one problem here that these alerts will keep triggering over and over because there's no logic to keep track of the others that have been sent but we are gonna excel on the next lecture so let's review what are the inadequacies of our first approach first of all alerts get triggered over and over also changes in our configuration right now I require that we have to deploy the application again and therefore we interrupt the service and this is because we're following this schema where we are doing the configuration directly into an owl read on our next lecture we're gonna build a back-end web interface so that we will manage the RSS feeds and keywords on real-time we will replace this configuration here with the backend and also we will design a better logic for the notifications so they don't get triggered over and over we're going to create a front-end to display the content thank you very much welcome to our fourth lecture here we're gonna design our back-end recall from our last lecture we had this design we're gonna implement database and we're gonna use sequel Lite sicklied is a good option in this case because it's lightweight it's portable so the whole database only uses one file and uses a simplified syntax compared with other flavors of sequel we will need to define three tables in our first table named feed we're gonna store two columns and name or identifier in a URL of our feeds on the second table the keywords that we want to monitor we're gonna combine these two tables so that no read can send notifications but at the same time we will want to store these results in a table and create one column if it's true is that we already send a notification and if it's false is if we still need to send that notification so let's go and open no read you need to install a new model go to manage palette in here install when search for sequel light with here now that our model is in South let's go and create a new flow in a minute maybe mean you're going to search for all new node and double click to configure it we need to provide the location of our database we can simply find a place in our computer and create a folder on it or so we can copy this that paste it here in choose name for our database monitor you can either put sequel light dots equal height or simply dB you can use the extension that you want doesn't matter and we are that this named is TV so now what we need is to create three tables we're going to do that by injecting a sequel command and in topic we can but create a table we only need to provide the name of the table and the names of the columns of the table let's repeat this for the other two tables for this table we only need one column called expression and finally a table for all the matches we will store the link title description and one column called sent also it's a good trick here to specify link to be unique and then we can just simply wire this here deploy and if we trigger these three we have just created three columns it's a good idea to have one in case we want to raise the table and start all over again call drop let's also put some labels here to know that these are for deletion and these are for creation and we have our database running so now that we have our three tables need to specify a back-end and this will be the URL where we manage our feeds we can actually reuse our pass flow of hello world so in this flow will put all our web requests and let's go and change these instead of hello money tour fee here on our template we're going to reuse this because we already have the boots watch CSS and remove this paragraph remember the name of the templates is late let's go back and see the way one is to show a table so let's go here just copy the source code of a table and paste it here so if we deploy this and go up a host new tour V so if you know bootstrap you can simply put a div here plus container and let's remove all the route that you don't want some of this the first column will be named then in URL and we leave one column for deleting the rows yeah we have only three columns next we will make a call to the database so we will insert this here and use fix the statement so we're gonna select everything from feed we need to see the output of our database let's fix this error here select sorry I forgot to put this here so we see the output the payload comes in an array which is empty because we don't have an information on the table so let's go and create a new endpoint this time the method will be post because we want to create a form will put this temporarily here and on the template we will need to add a form here so let's open some space here and create a form let's take an input from here so here you see the forms we need a text input and paste it here need to change the name here this is for name we don't need we don't need a placeholder and a name name and this is not a specific type this table is for name and do that do one for the URL so if we deploy again we see that we now have a form now we need a button to submit the form let's take a look at the input here when we sent the form just name this when you click Add we see that inside our payload we have our variables here so what we want is to insert this information into the database you can do that with a simple template with this simple statement and then send it to our database this will just copy this and in this case we don't we're not using a fixed statement we're taking it from topic so we need to make sure that we're sending this on the topic we want to read the output here and see the results read out from here so so we can see on the payload that now we can we can read the database and see the results that we just ingested so we need our template to be able to read on the table we're going to loop into inside our payload and this is with this special character the pound key this is how we close it we need to change this to more such and then we can see this is specific syntax what you can read more about it just click here on the info box and you can there's a link here what you can see how you can look inside a list like here so we're going to loop inside our list I'm going to show here the name the URL here we would like to add a link to delete go back to our template and look for a button mmm so what about this we can use this one the red one let's copy that and paste it here we don't want to use button we will use link so we can change that and let's leave it like this for now delete now if we deploy this yeah we can see now the table is displaying this the bottom is not working though so let's configure this button by a simple trick here and see qualities that you can retrieve the raw ID so now that you have it it's simply you can call it from here now we will need to create some end point that's creative to folder called delete and then the ID here if we refresh this a different URL where it's supposed to delete it but we haven't done it yet so let's go back and create it I get method so I'm gonna copy this from here so in all red it's possible to read the poems if you use here row in the name of your barber we need to send an output we see now is the part that you're sending and this is here so let's add a template similar to this for deleting so we need to know what is the path of our ID and is inside rec params and then rowady we can reuse this send the command to the same database so there will be no need for this wire here we can actually delete so we can create rose here and delete them so let's go ahead and add our original feats we can simply go here and copy this this would be ESPN Fox Sports ah but there's a problem here if you remember we need to tell must touch not to you and call the HTML entities don't very easy if we will put triple braces here still it again now we can see this is working Fox Sports so let's go ahead and add more what about CBS Sports we can also choose directly NBA CBS si.com all right for now now what we can do is make this form look better because the size of this input is accelerated this course is not about bootstrap but if you know how to do this you can just simply add a deep class row and then the class column md6 and make two columns of six units so this will divide health and health put the table on the first container and the form on second one and we'll see now that this looks it has now two columns and this adapts of course to different devices so if you are on a on a tablet or on a cell phone you will see this differently this is one of the beautiness of bootstrap will we forgot to put this inside of the container so there you go we already created a back-end for feed and we need to do the same for keyword here what you can do is it's let's first put a comment here we can simply just copy this and paste it here and just change everything for keyword however a quick trick you can do here is you can select everything export to your clipboard and then open your favorite text editor paste it and replace all fee for keyword copy everything again import from clipboard paste it import however there are some things we still need to change for example the number the name of the columns so here we know that for keywords is different there's only one column same for same for the insert command and the delete command well not for the delete command now we deployed is we can actually just try keyword and we'll see we have the same thing we can add our keywords here all right so the next step is that we have already created this back end and we have access from where we can manage our database the next step will make no ready to read the feeds and the keywords from the database and also created small logic to make the notifications be aware of what's already there on the database and not repeat over and over that we take our all reader and put a comment here we're gonna now use a different approach because we will not use these notes anymore who start adding a timestamp and first reading the keywords we can simply copy a database from here to read the keywords so we click here we can see our keywords are there now we will need to create expression to find any of the keywords and we will use JSON data we're going to define a new property just named keyword in here we will look for this J which looks like some music notation and open the editor the best way to test this is just copy the object here and paste it as an example then just click here to beautify it and so what we need is to read all the expressions that we have on the object payload expression so as you can see from here with this very simple expression in JSON data I'm changing all this object in just of strings now there are some functions that we can use there's one called joint copying these syntax it says join then the array and then the separator I'm going to put a pipe get this result so what I'm doing is in in regular expressions this pipe means or if you find water or scrolling state coracle and be any of these with just one expression and now we will read the feed the URL of the feet we can simply copy this from here from the feet when I inject the sign now I can see that I have a rap article keyword in a payload in this case I have four URLs on ESPN Fox Sports CBS Sports sigh so what I want is to split this object in four different objects and I can do that with this null here called split this would try these three approaches from an array it will create four different objects of length of one now I have one two three four different objects and each object will have only one URL and all of them will have the same expression keyword you see HTTP requests here but is required to have a property called URL so we will need to move what we have in payload URL to the property URL for each URL I'm getting this XML that is the RSS so next step is would be to parse the XML and I would it will put that on the payload horses channel first channel item they will see these are all the news from each of the field with is no change to relocate following this payload RSS then channel item and this ray of ten is what I want to move simply to payload all my entries for HV next what I need is to split these articles again so I will use again split so for every object have only one article with the title description copy the switch from here and we can remove all of these just keep one instead of looking for a string we can use this property here keyword so for some reason is seen inside an array look for the first member of the array the index 0 and name this match so these are on there only the results that actually match and we can see on the description that we have some of the words we're looking for so the final step will be to insert these in the database from here we can copy any of these so in this case I recommend you to add ignore in case we have repeated links this command will be ignored we need to put 0 here and also we don't want more such to encode 3 braces and the other two columns which are the title description we keep only two races and finally there is a fourth column which is sent we're going to just put 0 as false and 1 as true so yeah we can see here this will be our command this and 0 are sent we can simply copy this from here and now we can simply go and ingest all of this into our database finally we will want to send notifications you don't need this anymore but this time we don't want notifications to be every minute we can actually define just a specific time so what about lunchtime from Monday to Friday Monday copy this from here we are reading all the objects that we stored on the database however we want only to read those that have not been sent we're sent it's equals zero and then split this payload time thirty four different messages and here we have an object for each entry the description will be now on payload and link here however as soon as we send an email we also want to update the database and say well we already sent it simple we can copy this we can reuse this node update match set and equals to true where row ID and this is a non insert plan update but of course we don't wanna send a part of emails even if it's just once a day we can read it before the split we wanna send it's just one email with the twenty seven articles the topic this time will be daily report and here on our template we would like to iterate on pelo so this would be the body of our message now let's send the email and we can see we have the daily report here of course they need a little bit of formatting but here are all the 27 stories if we run this again now we update the database that with the information that we already sent the emails it will be sent one more time but if we trigger this again an empty message because there are no fields this can be fix it with a switch so we look at the payload and if it's empty we'll send it to one otherwise sent to the port to empty why are these from the second you will run this again see there's no output here and we are not getting more emails so on our next lecture what we're going to do is gonna build a front-end to display the content and we will expose an HTML fronting and also an API that uses JSON thank you very much see you then welcome to our fifth lecture where we will design our front-end we basically have this application design and now we're going to build a front-end to display the content so let's open know ready we can start by copying an existent endpoint and do some changes to read the table match we don't need a forum anymore only a table let's change the weight of the column 12 mins a hundred percent of the width here we need three columns a headline summary in one column four cent same here so one will be description the title will be one title to be a link in case we want to read the whole story and whether it has been sent or not let's change the heading for latest stories and check it out so now here we see a table with all the items that have been matched by our keywords in this column we can see that some have been sent already and some haven't but let's add a line to sort these by the newest at the top and the others at the bottom the newest stories at the top and the oldest at the bottom now let's add a navigation bar at the top we can do that by looking at our template so we can copy this one and paste it let's customize the bottoms here we have our navigation bar at the top let's not implement the searching function we do that simply by adding a method here equals post and action pointing to this same front end and a name for our variable will be searched in copy these and create a post method let's see how these variables look like so here is the variable we're looking for we can reuse this equal line and paste it here another line for selecting where title like payload dot search or the same for description and actually we can merge these two and using the topic let's not forget to use to put topic here so now we can search something like rent all the entries that up the word rent or for example injury but of course we would like to have the world here to see what we have just search so let's do that we can do that here on the input and set the value equals bailout search however the problem is that this node will override the payload property we can also read it from reg body search so let's change it for Greg body search now if I type this I can see it stays on the text input let's also add a margin below the navigation bar in bootstrap that is as easy as just putting margin button equals four as part of the style of the navigation bar and there it goes there's also a problem here if I make the display smaller the bottoms of the menu will be collapsed on this button but the bottom is not working so that can be fixed by adding two libraries one is jQuery and the other one is the boot Squatch bundle so let's search for boots right bundle CDN the HTML you can remove the protocol part just make sure that you call first the jQuery then the bundle and finally the CSS bootstrap now we see it's working now let's go ahead and change the zeros and ones for something more intuitive that can also be done by searching for a library called allison font and preferably at the end of the head now that we have that let's search for our some font check icon we simply copy this and instead of sent here we can use the same syntax for lists and now we see a checkbox or nothing however if I click on any of these buttons I can go to the different page foot panel see the navigation bar there one solution will be to copy the navigation bar from this template and paste it in these two but the problem will be that for any change we want to make we'll have to do that three times so a better solution for that is to separate the templates so I'm going to copy this and paste it three times and in the first one I will only leave the navigation bar in a property called template number then another one just for the head and call it template here and finally one for the HTML from here I will simply call here then the navbar and finally the body then I wire this in a setting plate you only keep our body and place it in template body so now we can rewire this too by just keeping the bodies and we don't need this we can send everything to here let's check it out now now I can navigate through my application using a common navigation bar now what if we don't want to see this in a table but more as a showcase we can create an additional front-end called mana to showcase and added to our navigation bar because we are sending these through the same channel we will need two other conditional here on our conditioner we will look for the URL here this variable coaches inside rec if it's equal to monitor we'll send it to port one but if it's equal to monitor showcase using it two for two we can also choose to stop after the first match to make our application a bit faster and we can copy this and create a template for our showcase let's go back to our template and find a card let's choose one of these cards and paste it here high rate through payload and grade one card per item let's move the title here as a hater we don't need this line and here we'll put the description now instead of showing a check we can do something fancy like just changing the color and put this inside column small six units medium four units enlarged two units and everything inside a row let's also change this margin instead of bottom equals three let's do margin on all sides equals two and add some indentation if we check it now we can see now this button show case I forgot to wire this to the output here we can see our showcase however we don't want to see the navigation bar in the showcase or that we can simply rewire this and bypass the navigation bar and now we don't see the navigation bar let's also change the light gray for the new ones on the dark gray for those who already sent I can simply do that by using the negation instead of the boolean caret means negation so do the opposite and we can also display this in a full-screen if you're a big fan of the wall in the state warriors you can also have this on the room and finally let's add an API we can simply copy one of these let's name it API match and simply Wyatt do the same thing in our switch we will need to add one conditional this time for monitor API match to send to the third port and our third port doesn't need any of the HTML templates so we can simply write directly to the output of the response let's try it here and that's it we can see the same thing but in JSON format in case we want to search using the API so this will work exactly the same but in order to test it we will need to use a tool like postman you will need to choose the bird post then localhost our port monitor API match and then as a body search value equals injury yeah I forgot to put here FBI match we tried again and now we see the same five results that we will see we simply go here and put injury we just finished creating our front-end that consisted on a simple monitor with the table and also a showcase for marketing purposes we also created very quickly an API endpoint api's are very important because they extend the capabilities of our application so this can be used immediately by other apps including mobile apps of course the case of analytics which includes business intelligence or machine learning which are very popular right now I always recommend to use no rain on hackathons because while you are working on extracting and transforming information another team can start working with the data of your application another very common scenario is to find another API available on the internet and create an interesting mashup on our next lecture we will learn how to create a web feed because so far our application can only connect you sources that have an RSS channel but what if there is one source that doesn't have that Channel use no way to create that RSS Channel and immediately that will be compatible with our application thank you very much welcome to our sixth lecture called RSS creation we face the problem that our application can only read RSS feeds or in this lecture we'll learn how to create web feed for sources that don't have an RSS channel and we will do that using no read as well one source that I like a lot about basketball is called pro basketball talk I like this website but it doesn't have RSS feeds so what we're gonna do is create a new flow and name it RSS NBC sports for short so we start by calling an HTTP request and pasting this URL let's see what we get here is as payload we can see the HTML code of that website but its history if we just type control U on our web browser what we want will be to find where are the news and how they are structured in this case I can search for one of these words and see if I can find it Nick North says time out so here we are what we would like to find is what is the smallest unit of HTML code that contains an article so for me it seems like this is one article and this is the other so what we need is a special node called HTML here we need to provide our selector so this node supports either CSS or jQuery selectors which means that if identify the class I can simply type they've got the name of the class choose to split this in multiple messages and what I get is one object per message and in the payload I will have that HTML that contains one article the next step will be to extract the elements let's add some comments and rename this as Steve so that we know what we're doing so let's start in the title the title is inside the deep whose class is a story title and inside of it there's one a link simply put if then the class space-a this case we don't want the HTML content but only the text of the content and again send multiple messages but we don't like to override the payload because we still need to extract more information from it so I will put this on a property item title and name this side if I run it again I'll get exact the same number of objects but now here at the bottom I will have an item property with a title we can copy this and replicate that for the link the link is located on the same place at the title but it's not inside the body of the HTML tag it's inside actually a property of the tag so in this case I can leave this same but instead of taking the text I will look for the attributes in this case here I have now I forgot to put this on a different property otherwise we'll be overwriting it I have a title and link here next we need to extract the description in a property called item description so we can see the description is inside a class called story summary we call it like tails and run it again here we have three of them also there's one important element on all RSS feeds the date of the article supposed to be here story time some however for some reason it's empty here in the URL the date is out of the URL so we can actually extract it from there because we already have the link we're gonna start it from there we call this date the property item date JSON data again to create that from an expression remember always copy the whole object paste it here beautify it simply in this case what I want is item dot link thought breath now what I want is not linked with just these three numbers here we'll look at our reference of functions and there is one called replace which means that I can type replace the string then the expression and then the replacement D which means digit then slash parentheses two other digits then another two digits will close parentheses slash another two digits and we feel with AG wild card at the end and at the beginning now to extract these three parentheses we can just refer to them one - two - three and we have just extracted the date check it one more time here on our item we have a title we have the link here the date and the description next step will be to put everything together again this node join can be set into automatic mode if all our messages are configured with the property arts to explain that let's check out this diagram you know rate there are many nodes that can perform split so from one single object ahnuld can create multiple objects that are also JSON objects however these functions add some metadata to each object in the property called part which includes their index the total count of objects and a senator if these were only four objects Norrell would put something like this this is especially useful if we want to merge all the objects back again because they are not sent in parallel there are actually sent one after the other and some objects can get delayed for different reasons so the node join we look into these parts to put everything together again however we want join to use the metadata that was generated by this node here what we need then is to place that property temporarily unavailable by simply doing this we can say move parts to underscore parts and do the opposite just before the joint and bypass all the metadata that was created but these nodes however we cannot use automatic because our data is not looking in payload it is actually on item we need to create an array now we have a single object with a property item that has an array of 50 objects and each object is an article next we will need to create an RSS response we can do that by searching for the RSS node if we don't have any solid we can simply go here on manage palate search for ourselves let's install it now that we have it let's put some comments and let's configure this unfortunately this node doesn't have any description on how to configure it in this case we will look at the website back to manage palette under install RSS and we'll click here to go to the official website of the model it says it's using the RSS model so let's click here and this is what we need so let's configure this we need to provide a title in this case the title will be pro-basketball talk because there is no actual we'll provide the one that we are creating so that will be located on local host RSS NBC sports next we need to provide a site URL which will be this and the rest is optional now for each item we need to provide a title which is its need to be inside payload so let's put this on hold just for a second we first need to put our items into payload that can be done just by saying move item payload all our articles are inside paid off and then when we configure this now we can say title it's actually in title description is inside description URL is inside link but inside Ling HTF it can be the same as URL in this case the rest is optional but we also need to provide date so date is in date now we can see as a payload we have an XML which is an RSS next step would be to transform this in a web service you know RSS NBC sports an add an HTTP response and check it out from our browser we can see the response but it's not being displayed as an RSS and that's because we need to add a header here so we search for RSS Heather and it seems like this is the one should be let's call this header and we need to set headers content type equals to RSS XML so if we try again now we see the XML so let's go back to our application and now we can add a new feed will be copied from here NBC Sports and we have that here so that was the end of the course but before saying goodbye please don't forget to post all your questions on the Q&A section and also leave any feedback that you have things that you liked or you didn't like and also for the next course if you have any special requests or idea feel free to let me know there are plenty of different applications that we can do with no red for example how to use Norrell in cloud servers if you like to explore more about the Internet of Things if you are more into analytics or business intelligence how can you can create dashboards and reports from here or anything thank you very much

Channel: Code GK

Views: 34,812

Keywords: morioh, node red, build a full stack application, node.js tutorial, node-red, nodered, full stack application, full stack, Build a full stack application, front-end, back-end, web services, visual blocks, web app, build, database, front end developer, front end, backend, backend developer, backend tutorial, what is web service, web service api tutorial, web service api, api, web development, learn, tutorial, development, node, nodejs, node.js, node tutorial, node js tutorial, application

Id: T6lf39TYjAY

Length: 80min 12sec (4812 seconds)

Published: Thu Aug 08 2019