Build Cinema Ticket Reservation Application With Xamarin Forms | Asfend Yar | Skillshare

Build Cinema Ticket Reservation Application With Xamarin Forms

Asfend Yar, Microsoft MVP

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
68 Lessons (4h 4m)
    • 1. App Demo

      2:36
    • 2. Course Structure

      1:08
    • 3. Download Course Material

      0:16
    • 4. Get Application Backend

      1:59
    • 5. Create Azure Web App

      3:35
    • 6. Create Azure SQL DB

      2:49
    • 7. Publish Web Api To Azure

      4:51
    • 8. Azure Query Editor Preview

      1:08
    • 9. Seed Data Inside Azure SQL Db

      1:30
    • 10. Import Api Documentation File For Client

      1:24
    • 11. Test Accounts Section

      2:22
    • 12. Test Movies Section For Client

      5:00
    • 13. Test Reservation Section

      2:46
    • 14. Create Blank Project

      2:35
    • 15. Debug Xamarin Forms App

      2:08
    • 16. Xamarin Essentials Preferences

      2:18
    • 17. Store Value in Preferences

      2:38
    • 18. Retrieve Value From Preferences

      2:53
    • 19. Import Assets

      0:59
    • 20. Add Custom Renderers

      5:04
    • 21. Create Model For Accounts

      3:23
    • 22. Create Model For Movies

      2:31
    • 23. Create Model For Reservations

      1:09
    • 24. Register User Method

      9:09
    • 25. Static Class and Methods

      1:03
    • 26. Login Method

      5:45
    • 27. App Settings Class

      2:13
    • 28. Get All Movies Method

      6:15
    • 29. Get Movie Detail Method

      1:58
    • 30. Find Movies Method

      1:43
    • 31. Reserve Movie Ticket Method

      1:51
    • 32. Implement Signup Page Functionality

      5:29
    • 33. Implement Login Page

      8:09
    • 34. Implement One Time Login Functionality

      2:59
    • 35. Custom Hamburger Menu

      5:31
    • 36. Implement Movies Functionality

      8:08
    • 37. Implement Pagination

      3:41
    • 38. Implement User Name

      1:46
    • 39. Collection View Navigation

      4:33
    • 40. Collection View Navigation With Params

      2:08
    • 41. Movie Detail Page

      4:34
    • 42. Install Plugin For Playing Video

      4:04
    • 43. Implement Video Player Page

      5:42
    • 44. Implement Search Functionality

      6:13
    • 45. Search Page Navigation

      2:39
    • 46. Implement Reservation Page

      4:14
    • 47. Change Price With Picker value

      5:16
    • 48. Reserve Movie Ticket Functionality

      5:16
    • 49. Implement Contact Page

      4:13
    • 50. What are the issues with access token

      2:06
    • 51. Solve Access Token Issue

      6:52
    • 52. Api Endpoint with Token Validator

      2:14
    • 53. Logout Functionality

      2:12
    • 54. Api Documentation For Admin

      1:07
    • 55. Test Accounts Section For Admin

      1:46
    • 56. Test Movies Section For Admin

      3:28
    • 57. Test Reservation Section For Admin

      1:38
    • 58. Create Model Classes For Admin

      4:31
    • 59. Create Methods For Api Service Class

      5:39
    • 60. Create Home Page For Admin

      3:39
    • 61. Create Reservation List Page

      4:50
    • 62. Create Reservation Detail Page

      6:00
    • 63. Create Movies List Page

      3:55
    • 64. Delete Movie Functionality

      4:07
    • 65. Add Movie Page

      5:38
    • 66. Pick Image From Device Gallery

      3:12
    • 67. Upload Image To Server

      8:43
    • 68. Final Words

      0:19
75 students are watching this class

About This Class

Welcome to the Real World Cinema Ticket Reservation App Development course with Xamarin Forms.

I'm Asfend Microsoft Most Valuable Professional (MVP) as well as the First Xamarin University Most Valuable Professional at Skillshare and in this course I'll explain you every single aspect of real world application in Xamarin Forms. Yeah I know there're lot of courses over internet but there's never a single guide that teaches you how to create a real world application. And the purpose of this course is to train you to build your own 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.

  • Deploy Web Api's to Azure.

  • Consume Restful Api's.

  • Consume Nuget's in xamarin forms.

  • Upload Images to Server from Xamarin Forms.

  • Create a Complete Real World (Cinema Ticket Reservation) Application in Xamarin Forms From Scratch to End.

  • Create the Client and Admin Panel.

  •  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.

I want to set the right expectations because in this course we'll cover the Client and Admin Side of the Cinema Application with Xamarin Forms. We'll consume the Restful Api's but we'll not create the Rest Api in this course because Rest Api is a different topic and I've already created a Rest Api course with .Net Core 5.0.

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

Transcripts

