Build A Weather App with Vue Js & Firebase #1 - Creating a Vue.js Project

all right what's going on guys in this video we're going to be starting a new series where we're creating a weather application from scratch using the vue.js framework firebase and also the open weather map api to go ahead and get all of our weather information from okay now before we go ahead and begin this i do want to briefly demo this application and how it works so once you first load up the application here you're going to be taken to this screen that is going to basically list all the cities and the current information along with that so as you can see here we have four cities added we have san diego warren dallas and chicago currently now if you want to add a new city we can go ahead and do that by clicking the plus icon up here and we can enter a location by city name so let's go ahead and select las vegas here and if i add that you can see that we have las vegas down here in a square so we're going to be using the grid to go ahead and set all this up now as you can see this also appeared in real time we did not refresh the page so we're also going to be utilizing the firestore real-time listener capability to go ahead and listen for a city to be added to our firestore collection and once there is a new city it'll automatically generate the uh box you see down here now also to uh notice we have these different video backgrounds for each one of our cities based on the current condition in that city so as you can see in for example san diego it is cloudy so we have a cloudy background in dallas it is currently raining so it is a rainy background so this is something i added that i thought was pretty cool to make the application less static and have a little bit more i guess um visual effect and just kind of made it look a little better than just having uh you know some colored backgrounds here okay so now that we have a city added if we no longer want to let's say track a city or look at that weather we can click this pencil icon up here and then all these trash cans will appear on the city and we can actually delete them so for example if we no longer want to track chicago we can go ahead and click this trash can here and then that city will be removed okay now finally what we can do is we can click on the city we want to view so let's go to warn and let's see here so you can see we have a little different navigation up top here we have the date we have a plus icon to take us back to our main component or our main homepage which has all the cities and then we have the city name the current condition highs and lows description of what it is outside the hourly weather um the forecast and then we have some additional information down here so i also do want to mention we're going to be creating a daytime version and a nighttime version for this particular uh weather component which is going to have all the weather information so there's going to be a daytime and a nighttime and how we're going to distinguish day and night is by the sunrise and sunset value so when we load into our weather view or our weather route right here in the top you can see run weather slash warn it's going to compare the current time that you're in with the sunrise and sunset values and if it falls in between these two times then it's going to be considered day which it is right now when i'm recording this but if it's outside of these values it is going to be considered night time and then we'll have a different background color here which will be a little bit darker blue and then we'll also get rid of the sun icon right here and we're going to replace it with a moon so that is pretty cool it also added some i guess different visual for the app and makes it kind of dynamic so that's pretty cool as well now to get back to our main component like i mentioned earlier we can click here on the plus icon and that takes us back to the current list of all of our cities so that is what we're going to be building so let's go ahead and jump into it and get started now the first thing we need to do here is actually create our view project now how we're going to do that for this series is using the command line interface or cli and also npm so if you don't have no js installment or computer you're going to need it for this series so pause the video now and come over to nodejs.org i'll leave the link down below in the description and download the version for your current operating system okay so what we're going to be doing next is i should mention we're also using vue 2. so at the time recorded this video view 3 is out but i had some problems with it for this particular project so we're just going to be using view 2 to keep things less problematic for this application so with that out of the way the first thing we need to do if you don't already is actually install vue onto your computer so how you do that is by using using the line here npm install view so i'll show you how to do this i already have it installed so i'm not actually going to run this so what you need to do is how i would do it or how i'm going to do it is i have a folder here that we're going to be creating our view project in so i open up a new terminal so we're going to say terminal and new terminal and you can see here right now we're in the directory of weather app with view two and you would simply just go ahead and copy and paste this line of code in here npm install view and it will install view for you okay so i already have this done so i'm actually actually not going to do it so once you have done that what you need to do next to create our project is type out the keyword view and then we're gonna have a space here and we're gonna say uh create and then we need to give it a project name so we're just gonna call this weather app okay and then you're gonna hit enter and you're gonna see that we have to choose a preset here so for this project we're actually gonna go ahead and go all the way to the bottom and do manually select features so we're gonna leave all the defaults here selected but i'm also going to select the view router and also a css preprocessor which is going to be sas so once we have those two selected we can then hit enter and we're going to be sticking with uh view 2 and then it says use history mode for router which we're going to say yes and then we need to pick a pre uh preprocessor so we're actually going to be using node sas and then we're going to keep the linter formatter config as eslint which is the default one and we're gonna say lint on save and we're gonna keep all of our uh configs in a dedicated config file okay and it asks you at the very end to save this preset for a future project now you can do that if you would like but i'm gonna say no okay and then it's going to go ahead and create a review project here this will take some time so once it's complete i will be back okay so that has been completed we have now successfully went ahead and created our new project the weather app here and as you can see inside of our folder we have that folder called weather app so inside of here we're going to have all of our view files which are going to be stored in the src you can see we have our app.view which is going to be the main output for our project here you can see we have the router view uh the div nav with some router links and such like that and then we have our basic component of hello world and then we have a router and then also our view so to get started here let's go ahead and simply spin up this uh this file here to a server so what we can do is you can see right down here we can see the into weather app so we're gonna do that and then from here we can do mpm run and say serve okay so this is going to spin up a development server that we can go ahead and use to see our project right now so let's go ahead and wait for this to finish and as you can see here we're going to be running on localhost 8081 so i can just go ahead and command click this and here you go here is the default template that view goes ahead and generates for us here if i save this let's go ahead and refresh that and there we go now we also want to do a little bit of cleanup because we don't want this stuff here for our project so let's go ahead and tidy things up a little bit so for example you can see here that we have our router view so our router view is going to be located here in our index.js so as you can see the default view which is going to be the view it's currently on on this page is going to be from the component home so if we head over to our components or our view sorry you can see we have the component of home so inside of here we're importing this component of hello world which we don't want so what i'm going to do is we're going to tidy things up to start here we're going to get rid of this we're going to get rid of the import we need to then remove the component here and also remove it here so if we do that and we head back over to our uh our local host over here you can see that we no longer have all that information but we're still left with this image and this navigation up top so to get rid of that so also let's just go ahead and delete this we don't need this anymore and then if we head to our app you'll see we have a few things here we no longer need so right now what you're seeing is this navigation is actually this div with the id of nav so let's go ahead and get rid of that and if we do this we should no longer see that but now in the home view we also have this image here and we don't need that as well so let's go ahead and get rid of that and you should see that we have a now blank slate which is what we're looking for so we're actually not going to need this about view i'm going to go ahead and delete this and then for our views here so as you can see now when we deleted that we're getting an error here and the reason is because if we head to our router uh our router index.js it's looking for this component right here which you can't find so what we need to do now is we need to remove this route from our router and we should get rid of that error so if we say delete this and also we need to let's see here i think that should be all we have to do okay and there you go the air is removed and now our project is running successfully so what we want to do now is we don't want to call this home we're going to actually change the name of this component to add city which really isn't going to change anything really and we also want to give this a new name of add city and as you can see now we're getting another error because it can't find the home component in our router so we need to also change it here so we're going to say import add city up top and we're also going to change it to add city here as well okay and then last place we need to add it to is our component here we're going to give this a name of add city and then we're also going to use the add component or sorry we're going to use the add city as our component now if i save that we should once again resolve those errors and be all set so that is going to be it for this video now we went ahead and did all the basics now in the next video we're actually going to work with our weather app api to go ahead and retrieve all the data to go ahead and populate our project with so i think that's a very good starting point because we're going to be using that data for a lot of information within our app so it only seems fitting to go ahead and set that up so we're going to go ahead and get to that in the next video

Channel: John Komarnicki

Views: 4,434

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, 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, create a vue project, vue CLI

Id: bUQaeFkywpg

Length: 11min 6sec (666 seconds)

Published: Mon Jan 25 2021