How to Create a Mobile App Using Xamarin Forms: Part 1 - Creating the Project and Setting Up

hello and welcome back to the let's create series and in today's video we are going to start the exam or in forms tutorial so we're going to start creating a Time Tracker app and we're gonna do this cross-platform and it'll work on Android and iOS I'm really looking forward to this one so let's jump right into it let's get started by creating a new project in Visual Studio and so go ahead and click create new project and then you'll have this list here and let's go ahead and type at the top samer in dot forms and that'll give us the pretty much the first option is mobile app with xamarin forms click that and select next and then it's gonna want a project name and we can just name this time tracker and I might name mine time tracker tutorial and then you'll choose a location for your project and I'll probably pick somewhere on the desktop and I will just click select and it's gonna want a solution named time tracker tutorial for me as fine and then I'll click create when this window pops up will select blank and we'll make sure Android and iOS are selected and we can click OK and our project will be created and once our project is created we could see we have the shared project if we minimize that or collapse it we could see we've got the shared project we can collapse the Android project in the iOS project and we'll see we have three total in the entire solution we have the shared the Android and the iOS and we can re-expand the shared and we could start setting up our project structure so when I make my project structure I really like to add a couple folders right off the bat and so the first couple folders I like to add will start with right click the project go to add and new folder and we'll name this models and then we'll right-click the project again go to add new folder and this will be pages and we'll do the same thing and we'll add page models and we'll do the same thing again and we'll go ahead and add services and that should be a good start for now one of the things we'll add in page models is a base folder because we're going to have some shared code that we'll put in a parent class so this would be an abstract class let's go ahead and add a base folder and in here we'll add page model base so go ahead and add new item and this will just be a class and we'll call it page model base okay when we add a new class will notice that the class doesn't have the public access modifier so we'll we'll add that public and we want our page model base to extend bindable object so let's go ahead and add bind bindable object behind that and then we can just import the using for that and that's using xamarin forms and then we also want to make another class called page model locator so add new class and that'll be page model locator and again let's make that public then we can pull in tiny ioc which is this inversion of control that we'll use so let's go ahead and open up google and we can just type tiny ioc github and that'll bring us to the tiny ioc github repository and what we're basically looking for is the tiny ioc class so you can click in there you can just click raw and we can copy all of it and we'll make a new folder in the project level so add new folder and we'll name that tiny ioc and then we'll add a class here we'll name that class tiny IOC as well and in this class we'll just replace everything with what we got from the github repository we'll save that and we'll close it so the next thing we want to do is in our page model locator we want to initialize our tiny ioc container which is our inversion of control container we could add a class level member and we can just say static tiny ioc container and then you can import that using and we'll just call it container and then we also want a kind of dictionary to map our pages to our page models so we can say static dictionary and that'll take two types and we'll just call it view lookup and now we can create our constructor so we don't want our constructor to be public because we don't want anybody making a an instance of the page model locator we just want people using the page model locator as a static instance so we can just say static page model locator and in here we can start our initialization so our container will just be a simply equals new tiny ioc container but our view model or our view lookup will be a simple dictionary with type type and then we can start registering our views and view models or pages and page models when they're needed to be registered so we can just for now just put a placeholder comment and say register pages and page models and then we'll make another comment a couple lines down and we'll just say register services and then we can just for informational purposes put services are registered as Singleton's by default okay and that's good for now we also need a way to do like a class level resolve method so that we can access those methods outside of the page model locator and we don't have to rely on this container so the first thing we'll do is create a resolve method so we can say public static because this class is mainly going to be operated in a static instance and then we're gonna return at just some kind of typed parameter and we can say resolve and then we want to say put that type parameter in there again and we want to give some kind of constraint down there so we'll say where T is a class and we'll just return container dot resolve T and so what that'll do is take it any parameters that are put in which are like normally dependencies so some kind of interface and if it's registered into that container those will resolve and then it will resolve the actual T class which will probably be a page model and it'll go from there so that's great and then we'll make this public method that anybody can access from the page model locator to create a page for specific page model types we want this to be public and it'll be static because our class is setec and it'll return some page and so it looks like we'll have to import xamarin forms and then we'll name this method create page four and this will take in a type and it'll be a page model type so in here we want to grab that page type from our lookup table which we haven't actually registered anything yet but we will and so we can retrieve that by saying just var page type equals view lookup and then in this view lookup dictionary we want to provide a key and that will just say that key is the page model type so that'll give us the page type and then we can use activator to create the page so we'll save our page equals and we'll cast it and say activator dot create instance and we'll just give it the page type and that'll go in and create the instance of the page for us and return the page and then we want to resolve that actual page model so we'll save our page model equals container which is our ioc container our inversion of control container and we will resolve that page model type okay and then from there we'll just set the pages binding context to the page model then from there we can go ahead and just return page and so what we've done is found a page for a specific page model we've set it's binding context and we've returned the page so now we can use that anywhere and so that's perfect there so now we have our page model locator all set up we have our page model base just getting ready and then we could start making our page models so page model base needs a couple things so we have some shareable code that we want to put into our page model base and so like every page is going to have at least two properties and so one of them is gonna be like a title and another one is gonna be is loading which will detect network activity so let's go ahead and add those properties so we'll say you know just string title and then public string title and the purpose of this is so we can kind of track changes so we can say get title and set and we can set title equals value and we could say on property changed and we can send name of title and that's kind of one way to do it another way is to use an actual method that will handle all of the basically these lines of code and will put them into a one-liner and so right now or that doesn't seem too beneficial but as we move on into our project will see that that saves us kind of a lot of time so let's go ahead and make a method so we can see what it will do for us moving forward so let's go ahead and create that method and we want this method to be usable by any of the children so we'll at least make this protected if not public so protected and this will return a bool to indicate whether or not this property actually changed and we can just call it set property so we need a typed parameter and we'll reference some kind of T storage and so that could be any any typed parameter we also want to provide some kind of T value and this will be because we're setting that value to that storage so they need to be the same type and so we have that and then we need to use something called it's a it's an attribute and it's caller member name and once we type that out we can import the using from system dot runtime that compiler services and so we have color member name and we will that will be a string and we'll say property name is fine and we'll default that to no and so now we have the set property method and what we want to do is we want to check to see if the value of storage already equals this inputted value and if it does we're just going to return false and say we didn't set the property but if they're not equal we're going to set it the value to the storage and then we'll go ahead and return true but between there we're going to notify the binding context that the property changed so we can do that with a simple if statement and we'll use the Equality compare I will pass in that typed parameter and we'll just use default and then we'll just check to see if it's equals and what we're is storage versus value and so if those are equal we'll just return false because we're not actually going to set anything it's all it doesn't need to be set because they're already equal so otherwise if that did if that condition was not met we did not return false and now we're gonna do something so we're just gonna set storage equals value and then we'll go ahead and raise on property changed and this will be the same thing property name which we passed in and then we'll return true and so what is the benefit of writing all that well the benefit is if we do something like that is loading so bool is loading then we say public bool is loading which we could bind to we can do the same thing with get will just return is loading but on set instead of those four lines of code we can make it one we can say set property and we could use ref is loading and value and that's the end and what that's gonna do is take care of all of this in one line of code and right now that doesn't seem beneficial because that's you know I don't know ten lines of code how is that beneficial turn four into one well we're gonna be using this a lot and so this this saves us a whole bunch of work moving forward and that's what we're gonna be doing this episode with this with the setup so we're gonna be creating a lot of code but it's gonna save us even more code later on and so that's the big focus of today's episode it's a great way to set up every one of your xamarin forms projects so the next thing we're gonna want to do is let's go ahead and change this get title let's change the setter to a set property as well so we'll say set in that set property ref title and we'll pass in value and that'll take care of that and so the next thing we're we're gonna want to do is create a couple pages and so we at least want a login page let's say add in the pages directory add new item and that'll be a Content page make sure it's the one that's got the dot XAML or example and we will call this one login page and that should give us two files it should give us that login page dot XAML and it should give us login page dot XAML dot CS and so that's that's fine we can leave this the way it is right now we can close it so we have the login page and let's do the same thing for dashboard page so new item content page and we'll rename it dashboard page and that'll give us those two files as well and we can do the same thing add new item and we'll name this one summary page and go ahead and create that and then we'll add another one so add new item and this will be profile page and then we'll go ahead and add new item and we'll do the same thing again and the next one over a settings page and the last one we want is a way to keep time so we'll go ahead and add new item and this will be time clock-- page all right great and now we need page models for each of these so let's go ahead and add a new class to page models and we'll call this one login page model and so that'll create a dot CS class for us we're gonna make it public and then we're gonna extend from page model base and then we'll have to import the using so using page models dot base and we're gonna do the same thing for each of those other page models alright so that gives us all of our pages and all of our page models so that's a great start so we can close all of these tabs if we want and I want to keep these episodes to anywhere between 15 and 20 minutes each so this is where I'm gonna end part 1 of the first episode so we're gonna break the first episode in the two episodes and so we'll finish setting up the project in the next episode so if you liked what you saw today go ahead and like and subscribe and we will see you next time

Channel: Let's Create Series

Views: 51,905

Keywords: Mobile App, Android, iOS, Development, Visual Studio, Xamarin, Xamarin Forms, How to, Make, Create

Id: HgsUzH-7KYw

Length: 18min 7sec (1087 seconds)

Published: Wed Jun 03 2020