Build A Weather App with Vue Js & Firebase #2 - API Request for Weather Data

now before we go ahead and get started with implementing our api into our project there are still a few things i want to go ahead and set up and that is importing a font from google and also our font awesome library now if you guys have watched any videos here on the channel you know that those are two libraries that i use in almost every project and you may be wondering with view how we go ahead and implement those so it's actually quite simple so if you go over here to our weather app our folder we have another folder called public and inside of there we have our index.html so this is going to look similar to any index that html that you may have used in the past there is a little bit of differences in it but for the most part the structure is the same so you're going to see here we have a head tag we have a body tag and then we have our basic html wrapper and such so we're going to actually be putting our script tags right here in the head so also a little bit about view if you guys are not familiar with it you can see here we have this div with the id of app and then a comment right below that that tells us that our build files will be auto injected here so a little rundown of how this works is that our main app right here or our main file is called app.view and this is where we're gonna import all of our components and views into okay and then from here you can see in main dot js we're rendering out this app and mounting it to the id of app which is right here in the index.html so hopefully that makes sense to you if it doesn't don't worry i'm not going to go too in depth with it and it's really not going to be i guess something you need to know to complete this series and tutorial but i just wanted to kind of talk about that if you guys are unfamiliar with how vue actually goes ahead and works okay so with that out of the way let's go ahead and actually import our files here so if we head over to our google fonts site here i already have the font we're going to be using which is quicksand and we're going to be utilizing the 4 5 6 and 700 font weight style so we're going to go ahead and copy this tag and then simply right above the title we're going to paste that in and we're going to save that and then we need to go ahead and get our font awesome library so i'm going to go over to cdnjs.com and we can type in font awesome and i'm going to grab the first one here so we're going to copy that script tag as well and then right below our google font we're going to go ahead and copy and paste that in as well and there we go we are now all set now let's go ahead and actually import our default font to our project so where we're going to do that is in the app so what we have right now is some default styling here which i'm just going to go ahead and remove we don't need this and i'm going to copy and paste in our default resets here so margin of zero padding of zero box sizing and then font family of quicksand okay so that is going to do it for the basics so now let's head over to the open weather map api and set up our account and retrieve our api key okay so if you don't already have an account with open weather you're going to need to sign up for one in order to get the api key for this series so what you need to do is if you don't i believe that you can just hit sign in here at the very top and as you can see i already have an account but if you don't you can it says not registered and you can click right here to create your account and just ask for some basic information here if it loads uh let's see here so it asks for username email password consent that you're 16 and older and then just some other stuff you can go ahead and select and then a recaptcha okay so considering i already have an account i'm going to go ahead and sign in and i'm just gonna go ahead and select remember me now from here we're gonna do a few things so for the first part of this series and this application we're simply going to be using the current weather data api uh later on when we get into actually building our weather view and our weather component we will be utilizing uh the one call api so what we first need to do is head over to our account right here so as you can see i have my account name you can select that and we get a drop down and then it says my api keys so i have one already but we can generate a new one and i will change it after the video so don't try using mine so let's say weather app and just say yt for youtube and we're going to go ahead and generate a new key and there you go we have our new key right here so this is what we're going to use in our api call now where we find the api call is actually back over here we can go to api and select the api dock and as you can see here here is the call we're going to need to make so as you can see this api call is going to require us to enter the city name and then also our api key so let's head back over to our view project and actually start to test out this api call by entering some cities and then our api call and see what we go ahead and get back as a return now to make this api call to the open weather map api we're going to be using axios now i choose to use axios over fetch as a personal preference i just like it better than fetch now if you want to use fetch for this series you're more than welcome to but there will be a few differences in how you have to format it and whatnot so if you want to follow along uh step by step with what i'm doing simply go ahead and install axios and it is very easy all you need to do is come to you know mpmjs.com and search up axios or you can just simply go ahead and go into your terminal and type in npm install axios and then you'll have axios available ready to use for this series with that out of the way let's go ahead and get started with making our api calls so we're going to be making this call inside of our component of app.view now currently we don't have the script tag so for a view component there is a template there is a script tag which is where you do all your javascript you import your props you import your components you have your data you have your javascript you can mess with your life cycle hook so we don't have that currently in this component so let's go ahead and create that so i am actually using a plug-in called viewer if you don't have it definitely recommend it for this series and anytime you're going to be using vue it is just great it has a bunch of snippets it has a bunch of short hands and like i said just makes it a lot easier so what i can do is i can start to type in script here and we can see we have the script with the javascript.view so i'm going to go ahead and select that now first thing i want to do is give this a name and we're going to simply just call this app so as you recall we're going to be using axios so what we need to do is we actually need to import axios here inside the script tag so we can say is import and we're going to say axios from and then just simply say axios and that'll give us the import of axios to use it here inside of the script tag okay now what we also need to do is we need to create our methods here so we can say methods and this is where we're going to create our function to go ahead and make that api call so let's go ahead and just say um for now because this is not going to be the final version of the api call we're actually going to be integrating firebase so for now we'll just call this and get uh now let's say git current weather okay and there we go so here is where we're going to call the api to get the information now i want to create a few data properties up here to go ahead and reference for this api call to make it a little bit easier so we're going to say data which is a function and then we're going to open up this we're going to say return and then here we can actually create some data so the first one i'm going to go ahead and create is called api and we're going to say key and we need to set this equal to the api key that we have here on our uh openweathermap profile so if i go back to my api keys and let's go ahead and simply nope that's not right let's go ahead and just copy this i thought that would have copied automatically but it doesn't so let's copy that head back over to our data here and simply put this in a string and then we also want to create a data prop for city which we're going to say is set to detroit okay and then we need to add a comma after this as well and we need one here too okay and you can see right now we're getting an error because axios is important but never defined so we'll go ahead and change that here in a second so what we need to do inside of this function here is we're going to say axios and we're going to say get so we want to retrieve our api url so we're going to say git and we're going to copy and paste this url in over here from the api so if i head back over here api doc and as you can see we're going to be using this right here so actually to save some time i'm going to copy and paste the same thing in here uh you know what yeah we're copying and pasting this and it might make it a little bit easier and there we go head back over here and we're going to say we're actually not going to use quotes we're going to use we're going to interpolate here so if i save this right now you'll see that doc is not defined so this is what we're going to be using when we call to firebase so for now what we can do is we can actually get rid of this and let me go ahead and change this to this dot city okay so what this is saying is we're retrieving the weather information from our this dot city which is going to be equal to detroit and then we're also setting the units to imperial which is going to be for degrees fahrenheit and then also we have this app id which is set to our api key so to keep things more clean this is the best way i like to do it so once we go ahead and get this we want to then so we're going to call it then method here we're going to say that then we want to what's we need to pass a function here let's go back up to here and we're going to say then we're going to say res so the result and then we're going to run a callback function here and then let's simply just cancel.log the res and they're going to say dot data okay so if you do this you'll see nothing happens we have uh nothing in our console that is logging it that is because this function is never getting ran now you may be asking how do we run a function when the app is first created so there is actually a life cycle hook called created to go ahead and do just this so if we go right below the data property here we're going to go ahead and do a create it which is a function and then we're going to go ahead and put a comma here and then we can call this weather function right here in our create a life cycle hook so what happens in the created is before anything is mounted to the dom this stuff will run but it does have access to our data properties here in this current life cycle now if you want to learn more about the life cycles i'm not going to get into it in this series now this series is pretty much saying that you know a little bit about vue but i'll kind of walk you through some things as we go along so anyways how we can call this function is by saying this and we can say get current weather and then function and then a comma so now if we save that and run as you can see here refreshed i'll go ahead and extend this a little bit you can see here we now have a reference to the city of the trade and all the weather information here within this function so if we want to change this let's say we'll say dallas if i save that you can see that it will run again and now we have the result for dallas okay so we're actually not going to be using this specific method right here to make our call we're actually going to be using utilizing firebase to go ahead and add our collection of data so that whenever we see a city in our collection we'll then go ahead and retrieve that data from firebase and then interpolate that into this dot city so we're actually not going to be using this going forward i just kind of wanted to show you how we're going to be setting this up and how we're going to be retrieving the information from the open weather map api okay so that is going to do it for this video now in the next one we're going to actually set up our firebase firestore collection and then we're going to set up our full call for the api to go ahead and automatically uh retrieve each one of our cities that we have added to a list or our collection when the app is loaded so we'll be using a similar method here with axios but we're also going to be like i said um not initializing we're going to be utilizing firebase for our data and to actually get the cities we have added so that it's not so static that we can only have one city here okay so we'll get to that in the next video

Channel: John Komarnicki

Views: 1,817

Keywords: weather app, build a weather app, weather app with vue.js, vue.js, vue, vue 2, vue firestore, vue firebase, vue.js project for, vue js project for beginners, vue firebase crud, vue js tutorial, vue app, web development, HTML, CSS, JavaScript, firestore tutorial, weather api, making an api request, how to make api request, update firestore data, retrieve firestore data, vue and firebase, learn javascript, how to code, learn to code, javascript course, web services

Id: 89p9szdqiDA

Length: 12min 55sec (775 seconds)

Published: Tue Jan 26 2021