1. App Demo: Before we get started, let me quickly show you the application that we're going to build. Well, this is basically a cinema ticket reservation Appalachian, and it's supposed to be used on your Android and iOS devices. With the help of this application, the user can easily deserve the movie ticket. So if I add this application, then as you can see that we have a signup screen. Let me sign up with this application. Now under login with this application. And here we go, our login is successful and we are on this homepage. Here we have a list of movies which are going to play inside a cinema. If we click on some specific movie, then we will be redirected towards the movie database. And there we can see all the details of the movie. Now if we will adapt these Play icon, then we will be rejected to another page. And there the trailer of the movie will be played. Now, let's go back and suppose if the user wants to book the movie ticket, so you simply tap this option and he will be rejected to reservation page. And there he can provide the details. Pick that ticket quantity. And these are the movie ticket. Alright, now let's open the admin side of the application. And they're often the login. The admin after application can see two options. One is for movies and the other is for reservations. In the admin will click reservations, then he will get the list of Reservations. Let's see. The admin wants to know the details of this reservation. So you'll simply tap this option and he will get all the details of this particular reservation. Okay, now, let's see. The admin wants to add new movie. So you'll simply tap this ad icon. And there he needed to provide all the details of the movie. And you can add them weak easily. Similarly, the admin can delete the movie if he wants. So desktop brief overview of this allegation and a lot of things that we'll cover in this course. So are you exactly to build this application with me? I hope you are. Then let's begin. 2. Course Structure: Let me quickly show you what is coming up over the next few sections. In the next section, we need to configure the RESTful APIs for reproject. Then will test our rest API endpoints, lie postmen. Once we test the API endpoints, then we'll dive into the Xamarin Forms. And when we setup our Xamarin Forms project that I will show you how to get all the assets of our application imported inside the Android and iOS projects. Right after that, I'll show you how to create model glasses and api service layer inside the Xamarin Forms application. Then we'll dive into the real world application. And we'll start our application from cigarettes, will make a beautiful cinema ticket reservation application. Once we complete that ticket reservation application, then we will also get the admin side of the application offered this course, you'll have a very good understanding of how to build a complete mobile application with Xamarin forms. So in this course, there are a lot of things to learn. And I will see you in the next section. 3. 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. 4. Get Application Backend: In this module, I'm going to show you how you can get the application backend source code. Well, I have designed a RESTful APIs in ASP dot and core, and I've published a core to the Github. 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'm 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. This make sure you've installed a real studio inside your machine. Well, this is an ASP dot and Core Web API project. And in this course, our focus is to understand the App Development with Xamarin Forms, not the RESTful API. Because creating the RESTful API in ASP dot and Core is a completely different topic. And if you want to learn the RESTful API with the SP dotted code, then check out my other course that is learned RESTful API with dotted chord. Because there I have explained every single feature of restful web API, like how to create rest APIs, to connect APIs for database, how to secure APIs, and how to deploy APIs, et cetera. In short, there, you'll get all the details of making RESTful APIs from scratch. Now, in this course, we get to consume the API inside our salmon Forms application. And in this project, we have our web APIs. Now in the next lesson, I will show you how to deploy this Web API project to Microsoft Azure. So I'll see you in the next lesson. 5. Create Azure Web App: In this lesson, we're going to create the Azure web app. To complete this lesson, make sure you have set up your Microsoft Azure account. If you have a Microsoft Azure account, then just open it. Now inside the Azure portal, just click on Create the source option. Destitute of rep template. Select a web app. Now, choose the subscription level. By default. Microsoft Azure will pick the default subscription level. I have your studio enterprise subscription level. You may have a different subscription level depending on the nature of your account. Then create a new resource group. Our resource group is logical container into which will put Azure resources like databases, applications, et cetera. The source group is like a folder. Just give some user-friendly Nim to your resource group. You can emit whatever you want. Once you get those source loop, then you need to give a name to your web application. Remember, your web application name will be unique. Note to users have seen that application name. Just give some unique name. Once you provide the web application name. Then just click the runtime stack. Basically, in the runtime stack, we want to tell or web application that what kind of platform we're targeting. Let's check what Darwin core version we are using inside our project. So just go to the studio and right-click on your app or web API and choose Properties. Inside the activation properties, you'll get your target favorite. At the time of recording this course, I'm using the falling dotted core version. Maybe you are using some different dot and core version. Let's get back to the Azure portal. And their core version that we're using is available in the runtime stack, then selected. In my case, it's not present. So I will select some other dotted core version. And later, once we will get our web application, then I will also show you how you can update your dotted curve wept API inside Microsoft Azure. Now, just click on Review and create. Click on the Create option. And this will get your Web application. Will submit that deployment is completed. You will get a success notification. Just click on the pin to dashboard, and this will pin your web app inside the Azure dashboard are home screen. Now we can access our web app from Azure hopes a green. So just click on your web application. Then we need to download this get published profile in which the configurations are present. We need this file when we will publish the web API to Microsoft Azure. Now we have created our web application, and in the next lesson, we're going to create our Azure SQL server and database. So I will see you in the next lesson. 6. Create Azure SQL DB: In order to publish the web API to Microsoft Azure, we need a few more things. We need to create MS SQL database inside the Microsoft Azure. So let's start with the Azure SQL database. Just click on SQL databases, dep the add option to add a SQL database. Just tools the same resource group that we have created in the Azure web application gives them user-friendly named geodatabase. Then we need to get our server in which we will add our database. So let's click this, create a new server where we'll put our database. Now, just give a name to the server. Then add the server admin login name and password. We'll need this admin login name and password. When we tried to access the Azure SQL database. Also choose the nearest location which you want to put your server. You can choose the nearest location as per your choice. All right. This step, this review plus Create option. And this will create a database inside the Microsoft Azure mutations because this will take up to five minutes. Now what's the deployment is complete that you will see this message. Just open the notification and just dab on the dashboard so that it will be no database to the dashboard. And next time it will be easy for us to open our database from the dashboard. Now, just open your database. Now, once you open the database, then you will see the folly kind of interface. You need to set the server firewall. Because if we don't set the server firewall, then our Azure SQL database will not access the Azure web application. By default, the allow Azure services options is off. So we need to turn it on. Once we turn on the allow Azure Services, then this save the changes. Soon we'll get a message which says that our server firewall rules are updated, dispersed. Okay, so far, we have created the Azure web application and Azure database. Now we're going to publish our Web API to Azure. So stay with me because I'll be right back in the next lesson. 7. Publish Web Api To Azure: To publish the web API to Microsoft Azure, we need that connection string of Azure SQL database. So let's go to the Azure SQL Database. And there you can see that connection string pulls us disconnections thing in our API project. Let's copy this connection string and says to the little studio, now will simply go to the app settings.js, JSON file. And there we need to paste our connection string. All right, here I have basically my connection string. Now make sure to pass that username and password here that you have used when you have created the Azure SQL Database. And now we're going to publish our Web API to Microsoft Azure. So in order to publish the web API, just right-click on the project and click publish the publish option to open the following dialogue where we need to import file. Choose the public profile that we have downloaded earlier when we worked with the Azure web application. Once we choose the public profile, then we'll studio little detect our web app URL. Now we need to choose this edit deployment mode. There would need to change a few things. First of all, let's go and check this. Apply migration checkbox. Then copy your connection string, pasta user ID and password and paste a connection string here. Now you will see that we have this framework dependent deployment mode. We will change this to self-contained. Now let me explain the difference between the framework dependent and self-contained deployment. Well, at the time of recording this video, Microsoft Azure only sports dotted core 2.1 and dotted go see port one. And currently it is a sports the dotted core version 5. In future, Microsoft will definitely at a dotted core version five inside the Microsoft Azure. But till then, we need to go ahead with the self-contained deployment boat. Now, what is self-contained deployment mode? In order to understand the self-contained deployment, we first need to understand the framework dependent deployment. Well, in Framework dependent deployment will simply get our Azure web app and provide the exact version in the runtime stack that we are using inside of a web API project. In Framework dependent deployment, the assemblies which need to run your web API on the targeted machine are present. And you just need to upload the source code and some sporting packages which your code is using. Now on the other hand, if we talk about self-contained deployment, then it means the assemblies which needs to run your project in the targeted machine are not present. And as a result, you need to upload the assemblies and the source code. But self-contained deployment takes more time as compared to the favorite dependent deployment. Because in the self-contained, we'd need to upload all the assemblies on the Microsoft Azure Portal. Now, if you are using the dotted core version, which is not present in the Microsoft Azure, then go ahead with the self-contained. Otherwise, continue your work with the favorite dependent deployment. I'll go with a self coroutine because as he already said, at this time, dotted 5 is not available inside the Microsoft Azure. Alright, civic. And click Publish. Then you need to wait for a few minutes during the deployment, just make sure you are connected with the Internet. And here we go. Now once the deployment is successful, then we'll studio will load the web application inside your default web browser. So far, we have published our Web API to Microsoft Azure. Now, in the next lesson, we will open the SQL tables inside of Microsoft Azure. So I will see you in the next lesson. 8. Azure Query Editor Preview: Earlier in this course, we have published the web API to Microsoft Azure and navigate to view our data inside the Azure SQL database. So open your Azure SQL database. Select acuity editor, Preview option. And on the right-hand side, we need to provide the same admin login and password that we have used during the creation of Azure SQL Server database. If your credentials are correct, then you will get all the tables under the tables option. Now in the next section, I will show you how to add data inside these tables. Because currently these tables are empty. Right? Now, that's all for this lesson. Now I will see you in the next section. 9. Seed Data Inside Azure SQL Db: In the last lesson, we have explored the web API project and we deploy the web API to Microsoft Azure. Now, in this lesson, we're going to see the data inside the Azure SQL database. So let's get started. The first thing that I'm gonna do is just open this script file. I have attached this file along with this course. So you just need to download this file, then open it. Now, if you open this file, then you will see the script. Will need to see the data inside our database. So just go to the database, then select a new Curie, not in this window. We will paste our script. So just copy the script and then disappear. 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 movies table and view the data. And here we have few records inside the movies table. Alright, 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 movies table. Alright, just stay with me because in the next lesson, we're going to test the RESTful APIs inside the postman. So I will see you in the next lesson. 10. Import Api Documentation File For Client: In this lesson, we're going to explore the API end points with APA documentation. I have attached the API documentation along with this course. So you just need to download this file for APA documentation. Now once you downloaded this EPA documentation file, then this opened the postman tool. You can download this postman tool from Google. The installation of this tool is very simple and this tool is free of cost. Now we have opened this postman tour, disposed of windows that you will see at a startup. Then go to this import option. And right after that, we need to select the EPA documentation file that we have downloaded. Just import this file. Now inside the postman. And under this collection we have a section that contains our API endpoints. If we expand this cinema client section, then we will get the subsections like accounts, movies and televisions. Alright, we'll first start with the Account section. So just stay with me because we'll continue our work in the next lesson. 11. Test Accounts Section: In the last module, we have configured our API endpoints in a postman. And now we're going to start working with these endpoints. First, we'll start with this account section. So if you expand this occurred section, that here we have these two endpoints like register and login. I'm going to open this register endpoint. So if we click this link, it will be open inside a postman. Now first, we need to add a web app URL here. So you need to copy your personal Azure web apps URL and visit here along with this register endpoint. Now, this is a post request. So if we go to the body of the request, then by default assemble descended on is already present here. All we need to do is just add the values to this decision, or we could 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 201 Created. It means our record has been created. Now let's go to this login endpoint. First, we need to add our web app URL here. Then let's go to the body of the request. Here, we need to add the user email and password that we have used earlier in that register endpoint. Let's copy the user email and password episodes here. Now if we send the request that will get the following dissent in the response body, like access token, expedition, time, user ID, etc. Now with this access token will further call other API endpoints. Because the rest of the API endpoints are secure and without the access token, we cannot access the other end points. Alright, so far we have gotten access token and we are ready to consume the other API endpoints with the help of this access token. So I'll see you in the next lesson. 12. Test Movies Section For Client: In the last lesson, we have talked about accounts and point. And now in this lesson, we're going to start working with the movies section. So let's go to the movies section and lets expand this. Here's, you'll see that we have three end points inside the movie section. Get all movies, get really detailed and find movie. Let's start with that. Get all movies endpoint. If we open this endpoint. But first of all, you need to provide your web app URL here. Alright, now if we send a get request, then we will get 401 unauthorized status code and we're not allowed to access this request. Now to access this request, we need an access token. So let's go to the login endpoint. And there you can see that we've got an access token. I'm gonna copy this access token. And right after that in the get all movies and point, just go to the header section of this request. And there we need to pass our access token. So disuse authorization header, and then pass the value of access token with a token type that is better. Well, beer is actually a type of token. Currently, we have already an access token here. Would just need to remove this and then boss the access token here, which we have copied earlier. Also, don't forget to pass the beer token diet along with this access token. Now, let's issue a request and heavy go. This time. We'll get a list of movies in the response body. Well, these movies comes from the SQL database that we have, cuz it on Microsoft Azure. So if you go to the SQL database and open the movies table that has, you can see that we have all the movies that we got when we issue a get request from the postman. Now here, along with the URL, you will see the base number and beads size will use this feature for designation. Let's say we want to get five records on first beach. So we'll pass based number equals one and besides equals five. And this will return the result for the first page. Now let's say the user wants to move to the second page, and there he wants to get the next five records. So in that case number will boss too, and in the base size will pass five. And this time, we'll get the result on this second pitch. We will discuss more about this when we work with the seven forms at the Asian. Now let's open the other endpoint, which is movie detail. That is basically a GET request without wasting any other moment. Let's provide the web app URL here. And right after that, we need to copy the access token and visitor in the authorization header of this request. Okay, now if we issue like rest, then we will get the movie detail against this ID that we have provided here. Similarly, you can get the detail of some other movie by providing the movie ID here. Now let's open the third endpoint, which is fine movies. Here, I'm to pass the web apps URL. And right after that, Let's copy the access token and visit here. Now, let me tell you the working of this request. Well, who's used this request to implement the functionality? We'll also want the Google kind of search inside of a Xamarin Forms application. And this endpoint will help us to achieve the search functionality. Now let's say we add a collector F here and send the request. Then we'll get all the movies strategy with the alphabet. And if we complete the word and send the request, this time, we'll get more accurate result. All right, so that's all from the movies section. Now let's explore the reservation and point in the next lesson. 13. Test Reservation Section: In the last lesson, we have talked about movies endpoints. And now in this lesson, we're going to start working with the reservation and point. So let's go to the reservation section and lets expand this page. You'll see this reservation endpoint. I'm going to open this end point. Well, this is basically a post request. And this request, we'll take the folding JSON data. Now to work with this endpoint, let's add our web app URL here. Now we need to provide the values to this descend into the receptor movie ticket would need the folding decent data. First of all, start with the user ID. Well, the question is how to get the user ID value? Well, if we go to the login endpoint than spots, you can see that we have got a user ID value. So let's add that user ID value here. Then we'll add the phone number here. Now, let's say that you should just floss to book only a single ticket in the quantity, he will add one here. Now what about the price and the movie ID? Let me go to the Get all Luis endpoint. And there won't get different movies. Let's say the user wants to book a ticket against this movie. So we need to add the following movie ID value here. Now what about the price? To get the price? Let's go to the movie detail endpoint. And let's add the movie ID and send that request. This filter then the result here, well, this is the ticket price. So let's provide this price value here. Alright? Now, if the user wants to book Duty gets, then we need to provide the falling price here. Alright, let's go with a single ticket and less issued a request. Here we go. Record has been added. That's all from this section. Now, we'll create the user mobile application for our cinema. And once we locate the mobile application for the user, then we will also explore the APIs for the admin. Alright, stay tuned, because I'll be right back in the next section. 14. 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. 15. 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. 16. 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. 17. 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. 18. 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. 19. Import Assets: To complete this course, you need some acids. So all with this course, you'll get the assets folder. Just download it. Then you need to switch to your Android project. And they're listed on the drawables folder and add the Android images. Similarly, let's go to the iOS Resources folder and add the iris images here. So we have added the images. Now let's continue in the next lesson. 20. Add Custom Renderers: In this lesson, I want to tell you that inside of our application we would use some controls that we cannot make easily. V x_min falls. For example, if we use the entry control, then on Android and iOS, we will get different kind of anti controls. Similarly, if we consider the picker control, then we'll get different kind of bigger controls on both iOS and Android devices. So this controls not look similar on both these platforms. So to use the same kind of controls on both iOS and Android will reduce the custom render. I've added some native code for both iOS and Android. And I'm going to show you how you can consume the custom render inside your application. So you just need to create a folder inside your Xamarin forms project and name it renders. Now inside this folder. And a new C surplus and emit borderless entry. Okay, we need to derive this class from entry. This entry is basically giving from Xamarin Forms. So agonist is here. Then let's copy this class and visit here. This time we name it modulus bigger. And we need to derive this class from bigger. Now let's go to the Android project and they're beginning to add a class and emit more or less entry rendered. Then you just need to copy my render code for borderless entry. And basically it inside this class. Similarly, we will add another glass intimate borderless lender. Now, let's copy my picker undercoat and visit here. Okay, then we will switch to the iOS project. And first, we'll get a class limit, borderless entry rendered. Then copy the borderless entry gender code for iOS. And basically it inside this class. Similarly, we will get another glass and emit more or less because lender then copy the picker you entered code for iOS and BCD inside this glass. Okay, now let me go to the Xamarin Forms project. Let's go to this main pits XML file. All right, now let's say we want to add entry control inside of an application. So we will choose the built-in NPV control here. Now, let's say we want to add the custom entry control. So we will use this class name here, which is more or less entry. And then we need to resolve them in space. Okay, now, you can see that we can pick all the attributes of entry control like lists, order, et cetera. If we run this application, then you can see two different entity controls here so that we can customize our controls. 21. Create Model For Accounts: Hi guys. In this lesson, we're going to create our yield for Xamarin Forms application and will consume RESTful APIs inside the Xamarin Forms application. So let's start with, first of all, let's go to this Xamarin Forms project. And there I am going to add some C-sharp model glasses. But before this, just right-click on the project. And then let's create a new folder and emit models. Now inside this model's folder, I'm going to add few modal glasses before adding them moral glasses. Let's jump back to the postmen. And let's start with this account section. First of all, we will open this register endpoint. And there you will see that in order to send this signup requests, we need to pass this decent data. So I'll copy this data and just head over to the website for decent to C-sharp converter. There are many website for converting Jason, two C-sharp. I'm using this one. You can also use some other website for this purpose. The umbra pasted decent data and narrower class to register. Make sure C-sharp option is enabled. Ok, now let's denote the seizure properties from this distance data. And here we go. Now let's go back to them in studio. There, I'm going to add a mortal glass in this model's folder and rename it register. Right after that. Let's copy the data from this website. And you place ever register glass with the new one. Alright, now let's go back to the postman. And I'm going to open the login endpoint. And in order to send the login request, we need to pass this different data. So we will simply copy this decision and head over to the website. And I'm going to add the decent data here. And in the class to login, then submit that request and we'll get seizure properties. Now inside the studio. Let's add a class. And this time I'm going to name it login. Right after that. Just copy the data and visited. We're now back to the Boltzmann. And there this login endpoint, Milton, the falling JSON response. So we'll copy this decent data and visit here. Now, we would need more glass to Token and then submit the data. Again. We switch them in studio. And this time we're gonna create a new subclass and we name it token. All right, now inside this token glass will add the data from this website. So just copy the data and visit here. So far we have added the model glasses for account section. Now, let's continue over in the next lesson. 22. Create Model For Movies: In the last lesson, we have edited a modal glass for accounts. And now in this lesson, we're going to add them model classes for movies. Let's start with that. Get all movies endpoint. Well, this request, rather than the folding distance data. And what we need to do is we'll copy this JSON data and then we never gloss to movie and simply submit that data this way then the following properties. Now instead of in studio, let's get a new C subclass and emit movie. Then we need to copy this data and visits here again with respect the postmen. And this time we're going to open this movie detail endpoint. As always, copy this data and paste it here. Then we never class to movie detail. And did it seizure properties. Now, once again, back to the studio. And they're hungry kid, a seashell class, and they made a movie detail. Now we will copy the data and visit here. Okay, once again, I'm gonna switch back to that Boltzmann. And we'll open this fine movie request. This request within the folding descended out. We just need to copy this decision and visit here. Now it will never glass to find movie. Then delete the csa properties from this descent. Now instead of in studio, Let's get a new csa class and maybe find movie. Now let's copy this data episode here. So far, we have edited the model glasses for accounts and movies. Now let's continue our work in the next lesson. 23. Create Model For Reservations: In this lesson, we're going to start creating the model class from reservation endpoint. So let's go to the postman. And there, let's open this reservation endpoint. And in order to book the movie ticket, we need to use this decent data. So what I'm gonna do is I'll copy this designator and pasted here. We never gloss to as innovation. Alright. Now, genital seizure properties from this decision. And right after that, inside the studio, I'm going to create a new C-sharp class and rename it reservation. Then we'll copy this data and paste it here. So far so good. We have completed all the modal glasses. And now from the next lesson, we're going to get the APA service layer inside Xamarin Forms application. So I will see you in the next lesson. 24. Register User Method: In the previous section, we have created our model glasses, and now we can go explore the service later. For this purpose is add a new folder and image services. Then inside the services folder, I'm going to add new glass and name it api service. In this episode is 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 limit register user. And we need to pass three parameters 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. But this is a district clause is present inside this model's folder. Just make sure to resolve the namespaces for this district class because it's present in the models folder. So we need to add the following namespace. Then let's assign these commutators and the properties of the district glass. In order to call the API, we 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 iterative inclined. And this namespace is system.net dot HDTV. 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 you want to send the data to the server, then we need to convert the C sharp objects to just and 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 that 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 serialize are deserialized data. In order to work with Sierra this and this relation, we need to add a new group that is Newton soft dot JSON, our JSON.net. So right-click on the solution and simply select, manage nuclear packages. Not in the search bar, just search for decent.net. And heavy though. We are list of globins. But I'm interested in this Newton soft dot JSON plugin because this is an official legal package for decent serialization and deserialization. Well, 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 wait a little bit sooner, we'll get that 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 descent convert dot serialized object. But doesn't convert dot serialized object comes from this namespace that is Newton 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 pick 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 format, 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, et cetera. And finally, add media type. Well, we must specify the format in which we will submit the data to the server. And do you know that we're going to submit their data to the server in a decent format. So we simply use application slash JSON here and then store the result in some variable name S content. Basically this stream content class creates 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 lined 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 APIs URL, and the second is the content that we want to send to the server. So let's copy your EP here for the distributed 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 men recall this method. Then it will post a letter 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 call the 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 include poster data to the server. And in the meanwhile, we can also perform some other task in our application. Now let's store this in summary table and name it response. Well, just like postmen, when we send a post request. And if the request is successful, that will get the status code. Similarly in several forms, we need to check if the response dot status code is false. Many TMD false. Else, if the response is okay, then it ended 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 to pull. So far we have QG delta distributor. Now let's continue our work in the next lesson. 25. Static Class and Methods: In the last lesson, we have just created this logistic method now to make this class static. Now as you are thinking that we're going to make this class static. Because let's say when we want to access this register user method in some other class, then we have to get an instance of this class. And for that instance, we can access this registered user method. However, if we make this class static, then we also need to make all the methods in this class to static. And when we try to access this logistic method from some other class, then instead of creating the new object, we simply call this method with the name of this class. So just make sure to make this glass and this register methods Static. And all the methods that we're going to add in this class will be static. Alright? Now in the next module, let's explore the login method. 26. 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 going to 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 barometers of String type inside this login method. The first is email and the second is password. Now, just get a new instance of login mortal glass. And let's assign these parameters to the properties of login modal class. That's after code is almost similar to that just to user method. So I'm going to copy 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 the URL. So let's copy your API URL for login endpoint. And then visit here. Alright, use the async keyword and make the return type of this method2 does cough 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 user matters. But if we move to the postmen and send the request to this login endpoint. Then we'll get the access token and the following kind of descended on in the Response Body. To, 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 gonna 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. And we'll use this glass that is token. And we will put this distant result here. Well, this whole line means that it will deserialize the decent results according to the token glass properties. All right, now let's store this in a variable that is result. With this result, we can access all the properties of Dogan glass. As you remember that in this course, we have used the Zehmer essential preferences. And we'll use the x_min essential preferences to store the access token and the token expedition time with this result. As we move forward in this course, 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 use preferences, then add the namespace for this preferences class. Now with this preferences, let's call this set function. And this 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 in the value, we will use this result and pick the user ID. Now we'll store the username. And for this we will limb or a 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 token. So far, we have added the login method. Now let's continue our work in the next lesson. 27. 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 APIs, UDL, both in the register and the login method. Let's say we have 15 matters and every method contains this API URL, not in future. Let's say you change your rest API 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 C sharp claws 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 inhibit API URL. Now let's copy this EPA URL and paste it here in the course. Now in the register and log in method, instead of this, URL will pass the URL from this app settings class. Basically will concatenate the APH URL with these end points. So let's remove the APH 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're distributed. All right, similarly, we'll do this in the login method. And here we go. All right, now let us continue our work in the next lesson. 28. Get All Movies Method: In this lesson, we're going to start working with the movies section. So let's go to the postman. And there, let's open this, get all movies endpoint. Well, this endpoint will return the list of movies. And inside the postman, you can see that we need to pass the page number and base size along with the URL of this request. And along with that, we also need to send the access token in the authorization header of this request. So how to pass the access token inside the studio? Well, it's quite simple. Let's add a new method and name it, get all movies. And then full pass two parameters here. One is for base number and the second is for besides. Right after that, let's create an instance of ACDP client. Now with this ACDP client object, let's use that default request headers property. And then pick the authorization header property. Right after that. Let's create an instance of a Authentication Header value glass. We need to solve the namespace of this class. In this class, we will add shootings, that token type and the access token itself. So in the postman, you can see that the token type is below. So we add below here as a first parameter. And then we need to pass the token here. But the question is, how to get the access token? While in the login method, we have used a x_min preferences to store the token. And now we can do it, give that token. So let's use preferences dot getMethod and then master key name here, which in our case it's the access token. And then set the default value that should be empty. String are just use stink dot empty. I have already explained you how to save energy value from Xamarin essential preferences. So just make sure you have watched that episode. Alright, this line will 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 the HTTP client object. Then we're going to pass the URL off, get all movies endpoint here. So just copy the API and bond of movies. Then visit here. And before this endpoint will concatenate the EPA's URL that comes from the app settings class. Now, make the skull of a table and use the async keyword along with this method. Now, I want to tell you that the set of the static values, we need to pass this base number and pay size values here. So we will wrap this URL string dot format method. Now here, instead of base number value will pass 0 in the curly brackets. And in the base size value, we will pass one here, this 0 and VO1 is basically the place solar. Now right after that, let us say on this 0 location, we will bas based number. And in the first location will pass this base size value. Alright, this line Wilton Logistic Response. So we need to store the result in a variable and we name it response. Then we need to convert the distance spawns in CSER classes and objects. Because the data that comes from the movies endpoint will be in adjacent format. And to use this decent data in Xamarin Forms application, we need to convert it into C sub classes and objects. So we will use distinct convert dot dc lies object. And then let me show you that. This gets all lewis endpoint Millet and the list of movies. So we need to pass the list of movie glass here and then pass the response that contains the dissent data. This line will convert the distance into list off movie glass. Alright, then dissident this, and we'll get the adder here. Because this method needs are written dive to list off movie. So let's use the task list of movie class here. Alright, that's all from this endpoint. Now I will see you in the next lesson. 29. Get Movie Detail Method: In this lesson, we're going to work with the movie detail and bought. So NDA postmen. Let's open this movie detail endpoint. That's basically a GET request. We'll take the movie ID and it ends the movie detail. So let's try to get a mattered for this endpoint inside the studio. Let's copy this, get all Louise method and visit here. Right after that. Let's split them this method to get movie detail. And then just pass the ID parameter of integer type inside this method. Now let's copy the URL of your API endpoint and paste it here. Now we need to pass the ID parameter here with string concatenation. Here, I'm using the string concatenation and then pass this ID here. Okay, now let's go to the postmen. And hence you can see that this request will just within the details of the movie in a decent format. So instead of passing the list of movie, let's pass the movie detail glass here and make the return type of this method to DA scoff movie detail. We have removed the list because this endpoint will largely than the list of movies. It dissidents the movie detail. Alright, we have carried this method. Now I will see you in the next lesson. 30. Find Movies Method: In this lesson, we're going to work with the fine movie endpoint. So in the postman, let's open this fine movie endpoint, which is basically a GET request. This request, we'll take the movie name edit tends to list off liquid movies. So let's try to get a method for this endpoint. Well, let's switch to the real studio. And let's copy this, get all movies method and pasted here. Then listen him this method to find movies. And then passed a string parameter and rename it movie name. Now, let's copy the URL of your API endpoint and PCs here. Then we need to pass the movie name parameter here with string concatenation. Here I'm using the string concatenation and pass this movie name. Okay, now let's go to the postmen. And I want to show you that this request will return the list of records in the JSON format. So we need to pass the list of fine movie here. And then make the return type of this method to task list off, fine movie. Alright, that's all from this module. Now I will see you in the next lesson. 31. Reserve Movie Ticket Method: In this lesson, we're going to start working with the resolution endpoint. We're going to open deceleration endpoint inside a postman. As you can see that this is basically a post request. This endpoint is similar to the registry endpoint. Let me show you how we can create a method for this end 0.1 of all, let's dive into the studio and let's copy this and paste it here. Now, let's rename this method to reserve movie ticket. And this method will take the reservation object. So we will pass that as a missing class object here. Alright, then we don't need this code, so let's remove it. Right after that, we will see life this reservation object to JSON format. So we will pass this resolution here. Okay, now we'll copy this URL of this endpoint and PCs here. Now, I want to tell you that the sequester will also take the access token. So how to pass the access token inside this method? For this purpose, we will copy this access token line and visit here. Alright, that's all from this method. Now I will see you in the next section. 32. Implement Signup Page Functionality: In this lesson, we're going to get the functionality of the signup page. Let me show you an image of the sign-up page will use the same kind of design with the XML code. So I have attached this code along with this course. All you need to do is just switch the wind studio. And their first of all, let's create a new folder and we name it pages. Then inside this Pages folder, I'm going to add a new content page. And we name it sign-up page. Now let's go to the signup page dot XML file. And there, first of all, let's remove this code. And then just copy this sign-up page code that I have provided. And then best accord here inside this signup based on XML file. Now let me go to the sign-up image, tap gesture. And there will get a tap event of this signup image. And here we go. Alright. Inside the step event, we'll call that register user method that's present in the API service class. In order to access this register user method. Let's add API service, and then dissolve the namespace for this. Right after that. Let's pick this register user method. This register user method will take three parameters, and these are name, email, and password. So we need to get the values from these three entry controls and then pass the text value of these entities inside this method. So let's go to the signup page dot XML file. And there I have already named this entity controls. What I'm gonna do is I'll switch to that code behind off the space. And there inside the distributed method. Let's add E and D name, get the text property of this entity control. Then we will pass in the email dot txt and Indie password dot text. Now let me tell you that this method is asynchronous, so we need to make this call available. And of course, we need to use the async keyword along with this button control clicked event. This register user method returns the Boolean value. It can be true or false. So we need to store in a variable and I'm going to name it response. Then we will check if this response is true. Then add the display alert. Well, this display alert is like a pop-up. And in this display alert will pass three barometers. So in the title, let's pass high. And in the message that's passed, your account has been created. And then less boss. Alright. When we press this all at option, then this will close the pop-up. Okay, now if the response is not true, then we'll choose the display alert. And this time we'll pass the falling message here, hopes something went wrong. Now we're going to run this application. But before this, let me go to the app.js anvil dot cs file. And there we need to set the lute page of our application. We need to make the signup page as a root page of our application. So let's add main piece equals new sign-up page, and then dissolve the namespace. Ok, now let me run this application. And here we go. Our application is running. And soon the sign-up page will appear inside of a mobile device. Now, let me add the name, email and password. Wonder one. Okay, now if we press this sign up, then we'll receive this pop-up which says, hi, you account has been created. Now let's close this popup. And in the next lesson, we're going to make the login page. So I will see you in the next lesson. 33. Implement Login Page: In this lesson, we're going to get the functionality of the login page. So let me show you an image of the login page. We're going to make the same kind of design with the help of XML code. I have attached this code along with this course. So what do you need to do is just switch suitable studio. And their first of all, create a new content page and emit login page. Now let's go to the login page dot XML file. And there let's remove this code and then copy the login page code that I have provided and place it inside this login page. Ok, now let me tell you that if the user is on the signup page and if he's successfully registered, then he will be directed towards the login piece as well. So let's go to the sign-up based on XML file. And there, if the user is successfully registered, then pull navigate the user to the login page. So what I'm gonna do is I will add navigation, dot push model, AC. They'll push model, erasing them. Navigate the user from one page to another. If the user is successfully login, then he will get this popup. And once he will attack this all at option, then he will be redirected towards the login page because we're navigating the user from one piece to another. So we need to make the root page of our application to navigation page. Let's open the app sample.bcf file. And there this ad men based equals new navigation page. And then pass the signup page here. Okay, now let me run this application. And I'm going to register a new user. Now, if the user is registered, then will receive a pop-up. And here we go. If we tap this audit option, then we will be directed towards the login page. Now, what if we want 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 could contain the image source of this back arrow. And right after that desperate attempt, even of this image. Now inside this tapped event, we need to add the code so that when the user will adapt this back arrow, then he will be redirected back to the signup page. So in this depth event, let's add navigation dot pop model async. And this one line of code will redirect the user to debt base where his coming. Also if the user is on the signup page and wants to login, then he need to click on this option. And he will be redirected towards the login page. So if the sign-up base dot xml file, let's go to this level control which says only have an account. Then click here. Ok, inside this level control, I'm going to get a tap a went off this control. Now inside this step event, let's use the same line of navigation that we have written after this display alert. So just copy this line and pieces here. Alright, now let me run this application. And this time, let's try to adapt this option. We are on the log in base. If I press this back arrow, then we are back on the signup page. Okay, now we get to add the functionality of this login page. Let me go to the login page. And there, let's go to this image control and just get attacked. They went off this. Yes, sir. Now inside the depth event of this image, we will call the login method that we have defined in the API SLAs glass. Let's add API service. It is all the namespace. Then pick the login method. And this method will take two parameters, email and password. The name of this entry is e and the email and the name of this entry is AND password. So we'll just pick the next crop, DO this AND email and positive. Similarly, we'll pick the text block D of E and D password and pass it inside the login method. Then just use the await keyword with this line and make this even asynchronous. Now this login method, rather than the Boolean value, it could be true or false. So we store the result in a variable and emit response. Now we check if this is true, then we will never get the user to the homepage. So let's get a new content base. And we name it homepage. Alright, now in this log in base will check if the login is successful. Then let's say we get the user to the homepage. 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 will just set the whole base as a main pitch. So let's use application dot current dot equals new navigation base, and then pass the home base here. We have used the navigation piece here because later in this course from this homepage, we also navigate to some other pages and desktop season, we have used the navigation page here. Now if the login is not successful, then just provide the following message in this pop-up. And that is hope something went wrong. Okay, now let's run this application and go to the login page. They're able to provide the details and just press this Login option. Now if the email and password is correct, then we will be redirected towards the whole base. Now, our main base is this homepage. And if we press the device back arrow, then it will not take us back to the login page. Alright, so that's all for this lesson. Now I will see you in the next section. 34. Implement One Time Login Functionality: In this module, we're going to achieve the onetime login functionality with the help of access token. Right now, every time we close the application and open it, we need to login. Now instead of login again and again, we will choose the onetime login with the help of access token. Let me go to the API service class. And inside this locking method, you can see that we have used the preferences dot set method and we have stored the access token in the isolated studies. Now let's go to apps dot cs file. And there we're going to give the access token value by using preferences dot getMethod. And of course, we need to resolve the namespace for this Preferences. Then in this getMethod, let's add the key and the default value. Just use the same key that we have used in this login method. Alright? And then in the default value, dispose of the string. Then let's draw the output in a variable and limit access token. All right, now let's check if the access token is null or empty. Then just use the main basic equals sign-up page. Otherwise, if the access token is not null or empty, then set the main basic equals homepage. Now Let's uninstall the mobile application from the device. And then let's try to run this application. As you can see that we are on the signup page. Alright, lets try to login with the application. And here we go. We are on the homepage. Now let's close this application. And if I open this application again, then this time you can see that we are on the homepage. Well, that's working perfectly. Now. I want to tell you that so far we have covered the onetime login functionality without both access token. And later in this course, I will explain to you how to refresh the token. All right, that's all from this module. Now I will see you in the next section. 35. 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 there we need to make a tapped even of this control. Alright. Now just switch to dark 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 home base dot XML file. And there let's go to this grid layout. That is grid, our Lee. Well, this grid layout will contains the slider menu. And when the user with baptist menu icon, then we need to our level of our current mobile device again, with this great overlay. For example, let's say we have a collection view inside our homepage. But when the user will tap this menu, then on the top of collection view will show this menu and where the user will tap this area. Then we will 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 this menu. And the other is the box we control, which we will use when we want to close this menu. The name of the stack layout is SL menu. And this good navies greet our Lee. Currently this great overlay is set to be false. Let's go to the tab event of this menu. And let's say when the user will tap this menu, then first of all, we need to enable the grid overlay. So we use green overlaid 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. This Estelle menu is XDR stack layout, which contains all these things. Alright, so we will use ASL menu dot translate to roughly two method will take four parameters, x, y, lambda n is in 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 bounce, cubic, etcetera, but virtue is bilinear and emission effect. Don't 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. And now inside this tab here, and we will choose study worse 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. Now right after this line, just use the grid overlaid 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. Alright, so that's all from this module. Now, I will see you in the next lesson. 36. Implement Movies Functionality: In this module, we're going to work with the homepage so that when the user will be login successfully, then redirect the user to that kind of phone-based. Well, we have already created this home base 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 this homepage. Basically, when to call the get all movies endpoint and will display the data here inside collection view. Let me go to the home base code behind file. And there inside the constructor, the skip method and name it, get movies. And right after that, let's get the method body outside a constructor. Now in this method body weaken to call the get all movies method that we have written in the API service class. So let's add API service class dissolved in, in space. And right after that, we'll pick the get all movies method. And this is an async method. So we didn't use the await keyword and add the async along with this function. This method will take the base number and the page size. At this moment, let's pass some static values here. As we move forward. Then I will show you how to implement the Beijing why this method. But right now I'm using some hard-coded values here. Let's say we want to get five record on FirstPage. So we'll pass one here as a page number and five here as a base size. Now, let me tells you that this method will return the list of movies. So we need n observable collection in which we can add the movies. Let's get an observable collection of movie glass species. And then name it movies collection. Now in the constructor, just instantiate this movie's collection. This method will return the list of movies. So we stored the result in a variable and we name it movies. Then let's add a forest Lu for iteration so that we can add the movies in these movies collection. We add a for-each loop. And then just add this movie in this movie's collection by using the add method. All right. Outside the for-each loop, we need to set the item source of our collection view. So in the homepage, you can see that the name of this collection view is cv movies. So let's add cv movies dot item source. And then just assign this movie's collection to this collection view item source property. Alright, now we need a data binding so that we can display the data inside each cell of the collection view. Let's open the Movie class. And there you can see that we have falling properties. According to the design. We just need the following properties. First of all, this copy this name property. And then in the homepage, just go to this liver control desk present inside this collection view. Then will bind the text of this label with the name property. Then we'll copy this yonder property. And inside the homepage. Let's find this level text with this yonder property. Now we will copy this getting property. And again, inside the home base, we're going to bind this level text with this grating property. Alright? Then we'll copy this language poverty. This time will bind the falling level text with the language property. Now we will copy that duration property. This time. Let's bind this liberal text with the deletion poverty. Alright, now what about the image URL? Let me show you that if we send a request to this, get all movies endpoint Y postmen, then we'll get the image URL here. But in order to display the image, we need to use the full URL of the image. It means you need to concatenate your web app URL and image URL. So the scriptable we gloss and I'm going to get a new property and intimate full image URL. Then let's use the API URL property that's coming from the app settings class. Now we will concatenate the APIs URL and image URL property. This full image URL will contain the full plot of the image. So let's copy this property. And then in the home base and inside the movies collection view, we have this image control. Let's find the source of this image control with this full image URL property. Now, let me run this application. And here we go. So we are on this homepage. And here you can see that our data is loading inside this collection view. Well, that's awesome. So we have achieved the movies functionality at the moment. You can see that there are only five records inside our pitch. And when we try to scroll further than we don't get further records because we have added the hard-coded values in the ghetto, all movies battered and candidly, it returns only five records. Now in the next lesson, I will show you how to add the pigeon. So we will continue our work in the next lesson. 37. Implement Pagination: In this lesson, we're going to work with the Beijing because right now we're only getting the five records on the page. After these five acres, we're not getting any other advocates. So let me show you how to achieve the pacing inside our Xenophon's application. When we will land on this homepage, then we will only show five records on this page. And if we scroll down and right after the five records, we'll call the web API and we will get another five records. Similarly, when we further scroll, then we will get another five brackets. Alright, so V again, to achieve that kind of functionality, for this purpose, we'll go to the homepage XML file. And inside this collection view, we'll choose the remaining items threshold and remaining items, threshold reached event. But to, for this, let me show you what's the purpose of remaining items threshold. Let's say we have five items inside of our collection view item source. And now by default, the remaining items threshold value is negative one. If we set this value to 0, that it means that new dataset will not be loaded until we reached the last element of the collection view. For example, there are five elements in the collection view. And if we scroll down and released the last element, then we'll call the API to load more data. And if we set this value to one, then it means when we scroll down and only one element left that we have not six-year-old. Then the call goes to the API and we'll get the new data. Set. The remaining items three showed equals one. And then we'll get the remaining items, threshold reached event, which will be fired when we used a scrolling inside a collection view. Now in the code behind file, you can see that we have used the hard-coded base number and paste size values. Based size always be five. You can decrease or increase the page size if you want. But we are interested to set the base number value. So outside the method, we'll add a private field of type integer and emit based number, then set its value to 0. Not inside the method, we will implement this space number value. And then we'll pass this base number here. Alright, now in the tissue event, we need to call the spattered. Now let's run this application. And here we'll get the five rackets. Now, if a socle down, then the new call goes to the API and we'll get another five brackets. Alright, survey, if referred this scroll, then we'll get more records. Alright, so that way we can achieve the load more. Pagination, et cetera, Xamarin Forms application. That's all from this module. Now I will see you in the next lesson. 38. Implement User Name: In this lesson, we're going to work with the hamburger menu. And it will show the user name over here. So to get the user name. So if you go to the login method of the API service class, and you can see that we have stored the username in their preferences. So let's use this preference key, username value. Just switch back to the homepage XML file. And inside the Assad menu stack layout, you can see that the name of this label is LBL username. So we will use this label to display the sseuda name. Let's go to the code behind file off homepage. And their insight constructor lets use LDL user name dot text property. And then we use preferences dot getMethod and reduce the exec safety for username that we have used in the login method. This one line of code will display the username is suddenly level. All right, now let's run this application. And here we go. But if we open this menu, then you can see that we will get as using an hour here. Alright, that's all from this module. Now I will see you in the next section. 39. Collection View Navigation: In this lesson, we're going to work with the movie detail page. So what I'm gonna do is I'll go to this Pages folder and get a new content page. And we name it movie detail page. Now inside this movie detail page, I'm going to add the XML code. I have already provide the code. So just copy the code and paste it inside this movie Detail page. Now, let me show you what we need to achieve. But if the user will tap the movies from this collection view, then we will never get the user to the movie database. And there you will get all the details of the movie that he has selected. So we can to work with the movie detail page. Let me go to the homepage. And inside this, we have this collection view for movies. There. A selection changed event off this collection view. Alright, here we go. Now inside this selection chase event, we need to handle the selection of the collection view. So let's use this e dot current selection and use the first our default method. And use the ascii word for typecasting. Right after that. Add the class here that is movie. Well, this line will cost the data and pick the first element which will select from these movies collection view. Now let's store this in a variable and intimate current selection. Right after that, we need to move urge user from this homepage to the movie detail page. So we will use navigation dot push model is in, and then pass the movie detail page here. Okay, now let me run this application. And if we tap some movie, then we will be directed towards the movie database. Alright? But with this back arrow functionality is not working. So let's go to the movie database dot XML file. And you will see this image control, which contains this back arrow. Let's get attacked given off this image control. Now, in this step given, let's add a code to navigate the user back to the previous page. And for this purpose, we will use navigation dot pop model is in. Alright, now if we run this application and tap them Movie, then it will take us to the movie database. And we can move back to the home base by pressing this navigation back arrow. Now, on this homepage, you can see that the movie we have selected is highlighted and we cannot select this movie again. So to resolve this issue, we will go to the selection changed event of this movie's collection view. And there we will add this code that is collectionView, sender dot selected item equals null. This one line of code will solve a problem. Let me add this application once again. And now we'll tap the movie. And this will take us to the movie digital page. Now if this respect, then we are able to select this movie again. Alright, that's awesome. Now, in the next lesson, we'll continue our work and we will try to display the data inside the movie detail page. So I will see you in the next lesson. 40. Collection View Navigation With Params: In the last lesson, we have edited the movie DDL pace, and we have also implementing the collection view navigation from homepage to the movie detail page. So far we have not passed any data from the homepage to the movie detail page. Let me show you what we are going to achieve. Let's say if we tap the movie, then we need to pass the movie ID from this homebase to the movie Detail page and other movie DDL base. We will call the get movie detailed method and pass this movie ID. And this method will it in all the details of the movie according to the movie ID. So let's go to the homepage code behind file. And inside the selection changed event of movies CollectionView will pass the movie ID. So we'll choose this current selection and then pick the ID. Now will see an error because the constructor of MovieDatabase is parameter less. And so far we have shoes, one parameter. So let's go to the movies you dope is code behind file. And inside occurs sector, let's pass one parameter which is of type integer, and we name it Movie ID. Now if we go back to the homepage, then this time we don't see any kind of error. Ok, now let's run this application. And if we tap this movie, then it will take us to the movie detail page. But I've got to show that when we tap the movie from the home page and navigate to the movie database, then further received the selected movie ID on the movie detail page. So I'm going to add up breakpoint graph with the movie database constructor. And then try to tap this movie. So the breakpoint will be triggered. And here you can see that we'll get ever movie ID value. Alright, now we will choose this movie ID and Gaza get movie little battered. So just stay with me because I will be right back in the next lesson. 41. Movie Detail Page: In this lesson, we're going to work with the movie detail pace and we'll call the get movie detail method and display the data inside the space. So inside the constructor of the movie database, let's get our method and name it movie detail. And pass this movie ID. Okay, now let's get a method body of psi discuss vector. Alright, then we're going to call the get movie detailed method along with the API service class. For this API service, we need to import the namespace. Then we will pick this, get movie DDL better, which will take the movie ID as a parameter. So this boss, this movie ID here. Then we'll use the await an Async queue it. Now this method will then the movie details. So will store the result in a variable and rename it movie. Okay, now, with this movie, we can access different properties like movie name, duration, creating, ticket price, playing date, image, etc. So as I said earlier, display the image. We need to concatenate the APIs URL and image URL. So we simply add up property inside the movie digital glass and emit full image URL. And then we'll use the app setting start API URL and concatenate this with image URL property. Now back to the MovieDatabase several file. And as you can see that we have different controls like IMDB movie, IMG, movie Color, LBL, Nim, LBL rating, LBL ticket price, and few more. So in the code behind file, let's use this LBL name dot text property equals movie, and then pick the name property after movie detailed class. Now we will use the LBL dot dx equals movie dot. Similarly will pick some other properties like creating language, duration, blink, blink time, ticket price, description, and full image URL. Now you will see some editors here that movie rating is of type double, so we need to convert it into string. Then the ticket price is of type integer. So we need to convert it into string. We also want to concatenate the currency symbol along with this ticket price value. So instead of using that to sing, Let's concatenate the dollar sign with this ticket price value. All right, now let's run this application. And inside the homepage, let's tap some movie. And this will take us to the movie Detail page. And as you can see, all the details of the movie that we have selected. Well, that's awesome. Now in the next lesson, I will show you how to play the video. When we press this Play icon, psi, I will see you in the next lesson. 42. Install Plugin For Playing Video: In this lesson, we're going to start our work with the video page. Let me show you what we're going to achieve. Suppose if the user press this Play icon on the movie database, then we'll then get the user to the video page. And on that base, the user can see the trailer of the movie. If you look at the Lewis model endpoint where postmen than in the response will get this youtube link of the movie. Now, if we have a link something like with dot mp4 extension, then it's really easy to stream the video inside the Xamarin Forms application. But there's URL which we are getting from the API is a YouTube URL. There are a few ways to play the video inside the zone forms. The most common way is to play the video via view. But today, I want to show you a very nicely to crack the YouTube video and plate inside the Xamarin Forms application. So right-click on the project. And let's go to the Manage naked packages. And I'm going to search for this needed, which is YouTube exploit. Let's install this package inside your project. Now, with the help of this new, it will split this YouTube video inside our Xamarin Forms Application. Now let's go to the pages folder. And there we will add a new page. And we name it video player page. Alright, now whenever the user will adapt display icon from the movie database, then build navigate the juicer, do the Video Player page. And we'll also pass the movie Taylor link from the movie database to the Video Player page. So let's go to the movie database. And there we need to get a tap event for this play icon. Alright. Now inside the stepped event, this use navigation dot, push model async, and pass the name of the page where we were to navigate. In our case, we want to navigate to the Video Player page. So we will pass MediaPlayer pace here. Now we also want to pass the Taylor's URL from this movie digital pays to the video player pitch. Alright? And you can see that with this movie, we can pick the trailer. But now the question is, how to pass this inside this video player base? Because this movie variable scope is only inside this function. So let's remove this keyword. And now upside, this method will get a private field of type movie digital class, and we name it movie. Now we will use this movie and we'll pick the Taylor. You are property. We will see the error here because the constructor on the Video Player page is diameter less. And we're passing one parameter from here. So we'll switch to the Video Player page. And inside the constructor, lets add a parameter of type string and emit video URL. Alright, now stay with me because I will be right back in the next lesson. 43. Implement Video Player Page: In this lesson, we're going to work with our video player page. So what you have to do is you just remove the code test present in the video play ph dot XML file. And right after that, let's copy the code that I have provided you and paste it inside this video player base. At the time of recording this video, Xamarin Forms media element control is available with Xamarin forms. But to utilize this control, we have to go to the APS level dot cs file. And let's add this line. This control is in a testing phase and was x_min and Macrosoft team will test all the experiments, then they will allow us to remove this line, tell them we have to use this line. Otherwise this control will not work. Now back to the video player code behind pace. And in that constructor, lets add a method and have it play video. Then pass the video URL inside this method. Now we will add a method body outside the constructor. And here we go. Now we come to utilize YouTube explored plugin that we have installed earlier. But I want to show you how we'll work with this plugin. Let's go to the GitHub page of this plugin. And you'll see the working of this plug-in here. This code issues to get them Metadata after video like tuition, title, etc. But we want to retrieve them video. So we'll ignore this code. Then we have this code for downloading of video stream. Inside this manifest is sinc function will pass our YouTube videos URL. This copy these two lines of code and basically it inside of a video player page. Now, resolve a namespace and pass the video URL here. Alright, back to our GitHub page. And we'll see more things like the stream of this plugin is divided into two categories. Get mixed is used to play both the audio and the video. Audio only stream only plays the audio and video on this team only plays the video. So we will use this get mu. Let's copy this line and paste it inside the Video Player page. Also dissolved in space. Now once again, go back to the GitHub base, and this time we'll copy this code and paste it inside our video player base. You can see that this comment is saying that this line will download the stream in a file. But in our case, we don't want to download the stream in a file. We just want to play it inside our media file can toll. So instead of this line, boots use our media element. In the video player base XML file. You can see the name of over media element. Let's use this name. And then pick the source of this media element. Then we'll pick the dual property with the stream NFO and assign it to a media element control. Alright, now in the XML file. So you can see this image for back navigation. So as always, we'll get attempt event. And then we'll add the following code. Navigation dot, BOP, model, async. Alright. Now we have an activity indicator which is like a loader. And rules use this activity indicator until the video will load inside a media element control. So in the activity indicator, we have set that is visible and Israeli equals true. But once will get the stream of the video, then we'll set the is visible and Israeli to false. So in the code behind file that's used is running at its visible off this activity indicator to false. Okay, now we'll run this application. And let's go to the movie detail page. Now if we press display icon, then this will take us to the Video Player page. And there you'll see the loader. And soon, when loader will be disappeared. And we'll get this YouTube video inside of a Zen Forms Application. And of course, we can play, pause the video. And we can also use the move forward and move backward control. Alright, that's pretty awesome. Well, plead you to videos in southern mobile application is really a tough challenge. But the YouTube explored plug-in has made our life easier. That's all from this lesson. Stay tuned because i will see you in the next section. 44. Implement Search Functionality: In this lesson, we're going to work with the search movie speech. Before diving into the code. Let me show you what we're going to achieve. When the user, we'll adapt the search icon, which is on the homepage. Then we'll navigate that user to the search movie speech. And then he can type the movie them, and he will get the list of movies. So this is what we're going to achieve. Let's call it the Pegasus folder and get a new content pH would name it search movie space. Now let's get rid of this code and copy the movie SPY XML code that I have provided you and paste it inside the speech. Okay, now we need to handle the tab event of this search icon which is present on the homepage. Because when the user looked at the search icon from the homepage, then let me get the user to the search movie speech. So inside the home page, just go to the search icon. And then I'm going to hit that depth even of this image control. Okay, now inside the step event, we choose Navigation dot push model isn't and pass the name of the piece where we want to navigate. In our case, it's such movies pitch. Alright, here we go. Okay, now let's go to the search bit XML files. And inside this, we need to handle the texts changed event of this empty control. When the user, we'll change the text inside this empty controlled. Then we'll call the API to fetch the results. So let's get a text since event of this empty control. Right after that, inside this textures event, we check if this E dot new texts value is null, then it then nothing. With this E dot new text value. We can get the value of the entry when this change occur inside the Antiguan toll. Now if it's not null, then we need to call the API, use API service class dissolved an empty list. And then let's use the fine movies method. And this method will take a string parameter, which is movie name. So we will pass e dot nu dx value here. Along with that, let's call this two lower method. So that if the user will search the movie with all the capital letters, then this will convert all the collectors to the lowercase. Alright, now we use the await and AC givers. This method really than the list of movies. So we will store it in a variable and name it moves list. Now we want to assign this movie's list to alert, collection, view item source. So back to the search movies based file. And you can see that the name of this collection view is cv movies. So in the code behind file, we'll use CV movies dot item source equals, and then assign this movie's list. Okay, now I want to show you how to bind the data with this collection view. So let's go to the fine movie class. And there we have ID, name, and image URL property. We want to bind the name and image property with our collection view. And as I already told you, how you can get the image URL, again, highly tells you that we first create a property and image the full image URL. Then we'll concatenate this image URL property with our API URL. Okay, now let's copy this full image URL property and go to the search movie speech XML file. There inside the collection view, a spine, a source of this image, the full image URL property. Similarly, let's copy this name property. And inside this collection view, I'm going to bind the text of this level with the name property of fine movie glass. Alright, now I guess it's time to run this application. And here we go. Let me quickly go to the search page. And if we type something, then we'll get the results. If we complete our Curie, then we'll get the more accurate search result. Alright, that's off on this module. Now, I will see you in the next lesson. 45. Search Page Navigation: In this lesson, we're going to work again with the search movie speech. Basically in the last lesson, we have got the result in this such movies pitch. Now let's see if that user will tap the search result from this collection view. Then we'll get the user to the movie detail page. As you know that we have already covered the movie database. So this time there is no need to spend more time on the movie detail page. All we need to do is we'll go to the search movie spades XML file. And we'll add a selection changed event of this collection view. Now inside this selection change event, Whitman to write the code to move from the search movies, this The movie database. So this time, we will use our code that we have written in the homepage. Inside the homepage code behind file. Let's go to the selection today's event and copy this code. Now instead of certain movies base, I'm going to paste this code. This time instead of this movie glass. Well, let's use the fine movie class. Because we have defined our collection we can do with the properties of the fine movie class. Alright, that's all. Now let's run this application. And we're going to set some movie. Now if we press the movie from this collection view, then we will be redirected towards the movie database. And there we'll get all the details of the movie. All right, now, let's say the user wants to navigate back to the homepage from this search movie space. This back arrow is not working. So let's try to fix this issue. I'll switch to the search movie space. And they're good to get the depth of this image control. Now inside the step given we use navigation dot Bob model isn't. That's all for this lesson. Now I will see you in the next section. 46. Implement Reservation Page: In this module, we're going to work with the reservation page. What I'm gonna do is allocate a new content page. And this time I'm going to name it let admission Beach. Now, let me copy the reservation page level and then visit inside this face, you can find this code along with this course. Let me show you what we need to achieve. If the user is on the movie IDO Beach and he will adapt this book ticket. Then we will redirect the user to the elevation page. And there you can simply add the details and the movie ticket. So let's try to achieve this functionality. First of all, let's go to the movie digital bits. And there you will see this image control for book ticket. Let's get adapt even for this image inside the step here. And let's use the code to navigate from the movie database to the reservation pitch. So we will use navigation dot push model isn't. And then pass the base where we want to navigate. In our case, we want to navigate to that, then the emission pitch. Okay, now, let me tell you that on this reservation beach, we want to get the folding kind of data. So how to split this data on this reservation pitch? For this purpose, we need to send the data from the movie database to the division beach. Inside the movie database, we want to send this movie from this movie database to the reservation pitch. So let's parse this movie to the division pitch. Astronauts that we are passing the object of movie detail class to the admission pitch. So on the reservation page, we'll add a parameter of type movie D Do and intimate movie. And this movie will accept our data that will pass from the movie database. Okay, now, on the other isn't this, we want to get the following data. To get this data and show it inside the reservation base. We will first go to the other person bids XML file. And you can see that we have named elegant models. Now we need to assign the values that these controls. So in the code behind file, let's use this movie. Then pick the name property after movie digital glass. Alright, then assign this movie dot name to the LBL movie name dot text property. Similarly, little bit agenda. Creating language, duration. Full image URL. Routing property is of type double, so we need to convert it into those string. All right, now let's run this application and go to the movie didn't base. If we tried to press this book ticket, that it will take us to the reservation pitch. And then you can see the falling kind of details. Ok, now, in the next lesson, I will show you how to change the price of the tuning that pickled quantity value. So I will see you in the next lesson. 47. Change Price With Picker value: In the last lesson, we have worked with the reservation pitch. Now in this lesson, we'll continue our work and I'm going to show you what we achieve. So if the user is on a movie Detail page and press this book ticket, then we'll navigate the juicer, do their television pitch, and then he will see the price of the ticket. Okay, now when the user will select the quantity of the ticket, then mulching the price. Now after providing other details, the user can deserve the movie ticket. So let's start our work. First. We want to get the ticket price value. So in the code behind file, we can pick the ticket price with this movie. Then we'll assign this to the span price dot dx property. Let's convert it into a string. Alright, the spot price is the name of this span control. Now I want to tell you when the user will land on deceleration piece, then the price of the ticket and the total price of this ticket will be same and litter let the user will change the quantity value. Then we will take the total price value. So as I said, the price and the total price will be same. Des y will also assign this movie dot ticket price to the span total price dot text property. You can also sharp but these two lines. Okay, now if we run this application had quickly go to the elevation pitch. Then you will get the price of the movie tickets and the total price. Now picked up picker value for quantity, and then multiply it with the price of the movie ticket. So let's go to that adolescent bit XML file. And you will see this bigger control. I'm going to get a selection changed event off this bigger control so that we can pick the value of the bigger. Now inside this event, when the user will select the quantity from the picker, then we need to get the value from the speaker Control. And to get the value of the bigger pools use bigger quantity, which is the name of this bigger. Then we'll pick this items property. And inside this builds use picker quantity dot selected index property, which will get the index of the selected item. Now we will store the result in a variable and then it quantity. We also want to show the speaker quantity inside this span control. So we use spent quantity dot dx equals. Then assign this quantity. Now to get the total price, we're going to multiply the ticket price with the quantity value. So to get the ticket price, let's get a private field of type integer and emit ticket price. Then we'll pick our movie ticket price and assign this to our field. Alright, now let's use this ticket price field and multiply it with the span quantity dot txt. So do multiply it, we first need to convert it into integer. And then we'll pass this span quantity dot text. This will multiply the ticket price with the quantity. So let's draw the result in a variable of type integer and rename it total price. Now to display the total price value inside the application, we need to pick this span total price dot, and then assign this value by converting it into a string. Now, I'm going to run this application. And if you go to the, the, the recent piece, then you can see the ticket price value here. Right after that. If we pick the quantity, then you can see a change in the total price of the ticket. Alright, now in the next lesson, I will show you how to reserve the ticket. So Stephanie, because I will be right back in the next lesson. 48. Reserve Movie Ticket Functionality: In this lesson, we're going to implement the legislation ticket functionality. Finishes. It will provide the necessary details and bless that is good. Then we'll call the reserve movie ticket method of api service class, which will take the little mission object. So let's go to the division pits. And they're ready to get adept event of this image control not inside this unit. Let's call the API service. Then pick this deserve movie ticket. And this method will take the dimension object. Before working further, let's comment this line. And first we'll get a new object of veneration class. Now, I want to let you know that we need to provide the values, the folly properties inside the class. We can pick the phone quantity and total price from these controls. But what about the movie ID and the user id? As you remember that we have stored the user ID in the preferences. Now directive the value from the preferences will use preferences dot getMethod and their boss, the key name, and the default value. Now what about the movie ID? Movie ID? Let's go to the constructor. And there we could pick the movie ID from this movie. Alright. Now we will get a field of type integer outside this constructor and name ID, movie ID. Let's assign this movie ID to this field. Right after that. Let's assign the movie ID field to the movie ID property of hazard missing class. Now let's pick the default dot dx property and assign it to the phone dropped the FDA feather is in class. Okay, now we will use the span quantity dot text and assign it to the quantity property. If we will see this adder, then convert this into integer. Similarly, we will pick the span total price dot-dot-dot, and convert it into integer. Okay, now let's uncomment this code and pass this object as a parameter. Right after that, let's use the awake and async keywords. This method will it then the Boolean response. So it will store it inside the variable and emit the response. Now we check if the response is to. Then show our display alert for the success message. Otherwise, if the response is not true, that's your display alert with the error message. Now before we run this application, just go to the relevant bits and adapt. They went off this image vec eigen. Alright. Then will use the code to move to the previous page by using Navigation dot BOP model async. Now, Alden and Reagan run this application. Let's quickly go to the reservation page. And let's provide all the details and press this lizard option. And soon we'll get a success message. So that's all for this lesson. Now I'll see you in the next section. 49. Implement Contact Page: In this lesson, we're going to work with our contact page. So let's go to Pages folder. And I'm going to get a new content beach. And just name it contact beach. 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 visit inside this page. Alright, now let me show you what we're going to achieve. Well, if the user will adapt this menu option and choose this contact page, then we'll 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 home-based dot XML file. And I'm going to do stacked layout that contains this image and this label for contact. All right, there we going to get adapt even for this stack layout, not inside the stack view. And let's add navigation dot push model AC. And then we will pass contact page here. Now, if we run this 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 event. Now inside this unit, we'll add navigation, dotplot model 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 a click 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 dilute class is also namespace. Right after that, we picked 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 there we can tap this button. And this will open the phone dialer, which we can call on this number. Alright. Now what about the login functionality? Well, we are going to cover the login functionality in the next section. 50. What are the issues with access token: In this module, we're going to explore the token meditator. Well, let me open the web API project. And there if we open the app sitting 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 equal to one day. Not just for the sake of example, let's say that our token will expire after a 100 seconds. Now, let's go to the mobile application and just an 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 the stopwatch. Now, just wait for a 100 seconds. Our token will expire after 100 seconds because we have set the token expiration time in the Web API project. Now I think it's more than 100 seconds. And if we switch to the movie database, 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. 51. Solve Access Token Issue: In the last lesson, I told you that whenever x is token expired, then we had no longer to use 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 distinguish. So let's use references dot set method. Then lastname over C02, token expedition dime, and then just store dot explanation dime. All right. Now in the postmen, if we send a login regress, then Luke at the expedition dime in this format. Now we're going to get the current time of the device and see what I suited to storage. And then we will compare. If the expedition dime is less than cut in time, then we will issue a new access token. So what I'm gonna do is I will go to the Manage stupid 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 are set method and then save the current time in the isolated storage. I will name this current time. And then misuse this Unix time. Head is all the namespace for this. And with this Unix time class, let's call it the get, getting time Method. This method is used to get that getting Unix time. So far we have saved up getting 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 meditator. Alright, then in this class, let's add the static method and name it, check token metadata d. Now in this method, we will check if the Govan 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 ISO that is 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, getting done. Now, here we will check if the explanation time is less than killing time, then it means our token has been expired. So we get to send a new request to the login method with the email and password. But now the question is how to get that email and password? For this purpose, let's go to the login base code behind file. I'm there. Then the user will add the email and password. Then we need to store the email and password in the isoelectric 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 END evil dot text 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 SMEs class. And in this method, let's try to get the email via preference dark 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 pulse-width. Now in this method, if the expiration time is less than the current time, then 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 prospered here. Now, let's make this code available. Unless you use the async keyword with this method. Now, in the next lesson, we'll continue our work and we will learn how to validate each API endpoint. Alright, I will see you in the next lesson. 52. Api Endpoint with Token Validator: In this lesson, we're going to validate all these matters that requests the access token. So let's start with this get all movies method. In this get all movies method before invoking the HTTP client, just check the token expedition. So what we're gonna do is we will use that token milliliter glass and then pick this check token validity and use to await keyword with the skull. Now, every time we call this get always method, then first it will check the expedition time. If the token is expired, then this method will call the login method and we'll get a new access token. Right after that, the following portion will be executed. Alright, now let's copy this line at basic inside every method that takes an access token. All right, so I'm going to paste this line, wonder one. Now, let me understand this application from the device. Then up around this application. Okay, now just switch to the login page and I'm going to add the credentials. And right after that, let's open the stopwatch. And you should request. When we issued a request, then we'll start the stopwatch. Our token will expire after a 100 seconds. Right now. It's more than 100 seconds. Alright? It means that our token has been expired. And if we switch to the movie database, then you'll see that we'll get the data here. And behind the scene, the new token has been issued. That's how you're going to fester token behind the scene. Alright, now, will continue in the next lesson. 53. Logout Functionality: In this module, I'm going to show you how to login the user from the application. So let's go to the homepage. And you will see the stack layout which contains this loggers label. Let's get adapt even for this stack layout, not 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 accessToken and set the value to empty string. Similarly, this USDA K4 token expiration time. Set the value of this token expedition time to 0. Alright? Now once we clear the values for access token and token expiration time, then just set the application dot, dot, dot main pH equals new navigation piece. And pass the sign a piece here. Alright, I'm going to run this application. Now, let's open the hamburger menu and tap this Lockwood option. If we plot this logout option, that it will take us to the signup page. Now next time, if we let this application, it will show the sign a peace because the access token and the token expiration time has been cleared. All right, so that way we can implement the login functionality inside our mobile application. Alright, that's all from this module. Now I will see you in the next section. 54. Api Documentation For Admin: In this lesson, we're going to explore the API end points for the admin panel. I have a test that API documentation file along with this course. So you just need to download this file for API documentation. Now once you download this API documentation file, then just open the postman tools. Okay, now go to this import option. And right after that, we need to select the API documentation file that we have downloaded. Alright, here we go. Just import this file. Now instead of postmen. And under this collection, we have a section that contains our API endpoint. Earlier we have worked with the client section. Now we need to work with the admin section. If we expand this admin section, then we'll get the subsections like accounts, movies, and reservations, which are very similar with the clamps section. But in this admin section, we have few more advice which we'll talk in the next lesson. 55. Test Accounts Section For Admin: Earlier when he worked with the client section. Then we have also explored the register and login end points. Again, this time we're going to explore these endpoints. So in the add-ins section, let's expand this. And now we're going to open the register endpoint. As always. First, we need to set the root URL of our Web API here. You need to pass your own. You are here. Okay, now, I'm going to add some data for user like name, email, and password. Now let's issue requests. So far, this admin is actually a user. So to make this user, as an admin of this application, we need to go to the Azure SQL database. And in the users table, we'll see new user here. So lets make this user as an admin and then save it. Now, let's open that login endpoint. Then, our API URL here. Right after this step, we need to add the email and password for the admin. And here we go. If we issue the request, then this time we'll get the access token for the admin. Now with this access token, we can access all the end points of the admin section. Stay with me because I will be right back in the next lesson. 56. Test Movies Section For Admin: In the last lesson, we caught the access token after Admin. Now let's expand the movies section. And there we have different endpoints for getting all the movies to add the movie and to delete the movie. What I'm gonna do is I'll first open this, get all movies endpoint. And I want to tell you that this endpoint is common in both the client and the admin section. So no matter what kind of access tokens you have, this endpoint will work with both the client and the admin. So we're gonna copy the admin access token. And then we'll issue the request and we will get all the movies. Let's go to the other endpoint which is used to insert our add them. We will add our EPA URL here. Then we'll copy the access token off the admin and visit here. Now in the body of the request, we need to provide the following data. So let's add some data here. And we can also pick the image. Now if we issue the request, then all requests becomes successful and movie decade has been added. I want to tell you one important thing and that is if you copy the access token after user, not an admin and try to execute this post request with the client access token, then it will not add the data because this endpoint is specifically designed for the admin of the application. Now, let's go to the Azure Database. And inside the movies table, you can see I would new record here against this ID. Now let's say we want to delete this record. So Papua Postman and open this delete endpoint. First bool at EPA URL. Then we'll copy the admin access token. And basically here, right after that, we need to provide the movie ID here, which we want to delete. So I will pass the following ID here. Now, if we issue the request, then this delete the record against this ID. Okay, now back to the Azure movies table. And if we refresh it, did you'll see that I will record has been deleted. Okay. Now, in the next lesson, we'll continue with the reservation section. 57. Test Reservation Section For Admin: In this lesson, we get to work with another recent section. So if we open the reservation section that you'll see we have two end points. The one is used to get all the iterations. And the second issue is to get the resolution detail according to the reservation ID. So will exist these end points with the help of admin access token. First, we'll open the endpoint for getting all the iterations. Now we will provide the web app you are here. Then we'll copy the admin access token and visit here. If it issued the request that we'll get the list of reservations. Now let's say we want to get the detail of deceleration. So we'll open the other endpoint and the web app URL here. And don't forget to add the access token. Now, you need to provide the division id here along with the URL. If we send the request, then this time we will get the details of the derivation Augustus ID. Okay, so we have explored all the end points of the admin section. Now from the next lesson, we'll start working with the admin battle inside the x_min forms project. So I will catch you in the next section. 58. Create Model Classes For Admin: In order to start Goodman with the admin panel, we first need to get a project. But instead of creating a new Zealand false project will duplicate our client project. So in this course, we have cash at the cinema application for the client. Now this time, we'll duplicate our budget. And then let's open it. Okay, now inside our project, most of the times, we'll use our lead, those things which we will not use it inside of a Admin application. So let's open the pages folder. And except the sign-up, login and homebase delete everything, will lead me to give them modal glasses. So back to the Postman. And then we have two endpoints for user section Register had a login endpoint and this login endpoint within some descended. Now if we go back to them in Studio, that you can see that we have to register login token class already present inside of our project. And we don't need to add it again. And I'll switch back to the movies section. And there we have get all movies endpoint, which will return the list of movies if assisted them in studio. Then you will see the Movie class here, which will take it up the dissent data that comes from the get all movies endpoint. But not this time we're going to discuss in this class from movie to movie list. Okay, now back to the policemen. And if we open this post request for editing the movie, then you will notice that we have the following key which we want to send do it API with some values. So this time, let's visit them in studio and just get a new C subclass and rename it moving. Not in this movie glass. Let's add the properties according to the following keys. Okay, now we don't need this movie due to the class. So let's deleted this delete Louis endpoint is not making any JSON data and also it's not returning any JSON. So we don't need to get a mortal glass for this endpoint. Alright, then this could attended the recent section. And let's open this hesitation endpoint, which will then the list of those innovations. Let's copy that JSON data and convert the distance into into seashell. Now let's copy these properties. Go back to the studio and incentive there isn't glass. Let's move the data and add the new properties. Now, again, we switched into postmen. And then we have this n coin, which will then detail of television. We simply copy the diesel that did the seizure properties. Then we'll copy these properties. And CCW studio, there will get a new season. And now I'm going to name it as admission detail. Now, we'll add this data in this detail glass. Okay, now in the next lesson, we're going to get the API essays method. So I will see you in the next lesson. 59. Create Methods For Api Service Class: In this lesson, we get to work with the APA Sally's class. So let's open the API service class. And you can see that we have few methods. We will reduce the logistical login and get all movies method. Ok. Now the movies section contains three end points. Let's start with the delete movie. Who simply go to the movies DOE method and a synonym to delete movie. Then we'll change the API endpoint here. Now make sure instead off get async method, you need to choose this delete method. Then we don't need to return this movie detailed response because this endpoint will not eaten anything. It just returns the status code for success or failure. So we'll make the return type of this method to das cough bool. And then it will check if the sponsor is success status code is not true, then it then false, otherwise, return true. Okay, now let's go ahead and add movie endpoint. For this purpose. Let's name this ticket method to add movie. Then let me tell you that this Add Movie method will take the movie object as a parameter. So we'll pass movie object here. Right after that. Let's put the postman. And inside the body of the request. You can see that instead of raw JSON data, we are sending the form data. So this time we don't need to see this data and we will remove this line. Instead of this new stream content class. Rules use the multi-part form data content plus, which will take a key and the values. Now inside this multipart form data content class will get a new instance of string content class. And this string content will take the value and the key, this plus the value by simply calling this movie dot. Then pick the name property right after that in the key, we'll pass our good name. Alright? Dislike that you did to pass all the values. And the respective. Also make sure to solve the costume error because the ticket price is of type integer and the rating is of type double. So we need to convert it into toString. Now what about the image? Will not pass the key for the image here. Rather, we will first convert our image into bytes, and then we'll add it here. So let's ignore the stuff. We'll look at the image uploading part little in this course. I will color each and everything. Forget now, you need to add your API and board here. So far, we have added this method, but this method lacks in which uploading functionality will go with the image uploading section as we move forward in this course. Now we'll get the matters for reservations. So that at the recent section contains two endpoints for getting all the intuitions and the elevation detail. Instead of in studio. Let's go to this find movies method. And let's say the name to get all reservations. Now remove this parameter. Set the type of this method do, does list of Valuation. Alright. Then we'll add the API endpoint here. Right after that. This copy, this method. And visit here. This time we name it, get reservation detail and pass the parameter of type integer and image elevation ID now will ascend this feather Division ID along with this endpoint. So that's edited by just concatenating that admission ID with the API endpoint. This endpoint only returns a single record. This will not written the list. Instead of this list, how further division? Full pasta resolution detail. Alright, that's all for this lesson. Now I will see you in the next section. 60. Create Home Page For Admin: In this lesson, we're going to change the homepage. Can actually, the homepage that we're using is for client, but live on to falling kinda homepage. So we'll switch to the homepage. And let's remove all the code. Now let's copy the code that I have provided you and visit inside the speech. Okay, just like that, we need to go to the code behind file at their fuel tanks. Let's copy all the EPC somewhere else. Basically, reduce this chord. Then we will work with the Lewis, this bitch. Ok, now except the base constructor, we really move everything from this pitch, not inside his MBA file. Let's get a depth image of these movies and the television. So we'll add the depth given the movies. Then we'll get adaptive and after the division. Okay, then inside the movie step event, we will write the code to navigate from the homepage to the movies list bitch. And in that intuition, tap event will write the code to move from the homepage. Lists pitch. So let's get a new content beach. And Emmett Louis Lisbeth. Similarly, we will add another fish. And this time we name it as division list speech. Now let's go to the whole base code behind file. And these are the moist tab. Let's use navigation. Dot push model isn't. And pass movies list-based here. Similarly, in that admission depth, give it. Let's use the same line, but this time we will pass as a mission list-based here. Now let's run this application. Hey, on a sign-up page. I'm going to sign up. And here we go. The sign-up is successful. Now let's go to the Azure SQL Database. And let's make this user as an admin. Okay, now on the login page, I'm going to lock in with the admin detail. And here we go to the homepage. Now from this homepage, we can move to the mostly space and then at the division list page. Now in the next lesson, I will show you how to implement that elevation. I will see you in the next lesson. 61. Create Reservation List Page: In this lesson, we're going to start with the divisions list page. Let's go to the division list fish. And it moves everything. Now copy the code that I have provided you and visit inside the space. Now without visiting anytime, I want to show you what we're going to achieve. Suppose if we navigate to the Federation list, then we will see all of the emissions inside the collection view. Let's go to the accordion file of this other visions list page. And we'll look at a method inside the constructor and intimate get reservations list. But let's add the method body outside the constructor. Then we'll call API service class. And then we'll pick this, get all the derivations method, which will return the list of the divisions. Then we use the await and isn't givers. Now let's do the result in a variable and emit televisions. We'll get an observable collection of reservation outside this method. And intimate and the divisions collection. Then let's instantiate this observable collection inside the constructor. Right after that, we will use the for-each loop for i attrition of the televisions. Then we'll switch to the XML file. And you can see the name of our collection view is cv elevations. So we simply use CV, the divisions dot item source and assign that a televisions collection to a collection view in the XML file. Let's get adapt. Given this back, I can then use this fun navigating back to the previous page. Let's use navigation dot BOP model isn't care. Okay, now we need to bind the Lewis in glass properties with our collection view controls. So let's find the following properties with our collection view controls of starting with the ID property. Will first copy this ID property and find the text of the label with this ID property. Now we'll copy this mission time property and bind the span text with that evaluation time. Again will bind the span text with television time. Now the question is why we are binding the recent text with two different span candles. The reservation time, well-attended admission date, and time as a response to separate the date and time and show it in the following order. Google bind that iteration time We do spend controls. I. Now let's copy the customer name property and bind this property with the label text. Then we'll copy the movie name property. And this time we'll bind the text of the label with moving a property. All right, now let's run this application. And we're going to navigate to the different emissions lists beach there. You'll see that we'll get the list of elevations. Ok, now lets continue our work in the next lesson. 62. Create Reservation Detail Page: In the last lesson, we have worked with the elevation list-based. Now let me tell you what we can to achieve. Suppose if we will tap some innovation from this list, then we will be directed towards the mission detailed beach. And they will get all the details of the selected reservation. So to achieve this thing will first go to the attenuation lists pitch. And let's get a selection change event of this collection view. Now inside this event will write the code to move from this list-based to the head of the division detail page. But first, we'll get a new coordinate base and emitter and the division detail page. Now in the collection view selection event, we're going to write the code. As you remember that we have used the folly good for collection view navigation. So I'm going to copy this code and visit here. Not this time. We'll use the admission loss here. Okay, now we need to send an ID to that admission detail page. So we need to change the pH here. Then we'll switch to the Detail page. And they're under ADA parameter inside the constructor of type integer and m it has innovation ID. Now let's get a method here and rename it, get reservation detail. I pass this, that the missing ID inside this method. Right after that, we'll get a method body outside deafness sector. Now we'll call the API service class. And then pick the literacy and digital method, which will take the id as a parameter. Okay, now we use the await, an async givers and store the result in a variable. And we name it response. Now that this distance, we could pick the properties of that admission detailed class. But before doing anything, let's go to that innovation digital piece XML file, and let's move everything. Then you need to copy the code that I have provided you. Visit inside this little mission detailed. All alright. As you can see that we have given some names to our controls and will display the data inside these controls. So in the code behind file will pick LBL has emission ID dot text, and then assign that admission ID along with the response. Also, we'll convert it into string. Then we will use the LBL for the mission dime dot text and assign them to the recent time with the response. Now let me tell you that this line will it then the date and the folding format. And if you want listed as missing time in this forward, then use the toString method and pass this format. Similarly, we'll assign the values to elder customer name, alveoli. Moving in, I'll build email. Alveoli, phone, bill price, quantity, L, VL playing did, and LBL, blink time. Now we'll convert this is postdoc quantity into toString. And we'll concatenate this dollar symbol along with this price. Because this response dot price simply didn't the price value. But we want to show the currency symbol along with this value. So that's why we have used a dollar symbol here. Then Individuation digital piece. Let's get adapt even of this image back icon. Then inside this event, bullets use navigation. Dot BOP model is in which we'll navigate back to the speech. Okay, now I start from this application. Well, simply switch to the Michigan speech. At if we have some particular reservation, then we'll get all the details of the selected resolution. So far so good. So that's all from this module. Now I will see you in the next lesson. 63. Create Movies List Page: In this lesson, we're going to start with the movies list page. Let me go to the movies list page. And we're going to remove everything and then copy the code that I have provided you. And visit inside the speech. Okay, now let me tell you what we're going to build. Then. We'll never get from the home base to the movies, this fish. Then we'll show the list of movies on this page. This functionality of this moves, this speech is very similar to the functionality of the homepage that we have created in the client application. This is only a slight difference of the user interface, isn't off all these things would just need to bind the image and the movie name. So to start with this moves the speech. Let's go to the homepage of client application, and let's copy the code and visit inside this mostly space. First, we'll copy the fields. Then we'll copy this method. Inside. This moves this pitch. Alright, now in the homepage of client application, we have set the pea size equals five. Now in this admin application will set the size to six because this time we have two rows of movies data. Okay, now let's go to the movies, this bit file. And let's get it even of items, tissue. Then inside the syringe will use the same line of code that we have used in the whole base of client application. Again, we'll switch to the XML file and get adapt even farther back eigen. Then we'll add the navigation dot. Bop model is in here. Now we'll bind the collection view controls with our movie list class. We want to split the movie name and movie image inside the speech. So first, we will copy this name property. And by the text of this level with the name property of the movie this class. Now let's copy this full image URL property. And right after that wouldn't bind the source of this image control that the full image URL property, which is coming from the movie list class. Okay, now let's run this application. And if assisted them, movies, this fish, then we'll get the list of movies here. And if we scroll down, we'll get further movies. Okay, now, in the next lesson, I will show you how to implement the delete movie jacket. So I will see you in the next lesson. 64. Delete Movie Functionality: In this lesson, we're going to implement that delete movie functionality inside the admin panel. Let me show you what kind of functionality we're going to build. Let's say we want to delete this movie. And then we tap this movie, then we'll get a popup, which is when you want to delete this movie. If we press no, then no action will be taken. And if we press yes, then the movie will be deleted. To start, I want to tell you that first we need to handle the selection change event off this collection view. So inside the XML file of movies, less space. We'll get a selection taste event. Then inside this event will write the code. Instead of writing everything from scratch, will go to the homepage of grant application. And this, you can see that we have used the following code inside a selection sheets of collection view. This code will be used to move the user from one page to another. But now we don't want our navigation. We just want to delete the movie. So first, we'll copy this code and paste it here. Now, make sure to use the Movie class here instead of movie. Now here we will use a display alert with the following message. Do you want to delete this movie? Then pass the yes and the no button. Novels to others in a variable and image result. If we will breast the Yes button, then we'll get the true. And if we press the No button, then we'll get the false. Right after that, we will remove this line because we don't need navigation. Why this collection view rather will adjust, remove the record from this collection view. So we'll check if the result is true. Then call the API service class dot delete movie method. We'll take the movie ID as a parameter. Make sure to use the awaited async keywords. Now will store the result in a variable and intimate response. Right after that will check if the response is false. Then are then nothing else will lead the movie observable collection. So let's use this movie's collection and call a built-in method for creating that collection. Now, once we clear the collection, then we will send a call to the web API third on the list of movies. So first we'll set our base number to 0, and then we'll call this method to get the movies. Okay, now I'm going to run this application. Let me quickly go to the movies live speech. And if we tap some movie, then we have been asked, do you want to delete this movie? If we will press yes, then this will delete the movie and we will get the movies results again. And as you can see that our movie is no longer available. Alright, now in the next lesson, we'll work with the add movie method. So I will see you in the next lesson. 65. Add Movie Page: In this lesson, we're going to work with the add movie functionality. So before moving forward, I want to show you what we're going to achieve and how we achieve. If we looked at on this ad icon from the Muslim speech, then will be redirected to the Add Movie page. And then we can add the details, pick the movie image, and add the data via the web API. Now there are two tricky things that we need to kept in mind. Number one, how to pick the movie image. And number two, how to send that image to the web API. First of all, we'll go with the number one dusk. So inside of movies Lisbeth, let's go to the edit icon and create adept event. Not inside this step, will use the code to move from this movie's list-based the add movie pitch. So we'll use navigation, dot push model, async. Then we'll get a new content page. And intimate add movie Beach. Alright. Once we add the speech, then will pass the Add Movie page inside this navigation dot push model async. Okay, now let's move everything from this, add movie Beach, and then copy the code that I have provided you. And inside the speech. Before moving forward, let's run this application. And if we looked at this at ICANN, then you will see this add movie bitch. I want to tell you how we'll pick the image then this image icon. For this purpose, we'll stop this application and let's go to the Manage negatives. And let's install this package, which is z dot plug-in dot media. Now once will install this package. Then we'll shift to that documentation of this package. And as you can see all the guidelines of beauty in this package. Did you can see that in order to capture the image from the device camera, we need to use this code. This code is used to capture the image from the device camera. However, instead of opening the Device camera, we want to pick the image from the device gallery. So we need to change this code a little bit. Then in the Android project, we need to use the following lines of code for permission to open a gallery. So let's go to the Android project and let's open the main activity dot cs file. There. If you don't see this permission code, then you just copy this code from the documentation of this plugin. And right after that, a space, this code here. Now it's time to configure the iOS project. Well, in iOS, we need to add the following permissions inside the info.plist file. We need to set these two permissions. That one is for accessing the photos and the other is used to access the photo gallery. We're not going to open the camera and not going to record a video. So we don't need to send the other permissions. Let's go to the studio and let's extend the iOS project. There you'll see the info.plist file to open this file inside your Windows machine. That's roughly, and then choose Open width. Right after that, select the genetic editor. And here we go. Now inside this Info.plist file, we need to set the permissions. Let's click this icon and this will generate a new custom fields. Then go to the documentation page and just copy this key. And visit here. Right after that. We're going to copy this string and visit here. Then let's get another field and copy this key. And similarly, this copy this string and visit here. So far, we have configured our Android and iOS projects. Now, I will see you in the next lesson. 66. Pick Image From Device Gallery: In this module, we're going to pick the image from the device gallery. So what I'm gonna do is I'll switch to the Add Movie page XML file. And let's get a depth image of the image control. Then inside the step given, begin to write the code to pick the image from the device gallery. So let's go to the documentation of this camera plugin. And there you'll see this quote. All you need to do is just copy this code and basically it inside this depth event. Now we need to resolve few things here. First of all, let's try to resolve the namespace for this plug-in. And then let's add isn't keyword along with this event. Now, when we tap this upload image option, then the following code will be executed. And it will open the device camera. But we are not interested to open the device camera. In fact, we need to open the device gallery so that we could pick the images. The strive to change this code. First, we'll just check if the device is able to pick the images. If not, then just your display alert with some message, like your device. Does it stored this feature? Otherwise, if the device is able to pick the images, then instead of this dQ photo async method, disuse, big photo async method here. Right after that, we will check if the file is no better than nothing. Otherwise. Just show the image inside the image control. We don't need this pop-up here. Let's remove this. Then. Discord is used to assign the source of the image to the image control. Now, you'll see an arrow here. So let's try to dissolve this error. First, needed to go to Add Movie page XML file. And did you can see that the name of this image control is ING movie. So let's copy this DEM and then edit inside that code behind file. All right, now anybody on this application, and let's go to the Add Movie page there. If we press this upload image option than we have been asked, except the permission. Alright, just accept information. This will open the device gallery. Now, I'm going to pick the image from the gallery. And here we go. You can see that the following image has been shown inside the image control. Now, in the next module, I'm going to show you how to upload this image to the server. So I will get you in the next lesson. 67. Upload Image To Server: In this lesson, we're going to upload the image to the server via that API. So let's go to the code behind file. And there you can see that we have used the folly goes to pick the image. Let me tell you then, will provide these details, bit the image and send the request. Then our new movie occurred will be added on the server. But now the question is, how to upload the image to the server and how to send that image where our API request. Well, let's go to the API service class. There. You can see that we have used this court for adding movie, but we have not passed the image here. To pass the image, we need to pass sittings. First, we'll convert our image into a byte array format. Then will pass the name of the key, which is image. And right after that, we also need to pass up part of the image. Let's go to the movie class. There will add a property of type byte array. An image image array will use this property when we'll convert our image into bytes. Then go to the coordinate file. There. I want to tell you that we can pick the path of the image with this file. Basically, we want to send that image path to the Add Movie method from this code behind file. So inside the Add Movie method, let's pass a parameter of media file dissolved in this and emit media file. Then we'll use the content dot and get a new is this off steam content class, which will take an image and the image pot. So to pass the image array will first get an instance of memory steam. And then we'll pick the image which comes from this movie model glass. Then in a key, will pass the image. Because this image is a PDM, as you can see it in the postman. The image is our key name. Now in the image part, let's use this media file and pick this path property. Ok, this method will add the data and upload the image to the server. Now from our code behind file, we need to call this method. First, we'll go to the Add Movie bits several file, and let's get adapt even for this image control. Now, inside this event, we'll call EPI service class. Then we'll pick this Add Movie method, which will take the media file and the movie object. Now the question is, how we can pass this file inside this method. For this purpose, lets remove this var keyword, then add a private field of type media file, an image file. Now we can pass this file inside this method easily. Okay, but what about the movie object? Let's create an object of movie class and assign the properties of movie class according to our control limbs. So let's assign the control limbs to the respective movie glass properties. Now what about the image array? Do work with the images. We need to convert our file into image array. And for this purpose, we need a folding new plug-in. So we will add a new codec is inside your project. Then let's add from file, dissolve the namespace of this plugin that we have added earlier for converting file into image array. And right after that bit, this method, which is do image array. Inside this method will pass the file stream. To pass the file stream moves uses file. I'm called a GetState method. Basically this method will convert that image stream into bite at a. Ok, now let's do it in a variable and image image array. All right, then let's assign this image had a variable to image a property. Now we'll pass this movie object inside this method and make the skull available. Also, don't forget to add the ACT with. This method will return either true or false, will store the result in a variable and intimate response. Then add a display alert with some message like something went wrong. Otherwise, if the response is to then show our display either with the success message and take the user back to the PSPs by using Navigation. Dotplot model isn't. Okay. Now go to the XML file of add movie Beach. And let's get adapt event of this image, that icon. Then inside this event, will it use this code to navigate back to the abuse Beach, which is navigation dot BOP model isn't. All right. Now let's run this application. Let's go to the Muslim speech and press this ad icon. And this will take us to the Add Movie beach. There. I'm going to provide the details one-to-one. Then we'll put the image and send a request. And here we go. How we record has been edit. If you go to the Azure movie table, then you'll see this record that we have added seven Forms application. Alright, so that's all for this lesson. Now, I will see you in the next section. 68. 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.