Learn Fresh MVVM with Xamarin Forms | Asfend Yar | Skillshare

Learn Fresh MVVM with Xamarin Forms

Asfend Yar, Microsoft MVP

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
39 Lessons (2h 49m)
    • 1. Introduction

      1:20
    • 2. Course Structure

      1:18
    • 3. Demo Application

      3:04
    • 4. Download Course Material

      0:16
    • 5. Create Xamarin Forms Project

      3:22
    • 6. Why We Need MVVM

      6:13
    • 7. What is MVVM

      4:19
    • 8. What is Fresh MVVM

      1:46
    • 9. Why Should I Use Fresh MVVM

      3:02
    • 10. Installing Fresh MVVM

      1:24
    • 11. Project Architecture and Naming Conventions

      3:48
    • 12. Commanding Overview

      1:00
    • 13. Implement Commands in MVVM

      4:51
    • 14. Passing Data From View To View Model

      2:49
    • 15. INotifyProperty Change

      3:13
    • 16. Resolve Page Model in Fresh MVVM

      5:08
    • 17. Alert Overview

      1:06
    • 18. Implement Alerts in Fresh MVVM

      2:15
    • 19. Navigations Overview

      1:09
    • 20. Implement Navigations in Fresh MVVM

      4:38
    • 21. Navigation with Parameters

      8:35
    • 22. Dowload The Github Code For Rest Api

      3:06
    • 23. Create Azure Web App

      3:14
    • 24. Create Azure SQL Database

      3:08
    • 25. Publish Web Api To Azure

      3:23
    • 26. Test Rest Api

      6:32
    • 27. Adding Csharp C# Model Classes

      3:31
    • 28. Adding Services For Api Endpoints

      14:15
    • 29. Implement Quotes Category

      7:43
    • 30. Implement DI in Fresh MVVM

      7:59
    • 31. Implement Quotes List

      9:57
    • 32. Implement Quotes Detail

      12:00
    • 33. Implement Add Quote

      15:52
    • 34. What We re Going To Add

      2:31
    • 35. Implement Clipboard Functionality

      2:45
    • 36. Implement Share Functionality

      1:52
    • 37. Solve ListView Selection Issue

      2:29
    • 38. Adding Activity Indicator

      3:50
    • 39. Final Words

      0:19

About This Class

Welcome to the World's First Fresh MVVM based course , the only course you need to become an expert in Fresh MVVM.

If you're tired of boring outdated and incomplete courses , then let's dive in to this course. Well I'm Asfend Microsoft Most Valuable Professional (MVP) as well as First Xamarin University Most Valuable Professional and in this course I'll explain you every single aspect of MVVM and Fresh MVVM with real world application in Xamarin Forms. Yeah I know there're lot of courses over internet but there's never a single guide that teaches you how to implement the MVVM and Fresh MVVM in xamarin forms applications from scratch. And the purpose of this course is to train you to build your own apps and implement the MVVM pattern in your xamarin forms applications.

This courses teaches you how to implement MVVM using Xamarin Forms and build beautiful Android and iOS apps by using Xamarin Forms. 

By getting this course, you can be rest assured that the course is carefully thought out and edited. And I'm always happy to answer student questions.

So by the end of the course, you'll completely understand:

  • How MVVM Works

  • The Complete Fundamentals of MVVM like Commanding , INotifyPropertyChanged , Navigation's , Alerts etc.

  • Page Model(view Model) to Page Model(view Model) Navigations

  • Implement Dependency Injection inside xamarin forms application via IOC container.

  • Create Quotes Application with Fresh MVVM.

  • Implement Fresh MVVM inside Xamarin Forms applications.

  • Implement Dependency Injection and IOC principle along with Fresh MVVM.

  • Implement Fresh MVVM Raise Property Changed , Navigations & Listview Selection.

In this course I'll explain you each and every single line of code. I've been in your shoes and every time copy and paste is not a solution and that's why I've tried to create everything in front of you so that you can learn how to solve the errors. We'll learn every thing from scratch. 

After this course you'll be very much familiar with Xamarin Forms MVVM and Fresh MVVM and you'll be able to create any kind of MVVM based application in xamarin forms quite easily as well as efficiently.

Remember...

Along with this course you'll get all the assets and material that will he helpful for to make a project with Fresh MVVM. I've also shared a Complete Backend Code for the Rest Api's inside the course but you need your personal Azure Portal or any other hosting service  where you can launch your web api and test it in Xamarin Forms Application.

Transcripts

