Build Real World Food Delivery App with Xamarin Forms | Asfend Yar | Skillshare

Build Real World Food Delivery App with Xamarin Forms

Asfend Yar, Microsoft MVP

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
65 Lessons (4h)
    • 1. Introduction

      1:25
    • 2. App Demo

      2:28
    • 3. Course Structure

      1:04
    • 4. Download Course Material

      0:16
    • 5. Get Application Backend

      3:01
    • 6. Seed Data With SQL Script

      2:31
    • 7. Api Documentation

      1:24
    • 8. Testing Accounts Section

      2:55
    • 9. Testing Categories Section

      2:09
    • 10. Testing Products Section

      4:18
    • 11. Testing Shopping Cart Section

      7:50
    • 12. Testing Orders Section

      4:40
    • 13. Create Blank Project

      2:35
    • 14. Debug Xamarin Forms App

      2:08
    • 15. Xamarin Essentials Preferences

      2:18
    • 16. Store Value in Preferences

      2:38
    • 17. Retrieve Value From Preferences

      2:53
    • 18. Install Conveyor

      4:42
    • 19. Create Model Classes For Accounts

      3:16
    • 20. Create Model Classes For Categories and Products

      3:57
    • 21. Model Classes For Shopping Cart

      3:56
    • 22. Model Classes For Orders

      5:12
    • 23. Register User Method

      9:42
    • 24. Login Method

      5:38
    • 25. App Settings Class

      2:01
    • 26. Get Categories

      5:15
    • 27. Get Product By Id

      2:00
    • 28. Get Product By Category

      1:42
    • 29. Get Popular Product

      1:25
    • 30. Add To Cart

      1:53
    • 31. Shopping Cart Total Price

      1:39
    • 32. Get Shopping Cart Items

      1:39
    • 33. Total Cart Items

      1:24
    • 34. Clear Shopping Cart

      2:02
    • 35. Place Order

      2:41
    • 36. Orders By User

      1:44
    • 37. Order Details

      1:27
    • 38. Implement Signup Functionality

      6:53
    • 39. Implement Login Functionality

      8:17
    • 40. Implement One Time Login

      2:48
    • 41. Custom Hamburger Menu

      5:41
    • 42. Implement Popular Product

      5:41
    • 43. Implement Categories

      5:11
    • 44. Implement User Name

      2:14
    • 45. Implement Cart Count

      4:01
    • 46. Collection View Navigation

      4:52
    • 47. Collection View With Params

      2:42
    • 48. Databinding in Product List Page

      6:24
    • 49. Implement Product Detail Page

      8:27
    • 50. Cart Increment And Decrement

      6:24
    • 51. Implement Add To Cart Functionality

      6:06
    • 52. Popualr Products Navigation

      2:14
    • 53. Implement Cart Page

      6:05
    • 54. Databinding in Cart Page

      4:13
    • 55. Shopping Cart Clear Functionality

      3:09
    • 56. Implement Place Order Page

      10:26
    • 57. Implement Order Page

      4:41
    • 58. Show Data Inside Order Page

      5:00
    • 59. Order Detail Page Challenge

      1:10
    • 60. Implement Contact Page

      4:59
    • 61. What are the issues with access token

      2:04
    • 62. Solve Access Token Issue

      6:10
    • 63. Api Endpoint with Token Validator

      2:39
    • 64. Logout Functionality

      2:20
    • 65. Final Words

      0:19
67 students are watching this class

About This Class

Welcome to the Real World Food Delivery App Development course with Xamarin Forms.

I'm Asfend Microsoft  and Xamarin Most Valuable Professional (MVP) at Skillshare and in this course I'll explain you every single aspect of real world application in Xamarin Forms. 

This courses teaches you how to code 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 to build a real world application with xamarin forms.

  • Consume Restful Api's.

  • Test Local Hosted Api's inside your Mobile Device.

  • Consume Nuget's in xamarin forms.

  • Create a Complete Real World (Food Delivery) Application in Xamarin Forms From Scratch to End.

  •  How to make asynchronous API calls, store and retrieve data from the api, and use the JSON format for server communication.

  • Make application user friendly.

Remember...

After this course you'll get all the Xamarin Real World Application Source Code and along with this I'll also share a Complete Backend Code for the Rest Api's with you.

In this course I'll consume the api's via tunneling. If you want to publish the api's on Microsoft Azure then it's up to you. 

I want to set the right expectations because in this course we'll only cover the Client Side of the Food Delivery Service Application. If you want to make a Admin Panel for delivery service then you can download the Rest Api source code along with the course and make a web application from my Rest Api code and your web development skills. Covering Web Development is a different thing. If you're looking for a course so that you can also make an admin panel then sorry this course is not right for you.

So what are you waiting for? Start this course today and lets start learning.

Transcripts

