Absolute beginner with Node-RED: (once more) using HTTP request to get data from a REST endpoint

hi very welcome to my live stream here a little bit earlier but i guess with that accidentally live stream yeah i i see uh there was one waiting yeah participant okay so um yeah i got the information that my video i made is no longer available i do not know why um it because it's listed on my site and there is no problem with that it seems so from from youtube but i got that question here and i verified it and it also does not work for me on different devices and that's a reason why i will create that video now um and i would say thanks for that information i didn't realize it before and so i say here thanks for that okay what it is about here today in that live stream it's about getting external data into a node-red yeah from an external rest endpoint and make that variable and add some ui components that all is related to my basic beginner node red flow i wrote a tutorial here where you can start because i support frequently hackathons and i like node-red because node-red really helps to prototype and gives a lot of flexibility yeah and it's a little kind of visual programming and you do not have too much to know about um the programming language itself in some cases yeah you have to know javascript a bit yeah so and then you reach a lot off and that's a reason why i started and here in that beginner flow yeah you get the information how to access a database how to search in the database in a non-sql database and display that in a ui so that is the starting point and with that um i got some questions and that is all related to that topic and if you want to follow the entire series and dig into different other topics you just just open up that github project and um yeah get to flows so i will store also the other flows and uh they already stored there which i will made and what i already made okay um let's start with uh the topic um as promised with the external rest api the first thing what you have to do when you want to get something into your node red yeah on data you you have to know the data so that's the data i want to use here as you can see um that's available and i do not know there is no restriction yeah and there is no authentication there and we can easily use it um what i what i used as an example yeah because it's very easy for the invocation yeah you can see here uh that's the invocation and we can just copy the invocation here here of the rest api or rest endpoint here official available and you can see here so and that is the data here we can see um well that's with the the capital here what what i said the capital city i insert the capital city and get a lot of information about that capitalist city inside europe yeah what is with tallinn and what does it all belong so that is the objective um we have yeah we want to get that into our node-red flow and now i go to the node-red flow and that's the node-red flow i already have that is the um absolute beginner node red flow yeah i will expand that example a bit and when we take a look into that uh node red flow so we can see we have some different components already there so that component will be useful for the next steps that are the component the nodes for visualizing stuff yeah and here we have some functions and outputs but for the detail we go to the yeah we will go through more yeah about the the documentation all right red rhythm so so now stop with that um i will import my existing example so that you can see it and before we do that i will open up that here my uh node-red flow so here with the ui so uh yeah so you can see that other visual components i show that you can easily just insert some data and display the data and have the interactive session here yeah so i can also add for example new data if i want but i don't want to do that and i can query the data and that is what is already there and i will put my um additional information i get from that uh external rest and point and information i will put here into my flow so um what i have to do when i want to do that is yeah let me start with the very basic things before i uh grab the existing flow on my github repository it is always important if you do not know it here the inject node if you start something internal here here that is the starting point that is the starting point to get information from external yeah you want to start it so and then the next is very easy yeah here we have an uh rest uh not the rest an http request and that means um when we wire that when we start it it triggers that node and here we just paste what we have already here where was it it was the capital city here with italian copy put it here and we have already here the the data yeah capital city and then when we trigger that it will request that and we will get the data from that and for sure we need here and debug node it's always that you know you should have a debug node and i like also to name it yeah to just name it that is uh i call it first try yeah so first try and deploy it and now we can and we can see okay that's great that's all so now i could end the stream right now but at the uh at the moment i do not want only that there is also a topic that we can format automatically here what we got here in the input json format because later on when we examine these data yeah and we work with the data it's normally done in js and we will use the json object that's easier yeah with just a string so and when we now invoke it show before and let's change so now we can also see the object here okay hmm yeah was a little bit strange behaving so i do not know what the reason was for that so that was the first try so and then with that we got all uh all we want so with that we could we could normally end but now um i want to add my existing flow and i want to describe a little bit what i already did yeah so here now we import and flow which also contains the the possibility to make it variable so so i go to the github project i have and i just get the content of the http request flow here i just copy that copy where is it and then i can import it and i will create a new flow with that so ah yeah okay uh import copy so you can see that is um what we already have yeah so that was a little bit like here and now we have here the timestamp that means the timestamp i make that a little bit variable with the information what i can see what you can see here with the topic so and when we go now to the to the ui so i have to go to the dashboard [Music] let me see okay create a new a new group and i call that group count i added that group i called it country so and that we have the group country so that should be now uh also available we have here our home we have the country available and then i deploy it so contains nodes they are not properly configured okay yeah that's right so now we need to assign it to a group and i assign it to the group restleter country okay and also that i assign it to the group price data country so and then now you can see it yeah i do not know it was so easy in a preparation yeah i did a little bit because i don't want to do all the steps once once more and i just also want to show yeah it is totally easy to do that yeah that that could be a little bit tricky so when you import it maybe you have to do that with the layout and once more and that that's a good uh good topic just to see here here these are the uid elements and how they are organized on that site and now we should have it on our dad yeah you can see here is the burger menu yeah and now we have this so when now we say for example here long london and we submitted and we see in the united kingdom and we say berlin yeah germany and that works yeah and um what what is the difference here difference here to that first um flow yeah what we see here with that flow and the difference is that uh i made it a variable and variable means that what happens here we need here a variable yeah and as you can see here also in the capital the capital city in the invocation yeah description of that rest endpoint on the documentation here on rest countries uh eu so you can see here that's our variable yeah so here's the capital city and that is exactly what i did so i changed it yeah and it is cool that it's only you get and you can just place it and what i need here i get from the payload which is the import i get the capital and now is the question where does the cut excuse me capital come from and when we have here the ui component yeah you can see that's the label on the front end when you go to the front end here that's the label on the on on the front and what you can can see here yeah whatever what i show and then we see that that's the label and that is the name yeah that's the name uh inside uh the payload so that means when we have all uh that's the cool thing to understand with these object json objects so we can directly access now that data with the capital name yeah so and now we can access it so we have it here we got it yeah if we say here payload we access the payload capital so and just to verify it once more i want to show it with um an extra debug node so we just take a look here into the debug node here and we just take a look here delete everything so we say here [Music] and let us see what happened [Music] was it all right on our nodes you should see it the output ah okay the form output and from here we want uh yeah i want that it's a strange behavior today because you see it works and uh and it does not yeah i know okay london and you can see here and that is uh the payload and you can see here that's what we are all have here in that area what is giving us back with all that content here and that is what is here and that was i said with the capital that was the uh the name what we requested yeah payload and yeah that's all to understand and uh with that yeah you have a really easy ability just to get data from it okay yeah and now i can say maybe i can also enhance it a little bit with a next more difficult um point of view that is about authentication but i will end that stream yeah and i will directly start the next stream with the topic of authentication because i also created an authentication example with uh key cloak with uh also a possibility to access external data so this was totally easy you see it how it works sometimes be a little bit patient yeah and give it a try and yeah that's all okay um we did the basic stuff imported had some some problems with the with the first invocation and the setting of the ui and then understand what happens with the request from the ui and how to make it variable and using the debug nodes and so i will end the stream and i say thank you for watching bye this next stream will be in a few minutes bye

Channel: Thomas Südbröcker

Views: 2,587

Keywords:

Id: I_ulT4xRoTA

Length: 20min 6sec (1206 seconds)

Published: Wed Jul 07 2021