1. Introduction: Hi, welcome to this course. Learn fresh MVVM with seven forms, which you will learn to make a complete mobile application with fresh MVVM. My m is as fun and I'll be leading you through discourse. I began my career as a software engineering intern at Microsoft, and then I begin to jingoistic Microsoft, most valuable professional. I designed this course so that anyone can make there's haven't Forms application with fresh every VM in a well and professionally. By the end of this course, you'll be able to make a complete application with fresh MVVM. And you can also apply the concepts from this course, real-world projects. In this course, we'll make our application with fresh MVVM. And we will cover all the concepts of fresh MVVM. I guarantee that there is no course out there that is as comprehensive and easy to follow. The ideas students for this course is the existing C-sharp and Xamarin Forms that Wilber, who wants to implement the MVVM pattern in their mobile applications, feel free to take a look at the course description. And I will look forward to seeing you inside discourse. 2. Course Structure: Let me quickly show you what is coming up over the next few sections. In the next section, we're going to create our x_min Forms application. Next, we explored the MVVM architecture and we will also explore how things actually work in MVVM. Right after that, we will configure fresh MVVM inside the Xamarin Forms application. And we will also explore the important concepts of fresh MVVM like commands. I notify property change, alerts and navigations. Then I will show you how you can get the application backend and deploy your API. Microsoft Azure. Once you will deploy the API on the Microsoft Azure, then I will show you how to get the models and service classes. And then we will get a complete application from start to finish via fresh MVVM. And we will also add the dependency injection and inversion of control inside of a x_min Forms application. At the end of this course, I will show you how to add some cool stuff inside our x_min forms, fresh MVVM based application. Then lot of things to learn and I will see you in the next section. 3. Demo Application: Before we get started, let me quickly show you the application that we're going to build. This application is called Duany goat, and it's supposed to be used on your Android and iOS devices. With the help of this application, you can add that goats and you can also find the course of other authors. So if I run this application, then here you can see that we have are getting any page and we will get these categories from the RESTful API. Now let's say I want the course that belongs to this category. So I depths category. Then it will take us to the course list. And there we can get the list of codes that belongs to the category that we have selected. If and further tap the Senate, then it will take us to the detail of the coat. And there we have to cool features. And these are copy coat and shared the coat. If I tap this Copy icon, that it will copy this code description. Now let me switch to some other application. And there we can easily paste the code that we have copied. All right, now back to replication. And if I tap this share option, then it will ask us to shed this code. Let's say I wanted to share this code with my WhatsApp contact. So here I'm going to select our set option. And right after that, I'm going to pick that contact from my contact list. And here we go. This will shader code with my WhatsApp contact as well. Now, this is back to the category page. And they're on top of this page. You'll see this ad eigen. If I kept this icon, that it will take us to the ad code page and we can provide the details and save our code. So let me add few of the details, like authored category description. And then just save this coat and we receive this message. And that is that code has been added. So we have added the code in this category. So let me go back to that category page and let's tap this category. And here you go. You can see that our newly created coat is spelled here. Alright, that's also, well, that's the brief overview of this application. Will get this application with fresh MVVM. And we will apply all the concepts inside this application, like romance, navigations, inversion of control or dependency, injection, etcetera. So are you excited to build this application with me? I hope you are. Then let's begin. 4. Download Course Material: To complete this course, you need some material. Don't worry, I have added all the material along with this course and it's free of cost. You just need to download the file. Later in this course. We will use this material to make a real mobile application. 5. Create Xamarin Forms Project: Hi, welcome to the MVVM course. And in this module, we're going to start working with the Xamarin Forms application. So before moving forward, just make sure you have properly set up your wheel studio. Right now I'm using real studio 2019 Windows edition. So here inside my Windows machine, I'm going to launch them in Studio. And now I'm going to create a new project. Just go to this mobile app with seven forms. Template. Choose this, and then press Next. Here you see a window that's saying configure your project. So here I need to add a name of my project. I'm going to give a falling name that is goes up. Alright. Just get this project, but just pressing this Create option. Now when studio will open and other dialog window. And here we have been asked to choose a template for our project and what kind of platforms we're going to target. So here we have different templates, like blank template, the master detail template, tab page template, and the shell template. These data blitz will already contain some of the code and it's just four time-saving. But if you want to learn how things actually work under the hood, then you will have to go with the blank template. So I've been with the empty blank template. Right after that, we need to choose the platform that we're going to dive it. Well, you can target Android, iOS, and Windows platforms with this tablet, I have not install the Windows UWB template, so I'm not going to work with the Windows applications. But if you have installed the UWB or Universal Windows Platform option, then I will encourage you to select the Windows option along with the Android and iOS. Alright, now we need to press the OK button. And we studio is good to make the Xamarin Forms project for us. So we just need to wait for a few seconds. And here we go. Our x_min Farms Project has been created inside the width studio. Alright. If I go to the Solution Explorer window, then you will see different projects inside this solution. Well, there are three different projects inside the solution. If you have also installed a Universal Windows Platform, then there will be four projects. So here in my case, I have three projects. The first project is basically used, right? All kinda Xamarin Forms coat. And this second project is an Android project. And this third project is an iOS project. In this course, we'll try to write the code in this first project as much as possible. All right, so in the next module, we will learn that why we need a brilliant portrait inside our Xamarin Forms application. See you in the next module. 6. Why We Need MVVM: In this module, we're going to learn that why we need MVVM, Model-View-ViewModel patron to make over seven Forms application. Well, in normal zone forms application that developers most oftenly used XML pages to write the XML code for UI design. And the code behind file to write all the logical code of that XML page. Like even handling data, morals, services, navigations and things like that. Well, this approach in peace, the size of the view, and it will also get a very strong dependency between the user interface and the data binding logic. So in this situation, no two developers can work simultaneously on the same view. One developer code change might break the other developers code. Let's take an example. First of all, let me go to this main page. Well, this comes with two flavors, meant pits dot XML file and the main base code behind file. First of all, let's go to this main page. And they're happy to add a button control inside this stack layout. Let's set the text property of this button to click me. Now let's get a click event of this button. And here you can see that this will take us to the code behind file of this main page. Alright. Now in this click event, I'm going to add a display alert for displaying pop-ups and pass some parameters like title, message, description, and cancel option. Now, I'd need to run this application on the Android device. As you can see that our application is loaded into the emulator. And now if I press this button, it will simply display this pop-up. Well, in normal Xamarin Forms application, we handle the event clicked in the code behind file. But in case of MVVM, handling the click event in the code behind file will break the MVVM rules. Also, you can see that this code is tightly coupled. And let's say we have two developers working on the same page. The one is working on this main page, XML file, and the other on this code behind file of this main page. Now at some point that developer who is working on this code behind file realized that you don't need this button clicked goat, and he's simply remove this code and then run this application. Now what happens here? This may throw an exception. Now let's put the code back there. So it means no to developers can work on this main page. Changing some code in the main page XML file will break the core four main page code behind file. And same is the case for code behind file. I mean, changing anything in the code behind file will also affect the main page is ML file and sort. These two pages are tightly coupled and they're heavily dependent on each other. And also, let me go ahead with the navigation's examined forms. In order to move from one piece to another examined forms, we need to work with the navigations. So what I'm gonna do is I'll just go to this Xamarin Forms project. And I'm going to create a new content page, just namespace to page one. I'm just adding this page to explain you the concept of navigation. Later in this course, we will not use this page one. All right, so here I have added this page. Now let's add some text here inside this page one. Alright, I'm going towards the main page. And there we need to introduce this functionality. And that is, if the user will tap this button, then we need to redirect the user towards the page one. So all we need to do is just go to the even clicked this button control. And their first of all, let's get it from this code. Then inside this even clicked, let's call navigation dot push async method. Push async method will take your page where you want to navigate. Let's say we want to navigate to the page one when we tap this button control. So let's pass a page on here. Alright? And the one last thing is that because we're going to move from one page to another. So we need to make over root page as a navigation page. All we need to do is just go to the app.js level dot cs file. And there inside the constructor of this file, let's set the main page to navigation page. Alright, now let's execute this application. And here inside the emulator, if we tap this button, it will take us to the APP PS1. Alright, that's awesome. Now let me tell you that by using this approach, we can navigate from one page to another. But have you noticed that we have used the navigation code in the code behind file, which violate the MVVM principle. So we have to put this navigation somewhere else, not in the code behind file. All right, just like that, we have some other things that we cannot write in the code behind file like API services, dependency injection, data binding, et cetera. Don't worry about these things because as we move forward in this course, we will cover everything with the explanation and the practical demonstration. Alright, in the next module, we will learn the architecture of MVVM or how MVVM works. So I will catch you in the next module. 7. What is MVVM: Today we're going to be taking a look at MVVM Model View, ViewModel approach. Well, to be honest, MVVM is a base of any Xamarin Forms Application and even the applications that based on XML like WTF or UWB applications. Well, I'm a big fan of MVVM and it's a great way of architecture that code to protect your business logic from your user interface. I'm going to talk a little bit about the architecture of MVVM because it's really important for us to know that how everyone works. So let's talk about the MVVM or moral view. We motor pattern and understand how it is working. The patron is evolution after very well-known MVC pattern, that is model-view-controller pattern. Model-view-controller is quite an old pattern. It was developed around late nineties 1984 at, it was wireless used especially in web-based frameworks. Here we have model, which is where the data comes from. It could be a database, it could be a web service, etcetera. Then we have view, which is what the user is seeing. And we have a controller which is coordinating all the actions. It is in-charge of refreshing the model. It is in-charge of displayed that data in the view, and it is in charge of a reacting to events from the view. Well, MVC is very widely used in web applications. But when you worked with resemble our mobile applications, then there is another one which is even better, especially because of the data binding system. So in the MV1, patron would basically deals with three layers. The one is model, the second is the view, and the third is the view model. I've used defined in XML and should not have any logic in the code behind. This view could be anything. It could be seven forms pages. It could be an Android XML file, or it could be an IOS storyboard file. It's just how you display the information. Then we have the view model, and we will see that how the data and events are flowing here. Your view model is that demonstration of what you want to be displayed. It handles how data is flowing to and from gives you. In addition, when the view has some events such as the click of a button, it will pass that to the view model. The ViewModel will interconnect and pass some data back. So under the hood, what this view model is doing? Well, this view model is interacting with your model, your business logic, your data objects, maybe your Azure storage, or anywhere you digitize living. So this way, your view as not talking directly to the data is talking why our view model. Now let's suppose I have some code in the view model. And I want to show this in my view. So how to pass the data from the view model to the view. And here comes the magical favorite of data binding. Data binding is like a glue that magically binds to your view, the view model specifically, and in seven forms, we have a very good sport of data binding. Alright, more deeper into the MVVM. I have already mentioned that between the view and the view model, there is a data binding flavor. And this data binding framework is used to pass the information to the view, from the view model and from the view to the view model. But very often we have data binding going between our view and the model classes directly. And then Wycliffe things. Again, it said that you don't talk directly with the model, but this is not always true. Sometimes solution comes when it's necessary to get a binding between the view and the model. And as we move forward in this course, we will take up more closer look where petiole implementation. 8. What is Fresh MVVM: In this section, we're going to learn the fresh MVVM. So the question is, what is fresh MVVM? Well, in the simplest form, fresh MVVM is simply a framework for developing seven Forms application. It allows you to take your complex seven forms code and break it down into simpler and more manageable pieces. Fresh MVVM relies heavily on design patterns to help promote loose coupling and separation of concerns. Fresh MVVM sports. Some of the common patterns that most software engineers talk about, like dependency injection, veteran, inversion of control patron, and model view, view model Packard. So basically fresh MVVM takes an application that might look like this, where all the views and the code, any services or data access are all twisted together. Where in this application is difficult to differentiate what the responsibility of the code. Because all the code, services and pages are twisted together and we cannot differentiate between the code and their responsibility. And any single change might break the entire system. On the other hand, if we talk about the fresh MVVM, then we will get an application in a well structured way where the measure identical areas of the application have been identified and separate it from the other functional areas of the application. Now, I can be confident that if I want to make some change, say, in the first building, then it would not affect anything that happens in the second, third, or fourth building. 9. Why Should I Use Fresh MVVM: In seven forms, there are lot of MVVM favorites that you can use to develop better code based on MVVM patron. These are some of the MVVM favorites that you can use inside your Xamarin Forms application like MVVM cross Prism light and MVVM fresh. But from this list, everyone fresh is the best and more reliable if you're working with the Xamarin Forms. And we will cross is the best option if you want to make mobile f's with x_min, Android and iOS. But if you want to make mobile apps with seven forms, then MVVM cross is not a good way to make applications. And we have different options to make them Forms application with different MVVM frameworks like Prism light and MVVM fresh. And from this lists, preserve is the best if you want to make mobile apps for larger and complex systems where loose coupling, testing, maintainability of code is more important than the performance or its most time of the application. Now comes the MVP blight. Well, as the name suggests, it's mostly used in small and lighter applications and exporting both 77 forms. But because of limited sport and documentation, people will mostly target MVVM preserved. Then comes the fresh MVVM. Well, this fresh MVVM is the most widely used in Xamarin Forms apps, and it's very fast and reliable. With fresh MVVM, you can build small, medium, and large applications. It can also be used with the complex applications. But my personal opinion is that if you really want to make a very complex kind of application with the performance and response time of the application doesn't matter. Then go with the MVVM preserved. Despite the fact that everyone prism is the best favorite. It's little bit slow and we have only one option left, and that is MVVM fresh. Also, I want to tell you something interesting and that is x_min forms also comes with built-in MVVM favorite, but it's not as good as MVVM Prism light or fresh MVVM. Maybe you're asking yourself, why should I use fresh MVVM and not the built-in Xamarin Forms MVVM. Because few things or very good examined forms MVVM like command patron or I notify property change events. But in Xamarin Forms built-in MVVM, There is no sport of dependency injection patron, and almost 80 out of a 100 mobile app developers in the software engineering market implement dependency injection pattern in their mobile apps. And we are lucky enough that we will also implement the dependency injection in our cross-platform Xamarin Forms mobile application. So Justin around your sleeves because from the next module, we're going to start working with the fresh MVVM. 10. Installing Fresh MVVM: Before we continue, it's important to install fresh MVVM inside the wheel studio. So let me go straight to the wheel studio and they're happy to install the new package for fresh MVVM. All you need to do is just go to the Solution Explorer. And they're just right-click on your solution and choose managed stupid packages for solution. Right after that, let's search for a new package that is fresh MVVM. And here you will see a list of packages. Just select this package. And then all we need to do is just install this package inside our project. Alright, let's go ahead with this installation. And we will get this license agreements. Let's accept this. And here we go. Our installation will continue. You just need to wait for a few seconds because right now our Vi Studio is installing the fresh and William new get package. Alright, here we go. This package has been installed successfully. Alright. Now in the next module, we'll set up the architecture of our project by using the fresh MVVM. I will catch you in the next module. 11. Project Architecture and Naming Conventions: In this module, we're going to set up our project architecture for fresh MVVM based x_min Forms application. So let me go to the real studio and they're inside the solution. And inside our project, we have these several files which I have created earlier. But now we don't need this because we're going to start working with the Model, View, View Model patron. And it means we will add all that unnecessary code in their respective folders. So what I'm gonna do is I will delete these files. And right after that, just right-click on the project and add new folder. And just emit models that I'm going to add another folder and name it views. Similarly, let's add one more folder and this time I'm going to name it view models. Alright, so far, so good. Now let me explain the working of these folders. Well, this model folder will contain all our C-sharp glasses. And in this view model folder, we basically add view model classes that are responsible to get data from the model classes and to communicate with their respective views. And this view folder will contain all our XML babies. Earlier you have seen that we have edit the XML page directly inside this project. But now, whenever we will add the demo page, we will put that several files in the views folder. Now, we have set up our project folders for MVVM pattern. But in case of fresh MVVM would need to change a few things. So in fresh MVVM Model remains the same. But in case of views we have pages. And in case of view models, we have page models. Well, we have to follow this naming convention. So here all we need to do is just nip this view Models folder to Page Models, and then rename this views folder to Pages folder. The working remains the same. We have just renamed these folders. Alright, so far we have just set up the folders inside of a project. Now we're going to set up our first PH inside this project. So let's go to the pages folder and there need to create a new coordinate page and emit welcome page. Now for every page, we need to make up page modal or insipid. Worse, we need to make a view model. So all we need to do is just go to this page morals folder. And there, let's add a new class. And name it. Welcome page modal. Alright. Now, in order to make this welcome page as a root page of our application, we need to go to this app.js file dot cs file. And there inside the constructor, lets make this welcome page as our main page of our application. Also makes sure to add this namespace because this welcome page is now placed inside this Pages folder. And it means we need to add the following namespace. Alright, now let me run this application. And here on the device, you'll see that we have this welcome page. All right. Now, let's understand the commanding and I notify property change in the next module. 12. Commanding Overview: In this section, we're going to explore the commands inside those m Forms application. Well, in novels, M Forms application, when you interact with a button or a gesture, then you typically use that click event of a button or a tap gesture recognizer event of a gesture. However, when we worked with the MVVM, then the MVVM principle says that don't put anything in the code behind file. In MVVM. We will not get a button click event or things like that in the code behind file. In short, we will not use the given clicked. But now the question is, if we don't use the Up button click event, then how is it possible to interact with a button and others UI controls like gesture, menu item such br, ListView, etc. Well, it MVVM, we have a better approach to solve that kind of problem. And in order to solve this problem, we will choose commands. So let's understand the commands. 13. Implement Commands in MVVM: In the welcome page dot xml file, I'm going to add a button control. And then inside this button control, let's set the text property of this button to sign-in. Alright. Now we need to move towards the pH Models folder. And as I already told you that for every page we have a pH model. So here in the Page Models folder, we have created this welcome page, modal glass, just opened this class. And their first of all, just make this class to public. Then inside this class, I'd be to add a property of type command. Well, in order to take a property in c-sharp, you have to use a snippet that is prop and hit DEP. And this will automatically create a C-sharp property for you. Now, let's say the type of this property to command. And then we also need to resolve the namespace of this command because this command type comes from this Xamarin Forms namespace. So we need to resolve this namespace here. Alright, now I just need this command to sign-in command. Don't worry about the initialization of this property. We will initialize this property within few seconds. But first, we need to use the data binding in our XML file. So let's jump back to the welcome page dot XML file. And there inside this button control, I'm going to add a command property. Then I'm going to add binding expression. And then the name of our property that we have defined in a page Model or view model. So let's use this sign-in command here. Now, let's go back to our peach model and initialize our command. In order to initialize this command property, let's add a constructor of this welcome page model by using the snippet that is, and hit tab. And this shortcut method will create a constructor of this model. Now in discuss vector, we set sign-in command equals new command object. Now this column has some our loads like this action that takes some object. Right now, I am interested to use the action without any parameters. So I'm going to add an action here and name it sign-in right after that, UC and edit. And that's because we have not committed our functions yet. So let's get a function by using that intelligence feature that comes along with the wheel studio. You can also create this function manually. Now inside this method, we will put all the logic. So if you ever worked with the up button click event that you know that all the logic of the button will go inside the button click event. Similarly, when we work with the MVVM, then all the logic of the wooden will go inside this command action method. Alright, now let's add a breakpoint with this method. And let's try to run this application. And very press this button. Then you will notice that no call goes to this breakpoint, which means there's something we're missing. So limited you that whenever our view talked to a view model, then we have to use the binding context. So let's go to the welcome page. Could be on file. And let's add a binding context equals new welcome page moral. And just result a namespace for this page model. We can also set the binding context in the XML file. But right now, let's stick with this approach because later when we will work with the fresh MVVM, we don't need to write the binding context in the code behind file because fresh MVVM will automatically do everything for us. Now and this application again, and this time, if I press this button, then you will see that the call goes to the break point, which means we have successfully interact with a button control. Whack commands are right. Now in the next module, we'll try to pass the parameters from our Zehmer page to this page model sign-in method. Alright, see you in the next module. 14. Passing Data From View To View Model: Now I'm going to show you how you can pass the values inside this sign-in method. So first of all, let's jump back to the welcome page dot XML file. And I'm going to add an entry control and set up this ruler of this entry. Then I'm going to bind the text property of this entry with some property that we will write in the welcome page mortal. So let's jump towards the welcome page model. And there I'm going to declare the property with get and set accessors. Well, if you don't know how to get a property, then use the following snippet that is prop full and then hit tab. And here we go. This will get the property automatically. Now I'm going to set the type of this backing field to string and then name this field do user Nim. Similarly, I'm going to give a name to this property do username. Alright. Now we cannot bind this decking field with the entry control because this Becton field is private and it's only accessible within this class. However, this property is public and we need to bind this property with that text, the entry control. So let's go back to the welcome page dot. And there inside this entry, I'm going to bind the text property of this entry with the username. And the username comes from the welcome page modal glass. Now, in the welcome page model, you'll see that we have already created the sign-in method. So inside this method, let's use this username property and assign it to the variable user. Well, this is just for testing purpose. I'm just going with this approach to demonstrate to you how things actually work under the hood. Alright, now let's add a breakpoint with this line. And let's execute this application. And here we go. We're on the welcome page. And if I type something in this entry control and press this button, then the call goes to this method. And you can see that in this username property, we have got the data that we have typed in the entry control. And it means we have successfully passed the data from the view to the view model or from the pages, the pages modal. Alright, now let's understand the IEEE notify a property change in the next module. 15. INotifyProperty Change: In the last module, we have passed our data from the page to the page modals via entry control. Now in this module, we're going to implement the I notify property change. So let's jump to the welcome page dot XML file. And there I'm going to add a level control. And during runtime, whenever we will write something in the entry controlled, then it will update the label accordingly. Now the question is, how to do that? Well, first of all, let's zoom towards the welcome page Model. And then as you can see that we have this username property and we have already bind this property with the empty control. Now this time, we're going to bind that save username property with the text property of this label. And here we go. Let's run this application. And inside the entry, if I add something, then you will see that there is no change occurs in the liberal. And right now I have a level on the screen, but because of the empty text, the label is not visible. Now let's come back to them in studio. And inside the welcome page model, I'm going to add an IEEE notify property change. Well, you will see an error and that's because we need to implement the I notify property change interface. So what I'm gonna do is I will simply select this red bulb and then try to implement the IEEE notify property change. And here we go. You will get the following lines of code at the end of this welcome page modal. Remember that I notify property change interface is used to notify clients, typically binding guidelines that are property value has changed. For example, consider a property called username. When there is any change occurs in this username property, then we have to raise it up. Property change event. Well, you can see that we have a property change events that will be raised when there is some kind of change occurs in a username property. And you can also see that we have a method call on property change, and that takes the name of our property. In order to invoke this property change events, we first need to call this method and possible property name. So let's go to this username property. And there I'm gonna call this ONE property change method. And this will accept a string. Let's pass the name of our property. And here we go. If we run this application and type something in the entry, then this time you'll see a label with the same text that we have typed in the entry control. Alright, that's working fine. So that's all from this section. See you in the next module. 16. Resolve Page Model in Fresh MVVM: In the previous module, we have talked a little bit about the commands and passing data from view to the view model or from pgs to the pH morals. Now in this module, we register our pH model in the apple.samples dot cs file via fresh MVVM. So before moving forward, let me go to the welcome page modal class at the, as you can see that so far we have implemented I notify property th interface. If we simply use the novel Xamarin Forms, emblem patron are built-in seven forms have been Patron. Then we can go ahead with this. I notify property change interface. But in our case, to use the fresh MVVM favorite, and we have to use something else here. And that is the fresh base, base model class. So let's remove this. I notify property change at its implementation, and simply add a fresh base, base model class. Also, we'd need to resolve that namespace off this fresh base page modal class. Now what about this ONE property change method? This fresh base pays more than class, doesn't contain any odd property change method. However, in the fresh base, base model class, we have raised property change method and we will use this method here. The working of the own property change method and the raised property change method is same. Both the methods are used to notify the UI elements that the data has changed. But in fresh MVVM, we have different names. That is, weighs property change. Inside this raised property change, we'd need to pass the name of the property, which will change the UI elements. Well, right now we want to chase this username property. So there's no need to pass the name of the property here. If you will pass the name of the property here, that is also good at It will not throw any kind of errors. All right, now we have added a fresh MVVM ph, model class. And let me tell you one important thing. And that is when we have worked earlier with this welcome page that you have noticed that was used the binding context in the code behind file. This welcome page. But now there is a good thing in fresh MVVM, and that is, we don't need to use the binding contexts because fresh MVVM will automatically via the binding contexts, fresh MVVM just follow the naming conventions. For example, if you have created your page like welcome page and your page model-like welcome page, mortal. Then fresh MVVM will match the name of your page with a model and it will automatically do the binding context. Alright, now we need to register the page model in our app.js and we'll dot cs file. Because if we go to the app several dot cs file, then you can see that we have said the main base to our welcome page. However, in case of fresh MVVM, we always Register page modal or view model here. And in case of fresh MVVM, there is no need to set the welcome page here. Alright, so what I'm gonna do is I will remove this code. And then in order to dissolve the pH model, all we need to do is just use this med page equals fresh page modal resolver gloss. That comes from this namespace. And right after that, with that glass, we simply pick this resolve ph model function that basically used to resolve our pH model. So here 32 possible Page model name, which in our case is the welcome page modal. Alright, now it's time to execute this application. And here let me add the application on the device so that I can show you the things we have done. Alright, here, my application is running. And now if I type something in this entry, then you see that the change occurs in this level control. Well, we have done this stuff earlier in this course, but this time we have done this while fresh MVVM. And just like that, we will slowly move in this course at once. We get the fresh MVVM concepts, then we will speed up the things. Alright, that's all from this module. Now I will see you in the next section. 17. Alert Overview: In this module, we're going to understand the alerts inside our x_min Forms application. Why afresh MVVM? Now the question is, what is alerts? Well, seven forms provides a pop-up like you the interface and we call it display or that this display alert. It's in the form of falling shape. And it comes along with the Xamarin Forms. And in order to display this pop-up on the screen, we just need to call this display alert method from our code behind file. This display alert will take different parameters like title, message and cancel or all white button. However, when it comes to the fresh MVVM, then the question comes in our mind that how we will call this display alert method inside the pH modal class. So let's stay with me because now in the next module, we're going to learn how to call the display alert from our pH model or view model. 18. Implement Alerts in Fresh MVVM: In this module, we're going to use the alerts inside our fresh MVVM Xamarin Forms Application. Now let me go straight to the outcompete model. And they're, let's say when I press this sign-in button, then we have to show some pop-up to the user. So inside the sine method, we're going to call the alerts. Alright, now let me tell you that fresh MVVM comes with these alerts. And in order to call that display alerts, we just need to call this core methods property. And with that, we could pick all the methods for navigations and things like that. But we are interested to choose that display alert. So let's add this display alert here. And basically there are two our load of this display alert. The one that takes three parameters, and then the second that takes four parameters. First, display alert will be in the form of falling shape. And this second display alert will be in the form of falling shape. There is only a slight difference between these two display alerts, and that is the exit button. Alright, we're going to use this display alert that comes with these three parameters. So here in that title, let's pass high. And then in the message, let's pass this username property. And then let's add a cancel button that will close this popup, whether user will tap this cancel button. All right, now let me add this application. And here we are on the welcome page. Now I'm ready to write something in the entry. And right after that, if I click this button control, then we'll get the display alert or pop-up that shows our name that we have typed in the entry field. Alright, that's from this display alerts with fresh MVVM. Now, in the next module, we will move towards dot navigations. Alright, I will catch you in the next module. 19. Navigations Overview: In this module, we're going to learn navigation patterns inside the Xamarin Forms application in seven Forms application when we want to navigate from one page to another. Then reuse navigation dot push async method. And with the name of the page where we want to navigate. Let's say we have a welcome page and there we have a button control. Now when the user will tap this button, then he or she will be redirected to the homepage. It novel seven forms apps would normally write navigation dot push async method in the button click event of the code behind file. But now we're working with the fresh MVVM and we need to add navigations in a different way. Now the question is, how we will add navigations in the page modal or view model. Well, with this fresh MVVM core methods, we can access all the navigations and we will use this to move our user from one page to another. So let's stay with me because we're going to add navigations In the next module. 20. Implement Navigations in Fresh MVVM: In this module, we're going to add that navigations. Now let me tell you the scenario so that we can add the navigation's easily. Let's say we have two pages. The one that is welcome page and the other that is homepage. Now when the user on this welcome page press this button control, then we have to redirect that user from this rocket piece to the homepage. Now back to the code. And here in the Pages folder, we just have a web page and that is welcome page. At in order to add navigations, we need a one more page where we will navigate. So let's add a new content page and intimate homepage. Now, we're using fresh MVVM. And as the audit told you that for every page, we have to make up ph model with the same name. So let's add a new class inside the page Models folder. And I'm going to name this class to homepage model. Right? Now let's implement this class from the fresh base based model that comes from this namespace. Now let's go back to the welcome page Model. They're, let's say if I press this button control, then instead of this pop-up, we'd need to move the user to the homepage. So let's remove this pop-up. And now in order to call a navigation, let's use the same code methods property that we have used earlier to call that display alerts. And now this time, instead of this display method, let's use the push page modal method. And there we need to pass the name of her ph model where we want to navigate. Now then it tells you that novel seven forms applications, we'd normally move from view to view or from page to page. But in fresh MVVM, we navigate from pH model to Page model or ViewModel to view model. So here we need to pass the name of the pH modal, which in our case is the hope based model. Alright, here we go. So far, so good. But the game is not over yet and we have to perform a few extra things. Do you know that when we have worked with the navigation earlier in this course, and I have told you that in order to move from one place to another, we have to make our root page as a navigation page. Just like this. Otherwise, our navigations will not work. Do you remember that? Same is the case with fresh MVVM. In order to add the navigation's, We have to register the navigation container in the APS level CS file. So let's go to the app several CSV file. And there I will remove this main page address stored in a variable. And I'm going to name it main page. Now let's get a new instance of fresh navigation container that comes from the fresh MVVM. And there we need to possible made page, which in our case is this. So let's pass this main page here. Now, let's store the result in a variable and call it navigation container. Alright, there is one last thing and that is just pass this navigation container to her maid page. So what I'm trying to do is I'll simply set made page equals navigation container. Alright. And that's all. Well this line, we'll set our root page. At this line, we'll make a root page as a navigation page. At finally, we pass this navigation page to our main page. Alright, now let me read this application. And here we have a welcome page. Now, if I press this button, then you will see that. Take me to the home page. The navigation is working and we can move back and forth. Well, that's household. So far we have discussed the navigation's. Now in the next module, we will learn how to pass parameters from one place to another when we perform navigations. Alright, I will catch you in the next module. 21. Navigation with Parameters: In the last module, we have worked with the navigation via fresh MVVM. And now in this module, again begin to work with the navigation's. But this time we will send parameter from one piece to another along with navigations. Well, let me tell you important things so that it will be easier for us to pick the navigation concepts. So here in fresh MVVM, We have to override methods. The one is I in IT, or initialized method, and the other is reversed in it or reverse initialized method. Let's understand these two methods with an example. Let's say we have two page models based model a at Pace Model B. Now inside the pace model a, we have an entry and a button control. Now, when we type something in the entry at press the button, then we're on the Bass Model B. And inside the page Model B, there is an initialized method that we'll accept that object or parameters that we have passed from page a to page Model B. Now let's say, or base model B. We want to pass the value back to the page Model a. The user pop this page, our switch back to the previous page. Then based model a, we have reversed initialized method that will take that object or parameter which we have passed from page mode would be. Let's do this example via coding. Alright, so here inside of a welcome page model, we're using navigations, but we are not sending any parameter to the homepage model. Now let's try to send this username to the homepage model. So here, along with this homepage model, let's pass the user name value of passing a parameter here. You can also pass an object if you want. Alright, now we have passed a parameter and it started to go to the homepage model. And there we need to receive DEC parameter. So inside the home based model, let's override the initialized method that comes with a fresh MVVM. And here we need to accept the parameter that we have passed from the welcome page model to this homepage model. As you know that we're sending some string value from the welcome page. So inside the homepage model, let's kept it this object data result in some variable. I'm need to add a string type variable and name it parameter. And now let's assign these data to this parameter. Now we're getting an error because this init data is an object and we are storing in a string. So there are different ways to resolve that kind of problem. The first is to use the variable of string. And the second is to cause this init object into a string. Alright, here we go. Now, let me get this application. And before doing anything, let's add a breakpoint along with this init method. Now, on this welcome page, we're going to type something in this entry field. Unless press this button. As soon as we press this button, the call hits the break point. And here inside this home-based model, and you can see that we have got the value that we have sending from the welcome page moral. Alright, that's awesome. Now let's stop this execution and just go to the homepage. And there, let's add a button control. And I'm going to set the text property of this button to go back. And let's add a command and bind it with the co Back command. But so far we don't have any command property for this button control. So let's go to the homepage model. And there I'm going to add our command property and name it, go back tomorrow. Right after that. Let's add a constructor and just initialize this command. And we need to add an action for this command. List name this, go back. And finally, we need to add a method. And here we go. So far, I have not done anything new because we have already covered the commands earlier in this course. So just make sure you have bind this. Go back. Come on with this button control of this homepage. Alright. Now let's say when the user will press this go back Command, did we need to switch the user back to the previous page. So inside the homepage model, we have this go back method. And there we're going to add the code for navigation. Lets use this core methods class that comes with the fresh MVVM. And earlier, when we have used the navigation's, then we have used this push page modeled method. But now we are not going forward. In fact, we're moving back from the homepage model to the welcome page modal. So let's use this pop page Model Method. Alright, let me add this application. And let's go to this homepage. Now we're on the home page. And there if I press this button, it will take us back to the welcome page. We're going to pass some parameter from this hope based model to the welcome page, moral. So let's stop this execution and own the homepage model. You can see that this pop model will also take an object. So let's pass them message here. And now we all know that when we have pressed a button, it will take us back to the welcome page. And we need to get to this message on the welcome page. So let's go to the welcome page. And there we need to override the reverse initialized method that comes with the fresh MVVM package. Now this reverse initialized method will accept the object or a parameter that we will send from this homepage model. Alright, let's add a variable here and name it message. Then let's assign this return data object. Now, I'm going to have this application because I want to explain this concept via technical implementation. So here we are on the welcome page. And from this welcome page we can to the homepage. Now from this homepage, we want to go back to the welcome page. But let me add a breakpoint with this diverse initialized method that we have written in this welcome page modal. Alright, now let's go back button. And have you noticed that the call is the big point? And here you can see that we're getting the string message that we have sent from the homepage model. This welcome page modal. Alright, that's also, so far we have covered the navigation's with parameters and without parameters. And we have also worked with the override initialized and reverse initialized method that comes along with the fresh MVVM. So that's all from this module. And I will see you in the next section. 22. Dowload The Github Code For Rest Api: Hi guys. In this module, I'm going to show you how you can get the application backend source code. Well, I have designed the RESTful API in ASP.net, and I have published a code to the Github. Let me open my GitHub profile. And as you can see that we have the following project. So all you need to do is just dollar this project. And once it's downloaded, I'm going to perform few actions on this project. The first thing is I'm going to uncompress this project right after that. Abby, to open this project inside the wheel studio. And here we go. Well, this is an ASP.net web API project. And in this course, our focus is to understand the MVVM with Xamarin Forms, not the RESTful API. Because RESTful API in ASP.net is a completely different topic. And if you want to learn the rest API with ASP.net or ASP dot and core. Then check out my other Udemy course. That is the complete guide to build RESTful API in ASP.net or ASP.net code because they, I have explained every single feature of restful web API. Now you are taking that if we are not going to cover the ASP.net RESTful API in discourse. That's why we have downloaded this SP dotted Web API project. The answer is pretty simple. In this course, we're going to consume the API inside the Xamarin Forms project. By right now, we don't have any API or application programming interface. And in this project, our API validated. And we're going to publish the API or the Internet so that we can consume the API inside our Xamarin Forms application. And that's why I'm showing you this ASP.net EPA project. Alright. Now the question is, is hosting a cloud service we're going to use to deploy our web API. Right now there's no free hosting service. We will launch our Web API, but Microsoft offers free 30-day trial to all the new customers. So in this course, we're going to deploy our web API on Microsoft Azure Cloud. I want to tell you that I don't have any partnership with Microsoft Azure. And they don't give me any sponsorship to promote their platforms. And maybe in Fisher, they will change their Free Trial Policy to the premium one. But at this moment, Microsoft Azure offers free trial. So why not we use it. Also. If you have some money and Martha spend it on premium third-party hosting service, that is totally up to you. For me, Microsoft Azure is the best platform to deploy the ASP.net web API. Right now, in the next module, I will show you how to configure this application, backend. 23. Create Azure Web App: Azure web apps twice a highly scalable self-pacing web hosting service. This peak starts shows how to deploy your ASP dot Web API to Azure web apps. What does video to see this quickstart inaction and then follow the steps yourself to publish your first API on Microsoft Azure. Before going forward, make sure you have set up your Azure account. The first thing I'm gonna do is just click on this Create resource option and then select Web app. Because I'm ready to deploy the web API on Microsoft Azure. Then we need to choose the subscription level. Right now I'm using this real studio subscription. You may have a different subscription depending on the nature of your account. Right after that, we need to select the Resource group. Well, our resource group is a logical container into which Azure resources like databases, web applications, and things like that are placed and manage this kit. And here I'm going to provide a name to my resource group. Let's hit OK. And now we're going to give a unique name to our web app. And we will access our web app. Why this unique URL? So here I'm going to give a unique name to my web application. And we have developed our Web API in ASP.net. So in the run stack, all you need to do is just select this ASP.net version. And right after that, let's go and hit this review and Kate option. And this gate option again. Then press this option and it's going to validate the web app. And soon our deployment starts. And this will take few minutes. You just need to wait for a few seconds. And soon we will get a notification in the notification section that says our deployment succeeded. And now let's click this pin to Dashboard option. And this will allow us to open this web app from our dashboard menu. Alright, now let's click this web app from the dashboard menu. And this will open our web properties and all that stuff. Now, all we need to do is just click this Get Published profile, which our configurations are placed. And we just need this file to publish our web app from real studio. So let's download this published profile and save it accordingly. Now, if you go to a web app URL, then you see a simple page. And we have not published our Web API yet. So in the next module, let's get SQL database inside the Microsoft Azure, and then we will publish our web app. All right, see you in the next module. 24. Create Azure SQL Database: In the previous module, we have preheat the web application on Microsoft Azure Cloud. And now in order to publish the ASP dot and Web API to Microsoft Azure, we need few more things. We need to get our database inside the Microsoft Azure. So let's go to this SQL databases option. And then let's get a new database by pressing this ad option. And here we have been asked to choose the subscription level and the resource group. But I'm using the mysteries. And I have previously used this subscription level, but I have edited the web app. And right after that, we need to select the Resource loop. So already to do is just select the resource group that we created when we have added our web app. And here we go. Now we need to provide food retailers for our database, like the name of the database and the targeted server. So here I'm going to give a name to my database. Right after that. I'd need to get a server where we'll put our database. All right, here, I'm going to add a server. First. I'm going to give a name to my server. And then we need to provide fairytales like username and password. So here I'm going to add these details. And then we need to select the location where we will get the server. Just select the nearest location server. Here, I'm going to pick this location and just press this select option. Now we can also select our compute option. Like if you know that you don't need a big database and your database size is small, then you pick the options from this list. Go with basic, standard or premium plan. I'm just moving with this standard option. Alright, now, let's let this review plus Create. And soon we have been asked to create this database. And here we go. Our deployment is going to start and it will take few minutes. We just need to wait and be patients. Sometimes this will take up to five minutes. Alright, I would deploy, it is successful. And now let's click this pin to Dashboard option. And let's move this database to the dashboard menu so that we can easily find the database from our dashboard menu. Alright, so far we have in our database. Now in the next module, we're going to publish our web app. So I will catch you in the next module. 25. Publish Web Api To Azure: In this module, we're going to publish our Web API to Microsoft Azure cloud. In order to publish the web API, let's switch to the studio. And there we need to start with a worried, well, we want to make a connection of our Web API with the Azure SQL Database. And in order to do that, we need to set that connection string upward database. Now the question is where we will put our connection string. Well, we just need to pass the connection string in the Web dot config file. But now there is an other question, and that is how to get that connection string of the database that we have kinetic earlier inside the Microsoft Azure. Well, it's quite simple. Let's switch back to the Microsoft Azure Portal. And in order to access your data connection string, just select your database and then simply copy your connection string. Then just switch back to the studio. And in the Web dot config file, let's replace this connection string with the new one. And here we go. Now we need to provide that username and password avoid database. We have defined when we teach it the SQL database on Microsoft Azure. So let's add a username here. Right after that. Let's add a password here. And now there is only one step left. And that is to publish this Web API on Microsoft Azure. And for this purpose, just right-click on the project and click publish. Then we just need to click on this option that is Import File and simply select the file that we downloaded earlier from Microsoft. And here we go. Just wait for a few minutes because now we studio is good to publish our Web API to Microsoft Azure. So just keep this going. Let me tell you again that you can download the published profile from the web app option. We have already done this profile, but if someone missed that part, then limited you once again that you need to go to your web app. And here you can simply get published profile. Alright, our 3D Studio is doing work for us. And right now as you can see that deploying files slowly and slowly. Getting this whole deployment, you need to make sure that you are connected with the Internet. Alright? Muster department succeeded. It will automatically load the web API inside the web browser. And we have successfully deployed our Web API on Microsoft Azure. Now, in the next module, I will show you how you will consume the web API. Alright? I will catch you in the next module. 26. Test Rest Api: In the previous module, we have published our Web API on Microsoft Azure. And now in this module, we're going to test our Web API where swagger UI. So I hope you have published your web API. If not, then please watch the previous episodes of this course. And if you feel any shooting regarding EPA deployment, then feel free to ask questions on the queue boat. All right. Now let's come to the point. When I was you publish the web API on Microsoft Azure, then you will see that kind of UI with some ASP dotted messages. I'll do need to do is just write swagger along with this URL and hit enter. And here we go. You will see this swagger UI for API documentation. Now with this swagger UI, we can test our API without going into the postman or some other tools for EPA testing. Right now we have two sections for API, the APA category and the API coat. Now let me go to that category section. And inside this, we have this post get, put and delete requests. We're interested to use the GET and the post request of this category. If we call this get endpoint, we will get nothing because there is no data present inside our Azure SQL database. So we need to add some data inside our SQL database. And in order to add the data, we need to perform the post request. So let's go to this post request. And they're just click this section. And it will automatically load the simple decent data into that area. Now here we have different values like category ID, which is of course the primary key and its auto incremented. And we don't need this, so let's remove this. Now we have different fields for title and color-code. All right, in the title, we'll add the category title for quote. And in that colour, we will add some hex color coat. Let me add the category title and the color-code. So in that category, let's add action. In the color code. Let's add the following color-code. You can find these characters from Google. Now, when I send the request, then we will get the status code to one, which means that our record has been created. Similarly, let's add another category and pass the category title. That is beauty. And now, hey, in the color code, let's add the following hex color code. Alright, now let's send the request. And here we go. Our record has been edited successfully. Alright, now let me go to this get endpoint. Well, when we have sent the request, then we have got these empty square brackets, which means that there is no record found. And now we have added to records. And it means if I send the request, then we'll get the data so that we send the request. And here we go. We've got the JSON data. Now as you get past the category title and the color code here, by using. Post a request. I'm going to pause this video because I'm going to enter a few records here. Alright, now, if I send the get request, then we have enough records. Now let's jump to the courts section. And there we have different endpoints, but we are interested to work with the get end point and the post endpoint. So if I send the get request, then we got nothing because there is no data inside our database for this course endpoint. So let me go to the post requests. And there I'm going to add the data. So let's click this section and it will load the simple descend into here. And now we don't need this id because this will be automatically genetic inside of a database. Then we need to enter the record for quote. Here We have different fields like go title, description, author, category, ID, name, and pivoted at date property. So let me add some data here for core title, description, author, kinetic add date, property, and this category name. Alright. Now let's send the post request. And here we go. Status code is not to one, which means that our record has been added successfully. Now, let's add another record in the same category. Here we go. Let's go to the GET request, and here we need to pass the category name. So let's pass this action category here. And if I send the request, then it will load all the course that blocks to the action category. Now let me add another quote. In the beauty category, you can find the course from Google. Right here. I have added some details for this coat. Now let's send the request. And there were record has been edit. All right. Let's go to the GET request. And there, if I send the get request with this action category, then we will only get the course that blocks to the action category. And now, in order to get the course against this beauty category, we need to pass the beauty category name in this field. And now if we send the get request, then this time we will only get the quote that belongs to the beauty category. I'm going to pause this video because I need to write a few quotes. I have attached these course along with this video so that you can download and add the record. So far we have tested our Web API where sluggers UI. And now from the next section, we're going to start working with our seven Forms application. Alright, I will see you in the next section. 27. Adding Csharp C# Model Classes: Hi guys, welcome to this course and I'm super excited to get a fresh MVVM based application with you. Earlier in this course, we have learned the important concepts are fresh MVVM. And now we're going to utilize those concepts and make a complete application from scratch. Let me go to the studio. And there, inside the Pages folder, we have different pages. Now, we don't need these because we're going to make a Course application and we'll allocate new pages for that application. So let's get it from these pages. And similarly, let's delete these paid model glasses. Alright, now let's start over. Well, first of all, let's go to this model's folder and they're happy to add some modal glasses. So here in the model folder, I'm going to add few more classes. But for adding a modal glasses, let's turn back to the web API. And if we send the get request to this category endpoint that you'll see that we will get the following JSon data. Similarly, when we send the get request against this goat endpoint, then we will get the following JSon data. So we'll lead to classes. The one is for category and the other is for goat. Let's go back to the studio. And there inside the models folder, I'm going to add a modal glass, and I'm going to name it category. Just make this class public so that we can access it anywhere. Insular project now indicate the C-sharp model properties from this JSON data. So let's start with this category and bind. Well, let's copy this, this editor. And then let's open a website that is designed to see Shop.com. And then I'm going to paste the JSON data that I have copied earlier. Now, if we click this Janet option, that it will generate a C-sharp loss from this JSON data. Now we can add those properties in our model glass. So let's copy these properties and just switch back to the studio. Then in the category class, let's face these properties. Alright. Once again, let's add another glass. And this time I'm going to name it quote. Right after that. Let's go to the web API. And there, let's copy the JSON data from the code section. And right after that in the adjacent DC shove website. Let's base this dissent data and make seizure classes. Alright, heavier. Now, all we need to do is just copy these properties and switch back to the studio. And here inside the Court class, let's paste these properties. Alright, awesome. So far we have created the model classes. And now in the next module, we're going to create a service layer. So I'll catch you in the next module. 28. Adding Services For Api Endpoints: In this module, we're going to get a service layer. So without wasting any time, let's switch to the studio and let's add a new folder and just name it services. Now, inside the folder, I need a glass where I can place my matters to call these API end points that we have deployed on Microsoft Azure. So what I'm gonna do is I'll simply right-click on the services folder and then add a new class and name it rest services. Now inside this class, I'm going to get a method so that I can get like categories from these categories endpoint. So let's get a method and emit GET categories. Don't worry about the return type of the method. We will change it later. Now we need an HTTP client so that we can communicate with the server. So let's get a new instance of HTTP client. Now we need to send a get request to the server. And the client will make our life easier because this will take a request to the server. So in order to send the request, I'm going to use HTTP client dot GetString async method that takes our request URI. So here we need to pass over API URL. Let me go to my API documentation, and let's copy this API URL and paste it here in a double quotations. You need to put your own API URL here. Well, this is an async method, so we need to use the await keyword here. Alright? But you see another error, and that's because the await keyword can only be used with an async method. So let's make this method asynchronous by applying it async keyword. Alright, this line will send the request and hostile request hits the server. This line will return the status code and the content. So let's store this in some variable. And now I'm going to name it, responds. Well with this response, we can get the content that we will receive from the server. But the problem here is that the server will send that response in JSON format. And in order to display the data inside those false application, we need to deserialize the JSON data. Now the question is, how do destabilise the disseminator examined forms? Right now there's no way to initialize the distance data directly in Xamarin Forms. And that's why we need a new get package name S Newton soft dot JSON for serialization and deserialization purpose. So less likely on the solution. And simply select this managed rooted prejudice. And then I'm going to search for descent.net. And here's you go. You'll see this package inside this new window. Well, it's most trusted and most reliable that is so far in the new it. So what I'm gonna do is install this Newton's of dot JSON inside my solution. All right, listen solid. And it will take few seconds. Just make sure you are connected with the Internet. Once it's installed, you'll see a success message in the output window. Alright, now we need to consume this package. So let's close this new good window and simply jump back to the rest service class. And here I'm going to use Jason convert dot dc lies object. Well, this, this and convert comes from this namespace, that is Newton's of dot JSON. And this namespace comes from this natives of package that we have installed earlier. As you remember that we are getting the list of objects from this API. And that's why I wanted to pass the list of category and then pass the response variable here. Well, this is post variable contain all the distant data. And this whole line will convert that Jason according to this category class. And it will map that Jason with the properties of category class in the form of c sharp objects. Alright? Let's use the return statement here because we want this function to return the list off category. All right, now you'll see an error here. And that's because we need to return the list of category in this method. So for this purpose, let's say the type of this function to list off category at this time, juicy and error. And that is the return type of this method must be void. Does our task of t, where t is generic? It could be anything. Well, as you can see clearly that this method will return the list of category. So we cannot use the void and task here. Rather, we need a task list of category. So let's use a task list of category as the return type of this method. And here we go. So far, we have created this getCategories method. Now let's get another method for this quote end point. So if you go to the API documentation, then here you can see this goat endpoint. And we are interested to use the get request for this quote and point. Well, this GET request is almost similar to the category's endpoint. There's only a small difference and that is this GET request of this coat will also take a string parameter. Let's turn back to them in studio, their API to copy this method. And then just paste it here. Now this method is for quotes. So let's knit this method to get courts. And let's use that corresponds in this method. All right, let me go to the API documentation. And there you can see that we have used the string parameter in this course and point. So we need to send this category name along with this request, just like that. Alright, so let's copy this URL. And then in the studio replaced this URL. And right after that, along with this category name, we need to pass the value so that we can get the course against some particular category. All right, so far, this is just a hard coded value and we need to pass some dynamic value. So let's add a string parameter in this method, an image category. Now, let's concatenate this category parameter along with this URL. Now whatever value we will pass to this method, it will pass that value to this URL. Alright, I hope that makes sense. Just make sure in this method we are using the quote class. And also make sure to deserialize the JSON according to this quote class. Now let's add another method. And Emmett post caught. Well, as the name suggests, this method will be used to add the course. Alright, let me go to the API and the code section. We have this post method. Lets expand this. And here you can see this post request will take the following quote properties in the form of an object. So let's go to the studio and they're less past our code object in this method. Alright. Now, in order to call a web API, we need an HTTP client. And this HTTP client is responsible to communicate with the server. Because without this HTTP client, we cannot call the API enzyme forms. So let's get an instance of HTTP client in the body of this method. Now, we need to understand the serialization and deserialization. Well, when we want to send that data to the server, then we need to convert our data to decent format. In other words, if we want to send that data to the silver, then we need to convert C-sharp objects to JSON format. Or in simple words, we need to serialize the object. And similarly, when we want to get the data from the API, then this data will be in the form of JSON. And in order to show that data in our application, we need to convert this decent data into C sharp objects or insipid alerts, we need to deserialize the JSON data. Well, we have already covered that desalinization section in the getCategories and get ghost method. And now this time, this is a post request and we need to provide the JSON data to the server. So we need to serialize this goat object. All right, now let's serialize this code object. And for this purpose, first, I'm going to call distant convert dot serialized object. Well, just convert dot CLI's object comes from this namespace that is Newton's of JSON. In this serialized object function, we need to pass our object. So let's pass this object. And here we go. Now let's saw it in some variable. And I'm going to name it JSON. You can name it whatever you want. Now follow who it. Let's switch to the API documentation. And you will see that when we want to send a post request, then we'd need this application slash JSON. Now the question is, how to set this application slash JSon in our Zim Forms application. Well, it's quite simple. Let's switch to W studio. Then we just need to call this stint content and pass the values inside this. First we need to pass this JSON variable. Then let's pass this encoding stink forward, that is UTF-8. Well, it means that we can send that data to the server in any human language, I mean, along with English alphabets, you can also send other language characters like French, German, Chinese, et cetera. And finally, passed on media type. Well, in our case, the immediate IPs application slash JSON. So let's pass it here. Then store the result in some variable and emit content. Basically, this thing called class creates a formatted text appropriate for the HTTP server of our client communication. As you know that this is a post request. So this time examined forms, we need to call the post method. So let's use this institute be glad object. And along with that, we can pick this post async method. Well, post Async will take two parameters. One is EPA's URL and the second is the content that we want to send to the server. So let's copy that EPA URL for this post requests. And then we sit here right after that. That's passed this content here. Also, we need to take care of asynchronous programming because then we call this method, then it will post but data to the server. And in the meanwhile, our application will be in a blocked state. And right now this method will be synchronous and it will block the aggregation July, our user interface. And in order to work with asynchronous method, we first call this await operator here. And you can see that await cannot work without async. So let's add the async keyword along with this method. Now, when we call this method that it will post the data to the server. And in the meanwhile, we can also perform other tasks in our application. Now, let's store this in some variable and intimate response. Well, in Segre EPA documentation page, when we send the post request, then if the request is successful, then we'll get dust that scored. Similarly examined forms. When to call this is success status code with this response, it means that if we post the data successfully, then we'll get true. Otherwise, we will get false and we just need to return. This is postdoc, is success status code. Also, we need to set the return type of this function to bool because we want to return some Boolean value in this function. But you will see that we cannot use the bool here. However, we can use the task here. So let's use the task keyword. Then inside this, let's make the type t2 bool. Alright, that's awesome. We have created this method. Now from the next module, we're going to get the application user interface and consume the API. So I will catch you in the next module. 29. Implement Quotes Category: In the previous section, we have heated the model and service classes. And now in this section, we are going to get our Xamarin Forms application with alcohol fresh MVVM at will make a complete application from start to finish. So before doing anything, I just want to tell you that please make sure you have some knowledge of XML. Because in this course our focus is to understand the concepts of fresh MVVM. And that's why we're not going to discuss the resemble in that detail. Now, I need to add that kind of page four categories. I have attached the XML code for this user interface along with this video so that you can download and use it accordingly. Alright, here is the XML code for this page. We're going to add a new page, and that is category page. And similarly, we will add a page model for this category page. So let's go to the pages folder. And I'm going to add a new content page and just name it, getting a pitch. As you know that for every content page, we need to add a page modal. So let's add a class in the page models folder and name it category page modal. Alright, now we will come to this page modal later. But first, let's go to this category page. And there we need to add the code for the UI or do the interface. Just download the file along with this video and you'll see the folly code. Our duty to do is just copy these lines of code. And in the category page, let's get it from this code and paste the code that we have copied. Now what I'm going to do is I will switch to the Page modal class of this category page. And there, first of all, let's inherit this class from fresh base based model that comes from this namespace that is fresh MVVM. Now let me tell you that when we call our getCategories method that's present in the rest services class. Then we will get the list of categories. So here in the Category page model, let's add an observable collection of category, an image categories. Well, with observable collection, we can add the result that comes from the API and then bind this optimal collection with the item source of our HTML page ListView. Now I'm going to add a constructor inside this category page model where we can initialize this observable collection. Alright? The shorter snippet for like a circular is CDR and hit debt. Now here in the constructor less institute this observable collection or refine. Inside the constructor. We're going to call our Web API. That's of course the bad practice and is not a good practice to write all the code in the constructor. So what's the best approach? Well, I'm going to get a function outside the school sector and name it load categories. And then it said the constructor just called this load categories method. Alright, that's a good way to write the code. Now we are going to cause a web APIs method that we have written in the rest of this class. So in the rest of this class, we have written this getCategories method. And now we need to call this getCategories method from getting any space model. So back to the category page modal. And they're in this load categories method. We're going to call the getCategories method that Satan in the best services class. And in order to call that getCategories method, first, I'm working a new instance of registers, this class. And then with this object, now we can access all the methods that's present in the registers this class. At this moment, we are interested to use this getCategories method. So let's pick this method. And here we go. Well, this getCategories method is asynchronous, so we need to use the await keyword with this call. And now we can see this desktop await operator can only be used with an async method. So this make this load category method asynchronous by using the async keyword. Alright, this getCategories method will it then this list of categories. So that's captured in some kind of variable. And I'm going to name it. Again. Let's add a forest look for nutrition so that we can add the categories inside our observable collection one-by-one. So here I'm going to add a false loop. And then let's add this category inside our categories observable collection by using this getting it is collection dot add method and pass this getting any variable here. Alright? This will add all the categories in this observable collection. Now what about the UI? Because so far we have get the categories in the page model and we need to pass these categories, that category page. So let's go to the category page. And inside this ListView, let's add the item source property, then Abner to bind the item source property of this ListView with the categories observable collection that comes from the category page modal. But here you will see that we have this level. And in order to show the category title in this level control, we need to go to that category glass that's present in the models folder there. Let's copy these titled Poverty. Then in the category patient, let's buy the text property of this level control with the title property of this category glass. Also, we know that this category service will also return the color-code. So let's go to the category glass, and let's copy this Kirkwood property. Then in the category page, let's bind a property of this stack layout with a color-code property that comes from the category glass. Now before to test this application in the device, we need to add one more thing, and that is to register the main page, our root page inside our app several or CSV files. In the app several CSS file. Let's add this category page modal here. And when I run this application, then you can see that by getting a page is loading on the device. And soon we will get all the categories on this category page with some dynamic background-color. So that's all from this module. Now in the next module, we will start with dependency injection and envision up control. So I will catch you in the next module. 30. Implement DI in Fresh MVVM: In the last module, we have talked a little bit about the inversion of control and dependency injection. Now let's implement this inside our fresh MVVM application. So here first of all, I'm going to add a new folder. And I made interfaces. Then in this interfaces folder, let's add an interface. An image I rest service. In this IS service. We need to add some matters without anybody. So let me tell you. When we add some methods, the interfaces, then we need to add the body of those methods where we'll implement this interface. So in short, what I am trying to say is we will define a methods in this IEEE restaurants interface. And then we will add the body of those matters in the rest of this class. Let me go to the less there was this class. And there we have added these methods. The one is getCategories, The second is the great course. And the last is used to post the course. For a moment. Let's combine this code. Then let's jump back to the IE destinies interface. And they're less ad te functions for getCategories, get goats, and post coat. But remember, we will not add the body of this function inside the interfaces. In that class. We have already done the functions and we have also provided some decent names and the written dives to these functions as well. So then we copy that get category function name with the return type. Paste it here in the restaurants interface. Similarly, let's copy the get coarse function with its name and the return type and paste it in the eye restaurants. And finally, let's copy this postcard function name and the return type and paste it into I rest service interface. Now we have done all the things in the interface. And now we're going to implement this interface in the rest of this class. In the US services class. Let's implement this IES service interface. And we need to import this namespace because ISS is present in some other folder. Now you see some kind of error. And that's because we have three methods inside of Interface. And we need to add the body of these methods inside of it, registers this class. So let's use the veal studio intelligence feature, and let's add these methods. Alright. Now in these methods, we will write the body. But we have already done this method body and the naming of these functions are also the seam. So let's uncomment this code. And right after that, let's remove these methods. So far we have just create an interface and implementing that interface in the rest of this class. Now we're going to use the inversion of control and dependency injection. Well, at the time of recording this video, Z7 forms don't have any inversion of control and dependency injection. But you know what ways using the fresh MVVM. And the cool thing about this fresh MMM is that it comes with a built-in inversion of control container. And we can use dependency injection as well. So let me just do that category page model class. And there we don't need to create the instance of this rest services class. Instead, we'll call the getCategories method with some other way. So let me add a field of type, debt service and image underscore, rest service. Then intricate structure. I'm going to use a constructor injection. And for that, let's add a parameter of type i restaurants and image rest service. Now let's assign this rest service to this underscore rest service. So this is the constructor injection. And we're injecting the dependencies whack instructor. Now we don't need this rest service object. So let's remove it. And in order to call this getCategories method, let's use this underscore rest service field. And you can see that we have not created any East ISAF relatives is class here because it's not the responsibility of category page model to get an instance of restaurants is class because this will wireless the object oriented programming rule of single responsibility of a gloss and dependency injection will solve this problem. And instead of creating the arrest of this object here, someone else will do it. Pass to whoever asks for it. Then getting any page model, don't get any instance of restless class. It will ask for it and get it Wacker structure. Now the question is, who is responsible to create an instance of a rest service class and pass it to the constructor of this category page model WACC is secondary injection wells. For this purpose, we will need an AUC or inversion of control container. Now we need to add the inversion of control container because it's the responsibility of IOC could did it when I was, you need an instance of an asterisk class. Now the question is where we're going to add the IOC container? Well, we will do this in an assembled RCS file. So let me go to the ABS MOC is file. And there in the constructor, we will add the IOC container. Also. Just make sure to add the IOC container before your application main page logistician. Otherwise you'll get an Edit. Ok, well, fresh MVVM comes with built-in IOC container. So let's add this fresh AUC gloss. And with that, Let's pick this container property. And along with this container property, let's use the register method. Now let us pass the interface that is either histories. And let's pass the class which we want to map with this IE rest service and debt class will be rest services. And this line means that whenever we run this application, the call goes to the IOC container at this will map the IRS services with the rest of this class. And we'll create an East itself rest services class. Now we have done everything. So let's run this application. And here we go. So we'll get the categories. And as you can see that we will get all the categories in this ListView. And this time, we have retrieved the data from the web API via dependency injection and inversion of control veteran. Now, throughout this course, we will use the dependency injection and inversion of control. If you have any, feel free to ask me. Alright, I will see you in the next module. 31. Implement Quotes List: In the last module, we've explored the dependency injection and inversion of control patron. And now in this module, we will implement the course list page. Let me show you what we are going to achieve. Well, as soon as the user will tap some specific category from this ListView, then we will navigate the user to some other page. And there he or she can see the list, of course, that blocks with a particular category. So first of all, we need another page and page model. What I'm gonna do is I will right-click on this pages folder. And there I'll need to add a content page and emit quotes list page. Alright, here we go. Now for every page, we have to add the page modal as well. So let's add a new glass in this Page, Models folder and name it course list page Model. Now in the category page model, we need to handle the ListView selection. Well, it novels M Forms application. We mostly add the selection event of ListView in the code behind file. But this time we're working with the MVVM and we cannot use the evil clique in the code behind. So let's simply add up property by using the snippet prop full and hit tab. Now, just make the return type of this property to category, because we need to send that category object to other page when we pressed up ListView cell. Alright, now just nip this field who selected category and name this property to Selected Category. Alright, let's go to the category page because there we need to bind the selected item of the list view with this Selected Category property. So here we are on the category page. And inside this ListView, let's add a selected item property and then bind it with the Selected Category property that comes from our category page Model. Now let's go back to the category page model. And there we need to add some code so that when we press the list, you sell it, then we can jump to some other page. So here in the center of this property, let's add the code for pH, model variation. And that is core methods dot push based model. And then we need to pass the name of Pais model where we want to navigate. And that is course list-based model. All right, and finally, we need to pass the value of the ListView cell that we have selected. So let's pass this selected category here. We just need to check the null before this code. And that is if the selected category is not null, then execute this navigation code. Now, we need to go to the course list paid model. And there we need to accept the Selected Category parameter that we will pass from this category based model. So here we are on the course list-based model. And now the first thing I'm gonna do is I will inherit this class from fresh base paid model that comes from this namespace. And right after that, let's add our right initialized method that will accept APP parameter from our category page model. Alright, here we go. Now, we know that when we pass the value from category page model to this course list-based model, then it will be an object of type category. So here, first of all, I'm going to add a field of type category and limit category. Then in this override initialized method, let's assign this object to this field. And we will get an error because we need to cause this object to that category glass. And here we go. Now let's run this application. And here on the categories page, we're getting the categories in the ListView. Okay, now let's add a big point with this method that's present in that course, list-based model. And if I press the category cell, then you will see that the call hits the break point. And you can also see that we're getting the falling record as a parameter. Let's continue this and here we go. We're on the course list page. Alright, now, we're going to add the UI of this course page. So let me stop this execution. And let me tell you that I have attached a source file along with this video. So all you need to do is just download this file and just copy the source code. All right, I'm going to copy the source code of this level. And then in the course list page, let's paste this code. Now, we're going to consume the API. So in the course based model class, we will do the similar things that we have done on the category page modal class. Like we have used the constructor injection. We have called the API and store the result in the observable collection. And we're going to do the same thing on this list based model class. So here in this course, list-based model class, let's add an observable collection of type quote, and now it quotes. Then let's add a private field of type I, rest service, unary underscore rest service. Right after that, I'm going to add a constructor by using the snippet that is CDR and hit debt. And here we go. Now in this constructor, let's pass a parameter of type I, rest service and emit less service. And finally, let's assign this parameter to this field. So we have done the constructor injection. Now we're going to consume the API. But before this, just instantiate this observation collection. All right, now here in this initialized method, I'm gonna use this underscore rest service. And with that, we could pick the get method. And this Get Quote method will take one parameter of String type. And we need to pass the category title here. So all we need to do is use this category field. And with that, we can access this title property. Now, this is an async method. So let's use the await keyword here and also make the initialized method asynchronous. This method will return the list of quotes. So we need to capture the zell in some variable, and I'm going to name it quotes. Then we need a foreach loop or iteration because we want to add the record in this observable collection one-by-one. So let's add a voice loop. And let's add the code in this course, observable collection. Now, that's all from this course list-based model class. And it's time to add some code in the course list page. So I will copy this course collection property. And then in the course list page, let's add an item source property of the ListView and bind it with the courts observable collection that comes from the accord list page. Also, we need to bind the modal properties so that we can get the data in these labels. I've been to the court model class and we have different properties. At this moment. We only need two properties and these are Author and description. Because we need that kind of design in which we can only display the author and the description. So let's bind the author and description in the court's list fish here in the coarsely space, humbling to bind this liberal text property with the description. And then let's find this label text property with the author that comes from the model class. So that's all. And now started on this application. And here we go. Our application is loading and we'll get the categories in this ListView. Now, if we press this category and it will take us to the course list page. And there we can get that course that belongs to this category that we have selected. Alright, that's awesome. So that's all from this module, and I will see you in the next section. 32. Implement Quotes Detail: In the last module, we have explored a course list page. And now in this module, we're going to explore the code detail page. But before this, let me show you what we're going to achieve. So here we have our category page. And when we select any category from this list, that it will take us to the course list fish. And there we can get the course according to the category that we have selected. And we have already implemented dysfunctionality. Now on this page, when that user will select any coat from this list, then we'll navigate this user to the court Detail page. And there he can see the details and can copy the code or shared this coat. So let me add a new continent page inside the Pages folder. And I'm gonna name it quote, detail page. Alright, here we go. Now in the Page Models folder, we are going to add a class, an image, quote, detail page model. Alright, so far we've done nothing new here. We have just edit the page and the page moral class as well. Alright. Now let me tell you that when that user will press the cell from the code list page, then we will never get the user to the code detail page. So I have already explained you how to move the user from one page to another when he will select the ListView cell, like we have done this L2 selection already in the category page. Just revise the concept because we could reuse the code. All right. Now in the code list page to scatter property, budgeting the snippet, prop full and hit Tab. And this time I'm going to set the return type of this field and this property to coat because we want to send the code object when the user select the list view from this Court's list page. Alright, now let's set the name of this field to selected coat. And similarly, let's set the property name to selected quote. Alright. Now we need to check the null condition here. And right after that, let's pull the user to the quote detail page with the selected quote parameter. So here I am going to use the core methods, push based model. Then we need to pass debt, which model where we want to navigate. So in our case, we want to navigate to the quote, detail page Model. So that's positive. And finally, response this selected quote here as a parameter. Alright? So we have still then nothing new here. Because if I go to the category page model class, then here you can see that we have already done the selection stuff. The only difference is that for the category pays model, we have used the category object. And here on the court list-based model, we are going to use the code object. Alright. Now just go to the course list page. And just bind the selected item prop the ListView with the selected code property that comes from this course list page model class. Now, we need to go to the court detail page modal. And their first of all, let's inherit this class from fresh base based model at assaults a namespace. Right after that, let's overwrite the fresh MVVM initialized method here. And inside this initialized method, we'll receive the code object that will send from the court lists Pysch model class. Alright, now we will know that we want to send the code object from quote, list page model. And in the code detail, we have to receive that object. And there is no EPA involved on this quote detail page. So here let's add a property of type goat and emit quote. Alright. Now, initialized method. Let's assign this parameter to this quote property. Also, it's throwing some object clustering edit. So let's solve this object clustering. Now, let me add this application and let's add a breakpoint with this initialized method that's present on the court detail page. Alright, let's select a category. And we are all the course list space. And from this page, if we select any quote, then the car hits the break point. And you can see that we have got the falling data here. Now, we need to display this data on the code detail page. So if I continue this execution, then you'll see nothing here because we have not HDTV, the UI of this quote detail page. So let me stop this execution. And then let's add a UI code for this quote, detail page. I have attached a UI code for this court detail page along with this video. So you just need to download the code and copy and pasted in the code detail page. Okay, I have the following code. And I'm going to copy this code and paste it inside this quote detail page. I'm going to show you what we're going to achieve on this quote, needle Beach. We're going to display the quote, author and description on this quote Detail page. You can also display some other properties if you want, like go title, tote, hated date, etc. But let's keep it simple. Another question is how to find the coat, author and description on this quote, detail page. Let me go to the court Detail page. And there, you know that when pressed any code from the course ListView page, then we got that coat here in these initialized method that's present in the code Detail page. And we have assigned that initialized data to this property. But this will get all the properties now in artist separate the properties in c-sharp. We do this code that is quote property and use the dot operator. And now we can pick the properties accordingly. But let me show you how we can do the same in the XML Page. Serious copy this port property. And in the level of this code detail page, let's bind the label text property of this label with the following code. That is quote property that comes from the court digital page. And as I told you to get the properties from this quote property in c-sharp, we use quote dot and picked up property as similarly in XML file, we'll use the same thing. That is quote dot, the property which we want to bind. In our case, we want to bind to properties that one is authored and the other is description. So let's bind the author and the description in the Zehmer page like this. Now, let me let this application. And here we go. I'm going to press this category. And it will take me to the courts, the space. And if oppress some code from this list, then we are on the quote, detail patient. Well, that's awesome. Now let me add a few things because we want get kind of designed for this quote detail page. But so far we don't have these two images here inside our code detail page. So what I'm gonna do is I will add the images in the Android and iOS Resources folder. I have attached these images along with this video. So you just need to download these images and put it inside the iOS and Android associates folder. Alright. And once we're done with the Android, then we'll add these images in the IU sources folder. Now, here on the quote detail page, we have all the possible image names. So if you have used this quote and downloaded my images, then you don't need to do anything here. However, if you have used your own images with different names, then you need to pass the exact image names here in the code detail page. Alright, now let me run this application. And from this category page, let's go to the course list. Now, when I go to the code detail page, then this time you can see that we have the following design. Let me tell you the functionality of these two controls. Well, when we press this button, then it will copy over coat. And where we press this button, then it will allow us to share the code to some other applications like WhatsApp, etcetera. So in order to handle the click functionality, let's go to the code DDL based model. And there are going to add a command property and image copy goat command. Then let's add another command. And this time I'm going to name it share quote command. Let's add a constructor. And there, let's initialize these two commands. First, I'm gonna initialize this RP quote command. We need to add a method that will be triggered when we use this copy code command. I'm going to name this method to copy quote. Similarly, let's initialize the command and that is share goat command. And make a method that is share quote. Now we need to bind these commands inside our digital patient. So let's copy this copy code command. And then in the quote detail page, let's add up come on property with this image button and bind it with the following command. Once again, let's go to the code detail based model and then copy this share quote command. And right after that in the quote detail page, let's add a command property in this image button and bind it with the shared code command. Alright, now let me run this application. And let's quickly go to this quote Detail page. And now we are on the code detail page. Now let's add a breakpoint with the copy coat and sheer quote method. And if we press this image, then you will see that the falling breakpoint will be triggered. And if you press this control, then the other big point will be triggered. Alright, now we have not added anything in these two methods, but at the end of this course, we'll add the copy and share functionality. But first, we need to complete the application and understand the fresh MVVM concepts. Alright, so that's all from this module and I will see you in the next section. 33. Implement Add Quote: In the previous module, we have worked with the quote needle pace. And in this module, we're going to start working with the ad code page. Let me show you what we need to achieve. Let's say we want to add a quote from our application. And on the category page, we have this pad icon in the navigation bar. And when the user will press this icon, then you will be redirected to a stop at quote page. And there you can add the details and save the code. So let's start over it. First of all, we need to import the ad code page. So in the Pages folder, let's add a content page and name it at quote page. Now let's go to this page Models folder. And I'm going to add the class and name it at what Page model. And here we go. Now we need to add the UI code in the category page. Because from that page, we want to navigate the user to the Ed code page. So let's go to the category page dot XML file. There I'm going to add the code for Toolbar. You just edit the code along with this video. So all you need to do is just download the code, copy it at visit here in that category page. Now, I have also attached this add image. So just download these images along with this video and then put these images in the Android and iOS projects. Let me add these images in the Android and iOS projects immediately. And here I edit these images in the Android and iOS projects. Now let's set the icon image source of this toolbar item and then add the image name here that we have added. Ok, now we want to make up command for this toolbar item. And for this purpose, let's go to the category page modal class. There. Let's add a command property and image at coat command. Now let's initialize this command in the constructor and just make a method for this command. I'm going to name it at coat. Alright. Now let's bind this command property with our toolbar item. So let's copy this property. And then in the category page, let's add the command property and then bind it with the edX code command. Now in the category page model and in the Ed Code method, let's add a code for navigation. So let's use our methods dot push model. And pass the name of base model. We will want to navigate. Well, we've got to navigate the edX code page model. So let's posit here. Now, let me run this application. And if I tap this plus icon, that it will take us to the Ed code page. Now let's get a UI for this ad code page. We want to get that kind of UI for this page. We have few entries. We will enter our record and one picker control in which we will get the getting a title. The rest of the code is easy. There is just one tricky thing on this page, and that is the Speaker control with the binding and the selection where MVVM. But don't worry, and trust me, we'll do it easily. Well, first of all, you need to download the code along with this video. And inside this file, you can see that we have the code for this ad pitch. So let's copy this code and paste it inside the edX code page. Alright, now we have to write the code in the ad code page model. How so? Let me tell you that. We want to use the postcode API method in this ad code model class. And we will use the dependency injection for this purpose. So in the edX code base model, let's add a private field of type IS service, and move it underscore rest service. Then let's add a constructor and just pass a parameter here of type I rest service. And finally, let's assign this parameter to this field. We're going to bind the text properties of our entry cantos with the seizure properties. So let's add a property. You ask any word that is rockfall and hit Deb, met there can type of this field and this property to string and just change the name of this field to title, and also set the property name equals title. Let's set another property of String type and just name it description. Similarly, let's add one more property. And this time I'm going to name it author. Alright. Now let's bind these author description entitled property with our N3 controls that are present in the ad code page dot XML file. So here in the ad code page, let's bind the text properties of these entries with the author and title. And just by the text property of these digital control with the description property. Alright, now we need a command because when the user will tap this save button, then we will call our Web API. So let's add a command property in the Bass Model and intimate sift command and intricate structure of the speech. Let's initialize this command. I just make a method that is safe coat. Now, let's find this Save command with the button control command property. And in this safe court will write the code to call the API. Now let's add a code to add the courts. So in this sift quote method, let's instantiate that class. And then we need to pass the value to properties of these, quote, unquote ID is opportunity. So we don't need to pass the code id, however, will to pass the title author description created_at and getting a property. So let's add the title property and assign this title property that we have bind with our entry control. And similarly, let's add the description and other properties and assign the values respectively. Now what about the kinetic head and getting a property? Well, in the chaotic at property will pass the system date. So let's add that datetime dot now here. And this will pick the system date or mobile device late. Now what about the category? Well, there are two options for this. The first is if we add an entry control in the Ed code page, then just pass the text property of that entry control here, just like we did in case of title, author and description. And this another option which is little bit tricky, but it's most suitable, and that is when we press this plus icon. Then we will also pass all these categories from this category page to this head quote page. And there we'll bind the categories with the picker control. So we're going to do the same thing. That is past the categories from the category page model to this add code based model. So let's move to the category page model. And there this past this categories of the collection in the core methods dot push model, async. And now willing to receive this categories in the ad quote page moral at, for this purpose, let's go to the add code base model. There. Let's override an initialized method. At inside this, we will see our categories of the collection. Now, let me tell you that from this category page, we're sending the categories and the type of this categories observable collection of category. So on this ad code page modal, let's add an optimal collection of category and name it categories. And in the initialized method, let's assign these initialized data to this, although we'll collection. But here we've got an error. And that's because we need to cause this. Initialize data to the list of category. So let's cast this to the observable collection of category. Now, let me go to the add code base dot xml file. There. Happy to bind the item source of the speaker control with a categories openable collection property that comes from this add code base model class. And now I'm going to run this application. And here we go. Let me add up big point with these initialized method. And right after that, let's test this plus icon and our breakpoint will be triggered. And you can see that we're getting all the categories. Now discontinuities execution. And now if I tap the speaker, then, oops, we're getting the data in the wrong format. Well, we want to get the category title inside the picker. So what we're gonna do is we'll simply go to the category class and their risk copy this, getting a title. And then in the ad code base dot XML file. And in the picker control, just add a property that is R to display binding and then bind it with the title property that comes from the category class. Now, let's execute this application again. And let's go to the add code page. And this time, if you press this Picker, then we'll get the data in a nice way. Now, when we select the item from the speaker, then we also need to pass debt selected value to our course class, getting any property. So here in the code base model class, Let's add a property via snippet that is rockfall. And make the type of this field and this property to category and emit Selected Category. Now let's bind the selected category with the picker selecting item property. So in the XML file of this page, let's add the selected I2 property of this figure. Then the spine, the selecting item with the Selected Category property that comes from this add code based model class. Now let's jump back to the edX code base model class. And let's set that category property of this code plus equals. And there will possible category title. Well, if we pass only the selected category here, that it means that we want to assign the full category object to this category field. So what we really need these, we want to pass the title of the selected category. So with these silicate category, we can also access the title property. So let's pick this and assign this the category property as well. Now we're going to consume that API. So in this safe code method, let's use this underscore rest service field and just call this postcode method. And this will take the code object. So response this object here. Also, this is an async method. So this used the await keyword and make these safe quote method asynchronous by using the async keyword. Right after that, let me tell you that this postcode method militants some Boolean value. It can be true or false. If we post our equids successfully, then we'll get true. Otherwise, we'll get false. So the strollers in suffered a variable, and I'm gonna name it, is that the agora check that if this result is not null, then just display by using the code methods thought, display elec method and pass the values here like hi, you recognize the edge successfully. Has. If the issue and the Zell is not true, then just use this pop-up at passed different message here. Like, oops, something went wrong. Now let's run this application. And let's go to the add code page by pressing this plus icon unless pass the title, author, and description. And here you can see that we're getting the categories in this bigger control. So let's pick the category and just press the Save button. And here we go. We have got a popup that's saying our record has been successfully. Now, this go back to the category page. Unless, unless the category in which we have added the quote. And here you can see that it will load the code that we have added from our x_min Forms application. Alright, that's awesome. So that's all from this module and I'll see you in the next section. 34. What We re Going To Add: In this section, we're going to make our application and we will add some cool features inside of a Xamarin Forms Application. Rubber tells you that what we're going to add inside the replication. Well, if we run this application, then here as you can see that the category page is blank. And after sometime it will load the data inside this ListView. Similarly, if you go to the court list page, then again this page is blank and after a few seconds, it will load the data. Well, that's because whenever I'm this application and come to the category page, then this will call the web API. And once we get the response from the web API, then we'll get the data in the ListView. So we need to show some kind of loader when the call goes through the API and must have Web API, you can some data. Then we'll stop the loader. And that's the good user experience. Adding the loaders van, recall the web API and stop it when you get the response is a good user experience will do the same thing on the list page. Then let me go to the code Detail page. There were these two image burdens for share and copy. But so far we have not added the functionality behind these buttons. So we will add the copy and share functionality behind these buttons by using MVVM. Next, if you go to that category page and press this category that this will take us to the Court list page. And when we come back to this category Pysch and pressed the same ListView cell again. Then this will not navigate us through the courtly space. However, if we press some other cell that it will take us to the quote list page. And again, if we come back this time, this ListView cell is not clickable. Alright. Similarly, on the court list page, if you tap this cell, that it will take us to the Court Detail page. And when we come back to the previous page and test this ListView cell, again, that is not working. Pressing some other cell will take us to that quote detail page. So we need to solve this issue so that the user can use our application without any kind of bugs and problems. So in the next module, we're going to start our journey. And we will add all these stuff in cellular replication. Alright, I will see you in the next module. 35. Implement Clipboard Functionality: In this module, we're going to add the clip board functionality inside our Xamarin Forms application. So before moving forward, just mix shows you have installed the seven essential new get package. I'm using latest version of Studio 2019. And when we Kate the Xamarin Forms application, then this comes with the x_min essential package. Let me show you. So if I go to that dependencies and expand that knew it, then here you can see that we have this x_min essential package already here. So we don't need to install this package. However, if you are using some older version of your studio and you don't have the x_min essential. Then just go to the managed new get package for solution and search for x_min essential and just install this. Alright, now back to a work. Well on the code detail page. When pressed this icon, that it will copy over code description. And we can paste this code anywhere in our mobile device. So let me go to the code detail page model. And there we have already added the command and the method for this copy coat. Now, in this method, I'm going to write the code to copy the code. So Let's use the Clipboard plus. Well, this clipboard comes from this namespace that is Salman Dot essentials. And right after that, with this clipboard class, just use the set text async function. And this function, we'll just take a stink that arbitrary. In short. We need to pass the court description here. Because when you call this method that it will copy over code description. Alright, so let's use the Court property. And with that, let's use the description of the court. Now, let me add this application and let's go to the core detail page. And here we go. If I tap this button, then this will copy your code description. And now if we go to some other application, like messages or email application, etc. And there we can paste our code description. Alright, that's also, you see how easy it is to copy the text from our x_min false application and based it anywhere inside our mobile device. In the next module, we'll add the sheer functionality for this image button. Alright, see you in the next module. 36. Implement Share Functionality: In the last module, we have added the clipboard functionality. And now in this module, we will add the quote share functionality so that we can shift the course where other applications like WhatsApp, etc. So let me go to the code Detail page and they're in this method. We will write the code for Share functionality. So let's add the Shape class that comes from this x_min essential namespace. And with that, let's use this request async method that will take a string parameter and waited to pass the code description here. Let's use this quote property. And with that, let's use the description of the coat. All right, now this one line of code will share our code description. Let me add this application on the device. And here, let's go to the court detail page. Now, if we press this share image button, this will ask me to choose the application where I want to share the code description. So I choose this war set and then just select some contact from my contact lists. And here we go. Now, I can share this coat with my context. Alright, that's a very cool feature of this seven essential plug-in. And now it's just a piece of cake to share the text from our x_min Forms application to some other applications. So that's all from this module, and I will see you in the next section. 37. Solve ListView Selection Issue: In this module, ligand to solve a ListView selection issue. Because when we tap the ListView, that it will take us to the next page. And if we come back to the ListView and again tap the same cell, then it's not working. So let's see how we will solve this problem. Let me go to the category page model class. And you can see that this getter is returning the Selected Category field. We need to return the null here, because whenever we tap the ListView cell, then we need to make sure it's not Aldi containing thus Selected Category. Alright. Now we need to handle that is property change method because we need to notify the list you selected item about this Selected Category selection. And in order to notify the UI elements about this change, let's use the raise property change here. Now, the last step is in the category page dot XML file. Just use da2 with data binding mode in the selected item. Let me quickly run this application and we are on that category page. Now, if I tap the cell, then we're on the court list page. And if we switch back to that category page and pest a same category again, then we will be redirected towards the code list page. So it means now our listless selection is working properly. We have another ListView inside our application that is present on this quote list page. And we will do the same thing on this page. So let's go to that course list page Model. First of all, just return null here in the getter of this selected coat property. And then call the race property change method. And finally, just go to the court list-based dot XML file. And just use the two-way data binding more in the selected item of this ListView. Alright, this will solve our problem. Now, that's all from this module and I'll see you in the next section. 38. Adding Activity Indicator: In this module, we're going to add the activity indicated inside the replication, because when the user comes to this category page, it takes few seconds to load the data from the API. So we need to show some loader to the user. And mustard response comes from the API. We'll stop this loader. So let's go to the category page. And inside the XML file, I'm going to wrap this ListView inside the grid. Then outside the ListView, I'm going to add an Activity Indicator. Well, activity indicator is like a loader. In this activity indicator, I'm going to set the horizontal and vertical option to the center. And color equals this one. Now back to the category page modal class. And there, let's add a boolean property while brought full snippet. And emit is busy. Alright? Just set this field equals true. Because at first we need to set this boolean field equals true. Once we get the response from the API, then we will set this property equals false. Alright, so after that API call, let's set that is busy equals false. Now, in this property setter, we also need to call the raised property change because at first, we will show the activity indicator is running property equals true. And once we get the response from the API, then we will notify our activity indicator to stop running. All right, now let's copy this is Vc property. And then in the category page, let's bind that is busy property with the is running property of the activity indicator. Alright, let's run this application. As soon we'll load the application. The user will see this activity indicator. And what's the response comes from the API. This will be distributed. So we have successfully added the activity indicator inside a category page. Now, you can also add the activity indicator on the code list page. So let me copy this code from the category page model. And then in the court lists paid model, let's paste this code. And after this API call, let's set that is busy equals false. And now let's just do the course list page. And first of all, let's wrap this ListView inside the grid. And our scientists ListView, let's add the code for activity indicator that we have used on the category page. So the scope is activity indicator code from the category page and just pasted here. Alright, that's how from this module. And I will see you in the next section. 39. Final Words: I hope you've enjoyed this course. Now if you want to learn the RESTful APIs and lock to make some deal will API, which is P dot and then checkered medical. Alright, that's all for my ENT. I'll see you some of the time. Till then. Goodbye.