Weather App in Angular with source code in GitHub

foreign [Music] we're going to create a weather app in angular and this is how it's going to look like when we are done to get this information we're going to be using this website openweathermap.org and if you can create a free account you can get 60 calls a minute for free or 1 million calls a month and we're gonna get this current data and we're gonna look at it closely when we get to that point I already created this application just to show how it's going to look like but we're gonna start from the very beginning and build it from scratch I already created this folder and I called it weather angular and you can open your vs code and access that folder from there I'm gonna do it a little bit differently I'm gonna click here type CMD enter and in this terminal I'm going to type code space dot enter and vs code is going to open that folder let me close this get started window and as you can see I'm inside this weather angular folder to create our angular app I need to access our terminal and I can just click View terminal and here I'm gonna type engine U and the name of our application will be my weather app press enter since we won't have multiple components here I'm gonna say no to that and I'm going to use regular CSS so I'm going to just press enter here it's going to take a couple of minutes to create the project the project is created and you can see I have now folder my weather app I'm gonna go inside and all code I'm going to be working with is going to be in this Source folder let me go inside that folder and inside this app folder if I go to this app component HTML and it's all generic code so I can actually run this application and I'll have some results on the screen let's run this application and before we do it we need to go inside this folder right now I'm in this main folder that I create where the where the angular so to go inside my weather app folder I need to type CD stands for change directory and I'm going to type the name of the folder empty and now the time inside that folder I'm gonna type NG surf Dash or and I type Dash or because I want a browser to be open and the project would be shown inside that browser so the project is being compiled and as you can see it works so this is my default page let me go back here and I'm gonna press Ctrl a to select everything and delete I'm gonna save it and let's go back to our project and look at it again so as you can see I have just an empty page since we have only one small application we could put all code inside this app component HTML and app component TS file but in real life you won't be doing it you would actually create a component and this app can point HTML is used to assemble with all other components you created let's actually create a separate component for our weather app I'm gonna stop the application Ctrl C and to create a new component I'm going to type Ng generate component and I'm going to call it weather press enter as you can see on the left side I have a separate folder now and inside our folder I have all these files related to our component let me look at this HTML file and I have here just only one line that says the weather works so now let's grab this component and place it inside this app component HTML to do that I'm gonna use this weather component selector so here it is I'm gonna go back to app component HTML open tag control s to save and of course I need to restart our application here I'm going to press Arrow up find the last command I used to start our application and instead of opening a browser since it's already open I'm going to just type NG serve after application was compiled let's look at it and as you can see we have just one sentence where that works now to make our application look good I'm gonna use a bootstrap to style it so let's install bootstrap really quick I'm going to stop the application Ctrl C and I'm gonna type npm install bootstrap press enter at this point angular added bootstrap packages to this folder node modules but we also need to let angular know that we are going to be actually using bootstrap to do it we need to go to this angular Json file and inside this Styles array we need to add one sentence I'm gonna make some space quotation marks and I'm gonna put comma here and inside these quotation marks I need to put a pass that will reference one of the bootstrap files so to find it pass let's go to that folder not modules and the bunch of folders there it's hard to find like that so I'm going to just press Ctrl F and I'm going to type bootstrap as you can see the folder is right here I'm going to open it and I'm gonna go inside this distribution folder CSS and I need this bootstrap Min CSS file so what I'm gonna do I'm gonna right click on it copy path and I'm gonna press Ctrl V to pass it here so now I don't need anything before this node module so I'm going to remove that and all backwards slashes I need to replace it with forward slashes Ctrl s to save and now I can use bootstrap anywhere in our application let me start our application to make sure it still works as you can see it successfully compiles Next Step let's go to the bootstrap website and I'm gonna actually go to Google and type bootstrap card enter bootstrap version 5 let's go there and let me scroll down to this point so this is how the card and bootstrap looks so there's a header and there's a body and that's what we're going to be using for our application I can go here to the code and I'm gonna just grab the first one right here right click copy and I'm gonna go back to application and I'm gonna go to our weather component let me close everything else here and I'm going to replay this weather works with that codec just grabbed Ctrl V Ctrl s to save and let's see how application looks so this is our card the only change I would make at this point I would just place it in the middle of the screen let's go back and let's place it inside another div I'm gonna grab all these Ctrl X control V and I'm gonna add a class here and I'm gonna call it my container Ctrl s let me copy it Ctrl C and I'm gonna go to our CSS file and I'm gonna use the flex box to place it right in the center of the screen display Flex Direction it's going to be column align items and we're going to put in the center let me save it and let's see how it looks and let's just move it a little bit down let's go back to oh HTML file and here let's just change margin bottom to margin and we're gonna put five here let me save it and let's see how it looks I think it looks okay and at this point let's put everything we want to be displayed on the screen before we even get the data from our open Weather API back to vs code here instead of header I'm gonna say Minneapolis and let's put it in the center Ctrl s let's also place it on the right side of the screen so we can actually see it let me close this window Let Me Close Our terminal for now I don't think we need this header let me remove that and I'm gonna have a few paragraphs let me just remove it first and let's say that's going to be temperature foreign let's make a few more Ctrl C Ctrl V let's add humidity and let's have a summary but I actually want the summary to be in the beginning so let me take it out of here and put right here Ctrl s now I also want a little degree symbol here and the way we can do it I'm gonna google degree symbol and click on the very first link and here I'm just gonna copy it here an application we're gonna play that symbol in front our f equals s so now it looks much better now inside our header let's place it inside the h2 tag and here let's mark that we are going to have an image here weather image so this is our front end the next step would be getting the data from the open Weather API and placing it on the screen let's go back to our open Weather API website so go to this URL and click on sign in and if you already have an account sign in if you don't have it click on create an account and you have to enter all this information and after you're done click I'm not robot and create an account and once you are logged in it's gonna look like that and after that you need to create an API key and here I already have an API key and if you don't have it just click on this button generate so you're going to have this API key and for now I'm gonna just copy it Ctrl C and put it in this notepad we're going to be using it that's pretty much all you need to have from this website after that click on this API menu and scroll down where you have all documentation and we're going to be getting the weather data for one location so click how to make an API call I'm going to scroll down and here I can see the example of the call by the city name so let me copy it and what we're gonna do we're gonna just open a new tab and here I'm gonna just place that URL let me press enter so in this response you can see it says invalid API keys so everything in this color braces including curly braces we need to replace with our API key let me get it Ctrl C and I'm gonna place it here we can press enter see what it does and now we are authorized but we are not defining the CD so let me go here it's a city name and I'm gonna remove the curly braces and everything inside of it and we'll just put something there press enter and as you can see now I'm getting the weather data for Denver let me change it to Minneapolis enter and this is the data we're getting let me copy this data I'm going to press Ctrl a control C and I'm going to open another Tab and I'm gonna look for Json beautifier I'm gonna click on this Json Beauty file link I'm going to remove these curly braces and I'm gonna paste what I copied on that window and I'm gonna click beautify and now you can see better what results we're getting so everything what's inside the curly braces it's an object inside the square braces it's an array and as you can see we have multiple nested arrays and objects so here this is one big object and this property has a nested object same for weather and the most of the information we're going to be getting from this main property it's also an object and as you can see this temperature does not really look like a real temperature to 72 degrees it's kind of it looks a little high but if you go back to documentation you can find that we can request temperature in different units right now we're getting a standard temperature and some kelvins if you want the temperature in celsius you have to use metric and if you want in Fahrenheits you need to use this Imperial key let me copy it and let's go back to our call and what we can do here we can add another parameter and the way we do it we're going to put this end sign and I'm going to put units equal Imperial let me press enter let me again copy it Ctrl a control C go back here I'm going to remove everything place it here beautify and as you can see our temperature looks like a real temperature you can do the same thing if you want the temperature in celsius the only thing you need to change here is this Imperial to metric let me grab this data as you can see we have the temperature now in Celsius so this is the URL we're going to be using to get our data let me change it back to Imperial since I'm gonna get my temperature and Fahrenheits and I'm gonna keep this window open so when I need this URL I can just grab it and put it in my angle application let's go back to our vs code I'm going to expand it let's close this and my next step will be creating a service where we're going to be calling our endpoint and from where we're going to be getting our data so let me go to my terminal I'm going to stop the application Ctrl C and I'm going to create a service I'm going to call it weather so NG instead of generate I'm going to just put G and instead of service I'm going to just put s and I'm going to call it weather enter my service have been created it's right here and here line three through five I have this property root and it means I can use this service in an entire application and I have a separate video about Services if you want to know more about it you can watch it so for now what I'm gonna do I'm gonna create a method and we'll just call it get weather inside this method we're gonna call our endpoint and whatever data we get from there we're going to return back to our component to do it we're gonna type return because we're going to be returning the data and to create our HTTP request I need to import first a special module to do that I will have to go to this app module TS file let me double click on it and here I need to import a module I'm going to type import from angular common forward slash http I also need to play this module inside this Imports array control is to save and now we can go back to my Weather Service and use that module to create an HTTP request to do that I need to inject an HTTP service inside my Constructor I'm gonna type private and I'm gonna call it http and it's going to be HTTP client now here inside my method I can use it and I'm gonna type this http and as you can see there are quite a few methods I'm gonna use the get method and inside the quotation marks let me put semicolon I'm gonna put that long URL we already created I'm gonna copy this URL and paste it inside the quotation marks Ctrl s to save our service is now ready to be used let's go back to our weather component and I'm gonna go to our typescript file and before I use my Weather Service I need to inject it inside the Constructor I'm going to type private and I'm gonna call it Weather Service and it's going to be a type of our Weather Service so it starts with capital w and as you can see angular helped me and imported that service right here now I'm gonna call this service after my component is created and after it's created this method NG owning it will be called and inside I'm gonna use a subscribe method to send that HTTP request from my Weather Service it's a long syntax so I actually created a snippet I'm gonna type sub and as you can see I have this snippet I created subscribe to service and here I'm gonna replay this my service with the name of our service so it's gonna be this Weather Service and the name of the method is get weather and after subscribe method we have three blocks the first block is our next block let me separate so we can see it better the next block is our Arrow block where we handle any errors that might happen and the last block is our complete block and it only is going to execute if we successfully get some data here so as you can see after we get the data we're going to cancel log it let's just run the application see if it works let me save it first and let me go back to the application I'm going to refresh it and as you can see here we have the data displayed on our console right now all this data is hard coded rain temperature feels like so in the next step we're gonna grab all this data from our HTTP response and replace it inside our card let's go back to our vs code we will create an object right here I'm gonna call it my weather and it's going to be a type of any and inside this next method we are going to assign the data we got from our HTTP request to our object my weather so I'm going to say this my weather equals to my response let's cancel login to make sure that we have the data I have a shortcut for that I created Ctrl shift L and inside I'm gonna put this weather Ctrl s to save and now in our application we should have two objects one from this cancel log and one from this console log at this point we are ready to display the data from this object to our user let's create a few more variables the first one will be temperature and it's going to be number and let's assign it initially to zero now inside our next block we're gonna use it this temperature this weather my weather and I took a screenshot of our object so it's going to be dot main dot temp let me save it and let's open our HTML file and here we're going to use a string interpolation syntax so double curly braces temperature let me save it and see if it works Ctrl s let's go to application and as you can see we have our temperature that we received from our HTTP service let's do the same thing for Fields like temperature pressure and humidity go back to our component TS file feels like temperature and we're gonna have a stream variable for our summary and initially it's going to be an empty string let's go down to our next block and we're going to assign all those variables to appropriate values feels like temperature let's look at our object is going to be Fields underline like I'm gonna copy this next will be humidity pressure and the summary the summer is going to be actually in different place so instead of going to Main we're going to weather dot Main let me save it and go to our HTML file and here we're going to do the same thing replacing numbers with the string interpolation syntax and for the summary we're gonna do the same thing let's save it and try it everything worked with the exception of our summary let's look what happened there here it looks all okay let me go to its file let me look at our object again and I can see the problem here so this weather property is an array of objects and we have only one object with the index zero so I need to fix that so this is going to be our first object I'm gonna put zero let me save it and see if it worked as you can see we have our summary here in the next step let's display an image related to this weather our API actually provides us the way to do it in the documentation if you go to this URL slash weather conditions you will see that in your API response you are getting this code of the icon here it's 10 n and if you scroll down you can see that you can construct this URL and get an image for that particular code let me copy this URL and let's go back to our vs code here let's create another variable we can call it icon URL and it's going to be stream and initial value will be empty string save it here let's create this URL quotation marks and let me paste the URL I just grabbed now this 10d code is hard coded we need to replace it so that's what we're gonna do and let's look at our chart again it's going to be in the same location where we have our summary but the property is going to be called icon I'm gonna copy it place it here and instead of main it's going to be icon Ctrl s to save and let's go back to our HTML file and here we're gonna installed an image and for Source we're gonna use again stream interpolation syntax icon URL for alt let's put description it's going to be our weather image and this is for accessibility purposes so the screen reader knows what this image is about I'm gonna save it and let's look at our application our application is for the most part is done we could probably do a couple improvements to our application right now this CD is hardcoded and also the units are hard-coded let's change it really quick in my ts file I'm going to create another variable CD it's going to be a string an initial value will be in Minneapolis for now and it will create another variable units and it's going to be Imperial and let's change our service so we're actually sending this variable to our service when we're getting our data so we're going to go to our Weather Service and here and our method we'll be expecting two variables one is CD is going to be a string and another will be units that will also be a string let's put inside our URL I'm gonna break it down and here instead of Minneapolis it's going to be CD let's look at our units same thing we're going to do here let's say with Ctrl s let's go back and now this underline because it's expecting two arguments so we're gonna put first it's gonna be this CD and this units I have to change it here too I misspelled it let me save it and let's check if our application is still working it does let's change Minneapolis to let's say London save it let's look at our application and the temperature changed but we still have Minneapolis here because we need to go to our HTML file and change this hard-coded Minneapolis to our city Ctrl s let's look and of course I have extra calibrase I hope this video was helpful and thank you for watching

Channel: DK Programming

Views: 11,105

Keywords:

Id: 8K71q5GPj5E

Length: 32min 23sec (1943 seconds)

Published: Tue Jan 17 2023