1. Introduction: Hi, welcome to this course, Missoula and to make a complete crossbite for mobile application while your Android and iOS devices. My name is S1, and I'll be leading you through this course. I'm a software engineer and Microsoft most valuable professional. I designed this course so that anyone can make real-world application with Xamarin Forms from start to finish. By the end of this course, you'll be able to make a complete cross-platform application with 100% shade codebase where Xamarin Forms. And you can also apply the concepts from this to your real world projects. I guarantee that there is no force out there that is as comprehensive and easy to follow. The ideal stool for this course is the existing C-sharp and Zim forms developer who has to make cross platform mobile application from start to finish. With this course, you will get phi three plugins that I have made, complete source code of the application that we will create in this course. And of course, you will also get the whole source code of the RESTful APIs that we will consume in this course. Feel free to take a look at the course description. And I will look forward to seeing you inside the course. 2. App Demo: Before we get started, let me quickly show you the activation leading to build. This application is a replica of KFC and is supposed to be used on your Android and iOS devices. With the help of this application, the user can easily order food items. So if I run this application, then here you can see that we have a sign up screen. Let me sign of the disaggregation. Alright, now I'm going to login with this application. And here we go. Our login is successful and we're on this homepage. If we click on some specific menu, then will be redirected towards the product list speech. And there we can dab some product and jump towards the product detail page. Now on this speech, we can increase or decrease the product quantity and can easily add the product in the shopping cart. Now, once we add the product in the cart and switch back to the homepage, then on the homepage, our guard value will be updated. Then we have this popular products. Let me add this inside of a shopping cart. And here our current value has been updated. Now, if we click on the cart icon and it will take us to the card beach. There we can see the total price of the gut. We have this clear God functionality. That will be our Shopping dot. Let's go ahead and place the order. So on the space, provide the detail and place the order. And we'll get a pop-up video Order ID, which means our order has been placed against his ID. And now on the homepage, let's tap my orders and we can see our orders. And if you further depth on the orders that we can see the details of our orders. All right, well desktop brief overview of this application. And there are a lot of things that we'll cover in this course. So are you excited to build this application with me? Then let's begin. 3. Course Structure: Let me show you what is coming up over the next few sections. In the next section, we're going to configure the RESTful APIs for our project, then will test our rest API endpoints. Why postmen? Once with desktop API end points, then we'll dive into the Xamarin Forms and we'll set up our zone forms project. Then I will show you how to get all the acids of our application and import inside Android and iOS projects. Right after that, I'll show you how you can access the local host web APIs inside your mobile device. Then we'll create a bottle glasses as well as the api service class that contains our API methods. Right after that, we'll dive into the real-world application and we will start our application from scratch. Right after this course. You will have a very good understanding of how to build a complete e-commerce mobile application resemble forms. So in this course, there are a lot of things to learn. And I will see you in the next section. 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. Get Application Backend: Hi, in this lesson, I'm going to show you how you can get the application backend source code. Well, I have designed the RESTful APIs in ASP.net core, and I've published the core to the Kitab. Let me open my GitHub profile. And as you can see that we have the falling project. So all you need to do is just download this project. Now, once it's downloaded, I am going to perform few actions on this project. The first thing that I'm gonna do is just uncompressed this project. Then I'm going to open this project inside the wheel studio. Just make sure you have installed when studio inside your machine. Well, this is an ASP dot Golub API project. And in this course, our focus is to understand the App Development with them forms, not the RESTful API. Because creating the RESTful API in SP dotted chord is a completely different topic. If you want to learn the rest APIs with misbegotten core than checkered. My other course, that is SP dotted core, The Complete Guide to build rest APIs for Windows users or ASP dot and core web EPA course for Mac users. Because there I have explained every single feature of RESTful API, like how to create rest API from scratch. Now, you are thinking that if we are not going to cover the ASP.net Core Web API, then why we have downloaded disrupt APA project? The answer to simple. In this course, we're going to consume the API inside our Xamarin Forms application. And in this project, we have our web APIs. Now inside the studio, just search for SQL Server Object Explorer. Now let's open the server. And inside the server toolkit, that database. Then we will run our Web API project. So let's run this application. And this will open the web browser. Alright, back there with studio. And let's refresh this. Expand this server and we'll get our database. Now, if we expand the database, then look at all the tables that are part of the API project. Alright, now in the next lesson, I'll show you how to add the data inside these tables with the help of SQL script. All right, see you in the next lesson. 6. Seed Data With SQL Script: In the last lesson, we have explored the web API project and regatta database inside a SQL Server Object Explorer. Not in this lesson, we're going to see that data inside a SQL Server database. So let's get started. The first thing I'm gonna do is just open this script file. I have attached the script file along with this lesson. So just download this file and then open it. Well, if you open this file that you'll see the SQL script. We will lead this group to see the data inside our database. Just go to the database, right-click on it, and then select New Query. Now in this cutie window, will paste our script. So just copy the script. And then visit here. Alright, now let's execute this query. And we'll get a few messages here like these rows affected, which means we have added the data successfully. Now let's go to the user's table and view the data. And here we can see that we have few records inside this user's table. Similarly, if we open the category table, we have few categories. And if we open the products table, then we have few products here. Alright, so with this, we have seen that a dot inside our database, and this will make our life easier. Now we can easily consume the RESTful APIs inside the Xamarin Forms application or in the postman because we have added the data inside the database. Just stay with me because in the next lesson, we're going to test terrestrial APIs inside the postmen. So I will see you in the next lesson. 7. Api Documentation: In this lesson, we're going to explore the APA endpoints with ABA documentation. I've attached API documentation file along with this video. So you just need to download this file for API documentation. Now once you download this EPA documentation file, then just opened the postman tool. You can download this postmen from Google. The escalation of this tool is very simple and this tool is free of cost. Now we have opened this postmen tool, disclosed that window that you will see at the startup. Then just go to this import option. Right? After that, we need to select the APA documentation file that we have downloaded. Alright, here we go. Just import this file not inside of postmen. And under this collection, we have a section that contains our API endpoints. If we expand this KFC client section, then we will get the subsections like accounts, categories, products, shopping, God, and orders. Alright, we'll first start with the Account section. So just stay with me because we'll continue our work in the next lesson. 8. Testing Accounts Section: In the last lesson, we have configured our API endpoints inside the postman. And now we get to start working with these endpoints. First, we'll start with this account section. So if we expand this account section, then here we can see these two end points, like the District and login. I'm gonna open this, a district endpoint. So if you click this link, that it will be open inside the postman. Now first we need to add a web app URL here. So I'm going to switch to the studio and then run this project. Now really Studio will launch the web browser. And here's our root address. So let's copy this route address. And right after that, I'm going to switch to the postman. And you need to add your route address. Alright? Now, this is a post request. If we go to the body of this request, then by default, assemble distance data is only present here. All we need to do is just add the values to this DSM R, we can use the same values. Let's use some other name, email and password here. Now, if we send the request, then soon we'll get the status code to a-one created. It means our record has been created. Now let's go to this login endpoint, and let's open this endpoint. First, we need to add our web app URL here. So I will use my route address after the application. And right after that. Let's go to the body of this request. And here we need to add the user email and password that we have used earlier in that district endpoint. So let's copy the user email and password. And let's visit here. Now if we send the request, then we will get the folding decent in the response body like access token, explanation, dime, user ID, username, etc. Now with this access token, we'll further call an API endpoints. Because the rest of the API endpoints are secure and without the access token, we cannot access the other API endpoints. Alright, so far we have got an access token and we're ready to consume the other API endpoints with the help of this excess open. So let's continue our work in the next lesson. 9. Testing Categories Section: In the last lesson, we have talked about accounts endpoints. And now in this lesson, we're going to start working with the categories end point. So let's go to the category section and let's expand this. As you will see this getCategories endpoint. And it's basically a get request. And it's just used to get the list of categories. I'm going to pass the address of my application here. Alright? Now if we send a get request, then we will get 401 unauthorized status code. And we had not allowed to access this method. To access this method, we need an access token. So let's go to the login endpoint. And as you can see that we've got an access token. I'm just going to copy this access token. And right after that in the getCategories endpoint, go to the hydrodissection of this request. And we need to pass our access token. So just use authorization header and then pass the value of excess token with a token type that is better. Well, beer is actually a type of word token. Currently we have already an access token here, so we just need to remove this and pass the access token here, which we have copied earlier. Also, don't forget to pass the beer token type along with this access token. Now let's issue a request. And here we go. This time, we'll get a list of categories in the response body. Well, these categories comes from SQL database that we have created earlier. So if you go to the SQL database and open the category stable than here, as you can see that we have all these categories that we got when we issue a get request from the postmen. Alright, that's all from this categories end point. Now let's explore the other endpoints in the next lesson. 10. Testing Products Section: In the last lesson, we have talked about categories, endpoints. And now in this lesson, we're going to start working with the products point. So let's go to the products section and just expand this. And here you will see different endpoints like get product by ID, get product by category, and get popular product. Alright, so we will start with a good product by ID. Just open this inside the postman. And now I want to let you know that this is basically a get request and this gluten only a single product against the ID that will pass along with the URL. Alright, just switch them in studio. And let's open the products table. There. We have the following product against this ID. So we'll pass this product ID along with the APIs URL to get a product detail. So if we issue a request, then we'll get an unauthorized status code, which means we're not allowed to access this method. To access this method, this copy the access token. And right off the bat inside the headless of this request, I'm going to paste this access token. Now, if we issue a request, then this time we'll get all the details of the product against this ID. Alright, now let's try to explore the get product back category endpoint. Well, let me open this end point. And this is also a GET request. Basically this endpoint will return the list of products in a particular category. Let me go to the studio. And there, let's open the categories table. And inside this, you can see that we have the following categories. So we need to pass these category IDs in the APS URL. For example, if we pass this category ID in the URL, then this will return all those products which are in the drinks category. So response this category ID here. And then let's copy the access token and paste it here. Now, if we issue a crest, then we'll get all the products which are in the rings category. Alright. Now let's go to the get popular product and point. Just open this end point. And this is a GET request. And the request will return only those products which are most popular. Then locate our Xamarin Forms application than on the homepage, will add the categories. And then someone will select the category than he will get all the products which are in the particular category. Similarly, if the user will further tap some product than he will get the details of the particular product. Also inside the homepage will show some popular products. And to display these popular products, we need to work with this get popular product method. So let's copy the access token and paste it here. Now, if we issue a request, then we'll get all the list of popular products. Okay, so we have just explored the products endpoint. And now in the next lesson, we'll continue our work with the shopping cart and point. So I will see you in the next lesson. 11. Testing Shopping Cart Section: In the last lesson, we have talked about products and bind. And now in this lesson, we're going to start working with the shopping cart items and point. So just go to the shopping cart section and just expand this. He, you'll see different endpoints like Add to Cart shopping, got total price, good shopping cart items by CMS in God, and clear shopping gut. So we'll start with the Add to Cart endpoint. This, open this inside the postman. And now I want to tells you that this basically a post request and end up body of this request, we have some simple JSON data. And basically we'd need this endpoint to add the items in the shopping. God, let me go to the studio. And there I'm going to open this products table. And let's say we want to add this product inside our shopping cart. So we'll pick the ID of this product at basicity. Then let's say we want to add three quantities of this product. So we'll pass three here. Right after that. Inside the products table, you can see that this product has a falling price. So we will pass this simplifies here. And then in that total amount, we need to pass the total amount. Let me tells you how you can calculate the total amount. But if we multiply the quantity with the price, then we'll get the total amount. So we will pass the following value here. Now, in the Customer ID, we need to pass the customer unique identification number. Well, we need this customer ID so that every customer has a separate shopping gut. Earlier when the user and send a request to get the access token. Then we got the falling access token and inside the JSON response, we got the following user ID. So we will use the same ID. Then we need to pop this access token and base it inside the authorization header of this request. Now, I'm going to issue a post request and regard to one's status code, which means our record has been created and we have added the item in the shopping cart. Now let's go to the studio. And there I'm going to open the shopping card table. And here inside this table, you can see that we have the following data that we have added from the postman. Alright, now let me tell you that why we need this Add to Cart and point. Well, in our mobile application, when we will be on the product detail page. Then from this speech, we can add the items in the cart. And that's why we need to add this Add to Cart and point. Now I'm going to add another product in the shopping cart. So let's go to the products table. And let's say we want to add this product in our shopping cart. So we'll use the ID of this product. And then positive. Right after that, we will pick the price of the product and positive. Now let's say we want to add T items. So the total amount will be t multiplied by the price of the product and will simply pass this total amount here. Now let's issue a request and heavy go record added. Now let's go to the shopping cart table and less defects that table. This time. We will get the other record here. Okay, now let's go to the shopping cart total price endpoint. Well, this is a GET request and basically this method will take the user ID and then return that total price of the shopping cart. For example, in our shopping God, this is a total amount of the items which Susan has added. So hard to get this total amount. But it's the simple. All we need to do is just user's user ID along with this request. And then pass the access token in the authorization header of this request. And here we go. Cool, get the total amount of the items that this user has added. All right, now let's go to the shopping cart items endpoint. Well, this is also GET request. This endpoint is used to return the list of items that are in the shopping cart of user against the user ID. For example, let's say we want to get all the shopping cart items which are in the shopping cart of this user. So we will pass the user ID here along with the URL, and then we'll pass the access token. Now let's issue a request. And we will get all the items that belongs to this user. Alright, now let's switch the items in the cart endpoint. And let me tell you that this endpoint is used to return the items count. For example, when we'll work with the mobile application than on the homepage. Gluten that count, which indicates how many atoms are present in the shopping cart. And if no item is present in the shopping cart, then we'll get 0. In our case, we have added some items in the shopping cart. So we simply pass the access token. And then we need to pass the user ID along with this request. Now, if we issue a request, then we will get total items here, which is six. Because right now this user has six items in the shopping God. Alright, that's awesome. Now let's go to the clear cut and point. Well, let's say that this user wants to plead the shopping God. So first of all, we need to pass the access token. And once we pass the access token, then will pass the user ID along with this API URL. Now, just send a delete request. And here we go. The shopping cart has been cleared for this user. Now let's go to the shopping cost table. And there, if we refresh the table, Then this time we don't have any data because this user has cleared the data against his ID. Alright, that's all from this shopping cart items. Now, I will see you in the next lesson. 12. Testing Orders Section: In the last lesson, we have talked about shopping cart and point. And now in this lesson, we're going to start working with the orders endpoint. But before this, let me go to the shopping cart items table. And as you can see that we don't have any data to place the order. We first need to add some items in the shopping cart. So let's go to Add to Cart endpoint. And there I'm going to add some data against this user ID. Alright, here we have edit few items in the shopping cart. Now we're going to start working with the orders endpoint. So inside the order section, we have three endpoints, like Please order, order details and orderBy user. Let's start with the police order endpoint. But it's supposed to request. And it takes the folding decent data. And along with that, we also need to pass the access token. So first of all, I'm going to copy the access token off this user and visit here. Now, let me add some details of this user so that he can place the order. Here. I have added some details of this user against this user ID. Now let's issue a request. The order is successful and we got an order ID. Alright, now, let me quickly go to the shopping cart table. And there, if we refresh the table, then we will get no data against the student ID. And that's because when the user will place the order, then we need to clear the shopping cart of the particular user. Now, let's open the Orders table. And here we have our record. Like the user against this user ID has placed an order with the following details, like full name, address, phone, etc. Let me go to the Order deduced table. And there we have the following data. Well, against this order ID, we have the following details like price, quantity, total amount, product ID, et cetera. Well, this order id is coming from this order stable. And it's actually a foreign key in this order details table. Now let's move to the other end point, and that is orders by user. Well, this specifically a get request. And this request will simply then the orders that this user has posted. So let me provide the access token. And right after that, you just need to make sure to provide the user id and then send the request. Here, you can see that we'll get the list of orders that this user has placed. Now, let's say that we wanted details of the order that this user has placed. So let's go to the other endpoint. And there, first of all, let's provide the access token. Now, once we add the excess token, then we need to provide the order ID. The question is how to find the order ID? Well, in the previous request, record an order ID. So we'll pass this ID here and then issue a request. Here's, you can see that we got all the details of this order that this user has placed. Alright, so these are the endpoints that we're going to consume inside of a Xamarin Forms application. And we'll make a client-side application with the help of these endpoints. Alright, that's all for this lesson. Now I will see you in the next section. 13. Create Blank Project: In this lesson, we're going to start working with the Xamarin Forms application. So before moving forward, just make sure that you have properly installed the view studio. Right now, I'm using VSD today, 2019 Windows edition show here inside my Windows machine. I would like to create a new project. Just go to this mobile app with Xamarin Forms template. Choose this at then press next Hayes UCF window. That's saying configure your project. So I need to give a name to my project. I'm going to give a falling name. That is the rule. And then simply create this project. Now, as soon as we tap this Create option, it will open this window where we have asked to select the template for our project. There are many tablets present here, and these templates already comes with some boilerplate code. But we're going to start working from scratch so that we can pick all the concepts easily. Now what I'm gonna do is I will choose this blank template and then choose the platform which we want to target. These are the platforms that we can target with our Xamarin Forms application like Android, iOS, n, UWB or Universal Windows Platform. If you have installed law UWB option inside movie studio, then it's okay. But I'm not a big fan of UWB applications. And in this course, I will not target does UWB applications. I'm just going to make the application for Android and iOS. Then I'll just hit OK. We just need to wait for a few seconds. And here we go. Now examine forms project has been created. Alright, if I go to the Solution Explorer window, then you will see different projects inside the solution. There are three different projects inside the solution. If you have install Universal Windows Platform, then there will be four projects. In my case, I have three projects. The first project is our darkness standard project. And there we will write all kind of code in our favorite c-sharp programming language. And of course, we'll get all kind of application design with XML markup language. And the second project is an Android project, and this third project is an iOS project. In this course, we will try to write the code in this first project as much as possible. Alright, let's explore this project further in the next module. 14. Debug Xamarin Forms App: In this module, we're going to debug our Xamarin Forms application. So inside the view studio, just make sure the Android project is selected. And if not, then just go to the Android project, right-click on it and select this set S startup project. Now here's you'll see the Android emulator option. If you have an Android device, then it's perfect. You need to do is just done on the developer option in your Android device. And just connect your device, video or Windows machine, whereas USB cable. And then you'll see your Android device here in the dropdown. But I'm going to use my Android emulator. So this run this application, and this will open the Android emulator. And this emulator will take some time to load into the memory. And once it's successfully loaded, it will open the application. Alright. We'll get the message that is welcome to Xamarin Forms. This message was written on this main page, daughters YAML file. I'll write. It means there is no issue with the application deployment to the device and we can continue our work. I know you're thinking why I am doing this, because I always recommend you to please run your application before doing any kind of work. So that if any kind of error comes at the starting stage, then we can easily figure out, now if you have Mac machine, then you can also debugged your iOS application. Let me tell you that if you don't have a Mac machine, then obviously you can make iOS applications, but you cannot test our debugged your iOS apps, because this will guide the Mac machine, the application we're going to create in this course, we'll target both the iOS and Android platforms. And later in your life when you have an access to the Mac machine, then you can also test the iOS application. 15. Xamarin Essentials Preferences: In this lesson, we're going to start working with the Ximen essentially preferences. But before moving forward, I want to tell you that I am using VS2, the 2019. And if I go to the dependencies section of this project, then by default, Xamarin dot essential snugged plugin is already present here. And we don't need to re-install it. But if you are using some older version of the studio, are if you don't see this x_min essential needed plugin, then just go to the solution. And Jews managed to get packages for solution. Then all you need to do is just search for x_min essential and install this new plug-in. But disseminate essential plugin is already present inside my project. So I don't need to re-install it. Alright, let's close this window. Now. I want to tell you what is Preferences and why we need preferences. Well, x_min, essential preferences is used to store the data in the isoelectric storage in the key value form. Now you are thinking that we have SQL lite and other mobile database providers. Then why we use this references plug-in? Well, SQL lite and other database libraries are used to store the data in the mobile application local memory, which is good, but we mostly need the SQL lite and other database libraries when we want to save that complex kind of data inside our mobile application, local memory. However, in case of preferences through mostly say the simple kind of leader against some unique key. Now let me tell you why we need this preferences plugin. When we call the login Web API from our Xamarin Forms application, then the lock-in Web API will return the access token. And we need to store the access token inside our application local memory. Yeah, we can store the access token in the SQL lite and other database libraries. But doing this will just increase the application size. And it used the performance of our application. And that's why this x_min essential preferences is a good option to save the complex kind of data. Alright, now in the next lesson, let's see how to use this x_min essential preferences. 16. Store Value in Preferences: In the last lesson, I told you why we need x_min essential preferences. And now in this module, looking to save the value inside of our preferences. So just go to the main page assembled file. And there I'm going to come at this and just add an entry control. I said the place holder of this entry to enter username and name this entry two END username. Now let's add a button control. Set the text of this button equals six. Then name this button, do median CF. Right after that, just kicked a click event of this button control. Not inside this click event. We could write a code to save the value in the preferences. So when we typed some username in this entry field and pesticide button, then we need to store data as an m in the preferences. So inside this button click event, let's add references. And now we need to resolve an interface of this preferences. Well, this preference is comes from this namespace that is seven dot essentials. Now, with this preferences class, we can access this set method. And this set method will store data in the form of key-value beer. Not let's say when we type the username in this entry control and best ASU button, then we will store the user name in this preferences. So I'm going to give a name to this key that is user name. You can name it whatever you like. Then against this key, we need to store the value. So let's say I want to store the text value that we will type in this entry control. So I would use this END user name dot text property here. Now let's run this application. And let's dive the username in this entity field. Right after that. Let's press this save button. While I was using them has been added to alert preferences. And now in the next lesson, we're going to retrieve the value from our preferences. So I will catch you in the next lesson. 17. Retrieve Value From Preferences: In the last lesson, we have saved the username inside of our preferences. And now in this lesson, we're going to retrieve the value from our preferences. So in the main page dot XML file, let's add a button control and set the text of this burden equals retrieved. And then this button do btn retrieved. Right after that. Let's get afflict event off this button. And here we go. Now in this click event of this button control, we retrieve the value from the preferences. When we alerted the value from the preferences, then we need to display it somewhere. And for this purpose, let's add a little control in the main based on several file and name it LBL username. Now back to the a button click event. And here we're going to retrieve the value from our preferences. So I will use preferences class. And with that, let's call this getMethod. And this getMethod will take two parameters. The first is the key, and the second is the default value. We want to retrieve the value against this username key. So I will use the same key here. And then in the default value, I'll use empty string. It means if nothing set against the key, then this default value will be returned. Now whatever the result comes from this references dot get method, we have to store this in a variable and I'm going to name it response. Right after that. Let's assign this response variable to the LBL username dot text property. And here we go. Now let's run this application. And as you know that earlier, we have saved the username property. And now if we press this retrieved button, then we'll get the user name in this level control. Alright, now let's add some other username here. And if we press this save button, then this will save this username. And our died the previous username. And if we press this retrieved button, then we'll get new username here so that we will save energy if the values from x_min essential preferences. Now as we move forward in discourse, and when we consume that login API, then lives use this seven essential preferences to stored the access token. All right, now that's all from this module and I will see you in the next section. 18. Install Conveyor: In this lesson, I'm going to tell you what is conveyer and how to install conveyor belt conveyor Studio extension. And with the help of this extension, we can easily test our Web API are Web applications inside of a mobile device descriptor that we studio marketplace. And there I'm going to search conveyor. Alright, let's pick this. Now. There are two Is to download and install this extension. You can download this extension from this website. How you can download this extension inside the studio? Let's go to the studio, and let's go to the extensions. Then choose manage extensions. Now make sure aligned tab is selected and then search for conveyor. Alright, then just download this extension. Once it's downloaded, then we need to restart the new studio, disclose them in studio. When we close them in studio, then this installer dialogue appears. And there, let's click this modify option. And it's going to install this extension. All right, I want a solution has been completed, disclose this, and reopen them in studio. Now I'm gonna open my web API inside the VCO. And here you can see that we have this conveyor option. Now, we'll use this URL to another web application inside the mobile device. But before this, let's go to the documentation of the conveyor extension. And there you can see that we have to add an inbound rule to excess the TCP port in the remote URL. So we need to follow these guidelines. Let's go to the Windows Start option. And such far WWF dot MSC. Now click inbound rules on the left. Then clicked noodles, that is on the right-hand side. Now, choose boat, and click Next. Then select TCP and entered up port from the remote URL. It's saying that probably the port will be 4-5 for level five. Then click Next, Next. Next, you may want to disable the public and give it a name like conveyor colon dev server x's unable. Alright, so we have added the inbound rule to use this extension. Now we can use this inside the mobile device. But before working with that, let's run our API. And then inside the mobile device, let's add the URL. And along with that, we will add the weather controller that simply written some decent data. Alright, so that's working fine. So this is how you can work with conveyor to test your web applications and web APIs inside the mobile device. 19. Create Model Classes For Accounts: Hi guys. In this lesson wouldn't create a real sound foams application. And we will consume these RESTful APIs inside the Xamarin Forms application. So let's start with, first of all, let's go to this Xenophon's project. And they're under add some C-sharp mortal glasses. But before this, just right-click on the project and just create a new folder and name it models. Now inside this mortals folder, I'm going to add few modal classes. But for adding the model classes, let's turn back to the postmen and let's start with this account section. First of all, we will open this registry endpoint. And as you will see that in order to send this to destroy request, we need to pass this decent data. So I'll copy this JSON data and just head over to the website that is designed to see Shop.com. And there just based this descended. And now Juanita C-sharp properties from this distance data. And here we go. Now, let's respect to the studio. There. I'm going to add a mortal glass in this model's folder. And let's name this class to the district. Now, we need to make this class public. And right after that, let's copy the properties from this website. And just beast these properties inside this register class. Now let's go back to the postman. And this time I'm going to open this login endpoint. And in order to send the login request, we need to pass this distance data. So we'll simply copied this decent and head over to the website. And I'm going to add the decent data and simply get a seashell properties. Now inside the Rstudio, this ADA class, at this time, I'm going to name it login. Right after that. This copy their properties and paste it here. Now once again, back to the postman. And there you can see that this login endpoint violet and the folding decent response. So we'll copy this JSON and then delete the seizure properties from this distance. Not little ADA, C sharp claws. And this time we're going to name it token. Then add these properties inside this class. Alright, so far we have added DOM model classes for account section. Now let's continue our work in the next lesson. 20. Create Model Classes For Categories and Products: In the last lesson, we added the modal class for accounts. And now in this lesson, we're going to add the modal glasses for categories and products that start with the categories here inside the postmen. Let's go to the categories endpoint. And if we send a get request, then we'll get the following descended up this copy, this decision. And we're going to donate a seizure properties from this distance. Right after that. This Adam water glass and name it category. Now will simply copy this distance data and visit inside this category class. Alright, now let's switch back to the postman. And there I'm new to this product section. This start over with this get product by ID and bite. This endpoint will be then the following decent. Simply copy this decision and denied a seizure properties from this distance. Now inside the studio, let's add a class and emit product. Now let's add these properties inside this product class. Once we add these properties, then will suspect that the postman. And this time, let's open this and bond that is get product by category. And this filter on the following data, likewise, will simply copy the Dusen and delete the seizure properties. Then once again, inside the material, simply get a class. And then it product category. Once we add the class, then we simply add DCC properties inside this class. Alright, now once again, back to the Bushmen. And this time we need to open this endpoint that is popular product. Now just copy the Edison and then delete the seizure properties from this distant data. Alright, then inside the studio, let's add a class and emit popular product. Now we will copy this seizure properties and visit here. Alright, so far we have had them Modu classes for account categories and products. Now let's continue our work in the next lesson. 21. Model Classes For Shopping Cart: In this lesson, we're going to start creating the model class from shopping got items. So let's go to Postman. And there, let's open this Add to Cart and point. And in order to add the items in the shopping cart, we need to use this JSON data. So what I'm gonna do is I'll copy this JSON data and then simply unit the CCO properties from this decent. And right after that, I'm gonna switch back to the studio. And let's get a seizure class and name it, add to God. Then inside this class, this add these properties. Now inside the postmen just opened this shopping cart total price end point. All we need to do is just copy this decision, the decision properties, and then create a new class. Name it God subtotal. Now we will add these properties inside this class. Alright, again, we switch back to the postmen. And this time we're going to open this gets shopping cart items endpoint, and we will simply copy this decent. Then we didn't have special properties. And inside the issue you just get a seizure class and emit shopping guide item. Now we're going to put these properties inside this glass. Once again, we're going to switch back to the postmen. And this time, just open this endpoint that is items in God. Now I'm going to copy this decision. Then we simply did the seizure properties. And right after that, let's add a class and name it total God item. Now just copy these properties and base it inside this class. Once again, go back to the postman. And let's open this clear shopping cart endpoint. Well, we don't need a multi-class because this endpoint will not dig any decent data and it's also not returning any JSON data. So we don't need to get a mortal glass for this endpoint. Alright, so that's all from this shopping cart endpoint. And I will see you in the next lesson. 22. Model Classes For Orders: In the last lesson, we have gives you the modal class for shopping cart items. And now in this lesson, we'll look at the mortal glasses for orders endpoint. So inside the postmen, let's open this place order endpoint. And in order to place the order, we need to pass some decent data. And if the request is successful, then we will get this descended in the response body. So first of all, let's copy this decision and denied the CCO properties from this distant Data. Now we're going to create a C surplus. And they make order. Right after that. Just add these properties inside this glass. Now back to the postman. And the response of displaced order end point will get this, this ended up. So we'll copy this decision. Did it Ossetia properties. And right after that kid and UC subclass limit order response. Now we are going to be these properties inside this class. Alright? Now once again, with suitable span and this order by user end point, Lily them The descended up. So we need to copy this decent dinner decision properties. Then create a new feature class. And then we're going to name it order by user. Then simply copied these properties and visit here. Again, we're going to switch back to the postman and this ordered needle endpoint rather than the folding kind of JSON data. So what we're gonna do is we'll copy this distant it up then to and simply needless visual properties. Alright, now this will diminish some complex kind of see surpluses and properties. Well, we have three classes, Product, order detail and this root object, which is basically an order glass. So inside of a project, we have already created a product class. So just open this class and just check if these properties are same or not. If some properties are missing in the product class, then we'll add it here. Ok, now we will get another glass. And then we order detail. And right after that, just copied these properties. And visit here. Now let's go to this root object class. Well, this class looks like an ordinary glass, and we have already created an order gloss inside the studio. So let's open this order glass and then just compare these two places. And if there is some extra properties in this root object class, which is missing in the order glass then agitator. Here we have edit all the missing properties. So far so good. We have completed all the modal glasses. And now from the next lesson, we're going to get the API service layer inside of x_min Forms application. So I will see you in the next lesson. 23. Register User Method: In the previous section, we have created our model glasses, and now we're going to explore the service layer. For this purpose is add a new folder and name it services. Then inside the services folder, I'm going to add new glass and name it api service. In this API service class, we will define all the rest APIs that we will use in our project. As you know that in the postman we have Account section and there we have different API calls. Let's start with this register endpoint. First of all, I'm going to add a new method in this API service class and name it register user. And we need to pass three perimeters of String type. Dawn is name, the second is the email, and the third is the password. Now let's create a new object of a district class. Well, this is a district loss is present inside this model's folder. Just make sure to resolve the namespaces for this district loss because it's present in the models folder. So we need to add the folding namespace. Then let's assign these gravitas to the properties of the district glass. In order to call the API, we'd need an HTTP client. And this client is responsible to communicate with the server. Because without this HTTP client, we cannot call that as APIs in Xamarin Forms. So let's get a new instance of HTTP client. And we need to import this namespace for this institute declined. And this namespace is system.net dot SDT B. 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 JSON format because the data will be in the form of c sharp objects. And if we want to send that data to the server, then we need to convert the C sharp objects to JSON format. Or in simple words, we need to serialize the object. Similarly, when we want to get the data from the web API, then this data will be in the form of DSM. And in order to show the data in our application, we need to convert this descended into C sharp objects. Or in simple words, we need to deserialize the DSM. Now the question is, how to civilize are visualized data. In order to work with serialization and deserialization, we need to add a nigger. That is, you can solve got JSON are decent.net. So right-click on the solution and simply select manage nuclear packages. Now in the search bar, just search for decent.net. And here we go. We have a list of globins. But I'm interested in this Newton soft dot JSON plugin because this is an official new get package for distance serialization and deserialization. Not thousands and millions of people are already consuming this plugin. So just select this plug-in. Now, we're going to install this plugin in all the projects. And this plugin will take some time depending on your internet speed. And we need to get a little bit soon, we'll get a successful message. And now our plugin has been installed. Now we can continue our work. Let's switch back to the API service class. And there we need to serialize this register object for this purpose. First, I'm going to call this doesn't convert dot serialized object. Well, decent convert dot serialized object comes from this namespace that is noodle soft dot JSON. And we have recently installed this needed plug-in. Now in the serialized object function, we need to pass our object. So as pass this object and heavy go. Now let's store this in some variable. And I'm going to name it JSON. You can name it whatever you want. We just need to call the string content and pass the values inside this. First, we need to pass this DSM. Then let's pass this encoding string former, that is UDF it. But it means that we can send the data to the server in any human language. I went along with English alphabet. You can also send the other language characters like French, German, Chinese, Spanish, etcetera. And finally, add media type. Well, we must specify the format in which we will submit the data to the server. If you go to the postman and open this registry endpoint, than in the height of this request. You can see that the Content-Type is application slash JSON. You know that we're going to submit our data to the server in JSON format. So we simply use application slash JSON here and then store the result in some variable name is content. Basically this string content class clears a formatted text appropriate for HTTP, server and client communication. Alright, as you know that to register the user, we need a post request. So this time in the Xamarin Forms, we need to call the post method that's used is to depict client object. And along with this client object, we can pick this post async method. Well, post Async will take two parameters. The first is the EPA's URL and the second is the content that we want to send to the server. So let's copy your EP Q4 register doodle, endpoint, and then visit the URL here. Right after that. Just passed this content here. Also, we need to take care of this asynchronous programming. Because man, recall this method. It will post the data to the server. And in the meanwhile, our application's user interface will be blocked because right now this method will be synchronous and it will block the application UI. And in order to work with asynchronous method, we first called the heat operator here. And you can see that it cannot work without async. So let's use 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 some other task in our application. Now let's store this in somebody table and name it response. Well, just like postmen, when we send a post request. And if the request is successful, then we will get the status code. Similarly in Zehmer foams, we need to check if the response dot status code is false. Then false. Else. If the response is okay, then it then the true. Now 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 bull here. However, we can use the task here. So let's use dusky would. Then inside this, let's make the type t2 bool. So far we have QG delta distributed. Now let's continue our work in the next lesson. 24. Login Method: In this lesson, I'm going to hit a login method. The purpose of this method is to get the access token. So let's get started. First of all, we need to get a method. So I'm going to add a method here and name it login. Now just for few seconds, I'm gonna switch back to the postmen. And you can see that in order to call this login endpoint, we need to send the email and password along with this request. So let's add two parameters of String type inside this login method. The first is email and the second is password. Now, just get a new instance of login modal class. And let's assign these parameters the properties of logon multi-class. Thus after code is almost similar to that just to user method. So I'm going to pop it these lines of code and then paste it inside this login method. Alright, now here we need to change a few things. The first is this past this login model object here in the CLS method. Then we need to change that URL. So let's copy your API SQL for login endpoint. And then visit here. Alright, use the async keyword and make the return type of this method to dusk off bool. Because this method will it then some Boolean value. Now the interesting thing start from here. So far this method is just like this register you did mattered. If we move to the postman and send the request to this login endpoint. Then we'll get the access token and the following kind of descended on the response body. So in order to use this decent, we need to deserialize it. Let me switch back to the studio. And there I'm going to use this response variable with await keyword. And along with that, I'm going to call this content property. And then use this read as string async method. Well, this line will read the data that comes in the response body. Alright, I'm going to put this in a variable. And if it doesn't result. Now we need to convert this decimal into C sharp objects. And for this purpose, let's use this JSON convert dot dc lies object. Then we'll use this glass that is token. And we'll put this distance l here. Well, this whole line means that it will deselect a decent result according to the token glass properties. Alright, now let's store this in a variable that is result. But this result, we can access all the properties of Dogen glass. As you remember that in this course, we have used the Zehmer essential preferences and we'll use the x_min essentially preferences to store the access token and the token expedition time with this result. As we move forward in this course, then I will explain you how to store the token expedition dime and how to verify whether the token is valid or expired. But for now, let's store the access token, while seven essentials. So as US preferences, then add the namespace for this preferences class. And here we go. Now with this preferences. Let's call this set function. And the set function will take the key as well as the value lastName over key to access token. And then in the value, let's use this result. And then pick the access open. Well, this line will save the access token in the preferences are isolated storage of the application. Similarly, Let's use the user ID in the preferences. We name our key to user id. And then the value will use this result, Epic digital ID. Now we'll store the username. And for this, we will live over C02 username. And then we will use this result and pick the username property. Alright, as we move forward in this course, I will show you how to set the expiration time of the token. So far, we have added the login method. Now let us continue our work in the next lesson. 25. App Settings Class: In the last lesson, we have added the login method. Now let me tell you that so far we have used our APHA UDL both in the register and the login method. Let's say we have 15 matters and every method contains this API URL. Now in future, let's say you change your rest APIs URL, that it means you need to update the URL, 15 different points. So we'll fix this problem. First of all, let's get a new CSIA plus and inhibit app settings. Now, just make this class static. And inside this class, I'm going to add a field of type string and name it API URL. Now let's copy this EPA URL and paste it here. Now in the register and login method, instead of this URL, we'll pass the URL from this app settings class. Basically will concatenate the APH URL with these end points. So let's remove the EPA's URL from the register method. And then let's call app settings dot API URL, which comes from this app settings class. And then we'll use the plus symbol to concatenate the EPA's URL and they'll destroy method. Alright, similarly, we'll do this in the login method. And here we go. Alright, now let's continue our work in the next lesson. 26. Get Categories: In this lesson, we're going to start working with that category section. So let's go to the postman. And there, let's open this categories and point. Well, this category's endpoint, will it on the list of categories? And inside of postmen, you can see that in order to call these categories endpoint, we also need to send the access token in the authorization header of this request. So hard to pass the access token inside the studio. Well, it's quite simple. Descriptor will studio. And there let's add a new method. And they may get, getaways. Right off the bat. Let's get an instance of HTTP client, HTTP client object. Let's use the default because had this property. Then pick the authorization header property. And right off the bat. Let's get an instance Authentication Header value class. We need to solve a namespace for this class. In this class, we'll add two things, the token type and the access token itself. So in the postman, you can see that the token type is better. So let's add below here as the first parameter. Then we need to pass the token here. But the question is how to get the access token? Well, in the login method, we have used a preferences to store the token. And now we're going to retrieve the token. So simply use preferences dot getMethod, and then pass the key name here, which in our case is the access token. And then they set the default value that should be empty. String are just use stink dot empty. I have already explained you how to save and retrieve the value from preferences to just make sure you have watched that episode. Now with this line, we can send the access token in the authorization header. Now you can see that this is a GET request. So we need to use the GetString async method along with HTTP client object. Then we're going to pass the URL of categories endpoint here. So just copy the API endpoint of categories. And then visit here. And before this endpoint will concatenate the API URL that comes from this app settings class. Now make this call or a table and use the async keyword along with dysfunction. This line will depend the JSON response. So we need to store the result in a variable and we name it response. Right after that, we need to convert the Just in response into csa classes and objects. Because the data that comes from this categories will be in adjacent forward and produce this dissent data in our Xamarin Forms application, we need to convert it into C-sharp classes and objects. So we will use decent convert dot dc lies object. And then let me show you that this category's endpoint within the list of categories. So we need to pass the list of category class here and then pass the response that contains the decent data. This line will convert a decent data into lists of category class. Alright, then discipline this. Then we will get the error here because this method needs a return type to list off category. So let's use the task list of category class here. That's our form, this endpoint. Now, I will see you in the next lesson. 27. Get Product By Id: In this lesson, we're going to start working with dot product endpoint. So in the postman as open this product by ID endpoint, this basically a GET request will take the product ID and it ends the product detail. So let's try to get a mattered for this endpoint. Inside of your studio. Discovered this getCategories method. And visit here. Right after that. Let's rename this method to get product by ID. And then this past dot-product ID parameter of integer type inside this method. Now let's copy the URL of your API endpoint. And then visit here. Now we need to pass the product ID parameter here with string concatenation. Here I am using this string concatenation and then pass this idea here. Now let's go to the postman. And as you can see that this request will just depend the details of the product in jest involvement. So instead of passing the list of categories, response the product class here, and then make the return type of this method to dos of product. We have to move the list because this endpoint will not return the list of product. It just beaten the product object. Alright, so far we have created this method. Now, we will continue our work in the next lesson. 28. Get Product By Category: In this lesson, wouldn't start working with dot product by category endpoint. So in the postman, let's open this product by category endpoint. That's basically a GET request. We'll take the category ID and it tends to lists of products. So let's try to get a mattered for this endpoint inside the wheel studio. Let's copy this, get product by ID method. And visit here. Right after that. Let's rename this better to get product by category. Then passed the category ID of integer type. Then just copy this URL object, API endpoint and visit here. Similarly, pass this category ID here. Now if we go to the postmen, then heads, you can see that this request really done the list dot products in a specific category. Instead of passing the product, we need to pass a list of product by category. Multiple, Gleevec, the return type of this method to task lists of product by category. All right, so that's how from this method. Now, I will see you in the next lesson. 29. Get Popular Product: In this lesson, we're going to start working with the popular product endpoint. So in the postman, let's open this popular product endpoint. That's basically a get request and it ends the lists of popular products. So let's try to get a method for this endpoint. We're going to switch back to the studio. And let's copy this getCategories method and simply visit here. Right after that. Let's be in this method to get popular products. Now, let's copy this URL of your API endpoint. And simply here, if we go to the postmen, here you can see that this request returned a list of popular products. So instead of passing the list of category glass, we need to pass the list of popular product also will make the return type of this method to dusk list of popular product. Alright, that's all from this method. Now I will see you in the next lesson. 30. Add To Cart: In this lesson, we're going to start working with a shopping cart and point. So let's open this, add items in God endpoint. And as you can see that this is basically a post request. And the request will take the folding data in JSON format. So what I'm gonna do is I'll simply switch to W studio. There. Let's go to this district mattered. Then we're going to copy this method and visit here. Now first of all, let's linear this method to add items in God. And this method will take advocate object. Alright, we'll pass the value to this, Add to Cart object somewhere else. And that's why we don't need to instantiate the instance of AD to God last year. Simply remove this code. And then in the CLS method, let's pass the Add to Cart. Alright, now let's copy the URL of this endpoint and visit here. This end point will also take an access token. So we simply copy this line for getting the access token. And then visited before the post async method. Alright, so far we have K2, this method. Now I will see you in the next lesson. 31. Shopping Cart Total Price: In this lesson, we're going to start working with Doug God subtotal endpoint. So in the postman, let's open this endpoint. And this endpoint will take the user ID and it tends to just the result. So let's try to get a method for this endpoint. And suddenly in studio, let's copy this get product by ID method. And PCs here. Right after that. Let's eat them. This method to get God subtotal. And then just pass the user ID parameter of integer type inside this method. Then let's copy the URL of your API endpoint. Visit here. Just make sure to pass the user ID parameter here. Then if we go to the postmen, then here you can see that this request will just return the shopping cart total price. So instead of passing the product, let's pass the cart sub-total glass here and then make a return type of this method to dusk off got subtotal. Alright, now I will see you in the next lesson. 32. Get Shopping Cart Items: In this lesson, we're going to start with and with the shopping cart items endpoint. So in the postman, let's open this endpoint. That's basically a GET request, will take the user ID and it tends to list off shopping cart items. So inside the video, let's try to get our method. What I'm gonna do is I'll simply copy this get got subtotal method. And pieces here. Right after that. I'm going to read you this method to get shopping cart items. And just make sure to pass the user ID parameter of integer type. Then let's copy this URL of your API endpoint and paste it here. Now if you go to the postmen, then as you can see that this request will return the list of shopping cart items. So instead of passing the god subtotal this boss list off shopping cart item class. And then make the return type of this method to dusk liftoff, shopping cart item. Alright, that's all for this method. Now, I will see you in the next lesson. 33. Total Cart Items: In this lesson, we're going to start working with the god total items and point in the postman as open this endpoint. And you can see that it's just a get request. And it will take the user ID and it tends to total number of items in the shopping cart. So let's try to create a method for this endpoint. Will simply switch back to the studio. And let's copy this, get, got subtotal method. And visit here. Right after that. Let's rename this better to get total Cart Items. Now you need to copy this URL of your API endpoint and then paste it here. Now, if you go to Postman and then here you can see that this request will just return the total number of items in the shopping cart isn't of passing the cart sub-total class here. Let's pass the total plot item class here. Make certain type of method to task off target item. All right, so that's all from this method. Now, I will see you in the next lesson. 34. Clear Shopping Cart: In this module, we're going to start working with clear God and point. So in the postmen, let's open this endpoint that's basically a delete request, will take the user ID and clear the shopping cart Augustus user ID. So let's try to create a method for this endpoint inside there in studio. Let's copy this, get total guard items battered, and paste it here. Now, let's rename this method to clear shopping God. Now, I want to tell you that this is a delete request. So we will use that delete async method here instead of get our post. Then he need to copy this URL of your API endpoint and simply visit here. Now if you go to the postmen, then has you can see that this request will not return anything. We just get a status code. So simply switched on will studio. There was simply removed the slide for diesel edition. And instead of this line, we will add if this postdoc is success status code is not true, then it then false. Otherwise, just return true. It means if the API call is successful, then we will get the true. Otherwise, we'll get false. Also, this method is threatening the Boolean value. So we will make the return type of this function to DA scoff bool. Alright, that's all from this method. Now I will see you in the next lesson. 35. Place Order: In this lesson, could give start working with the Place Order endpoint. So just open this place order endpoint inside the postmen. There you can see that this is a post request. And the request will take the folding data in JSON format. When the request is successful, then we'll get the decent data in the Response Body to basically this endpoint is similar to the login endpoint. Let me show you how we can get a mattered for this endpoint. First of all, let's dive into the real studio. There. Let's copy this ad items in cart method. And visit here. Now let's read in this method to please order. And this method will take an audio object. Then in the series method, the spouse this order. Now let's copy the URL of this endpoint. I want to tell you that this request relatively decent response for order ID. Let me show you how we can read this decent inside of a method. So simply go to the login method. There you can see that we have used this line to read that this result. And we will also use this line to convert the distance into seizure properties according to that token class. What I'm gonna do is I'll copy these two lines of code. And then instead of place, order mattered. Simply base this coat. Now first of all, let's remove this token class because we want to convert the decent according to the properties of order response class. So we will pass order response here. Also displace order endpoint rather than the order response. So we will make the return type of this matter to das cough, order response. All right, that's all from this method. Now, I will see you in the next lesson. 36. Orders By User: In this lesson, written to start working with orderBy Judah endpoint. So in the postman, let's open this endpoint. But this endpoint is basically a GET request. This request will take the user ID and it tends to list of orders. So let's try to create a method for this endpoint. Let me switch back to the studio. And let's copy this, get verdict by ID method. And simply visit here. Right after that. Let's see it in this method to get orders by user. Now let's copy the URL of your API endpoint and paste it here. If we go to the postman, you can see that this request, rather than the list of orders according to the user. Let's pass the list of orderBy user class. Then make the return type of this method2 does list of orderBy Judah. Alright, that's how from this method. Now I will see you in the next lesson. 37. Order Details: In this lesson, looking to work with the order details and point in the postman. Let me open this end point. And as you can see that it's just a get request. And the request will take the order ID, edit tells the order details. So let's try to create a method for this endpoint inside of his studio. Let's copy this get orderBy user method. And basically we're right after that. Let's rename this matter to get other details. Then make sure to pass Order ID in this method. Now, let's copy the URL of your API endpoint and visit here. If we go to the postman, then you can see that this request within the order and the list of order details, instead of passing the list of orderBy user will pass the lists of order, then make the return type of this method do dusk list of order. Alright, that's all for this lesson. Now, I will see you in the next section. 38. Implement Signup Functionality: In this lesson, we indicate the functionality of the signup page. Let me show you an image of the signup page. We will use the same kind of design with the XML code. So I have a test scored in a previous lesson. So all you need to do is just switch to the real studio. And their first of all, let's get a new folder and emit pages. Alright, then inside the speeches folder, I'm going to add new content pitch and emit sign-up page. Go to the signup page dot XML file. And first of all, let's remove this code. And then just copy this sign-up page code that I have attached with this video and then visit inside the sign-up page. Now, let me go to the button control click event. And then just get a click event off this button. Alright, inside this click event, we'll call that a distributed method that's present in the APs and this class. So in order to access this register user method, let's add EPA service, then resultant namespace. And right after that, let's pick this register user method. Well, this is just to use a method will take T parameters and these are name, email, and password. So we need to get the values from these amplicon tools and then pass the text value of those entries inside this method. Let's go to the signup page dot XML file. And I have already named these amplicon tools. What I'm gonna do is I'll switch to the code behind after speech. And inside this register user matter. Let's add E and name and get the text property of this entry control then will pass AND evil dot text and END password dot text. Now let me tell you that this method is asynchronous. So we need to make this code available. And of course, use the async keyword along with this button control clicked event. Now, let me tell you that this, the distToOrigin method, it tends to Boolean value. So we need to store the result in a variable and rename it response. Then will check if the response is true, then add the display alert. This display alert is like a pop-up. And in this display alert will pass three millimeters. A title message. And the OK button in the title as boss, high. In the message. As POS, your account has been created. And then end up OK, button S boss. Alright. Now, if this is not true, then moves used to display alert. And this time, good pasta falling message here. Now let me tell you that in our signup HTML file, we have an empty control for confirm password. So before calling the API, we need to check whether the password and confirm password is equal or not. So inside this button click event, let's check if E and T password N, e and d confirm password are not equal. Then sure, our display alert with the following message. Otherwise, if the password and confirm password or equal, then we'll wrap this code in the else block. Now we're going to add this application. But before this, let me go to the app.js dot CSV. And there we need to set the root page of our application. We need to make this sign-up page as a root page of our application. So let's add mente base equals new sign-up page. And then just dissolve the namespace. Alright, now let me run this application. And here we go. Our application is running and soon the sign-up page will appear inside the mobile device. Now let me add name, email and password 11, then less at different password in that confirm password entry control. And press this button. And as we press this button, will get a pop-up which says password mismatch. Please check your confirm password. Not let's type the correct password. Confirm password, enter Control, and then press Continue button. And here we go. This time we will receive this pupil which says your account has been created. Now let's close this popup and in the next lesson, we're going to start messing with the login page. So I will see you in the next lesson. 39. Implement Login Functionality: In this lesson, we'll create the functionality of the login bitch. Let me show you an image of the login page. We will use the same kind of design without both XML code. Just twisted W studio and their first of all, Kid on new Horton pitch. And I'm going to name it Login bitch. Now let's go to this login page dot XML file. And there, first of all, let's remove this code. And then just copy this login page quote that I've attached with this video. And then visit inside this login page. Alright, now let me tell you that when the user is on the sign up page and wants to login, then he just need to press this login button and then he will be rejected towards the Lockean pitch. Also, if the user is successfully registered, then he will be redirected to the login page as well. So let's go to the signup page dot XML file. And there is, the user is successfully registered. Then women there we get the user to the login page. So what I'm gonna do is I will add navigation dot push model async. And then passed on login page here. Now because we're navigating the user from one piece to another. So we need to make the root page to navigation page. Let's open app.use amble dot cs file. And their main page equals new navigation page. And then pastas sign a piece here. All right, now let's run this application. I'm going to register a new user. And if the user is suggested, then you'll get a pop-up and hearing. Now if we tap this all at option, then we will be rejected to a stop login bits. Now what if we were to navigate back to the signup page? The navigation back arrow is not working. So what I'm gonna do is I'll switch to the login page dot XML file. And just go to this image that will contain this image source of the back arrow. And right off the bat, just create an event of this image control. Not inside the step event. We need to add the code so that when the user will tap this back arrow, then he will be redirected back to the signup page. So in this step event. Let's add navigation dot BOP, model async. And this one line of code will redirect the user to that beach bit is coming. Also if the user is on the signup page and he also login, then he need to press this log in button and he will be directed towards the login page. So in the signup page dot xml file, let's go to this login button. And they're just create a clicked event of this burden control. And inside this click event, let's use the same line of navigation code that we have written after this display alert. So just copy this line and visit here. Now let's run this application. And let's try to tap this login button. And here we go. We are on this login Beach. Now if we pass this back arrow, then we are back on the signup page. Alright, now we need to add the functionality of this login page. So let me go to the login page. And let's go to this button control and just create a click event off this button. Now inside this click event, we can call the lock-in method that we have written in the API service class. So inside this even clicked just add API service, dissolve them in space. Then just picked a login method. And this login method will take two parameters, email and the password. The name of this entry is E and D E milk. And the name of this entry control is E and T password. So we'll just pick the textblock DFTs END email and posit here. And similarly, we will put the text block D of E and D password and posit inside this login method. Then just use the await keyword with this line and make this click event is synchronous. Now the slogan method, rather than the Boolean value, it can be true or false. So a strike to store the result in a variable and we name it response. Now we check if the response is true, then we will never get the user to the homepage. So let's get a new content page and rename it homepage. Alright, now, in this login base will check if the login is successful. Then let's navigate the user to the homepage. Well, if the user is on the homepage, then we don't allow the user to navigate back to the previous speech. So how to prevent the user to navigate back to the login page? Well, we'll just set the homepage as many bits. So let's use application dot current, dot main pitch equals new navigation page. And then Boston homepage here. We have Schuster navigation page here because later in this course from this homepage will also never get to some other pitch. And that's the reason we have used our navigation base year. Then if the login is successful, then just provide the following message in this popup. That is, oops, something went wrong. All right, now let's run this application. Now, let's go to the login page. And then I'm going to add the email and password and press this login button. Now if the email and password is correct, then we will be redirected to a stop homepage. Now, our main pitch is the homepage. And if we press the device back arrow, then it will not take us back to the login page. All right. So that's all from this login page. Now, I will see you in the next lesson. 40. Implement One Time Login: In this lesson, we are going to achieve the onetime login functionality with the access token. Right now, every time we close the application and open it, we need to login. Now instead of login again and again, please use a onetime login that both accessToken. Let me go to the API service class. And they're inside the login method. You can see that we have used preferences dot set method and we have stored the access token in the isolated storage. Not let's go to the API demo dot cs file. And there we're going to retrieve the access token value by choosing preferences dot getMethod. And of course, we'd need to resolve the namespace for this Preferences. Then indice getMethod. Let's add the key and the default value. This used the same key that we have used in this login method. Alright, and then in the default value, empty string. Then let's store the output in a variable and limit access token. Let's check if this access token is null or empty. Then just use the main base equals our signup bits. Otherwise, if the access token is not null or empty, then set the main pitch equals homepage. Now let's uninstalled the mobile application from the device. And then the strike. And this application again, as you can see that we're on the sign-up page. Alright, let's try to login with this application. And here we go. We're on homepage. Now, let's close this application. And if I open this application again, this time you can see that we are on the homepage, but that's working perfectly. So far we have covered the onetime login functionality without the access token and literal. In this course, I will explain to you how to refresh that token when it's expired. Alright, that's all from this module. Now I will see you in the next section. 41. Custom Hamburger Menu: In this lesson, we're going to customize the hamburger menu inside our Xamarin Forms application. While in seven forms, we can make a masterpiece like this. But to customize this master page is really a tough challenge. Like if you want to customize this master page, then definitely you have to go to Xamarin, Android enzyme and iOS projects and perform some native code. But don't worry, because in this lesson, I'm going to show you how you can customize the hamburger menu without writing any kind of code inside the Xamarin Android are Xamarin iOS. We will write all the code inside of a Xamarin Forms project. Let me show you what we can to achieve. Well, if someone will tap this menu icon, then we need to open this menu from the left-hand side. And if someone will tap outside this menu, then we need to close this menu. So we basically get this whole page dot XML file. And there let's go to this image control, which basically contains this menu source. And they're willing to make a tapped event of this control. Alright. Now just switch to that code behind file. And here inside this tapped event Wiki to write the code to open this menu from the left-hand side, let me go to the homepage dot XML file. And there let's go to this grid layout. That is grid. Our Lee. Well, discrete layout will contains the slider Menu. And when the user with tapped spanning icon, then we need to our level were current mobile device screen with this great, our Les. For example, let's say we have a collection view inside our homepage. But when the user tapped this menu, then on the top of collection view, we'll show this menu and where the user will tap this area. Then we'll close this menu. And now the user can work with the collection view again. So inside this grid overlay, you can see that we have to direct child controls. The one is the stack layout that contains all the things of the span you and the other is the box we can tell which will use when we want to close this menu. The name of the stack layout is SL menu. And this good name is greed, Our Lay. Currently this great overlay is set to be false. Let's go to the tapped event of this menu and less say, when the user will tap this menu, then first of all, we need to enable the grid overlay. So we use Greek overlay dot is visible equals true. Now let's run this application. And if we tap this menu icon, then this will open the menu. But we need to add some smooth kind of animation. So let's go back to the tapped event. And there we will add a sub-menu. Well, this epsilon2 is XDR stack layout, which contains all these things. Alright, so we will use ASL menu dot translate to this droplet to method will take four parameters. Xy length N is N function. Let's hit the x and y axis value to 0. And we will set the length equals 400, which means this will take 400 milliseconds to open this menu. Then in the Ising function, we'll use the linear attenuation. There are many animation effects like bounced, cubic, etcetera. But virtue is the linear animation effect. Not forget to add the await and async keywords. Now let's go to the box. We're told that we will use the closest menu. And there we can get a tapped event. Simply kit attempt. Even for this box, we're going to go. And now inside this step here, and we will choose 30 verse off this menu tapped event. Let's set the STL menu dot translate to. And then in the x-axis, let's set minus 250, because now we want to shift the menu to minus2, 50 units left. And then in the y-axis, just put 0. Now set to 400 milliseconds and use the leaner Ising function. Now, right after this line, just use duckweed. Our Lay dot is visible equals false. All right, now let's run this application. And if we tap this menu icon, then it will show the menu. And if we tap somewhere else, then this will close this menu. All right, so that's all from this module. Now, I will see you in the next lesson. 42. Implement Popular Product: In this module, we're going to work with the homepage and we'll show the popular products inside this collection view. So let's get started and we go to this homepage code behind file. And inside the constructor, lets get a mattered and limit, get popular products. Right after that. Simply get the method body or Sida constructor. Now in this method, we're going to call the get popular product method that we have written in the AP Sam is class. So let's add API service class, then just dissolve the namespace. Right after that. We will pick the popular products method. And this is an async method. So let's use the await keyword here. And along with this function, simply use the async. Now, let me tell you that this method will return the list of Buffalo products. So we need an optimal collection in which we can add our popular products. So let's get an observable collection of popular product class and emit products collection that in the constructor. Let's instantiate this products collection. Now, this method will return the list of popular products. So simply store this in a variable and rename it Products. Then let's add a foreach loop for i iteration. So simply insert the for-each loop and then just add this product in this products collection by using add method. Now, outside the for-each loop would need to set the item source of our collection view. So back to the homepage. You can see that the name of the collection view is cv products. So we need to choose CV products not item source. And then just assign this tortoise collection that this collection view item source property. Alright, now we need data binding so that we can display the data inside each cell of the collection view. So let's open the popular product class. Does you can see that we have the following properties. But as per the design, we just need to properties that one is for product name seconds for the product price and tells us for this product image. So as copy this name property. And then in the homepage, just go to this level control that's present in this collection view, and then bind the text of the label with the name property. Now let's copy this price property and sues to the homepage. And there we get to by the text property of this label with the price property. Now, this price property within that numeric value. But we want to display the price with the currency symbol. So let me show you how you can add the currency symbol with this price value along with this price. Well, let's use the binding expression that is sync Former equals. And then we use a single course and introduced a dollar symbol. Now right after this dollar symbol, just introduce a placeholder and put 0 here. Which means that after this dollar symbol, we'll get our price numeric value. Now let me go to the popular product class. And there we get to work with this image URL property. To handle the images, we need to concatenate the image URL with our API URL. So let's add a property and emit full image URL. Will it use the API URL that's coming from the app settings class. Now will simply concatenate the API URL with this image URL property. Now let's copy this full image URL. And inside this collection view, you can see this image control. So what I'm gonna do is I'll simply bind the source of this image with this full image URL property. Now, let me add this application. And soon we are on this homepage. And here as you can see that our data is loading inside this collection view. Well, that's awesome. So far we have worked with the homepage and we have loaded the data in this products collection view. So that's all for this module. Now, I will see you in the next lesson. 43. Implement Categories: In this lesson, we're going to work with the homepage so that when the user will be login successfully, then we will redirect the user to Jacaranda homepage. Well, we have already created this homepage and we have also added the XML design of this homepage. Now in this lesson, we're going to work with the API to get the data and show it inside the home base. So let's get started. Well, we basically need two things in this homepage. First, we'll call the categories endpoint and will display that data here. And then we will call the popular products endpoint and will display the data inside this collection view. Let's start with the categories. Let me go to this homepage code behind file. And there inside a constructor, lets get a method and then it gets categories. And right after that, let's get a method body outside this constructor. Now, in this method, we're going to call the getCategories method that we have written in the API service class. So let's add EPI service class. Right after that. We'll pick the getCategories method. And of course, this is an async function. So let's use the await keyword and make this method is synchronous by using the async keyword. Now let me tell you that this method will return the list of categories. So we need an observable collection in which we can add our categories. So let's get an optimal collection of category class. And then Nim disconnection to category's collection. Then in the constructor, let's instantiate this categories collection. Now this method will return the list of categories. So let's store this in a variable and rename it categories. Then let's add a foreach loop or iteration. And then just add this category in this collection by using the add method. Now, outside this fall is look, we need to set the item source of our collection view. So in the homepage, you can see that the name of the collection view is cv categories. So let's add cv category start item source property. And then just assign the categories collection to this collection view item source property. Now we need data winding so that we can display the data inside each cell of collection view. So as open the category class. And there you can see that we have falling properties. But according to the design, we just need to properties that one is for category Nim and others for this category image. So let's copy this name property. And then in the homepage, just go to this liver control that's present in this collection view and then simply buying the text property of this label with the name property. Now let me show you that if we send a request to this categories and point why Postman, then we'll get the image URL here. But in order to spill image, we need to use this full jewel of the image. So let's go to the category class. And let's get a new property and we name it full image URL. Then let's use the API URL property that's coming from this app settings class, then will concatenate the APH URL and image URL property. Now this full image URL will contain the full part of the image. Let's copy this property and simply switch to the homepage. Now inside the scatterplot is collectionView. We have this image control was simply by the source of this image control that this full image URL property. All right, now let's run this application. And here we go. Soon, we are on this homepage. And here you can see that our data is loading inside this collection view. Well, that's also now we will continue our work in the next lesson. 44. Implement User Name: In this lesson, we're going to work with the hamburger menu. And we will show the username hour here. So hard to get the username. Well, if you go to the postmen and sent a login request, then you will see that we will get adjusted response in the response body which includes access token, user ID, username, etc. So if you go to the login method of this episode is class, then you can see that we have stored the username in preferences. So let's use preference key to retrieve the username value. Back to the homepage XML file. And there inside this as cell menu stacked layout, you can see that the name of this label is LBL username. So we would use this label to display the username. Let's go to the code behind file off homepage. And they're inside the constructor. Lets use LBL, username dot dx property. And then we use references dot get method. And we use the same key for username that we have used in the login method. And in the default value. Let's pause stink dot empty. Alright, this one line of code will display the username. Now let's execute this application. And here we go. Now if we open this menu, then as you can see that we'll get a username. All right, so that's all for this module. I will see you in the next lesson. 45. Implement Cart Count: In this lesson, we're going to work with the card count functionality. On this homepage, we have discard icon. And let's see if the user has added some items in the shopping cart, then we need to show the number of items in this caught. By default, if the user will not add any items in the cart, then this cart will display 0 item. Okay, now let me tell you one important thing. We have not created this product detail page yet. But don't worry as we move forward in this course, I will show you how to make the product detail page and basically rent someone, add the items in the cart from the product detail page and phis back to the homepage. Then we need to show that number of items in the Scott. Now, let me go to this grid. And there you can see that we have a label that is LBL, total items. We will assign the value to this level from the code behind file. So inside the code behind file, we're going to call the get protocol items method that's present in the API service class. Now, instead of calling the method in the constructor, we will simply outside the old appearing method. That comes from the seven forms. That difference between the constructor and the own appearing method is that when we run this application than our application, we'll call the constructor just one time. However, every time we come on this homepage, the old appearing method will be invoked. So inside the own appearing method, let's call EPI service class. Then pick the total current I2 spattered with dx, dy user ID as a parameter. So how to get the user ID? But inside the login method, you can see that we have stored the user ID in a preferences. And now we're going to retrieve the value of the User ID. So inside this get total Cart Items, muchos, preferences, dot get method. And then little pasta key DEM, which will be the user id. And then in the default value will pass 0. Alright, now this basically an async method. So we will use the await keyword and make this call asynchronous. Now, let's draw the Zell that will get from this method. And we store the result in a variable and name it response. With this response, you can see that we can express the total items property that's coming from the total Cart Items class. Alright, this property will return the total number of items in the cart. So we'll assign this to a level control. Just use LBL, total items dot text equals and then assign this response.data total items. We'll get an error here because this total items is not a string property. So simply convert it into toString. Alright, here we go. Now let's quickly run this application. And on this homepage, you'll see that we'll get 0 here inside this shopping cart icon. Right? Now, as we move forward in this course, I will show you how to add items in this car and lens, we add items in the cart. Then discard icon will change its value. Alright, that's all found this module. Now, I will see you in the next section. 46. Collection View Navigation: In this module, we're going to work with the perfectly speech. So what I'm gonna do is I'll go to this Pages folder and then create a new content pH and image product list page. Now inside this product list page, I'm going to add the XML code. I have promoted. The court suggests popular code and paste it inside this product list page. Now, let me show you what we're going to achieve. Well, if the user, we'll adapt the category, then we will never get the user to the product list bits. And you will get all the products according to the category that he has selected. So we're going to work with the product less space. Let me go to the homepage. And there, inside this, we have this collection view, four categories. Let's get a selection change event of this collection view. Not inside the selection genes event week to handle the selection of the collection view. Now, let's use this e dot selection. Then use the first our default. And right after that, just use the ascii word for direct costing. Then let's add a class here, that is category. But this line will cost the data and pick the first element which will select from the categories collection view. Now, let's store this in a variable and emit different selection. Right after that, we need to move our user from this homepage to the product lists. Bits solutes use navigation dot, push, model async, and then pass perfectly space here. Now, let me run this application. And if we tap some category, then we will be redirected to a stop productively speech. Alright? But with this back arrow functionality is not working. So let's go to the product of the speech dot XML file. And then you will see this image control, which contains this back arrow. Let's get adaptive and for this image current tool. And now inside the step event, let's add the code to navigate the user back to the previous page. And for this purpose, we simply use navigation dark bulb modal async. Now, let's unleash application again. And then it will take us to the product less fish. And we can move back to the homepage by simply pressing this navigation back arrow. Now on this homepage, you can see that the category we have selected is highlighted and we cannot select this category again. So to resolve this issue will go to the selection chase event of this getting it is collection. And there we will add this code that is collectionView sender. Got selected item equals null. This one line of code will salt or problem. Let me and this application once again. And now it moved up this category and it will take us to the product less space. Now if we switch back, then we are able to select this category again. Alright, that's awesome. So far we have worked with product, with speech and the collection view navigation. Now, let's continue our work in the next lesson. 47. Collection View With Params: In the last lesson, we've added the product less space. And we have also implemented a collection view navigation from home base to the product, less space. But so far we have not passed any data from home base to the product of the speech. Let me show you what we're going to achieve. Let's say if we tap the category, then really to pass the category name and the category ID from this homepage to this product, less space. And on the product list page will simply display this category name. And then we'll call the get product by category method and pass this category ID. And this method whether done all the products according to the category that we have selected. All right, so let's go to the whole base coat BAM file. And inside the selection change event off category's collection will pass category ID and category name. So we will choose the current selection and then pick the id. Similarly, we'll choose the current selection dot category name. Alright, now we will see an error here because the constructor of the product list Space is dark matter less. And so far we have used two parameters. So let's go to the product li speech code behind file. And inside the constructor, dispose two parameters. The one is category ID of integer type, and the other is category name of String type. Now if we go back to the homepage that this time we don't see any kind of error. All right, now let's go to the product li speech XML file. And as you can see that the name of this level control is LBL category name. So in the coordinate of this protocol is space. Wounds use LBL category name dot text equals this category name that will get from this constructor. Now, let's run this application. And if we tap this category that it will take us to the product less space. And we'll also get the category name that we have dept. Alright, now let's continue our work and the next lesson. 48. Databinding in Product List Page: In this lesson, we're going to work with the product of the speech and we will consume that API and we will also bind the data. So let me go to the product li speech could be on file. And inside the constructor, simply, could a method, an image, get products. Right after that? Let's get the method body outside the constructor. Now in this method, we're going to call the get product by category method that we have written in the API service class. So let's add EPA, Sally's class. There's all that namespace. And right after that, we will pick this get product back category. And this method will take one parameter and that is category ID. So how we can pass the category ID in this method? Well, if you could have a constructor, then you can see that we gotta category ID from the homepage. And let's use this category ID. So let's pass this category ID inside this getContext method. We also need to pass some integer parameter inside the body of the spattered to accept this category ID. And right after that, let's pass this ID here. Well, this is an async method. So let's use the await keyword and make this function is synchronous. Not limited you that this method will return the list of products according to the category. So we need an observable collection in which we can add our products. So let's get an obstacle collection of product by category class. Then we need to resolve the namespace. And right after that, we named this collection to product by category collection. Then in the constructor, let's instantiate this products by category collection. Alright, now this method will return the list of products. So let's store this in a variable and we name it products. Then add a voltage loop for iteration. So here we have added the Fordist loop. Then. Add this product and this product Beck category collection by using the Add function. Now outside the for-each loop, we need to set the item source of our collection view subvector productively speech. You can see that the name of this collection view is cv products. So I'm going to use this CV products dot item source, and then assign this product by category collection to this collection view. Now we need data binding so that we can display the data inside each cell of the collection view. So let's open the product category class. And as you can see that we have the following properties. But aspect of design, we just need two properties. The one is for product name, second is for the product price, and the third is forties product image. So let's copy this name property and end up product does speech. Just go to this level control and then bind the textblock d at this level with the name property. Now let's copy this price property. And then we're going to buy the text property of stable with this price property. Now this price property will return the numeric value, but we want to display the price with the currency symbol. So along with this price will use the binding expression that is string format equals. And then we use a single course and introduced a dollar symbol. Now right after this dollar symbol, just introduced the police solar and put 0 here, which means that after this donor symbol, we'll get our price numeric value. Now let me go to the product back category class and begin to work with this image URL property. Well, as I told you earlier, to handle images, we need to concatenate the image URL with our API URL. So let's add a property and emit full image URL. And right after that, pulls use the EPA's URL that's coming from the app settings class. Now will concatenate the APA URL with this image URL. Now let's copy this full image URL property. And inside this collection view of products, you can see this image control. Now we're going to bind the source of this image, but this full image URL property. Alright, now let's run this application. And soon we are on this homepage. Now we're going to tap this category. And it will take us to the product of the speech. And there you can see that our data is loading inside this collection view. 49. Implement Product Detail Page: In this lesson, we're going to work with the product detail beach. I've attached the XML code of the product detail page in the previous lesson. So what I'm gonna do is I will get a new content page. And this time I'm gonna emit product detail page. Now, let me copy the product a little bit and then visit inside the speech. Alright. Now let me show you what we going to achieve. If the user is on the product list speech, and he will tap any product from this collection view. Then we need to show the details of that particular product. So let me go to the product list page. And inside this collection view, just get a selection change event. Alright, here we go. Now inside the selection change event, we're going to handle the selection of the collection view. So let's use this e dot current selection. Deduce the first our default, and then use the keyword var typecasting. Right after that at the class here, that is product by category. Well, this line will cost the data and pick the first element which will select from this collection view. Now let's store this in a variable and intimate current selection. Right after that, we need to move our user from this product list space to the product details page. So we will use navigation dot, push, model, async, and then pass the product detail page here. Also just make sure to set the collection view. Sender dot selected item equals null, so that when the user returns back the production of speech, that he can select the same product. Again. Now we need to send a Product ID from this product list page to the digital age life, we need to send a Product ID from this product less space to the product detail page. Because when we send the product ID, then the product detail piece will consume that get product by ID method. That will take the product ID and should have details of the product according to the product ID. So let's use the current selection dot id. This is all this error by simply switching to that particular dish. And inside the constructor, let's add an integer parameter and image Product ID. Alright, now inside the constructor, lets get our method and emit get product details, which takes this product ID. Now, simply get a body of this method outside the constructor. Alright, then we could to call the product by ID method. That's coming from the API is a riskless. So let's use api service class. Then dissolved a namespace. Now will pick this getElementByID method which accepts the product ID. So as pass this product ID here. Now, just add the await keyword and make this call asynchronous. Alright, this method will return the product details. So we will store the result in a variable and we damaged product. Now with this product, we can access different properties like name, detailed, price, image, etc. So as I said earlier, to display the image, we'd need to concatenate the EPA's URL and image URL. So we simply add a property inside this product class and emit full image URL. And then Buddhas used the app settings dot EPA URL and concatenate this width image URL property. Now Pepto product database, YAML file. And did you can see that we have different controls like IMG, product, LBL limb, LDL, detail, LBL price, etc. So in the code behind file, let's use this LBL name dot dx property equals product, and then pick the name not. We use LDL detailed dot dx equals product dot detail. Then we use IMG product dot source equals product dot image URL property. Right after that. Birds use alvin price dot text equals product dot price. We'll get an error here. So let's resolve this by converting this price into toString. Alright. Now, let's run this application. Just go to the product of the speech. And right after that, we can adapt this product. And it will take us to the details of this product. Whereas you can see all the details. Well, that's awesome. Now let me tell you that when we navigate to this product database, then the product price and the price will be same and litter. Then the user will increase or decrease the quantity of the product. Then booties a prototype price value. But first-time, when the user will navigate to this product detail page, then the product price and the price will be same. So let's go to the product detail page, XML file. And there you can see that we have this LBL, total price level control. Just go to the accordion file and let's use this LBL, total price dot dx equals. And then let's assign this Nobel Prize dot text. All right, now let's run this application once again. And let me quickly go to the product detail page. And this time you can see that product price and the price is same. Alright? Now, when the user will increase or decrease the product quantity, then we need to change the total price. So the students task in the next lesson. 50. Cart Increment And Decrement: In this lesson, we're going to implement the cart increment and decrement functionality. Which means when the user will adapt this plus icon, then this will increase the quantity. And then the user will press this minus icon. Then this will decrease the quantity. Also. When the user will increase or decrease the quantity, then we also need to update the total price value so as to achieve this functionality. First of all, let's go to the product. It will paste dot XML file. And there you will see these two images for plus and minus. Adapt even for this increment option. And then begin to adapt event for this decrement option. Alright, not inside the increment tapped event. We're going to implement a login for incrementing the quantity. So first of all, let's get that quantity value. Well, by default, this quantity level will contains one as a value. So what we're going to do is we'll get LBL quantity dot txt, and then assign this to this variable i. Now let's implement this I0 by using plus plus operand. And we will get an error here because this variable i is basically holding a string value. And this plus plus operand cannot be assigned to a string value. So we simply convert our LBL quantity into integer by using convert dot do int. Alright. Now let's use this LBL quantity dot dx property and assign this I0, which is basically an integer. And we need to convert it into toString. Alright, this first line will get the quantity value. Then the second line will increase the quantity when digital breast is tapped event. And this tone line will update the quantity. Alright, now we also want to update the total price when the user will increase the quantity. So to a political price, we simply multiply the LBL quantity value with the LBL price value. But before multiplying, we first need to convert the LBL quantity and LBL labor price into integer format. So let's use convict dot 216 and then past the elbow quantity dot text. And then we use multiple of sine and convert the LBL price dot text into integer. Alright, not whatever the result comes after this multiplication. We'll assign this to the LBL total price dot text. And we'll get an error here because the multiplication results is any integer format. And to display this indelible, to reprise, we need to convert it into toString. So we're going to use this toString method here. Now let's go to that department tapped event. And inside the stepped event, we'll use the same lines of code that we have used in the increment dept event. The only difference is instead of this plus plus will use minus-minus operand. Let me run this application. Now let's go to the product database. And there, if we implement a quantity, then you will see that it will also update the total price. And if we decrease the quantity, then this will decrease the price. Now if you further decrease the value that it will go into negative value, which in our case is not true because the quantity value can never be a negative number. So to fix this issue, let's good luck decrement tapped event. And there we'll add an if condition and check I is less than one. Then written from this event. Alright, let's run this application once again. And let me quickly go to the product little pitch. Now this time, if we increase or decrease the quantity that is working perfectly. All right, now this back arrow is not working. So the strike to fix this. Just go to the product detail page, XML file. We're going to get adapt even for this image. Not decide to step demand. Less good navigation dotplot model async. Alright, let's run this application. And this time, if we could, the product detail page, and then we will be back on the previous page. All right. Now, let's continue our work with this advocate in the next lesson. 51. Implement Add To Cart Functionality: In the last lesson, we have worked with the product detail page. And now in this lesson, again, we're going to start working with dot-product little beach, because so far we have not implemented the functionality for this Add to Cart. Vented user will tap this Add to Cart option. Then we will add the user product in the shopping cart. So let's do it. Just switched your product. It'll be start XML file. And let's go to this button been told Add to Cart. Now I'm could cater click event of this button control. Alright. Then inside this click event, we're going to call the add items in God method that's coming from the API service class. So let's use EPC list dot add items in God method, which basically takes Add to Cart class object. Now if we go to the Add to Cart class, then you can see that we have these properties like price, quantity, total amount, product id, and customer ID. In the code behind this product, little beach moon k1, Institute of Agriculture class. And then with this aggregate object, we could pick the properties of this act regard class. Let's pick the quantity and assign the LBL quantity dot dx property. Then we will pick the prize and assign LBL Bryce dot dx. Similarly, we'll pick the total amount and assign the LBL total amount dot text. Now what about the product ID and the customer ID? Well, as you know that inside the product detail page, we have received the product ID, but produce this product ID outside this constructor, we have to get a field of type integer and rename it and the score product ID. Then let's assign this product ID to this underscore product ID field. Now will pick the product ID property with this aggregate and then assign the underscore product ID field. All right. Now what about the customer ID outlet user ID? With customer ID and user id is same. So let's go to the API service class. And inside the login method, you can see that we have stored the user ID in the preferences are isolated storage. So let's try to use the preferences to get the ID value. Inside the product detail page. Let's pick the customer ID with this aggregate and then assign preferences dot getMethod, not in the key. We pass user ID and the value 0. Now inside this add items in God method does pass this Add to Cart object. Now let's add the await keyword and make this call is asynchronous. This add items in God is a Boolean function and it returns true or false. So let's store the result in a variable and we name it response. Now we check if the response is true, then use the display alert and we simply pass unnecessary. That is, item has been added to the God. Alright. In the title are not gonna pass anything. And that's why I used the empty double-quotes. Tells if the response is not true. Then again, we'll use the display alert. And this time, let's use books. Something went wrong. Now let's run this application and just switch dot product detail page. And let's add this product in the cart. And here we go. The product has been added into the god. Now, if we go back to the homepage, then here you can see that the value inside of a cart icon has been updated. Alright, let's do it once again. This time we're going to the product database. And then let's add this product in the cart. The product has been added not with respect to the homepage. And this time the cart eigenvalue has been changed. Alright, that's all for this module. Now, I will see you in the next lesson. 52. Popualr Products Navigation: In this lesson, we're going to work with the popular products navigation and me show you what league to achieve. Well, on the homepage, we have a collection view that contains the popular products. Not when the user will click on the popular product than we did to shift the user to the database. As you know that we have already computed the functionality of the product detail page. So we will choose the code that we have used earlier. First of all, this go to the homepage. And there you will see this collection view for products. Get a selection sheets image of this collection view. Now, simply go to the product list page. And there we have q as this court in the collection view to move from the product li space for the product detail page. This time we have moving from home-based to the product detail page. So we will use the same code. So just copy this code and then switch back to the homepage. And they're just best discord inside this collection view selection change event. Now here we need to change something. This time instead of costing the product back category. We'll use here, popular product because the collection view that we as using on this homepage is mapped according to the popular product class. Now lemon and disambiguation. And this time, if we tapped a popular product from this collection view, and it will take us to the product detail page. And there we can increase or decrease the quantity and add the items in the shopping cart. All right, so that's all from this lesson. Now I will see you in the next section. 53. Implement Cart Page: In this module, we're going to work with the cockpit. So what I'm gonna do is I'll go to this Pages folder and then create a new continent page. And we're going to name it got pitch. Now inside this card pitch, I'm going to add the XML code, how you already provide the code. So you just need to copy the code and paste it inside this cockpit. Now, let me show you what we can achieve. If the user data caught icon, then we'll never get the user the cockpit. And he will get the list of items in the shopping God. So we're going to work with the Homepage and the cockpit. Let me go to the homepage start XML file. And inside this, we have this gesture recognizer for depth, got Eigen. And we're just going to get adapt event. Alright, not inside this depth event. We'll add the navigation code to move from this homebase to the cartridge. So just use navigation dot push model AC, and then pass the cartridge here. All right, now let's run this application. And if we discard icon, then it will take us to the cart page. Now let's try to fix this back arrow navigation because currently it's not working. So let me go back to the cart page. And then we have this image for BEC arrow. We can to get adapt even for this DEP gesture. Alright, then inside this event, little add navigation dot Bob, mortal async. Now if we run this application, go to the cockpits, then you will see that this back arrow functionality is working. All right, on this garbage weapon to show all the items that user has added in the shopping cart. So to do that, we go to the cockpits code behind file. And inside the constructor. Lets get a method. And they may get Shopping God items. Now, let's get a method body outside the constructor. Alright, then we're going to use the EPS has class. This is all the namespace. And right off the bat, let's pick this gets shopping God items method that's coming from the API service class. And this method will return the list of shopping cart items. So we'll choose to await keyword. Then make this call async. And right after that will store the result in a variable and we're going to name it Shopping God items. Now, let me tell you once again that this method will return the list of shopping cart items. So we need an observable collection in which we can add a shopping cart items. So let's get an observable collection of shopping cart item glass. Then we need to solve a namespace. And right after that, we named this collection do shopping God collection. Then in the constructor, Let's instantiate this shopping cart collection. Then we're going to add foliage blue for hydration. So inside the for loop, just add this shopping cart in this shopping cart collection by using the built-in helper method, that is Ed. Alright, now outside the for loop, we need to set the item source of our ListView. So in the cart page, you can see that the name of this ListView is LV shopping God. So let's add LV shopping cart dot item source. And then just assign this shopping cart collection for this ListView items was property. Alright, not less quantity over in the next lesson. 54. Databinding in Cart Page: In the last lesson, we have worked with the park pitch. And now in this lesson, we'll bind the shopping cart class properties with our card-based controls. Let's go to the shopping cart class. And then we have different properties like product name, quantity, price, total amount. So first, we will copy this product name property and then go to the card-based dot XML file. And inside this list view, we have this level is buying the text of this level with the product name. Then we will copy this quantity property. And we will buy the level text with this quantity. Alright? Now we will pick this price property and we'll bind the level control next property that this price. And finally, we'll copy this total amount. And then we'll bind the level text property with this total amount. Now we need to show the currency symbol after this total amount. So we simply use the binding expression that is straight forward. And then either single quotes and inside this will add the placeholder and add 0 here. Then we'll add the dollar symbol. Alright, now listen to this application. And if you go to the park page, then we'll get all the items that we have added in our god. Now let's try to get the product price of these items. So let's go to the cart page. And as you can see that we have level control. That is LBL, prototype price, which village US dollar quarter price of the shopping cart. All right, let's go to the code behind file after Carthage. And inside the constructor. Lets add a method and just name it, get total price. Now, we need to get a method body outside the constructor. And right after that, inside this method body moves US EPI service class, then picked up get, got subtotal method. It basically takes the user id. So to get the user ID, we will use preferences dot getMethod. And then we'll use the key that is user id. And in the default value, dispose 0. Alright, now use the await an async keyword. And this method will than the object of God subtotal. So we'll store it in a variable and emit total price. Now with this total price, we can pick this subgroup property, got subtotal glass. Then this, assign this to the LBL total price dot txt property. Alright, now, let's resolve this error by converting this price value in due to strain. That's on this application. And just go to the guard page. This time, you can see that we'll get all the items and the total amount of the shopping cart items. That's awesome. Now, let's try to work with this delete guard in the next lesson. 55. Shopping Cart Clear Functionality: In this lesson, we're going to work with that clear shopping cart functionality. So on this cartridge, if the user will adapt this clear card option, then little clearly shopping cart from the server as well as in the seven forms application. So let's go to the carpets XML file. And you can see this clear God, level control. Just get adapt even of this level control. Now inside the step event will use EPI service class. Then we will pick the clear card method that will take the user ID and cleared the shopping cart. To get the user ID. We'll use the preferences start getMethod and pass the user ID key, and then pass the default value that is 0. Now USA await and AC givers. And this clear God is basically a Boolean function and it will return either true or false. So we will store the result in a variable. And i'm going to inhibit the response. Novel check if this is both a is true, then we will show a pop-up that is display alert and pass a message here like your god has been cleared. All right, what's the cart is deleted? Then we will also cleared the ListView and this total price level control. So we will choose LV shopping cart dot item source equals null. And then let's use LBL, Twitter prize dot dx equals 0. Else if the response is not true, then show our display alert, but the following message, that is, something went wrong. Now let's run this application and pseudocode page. Now let's tap this clear. God. And I was shopping cart has been cleared. All right. Not if we switch back the homepage, then the COD value is set to be 0. Alright, that's all for this lesson. Now, I will see you in the next section. 56. Implement Place Order Page: In this lesson, we're going to work with the place order page. I have a text assembled quote of the place order page in a previous lesson. So what I'm gonna do is I look at our new content beach. And this time I'm going to name it plays entre page. Now let's copy the place, order bits, demo code, and paste it in the speech. Alright, here we go. Let me show you what we're going to achieve. Well, if the user is on the cockpit and he will tap this proceed option, then we will redirect the user to the place order pitch. And he can simply add the details and place the order. So let's try to achieve this functionality. First of all, the scooter that copies. And you will see this Proceed button. Simply kid onclick of this button control. Inside this event will add navigation code to navigate from this guard page to the place order Beach. And for this purpose, let's use navigation dot push model isn't. And then Boston Place Order base here. Alright, now we will switch to that place order Pitch XML file. And you will see this Place Order button. Let's get a click event of this button control. And inside this click event, we're going to write the code to place the order. Let's use EPI service class. This older namespace. Then pick this place order method that comes from this episome is class. This method will take the other object as a parameter. So let's come and discord. And first we can to get the instance of order class. Alright, just as all the following namespace. Now instead of postmen, when we worked with the police order endpoint, then I told you that we need to pass a folding decent data to place the order. So back to the studio. And here in the place order bit XML file, we have few entry controls like the antonym, phone and address. But take a look inside the postman. We need to send name, phone, address, total price, and the user ID. We can get the name phone and address from these controls. And we'll pick the user ID from the preferences. But what about the total price? How to get the total price value? Let me show you from there, we can get the total price value. Let's run this application. And let's add some items in the cart. Now if we go to the cockpit and at the bottom of the page, you can see this total amount value. Well, we'll use this value and pass this value from this card base to the place order beach. So let's switch dot, dot, dot cs file. And inside this navigation dot push model async, let's use this LBL total price dot text after converting it into double. Alright, now inside the police order page, let's go to the constructor and let's add a parameter of type double and intimate total price. All right, now we will add the private field of type double outta the constructor and emit underscore photo price. Then we will assign this parameter to this field. Now back to the actual code that we'll use to place the order. And here we will pick the name and assign the ENT name dot text property. Then we'll pick the phone and assign the END Fund dot txt. Similarly, we'll pick the address and assign the END edges dot next. Now we'll use the user ID. And then the user ID from the preferences by using preferences dot getMethod and pass the following key, that is user ID. Then in the default value, dispose 0. Now let's pick the perfect price and assign this underscore total price field. Alright, now uncomment this code and pass this order object as a parameter. Then use the await an ACK. But this method will return the object of order response class. So we will store the result in a variable and I'm going to name it response, not wilford the check. If the response is not null, then shoe are displayed. And in the message. We will display the order ID. So let's add your order number is. Then concatenate the order ID by using this response dot Order ID. Alright? If the response is false, then again, we're going to use that display alert with the following message, like something went wrong. Also, if the audit is successful, then we need to navigate the result back to the homepage. Right now, if we use navigation dot Bob modal async, then we will be detected duplicate piece from this place order page. So instead of this BOP model Async, we will choose application.gov dot min beach equals new navigation piece. And then pass the homepage here. Which means if the order is successful, then glued set the homepage as a main page, our root page of our application. All right, now let's run this application. Let's delegate target page. And click on this proceed option. And we're on the place order fish. There. I'm going to add a few details. And then let's just order. The order is successful and we'll get an order ID. Now if we tap this alright option, then we will be on the homepage. Let me add items again in the cart. And now described the place order base. And this time, let's say if the user is on the Place Order pitch, but he's not ready to place an order. And he wanted to switch back to the previous speech to add more items. That he simply press this back arrow to switch back to the previous speech. In our case, we need to handle the click event of this back arrow. So I'm going to place order bit XML file. And there we have this back arrow Image control. Just adapt even of this image control. And right after that, we're going to use navigation code in this event. So let's add navigation dotplot model async. Now let's unleash application and go to the place order page. That's it. We're not ready to place the order, so it simply press this arrow and suspected abuse speech. Alright, so that's all for this lesson. Now, I will see you in the next section. 57. Implement Order Page: In this module, we're going to work with the order page. So what I'm gonna do is I'll go to this Pages folder and then create a new content page. And then it order page. Now inside this order page, I'm going to add the XML code. I provide the code earlier, so just copy the code and paste it inside this order of h. Now, let me show you what we're going to achieve. Well, if the user will open the menu from this homepage and tap them my orders option. Then we'll let you get the user to the order page, and there he will get the list of orders that he placed. So let's go to the homepage. And there you'll see the stack layout containing the image and the liberal control for my orders. Well, let's get a tapped event for this stack layout. And heavier. Now inside the stepped event, we'll add the navigation code to move from this homepage to the order page. So we'll simply use navigation dot push, modal async, and then we'll pass order page here. Now let's go to the order page XML file. And there we have this image control for BEC arrow. As always, we'll simply get a tapped even for this image control. And inside the step deviant, we will add navigation dot modal async. Now let me and this activation. And on this homepage will open this menu and simply go to the order of h. Now, if we pass this back arrow, then this will take us back to the homepage. But this slider is still opened. Now, if the user will navigate from this homepage to some other base, then we need to close this slider. And for this purpose, let's go to the homepage code behind file. And there you can see that earlier when we worked with many slider, then we have use the following code to close the slider. This time, we will overwrite the own disappearing method that comes with Xamarin Forms. And inside this ONE disappearing method will add the code to close the menu. But we're going to use the same code that we have used in this event. Now, instead of repeating the code, I will simply add a method. And if it close hamburger menu. And now I will cut this code and paste it inside this close hamburger menu. And let's try to make this method async, not inside this tapped event. We'll call this clause hamburger menu. Also in the old disappearing method. We'll call this close hamburger menu. Alright. That's under subdivision once again. And simply go to the order page. Now, if we switch back to the homepage, then this time you'll see that our hamburger menu hasn't been closed. Alright, that's also. Now in the next lesson, let's try to utilize the API inside the order page. So I will see you in the next lesson. 58. Show Data Inside Order Page: In this lesson, we're going to populate the data in the order page. So let's go to the order page code behind file and inside the constructor and escapes a method and just name it, get order items. Now, let's get a method body outside discuss lecture. Then we're going to use the API service class. Dissolve a namespace. And right after that. Let's pick this, get orders by user method that's coming from the API service class. And this method will take the user ID as a parameter. Miller tend the list of orders by user. Let's use a keyword and then make this call asynch. Right after that, will store the result in a variable and we're going to name it orders. Now, let me tell you once again, and this method will return the list of orders by user. So we'd need an optimal collection in which we can enter orders. So simply create an observable collection of order by user class. Then we need to solve a namespaces. And right after that, we named this collection to orders collection. Then in the constructor, let's instantiate these orders collection. Alright? Then let's add a glue for iteration. Now, this adds order in this orders collection using the helper method that is Ed. Alright, now outside the for loop, we need to set the item source of our ListView. So in the order page, you can see that the name of this ListView is LV orders. So let's use LV audience dot items was property. And then just assign these orders collection to this ListView item source. Alright. Now we need to bind the order BY clause properties, whichever order based controls so that we can show the data to the user. Let's put it the order budgeted class. And then we have different properties. But we just need this order ID, order placed, an order total. So first we'll copy this order ID property and then go to the Order base dot XML file. And inside this ListView, we have this level just by the text of this level with this order ID property. Then we'll copy this order place property. And we will bind this level text with this order placed property. Now once again, back to the artery basilar class. Now we will pick this order total property and simply bind this level control text. But this Order Total property. Now we need to show the currency symbol after this quarter amount. So we simply use the binding expression that is sync Former equals two single quotes. And inside this, we add the dollar symbol, then add a placeholder and add 0 here. Alright, that's all we need from this oil-based. Now let's run this application. And if you go to the order page and you can see that we'll get all the others that this user has placed. All right, so that's all for this module. Now, I will see you in the next section. 59. Order Detail Page Challenge: Hi, I hope you are enjoying this course. Well, I have an assignment for you. As you know that in the previous section, we have worked with the order page and we've got the orders in the list. Now, I want to give you a challenge. Let's see, African the orders. If the user select some particular order than he will be redirected to the order DDL page. And there he'll get the needle of the order just like this. Alright, so this is a challenge that you have to complete level glissandos scenario. Once again, you have to design the order digital bits, just like this. Julie to dedicate from order list-based to the order digital piece when the user will select a particular order or the order digital page, you need to consume that get order details and point that we have written in the APs and his class. So that's the challenge you have to complete. If you are unable to complete the challenge than I will attach the source code in the next video. But tried to come to the challenge by yourself. Alright, that's all I'm going to talk about. Alright, I will catch you in the next lesson. 60. Implement Contact Page: In this lesson, we can to work with our contact page. So let's go to Pages folder. And I'm gonna create a new content beach. And just name it contact pitch. Not inside this contact page. We're going to add the XML code. You can download the XML code along with this video. I have provided the code. So you just need to copy the code and paste it inside the speech. Alright, now let me show you what we're going to achieve. Well, if the user would adapt this menu option and choose this contact page, then we will never get the user to the contact page. And there he can call on this number. Alright, so let's try to achieve this. First of all, let's put the homepage dot XML file. And I'm going to do stacked layout that contains this image and this level four contacts. All right, there we are going to get a tabbed even for this stack layout, not inside the stack view. And let's add navigation dot push model AC. And then we will pass on tech base here. Now, if we unleash application and tap this contact option, then this will take us to the contact page. Not let's try to add the code for this navigation back arrow. So in the contact page, XML file will go to this image control for BEC arrow and simply get adapt different. Not inside the scheme. It will add navigation dotplot modal async. Alright, now we're going to get a button click event that's present on the contact page. When the user will press this button, then we will open the device dealer. So let's go to the contact page XML file. And then we'll go to this button control and simply get architect event. Not inside this init will add a code to open the phone dialer. We don't need any plug-in to open the dialer. Because if x_min essentials is installed inside your project, then you don't need to worry about anything. We will simply use phone dial up class. There's also namespace. Right after that. We pick this open method and we pass some random number. Alright? Now if we run this application and tap this contact option, then we will be on the contact page. And we can tap this button. And this will open the phone dialer, which we can call on this number. Alright, let's go back and there are few things that we have not covered yet. So inside the menu option, you can see that the card navigation is not working and we have not performed the logger functionality. So let's go to the homepage. And there we go to the stack layout, which contains this got image and livable goal for God. Now will get adapt even for this stack layout. And then inside the step Durant will add navigation dot push model async, and then passed a guard page. Alright, now what about the login functionality? Well, we are going to cover the login functionality in the next section. 61. What are the issues with access token: In this module, we will explore the token meditator. Well, let me open the web API project. And if we open the app setting start JSON file, then the time for access token is present here. It means that our token will expire after that number of seconds, which is equivalent to one day. Not just for the sake of example, let's say that our token will expire after a 100 seconds. Alright, and we'll end up API again. And here we go. Now, let's go to the mobile application. And just on installed this application from the device. And right after that, let's run this application. And now I'm going to add my credentials. And right after that, let's open the stopwatch. And once I press the login button, then I will run that stopwatch. Now, let's go to the product of the space. And right now the data is present here. Now, just wait for a 100 seconds. Our token will expire after 100 seconds, because we have said that token expiration time in the Web API project. Now I think it's more than 100 seconds. Now again, if we go to the product list speech, then this time we'll get an exception and we'll get 401 unauthorized status code because our access token has been expired and no longer valid. So the question is, how to fester token if it's expired? Well, let's do this in the next lesson. 62. Solve Access Token Issue: In the last lesson, I told you that when our access token will expire, then we had no longer tissues of an API. So in this module, we're going to solve the problem. Well, first of all, let's go to the login method. And I'm going to save the token expedition dime in the isolate distorted. So let's use preferences dot set method. Then lastname over C02, token expedition dime. And then just stored the explanation dime. All right. Now in the postman, if we send a login request, then we'll get the Tobin expedition time in this format. Now we're going to get the current time of the device and see it in the acidic is storage. And then we'll compare if the expedition time is less than current time, then we will issue a new access token. So what I'm gonna do is I will go to the Manage nuclear packages for solution. And then let's install this new advantage. This new get package is used to convert the UTC time into Unix time. So let's install this package. And right off the bat inside this login method, let's use the preferences dark set method and then save the current time in the isolated storage. I will name this C02 currentTime. And then let's use this Unix time. And is all the namespace for this. Well, this Unix time will come from this plugin. And with this Unix time class, let's call the get-go runtime Method. This method is used to get that Karen Unix time. So far we have saved up going in time and the token expedition time. Now we're going to add the static class outside this API service class. And I'm going to name it token metadata. Alright, then in this class, let's add the static method and name it, check token validity. Now, in this method, we will check if the token is expired or not. If it's expired, then we'll add the code to issued a new access token. So first of all, let's get the token expedition time from the isolated storage. So we use reference dot get method, then pass the same key that we have Boston Logan method. Alright, then in the default value just passed 0 here, right after that. Let's store this in a variable and just name it expedition time. Now again, I'm going to store the current time in the isolated studies. So let's go to the login method. And let's copy this line. And visit here. Alright, now let's decrement time by using this key. And in the default value just passed 0. This store it in a variable and name it got in time. Now, here we will check if the explanation time is less than killing time. And it means our token has been expired. So we get to send a new request to the login method with that email and password. But now the question is how to get the email and password? For this purpose, let's go to the login base code behind file. And there when the user will add the email and password, then we need to store the email and password in the isolated storage so that we can retrieve this in the future. So let's Add Reference dot set and then less than n, The key to email. And then store this AND evil dot txt property. Similarly, let's store the password by using the password key and pass the value that we will type in the password entry. Alright, now back to the API service class. And in this method, let's try to get the email via preference dot getMethod. I stored the result in a variable and just name it email. Similarly, just get the password from the isolated storage and save it in a variable and just name it. Possible. Now in this method, if the expiration time is less than the current time, we need to issue the login request. So let's call EPI service class and pick this login method. Right after that, this pasta even at buzzword here. Now let's meet the skull of a table. And let's use the async keyword with this method. Alright, now, in the next lesson, we'll continue our work and we will learn how to vary date each API endpoint. Alright, I will see you in the next lesson. 63. Api Endpoint with Token Validator: In this module, we're going to validate all these methods that require that access token. So let's start with this getCategories method. In this getCategories before invoking the Institute declined, just check the token explanation. So what we're gonna do is we'll use token validator class and then pick this check token validity and use the await keyword with the skull. All right, now every time we call this getCategories method, then first it will check the explanation time. If the token is expired, then this method will call the login method. And we'll look at the new access token. And right after that, the following portion will be executed. Alright, now let's copy this line and basic inside every method that takes an access token. So I'm going to paste this line one-by-one. Now, let me uninstall the application from the device. And then let's run this application. Just switched to the login page. And I'm going to add a correlations. And right after that, let's open the stopwatch and simply issue the request. When we issued a request. Then we'll start the stopwatch. Alright. Now let's go to some other page, like product list, speech or digital page, etc. And then just switch back to the homepage. Our token will expire after 100 seconds. And right now it's more than 100 seconds. It means that our token has been expired. So what I'm gonna do is I'll switch to the perfectly space again. And then you'll see that we'll look at the data here. And behind the scenes, the new access token has been issued. That's how you can affect the token behind the scenes. All right, now let's continue. In the next lesson. 64. Logout Functionality: In this module, I'm going to show you how to log what the user from the application. So let's go to the homepage. And you will see the stack layout which contains this login label. Let's get adapt even for this stack layout. Now inside the stack view and let's clear the access token and the token expiration time. For this purpose, let's use preferences dot set method, and then pass the key for access token and set the value to empty string. Similarly, the sues the key for token expiration time and set the value of this token expedition time to 0. Alright, now once we cleared the values for access token and token expiration time, then just set the application dot current dot min pH equals new navigation piece and passed a sign a piece here. Alright, I'm going to run this application. Now, let's open the hamburger menu and tap this logout option. If we press this Login option, that it will take us to the signup page. Not next time if we have this application that it will show the sign-up piece because the access token and a token expiration time has been cleared. All right, so that way we can implement a logger functionality inside our mobile application. Alright, that's all from this module. Now, I will see you in the next section. 65. 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.