Ionic 3 Mobile Weather App Build

[Music] hey guys I have a new project for you today I'm going to try and get it done in one video but no promises we may have to extend it a little but we're going to be building an ionic 3 mobile weather app and we're going to do this by using the W underground weather API so we can use it to get weather from anywhere in the world so we're going to create a service provider to reach out to that API with a specific city and state and it's going to return the weather conditions the degrees humidity and even an icon to represent the current conditions so hopefully you enjoy this project and let's go ahead and get started this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time job in the industry to learn more visit dev mountain comm or click the link in the description below alright guys so I have a couple things I want to go through before we get started now if you have no idea what I on ik is it's a framework for building mobile apps with web technologies so HTML CSS JavaScript and it also gives us a complete UI framework with toolbars buttons lists and all that kind of stuff kind of like bootstrap does and some of the other front-end frameworks now ionic 3 also uses angular 4 as its JavaScript framework so if you're comfortable with angular 4 then you should catch on really quickly if you've taken my angular for front-to-back course which I'll put a link in the description you should have no problem understanding most of this stuff we're going to be working with components and services except in ionic they're also referred to as pages and providers all right now if you have no experience with ionic or angular I'm going to do my best to try and explain things as we move along but I can't go over every single line of code and every single concept and still be able to put together a working project in any decent amount of time so please keep that in mind it's just not possible but I will do my best to try and explain what's going on and by no means am I saying if you don't know angular or ionic then don't watch this you should definitely still watch it maybe even a couple so you can really get it and get it you know through your mind how this stuff works now you probably notice that I am on a Windows machine ionic is completely cross-platform you can build you can build your application you can compile it to iOS as well as Android however if you're on a Windows machine you can't test it on iOS okay if you're on a Mac you can test it on the iOS simulator but on Windows you can't so we'll be testing it in the Android SDK and the Android virtual device all right now with that said you don't even have to install the Android SDK or any of that to be able to build and test your application because ionic actually comes with its own dev server all right now where you would have issues with this as if you're building an application that uses some of the api's to work with the device utilities like the camera or the geolocation things like that but for what we're doing we're we're just using an external weather API and also something called ionic storage which are both just fine for working with the browser and working with the dev server so we're not even going to deal with the Android SDK or any of that until the end all right once we finish the application we'll test it on the Android virtual device in what you know we'll get into that I'll explain that a little bit and if you are in a Mac you can then test it on the iOS simulator which is actually a little bit easier than setting up the Android set the Android virtual device alright but I'll talk I'll talk about that later I just want to get the application built we can test it on the dev server and then we'll go from there okay now if you're going to be testing on the Android SDK you will need to download Android studio but you don't have to worry about that just yet what you do need installed now is no js' so if you don't have that go to node.js org go ahead and download and install it if you don't have it already if you're any kind of web developer you probably already do and then you also need to sign up for an API key at w underground comm slash weather slash API alright once you sign up you just want to sign in and then you'll have some options up here if we go to key settings you'll see your API key and if we go to documentation this has all the documentation it also gives you an example end point here so basically we have the API dot W underground comm slash API slash and then whatever your key is slash conditions slash q4 query and then the state and the city so in this case we're looking at the weather for San Francisco California and if we say show response it's going to give us all the stuff back such as the the location info the degrees and where is it Celsius Fahrenheit we have the wind that the pressure the dew point all this stuff you're able to put in your application even the icon URL for whatever the conditions are all right so let's quickly look at what we'll actually be building just go to the home screen here so this is actually running on the android sdk on our the Android virtual device and it runs exactly like it would run on a real Android device ok so basically we have the home screen here which has the the location the city and as the conditions mostly cloudy has a little icon that will go go along with the condition has the degrees in Fahrenheit in a large font here and then it also has the Fahrenheit and Celsius here and as the humidity dew point visibility heat index so this is all stuff that's coming from that API all right now we have some tabs down here if I go to about it's just going to be the app name the version and description now this wouldn't be too useful if we had to just if it was always Boston Mass so what I've done is I've created a settings page where we can change the location here all right so let's go ahead and just change this to let's say we'll say Orlando Florida and we'll say Save Changes and then that's going to change the home page if I click home again you'll see it'll now change to Orlando alright and if I go back to settings you'll see that it's Orlando Florida and we can change this to whatever we want alright so that's the application that we'll be building it's not too advanced but it's something that hopefully we can get through in one or maybe videos so now that we have all that stuff out of the way I'm going to close this up and we're going to go ahead and get started from scratch all right so I'm going to be using Visual Studio code as my editor and then I'm also using a tool called git bash which I'm going to see I guess I'll just open it up okay so git bash is a better command-line tool for Windows that and obviously it comes with the git version control system now you don't have to use this if you're on Windows you can use your standard command prompt or PowerShell or something else if you're on Mac or Linux of course use your terminal whatever you'd like but I'm going to be using this and then I also have it integrated into my editor which I'll show you later on but first thing we want to do is we want to install ionic and we want to install something called Cordova which is basically a wrapper that's going to allow allow our ionic application to be built out to an iOS app and to to an android app so we're going to go ahead and say npm install and we're installing this globally so right now it doesn't matter what directory you're in we want to do - g4 global meaning that it's going to be installed on the system so that we can use it anywhere at all all right and then we want to do ionic and it's very important if you want a onic three to do at latest okay so you want to do ionic at latest and then you also want to install Cordova globally alright so let's go ahead and run that that's the very first command that you should be running all right mine went a little quicker because I actually already have it installed both of those but now what we want to do is we want to go to wherever you want to create your project folder okay I have a folder called projects that I'm going to CD into alright and then from here we want to create our eye on ik application and we can do that by just saying ionic start and then naming our application I'm just going to call this eye weather and then we want to choose a template you can choose a basic template to start with and we're going to choose tab okay remember we had those three tabs at the bottom this is going to set it up for us so that we have those by default all right so let's go ahead and run that and it's going to ask some questions here would you like to integrate your new app with Cordova yes we're going to say yes or enter and this could take a couple minutes so what it's doing is it's going to generate the entire application structure all the dev tools it's going to generate the entire angular four application which runs on under Cordova or I'm sorry under ionic it's going to set all that stuff stuff up for us all right so now that that's done it's telling us to whereas it's going to tell us to CD into the folder or maybe it doesn't tell us yeah right here so CD into I weather so let's go ahead and do that or whatever you called it and you should now be able to start the dev server by simply saying ionic serve all right so that's going to start up by default it's going to be port 80 100 and it should just open up the browser all right so here's our application running in the browser now I'm just going to make it smaller so it looks kind of like a mobile app and we'll just go ahead and put it here actually know what we'll do is we'll snap this to the edge here we'll put Visual Studio code here and let's make this smaller now this this command line I'm just going to let the server run and then what I'll do is open up my terminal inside visual studio code once I open the project and we'll do our generators and stuff from there okay if you don't have Visual Studio code with and integrated terminal just go ahead and open up another terminal window alright now I'm going to open up the folder the app folder so I put it in so it's just there put it in projects and then I weather and we'll open that up so now we have all of our files on the side here let's close that up and basically everything that we're going to be paying attention to is in the source folder okay and if you're like I said if you're familiar with angular angular 2 angular 4 it's very very similar if we look in app you'll see the app component ts file you'll see the app module ts file which is kind of like the meeting place for all of our components and service providers and things like that and it looks very similar to an angular application well I mean it is angular that's why it looks similar but some of the stuff might look familiar such as ng module ok so when we create a component or a page we bring it in and then we put it into the declarations for instance the about page these are pages or components that were created by default kind of like a boilerplate if we look over here we have our home we have our boat page and they also give us this contact page ok so a page is basically a component and just like with the angular CLI we can generate pages or generate components we can also generate services also called providers all right so let's see what else we need to look at here we have our pages folder so this is where all the pages are when I say pages the pretty much components for instance about you'll see that there's an about TS file just like with angular and we have our we bring in our component we have our decorator we have the selector the template URL which is in this case about HTML we have our class we have our constructor it also brings in the nav controller so we can do redirects and things like that and if we look at the about HTML this is where the ionic framework really kicks in as far as the UI framework we have the iron header I a navbar which is this pot right here and then the content and the above page is actually empty you can see it's empty if we go to our home HTML and has some content inside the content iron content tag alright now we're not going to focus too much on the UI components I may do some kind of crash course later on like I do with you know bootstrap and foundation but we're really focusing on just building this application I'm not focusing on explaining every aspect of ionic or anything like that all right so it's more of a code along with explanation then you know a full crash course type tutorial all right so what we're going to do here is we want to basically get rid of the contact tab here we're going to have a settings in place of it as you saw in the final the final version the home page we're going to keep and that's where we're going to have the information that comes in from the API all right now to work with the API we're going to create a service or a provider but we'll get to that in a little bit right now what I want to do is get our tabs set up so we're going to create a settings component or a settings page and add that to the tab will show you how to do that so let's go ahead and open up another terminal I'm going to use my integrated terminal and to open that I just did ctrl and then the tilde which is to the left of the number one key you can also go to view integrated terminal alright so what I'm going to do here is use the generator to create a new page okay so I want a new page in this directory of course you could create it manually and you could add these files but that's you really don't want to do that so let's go ahead and say ionic G so generate and we want to generate a page which is also an angular component and we're going to call this page settings alright so let's go ahead and run that and then over here you'll see a settings folder pop up with all these files in it we have our typescript file ok angular uses typescript which is a superset of JavaScript it gives us our HTML which is pretty much empty gives us an S CSS file because we use sass by default which is a CSS pre-compiled ER and then settings dot TS is the main component file so when we want to start to work with the settings page and we want to add our form to change the location and all that it's all going to go inside that file all right now what we need to do when we add a new page or a new component we have to go to our app module dot TS file and we have to add it here you'll see we have our boat page contact all the default pages are already there now when you're using the angular CLI in an angular application it automatically adds components to this file unfortunately it does not do that with ionic so we're going to just add that ourselves so we're going to go right down here and say import settings page and that's going to come from dot slash pages slash settings / settings okay so that's the file right here so in pages settings and then the settings ts file that's what we're loading here and then when we add a page we need to bring it down into declarations as well so let's go right here and say settings page alright and then that should be it actually no we need to put it in entry components as well so settings page and then we can save this file and close it up alright now I want that settings page to be added to the tabs down here now notice if we look in the pages folder there is a tabs folder and we want to go into tabs ts okay so any page we want to add to the tab we have to bring in you'll see it already brought in these three pages so let's go ahead and import our settings page space is there and then we'll say from let's say from dot dot slash we want to go out one folder into settings and then the Settings component okay our page and then down here we're going to change tab three route change it from contact page to settings page and we'll save that alright and then the next thing we want to do is go into tabs HTML and we just want to change let's see so tab title right here will change contacts to settings will also change tab icon I'm going to change that to see og to kah which will give it a a gear icon so let's save that okay it automatically regenerates and down here now you can see we have settings with with the COG is that yeah it's a cog and we'll click it and now it shows the settings page all right so it's as easy as that to create a new page or a new component and then add it to the tabs if you want so let's close up those tabs files and now we're going to edit our let's let's edit the about page okay so it's going to be very very simple so I think that's a good place to start so let's go to about HTML and I'm actually going to be using the grid okay ionic actually has its own grid system we're going to use that for all of our pages so inside the iron content tag we're going to put in ion - grid okay I'm going to put an iron grid tab and then inside here we need a row so say I and - row works pretty similar to the bootstrap system and then we need a column so we'll say I n - call and I'm just going to set a width to this so we can say with 100 and then what I'll do is put a list ok so this is similar to like a bootstrap list group and that uses the iron list tag alright so in the iron list we have our items so let's - iron item and I'm just going to put in a strong tag here and we'll say app name okay and we'll say app name is going to be I weather and I'll just copy this item here we paste in two more so app name let's do version so version is going to be one point zero point zero and then we'll do description and we'll say simple weather app let's save it and then it should automatically regenerate and now you can see we have our our data here about page now don't worry about the style the style we can we're going to change in the SAS files actually it's probably a good thing to do right now so let's close up about HTML and then if we look in right here in our app folder we have our app dot s CSS file s CSS is an extension for a sass file and sass allows us to use things like variables in our CSS we can nest styles we can do all kinds of things this is not a sass tutorial so I'm not going to go too much into it but let's go ahead and just clear all these comments out of this file for now and we'll save that so this is the the main sass file now we also have if we look in theme the theme folder there's a variables dot s CSS file and this is where you can see we have some predefined color variables for our theme and we can also use other variables now I'm going to make this I'm going to clean this up a little bit and just get rid of all these comments because we don't need these okay we'll get rid of all these just the comments get rid of these okay make sure you leave all the imports and all that stuff alright so make sure we get rid of these two okay now if we look at the documentation let me just pull this up here let's say ionic saps variables so this shows all the different variables that you can use and there's variables for just literally everything alerts buttons cards fonts all kinds of stuff and what we want to work with is basically I want to change the color of the the nav bar here or the tab bar also down here where these tabs are I want to change the background color and there's predefined SAS variables for a lot of this stuff so let's go back to the variables file and to change this header right here the variable let me just put a comment here we'll say top toolbar and so since this is an SPSS file we can actually have comments like this and the variable is going to be money sign toolbar - MD - background and then what we want to do is set it to a color okay now I want to change some of these hexadecimal values for primary/secondary so let me do that real quick so primary is going to be a different shade of blue it's going to be six four nine five edie okay so that's going to be the primary secondary is going to be another shade of blue or kind of grayish which is going to be 4 3 5 d 8c okay which is going to be that color blue and then for the light I'm going to change it from a light gray to just pure white so just six FS all right so that's our color scheme now I want to set the toolbar background to the secondary color which is this darker blue here now to access this you can see it sits in parenthesis here and we have all these values we can access this by doing color and then we're going to do money sign colors because that's the name of that variable and we want to choose the secondary alright so let's save that and you'll see that the header color has changed up here alright now let's move on to the bottom tabs okay so four bottom tabs we want to change the background so the variable is going to be tabs - MD - background and we're going to set it to color I want to input colors and then we want to set this to secondary as well okay so we'll save that and now you'll see that the bar has changed colors and all of these variables should be should be accessible on this page here let's just do a search here we'll say toolbar - there's a ton of them so toolbar MD - background you'll see it's right here okay so if you want to look through all these variables you can but there's a ton of them so that takes care of the background now we also want to take care of the these tabs here because now they're kind of unreadable so the next one I want to do is toolbar - MD - tab color active alright and we're going to set that I'm just copy this we're going to set that to the light color which is is in our cases white so let's save that that actually didn't update tab color oh I'm sorry this should be tabs not toolbar there we go so now the active one you can see is white all right so there's a couple more here I'm just going to paste them in because I don't want to spend too much time on this kind of stuff so we're going to Pacey's in this is going to be the tab color that's not active this is going to be the text color okay these are both going to be light and then we also have the list background number on the about page we have our list I want that to have the secondary color as the background as well and also have the text light so let's save and now you'll see that the tab bar down here looks different and also the list here now we're going to add some more custom CSS I could not for the life of me figure out the variable to change the color of the inactive icons if you guys do know that how to do that let me know but we're just going to add a custom style for that alright so let's go to our app dot s CSS file now and we're going to add some extra styles now the home page actually wanted to have a blue background so I'm going to add a class if we go to pages and then home HTML and we're going to go on to the iron content tag right here and we're going to add a class of container actually no let's not do container now let's do home and then we'll go to our app as CSS file excuse me and we'll say dot home and let's give it a background now we can also use those variables in this file ok and I want to use the primary color so what I'll do is just let's grab this and we'll paste that in ok we'll just change this to primary and then let's say color color I want to be light so we're going to grab that and we're going to change this to light and then I also want to just add a margin top and push it down 30 pixels and we'll save and there we go so next thing I want to do is I want to Center the toolbar title right here so we're going to say dot toolbar title whoops that's all what I want to do toolbar - title and we're going to say text-align:center ok that pushes it to the center now the inactive tabs down here we're going to take care of those so those actually have a class we're going to say tabs tabs - MD and then we also want tab - button - icon and we're just going to make the call our Triple C which is a light light gray which didn't work why not work oh you know what this shouldn't be a comma there those are connected there we go alright so let's see the rest of the styles we're going to do have to do with the the temp display and all that which we don't have yet because we haven't actually fetched our data so now let's work on creating a provider to interact with our API now that we have the basic design down so we're going to generate a service or provider okay when I say service and provider I basically mean the same thing so we're going to go down here we're going to say I almost did ng because I'm so familiar with the angular CLI but for ionic we're going to do I on ik G provider and we're going to call this weather okay so we want to do I on ik G provider weather and if we look up here now there's a folder called providers with a weather folder and then a weather dot TS file and if we look at that it looks very similar to and just a standard angular 4 or angular 2 service just going to get rid of the comments here so we bring an injectable this makes it so that we can inject this as a dependency it brings in the HTTP module so that we can make HTTP requests it also brings in the map operator from reactive extensions so that we can use observables and we can use map okay and then it just creates a constructor for us now if we look in the app module dot TS file you'll see that it actually adds or is it right here it actually adds the weather provider for us and then it adds it down here in providers so we don't we don't actually have to do that manually what's strange is that when you use angular 4 and you use the generator the components you generate are automatically put in here and the services aren't but with ionic the components or pages are not put in automatically the purpose services are so it's kind of strange now the service of a provider isn't going to be very advanced at all we're just going to basically have a get weather function that reaches out gets the the weather and returns it so let's go to our weather TS file which is the provider we just created and we're going to add right under the class we're going to add a property called API key because we're going to need that and we're going to set that to whatever your API key is which should be you know I'm going to separate the app here all right let's make this bigger so your API key if you go to documentation it'll be this right here it's also under key settings so I'm going to grab mine I'm going to copy it make sure you use your own because mine probably won't work so I'm going to go ahead and just paste that in there and then we're also going to have a URL property all right so let's see we're going to go into our constructor and we're going to say this dot URL talking about this URL property and we want to set that equal to and we're going to grab from documentation this right here okay and then we're just going to add some variables in here so the API the API key right here I want to come from here so what we'll do is get rid of this and we're going to just concatenate by putting some quotes and then some plus signs and then we'll say this dot API key all right and then I want this to end after the cue so we're going to get rid of this because that's going to be dynamic we don't always want san francisco's whether we're going to have that come in externally from our components so we're going to get rid of that and it's going to end there okay and then what we want to do is create a function under the constructor called get weather okay and get weather is going to take in a city and a state and then what we'll do is we're going to return and then we'll use the HTTP module so we're going to say this dot HTTP GET because we want to make a get request and it's going to be to this dot URL which is going to grab this right here and then we want to attach the city and state on to it so after where this ends we're going to say plus to concatenate a slash and then we're going to concatenate State which is going to come in from the parameters and then we want another slash and then concatenate city okay now if we look at the end point it's actually the city dot Jason so we have to include that dot jason so again we're going to concatenate dot jason just like that now this is going to return an observable so we actually want to use the map operator that's why we're bringing in map up here so we're going to go onto the next line and save dot map and we want to map the result to result dot jason okay and that's going to return an observable so what we want to do is in the component where we want to display our weather when we want to get the response we just want to subscribe to this observable so that we can fetch that data all right hopefully you guys are still with me so let's go ahead and save this and this is actually it this should be it for our provider for our service so I'm going to go ahead and close it now the component or the page we want to use our service with is the home page that's where all of our weather stuff is going to go so let's go to pages we'll go to home dot t-- s ok so this is our home page component now what we want to do is you want to bring in our service provider I'm just going to make this smaller down actually I'll just close this up for now so we want to bring in the provider so let's do import we're going to import the weather provider now this is coming from if we look at our provider weather TS file it's this right here you want to use whatever whatever is right here so weather provider and it's going to be from dot dot slash dot dot slash you want to go out to folders up into providers into the weather folder into the weather component all right now that we've done that we need to inject this as a dependency so in angular when you inject the dependency it goes into the constructor parameter so we're going to put a comma right here and we're going to say private weather and actually weather provider and we're going to set it to uppercase W weather provider okay because that's what we brought it in as up here so now we have that that service injected and if I go ahead and save this and we go when we open up the console over here with f12 let's see we're getting an error here okay so we're getting an error that says no provider for HTTP the reason for this is because it's not HTTP is a module that needs to be brought in for us to use and it needs to be brought into app dot module dot TS okay you can think of this app dot module file as a meeting place for everything modules services components everything so we're going to go ahead and bring that in by saying import HTTP module and that's going to be from angular slash HTTP and then we just need to add it down here to the imports that's where any modules go that you bring in all right and we'll save that and it should fix that error hopefully all right there we go so now if we look down here you're going to see hello weather provider because it's now linked to the home component and if we look in our provider file its link from this console.log right here so we know that that provider is connected to the home component so now we're going to get ready to call the get weather function that's in our provider from the home component so we're going to need to specify a location we're also going to need to specify a property to fill with the weather that comes in from the API so right in the component class here we're going to say weather and I'm just going to set that to the type of ne and then we're also going to have a location which is going to be an object that's going to have a city which will be a strength and it's also going to have a state which will be a string all right now how we're going to do this is we're going to store the location in something called ionic storage which is actually part of ionic and it works very very similar to local storage html5 local storage except it's asynchronous all right but for now we're just going to manually set the location we're not going to use storage just yet now we could do this in the constructor but there are life cycle methods that we can hook into that are recommended for instance there's one called I in view will enter so we're going to say I in view will enter and this is basically going to fire off whenever the components loaded okay this is very similar to ng on a knit if you are familiar with angular so in here is where we're just going to say this dot location talking about this this right here this object and we're just going to set it to let's say city will set it to city Miami and we'll set it to state FL okay so when this component is loaded it's going to take this location property and fill it with this city and state now that by itself isn't going to do anything what we need to do is we need to now call that provider function that get weather function to actually reach out the API and get the weather so let's go right under where we define the location and we're going to say this dot weather provider okay because that's what we defined it as right here so this dot weather provider and then we want to call the get weather function that's in that provider you'll see well it'll automatically show up right here in the intellisense so get weather remember it takes in a city and state if we look at it right here city and state and that's going to come from this city and state so we're going to save this dot location dot city and then this dot location dot state all right now remember it's going to return an observable so observables are basically data streams so we need to subscribe to that stream to that observable so we're going to say dot SUBSCRIBE and then inside this these parentheses we're going to put weather that's what we're going to return it as and we're going to use an arrow function like that let me just turn on rap here see there you go so you guys can see everything alright so we're subscribing to it we're getting the response or calling it weather and then let's just do a console log here to see what it actually gives us all right we'll save that and then we should see something down here so here's the response and then it gives us this object called current observation and if we look in there that's where all of the the stuff is that we need okay all of the the heat index the temperatures the icons that all that response that we saw where is it right here oh okay so it's all of this stuff and we're getting it we now have it in our application so what we want to do is we want to assign we want to assign the current observation object to this weather okay this weather property so instead of console logging let's say this not weather and set it to the weather that's coming in the result that's coming in and then current observation so now we're going to have all that data available to us from within the home the home page template so now we can go to home HTML we can get rid of all this crap here and we're going to be once again use the grid so let's say I in - grid now I don't want any of this to load unless the weather unless that that data is loaded unless it's come back so we're going to put an NG if right here so asterisk ng if and we're going to set this equal to weather okay so it's going to check for that data before this even loads otherwise we'll get an error all right so let's put a row in here we'll say I in row and then we're going to put a column okay so this column I'm actually going to set the width - we're going to say with - 50 and then we're going to offset it so that we push it to the middle so we'll say offset 25 all right and then we'll put an H - let's give it a class of location and then we can grab our data okay so in here we're going to put double curly braces this is just standard angular string interpolation basically allows us to put dynamic data inside of our template and we're going to say weather okay remember we're getting that data we're putting it in in the weather property and we want the display underscore location dot full okay now let me show you where this comes from so it's coming from the data that's returned which I'm not logging down here anymore so I'm just going to pull up the the doc page here and let's see we're looking at current observation just display location and then full so it should give us the city and the city and the state so let's just go ahead and save this and see if it actually works and there we go so we're getting the display location which is Miami Florida all right so let's add the rest of the data here and then we'll style it so we're going to put a div with the class of icon look icon and then we want to get the image okay now the source for this is going to come from that weather object that's returned and it's going to be under icon underscore URL okay which if again if we look at the documentation here we should see it gets down at the bottom right here icon URL which is going to point to whatever the the condition is in this case partly cloudy all right if I save that there it is and under that we want the description which is going to be like the partly cloudy or sunny or whatever it may be so we're going to get we're going to put that in an h3 with the class of DSC for description and then we'll say weather dot weather save that okay we get mostly cloudy then we're going to have an h1 with the class of temp and I want the Fahrenheit temperature for this so I'm going to say weather dot temp underscore F and then I want the little degree symbol which we can get with ampersand deg semicolon so we'll save that and there we go so now under that we're going to have a list with some of the other stuff like the humidity Celsius things like that so we're going to put in another row so let's go right here we'll say I in row okay and then we're going to do iron - call and let's see we're going to make this one a with 102 iron list I in - list okay then we want an item and we're going to put a strong tag with the temp okay so temp which comes from our weather object and it's going to be temperature string oops okay save that there we go as our temperature string let's copy the ioan item paste it in a couple more times this next one is actually going to be relative humidity and that comes from relative underscore humidity okay then we have dew point it's going to be dew point string okay and all this stuff again I'm getting from the response okay and you can add other stuff if you want I mean there's more there's wind string wind direction pressure wind chill feels like there's all kinds of stuff so you can pick and choose what you want just use whatever they are this that that value is all right so dew point let's also do visibility so it's going to be visibility underscore mi because we want it in miles and then we'll do heat index which is going to be heat underscore index underscore string all right and there we go so now let's finish styling up this page right here so we'll go back to our app dot s CSS file and let's do the temp okay we gave it a class of temp and we're going to set the font sighs - 90 pixels let's set the text aligned let's let's say text the line to Center we'll set the font weight to normal okay now we're going to take everything we're going to take the location okay dot location we're going to take the icon we gave it a class of icon and in the description and I want to just align it all to the center so text-align:center okay we'll save that up I forgot the comma right there there we go and let's see what else let's make the image a little bigger so we'll say the class of icon and the image inside of it we want to set the width to let's say a hundred pixels and then I also want to set the location Location we're going to set the font size to 40 pixels and then let's set the description font size to 30 pixels and there we go so there's our home page I just want to change the title up here from home so let's go to our home dot HTML and we'll just change that to I weather and save alright guys so now what we want to do is we don't want let's go back to home TX we don't want the location to just be hard-coded like this we want to use some kind of storage and ionic has something called ionic storage which works like local storage and it works in Android it works on iOS so it's completely cross-platform it also works in the browser which is great we don't even need a simulator to test it out so we're going to we're going to bring it in up here alright first of all we need to bring it into app dot module dot TS anything we use we need to bring into this file so let's go right under where we brought in the HTTP module and we're going to import it's going to be a on ik storage module and that's going to be from ionic slash storage okay now we have to bring this down into the imports just like we do with any other module so we're going to say ionic storage module and then we just need to do this dot for root parentheses okay and that's all we need to do in this file so let's save it let's go back to home dot t-- s and from here we're going to bring in storage so let's say import storage it's going to be from ionic storage okay now we need to inject this as a dependency just like we did with the weather provider I'm just going to put these on separate lines like that so we'll put a comma right here and then we're going to say private storage and set that to capital S storage all right and then we can use it so let's go down here now in the iron will view enter what we're going to do I'm just going to go like this and we're going to say this dot storage dot get so basically when you want to get something from storage you use this start storage get when you want to set something you use this dot storage dot set so we want to get the value of location okay now remember there's nothing there yet we haven't said anything in location now this is completely asynchronous so it actually returns a promise so we have to go dot then like that and then this is going to take and I'm going to put another set of parentheses a parameter I'm sorry a value called Val and then an arrow function and then in here we can grab on to this value okay so whatever is stored in the location is going to be in this Val okay and then what we want to do is test to see if there's anything there because if there isn't then we need a default and that's where this miami florida is going to come in but everything has to be done within this dot then because it's asynchronous so let's do a test here we'll say if val is not equal to no and we want an else yeah so if Val is not equal to no and we'll take care of this after but for now we know that it is equal to no so what do we want to do we want to just set this default value so we're going to cut it from here and we're going to put it in the else like that okay now since this is asynchronous this whole thing right here where we called get whether this has to go within this dot then or it's not going to work so let's go ahead and just cut that whole thing all right and then we want to put that right here okay after the if statement and we'll just clean that up a little bit all right so yeah I think that's good so that ends there that ends there that's the that's the class good all right so if we go ahead and save this it should still work hopefully maybe not cannot read properly city of undefined all right you know what apparently we do need to put what we need here now when we save location right when this is put into the storage it's going to be saved as an object like this okay now when you when you save something in local storage whether it's html5 local storage or ionic storage it has to be saved as a string okay so when it's stored in there it's going to be a string however when we get it we want to parse it as Jason so that we can access it as an object so what we're going to do is set this dot location and we want to just wrap the value in a function called jason dot parse okay because that's going to take the string that it's stored as and then turn it into jason so that we can access you know location dot city dot state just like we do here so let's go ahead and save that okay now we're getting Boston Mass because I actually already had something saved in my in the browser in ionic storage from when I was creating this so let me just clear that out and I'll show you how to do that actually which is probably a good thing anyway so if we go to our call our chrome tools go to application and it's actually under index DB you'll see this ionic storage okay and this is where it gets stored in the browser so I'm just going to delete database you guys won't have this okay but I already had some data stored in there the Boston Mass so I'm just going to delete that all right so I deleted that and now if I reload it should go back to Miami okay which is the default so you guys honestly you guys probably didn't even get that error at first because since I already had something it already found something in the value there was nothing here that's why I was getting the error you guys didn't have anything so it should have loaded this so hopefully that's not too confusing all right now now that that's working we want to be able to change this okay we want to change the location and that's all going to be done then settings so what we're going to do now is go to our settings dot TS file let's get rid of this comment here and then remember settings is going to have a form with a city and a state field so what I'm going to do is add two properties for our settings page class one will be City which will be a string and one will be state which will be a string okay now we want to actually know what let's try to think of how I want to do this let's just go into the constructor and let's manually just say this dot city equals Miami and this dot state equals FL all right and then we're going to go and create the Settings form because right now if we click on settings there's nothing there so let's go to settings HTML I'm just going to put an uppercase s here and then we're going to go into our content and we're going to add a grid okay in the grid we're going to have a row in the row we're going to have a column column is going to be with 100 okay let's see so in the column let's put a list we're going to put the form inside of a list okay so I enlist and then let's say form and this is going to have an NG submit so when this form is submitted we want to call a function called save form all right so when it's submitted it'll call that function which will create a minute but let's finish out the form so we're going to put an I in item here okay inside here let's put a label so I n - label all this stuff is in the documentation - by the way I'm going to set this to be fixed and this is going to be the label for the city under the label we'll have the input which is going to be you guessed it I an input if I can spell right okay so I an input and we're going to use an NG model here just like with standard angular we're going to set that to the city value this also needs the name attribute set to the same thing city and then let's give this a type of text so NG model is a directive for two-way data-binding basically what we're saying is that this input should be bound to this property okay so we have it set as Miami in the constructor so the actual input value should be by default Miami all right now let's go back to settings and let's go ahead and add the state which is going to be basically the same thing I'm going to copy this I in item and we'll paste it here let's change this to state we're going to say ngmodel state because we want to bind it to the state property all right and then let's go under the I an item and we'll put our button okay so for the button let's let's say I in - button it's going to give it a type of submit so that actually submits the form and then we want it to display as a block so it saved that if we go to settings there we go and you'll see that it's already prefilled with Miami Miami Florida because we did our two-way data-binding with ng model here and here now we don't want this again think of what we did on the homepage we don't want this to just be hard-coded data right we want it to come from ionic storage so we're going to do the same thing in our settings page we're going to bring in our storage okay we also need to add that as a dependency so in the constructor we'll put a comma right here and we'll say private storage set that to uppercase ash storage all right so we're going to do pretty much the same thing that we did in the home ts let's get rid of this and we're going to do and this dot get I'm sorry this dots storage dot get location okay remember this is asynchronous it returns a promise so we want to do dot then and then inside here we're going to have a value that's returned put an arrow function and then we're going to test for that value so we'll say if the val is not equal to null so basically if there's something there then what do we want to do we're going to we're going to create a variable called location and set it to json dot parse whatever that value is okay and then we're going to set this dot city equal to location dot city and set this dot state equal to location dot state okay now we're going to say else if there's nothing in that location object then we'll just set this city to Miami or whatever you want for the default and this dot state to FL all right so basically doing the same thing we did on the home page except we don't have a dis dot location property we're using separate city and state on the settings for the separate inputs okay so let's save that and we should still get Miami because there's nothing in yep there's nothing in the storage location yet so the last thing we want to do is we want to make it so that if we change this and save it then this gets updated this location object in the storage so remember we created we had to go to a function called save form so let's go ahead and add that and what we'll do is we'll create a variable called location set it to an object and set city to this dot city because whatever we type in here is going to be bound to this dot city okay which is the city property of this component so whatever we type in there this is going to be it when we submit it same thing with states so it's safe state set that to this state all right and just to test this out let's just to a console dot log and say log location all right so let's go to settings and open up our console and let's just we'll change this to will just say Boston Mass and save and this is what's getting submitted an object with city and state so what we want to do now is we want to save our storage our location as that so let's go ahead and get rid of the console log and we're going to say this dot storage and instead of get we're going to set it okay so this storage set we want to set the location now remember it has to be stored as a string and this is an object so before we submit we will just want to run it through a function called json stringify which will turn turn it into a string like that all right and then the last thing we want to do is navigate back to the home page and we can do that by using the nabbed controller so this snap control dot push now if we want to redirect to the home page we actually need to bring that in up here so we're going to import home page from and let's see we want to do just dot dot slash go out one into the home folder into the home component and then we can just pass that in here like that all right so let's go ahead and try it out we'll save and let's just reload for good luck and we'll go settings change it to Boston Mass and save and there we go now if I reload it's still Boston which is exactly what we want okay so it's now being stored in ionic storage so our application is now essentially finished as far as the functionality goes so I'm going to close all this up and like I said if you're if you're on a Mac you can do your iOS simulator but you're going to have to you're going to have to run it with Cordova so let's uh let's actually open up say ionic ionic build app and you might want to look through this this documentation let's see testing your app okay so this is obviously we've this is what we're doing what we've done an ionic serve serves it up in the browser now to test it if you're on the Mac you can do ionic Cordova build iOS actually know what you don't want to do that just yet you want to do run iOS I believe I think I mean we're going to do run Android I think you can do run iOS or the prepare iOS a lot much of a Mac user but just try that you can I know that it's easy to run it in the iOS simulator but what we're going to do is we're going to run it in the Android simulator now in order for this to work like I said you need to have the Android studio installed and the Android SDK you also have to create a virtual device now I already have the Android studio and all that installed but I will show you how to create a virtual device so let me just close that so close that now once you download Android studio and of course you can do this on a Mac as well a Mac you can test with Android and iOS it's just on Windows you can't test with iOS so let's open up Android studio and by the way I do have a tutorial showing you how to set up Android studio it is a little old I think it's a year old so there may be some some some errors but this shouldn't be too hard to figure out now this is Android studio this is a complete IDE for building Java apps and ant real Android apps we're not going to use this whatsoever what I want to do is go up to this little icon where is it virtual device manager yeah right here abd manager and we'll click on that and this is your virtual devices you can see I already have one here this nexus 5 but what you can do is create a virtual device you probably won't have one and we can just click you can choose a device I'll just I would just use the default Nexus 5 click Next and you want to choose your SDK I'm using version 7.0 nugget or new get whatever and click Next and you can set up some stuff here I would leave the defaults click finish and then you have a virtual device ok so what I'm going to do is I'm going to open I'm going to play my virtual device with this play button so it's going to launch the emulator oh it's already running oh it's already starting up all right so my emulator is now starting on ok so now that it's started up what I'm going to do is go back into my command line cases so this is where ionic serve is running I'm going to stop it with ctrl C and then we're going to do just go back to see where were we that is it testing right here I'm going to do ionic Cordova run Android and that should run it in the virtual device and could take a minute and there we go so it's being run now the reason that it mine is set to Orlando Florida yours is most likely set to Miami is because I already had this app running before it and it saved the storage ok so Orlando was already saved but you should be able to go to your about page you should be able to go to settings and let's try changing this so we'll set it to let's say New York and why save and there we go alright so our app is working on Android now I'm not going to really go in much further than this but I would suggest looking at this guide here this is kind of the publishing guide if we go down to publishing your app you can actually build out your or is it you can build out your apk file which is basically like the file you upload to the App Store's and all that you do need to sign it so you need to run these commands to sign it and then you can upload you can actually upload it to the Google Play Store alright and it looks like it costs $25 to upload compared to apples $99 so if you publish it in iOS and you upload it to the the Apple App Store you'll have to pay a 99 dollar fee I think it's a one-time fee and then you can upload as many apps as you want but this goes into depth with like publishing with Xcode on a Mac and all that stuff alright but basically you built a hybrid app let's go ahead and we'll run the build command here so see go ahead and we'll say ionic cordova build and we want to add on the flag release and we're building it to Android what this should do is it should jet it should take our application and it should compile it all into an apk file and then that's your app that's your Android app okay so it says it's in Brad projects I whether platforms so let's just navigate to that folder real quick let's see so we want to go users Brad where is it projects yours a lot obviously being a different wherever you put your app and then it's going to be in platforms you see we have this Android folder and then we have build outputs apk and there it is so this is our unsigned apk okay and like I said you want to go and run these commands to sign the apk and then you can proceed to upload it to the Play Store if you want to do that I wouldn't suggest uploading this particular app because it's not really production ready there's you know there's there's room for errors and stuff like that so if you want to use this as like a prototype to build a production level application that's fine but I think that's going to be it guys this video has been quite long but I didn't want to really break it up I wanted to do it all in one shot so hopefully you enjoyed this and hopefully you learnt quite a bit from it hybrid apps are really in the future because we have this application and we can now publish it for Android as well as iOS okay we don't have to spend you know a lot of time and money on creating a Swift app for iOS and then a Java app for Android okay that's what's great about hybrid apps so thanks for watching guys if you liked it please leave a like please subscribe if you're interested in supporting me further check out my patreon in the description and thanks for watching so if you guys really like my videos and you learn a lot from them and maybe you have a couple extra dollars to spare check out my patreon page I'm working on creating special content for patrons you also get special deals on future courses and there's even an email support here for all YouTube videos and projects to learn more visit patreon.com slash traversée media

Channel: Traversy Media

Views: 255,281

Keywords: mobile app, ionic 3, ionic, ionic 3 app, build a mobile app, wunderground api, ionic 3 tutorial

Id: qs2n_poLarc

Length: 75min 2sec (4502 seconds)

Published: Sat Aug 12 2017