Create Weather Forecast App with . NET MAUI

1. Introduction: Hi, my name is S1 and I'll be leading you through this course. I'm a software engineer and Microsoft most valuable professional. I designed this course so that you can make beautiful cross-platform mobile applications from start to finish. By the end of this course, you'll be able to develop the mobile applications in Dalton movie with RESTful APIs. So whether you are new to dotted movie or if you're thinking to make a cross-platform mobile applications, then discourse is a perfect Jump Start for you. Alright? So what are you waiting for? Take this course? And let's start learning. 2. Weather App Overview: In this section, we're going to get the weather forecast application with dotnet movie. Let me show you the application which we're going to build this application very first time. Then we will see this onboarding screen or getting started screen. Okay, Let's go ahead and on the background of our device will pick our location, and then we'll get the weather data according to our location. Now let's say we want to check the weather data for some other city. Then all you need to do is just search for some other city. And here we go. This time, we'll get different weather data. Alright, in this application will consume the rest APIs for Open Weather Map. Now, let's fire up the villus studio. And then we're going to add a new movie project. Let's choose this dotted application and click Next. I'm going to name this project to weather app. Okay, Now get this project. And here in the latest version of RStudio will see the actual pitch. We don't need this. So we'll remove the app shell. Similarly, we'll also remove the main page sample and main page double dot CSS file. Now in the abs ML dot CSS file, we'll see this error because we don't have any main page, our app shell pitch. What we're going to do is we'll right-click and choose New Item. Then, in this version of Video Studio, microsoft S added a separate template for dotted monthly basis. So from now would use the Mojave. And then we'll choose this dotted Molly content page with XAML preview. Alright, let's name this space to whether page and edit inside our project. Okay, here we go. Now in the apps ML dot CSS file, let's set the main page equals whether page. Now let's continue our work in the next lesson. 3. How To Get Weather Api: In this lesson, I'm going to show you how we can get the weather API. Well, there are many weather API providers, but we mostly use this Open Weather Map for weather applications. Okay, So in this course we'll use the Open Weather Map API. Let's go to this website. And there we'll click this API. And we will see different API options. We could use any of these API to get the weather data, e.g. this option is used to get dark current weather data. This option is used to get the weather data of four days. Similarly, we have different options. We can also use this daily forecast, 16, this option of whether data. But right now, this is not free and it's included in all the paid subscription plans to some other plan which is free of cost. This five-day t, our forecast is free. So we'll choose this option. This option will provide the vet the data of five days. And because this is a free plan, so we'll not get the weather data after every hour. We'll get the weather data after 3 h. Okay, Now, let's click on this APA documentation. And he'll see the URL which is used to get the weather data. In this URL, we need to pass filter things like latitude, longitude, and app ID or APA key. Let's copy this URL and paste it inside and other debt. Now let's go to Google. And there you'll find the latitude and longitude of your location. Alright, let's copy the latitude and longitude and paste it inside your API URL. Then we'll get the weather application in dotted mv0, then will allow our application to pick the device location. With testing the API in the web browser says pass the coordinates manually. Okay, now let's find the App ID, our API key. To get the API key, I need to sign up on the Open Weather Map. So I'll create my account. Now once I'll set up my account, then here in the drop-down, I'll see the API key. Just select this. And here we can use the default API key or generate a new one. Okay, now let's copy this ABA key and paste it inside the URL. Okay, Let's hit Enter and you'll get the gist and response. Let's copy this destined data. And now search for this website, Jason beauty, fire. Enter. Let's paste the JSON data and beautified. Okay, here on the right-hand side we'll see the decent data in the coding format. We can also choose other options to view the data. Let's set up the view option. And here in the object will see different things. If we expand the city option, then you will see different attributes like name of the city, coordinates, sunrise, sunset, etc. We'll choose the city to get the current weather data. Now here we'll see that list which tells us that this list contains the following number of records. Let's expand the list. And here we'll see different fields. Let's expand this one. And here in the main will see data for temperature, pressure, humidity, etc. In the vector field will see the weather data like description. And I can have the better. Similarly in the wind, we have speed, etc. We'll use this JSon data inside of a dotted movie application. Okay, so in the next lesson, we'll delete the C-sharp classes from this JSON data. I'll see you in the next lesson. 4. Generate C sharp Classes From JSON: Only if we have tested the API for weather. Now, in this lesson, we're going to get the C-sharp classes from this distance response. Here in the web browser, you'll see that JSon data. We just need to copy this Jason and then search for this website. Descend to C-sharp. Alright, here, let's paste that just some data and convert it into C-sharp classes and properties. Here we'll see the C-sharp classes and properties. You can also donate the properties in Pascal case. But algaes and lowercase properties, the choice is totally up to you. I can now let's go to our daughter Maggie project, and let's add a new folder and name it models. Now in this folder, Let's add a seizure class and name it root. Okay, let's add this class. Now you are thinking why we have named this class to route. Because according to our decent to see surpluses. This root class is the parent class. You can also see that on top of this, it's mentioned that if we want to deserialize that JSON data, then we need to use the adjacent convert dot dc lies object of root class. Let's copy this data. Right after that. In the video studio will remove this route lastname. And then this the data which we have copied. Here, we have created our model glasses from the JSON data. Now, in the next lesson, we'll create the API service class. I'll see you in the next lesson. 5. Create Api Service Class: In this lesson, we're going to create the API service class. So what we're gonna do is we'll add a new folder inside of our project. And then Dean in this folder to services. Then inside this folder will add a new C-Sharp class name ID API service. Now let's turn to class access modifier to public. Alright? In this API service class will get a method and name it, get weather. Now, inside this method will create a new HTTP client. Now, when we'll call the rest APIs, then HTTP client, which will take a request to the server. Then with this HTTP client, we need to call the method in rest APIs. When we add the record that we use post request. When we update the record, then we use PUT request. And in case of deleting the record will use the delete method. Now, in case of get our FASTA data, we need a getMethod with this HTTP client will call the get string async method. And this method will send the request and we will get the response in the JSON format. Here, VD to add our API URL. So what we're gonna do is we'll copy our APIs URL and paste it here. Here we'll pass our coordinates like latitude and longitude. So in this method, we'll add two parameters of type double and name it latitude and longitude. Okay, Then in this URL will concatenate the latitude and longitude. So we'll wrap this URL string dot format function. And then in place of latitude and longitude, will add a placeholder like 0.1 in the curly brackets. After this URL will add a comma separator and pass this latitude and longitude, which will get from this function. You remember that this is an async method. So we need to use await keyword here. And now we'll get an error because it can't be used without async. So we need to make this method asynchronous by using the async keyword. Alright, let's store the result in a variable. And then this variable to response. Basically this is false variable contains the JSON data, which will get from this API URL. Now, once we get the data, then we need to analyze this data into C-sharp classes so that we can show it inside our mobile application. So when we will get the data in the JSON format, then we'll convert that JSON data into CCF classes by using just increment door deserialized object. This Jason convert dot d serialized object. We need a NuGet package that is just in.net or Newton soft dot json. In the package manager who searches package and install it. Once we install this package, then we'll close this window. And right after that, we'll use this in kind of a dot d serialized object. Then there's all the namespace for Newton soft door, GSM. Now, in the digitalized object, we need to pass the class name and the decent data. Look at the decent data from the response variable. So pass the response here. And we need to map this decision according to the route glass, because glass is the parent class. So we'll map the DSM according to our root glass. Now, let's do this by using the return statement. And our method will return the response according to the root class. But we'll get an error. And that's because we are using the white. And here we're returning that data according to the root class. So if we set the type of this method, the root, then we'll still get an error. And that's because if we will make the method Async, then we need to use the task t. But if we don't return anything, then we'll use the task keyword. But if we were to return something, then when the tissues the task of type. And this type could be anything. It could be a string, integer, float, list, or even object. Because we're returning the data according to the root class. So we'll make the type of this method to task off route. Alright, we'll continue our work in the next lesson. 6. Get Weather By City: In the last lesson, we have added a method in the API service class. And this method will be used to get the weather data according to the coordinates like latitude and longitude. But as per our application, we also want to get the weather data according to the city name. So what we're gonna do is we'll go to the Open Weather Map API for five days. And there on the right-hand side, we see this option. Get whether by city name. Let's select this. And this is a URL which will be used to get the weather data according to the city name. Okay, we'll use this URL. Let me tell you one thing. These two URLs, the one with the coordinates and the other with the city name. They tends the same distance response. So we don't need to create another C-sharp model. Classes will choose the classes which we have created earlier. The only thing which will create another method in the APA service class. So let's go to the API service class, and then we'll copy this method and paste it here. Now, let's see it in this method to get whether by city, alright, then we'll remove this URL. Right after that. Let's copy this URL for getting whether by city name and paste it here. Here we pass the same API key which we have used in the first method. And in the city name will pass the city, which will get from this method. In this method we pass a parameter of type string and then we City. Alright? And then we'll concatenate the city here. Here we have created the APA service class. Now, when will consume this API service class methods in some other classes, like whether pH. Then we have to get the new instance of API service class. And with debt, we can call the APA service class methods. But we will add this class and this method static that we don't need to instantiate the class whenever we want to consume these API service class methods, then we can just use the name of the class. And along with that, we can call these methods. Alright, so it's better if we will set this class and these methods to static. Alright, that's all for this lesson. Now, I'll see you in the next one. 7. Design Weather Page: In this lesson, we're going to design the weather page. So let's go to the edit page XML file, and then we can rewrite our XAML code. But before this, let's take a look at this image, which we're going to design. Well, on this rather page, we'll choose the grid layout. And here it will break down this design in different parts. This is the first row and the height is Otto. Then we have this second, third, fourth, and fifth row. And the height of all these rows is Otto. I want to tell you that I have created few acids. Alt unit two is just download these acids along with this video. And right after that, Judy to paste these acids in the Images folder that's present under the Resources folder here, which have added all these assets. Now let's run this application because we'll create a design with the help of hot reload option. Here, our application is running with some text message. Let's remove this. And now we'll add a grid layout. And then add the row definition equals. And then we'll add five rows with the height of auto. Right after that. Let's set the row spacing of twenties units. Then we'll create a design for this first row. This first row contains two children. So let's use the stack layout here and put the stack layout in grid dot rho equals zero. Then we'll set the margin of 20 units from left, top and right side. And we don't need a margin from the bottom. So we'll set zero. We want these controls in the horizontal direction. So set the orientation of this tag cloud equals horizontal. Alright? Then in this stack layout, we'll need two things. The first is your location, and the second is search icon. In order to make this, your location control will choose the level control and set the text equals your location, and phone size equals default. Alright? But we need that kind of control. So we'll wrap this label inside the frame. And by default the padding of the frame is 20 units. So let's set it to ten units. Then we'll set the corner radius equals 35 units, has shadow property equals true and border color equals likely. Now let's add another control for this search icon. For this purpose, we'll add an image button. Then set the source of this image equals. Let me show you the image which we're going to use in the Images folder. We have this image for search icon would use this image here. Then we'll set the height and width request to 30 units and set the whole central option to expand. Alright? Now we're going to cover the second row design. Well, in this role will need two things, city name and the description. First, I'll add a stack layout and put it in the grid dot Rho equals one. And we'll set the orientation of this text layer equals vertical. By default, a staggered orientation is vertical. Okay, now let's add a level control and name it LBL city. Then set the font size equals 40 units. Okay, right after that, who set the horizontal option equals center and text equals gray. Also set the text of this label anterior. Let's add any city them. When you will consume the API, then we'll remove this hard-coded city name value. But right now we're designing this weather page. So we'll add the hard-coded value here. Dislike this level of control, we need an other level control. Here we'll set the name equals LPL. Read the description. Font size equals medium, horizontal, option equals Center at text color equals slate gray. Then we'll add some hard-coded text here, which will remove later. Alright. Now we'll move towards the third row. And this row will just add an image control, because there is only one control in this row. Soul not use any layout. This image going tool will be the direct child of our grid layout. So we'll add an image control and put it inside a grid dot rho equals two. Then we'll set the name of this image to IMT weather icon. Options to start. And height and width request equals 200 units. Then we'll set the source of this image. And here we'll pass any random image from the images folder. Move this later. Okay, Now let's move towards another row. And this row will add another good layout. So we'll add a grid and put it inside a grid dot Rho equals three. Then in dispute will add two rows with the height of auto and three columns with a weight of 0.3 t static for all of these. Then add the margin equals 20 units. Now we'll add an image control and put it inside a zero row, zero column. That said the holes are two options equals Center and height request of 25 units. Right after that, we'll set the source of this image equals. And here it will pass this image name for humidity, which comes from our images folder. Alright, now I'll add a label control, intimate LBL humidity. Then we'll put this inside the grid dot Rho equals one and click dot column equals zero. Right after that, set the whole subtle option equals Center. For now we'll set the text property and add any random number here. Then we'll add another level of control and Navy LBL temperature. And we'll put this label in. Good dot rho equals zero and grid column equals one. Then we'll use Grid dot, rowspan equals to horizontal options to center. Font size of 40 units at font attributes to bold. Let's pass any random number in the text property. Okay, Now let's copy these two controls for humidity, image and level. And then we'll paste it here. Okay, First we'll put this image in red dot rho equals zero. Good dark color equals two. And for this level will choose Grid dot Rho equals one and Greet dot colon equals two. Then we'll change the name of this label to LBL Vint. And for this image source will set the image that comes from our images folder. Alright, now in the next lesson, we'll cover our collection view, which we'll put inside this last row. I'll see you in the next lesson. 8. Collection View For Weather Data: In this lesson, we're going to add the collection view in the weather page. Earlier we have created this design. Now we'll add a collection view and put it inside that grid dot Rho equals four. Set the name of this collection view to CV, whether we'll also set the height request equals 100 units. We have already covered the collection view earlier in the fruits application and in the news application. This time, we'll save a time and use the copy paste technique. So what I'm gonna do is add this code for collection view. Here we have a collection view with a grid. And inside this grid, we have taken tools. One is for whether image, second is for temperature, and the third is for datetime. Alright? And we want that kind of designed with just one row and in the horizontal direction. So that's why we have used the linear items layout. Now, in the next lesson, we'll consume that API and display the weather data inside this weather page. Okay, I'll see you in the next lesson. 9. Display Current City and Weather Description: In this lesson, we are going to consume the weather API will display the current weather data and the weather page. So let's go to the code behind file or rather page. And they will start over. We want to get that data, then we'll land on this page. That's why we'll use our own appealing method. Okay, let's override the own opinion method. And inside this, we will call our API to get the weather data. Will choose APA service class and dissolve the namespace. Then we'll call the get method, which will take the latitude and longitude. Right now Let's pass some static values here. And later, when we will work with the device location, then we'll pass the coordinates according to our device location. Now, this is an async method, so let's use to await here. And obviously we need to add a sing along with the own appealing method. Okay, now let's store the result in a variable. And we didn't meet result. With this result, we can pick the properties of our model classes. Inside of our application. First, we'll find the city and the weather description. To display. The city will go to the Jason beauty fire. And inside the city will see a city name. Okay, to get the city name, will use the result which actually contains the response from the API. And it's of type root class. Then, according to our decent data, will choose the city, and then we pick the name of the city. Alright. Now in the Veda page XAML file, we have added this label for city. Will just remove the hard-coded text value. And then we will assign the value to this LBL city in the code behind file. Let's assign this value to LBL City dot text property. Similarly, we're going to find a better description. So back to the JSON purifier. There. Let's open this ListNode because we want to get the current weather data. Soldiers this zero node. The rest of the nodes contains data for another five days with t hours interval. After expanding, the zero node will expand the weather. And here we'll see the description. To access this description. First, we have to use this result with contains a decent response. Then we'll pick the list node and pass zero here because we want to fetch the data and the zero node. Alright? Then we'll choose the vendor node and also pass zero here. As mentioned in the Jason beauty fire. Now we can pick the description property. Okay, you see how easy it is to fester complex kind of data. Now we'll assign this data to our LPL, whether description dot text property. Then we'll go to the webpage XAML file. And then we don't need this hard-coded value for whether description. So we'll just remove this. Okay, now let's run this application. And here we go. You can see that we'll get a city name and whether description here. Now, in the next lesson, we've worked with the images and we'll also see how to get the temperature. Alright, I'll see you in the next lesson. 10. Display Current Weather Data: In this lesson, we're going to display the weather data. We have worked with the city and whether description. And now in this lesson, we'll display the weather data like temperature, humidity, and wind speed. First we'll go to the DSM purifier. And they will expand this list node zero. And we'll see this main and under this we'll see our temperature. Okay, so in the code behind file, we'll use this as L dot list of zero index dot Min, dot temperature. And along with that, we'll concatenate the degree Celsius symbol. You could find the degrees Celsius symbol from Google. Alright, here we go. Now we'll assign this temperature to the LDL temperature dot text property. And in the XAML file or folder page, will remove the hard-coded temperature data. Okay, now let's run this application. And here we go. You can see that we'll get that temperature, but it's not in the Celsius into Fahrenheit. So there are many ways to convert Fahrenheit to Celsius. The first is we can make a logic in C-sharp to convert our Fahrenheit temperature to Celsius temperature. But according to the Open Weather Map, API is just a piece of cake for us. According to their documentation, we just pass the uterus equal metric in the API URL. And that's all we'll get the temperature data in the Celsius. So what we're gonna do is we'll go to the API service class and they'll pass the units equals metric in these two APA glasses. Let's run this application once again. Now this time you'll see the weather, temperature in Celsius. This is another problem, and that is, we don't need this value of the point. We need to round off this value. Lets go to the model classes and they're inside of main class, will see this damp property which represents the temperature. Okay, we'll add another property of type double and name it temperature. And then we will assign our temperature to the temperature property. Right after that. We'll wrap this temp and the mat dot wrong function. Well, matt is a class in C Sharp and disrupt function will be used to round off the number. Now in the code behind, instead of using the temp, will use the temperature property. Okay, let's run this application. And here on the device will see the temperature in a nice way. Alright, now let's work with our humidity and Vint. So back to the Jason beauty fire. And in the main node, we have this temperature property which we have used earlier. And now. In the same main node will see this humidity property. So we'll use the same logic to access the humidity, which we have used to access that temperature. In the code behind file, we'll choose a self dot. Then choose the list of zero index dot, Min, dot humidity property and concatenate the percentage symbol at the end. Now we'll assign this humidity to LBL humidity dot text property. And in the XAML file of whether page will remove the humidity hard-coded value. Okay, Now let's start with the wind speed in the Jason beauty fire will open this when node. And there we'll see the speed property. To access this, we'll use that as del dot list of zero index dot wind speed. And along with that, we'll concatenate kilometers per hour. Then we'll assign this value to the LBL wind speed dot text. And don't forget to remove the wind speed hard-coded value in the database dot XAML file. Alright, here we go. Now let's run this application once again. Here on the device, will see the weather data like temperature, humidity, and wind speed. Now, in the next lesson, we'll work with Darth Vader images. So I'll see you in the next lesson. 11. Display Weather Images: In this lesson, we're going to work with the weather images. Instead of veteran application will see a hard-coded image. Now will show the image according to the weather API. So we'll go to the adjacent purifier under the list, will explain this better. Here we have an icon with some code. Now to access the weather images, we need to follow the open weather map image guidelines. Let's go to this URL. To access the images, we need to use this URL. Along with that, we need to add the image code. I'll copy this URL and paste it inside another tab and hit Enter. Alright, here we go. Now here we'll add some other image code and hit enter and we'll see another image. Alright, so we need to follow this image guidelines to access the images. Let's go to our project. And they will go to the model classes. Inside the vector class. Let's add the property of type string and name it full Icon URL. Then we'll copy the image URL and assign it to this property. Okay, Now, in the image URL will concatenate the icon, which we'll get into decent response. So we'll wrap this URL string dot format function. And in place of I can code, we'll add a placeholder. Then after this URL will add a comma separator and then adds icon here. Alright. Now in the video page code behind file, let's use the result dot. Then we want to access the icon property. So in order to access this icon, we first need a list of zero index. Then we need a value of zero index. Right after that, we can use the icon property. And because we have added a full Icon URL property, so we'll use this full icon, you'll property here. Then we'll assign this icon to this IMG weather dot source property. And in the federal bit XAML file will remove the hard-coded source drop D of this image. Okay, now let's try to run this application. And this time we'll get a dynamic weather icon. Let's see if we do need these dark icons. And we want to customize icons. We have already added the icons in the Images folder with that default naming conventions. Or I can name starts with Icon underscore. Then we have the icon code. Now in this red class, let's add another property and name it custom icon. Then we'll choose the lambda operator, and right after that, we'll choose the string dot format function. And inside this will add double-quotes and add the name of the icon. Inside of the images folder, we have many weather icons and all of this starts with the icon underscore, and then every icon has unique code. And after this we have dot PNG extension. So add icon underscore. And in place of I can code, we'll add a placeholder. And right after that, let's add the dot PNG extension. Okay, now we'll add a comma separator and add this icon here. With this line, we can use our custom icons. Now in the database code behind file, who just use the custom icon. And then we'll run this application. Here. You will see that this time we'll get our custom icon. So that's all for this lesson. Now, I'll see you in the next one. 12. Weather Collection View: In this lesson, we're going to add the hourly weather data collection view. Earlier we have worked with the current weather data. Now let's start our work with the Collection View. In the code behind file. Let's go to the own appealing method. And there we have already consumed a weather API. And this result contains the data that comes from the API. Now let's add a foreach loop because we want to get the list of weather data. So we'll add a for-each loop. And here inside this, we want a list of whether we want to hydrate the root class. We have this list property, and this property will contain our hourly weather data. So in the for each loop will access the list property with this result. Now let's recall that ListView and collectionView concepts which we have discussed in the list view and Collection View section. First we'll add a list, then we'll add the data in the list. And finally, we'll assign the list to the item source of the collection view. So let's add a list in the other page code behind file. Now the question is, what's the type of this list? This list will be of type list class which is present inside of our models folder. Okay, now let's rename this list to list. The index structure. Let's initialize this list. Now in the for-each loop, let's add the data inside this weather list by using the helper method add. And outside this foreach loop will use the CV weather dot item source equals whether list, the CV weather is our collection view name. And we have created this collection view in the weather bit XAML file. Alright, now in the next lesson, we'll bind the data collection WE controls. Okay, I'll see you in the next lesson. 13. DataBinding in Weather Collection View: In this lesson, we're going to use that data binding inside of our collection view so that we can display the weather data inside the collection view. In the other page, we'll see three controls inside the collection view, the image, and two labels in the distant beautified. We can see that in order to get the image, will choose rather of zero index. And then we'll pick the icon property. But in every model class, we have used a custom icon. We're going to bind this custom icon, whatever image control. So what we're gonna do is we'll go to the webpage. There. Let's find the source of the image with the weather of zero index dot custom icon. Alright, now let's bind this level texts property with the temperature property. According to the DSM beautified, the temperature property is present inside a main class. So let's use the main dot temperature. In the main class, we have added a custom property for temperature so that we can get the temperature in a round of 4-bit sold by this level text without main dot temperature property. Alright, similarly will bind this second level with the date property. Now in the decent beauty fire will see a date in the Unix time format. And we need to convert this into human readable date format. So in the models folder, let's go to this list class. And there we have this property name d t. Well, we need another property of string type, which will be used to convert our Unix time to UTC time. So before adding the property, Let's go to the NuGet package. There. This package for converting Unix time to UTC time. Alright, we're going to install this NuGet package. Now once will install this NuGet package. Then we'll add a property of type string and name it datetime. Then we'll use the lambda operator. And right after that, we'll use a UTC timestamp. And for this UTC timestamp, we need to import this namespace. Okay, Now with this UTC timestamp will pick this method convert to UTC. And this method will take the date in Unix format. So we'll pass this D, D here. Alright. Now this line will convert a very unix time to UTC time. Okay, Now, if you don't want to use this NuGet package for converting the Unix time, then she could simply use this code to convert thirst you next time to UDC time. I'll attach this code snippet along with this video. Okay, now let's go to the webpage. And there, Let's find the text property of this label with the datetime, because the DT or datetime is a direct child of the list. So we don't need anything before the date, time, just like we did earlier with the image and temperature. Because the image and temperature are not present inside the list class, but the DateTime is present inside the list class. So we'll directly positive. Alright, now it's time to run this application. Once we run this application, then we'll see this weather page. And at the bottom of this page, we'll see a collection view with a weather data. That's all from this lesson. Now, I'll see you in the next one. 14. Get Device Location: In this lesson, we're going to work with the location service. Currently we have hard-coded the latitude and longitude in the weather API. But now we want to get the latitude and longitude according to our device. So we'll go to the webpage code behind file. And then we're going to write our code to get the device location. But before this, I want to tell you that at the time of recording this video, Microsoft Team has not updated the documentation of Xamarin Essentials plug-in. The new name is Molly essentials. Everything will be same in Xamarin Essentials and Molly essentials plugin. So we'll go to Google and search for Xamarin Essentials geo-location. Alright, let's open this link. Every have different platforms like Android, iOS, and Windows. I'll show you how to add the permission in Android. So I'll copy these permissions. And according to the documentation, we need to add these permissions in the Android manifest file. So we'll go to the platforms, expand the Android, and open the Android manifest file. There would paste those permissions. Now let's save the file and close it. Similarly in the iOS, we need to add these permissions in the info.plist file. I have told you earlier in the news application that how we can add permissions in the iOS project. I left this task for you to add these permissions and the iris project. Okay, Now in the accordion file, read the page. Let's add an AC method of type dusk and name it, get location. Okay, Now in this method, we'll use the code to get the location. So according to the documentation, we need to use this await geo-location class and this get location async method to get the location data. Soul juice, weight, geo-location glass, and then call the getLocation is stigmatic. Now let's store the result in a variable and we'll name it location. With dislocation, we can pick many things, but we just need the latitude and longitude sold. Use location dot latitude, and add two fields outside this method of type double and name it. The attitude. And the other field name will be longitude. Now we'll assign dislocation dot latitude to the latitude, location dot longitude to the longitude. Now when the user will run the application, then in the owner being method will call the getLocation method. Okay, so let's call this getLocation method here with the await keyword. Then in the hard-coded latitude and longitude values will pass the latitude and longitude, which will get from the device location. Alright? Now before in the application, I want to tell you that if you are using the real device, then you don't need to add anything. Our application, we'll pick your current location. But if you're using the emulator, the emulator will pick the default location. So we can set delegation in the emulator according to our choice. In the emulator will go to these three dots. 2's location here in the search bar. Choose the location according to your choice. Alright? Then set the location. Okay, now let's run this application. And here we go. This time, we'll get the location alphabet device or emulator. Okay, So far so good. We have covered the location part. Now, I'll see you in the next lesson. 15. YourLocation Tapped Event: Earlier we have worked with a device location to get the weather data. Now let's see if we will change the device location. And if the app is open or in the background and press this your location, then we need to get the feather data according to our latest location in the database SAML file. Let's go to this frame that contains this label for your location. We're going to add a gesture recognizer. And right after that, we'll create a tap gesture intimate data location. And then we'll get a tap event. We can't get the click event other than button and image button. That's why we have created the depth event. Now let's go to the webpage called BAM file. Inside this step event, we need to write the code to get the weather data by location. We have to use the same code which we have written in their own appearing method. So in order to remove the duplication, will reuse the same code. First, we'll add an async method of type task and name it, get weather data by location. And this method will take two parameters of type double, latitude and longitude. Okay, Now let's cut this API code from the own append method and paste this code inside this method. Now in the tapped event, we'll call the getLocation method because when that user will first-time run the application, then we'll call the getLocation in the owner beam method. But if the application is opened and now the location is changed, then we will again call the getLocation method in this depth event. After that, we'll call this get weather data by location and pasta. Latitude and longitude. Don't forget to add the await async. Hope you've got this concept, this nothing new here. We have just reuse the code with the help of methods. Now let's run this application and we'll get the location according to our device. Now let's change the device location. And if we press this year Location option, then this time we'll get the weather data according to our new location. Similarly, let's try it one more time. Alright, here we go. So that's all from this lesson. Now, I'll see you in the next one. 16. Get Weather Data By City: Earlier we have worked with the weather data by location. Now, in this lesson, we're going to work with the weather data by city name, attitudes. They will tap this search icon and he will see the pop-up where he can type the city name. And then the weather data has been changed according to the city name. So first of all, we'll go to the vet bit XAML file. There. Let's get a click event of this image button. Now in the accordion file will go to this click event. And they would use the display prompt async. And this display prompt, a scene, is basically a pop-up which will be used to accept the input from the user. Let's add the await async keywords. This display prompt async will take many parameters, but all of them are optional except the title and the message. We don't need a title and message. So we'll add the title column and this pass empty string. Similarly in the message will pass empty string as well. Now, in the placeholder, Let's add search, whether by city. Alright. This display prompt async will contain two buttons except and cancel. If you want to change the text of these buttons, then you can change it accordingly. Let's say we want to change the text of this Accept button. So we'll pass search here. We don't need to change the tensile button text. So we'll just pass cancel here. Alright, now let's store the result in a variable and we name it response. Then we will check if the response is not null. Then add a breakpoint along with this if condition and simply run this application. Okay, Now press this search icon and we'll see this pop-up. Let's add something in the pop-up. Then repressed this search option. They never break point will be triggered and will see the text here which we have typed in the pop-up. Okay, let's stop this application and remove the break point. Now, inside this if block, we'll add the code to get the weather data. Earlier, we have used this code to get the weather data by location. Now we want to get the weather data by city name. So what I'm gonna do is I'll copy this vector data method for location and paste it here. Now we'll change the name to get weather data by city. And inside this method will just pass one parameter of type string and we name it city. Then instead of this, get weather will call the get weather city method along with the API service class and pass the city. Not inside this if block. We'll just call the vet the data by city method. And don't forget to add the await. Now, this code will work. But take a look at this dataset repetition in our code, e.g. the code which is present in the gut weather data by location is similar to this one which we have used in the get weather data by city. So what we're gonna do is we'll add another method and name it, update UI. In this method, we'll add a parameter of type dynamic and name it result. We have set the type dynamic because we don't know the type of the response which will get from the API. If you hover the mouse cursor on this variable result, then it shows the type which is root class. But we'll go ahead with the dynamic type. Basically, dynamic types are used when we don't know the type. Okay? You can also use that route here in the updates you a method. Then we'll simply cut this code from the get-go, whether data by location method and paste it in the update UI method. And we'll remove the score from the get-go whether data by city. Alright. Then we'll call the update UI method, get weather data by location and pass this result. Similarly, we'll also call this updates you a method. Get weather data by city, and pass this result. Alright, now let's turn this application. Here on the device, will see the weather data. Now, if you tap the search icon and search for some city, then we'll get the weather according to our search. Alright, That's awesome. Now let's say we want to go back to my current weather. So I'll just tap this, your location. And boom, here we go. We'll get the current weather data. Okay, That's all from this lesson. Now I'll see you in the next one. 17. Design Welcome Page: In this lesson, we're going to work with the welcome page of feather application. And the user will open the application first time. And he will see this welcome page or getting started page. Alright, after pressing this button they use, it will be either directly to the page. And there you can see the feather details. Now let's say the user will close the application. And again, if he will open the application, then this time the user will not see the welcome page. Okay, So we'll get that kind of functionality with the vertical pH will only be shown once. So let's get a new content page in Dalton movie project. And we name it welcome page. Alright, in this space, we're going to add few controls. First of all, let's set the content page color. Then we'll add a stack layout. And in this stack layout will add one image, three levels, and one button control. The code is very simple. There. I'm going to use the code which I have already written just to see if the time. Don't worry, I hear provided this sample code along with this video. Okay, now look at a click event of this button control. And here we go. In this click event, we want to navigate to the federal pitch. So we'll choose navigation dot, push, modal, async. There. Who passed the other page. Then in the app dot symbol dot CSS file, we'll set the main page equals welcome page. Now let's run this application and we'll see this welcome page. After pressing this button will be redirected to the beach. Now it will stop the application and again run this. Then we will see this welcome page. So in the next lesson, I'll show you how to display the welcome page only once. Alright, I'll see you in the next lesson. 18. Version Tracking: In this lesson, we'll continue our work with the welcome page. Then the user will open the application first time. Then we'll show the welcome page. There's user. And later when he will open the application second time, then he will not see the welcome page. So in order to achieve this functionality will go to the app dot dot CSS file. And they will use version tracking class dot track method. Basically this version tracking is used to track the version of application at earlier. This is a part of seven essentials. And there is also a documentation of this version tracking. According to this document dish in this version, tracking dot track is used to track the current version of the application. Then we'll use an if condition and check. If the version tracking dot is first ever launched property is true. Then we'll set the mid page equals welcome page. Else. If it's not true, then we'll set main page equals weather page. Basically this version tracking dot is first ever launch is used to check whether the application is launched first time or not. The application is launched first time. Then we'll set the main base to welcome page. And if the application is launched second time or so on, then we'll set the main page to whether beach. Okay, let's run this application. And here we'll see the welcome page. Alright, let's go forward and we'll see the beach. Now let's stop the execution. And we're going to run this application once again. Now this time we will see the vendor base as our main bits. Alright, I hope you have got this concept of version tracking. That's all from this lesson. Now, I'll see you in the next one.