20. Weather App in .NET MAUI | .NET MAUI APP | Tutorial | Beginner

in this section you're going to practice about the conception of R Services by creating the application you are seeing on the screen it is an application that will allow you to get the current weather as well as the weather for the next few days the application has a search engine in which you will be able to enter the name of a city the name of a country and even an address so that it will return the result of the weather in the location let's try it with some places for example let's search for the term New York we press Center and watch how this Returns the current status of New York City it shows us what the date is it shows us an animated icon that gives us a quick glimpse of what the weather is is in that City it also gives us what the current temperature is what the wind condition is and what the current weather condition is we see a section at the bottom with a collection of view that shows us what the weather is for the following days we see the date the estimated temperature as well as the description that shows us what the weather condition is for a specific day let's try another place for example Spain this will give us a gain the current weather condition indicating that in Spain there is currently a clear sky let's look for another place for example Paraguay we see that Paraguay currently has an overcast weather condition let's try for example another city like El Cairo we see the current weather conditions and it's a nice application that serves to practice the topic of rest services and that will teach you how to integrate these nice animations as part of your application it is a very Dynamic and very nice application that we are going to learn how to make in this module we will start with the application called magui weather and to carry out the creation of the project we will select the net magui app template and we will change the name to mag weather we will click on next and finally on the create button to create the project once the project has been created let's create the mvvm folder and inside let's create the three folders of the mvvm pattern which are models The View models folder and finally the views folder in the views folder I'm going to create a new content page that is going to be the main page of the application then let's select a Content page with a zaml format and we're going to call it for for example weather view once we have created the graphical interface file we're going to create the corresponding view model for this view we have created calling it weather view model with this new view model we're going to go to the code behind of the weather view. page and assign the Ving context to be equal to a new view model instance the next step is to assign this new page as the start page then we go to the app. S.C file and we're going to indicate that weather view is the initial page with this we can start the execution of the application to verify that everything works correctly we can see that we already have the new page that we have created as the initial page in the application we're going to carry out some changes so the application is taking shape the first thing we're going to do is to change the background color of the application to carry out this action we're going to go to the colors file that is to say in the folder called resources expand the Styles folder and open the colors. Sul file let's define a new color with an X key equal to dark blue and a value 06072 3 this is going to be the background color of the application to assign it it to the application let's open the styles. Sul file and let's look for the term page here it is where it is assigning the background color we're going to change the value for a static resource called dark blue with this change we already see the new background color being applied once we've changed the background color I'm going to close all the tabs so they don't cause confusion I'm going to open the graphical interface file again that is the weather view. Sul file and instead of this vertical stack layout that is created by default I'm going to create a grid with a margin equal to 15 units and a set of rows the first row witht 08 asterisk as value the next row witht one asterisk the next value with dot five asterisk the next row with DOT one asterisk and the last row with DOT three asterisk that is to say we are creating five rows for the application that are going to be the places where we will contain the different graphic controls inside this grid I'm going to create a new grid that will have a couple of controls positioned in the first row of the main grid the first control that we will create in the grid is a frame control whose purpose will be only to be a background of the section next I will create a search bar with a placeholder equal to search and its vertical options equal to center with this change that we have made we're going to see the changes in the application we can already see this grid that contains both the frame and the search bar control which will allow the user to enter a new search to find the weather of a specific City once we have three created the search section of the application the next step is to define a title which allows us to know from which city we're getting the state of the weather and also the date to know which is the date on which we are getting this information to carry out this section I'm going to stop the execution of the application and I'm going to create a new resource dictionary that is to say in the Styles folder I'm going to create a new item selecting the net mag resource dictionary template and I'm going to change the name to app stylist. Sul once we have created this file I'm going to remove the code behind file I'm going to remove the xcl class as well and we can go to the stylist. Sul file to copy this tag that's going to allow us to enable the compilation of the resource dictionary now that we've done that I'm going to save the changes I'm going to go back to the weather view. SML file and after the first grid located in row number one I'm going to create a new vertical stack layout which I'm going to place in row number one that is to say I'm going to assign its grid. row equal to one inside the vertical stack layout I'm going to define a pair of labels controls the first one with the text equal to pares and the second one with the text equal to July 8 2050 if we save the changes and start the application we see that the pair of labels do not look good at all let's create a style to improve the vertical stack layout and then styles to modify the appearance of the label controls let's return then to the dictionary of resources that we have created and we're going to create a new style with an X key equal to Main stack layout indicating that its Target is going to be equal to Vertical stack layout and let's modify some properties the first property that we're going to modify is the margin property with a value 0 comma 10 comma 0 comma 0 I'm going to duplicate the setter and I'm going to indicate that the second property that I want to modify is the spacing between the elements of the stack layout with the the value 15 and the last property is going to be vertical options with the Value Center once I Define this style I'm going to integrate it as part of the resource merch we're going to do this in the app dosl file I'm going to duplicate this resource dictionary and I'm going to add the new dictionary with created as part of the application the next step is to modify the visual appearance of the label controls I'm going to add a font that will be used in the application I'm going to drag the font over the folder called fonts I'm actually going to use two fonts the font is called Rubik but we're going to use the light version and the regular version let's register these fonts in Mai program I'm going to copy and paste this line indicating that the name of the first font is rubic light and the second is Rubik regular to the regular font I will assign an alias equal to Rubik and to the light font and Alias equal to rubic light once I have registered these fonts I'm going to return to the file of the Styles and I'm going to define a new style to affect all the label controls that is I'm going to write style target type equal to label without and X key inside this style I'm going to modify some properties that I want that all the labels of the application have the first property is going to be the font color for this control with the static resource white value I'm going to modify some additional properties for example the font family property with the value and let's use the font that we have added previously that is Rubik we are also going to modify the horizontal options property with the center Val and the last property is going to be vertical options also with the center value with this we're going to make sure that all the labels are centered in the layout in which they are located here I'm going to correct the value for Center and once we save the changes we're going to see how this is seen in the application with the styles that I have added we can see a different format for the labels the last thing I'm going to do is assign this x key to the vertical stack layout through style static resource and I'm going to use the main stack layout style so we see a different format in the vertical stack layout the next step is to change specific properties of the label controls to do this I'm going to go back to the stylist file and create a new style with an X key equal to title add Target type equal to label and I'm going to modify some properties the first property is going to be font attributes with a vault value the second Setter will set the font size to a value of large once we've done that I'm going to go back to the graphical interface file and I'm going to assign this new style to the control that displays the weather search City I then assign the style a static resour equal to title I save the changes and now we see a different format for the first label control so we have finished the section containing the name of the place we are looking for and the search date the next step is to create the Cur and weather animation section to accomplish this task we're going to use ly files loty files are a type of Animation file that can be used in websites and application the advantage of using ly files is that they are much smaller than other types of Animation files such as GI files which makes them load faster if we want to find files of this type we can go to the lotif files page where we will be able to discover free animations to download and use them in our applications we see that the animations looks pretty good in the particular case of this application I found this profile of Joe Chang who has published a set of Animation focused on weather conditions to download an animation simply click on the animation and download the file with the Json extension that is click on the option load Json to download a Json file and integrate it into our applications in my case I have downloaded several animations to use them in the application and I have renamed the files so that they do not cause conflict with the file systems therefore the next step is to stop the application execution and add the files inside the raw folder located in the resources folder the next step is to install a nuget package that will allow us to run the loty animations in the application to do this I'm going to manage the applications package I'm going to look for the term skia sharp extended Maui we have to make sure that we have selected the option to look for pre-release versions or if you don't have the checkbox selected and the package appears it means that this package has been officially released let's install the package in the project once the package has been installed let's go back to the graphical interface file and add a new names space space let's call it for example skia which is equal to CLR hyen Nam space colon look for skia Sharp and the name space we're interested in is the one that ends with the word controls next I'm going to create a control in row number three which uses 50% of the available space I'm going to write the prefix skia colon and we see available different controls that you can explore on your own if you want to learn more about them in our case we're going to use SK ly view which is going to allow us to run a ly animation let's position the control in row number two we also see some properties of the control such as repeat count which is used to set the number of times the animation will run as we need an infinite execution I will use the value minus one I will also sign to a property called Source the name of one of the loty files that I added previously let's use storm. Json as the file Associated to the control before starting the execution of the application to see the animation in action we must add a Handler for this to work correctly that this we have to go to the mai program.cs file and as part of the Builder I'm going to add the line use skia sharp we have to add the name space that is needed with this we can start the execution of the application once the application is running we can see this nice animation we have seen that adding an animation to the application does not have to be complicated simply download a Lo file and integrate it as to the application installing the package in nuget that I have shown you with this we already have more interactivity in the application once we have added the loot animation to the application the next step is to create the current weather data section to do this I'm going to open the Weather view. file after the SK lot view control I'm going to create a grid in row number three I'm going to define a set of columns via asterisk comma asterisk comma asterisk that is I'm defining three columns of the same size inside the grid I'm going to create a vertical stack layout with its horizontal options equal to Center and a spacing of 10 units between its elements in the grid I'm going to create a label with a text equal to Temp I'm going to duplicate the label and assign a text equal to 25° C if we start running the application we can see the new section we have added which will show us the temperature at the desired location I'm going to adjust the controls by adding a couple of styles inside the app Styles file the first style will have an X key equal to weather title with a Target type equal to label the property we will modify is the font family property with a value equal to rubic light we're going to create a second style called weather value with a Target type equal to label in this style we're going to modify the font attributes with a value equal to BT with this pair of styles that we have created let's go back to the graphical interface file and I'm going to assign them to the label controls to the first label we're going to sign a style equal to static resource weather title and to the second one style equal to static resource weather value let's run the application we can already see the new Styles added as we have created this First Column with the desired format we can use it for the other columns let's duplicate the vertical stack layout changing the value of grid. colum to the value one additionally I will change the title to win and the value to 10 km per hour if we save the changes we can now see the second section where we will see the information about the wind conditions let's do this one last time that this we duplicate once again the vertical stack layout place it in column number two change the title to weather and the value to Sony with this we complete the second that will show us the current weather information the last part that remains to be added to finalize the graphical interface is the forecast section for the following days to do this I'm going to add after the grid a new collection view that I'm going to position in the row number four as part of the collection view I'm going to Define an item source with fictitious information in order to design the collection view once I have done that I'm going to Define an items layout having a linear items layout with an item space equal to 10 units and a horizontal orientation the next step is to define a data template through collection view. item template I'm going to define a data template which will have a frame as a container inside I will place a vertical stack layout containing a SK ly view control since I want to reuse the loty files but without playing the animation how can we do this well the control has a property called is animation enabled which we can set to false so that animation does not play I will also modify the hide request with the value of 50 the with request with the value 50 as well and the source property to use the mist. Json file I'm going to create also a label with a text equal to the date 08 hyen 02 hyen 2050 I'm going to copy and paste the new label twice changing the second text for 50° Centigrade the last label for the value Sunny if we visualize the changes we can see this cards that don't look good at all we have to modify the frame styles to improve them I'm going back to the colors file to add a new color with an X key equal to card blue and a value one1 one12 B I'm going to go to the app Styles file and create a new style with anex key equal to card and a Target type equal to frame I'm going to create a Setter that affects the pading property with a value equal to zero the second property that I want to modify is the background color with a value equal to static resource card blue another property that I want to modify is the Border color to have a transparent color also a corner radius equal to 25 a height request equal to 150 a width request W equal to 150 also and also the last property I want to affect is the property called opacity with a value period one once I defined this style I'm going to go back to the weather view file and I'm going to apply that style to this Frame of the cards that is I assigned to the style property a static resource equal to card let's run the application to see the changes we can see that the section looks much better I'm going to apply a couple of changes to the controls to make it look even better the first change I'm going to apply is to add to this label control with the date text a text color equal to and I'm going to use static resource created by default which is the jellow 100 accent color I'm also going to apply a separation between the elements applying to the vertical stack layout a space equal to 5 and its vertical options equal to center with this change the cards look much better with this we have finished the graphical interface part so we will start adding the functionality to the application to obtain the coordinates from an address as well as the current weather status and the weather forecast for the following days once we have defined the graphical interface sections The Next Step is to get the coordinates of a place we enter in the search bar how can we do this well let's go to the view model called weather view model I'm going to turn this class into a public class and I'm going to paste in a piece of code that I obtained from the Don Mai documentation this piece of code is a method called get coordinates a sync which receives a string that must be a location in the world the method gets through a class called he coding a location from an address we enter the advantage of this is that we do not have to install any additional package except for the windows platform we will be able to obtain the latitude and longitude of a place among other data such as altitude we are only interested in latitude and longitude we see that it is a quite simple code and that you can use in case you want to create application with this functionality to test the code I'm going to go back to the graphical interface file that is the weather view file I'm going to look for the search bar and I'm going to assign a command to the Search Command property through a binding search command to get the value that the user has entered we could create a binding to the text property however by doing this we would lose the placeholder that we added earlier therefore I'm going to remove this text property and instead I'm going to use a Search Command parameter to which I will assign a binding we must assign a name to the search bar for example search bar and to the finding of Search Command parameter we are going to assign a source with the reference to the search bar after this brace that closes I'm going to assign a pth equal to text which is the property from which we are interested in obtaining the information once we have done this I'm going to copy the name of the command I'm going to go back to the view model and I'm going to Define it as part of the view model that is to say I'm going to create a property of type I command I'm going to import the namespace that is needed this is going to define a new command with a Lambda expression that receives a parameter called search text as part of the command I'm going to Define a variable called location that is equal to a wait get coordinates a sync passing it the parameter search text as a string once we have done this I will place a break point at the end of the command to see the resulting information I'm going to try with the city of San Francisco we arrive at the break point and you can see that as part of the data of the verbal location we have the latitude and the longitude which are the data that we are interested in to be able to obtain the information of the weather with this we have finished this functionality the next step is to get the weather off a place to do this we're going to use the service called open Meto which is a free API to obtain weather information to know how to use this API let's click on the documentation button which takes us to this page where we can configure the values to get from the service we can enter the latitude and longitude or select a city to test in our case we're going to do this from the application we can also select hourly weather data for a day in case you need it in our case we are not going to display hourly weather information but only the information for a specific hour what we will have to fill in is the information of the daily weather variables in order to obtain the weather forecast information for the following days we are interested in three variables which are the weather code the maximum temperature and the minimum temperature also as part of the configuration we must select the settings option to get the current weather information with temperature wind speed and weather Cod here you could change the units of measurement in case you need it in my case I'm going to leave everything by default what we must select is a time zone I'm going to select the value America Chicago because notice that it tells us here that we have to select a time zone if we want to get the current weather data I'm going to click on the button that says preview shard to update the information and the URL that we will use in the application something I like is that we can open a new window to see the information resulting from the selected data we can see curing weather data such as temperature wind speed wind direction among other data this is useful because we can copy the Json string return to visual studio stop the execution of the application in case it is running let's create a new class in the models folder called weather data and I will replace the contents of this class by a special paste of a Json like classes this generates a set of classes let's rename this class to weather data which contains information such as latitude and longitude curing weather conditions daily units of measure and weather forecast information for the next few days once we have the new models I'm going to close this file I go back to the view model and I'm going to Define in the view model a new property of type weather data we have to import the namespace that is needed and we're going to call the weather data property this property is going to store the weather information that we get from the rest service I'm also going to create a private field of type HTTP client to be able to consume the rest service which I'm going to call client I'm going to create a constructure for the view model and inside I'm going to initialize the client through client equal to new HTTP client once we have created the client I'm going to create a new method that returns a task and that disc called get weather we're going to indicate that we need as parameter a location type called location which is the information obtained previously with the coordinates of a place as part of the method I'm going to Define a variable called URL I'm going to return to the API of the service to copy the generated URL and I'm going to assign it to the URL variable for it I create a pair of quotation marks and inside I paste the string that we copied I configured the string as interpolated in order to be able to change the fixed parameters I'm going to change this fixed value to location. latitude and I'm also going to change the value of the longitude to location. longitude let's leave the other parameters as they are since they specify what information we will get from the API once we have the URL let's use the knowledge we gained in the previous section we're going to create a response by invoking the clients get a sync method passing the URL we make sure we get a successful response from the server and we're going to get the models from reading the stream at this from the information we Reed from the rest service finally we're going to deserialize the stream to a weather data type which contains all the information we're going to need in the application the result we assigned it to the data property which was the property we created earlier once we have obtain the information we're going to invoke the method from Search Command then after the location variable we're going to write a weit get weather passing the location variable that contains the coordinates of a place I'm going to place a breako before the end of this using and I'm going to test the application I'm going to enter a location such as alyo press the enter key we get to the break point and we can examine the information in the weather data property we see data such as the curent weather information which if we examine in detail we can see information such as temperature curent weather weather code wind direction and wind speed we can also see the weather forecast information notice that the values of this property are a set of arrays containing information for the following days such as temperature weather and weather code this is the information we have selected on the website you can select other data to make a more complex query and add them as part of your application we already have the weather information so we can start repl placing the static data in the graphical interface with real data how can we do this well the first thing we're going to do is to change the text of the place about which we get weather information to do this I'm going to create a new property of type string called place name with its get and set I'm going to assign to this property a value inside the Search Command before carrying out the search of the weather conditions I will will indicate place name equal to search text do through string likewise as part of the view model properties I'm going to create a new property of type datetime called date with its get and set I'm going to initialize this property with the value daytime do now with the purpose that this property will show the information about the day in which we are performing the weather query one once we have this pair of properties I'm going to go to weather view and I'm going to modify the labels inside the vertical stack layout that should contain this information I'm going to change the value of text by abinding to place name and also I'm going to change the value of date by a binding to date applying a string format equal to I place a pair of single quotes a pair of braces and inside zero column uppercase four m a space two lowercase D's a comma and a space to finish with four Y in a row before testing the application I'm going to install the FY package so that we do not have problems with the updates in the graphical interface once the package is installed I'm going to go back to the view model and add the add I notify property change interface attribute to the view model I'm going to start the application to see that everything works correctly let's look for a place such as Chicago we can see the name of the city we are looking for and the date on which we are performing this search other data that we could easily replace are the temperature data the wind and the current weather conditions for this I return to the s file I'm going to open the grid section located in row number three I'm going to modify the static value of the temperature that is I remove this 25° C and instead I'm going to use a binding to weather data which is the name of the property which contains a property called curent uncore weather Dot and has a property called temperature applied a string format equal to single quotes inside a pair of braces I add the temperature data followed by degrees Celsius I'm going to copy the text assignment so I don't have to type it all over again I'm going to replace the wind data changing the temperature property by wind speed and the format is going to be equal to the value of the wind speed followed by km diagonal h finally I'm going to replace the weather conditions that is the text Sunny by the value of the weather code property in lower case and I remove the format string for this value with these changes let's see how the application looks like I'm going to try entering a city such as New York and see how the information has changed the next step is to create a converter to check change the loty animation as well as the weather summary we will see how to do it in the next lesson the service we use to obtain the weather status returns a code to know the description of the weather condition the service page provides a table called weather interpretation code which gives us the meaning of the return codes ideally instead of showing a code to the user we should show the interpret ation so that the user knows what the weather conditions are to accomplish this task we're going to create a couple of converters one that Returns the interpretation of the weather and one that allows us to change the lot image so that the user can graphically see the weather condition let's go back to visual studio and I'm going to create a new folder called converters I'm going to create a first class inside the folder called code to weather converter I'm going to convert it to a public class and I'm going to implement the I value converter interface I'm going to paste a code snippet which gets the weather code by doing a conversion to the float data type which is the type that is obtained from the rest service subsequently through a switch the code is compared and the interpretation is returned according to the table we saw on the web page this happens with each of the codes we get from the service so we have to use the converter in the application to do this let's go back to the graphical interface code I'm going to add a new prefix through xmlns colum I'm going to call it converters which is equal to CLR hyphen Nam space colon and I'm going to look for the term converter to use the converters namespace next I'm going to create a new resources section in the content page through content page. resources let's access the namespace through converters and I'm going to use code to weather converter we must assign an X key that is equal to code to weather converter once I created this new instance I'm going to use it in the curent weather conditions label for this as part of the finding I'm going to indicate that I want to use a converter that is equal to static resource and I'm going to use the converter code to weather converter I'm going to save the changes to test the functionality let's look for a city for example Paris and we can already see in the section of the curan weather that instead of showing the code that we saw previously it shows the interpretation that in the this case is clear sky let's do another test with the city of Koo we see that the weather condition is partly cloudy so we check that the converter is working correctly the next step is to create a converter to return an instance type that allows us to change the loty animation I will stop the execution of the application and I will create a new converter called code to LY converter I'm going to make the class public and implement the I value converter interface I'm going to paste a code that I have previously created which receives the weather code again but this time we must create a data type SK file loty image source in order to replace the loty animation in the control we must assign to the file property the name of the Json animation we want to use and then we return the instance so that the control displays the animation according to each of the cases you can see that I have reused the lowy animation since I don't have so many animations but you could look for more animations to have a wider variety to choose from once we have created the converter I'm going to go back to the smml file and create an instance of the new converter I'm going to assign it an X key equal to code to Loy converter I'm going to look for the animation control which is this SK ly view Control located in row number two instead of assigning a static Source I'm going to assign a binding to the weather data do centore WEA do weather code property using the converter we created ear earlier that is to say static resource code to LY converter once we have done this let's test how the application behaves I'm going to look for a city for example Paris and notice how this time we already see the weather conditions represented with a ly animation let's look for the place Paraguay we see different conditions represented in a different loty animation let's look for our last City for example Mexico City we can see the same animation and with that we are already checking that the converters are working correctly the next step is to replace the static forecast information of the next day's weather forecast with real information we're going to perform this action by going to the zaml file stopping the execution of the application and what we have to do is to replace the the item Source we currently have with a real data source so let's set the item Source property however I want you to see a problem which property do you think we should bind the item source to if we review the data model we can see that we have a property called daily which contains the weather forecast information for the following days how however this property contains a set of arrays for each property thus complicating the assignment of the values through bindings what I'm going to do to solve this is to create a new class called daily two containing the same properties but without V arise that is storing a single data this is because I want each instance to have its information I will create in the weather data class a new property of the obser collection type I will import the name space that is needed the generic will be equal to daily two the name of the property will be daily two with its get and its set we must initialize the list so that we do not have problems with the references once we have created this property I'm going to return to the view model and in the get weather method after making the assignment to the weather data property with a data value I'm going to create a for Loop that goes through one of the properties of the daily class we have already seen previously that each of these properties will contain the same amount of data records since the index of corresponds to a specific spe ific day that's why I'm performing a traversal on one of the properties which in reality could be any of the properties what we will do in the for Loop is to create a new instance of daily 2 which is a class that we created previously and I'm going to assign to its properties the value according to the index finally I'm going to add the new instance to the Daily tool list with this we get to have a list think each one of the elements the information of one day weather forecast with this change let's go back to the SML file and assign item Source a binding to the weather data. daily2 property which is the collection we created and populated earlier now we can replace the card data first let's change the data of the SK looted view control changing the source by a binding weather code using the converter we created earlier that is to say static resource code to LY converter let's change other controls for example the date then let's change the the text by aiding to the time property let's also change 50° C by a binding to the temperature to M Max property using a string format equal to the value followed by degrees Celsius finally let's change the text Sony by abinding two weather code using the converter code to weather converter let's see the application with these changes let's enter the name of a city for example El Cairo look how the information for this city is already displayed let's try another city for example New York we see the weather conditions for this city so we have finished getting the weather forecast for the following days in this last video we're going to make some final adjustments first when the application starts we see labels appearing in the graphical interface which we can hide when the application starts to do this I'm going to create a new property in the view model of tulan called is visible ible with its get and set I'm going to bind this property from the graphical interface file specifically on the controls that we want to hide first I'm going to hide the vertical stack layout that uses the main stack layout style creating a binding from the is visible property to the new property named is visible we are also going to assign to the is visible property of the grid located in the row number three a binding to the is visible property the default value of aoan property is a false value therefore these controls should appear hidden when starting the application at what point should we show the controls that we have hidden well let's go back to the view model and they should be seen once the processing of obtaining the weather data is finished so after the for Loop let's assign the is visible property a True Value let's test the change see how when starting the application the controls that we saw previously do not appear finally what we're going to do is to add an activity indicator control that indicates to the user that a search of the data of the weather of a city is being made how can we do this well let's go back to the s file if we want to place an element on top of the other elements we must do it after creating the graphical interface controls that is to say if as part of the main grid I place a last element this last element is going to appear above all the other elements that have been previously defined what I could do then is to define a new grid with a row span equal to five that is to say that uses all the space of the main grid we must assign a margin equal to minus5 since the margin of the main grid has a value of 15 I will assign a background color equal to Black and an opacity equal to9 inside the grid I'm going to create an activity indicator control with the property is running equal to true and its vertical options equal to Center in this simple way if I save the changes and we visualize the application look how the activity indicator appears hiding all the information behind to be able to control the visibility of the new grid that we have created I'm going to create in the view model a new property called is loading with its get and it set I'm going to return to the smml file to assigned to the new grid its property is visible with the binding to is loading now at what point should we turn visibility on and off well let's go back to the view model let's look for the get weather method and before initiating the request to the service we must assign to is loading a True Value to show the activity indicator on the other hand we must assign a false value at the end of getting the information so I'm going to assign a false value before the closing break I'm going to test the change made let's look for a city and see how the activity indicator appears that disappears when the information of the weather of the place that we have looked for appears Let's test this functionality one more time let's search for example for Colombia with this we have finished the creation of this application