Complete Mobile Application Development Project Based Workshop Using IONIC Framework - Part 1

[Music] everybody this is a ways back with another video on the channel today we are going to learn ionic form by creating this amazing application called expense logger it's a full fledged practical ionic project based tutorial say you want to build a mobile application and you don't know where to start this project base tutorial will teach you everything that you need to know about building a project from scratch so we're gonna start by prototyping our application in Adobe XD so let me just bring up another slide so the application would be open source will be available on my github so anybody wants to contribute and you know improve the application you're welcome to do that so here's an idea we got an idea we are going to plan that idea prototype slash design and then we are going to develop that application and it will also show you how you can deploy that application to the Google Play Store so the tools we're gonna be using our Adobe XD ionic framework with car door and Python as an IDE if you don't have a patch um that's fine you can use obvious code or whatever IDE that you're comfortable with ok so this is a full-fledged project based tutorial I'm gonna put a lot of time to it and it's gonna be a really a tutorial for people who really don't know way to start how do you grab that idea put it on a paper or build a prototyping planet and then start coding if you're an idea and you just start coding that doesn't work you are not likely to complete your project so you need to make sure that you know what you are building for that we are going to prototype our application using Adobe XD once our prototype is ready then we are going to create a new project and then start building this cool application now another thing if you liked this video please give this video a thumbs up and subscribe to the channel also if you would like to help this channel by donating there's a PayPal link in a description two below please donate it will help me to continue putting out this kind of content for you guys okay so let's get started by prototyping application using Adobe XD so when you have an idea the first thing you should be doing is a writing down some minimum required functionality that you think you're going to provide to your users for the expense logger as the name suggests i would like to allow users to add their daily expenses we want to provide user of functionality they should be able to filter out some expenses by amount by category we want a user to be able to delete expenses eight we got three basic functionalities we need to give user ability to add expenses filtering and delete expenses so we got a minimum required functionality written down in a notes application so next tool whatwhat would like to show you is called a Trello a travel is a great free tool that you can use to you know write down your tasks you can write down your specs and you can write down you know a smaller task that you want to do so it will help you to track your projects I'm just gonna create a new board alarm or limited expense logger and that would be a private board now once that's created I'm gonna change the background to a simple color of like this one okay empty expenses longer board in trouble I'm going to use a Kanban so we create three list planning already for development in progress and develop so it's like a basic Kanban board if I'm gonna start thinking to add any functionality I will write down that in planning list then once that's ready for development we'll move that into ready for development then when we start working on it we will move that into progress once we finished with that task we'll move that to develop usually in the software house you will see another one where you say in production or pull requests but we should be fine now this is where you are learning how you can start writing down specs managing your project creating tasks and tracking them it's like a full process of developing and mobile application also we have one task in plan glaze which says create / tie for expense logger click on that task and here I can write the descriptions so I'll be using so we're gonna be using Adobe XD for prototyping it's a feature from Adobe we are going to create homepage and these are some of the pages that will list down we might not need those but this is the whole process so whatever you can think of just list it down so right now we have a login signup but I'm not planning to actually show you how you can use a tante occasion system that will come in the next video or some other time I will show you how to do it so I'm gonna save this so here we got the task that we can come back and have a look start with creating a prototype for our pages so I'm going to use a software called Adobe XD use Adobe XE to create a prototype quickly and if you want to learn Adobe XD then I would highly recommend go to my channel and search for Adobe XD tutorial for pro time web and mobile apps I've done a pretty much complete tutorial for Adobe XD you can have a look at this video and learn that so I'm not gonna go and teach uwx in this video but you know we're gonna be using this so I'm just gonna quickly create some pages so here we go one page I'm going to copy paste paste paste so that's we got four pages here organize these pages in something like this so we got sign-up page we got a dashboard page here and here we're gonna do some other pages they might be required so here I'm gonna change this to login page and this would be a signup page and that's your - bored let me make another copy and here we are just going to use this one for our menus so to menu page list okay and now we're gonna go put it in the middle so a person can log in sign up it will go to the dashboard page and then here we have some other pages like add expense okay let me just put it here and that page can be let me go back and look at our task so we need a setting page Alex when paged on login this one done okay that's all good so this one would be setting page okay so you can see we got like four pages now let me quickly go and design this one click on a dis button and that will show me my assets available in Adobe XD you use this input field for a username copy paste that one and then also I need a button so let's just bring the button in copy paste this button and let's just make a size a little bit smaller and we're gonna put this button right here just make like this okay also I would like to make this input size a bit bigger as well it's good take this button here and maybe I can just leave it with this here as well all right that looks good and then I'll need a text here and I will just say I forgot password okay and let's just put it maybe we can click on this I think this should be good enough and for that I would like to change the color first of all and the color should be blueish just double-click on that selected click on this field and I would like to have something like this color maybe I don't know we can on a colored letter but I just leave it like that okay and we got this human icon here let's just put it somewhere here that should be all right also I'm just gonna select everything and try to move this a little bit down so I could be in the middle hope everything was in the middle so I'd like to try something out here not not this one okay I probably have to manually bring it down it's been a while since I used wxe also let's just decrease the size of that is to let's just say 12 should be fine I'm gonna have to double click on it and select this and then do a size here nope doesn't work so that's the text actually not that one so here we got this forgot password okay I'm gonna zoom out and let's just quickly create a page I would like to you know create a page there for a forgot password so let me copy this and bring it like here okay I'm gonna get rid of that page as well so this is going to be for God password page and in this I need an email and a password and that will basically send a code for them and then this will change and ask for the code and let them do their password again that's cool so let's just bring up this input field almost here and I like to have a button okay and that's it and there's gonna be another forum after the email is successfully sent then it's gonna be another forum here which basically asked them to put the content we'll worry about that later okay so let me just zoom into our login page a bit and here I would like to change this to let's just say email and that's your password change the text here all say plug in and that would say sign up all right that's all good I'm going to store this document side and you know miss it's all just to experienced logger I'll save that in the documents okay and now we need a sign-up page so I'm just gonna copy pretty much everything from here and I'm gonna paste that here as well that will be email a password so I'm just going to bring these three elements down that should be let's just bring this one right above here somewhere and then we need some fields you all right that looks all right I'm going to change this text to same name name this one and that would be for example ah I don't know maybe you can say let's just leave that email and then we're gonna have to ask them to do password and this one is going to be confirm password okay and this time this login button is going to say sign up because it's bigger and this one is going to say login okay and that should be it we got this form done let me just move it a little bit up that attacks 2-4 page so we know that we are in dashboard page once we get there let me go to the design section and I will just click on this text and say this is the dashboard page now let's add a linking for this page so I'm gonna go to prototype section and first of all what we need to do is linking for our login page so if I click on the login it should take me to the dashboard page if I click on a sign up it should take you to the sign up page and forget password to take me to the forget password page now let's finish up with the signup page if I click on the login to take me back to the login and if the signup is successful we should go to the signup page forget password should take me to you know forget password page and here let's just change this text okay let's save the file and now let's visualize what we have done so far so I'm gonna click on this prototype and then here you see the home button which means that this is the main page that it's gonna open click on this play button I can click on the sign up page it will taking the sign up page we're gonna forget password I take to the front get password reset should take us to the login page if I click on login it should take me to the dashboard page so you can see that we have actually prototype our main entry points for more expense local application now we're gonna talk about a dashboard page now let's just zoom in a bit and this is going to be most complicated page that we will need to worry about so first of all let's design the top menu to use this rectangle tool and just draw something like this okay and then I'm going to use one of the button which is going to be a hamburger button couldn't find that hamburger button here so I'm just gonna create my own at the bottom there I've heard that as a component as well in Adobe XT which looking good now and let me just finish the prototype for that all right so in the - for page I'm gonna have to think about it a lot but initially what we basically need is something to show the daily expenses that what I would have done today is this rectangle and I like to just add this kind of a box here and then we can add a text saying today's total and I can show like you know just the random value here okay and we can align this together I guess by using this tool and that would be your total for today and also might be one won't be adding some some date and stuff here as well you last one because I'm gonna create tabs UI for this application so I'm just gonna copy this bit and then I'm going to paste that right at the bottom I need to increase the size of that and then we are going to write some text here feature I'm going to expand the functionality of this application to another level for that I'm gonna be using tabs but for now just for the sake of this tutorial I'm just going to write some text here for example I can say dashboard and I'm just gonna copy this dashboard and paste it into that section copy paste copy paste okay the last one can be account maybe settings I don't know I mean at this stage we don't know what it's gonna take some images activity and then this can be let's just say transaction and that can be a dashboard okay we're gonna have another button let's just say a circular button here for example and I'm just going to write a text here for example just the plus this plus will basically be used to add expenses to your application so that kind of UI that's gonna stick to every page of our application here we will have some buttons to filter our content we can talk it later about it another thing that I would like to add here would be a today's a day so let's just add that right now so today date I'm going to change the text and that can be done from here so let me just select this and that would be just eight okay that's gonna come up here and a rotten top we can have a title of the page so that would be you know - okay stage we have a basic prototype of a dashboard page we don't know the actual page how it's gonna look like but we have something that we can follow along when we start coding now when you start your project you basically start with the minimum of Viable Product you cannot have like a hundred percent functionality of next five years that you are expecting to be there so we start very basic now we are going to you know add stuff to settings page as well so for that I'm going to copy in this bit and I'm going to paste that here and then I will use one of these button to align that so let's just put it all the way down okay I don't need this button here that would just be on the dashboard or transaction page in the settings page we need these two things and there would be basically coming here another dashboard let's put on a corner and that's our settings for now let me just rename the text and what we need in this page we don't know yet so just leave that for now let's go to add expense page this is one of the model that we're gonna be seeing so for dad I will copy this speed and paste it there and we can simply add expense title for this page we're gonna need a couple of forms here so I'm gonna copy forms from let's just say a login page so let's just copy this to paste them here and let's just move them right here okay so here we can have let's just say amount for the right and then we can select a category so here we should have something select here also we need expense type so I'm going to paste that bit here and that would be a select box oh and then also we have a description and that's gonna be a little bit long so we can say description and then on the keyboard we might have some options like add image or you know add date for that so by default it's gonna be today's date but we can have like a date and time picker which we will have to select what day this expense was maybe you want to add expense to the previous state so I'm going to pace another field here and I will just name it select date okay and default is today's date then we have a button I'm just gonna copy a button from my asset there we go and you can say add expense okay that's our basic prototype for add expense page what else we have we got the settings covered we got - but covered and we got some menu button so many is basically will have a rectangle there so let me just zoom in a bit and let's create a menu here okay and here we can add some boxes like this copy and paste and then we have a menu copy paste copy/paste okay so here we can start writing text whatever the menu will be quiet and that will target that okay so I'm going to click on prototype and then click on this button and that should take you to this page okay yep just one thing that I just noticed if you want to cancel things out then we can have a cross button here so I'm just going to draw a circle and I'm going to put it here and that circle will take a text like X which means we don't want to add this expense we just want to cancel it out let me just make it a little bit bigger so it's it's aligned properly okay maybe a little bit bigger here as well all right that looks alright to me for now and we're gonna go to prototype I'm gonna select this and that should take me back to dashboard page okay and if expense is successful we should go back to a dashboard page as well or any activity here we are going to copy let me just select this zoom in and copy days and I'm gonna paste that here and that will have the same you know connection to the dashboard page okay that's looking good now and I'm going to give it a try in a preview so here we got the login page for example we log in we added expense it goes here we add stuff here click on cross and that's it okay so by looking at this prototype we kinda have a basic understanding of how our initial application is going to look like so we know it's gonna have a forget password login page setting page dashboard settings in add expense page so we know a little bit about application obviously it doesn't take 25 minutes to create a prototype of an application which might have a lot more functionality project is open source and source code will be available on my github so I would highly recommend it go to the description of this video click on the link for the repository and try to get involved in this project my goal is to keep working on this project and build a full fledge of free application which everybody can use and you know track their expenses monthly daily yes so we're gonna be creating this as an open source project we realize that we need to add more functionality this these applications we will come to this prototype file of Adobe XD we add a prototype first we analyze if this is you know achievable or is the good feature we add that here and then we start coding okay so at this stage this is the minimum prototype we will have a lot more functionalities down the road for this application thing before we go and setup only for project I would HIGHLY encourage anybody who thinks that this video has benefited them please consider donating it's gonna help me to keep creating this kind of content on this channel and I've got a lot more any tutorials or overall program to trolls on my channel so if you guys can help me out that would be great and now it's time for us to set up our initial project so if you're on a Mac open up a terminal if you're on a Windows open command prompt and we're gonna have to install few things first of all when we check you to the ioniq documentation we go to Docs and we are going to install this ionic CLI okay now in my case I have already installed so I will check the version of ionic which is four point four point one five that's all good and then I can use this command to start a new project so it says ionic start my app tabs so my app is the name of the project tabs is like a template that it's basically it's a prebuilt code that we can utilize so here we have like a blank tabs and side menu and in terms of our prototype we have our tab kind of UI so it's better to start with something that we already have configured for us then it says a run your application with the CD my app and then ionic serve let's go to terminal and I'm gonna go to my development folder and here I would like to create a new project so the ionic start and I'll just say expense logger and use tabs now to things it's gonna ask you a framework that you're gonna be using to program your application so we have two choices in ionic CLI angular versus react so if you're a react developer then you can choose react if your angular developer then you can choose angular my preference is angular and angular is what an ik is initially were built on so I'm gonna choose angular and now it's going to install some dependency for us and get our project set up in terms of your IDE so I've got this Visual Studio code that you can download and then follow along well this has a support of typescript I'll skip is a programming language that is what we're gonna use for this project also this website will be very helpful so there are some prerequisite for you to know before you can follow along this project first thing you need to know basic level of angular project should be created now and I would like to look at few things so I'm gonna use CD expense logger now we're going to use cat command and I'm gonna read package dot JSON file here we can see the angular version so right now ionic is using angular version 8.1 point 2 which is okay we don't need to upgrade our angular version to 9 now I've done a video how you can upgrade your ionic application which is running on old angular version or all ionic watch they probably a card that I pasted right somewhere here have a look at that if you really want to upgrade your application or you already have one okay in this case I'm going to use ionic serve which is the canal to run the application in the browser we will be initially using Chrome browser to test our application while we build and down the road then we add some native functionality like handling camera and stuff then we will jump to using emulators or basically a real devices iPhone and Android okay now here is the full view of our tabs template I'm gonna press f12 it's going to open up a developer tools and here I can see the pixel - I kind of UI so I've got two tabs here so we got tab 1 tab 2 and tab 3 as you can see there's a lot of things already set up for us but we still need to you know configure these tabs according to our requirement ok so at this stage we got our project running what's the next step and we just stop the server and the next step is to open up a project in term in IDE so you can use a real studio code so I have a visual studio code installed on the Mac so JetBrains so here we got a jet planes if you just want to do a front-end development then you can choose a web strom which is their cheapest you know IDE that you can use for webstore more overall JavaScript entire script I am a back-end developer as well mainly Python so I use Python which has support for pythons if you have strong then you should be good to go or get a patch on so they're not sponsoring this video it's just me liking this these IDs so much that I want to share with you that they're great ok so what I'm gonna do I'm going to open a Python I've got a professional version so there is a free version and a professional version so the difference between free and professional is that professional support JavaScript frameworks and you know free one will support only Python ok so I've got this I'm just gonna move that to the desktop 3 I'm going to create actually not open a new project let's go to dev and I've got this project here and I'm gonna open it up one summer project is open then we gonna need one more thing I would like to actually open our terminal which is built into Python I'm gonna use ionic serve command and just verify that we got our server running from Python and everything is all good and setup so here we got the project which we're gonna start configuring initially add some pages so yeah now we're gonna open up at relic and create a task for us and they come back and finish that task first let's see if our application is running through terminal of Python ok so it says your application running on localhost colon 80 100 s when I open up a browser let's just do a refresh and our server is running so let's open a patrol oh and here is our board so we got our task proto try for expensed logger we created home page login to sign up and spin so that's all good I'm gonna put that into in progress which means we probably come and modify this thing again and again and we're gonna start by creating some of the tasks so we have created a project I should have created this task so create a project that's all good that's developed or we can say I'm gonna change that to production ok so project is done I'm going to go to back to planning and here we can say create login page tasks then we have create a sign-up page create for god password page and then we will have some ad routing to modules okay then we can say add required configuration okay and then we are going to write a kind of story now and then we can say user should be able to sign up to the application a user should be able to log into the application okay and also we can say user should be able to navigate to the pages using tabs okay so I create a couple more tasks here recording was messed up so that's why I couldn't read but it's just like two tasks here so I've got one task say it's fixed a routing four tabs project and also we have I create empty pages for all the required tasks so move that fixed routing four tabs project into in progress which I'm gonna be working on so let's take you to my IDE and setup so here I've got a prunning on the right side and on the left side I've got an ID with the code this is my usual setup when I'm working with the ioniq project so 1/4 of my app and then 3/4 of my IDE that I'm gonna be you know using now I hope you guys can see the code the font is big enough and also you know the UI for IDs should be fine this video is in 4k so feel free to increase the resolution in youtube setting ok so inside the project hub we can see it's mainly an angular project with the source follow up follow assets environment now this video is not teaching you angular I'm expecting you to know all this already what is the structure of angular project and also some basic angular knowledge should be should be there like routing and some so here if I open up this app folder I've got this app module in app running module which is targeting to this tabs page module which is this one and then we have three tabs here so for the tabs I would like to do some modification the tabs a module and here we have a tab writing module as well so here you can see we got the routing for these three tabs start the server by typing ionic serve on terminal and then I would like to remove some of the code here because we don't want tab one tab to in tab three the two options here once we can actually rename these or we can create our own and I would prefer creating my own components or modules that would you know be cleaner so I know what I wrote first of all let's go and add a fool to tab here so I'm going to open tabs dot HTML file and here's a code for that I'm going to copy this tab 3 and paste it here let's save the file and once you save the file it will see the fourth tab appearing okay we got four tabs now let's change the text for these so the first one is supposed to be dashboard second one supposed to be I thought that would be activity I'm gonna have to look at our prototype so here is an activity and setting the transaction let's just leave that activity and then I'm gonna change that to sharing and then settings or maybe I could just use account okay that's we're not folding your prototype but that was just you know see what's going on so here I'm gonna change this to budget okay let's save the file and we can see the text is changed on our tabs and you can also change the icon so let me take you to the browser he's a website for icons so go to I cons calm and here you can see all the icons available that can be used in your ionic project without importing any third-party library so here we have something like a dashboard activity you want to use a dash nothing here maybe menu maybe this one for now and it says many or clients I'm just gonna copy this bit let's go back and here's the icon for that so I'll just use menu outline that save this and see if the icons changed okay we're not seeing any icons it says localhost 8004 for not found so this icon basically is not there for some reason we're gonna have to you know stop the server restart again and that should be there but for now let's just undo we're not gonna worry about any icons for now okay now it's time for us to create a routing but first we are going to create some folder structure for our application and I'm going to use a folder structure which I used in my other project which basically is like five folders that I will be creating so let's just do a directory first of all the folder web pages I'm gonna create another folder for services and another folder not the Python module but another folder for let's just say model you when in the folder for details and another folder for what I'm missing okay pages model services a util folder and also we need interfaces okay and for now I think that'sthat's all what we need we got okay yep another folder guys for all your constants okay so we created a folder structure now and it's time for us to create some components I'm gonna stop the server on a terminal okay there it is ionic G command and I'm going to generate a module okay so there's two ways you could use the lazy loaded module or just straight-up component it's up to you what you want to do so I would prefer to create a module which will help us you know lazy loaded stuff so module and I would like to go to pages slash and that would be a dashboard module okay and I'm gonna use this - board - - routing enter and we should be able to see another folder getting generated there in the pages okay let me just stop it and restart again okay nothing is there for now project files you got a source app kgs nothing in there so here we see we created AB /pages yep that's correct and then - and then - and then - and as for routing as well for some reason it took a bit of time to actually show up so we got this dashboard module I was supposed to have that outside so I'm just gonna move that outside and delete this dashboard as well so we got a dashboard module now it's time for us to create a component so I'm gonna just remove this routing and remove this bit and then setup module I'm going to create component all right there you go we got the module and then we got the component as well so in terms of routing what I would like to do here I would just create for example a routing object within this module so here we got the routing which has this route we don't really need to do that because we can just create that inside this dashboard module so I'm just gonna get rid of that file too late anyway I'm gonna get rid of this dashboard module that's all good and then we have this routing module but four children and then here we can add around right here so we got a part and the part would be for example just clean and then we have a component which would be dashboard component okay and here we got an error basically it's not an error changes you should be able to use single codes so I'm just going to change that to single code when I open up the Const context save it okay so now we got the dashboard now instead of targeting this you know tab one I'm gonna go to tabs rolling module and here we like to say dashboard and for the children I am going to import first of all he's a pot so I'm gonna go to pages okay that's not gonna go there so we're dot dot slash pages / - board dot module okay and then here I'll say m dot dashboard module and let's see what happens so here we got the problem here it says can it find the part it should be able to find the part dashboard / - board so dashboard / - board not module so this is the file too many dashboard modules so you can see when you're developing what sort of problems that you go through I'm going to save the file and here we have a dashboard module agility now I'm gonna go to terminal and I'm gonna create another module and I don't want the routing for that okay and I'm gonna use this as settings okay now we're gonna need a component for that as well so that would be component settings OOP no that's like pages settings we got a settings here but actually created another setting component somewhere okay but I stopped it hopefully it didn't finish so that would be settings component I should come up here let's just generate another module and we're gonna name this account or maybe what is the prototype says here's our application we need a budget module Paget module will also need a component for budget okay so we've got three things here and that should be fine for now and like we fixed this tab 2 + tab 3 / penny so I'm going to remove this part dot dot slash pages slash and that will take us to settings / setting module and then here we're gonna talk about importing settings module that's all good now and then here we're gonna do dot dot pages slash budget slash budget module and now we're gonna use a budget module to import okay and I'm going to copy this bit and paste it here we need an activity module as well so for that let's go back to terminal it should generate this activity module and then we got create a activity component as well and then in the budget module we're gonna change this to activity / activity module and that would be Activity module input here so this is like how you do lazy loading for your angular routing okay so we got a dashboard here and I'm gonna change this to settings and this tower will take us to budget and the fourth one we can say it's gonna be in activity because it is an activity now the part redirect we can say go to dashboard mate and then for the main part we can say it helps dashboard as well okay so at this case at this stage we have configured the pages whatever the basic pages that we need and then also we are going to create another module which is gonna be a lot Ponta Gatien module so I'm going to create a module not in pages but outside so we can say odd slash login and then I'm gonna create just a module there so that would be a module add folder actually which will have this or login module okay we got this odd here and I've got this login module okay now I'm gonna create signup module and then forgot password module eh all right so we got three modules we worry about this later but for now that's about it okay so if I go to app running module it's directly taking us to tabs module which is okay for now so I'm going to run the application and see if it's still working and I'm expecting not to see this tab 1 instead I'm expecting to see just an empty page without anything in it because it should be taking us to this like whole dashboard page okay and it's a stash board work and let me close this tab and then refresh this bit and see if there's notice it says cannot match any of our all tab slash tab there's something wrong here for our tabs routing module I think I haven't saved this yet so if there is any tab let's search for it it says tap slash one okay there's nothing says tab slash one here so that should not be a problem okay what is the error let's just zoom in a bit so it says uncoil engi module or module has not been imported into your module okay that's correct so what are we supposed to do we go to tabs module and here we're gonna have to import those module so we got a 4 module tab the routing module I'm going to import dashboard module okay we need the settings module we also need activity module and also we need budget module it should be a few more hours so before we start application I would like to fix all of them so here we got an error saying typescript you know needs a single code so for that I'm gonna go to patch I'm setting just quickly fix that and I'll just type single use the typescript and here we should be able to change this to a single code so it will automatically import with the single codes its apply and okay now we're gonna go to every single module here and we are going to fix the importing part of it so let's go to the dashboard module and I'm going to import that into declaration and that should be it and that's what has this rarely done as well we're gonna go to settings module and here we're gonna add this settings component and also we're gonna add a routing module dot for children we're gonna add a route which is going to take a part let's just do an empty part and that component is going to be settings component we need the comma here let me stop the server for now we don't need the server running and we're gonna go to budget similarly we're gonna add this budget can point and then for the rally we use a routing module dot for children and add a part then it's gonna be an empty part and then component is going to take budget component that's not fit not forget the comma here and then it's just taking a break point I don't know why I'm just gonna close that tab because I don't want that you know to blow up my computer it I'm already using 91% of RAM okay let's continue with activity and we're gonna add this activity component this is the one and for the rally we're going to use rolling rather module dot for children we add a part two empty and then component is going to be activity component okay so in this case we pretty much fixed with it so here it says missing white space not an error so let's test what we have done so far and we try to add all the routing in dependencies for all of these pages and I'm gonna go to terminal and I'm gonna start an application by typing ionic server once that's done then we should be able to see the application running in a browser without any errors and we should be able to remove this tab one tab to in tab 3 and follow this structure which we just quitted okay so we got this dashboard works that's good we got the activity we're getting there it's a segmented tab / - well we forgot to change something here so in the tabs we need to match the routing so that should take us to activity and then for this we should be able to go - I think that's the budget so type a budget here and for this we're gonna go to settings let's save the file and we should see the app is reloading automatically and I click on activity that goes to activity works budget that goes to budget work and amount that goes to settings work now here we're saying account but I think we should keep that as account not the sayings and I'm gonna show you the how cool the Python is in terms of refactoring okay so I'm going to go and rename this bit and saying account refactor it and it is account now and I'm gonna stop the server because it's been renamed and within days I'm going to change pretty much everything in terms of their name so account let's just change this as well okay it says renaming the file yes I'm renaming the file and it's asking me hey here's a problem so I'm just gonna do a redo refactor and it's going to do a refactor for me and hopefully that would not cause any problem so I'll change this to account as well so module has been renamed we're gonna go to accounts module and now we have this this is the kind of module and I wanna make sure that the name for that is an account so here we have account component that's been a renamed like it is how smart is this that's amazing and we have the class name change as well to account the module and account components been changed to account component as well so we didn't have to go inside the file and change it we just change the file name and it actually renamed everything so I'm going to open up a terminal and type unique server and now we should be able to go to account work to see that account work I'm gonna open up this account HTML file and we're gonna change this to account now I could do the renaming with these tabs as well but I prefer not to do that I wanna set up things by myself and know what we've done so here if I click on account it should say account work so at this stage we have you know set up our tabs we also set up the routing we create our folder structure like the tabs will targeted pages and then we have authentication which we will do after this video or in this third video fourth video of this whole project now this is an open source project I want you to contribute go to github : D Sub Focus send me pull requests whatever the changes you do but in this video we're gonna target just this dashboard page and then adding in expenses okay so let's get started by removing some of the tabs here I'm just going to remove them stop the server and I'm going to say an excerpt on a terminal and I'm expecting everything to work properly I'd say everything now after that once the project is running we are going to set up a github repository for that so I'm just waiting for this to finish okay let's refresh Paige and things are working your dashboard - bored doesn't take you to the dashboard the problem says cannot imagine the route tab slash tab 1 so this page is something you know is tab slash tab 1 so I'm going to globally search for that bit where is that in my code it's not in my code it's probably the you know settings page that it was taking me I'm gonna change this to tabs open up the developer tools go to activity budget and then dashboard so basically this thing is taking me to a dashboard problem okay so we're gonna go to tabs page and here we see it's taking us to tabs 1 which is wrong so I'm gonna change this to dashboard I forgot that previously and now this thing should take us the dashboard work activity work budget work okay so in this case when you fix pretty much everything the routing in the folder structure everything is all good now we're gonna start implementing some UI for a dashboard and then we follow along with what you were supposed to do through Trello so in trouble we can say fixed ready for tabs that's been developed would move that to develop and then we say create empty pages for all required pages that's been developed as well and then we should have no task fix routing for all the tabs okay that's in progress and that's done users should be able to navigate to the pages using tabs that was in progress and that's done as well now you should be able to log in sign up add required configuration we did add configuration for routing and pages add a random module so we did a pretty much all pages on module and that's all good as well and then we are going to create a new task which will say create a UI for dashboard page and then create a UI for add expense page and then we can say create UI for settings page okay so at this stage we don't have much data so sometimes you need to have some data to be able to show the UI for activity or budget so we're gonna focus purely in this video on dashboard which will have like a list of expenses that we can show here and also we can store those expenses in a local storage and also we have some filtering options here no trouble and I'm going to first of all start the task create UI for a dashboards ready for development and we'll put that into in progress now we're gonna go to a dashboard module and open this dashboard so the first thing we need to do is we're gonna have some initial code that will basically have this iron content or header and that can come from ionic website so I'm gonna open up a new browser let's move it there and we're gonna make it stream size and I'm going to go to ionic framework ducks everything I will show you on the screen what I do to figure out when I'm stuck or when I you know have to do something commentation I would like to look at this content and also header so I'm going to type command F or ctrl F on the windows of the iron header and that's a toolbar section it's already there so if you take a look at a toolbar so that's what you get in a footer okay so I'm going to actually use this ion header which is here so that's the one so inside the header we can add a toolbar there so I'm going to copy this whole bit and I'm gonna go to dashboard module and paste it here and we should be able to see that a toolbar appearing right on the top so we got this navigation bar which is this one and there's another one which is like another toolbar so I'm just gonna get rid of that save the file regard this navigation bar and start is gonna be Center and we should be able to see that navigation bar okay that's all good we got an iron button which says you know here's a Start Center I'm going to just get rid of this one and also get rid of this as well and the title should be slot Center now let's see nope doesn't work with the center so that's fine as you can see as a developer you make mistakes so I'm gonna change this as dashboard now the text should be a dashboard there okay so we got the header documentation and let's see what we can do so we can have a button there we have our iron back button which is like a component already you know done we got this on Content area which is like you know on how to collapse when there's a Content area we don't want to do that but I'll just just forget that for now this thing is is it's quite a different that what we're trying to do let's go back here and I'm going to get rid of this a bit as well and we just have this is the content an area for dashboard let's save the file and we should be able to see that inside at this speed okay so we got the content area done we got that dashboard page done as well so if we go to activity nope doesn't work that way so why not we just go and add this bit to all of our HTML for budget for activity for an account so let's save by typing here budget and it says content area for budget and we should not have this error the error is because we have not imported this ionic module so we're gonna go here and I'm going to use this ionic module import and the error should go away and PyCharm is smart enough and it's just helping me that hey do you want to import that I just hover over it says directive missing blah blah blah import ionic module I'll click on that and we'll import that for me so this one is activity and then I'm gonna change the world from dashboard to activity here as well let's save this and then we got this account to finish let's paste it here when I change this to account and then this would be account and there's a problem and when it's look at its show content and it says import on ik module that's all good let's verify what we've done is alright so dashboard is their activities their budget is there an account is there so they pretty much configure all these for that's iron header with the toolbar there so let's go to the dashboard and inside this content area first of all we're gonna add a card a card which we have seen in our prototype so if I go to dashboard here is a card which shows the total amount or today's date as well so for that we're gonna try going to any documentation and I'm gonna find ion - card there if I can find one so there's a card and it says cards or standard piece of UI that serves as entry point to more detailed information so here's a card I'm going to copy let's just say this bit or maybe we can copy this bit this this looks better mmm now that's a huge car I don't want that so I'm just gonna use this one and let's just paste up card here let's save it and we see the changes in the dashboard which will have really soon or actually I pasted that into activities I'm just going to cut this bit go to dashboard and then paste that here let's save it let's filter we should be able to see the car there let's add some text as a title for today's total if I take you to the prototype here we needed to this total and then the amount in today's date so for that I'm going to get rid of this I on item and I'm going to just remove this bit as well now in terms of hard if I take you to the documentation and the documentation will tell us that what this card can provide us so here we have an iron card content I had a sub title and the title okay so we can use this iron card a header and within this I can use this title I can say today's total and we can just do five hundred dollars for now let's save the file and you should be able to see something like a really nice title there you go we got today's total 500 now I might be able to use this slot as Center maybe let's try it okay now we can't use that slot Center okay let's go back to the documentation now we got this title there which is it has a custom property of color that's about it header we got this iron card and header which is nice your sub header okay that's all good but what I would like to do is to you know just probably align this in the center or maybe just not use the card down the road but this is less like a basic UI that we are creating what if I just comment this header let's see what we get now okay now not really nice we don't have the header so I'm just gonna leave that there a label for a date so I'm just gonna type label and one of the today's date is gonna be it's gonna show up here I own a title that text is not in centers so I want to use this ionic class on text a center which will make our title in the center of our card now that's looking good now instead of showing today's total I would like to just say total for now okay and also we might want to increase the size later but for now let's just leave that there okay now we got a date there now I would like to create a footer here so this is a an footer which basically will help us to create some buttons in the footer off of this card now I'm going to start by adding a row you and then we're gonna have our column and I'm going to give a size of three so we know that ionic grid is twelve column grid so we can have like an column three I'm gonna copy of these four times save the file and we should be able to see these columns here but we won't have anything yet so inside this I would like to create an button and I'll say testing always just do a test okay and let's just get rid of base bait and then just one two three I will format it and now we got three buttons now it's a matter of aligning them center go to align and center first of all I would like to add an expand property and I will say full for these buttons I'm just gonna copy this bit and paste it here also I'm gonna paste that for this button now we got the buttons with full expansion and you can see here and now they're automatically aligned so if I just inspect this element and you can see they automatically align properly another property that I would like to give to these button would be a fill property and I would like to give it a clear so let's see how it looks like so here's a clear button I can click on it and we'll tap like this or I can have this solid and that will look like this okay or we can have something like outline this is much nicer yeah I'll look like this okay and also the grid has changed to photo some sponsor a photo here okay and now let's just do this outline for everybody okay so it looks like a really weird kind of button but let's just leave them here for now right here we're gonna do some functionality so this app will have something like a date picker which you can just give them a filter Sol just do a date and this one will be today and then it can have a select or maybe category and then we have a mount okay let's have a look at those buttons now so we got a mount category today in the date so I would like to make this a date and let's just have this as today okay so now we got our app looking okay but still up just not sure if I really want to have that outline because that didn't look really I like a button so just to clear just quickly change them too okay all right we got the buttons down add some color for this total 500 so here we got a title this is a header so I would like to give a color property if this has a color properties I'll do primary color for this header let's see if this is this gets applied depth it gets applied but this is not what I want to do so I will just cut this and paste it to the header and we should see a primary color yep that looking nice and also I would like to move that date text into this sub-header and I don't want to see a date actually not this one I don't want to have a label at all you I'm gonna save the file and we should be able to see the date in there like this okay so we're a date we got a total we got these buttons there now we can apply the colors for this top and then the tabs as well so for that I'm gonna go to variable dot CSS and here we got the colors let's go to the documentation and I'm going to take you to this guide page and here we should see colors so when I go to teaming and here we got colors so here we can see how many colors are provided here so I can use this a secondary color for actually the primary color for top dates and in the bottom and then the secondary color for whatever it's the second everything okay so for now we're gonna go to tabs page and here for the tabs I can give a color property actually it's not gonna take I guess this tab bar will take a color property and I can do a secondary on this one you'll see that color and you know back and will change its okay but we can also override these colors later on so we got days and then we're gonna go to top header so we go to dashboard component and here's a header for that and I'm gonna do a color property a secondary for the tool bar and we got that too in the secondary as well I don't know I'm not sure if we really want to do a secondary color for days but that's fine how because I'll be I will not be using this color you know in different places so we got this total we got a date here we got these buttons there now let's work on the card that will basically show the expense start by creating another card so I would like to iron card and within this iron card we are going to add a grid so let me just start by adding on card content and then inside this we can use iron agreed and I'm going to copy it this row and then let's just paste it here I'm gonna save the project and let's see what we get so there's some sort of issue here so iron content should not be so that should be on a car the content not iron content let's save it and then we can see we got a card down here okay so now we need to show an amount so first of all let's start by getting a rid of all of these buttons you okay I'm going to save the file and let's see what we have so we got a grid and a card basically it's empty right now I'm going to add a text here so first of all that would take an amount second one that would be a type of expense and then we will have a button for info so I'm going to use ion icon so for that we have okay and I'm going to use a name first of all let's just start create a new browser and I'm just gonna move that to the next page okay and let's just open up ionic framework and then ionic cons I'm it's all in a bit and here we are going to choose some sort of like info here so that looks okay to me I'm going to basically just copy this bit and then I'm going to paste that here I cannot save the file and we should be able to see that icon all right we got an icon there I'm gonna change the size to large okay we got that and then in the next column we're gonna have another icon which would be edit okay that's the one and I copy this and then paste it here and we should have that edit there as well I just saved the file let's see why it's not reloading okay maybe the server has stopped nope server has installed then what's the issue so iron icon that's a create outline and if I just type some gibberish here does it appear let me have a look okay doesn't appear anything here so that probably there's a problem with this our song and do is let's just add a size as large save the file and also I'm just going to stop the server and let me say I lik sir okay now usually you won't have to deal with these kind of issues but sometimes things don't you know show up so for that we need to some time restart the server so this is basically an uncut video so I'm gonna show you everything that you have to go through now we think that there is a problem since failed to load server response there is a four or four phone so this SVG is not basically it's it's failed it to load so we're gonna go there and then I'm just going to use some sort of like a pen maybe let's see if that works out for us save the file and we should see that pen nail so no pen there is a error loading SVD so I'm gonna show you another way to actually use this particular icon what I'm gonna do is click on this SVD button it's going to actually download this particular file in SVG and then I'm going to open up this file in the finder and I'm just going to copy this wait go back to IDE in assets in icons I'm going to right click and paste the file here okay once we got that file I'm going to use inside of this name I'm going to use source and then we are going to define a source of days so I'm going to copy pad and then we got this absolute path or we got this part on the content or part on the repository I'm gonna try this content one and then I'm going to paste that here okay let's save the file and let's see if we are able to see that pen now pens not there so I'm just going to get rid of this and let's just directly target assets and there you go we got the pen there I'm going to use the size as large and we should see the pen in large size there we go okay now what I'm gonna do is give this one column and one column and then for days we're going to use five columns and the five columns there and we should see those pens all right in the corner maybe I can give this to and then here that we're gonna have to change to four by four remember this is a twelve column grid in ionic and now we should see that okay they're looking okay now and then we'd rather the CSS later on let me try commenting this grid because it adds its own patty I don't wanna see those padding and now similar not much changed so that's fine I will leave that here and I'm going to remove this iron card content let's see if we are able to you know get rid of that space now it's looking much better now so I'm going to just inspect this element and then here we can define some custom CSS there as well for example here is the you know flags so for that I'm going to you know do class text I'm gonna use a center or we can do justify let's save the file and we should see that in the middle okay now I'll worry about this later so let's just get rid of this now we have done our basic UI for the cards which will be listed out here let me get rid of place okay save it okay so now looking good I'm going to actually create a repository for this project and I want to show you how I create it now at this stage we are going to finish our part one for this project and then the part two we're gonna start writing some logic for this application so before we end this video I would like to like to set up the repository so I'm gonna go to my github account and here if you have not followed me and github a drop a link of my kidnap account please make sure that you follow me on the github and now I'm going to create a new repository and I'm going to say expense logger okay and it tastes repositories already exist so I'm just going to use blogger that's it now it's not gonna let me do that so I'm gonna just say expense tracker okay let's just use this one and then I'm saying this is the project for YouTube and leave that as public and then I'm going to create this repository once more positive done it will tell me these commands that I can you know use so I'm going to use this command first and that would actually write some stuff to my readme dot file so let's just paste this it's gonna you know write down some stuff like expense tracker and to read me empty file so here we go so we got the readme and E and we got this expense tracker there so that's not good and after days I'm going to use some other commands for example this is going to be good con with my first comment and then I'm gonna have to add the origin so this is the origin that I will have to add let's copy this and first of all let me show you if you type git we know - we you will see what is your you know server side I'll call it server side by a repository URL I'm going to use this command and it's going to add that region so near for type remote - we and I've got this origin okay now I could use this git push command as well the first of all I'm going to use a get a dot and then I will check the git status and everything is added interval project we'll use git commit dash M also initial I'll say chapter Oh actually video 1 completed here okay and I'll just enter and I've got this you know comet done I'm going to use git push you know the first time because I don't have that master branch in our origin and we're gonna use this command for that so I'll type in git push - I set up stream origin which is the name of that and then a master and now it's going to push the data to the repository and if i refresh this page now I should be saying this code so there you go if you want to contribute it's pretty it's it's open-source project and I'm gonna write some you know MD how you can contribute to this project okay that's about it for this video guys thanks for watching and we're gonna start writing some angular logic to make this you know work properly or actually add some stuff to it okay so this is the repository I will drop a link for days in the description of this video please check it out and send me a pull request and then I will actually allow you to take a pull request from this or fold this and you know if you want to jump on and contribute to this project you're more than welcome to do that okay before I finish this video please subscribe to the channel and also check out my udemy courses I've got really cool udemy courses when I show you my public profile and here the course is a part of Todd full-fledge angular means that full JavaScript and sometimes ripping restful course as well so got a good rating as well as it is a ionic for app development course as well don't worry about this one because this is what I'm teaching you in this video okay thanks for watching guys and I'll see you guys in the next one and last thing I forgot please have a look at my brother's mare courses and type in there Jameel here and then I should be able to see his courses so that's angular and loopback from scratch so this is one of the best course that you can find with angular and loop back and build a complete website from scratch so this is really good my brother is like a really experienced in angular and JavaScript overall so that's his profile I would highly recommend checking out ok NS you guys in next part of this project

Channel: Awais Mirza

Views: 14,886

Keywords: IONIC 5 Tutorial, ionic framework 5, App development, how to develop mobile application, ionic angular, angular, ios, android, capacitor, course, full course, complete course, learn ionic, ionic tutorial, ionic 4 how to, ionic app, ionic full tutorial, ionic for beginners, academind, ionic 5 course, ionic 5 tutorial, ionic 5 app development, ionic framework, learn ionic 5, ionic 5 for beginners, ionic 5 crash course

Id: JV-UrNjZkOM

Length: 91min 59sec (5519 seconds)

Published: Tue Feb 18 2020