Weather App with Vue 3 Composition API and Ionic

um so this is about the view 3 composition api which is pretty new i'm going to have up here on the screen actually the app we're going to be building it shows you the current weather at your current location as well as a seven-day forecast for your current location as well this uses view three and it also uses ionic if you're not familiar with ionic it is a ui framework similar to bootstrap or the other you know major ui frameworks you've seen but it has the added bonus of being able to be deployed both as an android app and an ios app which is which is pretty cool and it is just a nice ui as well it is also at the time of this video really the only ui framework that supports vue 3 fully so it's an obvious choice for this demo for the mobile app side if you wanted to deploy this to a mobile app it's built on top of capacitor which has all these plugins it's a lot like cordova but simplified a bit we're only going to be using one that is the geolocation plugin to get the current location to get the weather for that location now of course the browser has this built in as well but the plugins make it a little easier to use and it will also help you when you're actually deploying if you deployed it as a mobile app and tells you how to set up sort of the um permissions and stuff so we'll be using this from capacitor and this from ionic and then the other thing that we're going to be using to actually get the weather is the open weather api um i will talk about that a little bit more in a second what i want to do is actually start my project you do need the ionic cli installed on your machine as long as you have that you can simply go here and do ionic start i'm going to call this weather demo as the name of my project i'm going to choose view for my framework ionic supports angular react and view i'm going to do view and now here you can you can choose your template now when you saw my app you saw it was a tabs app um and that is what we're going to end up using but to kind of show off the flexibility and reusability of our view 3 code and our architecture i'm actually going to start with a blank app and then i'm going to copy our code over into a tabs app just to kind of show how portable and easily reusable it is if you don't want to do that part you just want to build tabs right from the start that's also totally fine you can still follow along and not just enough follow that step i'm going to start with a blank project that's going to set my project up while that happens i'm going to come back to the weather api this is open weather it is free to use i mean there are paid tiers as well but for our purposes the free tier offers plenty we're going to really only call one api endpoint and that is the one call api so with a single api call you get the minute forecast hourly forecasts daily forecast historical data for five days weather alerts and then you also get the current weather that's the one we're going to use and also you will need to sign up for this i have my account here and once you sign up and verify your email you can create you can get an api key i have one here that i created just for demo purposes which i'm then going to delete before i upload this video but my api key here is here this is the api key we need in order to call the api and if we go to this one call api the one we care about and go to the api doc and we can get all of our information about how to call it how the data comes back so how to make an api call here's the url we have to pass it a latitude a longitude which we're going to get from our gps data you can exclude certain parts we're actually going to exclude the minutely and hourly because we're not really going to use that we could exclude the alerts as well for for our app we're just going to be using current and daily and then you give it your api key so that is how we will make the call and we can also i guess this is a good point we can also you send a unit of measurement i'm going to be using imperial since i'm in america and we use weird numbers but you can set the unit that you want to use there as well so here's an example and then here's an example response that shows all the data that's going to come back from this api call and then here's a description of what all of these things are we're actually going to build out some of this in typescript as interfaces just so we have that laid out but this is the data that we're going to use to power our app so the other thing i guess i should mention is that i have vue vs code snippets installed to help with templating we can build our components really quickly you don't need this but it does make things go faster so we come back over here our app should be ready we can let's go ahead and do cd in there just follow the instructions on here ionic serve i'll start the server up and then let's also go open that folder this is weather demo okay source folder there's a couple things that i like to do when i'm starting up an ionic app one of them is an eslint preference and that is that by default eslint does not allow function hoisting at least in this configuration and this may be a controversial opinion but in modern times when we have focused modules and focused components i like taking advantage of function hoisting you know back when there was one gigantic 2000 line file that was all jquery i understand not wanting it but in modern times i like function hoisting it lets me declare some functions down below and then use them up above just like you could if you were declaring a class and you had methods on that class that you wanted to use out of order you're allowed to do that you don't have to do this but i i like it this way all you have to do is put your functions in a different order than mine but i am adding this exception that says you are allowed to use function voicing basically use a function before it's defined the other thing i like to do is create a common ionics component file because i've found you use a lot of different ionic components in while you're coding and i don't like to manually import them every time so i have been doing a shared folder and in that shared folder i just create a common ionic components and i'm just going to grab this code out of where i've already been using it and paste it in here um all this does is imports a number of components that come with ionic things like a responsive grid and a card and headers and titles and ionic pages you're going to use this a lot throughout ionic and it just it all it does is imports them and re-exports them but then i can use this um just as one thing when i do my imports so these are just two little things that i do when i start up a new project neither of these are required you can put your functions in different order and you can just import all of these ionic components individually but i do these two things when i start up now let's check that our server start up i don't think it did because i opened the window okay there it goes cool we have our blank project so this is out of the box with ionic we just created it we haven't really done anything yet we changed our eslint rules and added a shared components but that doesn't really do anything this is our blank initial project from ionic so uh step number one is we are going to create a new folder for our weather feature we're doing a folder by feature approach we will not be doing a views that has a million different views in it that do totally different things instead we're going by feature so shared is also a feature it's something that's shared throughout the whole app for us we are going to create a weather feature cool we have our weather feature and then really the next thing that we need to do is we're going to lay out our data structure so we know our data structure from looking at this one call api here's an example of it and then here is our you know description so what i'm going to do is inside my weather feature i'm going to create a new file and i'm going to call this one weather because this is the one api call i'm going to call that oneweather.model.ts this is going to be our model that defines what our weather response looks like and i've kind of got i'm just really going to go off the documentation in the api and build out the data structure so the base weather has an id a main uh title of like clouds or whatever a description which would be like partly cloudy and then the icon to use we also have feels like multiple temperatures throughout the day and what it what that temperature actually feels like when you factor in wind sunshine whatever um day eve lorne nope that is not what i wanted vs code do not do that and night cool so those are the temperatures throughout the day as for what it feels like there is also similarly the regular temperature so instead of feels like there's just temperature and it has day evening morning and night but it also has a max in a minute so i just made that extend feels like so i automatically get day eve more night but i also get max and min that covers that then we have current weather which contains a singular temperature for feels like so the feels like interface up here is actually going to be used in the forecast because that tells us throughout the day what it's going to feel like but the current weather there's only one temperature that it feels like right now so in the current weather feels like it's just a number okay so current weather feels like humidity sunrise and sunsets are like unix timestamps for the date and time of when the sunrise and sunset happens temperature uh weather is an array i believe that's because this api supports sending in multiple cities or like um an area where there might be multiple weather might be different weather in different places within that area for us we're really only going to ever use one but it is an array in the data structure so we're defining it as that and then wind speed is a number there are by the way more properties than this but these are the ones we're going to use so these are the only ones i'm really defining okay daily weather is very similar but feels like is going to actually use our interface because again this is the the daily weather is the for the forecast so we don't it's not a current time it's a whole day so we use that interface that covers day evening morning night [Music] temperature okay finally the one that we're actually going to export because it's the one we're actually going to use i'm going to call this one weather because it is the one again it's the one api call all right so really the all that came down to building out this last piece which is an interface that contains the current weather and then an array of seven days for our daily weather objects but we now have our models all defined you know if i was really building this out i would probably put these all in separate files because i'm going to guess some of these are going to be get used in different api calls and such but for now for our purposes for the demo i just put them all in here and this was that wrong import that happened when vs code decided i didn't want to put the word number save that and we have our model defined weather interface is done cool so the next thing now we have our model defined let's actually go fetch the data um from the api again we're staying in our weather feature new file weather.service.ts so this is our sort of our data service you could also call this maybe the weather repository uh i'm not really sure naming how what you want to go with i'm still kind of trying to figure that out but i'm going to go old school angular naming and just call this a weather service [Music] so in here we need to define first our url this is the url that we are going to use to make this call i already have this this is a this is really just taken directly back from that example um this is that exact url the one call then like i mentioned before we are going to um exclude uh minutely and hourly and in fact why don't we go ahead and insert in here our api key go back to my page over here grab my api key uh we don't need that i don't know why i did that it's not a special string in my example code i kept the key in a different file so i did it this way but we don't really need to do that we can make that a regular string there's our weather url secondly we need a variable to store our actual weather that we get back uh let's for now we're going to come back to this and change this for now i'm just going to start it out as an empty object we will revisit that when we talk more about the composition api which will be shortly but i want to make the fetch call and demonstrate a few things first okay type that yet okay so we're going to now write our function to fetch the current weather at our current location in order to do that first we need to get our current location so the um the capacitor plug-in that we saw before can be used to grab that so just based on this example here we're going to get our current position that will return coordinates and in turn those coordinates return a latitude and longitude turns geolocation position um there it is time stamp and chords come back so i'm going to just use a little bit of destructuring to keep our code a little cleaner and just go ahead and grab chords out of the object that this will return we are making this an async function so we can use async away it is an async call to go grab the current location plugins that should have auto imported that for us great dot geolocation dot get current position cool that'll return an object that has a time stamp and chords we're just destructuring that object we don't care about the timestamp we're just going to grab chords out of here which has a latitude and longitude as well as a number of other properties here we really only care about latitude and longitude for our purposes once we have that we are going to actually go and grab the weather data so const response equals fetch [Music] weather url so we're going to start with our base weather url but then we of course need to pass it additional properties namely our latitude and longitude so we'll be at lat equals chords dot latitude and lon equals chords dot longitude and then finally this part is going to depend if you're in the u.s or not but i'm doing units imperial for fahrenheit cool then we're going to assign weather equals await response.json uh oops that was my fault i forgot to put my weight on my fetch now all of this uh these two lines nine and ten um are just regular javascript this is complaining about me because this is a const uh don't worry about that because again like i said we're going to come back to that uh very shortly and we will fix that issue but i just wanted to point out that right now i'm just i'm really just writing regular javascript there's nothing view happening here there's no magic this is a typescript file and fetch is built into javascript getting the json from your fetch is built into javascript this is just regular stuff nothing out of the ordinary here but what we're about to do is introduce from some view magic the only thing i want to do first is i want to be able to export this stuff out of here so that external files like our view components can use it so let's just write that first we need to export that uh use weather return weather we wanna we want things outside of this to both be able to use our weather object and also fetch it boom cool so now we have this this is being exported this is being used down here and we can then use these things in our view components but here's where some of the view magic comes in you see if we export this out and use it in a view component this weather property it will actually work but what's the initial value of it it's just an empty object that you know it doesn't contain any weather data only after you call fetch will it contain our weather data but our fetch happens asynchronously it takes time to go grab it and get it back and if we do that yeah the data will then be held in this variable but vue will not know about it view will not know oh this data changed let me re-render myself there's nothing here to tell it that what we want to do is make sure that any time this weather changes that view knows about it so we can re-render the components the way that happens is with ref vs code please okay we're going to make that a ref and not only is that a ref but it's a ref of one weather so this is a reference this is this is a reference to a one weather object that is the class that we created earlier so by making this a ref we're telling vue this is something special this is something i want you to pay attention to and anytime its data changes i want you to re-render the component so now anytime that this weather data changes vue will re-render any component that uses it so this is where part one of the view magic comes in that we get from the composition api we haven't even started building a view component yet and yet we're using some of the view magic and and that's part of what makes the composition api special is that we can extract our data fetching out into a regular typescript file and we can keep our data layer and data management separate from our view components and then we can reuse this data management piece in multiple components and vue can just react to it thanks to ref so we've typed our ref as a one weather and then what we need to do when you create a ref the you can no longer assign this directly but what you need to do is set weather dot value so all refs contain their data inside a value it effectively turns even a a base type like a boolean or a string it will turn it into an object so that it can track changes to it over time and so you have to call dot value so that was our that was our just part one of our view composition api magic is we're using ref you can see vs code auto imported it from view and so now we not only have this weather object but we have a special weather object that vue will pay attention to and re-render itself that fixes all that we can now fetch our weather and we can now use it in other components and it's in a reusable regular plane typescript file which is which is really cool and powerful so now let's create our first component which is going to be current weather [Music] cool so this is where my typescript snippets come in for templating i'm going to type vbase i'm using vbase3 because we are using a view 3 template and i'm also using ts for the typescript version so this will create a view 3 component using typescript so that just templates out this code you could of course type this out manually but those templates just save time rewriting code that you know you would already use so we have our component here we have the setup function and our return so before we get too far into this um let's see where should we start i think first why don't we just go ahead and get our weather object so that we can do something with it what i'm going to do here is again i'm going to use object destructuring to get out the pieces that we care about so i'm going to say const weather fetch weather those are the two things i want to get out of use weather so now our use weather function is called and use weather service it returns an object with weather and fetch weather in it i'm just destructuring those into two individual variables that i can then use okay let's go to the next step then and we want to fetch the weather when this component is used so for now what i'm going to do is the next part of view composition api which is how do you run something when the component is mounted the way that you do that is on mounted anything passed in here will be run when the component is mounted that is what i would like to do and what do i want to do when this component is mounted i want to fetch the weather so by doing that that will then go trigger our api call down here which will in turn update our weather object view will notice that and then re-render the template cool so now what we have here is a component that when it's mounted we'll go fetch the weather for us that's great but we also actually want to show the weather in our template so in order to use anything in our template it has to be returned out of the setup function so anything that goes in here can in turn be used in our template above so let's return weather out of there and for now just going to put the whole thing in our template is this working oh we've created our template but we haven't put it anywhere um all right that's a good point we need to do that let's just create a temporary sort of demo page to kind of show this off so i'm going to put i'm going to make another view app weather demo dash d view 3 ts template that out okay and in here if you're familiar with vue 2 the components part is exactly the same any other components that you would like to use [Music] you will list out here and i want to use current weather and i'm going to import all right great now i can come up here and use that and what i'm also going to do to keep with our folder by feature again to just kind of show this off it's not going to be used in the final product necessarily but i'm also going to put my routes in here again folder by feature i want to keep everything about this feature um in here i already have this pre ready to go this is a standard view router route [Music] boom when i put this to weather demo we're just going to name this weather cool so i copied this for my example project i started off of but this is a standard view router route it has the path of slash weather as a name of weather and then the component is lazily loaded we don't really need to do that but we're going to this hooks us up our routes so now our whole thing is all self-contained we need to hook this route up though in our main router we have router up here here we don't really care about this home anymore and we are just going to say let me make sure i name this correctly weather routes great weather routes so by doing that we just hooked in that router kind of the beauty of the the whole self-contained feature is that's all it takes now our routes are hooked up and i'm just going to go ahead and redirect the base url to weather you don't need this home anymore and i've missed something here evidently let's go find that weatherweather.routes well it should work this is not a module i'm exporting it maybe i didn't save cool i just hadn't saved the file all right so now you'll notice what happens here is my browser is popping up and asking me to know my location that is because this service method is being called you can see here on this very first line of fetch weather it grabs our current position and we need to give permission to allow that and this fetch weather is happening because in current weather unmounted we're calling fetch weather so unmounted it fetches it and we need to give it permission to give our location which i'm going to allow and here is all of our weather data remember that for now i've just printed the whole thing out onto the screen we're obviously not going to be using all of this but this is the entire response back from the server which is exactly what i did i just put up here weather because i wanted to show that it worked right and it does so now before i move on to building the rest of the app i want to just show off a couple other things about how the vue composition api works so we've already seen that because we made our weather a ref view knows about it and pays attention to it changing and then we'll re-render the page which is good because if it didn't then we wouldn't have gotten that display because at the time of it showing up there was no data there yet because this fetch weather is asynchronous but as soon as it finishes that call weather is updated and it just appears we can actually watch for changes on this as well because it's a ref we can also use watch so we can also say watch weather and i'm just going to log something out i'm just doing this for demo purposes to show off watch as part of the composition api so now anytime weather changes it's also going to log to the console and there it is i hit refresh that fetched weather again which then caused weather updated down here to be logged to the console okay i want to show off one other thing and that is using a click handler in our template so again anything that's returned out of setup can be used in our template that doesn't just include variables it also includes functions if you're familiar with view 2 you remember that you keep your data and your methods separate but here it's all again this goes back to grouping by feature instead of by type so i don't have one folder with a bunch of views in it and then a store folder with a bunch of data's in it instead i'm grouping by feature and that's kind of the beauty of the composition api as well i can return everything both methods and variables all together and so i can keep my features together rather than my types so both weather and fetch weather are related to each other i'm going to return those right next to each other and deal with them in the same area set up so now that's set up you know sorry now that fetch weather is being returned i can also actually add a button in here click handler i'm going to fetch weather when it's clicked i'm going to add that button save it i'm going to come back to my view i don't think that out of template mode there we go okay i'm not using ionic yet so it wasn't scrolling properly but uh nevertheless i am here i now have an update weather button boom now the weather hadn't changed uh so it doesn't really look like there's anything different there it's going to be a little subtle but you can actually see down in my console that because the weather changed when i hit update i was watching that variable and therefore i reacted to it by logging to the console i can do that again again i don't think anything changes i don't know how often the weather updates um on the api so it's kind of hard to see here but i just wanted to show off this is how you handle click handling as well as watching a variable using the composition api so with that shown off i'm going to go ahead and remove this this was just for you know describing how this should work and i don't need to return fetch weather anymore i'm not going to have a button on the screen that does that and i also don't need to log the console when anything changes cool so i'm good with just this for now but what i need to do is turn you know this simple code into this so now we're going to get into ionic and the ionic components so let's start building those pieces out um so for one i need the the ion card the ion card is this whole square piece in the center and in fact our entire template for current weather is going to just be an ionic card this whole page as a whole will come separately so we're just going to build out this card for the current weather okay so let's start up here we can get rid of everything on our template for now ion card card now we don't want to really render this card until the weather has been fetched because remember at startup there will be no weather here yet it'll only happen after our async call completes so we're actually going to hide the card until it fetches and we can show like a loading spinner in its place so i'm gonna make use of views v if and say weather dot current so this is gonna check and it's only gonna render the card if the current weather exists which there will be a slight delay while we fetch it from the internet okay and next i need to make the header part so the header includes this image uh well maybe we should come back to the image let's do the header part down here which is this description here which says a few clouds and this is now out this is a hold now i haven't refreshed this in a while so it's probably not that anymore but we'll fetch this part and this part which is the description of the weather and the temperature so let's do that next that is ion card header and if you want to know where these are coming from you can check the ionic documentation ion card here's what a card looks like you can see that looks very familiar that's what we're using here's an example of it in view ion card ion card header subtitle title this is what we're going to be building out we're just following the ionic documentation okay so much like we just saw ion card title ion card title i'm going to go ahead and make my um ion card subtitle actually these need to be reversed i will fix that subtitle actually comes above if we look at our picture subtitles actually up here then regular titles down below let's reverse those cool okay one second here into that cool all right so let's build out our subtitle so not familiar with you this is how you access properties of your variable just as regular text inside your html do the double curly braces so we're going to do weather dot current dot weather i know that's a little bit weird but that is how it's stored on the data remember the weather is the one we mentioned was an array because it could be for a whole area instead of one specific location and there could be multiple weather reports within that area in our case we're only concerned with the very first one and our subtitle is going to be the description okay and then we'll do our title and our title is the current temp weather dot current dot temp let's save that and let's see if that works all right cool um we do have clear skies and then we have a temperature here this is a good start um although you notice down here in the corner there's a number of warnings failed to resolve component high on card iron card header etc that's because we have not yet told vue about what components we're going to use remember that we need to tell view any components we use [Music] and this is where our common ionic component comes in really handy we could individually import ion card ion card header and so on and so forth but i've already done all that in one place i'm just going to do this and i believe ion card and everything is in here but let's go check yep all our warnings are gone so if you don't if you didn't use the ionic the common ionic components you're going to need to declare each individual thing here and then import them up above if you did then you're still good to go so all right cool we're kind of on our way right although i will say i'm my browser is in dark mode therefore ionic automatically shows things in dark mode if you would like to see what it looks like in light mode if you use a dark mode browser you can actually go down here to dev tools click on this little more tools icon here and choose rendering from the list i already have it it's right here scroll down to the bottom and then scroll up just a little bit to prefers color scheme and i'm going to say emulate light so this is what it looked like in light mode so you can use that to show off each one i'm going to leave it at dark for now we can come back and mess with that cool the only thing is we can see how wide this card is being stretched out we do want our card to be responsive you know but i don't we don't ever really want it to be this wide so let's go ahead and down here let's do ion card max with 350 px now it'll just never grow to be that large and we can see it stays down this it'll still be responsive you know if our screen shrinks a little bit it can still respond to that um but it'll never grow larger than that which is fine for the card that we're currently building cool so we're doing fairly well here but let's look at our temperature notice that includes the decimal point there's no degree symbol um and there's no like fahrenheit or see if you're doing celsius so we need to format that and you know show it appropriately in the way that we want for one i want to get that degree symbol so what i'm going to do for that is just do that degree save that i've got the degree symbol but i'm actually just going to copy and paste this out of here so i can build my own formatter separately and i'm going to do that back inside my weather service i'm just going to add a new method here function format temperature [Music] it's going to take in a value and then format will be either f or c i'm going to return math.round because i just want to round to the nearest whole number for my temperature i don't care about the decimal point okay this is where my temperature symbol that i copied and paste or my degree symbol i should say comes in handy i'm just going to paste that right there rather than going finding like the unicode or whatever figuring it out grab it that way and then format goes here in my template string and i want to be able to use this outside of this function so it's going to get added to my return statement back in current weather i'm going to add it to my destructuring object and i need to use it in my template so i'm going to put that there i can get rid of this degree sign now because it's already going to come through and i'm going to call format temperature save that let's take a look so something's wrong here we did not pass it in the f or the c which we needed to do so let's do that great cool so we're kind of on our way right we have um the subtitle and the title working the next thing that we're going to tackle is the image you'll notice in our app there's a big image here with like a blue background and the logo these logos actually also come from um open weather api they have a url that we can grab the icon and use that on so we're going to build that part out next so first we actually need to write the code to go get the image and again we're going to come back to our weather service and we're going to do function get weather image url it takes in an icon name that's the icon name comes back from the api and we can give it a size it can either be 2x or 4x this is just again this is going off the open weather api documentation this is just how it's formatted so we're going to return out of this a string um i'm just going to copy and paste this to make sure that i i'm grabbing the correct url okay that's the url and then you pass the icon name and then there is an at symbol and then you pass it either the 2x or the 4x whichever one is being used so we're going to say size that gets sent in there and it's a png cool so that should let us grab the actual image from their website and once again we need to use this in our template because we need to use it in our template we need to return it out of our use weather function come back to current weather let's destructure it out of here and we need to return it so that it's available up here on the template okay now that that's available to us we're going to put our image up here now the thing about these images though is they have a transparent background which is fine it lets you it makes them more flexible i actually like that but i want to put a blue background behind it so what i'm actually going to do is create just a div to hold my image i'm going to give it the class weather background and then i'm going to put my image inside of here [Music] we need to bind to the source of the image with code and the way you do that in view is by putting a colon first by putting the colon in front of source i can then actually put code in here so i'm going to say get weather image url and i'm going to pass it weather dot current dot weather zero dot icon that is in the data where the icon name is stored and then we need to pass it a size we want to use the larger size here because it's a larger picture we're going to pass it 4x then down here at the bottom i'm going to add my weather background class background color sky blue all right so that's a start but we have one issue which is that our image is not centered in the middle so let's go fix that ion card image [Music] um we're going to just cheat and do this the simple way we could use the ionic grid and things to use display flex and center it but in our case there's not there's not it's kind of simple so let's just display block you know we could use flexbox for that but um just such a simple little thing boom centered all right so we are making pretty good progress here really the only thing left to do is add some of these additional data points down here at the bottom feels like wind speed sunrise and sunset so let's code those out we have our card let me just split these up a little bit with some white space here we have our card header and then we have our ion card content we're going to use ionic responsive grid for this because this is complex enough that i think it's a good use for it and then we're gonna say on the first row let's do feels like now again um we want to format our temperature for this this is a temperature again so let's do format temperature and then feels like is weather dot current dot feels like okay in our next column we're going to say wind speed this is obviously not a temperature it's a speed but i still don't really care about the decimal point here so i'm going to um [Music] i'm just gonna round it okay check in on our code here okay we have something wrong here it looks like our wind speed is coming through but we're also getting it undefined this is part of our feels like so what have i gotten wrong here i know what it is i again forgot to pass in um that i'm using fahrenheit i could avoid that by just making it always fahrenheit but i wanted to make it flexible to use both and then this is in miles per hour so i'm going to put that in here as well cool there we go that looks better all right great let's add our next uh column and we'll be on our way actually our next row i should say sorry that's it for that one second row this is our sunrise and sunset times sunrise so we have to do a little bit of magic here because this is a unix timestamp um so we're gonna say new date weather.current.sunrise and for unix timestamps you have to multiply by a thousand okay then we need to call to locale time string to turn this into a readable time and i think we can just pass it nothing and time style this time style is kind of new let's see if that worked for us sunrise 7 or 2am it did if you're using an older browser you may not be able to get away with this simpler formatting you can always use a library like moment.js to make sure it always works i wanted to keep things just as simple as possible and not involve any other third-party libraries so i haven't done that i'm just kind of doing it this way it's just using kind of a newer feature of dates sunset same exact thing except for sunset instead uh two locale time string great all right that looks the same great so there's that again we can go in here um it looks like a light color scheme there it is so that's our first feature done okay let's jump over and let's start working on forecasts so again everything this is under the weather feature still oh it is not a typescript file this is a view file cool again i'm going to use my snippets to just build my template for me and let's start on the forecast so again we're going to need a lot of our same pieces that we had before we need the weather we need fetch weather get weather image url and format temperature okay that gives us all those things and we're going to be using weather uh we don't need fetch weather on the template but we do need get weather image url and we also need format temperature okay now again we all we always want to grab the weather when it's mounted and then we can go fetch the weather every time however this is a time for a possible refactor you see each of these are going to end up fetching our weather and that might be okay but in our case all we're really doing right now is weather and we always want it to be there so this might be a good time to refactor our weather service to make it fetch the weather for us and then we just refetch it every so often like maybe every two minutes we'll just keep it updated so why don't we just go ahead and do that and i'm just going to say that weather.value equals fetch weather oh sorry i don't need to assign it because i sign it inside of my function itself and then what i'm also going to do is set interval i want to fetch weather every let's say two minutes so that would be what 120 is that right i think so the thousand milliseconds is one second um oh times sixty is sixty thousand times two so that should be every two minutes so what's this is going to do is just like as soon as the weather service um as soon as this is included in file boom this will get populated and then it will re-fetch itself every two minutes and then we can just remove our mounted that way the weather service kind of handles itself and handles it updating this is going to be obviously something you want to figure out how you want your data to work but for our purposes we always want it to be there and we want it to update every so often because the weather does change over time of course so this will let us update that every so often okay and let's make sure that it hasn't broken it works it's good so with that little refactor out of the way we don't really need to let our components worry about fetching the weather um instead the weather service takes care of itself and we can just use weather which means we can also get rid of this from our destructuring here [Music] in fact we don't really even want it to be accessible outside of here because weather service is now going to handle itself so let's not return it that way no one else uses it when they shouldn't be or effectively just turn this into a private function that only lives inside this module okay out of the way let us build our um forecast so we already have our things here for this we're going to use um ion list and not every page that you build is going to have a list in it so i actually don't have that included in common ionic components so we are going to manually include each of these components okay and then we need to import those manually you could include these on in ionic common components if you're using a list on every page of your app or more than you know a couple but um in my case i just haven't included them there so i'm importing them manually and now i can build out my list so my root of my template is going to be ion list um ion list header is going to be forecast then we have a list of ion items in our list we're going to use v4 views looping say for daily weather in weather daily and in fact why don't we go ahead and much like our current weather let's put a vf up here and let's only render this out if weather.daily exists then we don't actually need to worry about optional chaining anywhere else anytime you do a loop in view you have to give it a key so that it can track things being unique so we're going to say daily dot date which is another unix timestamp for the the date of this item so that will always be unique in this array okay next ion avatar this again i'm just following ionic's documentation ionic avatar is what is going to give us this image over here okay and in here again i'm going to create a wrapping div for the blue background then once again [Music] okay now we're going to use 2x we're not going to use 4x for this one because it's a smaller image great all right let's pause there and let's go actually add this over to our weather demo.view iron item and i am label oh yeah we haven't used those yet because i don't finish the code i imported too much too soon and now it's mad at me um i wonder if i can get away with just doing this quickly show this off cool so there's our forecast all we have is the logos yet but then we have all of our logos for each day and our list all right let's uncomment those cause we're about to use them okay there's our avatar let's add our label [Music] okay pause there again and check our progress mounted is defined component was registered play an item oh that's why i have a typo there let's fix that great okay cool starting to look good right this is very close to our final thing we just need one other thing which is to put the date so you know which day goes to which item here so let's do that i wish that vs code would do closing tags automatically in view components but for some reason i have not gotten that to work so i have to create them manually same thing to format our date here but we're doing a two local date string these are our date format options that's just built into javascript's um date formatting great so now we have our icon we have our temperature we have our description we have our dates [Music] however we don't get our blue background um on these like up here and i want us to have that so let's finish that up background [Music] background color is sky blue border radius is 100 so make it a circle border 2px solid white we're going to give it a border now we've got that am i missing something here because um these look too close together right there's no padding there something is a little bit off it looks like let me just check my code here i'm an avatar an avatar weather background well i'm not sure what is causing that issue i have to say because there should be i'm padding in here you know ion avatar should be um applying a right margin and it's not and i'm not sure why i guess we can simply go in here see if we can do this all right i'm happy with that i'm not sure why that was there another one i'm not here but now we've got that spaced out and you know this looks pretty good to me so this is sort of our sample page uh and our components and our work um done so now i kind of want to show off to you how easy by far by using this um folder by feature method and also by using the composition api let's look at how easily we can reuse this code i'm going to just copy this folder and i've already created a weather tabs demo here and i'm just going to paste it in here and i'm going to go ahead and open terminal and start it up so this is a whole new project i just created this ahead of time so you wouldn't have to sit here and watch me um recreate an ionic component or project i should say but all you do is do ionic start tabs and now you can see i have a tabs layout with my three tabs and this is where we're going to build out the last piece of our demo application which is to make our components in here um but because we kept our feature totally self-contained all we had to do was copy and paste this weather piece over and we can actually look at our test page right away by doing going here and doing weather routes add a comma save that okay this is our new project and instead of tabs tab three let's go to slash weather and look it's asking for my location again well here it is so i just reused all that code we just wrote that's as easy as it is to reuse including individual pages our components our routes are all there so by using folder by feature uh it's so easy to reuse your code you copy that you all i had to do was copy a folder over and type one line of code dot dot weather routes and instantly i can reuse all my code we're not actually going to use that test page it was really just there for test purposes but i wanted to show off why we kept the routes in the folder as well and it's for very fast and easy reusability across multiple projects so we're going to go ahead and get rid of this because we don't really care about that and we only have two tabs in our project so let's just go ahead and clean up a little bit of that by getting rid of this going into views deleting tab three going into tabs and we need to get rid of this cool i'm just going to kind of space this out we got rid of that route let's just go back to home cool now we only have two tabs and let's start by renaming them in their own headers tab one is current weather tab two forecast and this explore container is a component that they put in here that just kind of shows you the little thing on the page we don't need to do that explore containers registered never used yes let me go clear that up we do not need this again they have this components folder again we're not we're not going to do that because we use folder by feature not by type we're going to get rid of all that that cleans that up get rid of this get rid of this [Music] cool current weather forecast so so far so good right let's just add our ui layout and we're gonna finish this up [Music] okay so we've got all this stuff taken care of up here got our header toolbar oh i need to fix um really sure why this is here twice i think that's something to do with tabs all right now let's go on here we're going to use ion grid we want to center things in this grid [Music] i'm going to create a class to basically give this a minimum width so it doesn't shrink down smaller than it'll fit so i've created this min width class here we'll come back to that in a moment but i want to use current weather here okay and then i need to why ionic doesn't have style in here i don't know this will just stop our card from shrinking too small okay i have a i think that vs code just didn't insert this correctly it would appear to me which is odd okay and instead of doing all this current weather common ionic components okay boom okay and we can see what this looks like on mobile and if you want to see what it looks like in light mode cool all right let's do our second tab forecast forecast and this we don't really need a grid it's okay for this to take up the entire um width of the screen it doesn't like look bad unlike the um card which wouldn't be you know why vs code can't handle this i think it's because um because it's all in one line i'm not really sure why it's not inserting that correctly for me cool there's our forecast boom boom boom all right we're almost done we need to clean up these bottom tabs here and so it doesn't say tab one and two with a triangle and a circle and we're finished over here to tabs let's see here we need to get first of all not any of these we do not need these shapes but we are going to use ionic's built-in calendar outline icon okay and what we're going to use that for is this and we're going to name it forecast great so there's our second one handled right forecast with a calendar is what we wanted to see tab one is a little more complicated because what i've actually done is put the icon of the current weather as well as with the degrees there so even while you're on the forecast tab you know what's going on in the weather at least from an icon and a temperature so we need to wrap that up and then we're done [Music] so over here we're going to instead of an ion icon we're going to say image sir source equals um get weather image url and i haven't imported these yet so we need to do that weather format temperature and get weather image url great now those are all available to us and let's um we're really doing the um the same thing here that we did before we're going to say and [Music] current great now this is going to put the icon there but you notice that it's a bit too big even though we use the smaller size it's obviously uh too large for this so we just need to write a little css to make that fit and i'd already messed around with these sizes before so i'm just going to copy them from what i did before and there we go current image forecast cool so i'm that's it uh that means this whole video looks like i'm sitting at about an hour and 15 minutes um and considering it went into some descriptions and things i mean really we could build this whole app in less than an hour the things that i just wanted to highlight we talked about a little bit but by using the folder by feature approach it was very easy for us to take a feature we already wrote and ported over to a different view project the other important thing to think about is using the composition api to extract out shared logic we did that here with weather service this is logic shared across three components now and it's fully reusable by as many components as we want we had it being used in two components our currentweather.view and our forecast.view they were able to share this functionality including this weather object which let it just sort of magically update itself anytime it changed so we were able to share that data across our two components initially but then when we ported our code over you know this this shared weather service is still usable by other things so then we used it over here in our tabs to go grab the temperature to put it in our tab so by keeping that shared functionality separate it's really easy to reuse and by using folder by feature and keeping all of our code together it's also very easy to reuse so if you follow this sort of pattern theoretically your code becomes much more organized and reusable and really while you're working easier to find you know if you have to fix a bug you have a much larger project it's like oh there's something wrong with the weather where would that code live well all of it lives in one folder this could have subfolders under it as it starts to grow right if you had many more pages and you started writing unit tests which would also live under here you know you might have sub-folders in here but you always know that all of the things related to this feature are in one folder so easy to find your code easy to reuse it and easy to share that logic across multiple things so hopefully that gave you a good idea of how the view composition api works in view three and also a little look at ionic so thanks for watching if you have any uh feedback if there's something here that you know maybe should be changed or improved please let me know you know view three is still really new so i'm sure that as time goes on we'll come up with different patterns but this is what i've come up with so far so please leave feedback in the comments thanks

Channel: Coding with Rob

Views: 3,925

Keywords:

Id: LR91nlwdHjk

Length: 79min 59sec (4799 seconds)

Published: Fri Dec 04 2020

Reddit Comments

[u/JayBizz1e]

That was very helpful, thanks for sharing!