Ionic 2 Mobile App in Under 60 Minutes

hey guys welcome to another project build in this project we're going to be building a mobile application using the ionic 2 framework now if you don't know what ionic is it's an html5 and JavaScript mobile framework and what is what it essentially does is it allows you to create apps with JavaScript and then wrap that web app inside of a native container all right so it's perceived as an as a native mobile app and it gives you access to a lot of the different native components all right it also gives you a customizable UI and a ton of custom elements to work with now it's important to know that ionic 2 uses the angular 2 framework so I would suggest that you learn at least the basics of angular 2 before getting into ionic it is possible to learn both at the same time and for what we'll be doing you don't have to be an angular 2 pro by any means I would suggest checking out my angular 2 and 60 minutes video before attempting this all right now with ionic you're building a core app but you can export it as an Android and an iOS app alright usually if you're building native applications with you know objective-c for iOS and Java for Android you'll have to build two separate applications and that's extremely expensive especially where you know objective-c and Java developers are much more expensive than JavaScript developers so you can see that this is this is a really nice framework to have for iOS you do need a Mac and you also need an Apple Developer license as far as I know so we'll be focusing on Android now most likely you want to get the Android SDK and Android studio installed it is free you'll want this if you want to use the Android virtual device which is what you're looking at right here I'm not going to go into the whole installation process there are a ton of videos on that on YouTube and tutorials if you want to get that set up but I will show you exactly what you'll need to install all right now before we do that let's take a look at the application we'll be building so it's an application called I in reddit and we're using the reddit the subreddit API to basically just fetch a list of posts or reddit's within a certain category all right so you can see we're getting the image to the title or getting the thumb the score or the thumbs up and the comments all right so by default we have this set to food but if I go and I click this and this is extremely slow by the way just because it's the virtual device this would be much faster if you exported it and installed it on a physical device alright so if we want to change it to sports we'll go ahead and click OK and you can serve this in the browser as well and it's much faster and that's that's how we'll be developing all right so you can see that the sport it's updated to the category of sports now this is the main page if we click on View it'll actually take us to an inner page or a details page looks like that image isn't showing up for some reason let's try this one I think some of them yeah some of them don't have images we can put in a simple if statement in there to take care of that but you can see we have the image that the title the author the score and the comments and then a button to view it on reddit all right so that's the details page now we also have a settings page where we can change the default category so this will actually change it in local storage so that when you come back to the app the category will be changed we can also let's see we'll change it to back to food we can also change the limit all right so I have it set to 5 but we can go ahead and change that anywhere from 5 to 25 and of course you can add more if you want so click OK and let's go ahead and save changes and now you can see we have food and we have 10 10 listings all right and then we just have a simple about page which just gives us a description the version number all right so that's what we'll be building pretty simple I think it's good for a starter application and the API is really easy to work with if you look up here we just need to make a request to a URL like this and we're just basically changing the category name and the limit okay and this is what it gives us just a bunch of JSON content now of course you'll need nodejs installed to to install ionic and Cordova Cordova is basically sits on top of it and that's what allows it to chain to turn the JavaScript code into native code alright so if all this sounds really difficult don't worry about it it's really not that hard we're not going to actually publish it on a physical device and we're just going to get it to the point where it's running on the emulator which is pretty much the same thing after that you can do I think it's ionic build Android and it'll build out an apk file and you can actually install that on your physical device all right I don't even have an Android device to do that with but let's go ahead and get started if we look over here we're at i/o Nick frame our comm Docs /v - slash setup slash installation and we're going to kind of follow along here now ionic one actually uses angularjs or angular one but we're going to be focusing on version two which uses angular 2 so let's go ahead and open up a command line I'm just going to open that up on a separate screen alright so I'm going to go to the directory where I want to create the application and I'm just going to close this out all right so let's say CD I'm going to go to my C Drive and then project and this is where I'm going to set up the application over Android studio let me just show you real quick now the SDK manager you can get to through Android studio or if you have the Android environmental variables you can use this command here now what you're going to want is obviously the SDK at this point the latest is API 25 which is 7.1.1 you're also going to want the build tools for that version okay you're going to want where is it you want hexam this right here this is the emulator accelerator you're going to want to install that so check that off and you're going to want a system image for that virtual device I would suggest this Intel Atom if you're on 64-bit use the 64 version and then that will let you set up an emulator all right so if we say Android AVD Android virtual device that should open up the device manager you'll see I already have one here the Nexus 6 but you want to create a new one give it a name select your device now the target is the API you want to use and then this is where you'll select the system image okay for instance the atom Intel Atom all right you can go ahead and create that all right but unlike I mean there's there's a lot of videos on YouTube to show you how to do all that so let's get back to our project now if we look at the documentation here you want to install ionic and Cordova using NPM so you'll want to do NPM install global Cordova and ionic alright I already have it installed so I'm not going to run it but you want to do that and then once you do that you can use ionic start to create a project so let's go ahead and say ionic starts and we're going to call this I on reddit and you want to make sure you use - - v2 if you don't use that it's going to install ionic one which we don't want alright so let's go ahead and run that and that will create the whole folder for us and it could take a couple minutes so what I'm going to do is pause this and I'll be back when it's finished all right so that's dawn took about a minute and a half not too bad so what we're going to do now is CD into iron reddit alright and then from here we should be able to actually start our application we can serve it in the browser by saying ionic serve okay so it goes through a little process here but once it's started and we start to edit our code it'll live reload alright so there it is there's our application we could actually publish this now if we wanted to it's basically just a boilerplate we have a home page if you look at the tabs down here click about we have an about page which has nothing on it and then a contact page which just has their Twitter handle all right so that's the boilerplate now we're going to leave this running and let's go ahead and open up our code editor I'm using Visual Studio code I like using this with any angular project because it has nice typescript highlighting and when then what we're going to do is open up the folder so let's see projects and I in read it alright so let's take a look at the structure here now the main folder we're going to be focusing on is the source folder that's where all the angular - all the components the pages is when we create a service everything is going to go in this folder now let's take a look in the app folder alright so we have the app dot module file now if you followed along with mice angular 2 and 60-minutes video or you just know angular 2 then this should look familiar this is basically where we bring in all of our other components and we add them to ngmodel or I'm sorry ng module alright and you'll see we have the about page the contact the home page and the tabs page which represents the tabs down here all right in addition to that we have the app component ts file this is basically the main app component this is where we add our service providers and so on all right we're not going to do too much in this file though all of the sub components are actually in this pages folder so you can see we have about contact home and tabs all right if we look at a boat it has three files it has the TS okay which is the main component file the HTML file which is the template and an F CSS file for styling okay uses sass by default so if we look at the TS file you see just like any other angular 2 application we're bringing in component from angular core it also uses a nav controller ok so that we can change pages easily then we have the component decorator with the selector and the template URL and then the class name which is by default the component name and then page and then our constructor and we're injecting the nav control here as a dependency alright if we look at the HTML ionic has its own directives so we have this iron header and the navbar that's what you're seeing up here and then all the content will go in here alright so if we go ahead and say this is about and we save that you'll see that it'll auto reload and then if we click about you'll see that that was added so the workflow is really easy with this this ionic serve feature okay so same same thing for the contact in the home and then in tabs if we look at tabs TS we're just bringing all the pages in and we're adding them down here to these tab 1 root tab - root tab 3 root and then if we look at the HTML we have these iron tabs all right so what I want to do first is create our reddits component component or page whatever you want to call it in the settings page so let's create a new full let me just get rid of those alright so inside pages we're going to create a new fought a file a new folder called reddit's alright and then inside reddit's we're going to create a file called Redditt dot TS type script file and then a new file called Redditt dot HTML ok that'll be our template you can create the s CSS file if you want but we're not going to do that I don't even think we're adding any extra styling really all right so what we'll do here is let's copy what we have in the about HTML so we'll grab that and put that in Redditt HTML here this is going to be the main home page so for the title I'm just going to say iron III in reddit ok we'll say this is home save that and then let's copy what we have in the about TS file and we'll put that in red it's TS and then what we'll do is change the selector to reddit's change the template to Redditt dot HTML and then the class name is going to be read its page alright so we'll save that now we want to do the same thing for the settings page so again in pages let's create a new folder called settings and we'll create a file called settings dot T s and then settings dot HTML alright and again we'll copy what we have in about TS paste that in settings we're going to change the selector and the template and the class name settings page alright and then let's copy the HTML okay up here we'll say settings and we'll say this is settings all right so now we have our two pages now we want to add them to the tabs down here alright but before we do that whenever you create a new page or component you need to add it to a project with a standard angular 2 app so we're going to go ahead go up here now we're not going to be using the contact and home page so I'm just going to replace that so this will be reddit's page and then you want to point to it which is Redditt slash reddits and then let's change this to the settings page settings ok and then we want to change that here in the declaration so this will be R edits and settings same thing here reddit's settings okay so let's save that and that file should be all set for now and what we want to do is let's see so we're getting an error here no component factory found for home page that's fine what we need to do is go down to our tabs page tabs folder and go to tabs ts and we're going to change this home page to reddit's page change that and then contact will change that to settings ok and then down here let's do the first tab will be the reddit's okay then we'll have actually want the settings page to be the second one and then about will be the third one save that and then we'll go into tabs dot HTML and let's change this to reddit's this one will be settings and this one will be about now as far as the icons okay so ionic has its own set of icons so for this one let's see so we'll use we'll keep that as home for the settings so we're going to use construct and then for about we're going to keep the information circle so let's save that and now down here you'll see for reddit's we have our home icon settings has the the tools here the construct about has the information alright and says this is home if we click on settings that's good about that's good so our navigation is complete now I want to change the the look a little bit I want the header and the tabs area to have a blue color so to do that we can go to let's see we'll go to our edits HTML and where we have the navbar let's just add color equals primary and we'll save that and you'll see that turns blue alright now we have to do that on every page you'll see settings we'll have to change that as well so we'll add that here I think secondary is green by default and let's see about HTML set color primary well I had an M there it's alright alright and then for the tabs if we go two tabs HTML we're going to add that there as well primary and if you go to the documentation it has all these different styles and things you can do with the UI all right so let's close these up and figure out what we're doing next so what I want to do next is I want to fetch data from the API and then bring it into the home screen or the reddit's page so we need to create a service for that and if you've used angular 2 you know that when you're making any kind of requests to a third party API you want to put that in a service you don't want to stick it in a single component because you probably want to access it from multiple components so we're going to create a folder inside the app folder called services and let's go ahead and create a file and we're going to call this reddit dot dot TS alright and this is going to work just like any angular 2 service we're going to import the injectable package so that we can inject it as a dependency ok all this stuff is the same it's going to be from angular core we also want to use the HTTP module so we're going to say import HTTP from angular slash HTTP let's see why is that up I put three T's all right and then we're also going to use observables we're going to use reactive extensions so we're going to say import rxjs /rx alright and that's all we need to import so let's add the injectable decorator there and then we can create our class so export class and we're going to call it reddit service all right so let's define our properties we have our HTTP I'm going to set that to the type of any we also are going to set the base URL and that's going to be a string all right now let's create a constructor okay now in order to use the HTTP module we have to inject it as a dependency right here so let's say HTTP and then we're just going to set this HTTP equal to HTTP okay and then let's define the base URL so the base URL for the reddit API is going to be HTTP WWE at comm /r alright and then let's create a function called get posts and this get post is going to take in category and a limit alright and then what we're going to do is return this dot HTTP we're going to use the HTTP module and we're going to make a get request okay so we're going to make a get request to this dot base URL and then we want to concatenate the category so we're going to put slash and then category and then here we're going to say slash top dot jason and limit equals and then we'll concatenate that limit variable all right so that's making a request to something like this alright so this is an observable so we have to add a dot map to it so let's get rid of that semicolon and say dot map and we want to map the response to res dot JSON and that's it that will return all the posts to us as an observable all right so let's save that and that should do it for our service very simple so when we create a service we're going to add it as a provider in the app component TS file so let's go up here and say import a reddit service all right and let's see where is that going to be from so we're going to go dot slash services slash reddit dot it alright now we're just going to add it as a provider right here providers which is an array and then we're just going to add reddit service that's it so we'll save it and then we're going to go back to our edits component so pages Redditt reddit TS and then we're going to bring the service in here as well let's see Ward's reddit service okay so that's going to be from dot dot slash dot dot slash app slash services slash reddit dot okay so that brings it in now we have to inject it as a dependency so in the constructor we'll put a comma here and say private reddit service just like that okay and then what I'm going to do is we're going to use a life cycle hook called ng on and knit and this just this runs whenever the component is rendered so for instance if we say console log on in it in and save it and we'll open up the console here and see right here you'll see on and it ran all right so what we want to do here is we want to use that service function that get posts now I'm not going to put it directly in here I'm actually going to point to another function called get posts and it's going to take in a category for now I'm just going to hard code sports and then the limit will say five all right so let's create get posts all right so get posts is going to take in category and limit and then we're going to use the service so reddit service dot get posts we're going to pass in the category and the limit and then it's an observable so we need to use dot subscribe and in here we'll pass along response and we're going to use an arrow function and then for now let's just console dot log the response okay so we'll save that and we should get a response down in the console hopefully yep there it is okay so we get this data children and then we should have our articles okay you'll see yeah we have the title right there okay so what we want to do with this response is we want to make it available want to make the posts available to our template all right so we're going to add them as a property so what's up here we'll add a property called items set it to any and let's see we're gonna just going to think for a second okay so we're going to say this dot items and we're going to set that to response dot data dot children okay and then we should have access to those within the template now because we set this dot items all right so the items should be available in reddit's dot HTML so let's go there and we're going to use some custom ionic directives here we want to list so let's say I n list and inside there we'll have an item alright now this I an item this is where we want to loop through the items so we're going to use an NG four okay and if you know angular 2 you know what an NG four is it's just a for loop we'll say what item of items all right and then in here let's just let's test it out we'll put an h2 and we can use some interpolation here so that we can use a variable I'm going to say item dot data dot title okay save that and there we go now we're getting titles all right so if we were to change this to ten we could get ten of them all right so we want the thumbnail in here so what we're going to do is use another ionic directive called iron thumbnail okay now we only want this if there's actually a thumbnail so we're going to use an NG if so we'll say if item dot data dot thumbnail then we want to display an image with the source and the source will be that ID item dot data dot thumbnail okay so then we have the title now I'm also I also want the thumbs up and the number of comments so under the h2 let's put paragraph and let's put I on - icon okay so this takes in a name we're going to use the thumbs up icon thumbs up and let's see to get that from the API we use item dot data dot score okay that'll give us the amount of thumbs up alright and then let's saw let's copy that oops okay and then this one here we're going to use the chat boxes icon and then we're going to use item dot data num underscore comments all right so let's take a look at that and let's see why is that not aligned oh we're going to want on the thumbnail we're going to add item - left alright now if you want to to learn more about oops to learn more about the elements that ionic offers let's see ionic - in list right here component documentation and you can see all the different stuff over here alerts and buttons and lists okay it's different kind of lists we're using this thumbnail list right here so you can see it actually gives you the code all right this is a really good resource for information on ionic so that looks good let's add some spacing between these two icon things here so I'm just going to put in and bsp twice all right so that looks good now the next thing we're going to want to do is have a button to link to the single reddit or the single post so let's go under the paragraph here and we're going to put a button we're going to give it a attribute of I in button clear and we want to align it to the right so item right alright and let's give this the text of view and then what we want to do here is add an event so it's going to have a click event and this is just standard angular 2 if you want an event you just put it in parenthesis and we're going to call a function called view item all right and we're going to pass along item dot data so everything to do with that single item in that loop and that iteration is going to be passed along to this function alright so let's go ahead and save that and then we'll go back to Reddit ts and we'll add view item now what we want to do is we want to switch pages so that's what this nav controller is for so we should be able to say actually first of all we wanted to take in the item and then we're going to say this dot nav controller dot push that's how we can change pages we want to go to details page which we haven't created yet so don't worry about that we will and we can send parameters along with it and we just want to send that item all right now the details page we're going to have to import once we create it so let's say import details page okay and that's going to be from details slash details so let's go ahead and create that inside pages we're going to create a new folder called details ok new file details dot TS details dot HTML and let's just copy what we have in about HTML okay and right here for now we'll just say details save that then we'll copy what we have in the about TS ok we'll change this to details my Moses my mouse batteries are running out details page all right so again we created a new page so we have to add it to app dot module ok that's going to be from pages details details all right we're going to add that here make sure you put a comma save that all right so if we click view now this is something that happened you'll see that this is kind of weird right now if I click that it actually takes us to the page now to get rid of that step in between that weird step which took me a while to figure out we need to get rid of the selector for details okay so for some reason that it causes it to do that so if we just get rid of that and let's reload and now if I click view it just takes us right to details okay all right so so far so good now remember we want to access the item that were that is being passed in so to do that we're going to use the nav params package which is part of ionic angular so right here we can add nav params alright and then down here let's add a property for the item should I say any all right and then what we'll do is just say this dot item equals actually you know what we have to inject that as a dependency right here so we'll say public grams and set that to nav per Am's okay and then right here will say params dot get and we want the item per am and that's it will now have access to that entire item so save that and then we'll go into the details HTML and for instance let's change this we should be able to say item dot title save and now if we click view you'll see that the title is now the actual title of that subreddit all right we have access to all the data for that item now I want to use a card for this page so if we look at the documentation and we go to cards let's look at see as I scroll down this will change to just cool I think we want that the image yep this right here image cards so I'm going to copy this and then we're going to paste that in here okay now let's change the image right here and we can actually get this with item dot preview dot images you could use item thumbnail but it's going to be very small and expanded so it's the resolution is going to look really crappy so some of the posts will have an image here so images we want the first one in the array and then we want dot source dot URL and then right here will be the title so put item dot title alright and then we'll get rid of this paragraph and what I want here is a list so we'll say I enlist okay we'll put I in let's say I an item and we're going to use an icon here so let's say I an icon and this is going to be the person icon and let's assign it to item left okay and let's say author and then we're going to use I and note and let's put item dot author okay that should give us the author so let's save that see what we get so far if we click this okay that one actually doesn't have an image alright so you can see we have the author here let's actually give this note I and right I mean item right all right so now you can see it's aligned over all right and if we want to get rid of this right here if it doesn't have an image we should be able to copy that and just give this an ng-if and then just paste that in there unhandled promise cannot read property what ng if it's kind of weird expected token oh maybe I don't need these huh that's still showing all right well I'm just going to keep that for now I don't want to slow the video down if you guys want to look into that you can if you don't like that icon right there and if you have a solution go ahead and post paste it in the comments so just take that out for now all right now under the author I want the score and the comments so let's copy this I an item ok we'll paste that in twice this one here is going to be the score so change this to item dot score and then for the icon we're going to give it thumbs up this one here will be chat boxes okay so say comments and change this to num underscore comments all right and then finally we just want to link to the actual reddit page so we're going to go under the list and we'll put an a tag but we want to format it as a button let's give it a target of blank so it opens in a new window and then the H ref okay now the href is going to be HTTP reddit.com slash and then we can insert double curly braces and then item dot permalink all right so let's save that and then okay that looks good view on reddit opens it in a new page cool let's add a block attribute to this as well that just makes it go all the way across all right good so we can now list all of our edits we can view this individual post so that's good now the next thing I want to do is I want to have a filter up here so that we can filter out the categories so to do that lets go to reddit's dot t ml and we're going to go above this iron list and we're going to create another iron list okay so let's see it's to iron item and we'll have a label say iron label and let's add the fixed attribute here and the label will say category and then we're going to have a select button so I in - select and let's say what we want to happen is when this changes we want to we want to function to emit so let's put in an event handler of iron change okay with it with standard angular - it would just be changed but with ionic its iron change alright and we'll say change category alright and we're going to add an NG model here okay we want to bind this to the category property and we also have to have a name with the same value alright so inside the Select we're going to have a bunch of options I'm just going to grab these and paste them in now you can use any subreddit any categories you want I'm just using these ones alright so let's go ahead and save that and now you see we have a select list all right it's not going to do anything yet because we need to create the change category function so let's go to Redditt TS and we'll go down here and say change category now we want to set category as a property here so let's say category NE and let's see let's actually add limit as well and then what we'll do is create a get defaults function okay so let's say get defaults and for now we're just going to set this dot category equal to sports and we'll set this dot limit equal to ten all right now this get defaults we want to run automatically in the constructor so we'll say this dot get defaults like that and then instead of passing hot the hard-coded values into this get post we're going to pass in this dot category and this dot limit alright and then when we change the category what we're going to do is just call this again okay and this time this doc category is now bound to this right here this ng-model so it'll change to whatever we select so let's change let's save that and you'll see it's automatically set to sports now if I change it to food and click OK it changes them all all right some reason news doesn't have any images but that's alright alright and it's not the app it's the API for some reason that category does it have images okay so that's working the filtering is working now what we want to do is the settings okay so for settings we're going to have it's going to be kind of similar to this so I'm going to copy what we have here in reddit CS and paste it in settings TS alright and then we'll just change that that settings alright it's going to have the items category and limit X I'm sorry we don't need the items and let's see we're bringing in the reddit service and we don't need get posts or view item or change category we do want to get defaults so let's go ahead and save that Oh actually we don't want the ng on and Eddie that we don't need that so let's save that alright so now we need to do the template right now it's just this we need to have our forum where we update the limit in the category so let's go to settings HTML and I'm going to just paste this in and go over it so we have a form with a submit function of set defaults and then we have a field here this is just like we have on the homepage we have the ng model category and then the different categories then we have another select list for limit ng model is limit and our limit numbers and then just a button to save changes all right so let's save that and now if we click settings you can see this is already set to sports and ten that's because we have the get defaults right here now what we want to happen when we submit this form is we want to take the values and add them to local storage so let's create our set defaults and we're going to say local storage dot set item and we want to set the category and we just want to set it to this stock category okay we're going to want to do the same thing with the limit so we'll save that and say limit set that to this dot limit all right so that's going to be whatever it is in the form that we submit okay and then what we want to do excuse me is just navigate back to the reddit's page so we're going to say this dot nav controller dot push and we want to go to Redditt page which we have to import and we don't need the details page so we'll just replace that alright and then we just want to change the get default here and in the reddit's so we need to check local storage if there's something there we're going to set it to that instead of this so let's say if I'm going to say if local storage dot get item category is not equal to null so if it is set then we're going to set this stock category equal to local storage get item category okay and then we'll have an else else then we'll just use this alright and we're going to do the same thing with limit copy that so this will be limit okay set that limit set this limit and we'll set it to ten by default all right so that's our new get defaults so we also want this same thing in the reddit's component so let's just copy that okay we'll save this alright we're going to go to reddit's dot t-- s and we're just going to replace that and save and it should be at sport still and ten because we haven't changed it now let's go to settings and let's change this to 5 click OK and then save all right now you can see it's updated to 5 if we go and we set to let's say food click OK save now we have our food posts and if we reload it's still food all right so our application is essentially done the about page we can just go to about HTML and I'm just going to throw this in here just some date just some text all right so that's it that is our application now if you want to run this in the emulator we're going to have to go to our command line and you're going to have to add the platform so if you want it to be an iOS app you need to do I think it's no it's Cordova platform ad and you could do iOS but we're going to do Android all right so that took about two minutes or so now we want to test it in Android in the emulator so let's say ionic run Android and that might take a couple minutes to startup all right so it should be starting up all right so looks to be working let's go ahead and try to change the category hope I can't stand house whole this thing is so safe food okay and there we go so that change good so settings let's say we want just five click OK and we'll save it and now we're only getting five good so settings are working check the about page that looks good alright so we now have our application now if you want to build the apk file and try to get that installed on your physical device you can do ionic build Android and let's open up the folder so let's see projects I an read it it should build out actually it should tell us the directory that it builds it in when it's done okay so there's the the directory so it should be in platforms Android build outputs apk and there it is so you can take this and if you google how to install an apk file on a physical Android should it should tell you how to do that alright so that's going to be it for this video hopefully you guys enjoyed it if you did please subscribe please leave a like if you didn't like it leave a dislike whatever you can do and this is based on a couple of the projects in my angular 2 projects 12 projects course so you probably want to check that out if this interests you is kind of stuff alright so that's it thanks for watching and I will see you next time

Channel: Traversy Media

Views: 319,569

Keywords: ionic 2, ionic2, ionic, ionic angular

Id: ilM8YorL_jI

Length: 57min 44sec (3464 seconds)

Published: Sat Dec 10 2016