{"id":5476,"date":"2024-12-31T15:33:06","date_gmt":"2024-12-31T15:33:06","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5476"},"modified":"2024-12-31T15:33:06","modified_gmt":"2024-12-31T15:33:06","slug":"weather-app-in-mit-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/weather-app-in-mit-app-inventor\/","title":{"rendered":"Weather App in MIT App Inventor"},"content":{"rendered":"\n

Hello friends,<\/p>\n\n\n\n

Welcome to Obsidian Soft. Let\u2019s make a weather app in MIT App Inventor today.<\/p>\n\n\n

\n
\"\"\/<\/figure>\n<\/div>\n\n\n

Unlike other tutorials you might find online, we will not use an extension. I try to avoid extensions as much as possible as extensions don\u2019t work on iPhones.
We will use an API i.e. application programming interface and use the API by WeatherAPI.com.
https:\/\/www.weatherapi.com\/<\/a>
You will need to make an account to get an API key. Remember we did the same thing while making our ChatGPT apps i.e. we made an openAI account to get an API key. The process is quite similar so make an account by pressing on Signup button.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

You will need to provide a valid email address along with a password.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

You will also need to verify your provided email address by clicking on the link sent to your email.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

After verifying your email, just log in. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

<\/a><\/p>\n\n\n\n

You will be taken to your account\u2019s dashboard.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

<\/a><\/p>\n\n\n\n

Copy the API key and go to API Explorer as we want to see how the API responds to requests from apps.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Paste your API key in the provided field. As you can see, we can provide a city name along with API key and it will return the response in JSON form (Javascript Object Notation). APIs usually return responses in this notation and the apps have to interpret this JSON. Thankfully the JSON returned by WeatherAPI.com is fairly simple and we can have a look at a sample of it by pressing the Show Response button.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The following is the call sent to the WeatherAPI server when we press the Show Response button.
https:\/\/api.weatherapi.com\/v1\/current.json?key=3575453b7f43409485540610&q=London&aqi=no<\/a><\/p>\n\n\n\n

Scroll down until you see the response body.
<\/p>\n\n\n\n

As you can see it is returning dictionaries. We are interested in the dictionary that we will get if we provide the key=\u201d current\u201d. We will use this dictionary to get the temperature by giving temp_c or temp_f as the key. I will use temp_c i.e. temperature in Celsius in this tutorial.<\/p>\n\n\n\n

To get the weather description along with its icon, we will get the dictionary for the key \u201ccondition\u201d inside our \u201ccurrent\u201d dictionary and use the keys \u201ctext\u201d and \u201cicon\u201d respectively to get the values. Don\u2019t be confused as I will show the exact blocks too. Go to docs and click on error codes on the left-hand side.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

<\/a><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

<\/a><\/p>\n\n\n\n

This shows that our response code is >=400 in case of error.<\/p>\n\n\n\n

Now, let\u2019s go to MIT App Inventor. Create a new project and call it WeatherApp. For screen1, make the background color dull blue, align horizontal and align vertical both center.<\/p>\n\n\n\n

Add a horizontal arrangement<\/strong> from Layout<\/strong>. Make align horizontal and align vertical both center. Make height 20%<\/p>\n\n\n\n

From the user interface<\/strong>, drag and drop a label<\/strong> inside this horizontal arrangement. Rename to cityLbl. Make font bold, font size 20, and text color: white.<\/p>\n\n\n\n

From the user interface<\/strong>, drag and drop a textbox<\/strong> inside this horizontal arrangement after the label. Rename to cityTxt. Make font bold, font size 20, and change the hint to \u201cEnter city name\u201d<\/p>\n\n\n\n

From the user interface<\/strong>, drag and drop a button<\/strong> inside this horizontal arrangement and put it on the right of cityTxt. Rename to submitBtn. Make the background color white, font bold, font size 20, and shape rounded.<\/p>\n\n\n\n

From the user interface<\/strong>, drag and drop an image<\/strong> below this horizontal arrangement. Rename to weatherIcon.<\/p>\n\n\n\n

From the user interface<\/strong>, drag and drop a label<\/strong> below this image. Rename to descLbl. Make font bold, font size 20 and text color: white.<\/p>\n\n\n\n

From the user interface<\/strong>, drag and drop a label<\/strong> below this descLbl. Rename to tempLbl. Make font bold, font size 50 and text color: yellow.<\/p>\n\n\n\n

Last but not least, from the Connectivity<\/strong> palette, drag and drop a web<\/strong> component onto the viewer. This is an invisible component that will be used to communicate with the WeatherAPI servers. Our final screen will look like this along with the components:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Let\u2019s go to the blocks section.<\/p>\n\n\n\n

Make a global variable for our API key and response returned by servers. Don\u2019t use this API key. You need to get your own key and process has been explained above.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Next, we get the onClick event for the submitBtn and set up the URL for sending a request to WeatherAPI.com, and then give a call to get a response from their servers.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The Web1.Get results in a Web1.GotText event once we receive a response from the server<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Next, drag and drop an if\/else block from Control inside this event and check whether reponseCode is >=400 (remember that this means an error)<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

In case of error, we will not decode the response but make our result empty with a data not found message for the user. <\/p>\n\n\n\n

In the else condition, we will first decode the response using a special JSON decode procedure of the Web component and put it inside our global variable response.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, we have dictionaries inside our response variable.<\/p>\n\n\n\n

First, let\u2019s get the temperature and put it inside our tempLbl.<\/p>\n\n\n\n

We will need to do a join with the symbol of Celsius before putting it inside userLbl.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Next, set the descLbl to the value for key:\u201dtext\u201d in the \u201ccondition\u201d dictionary that is inside the \u201ccurrent\u201d dictionary.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Do the same thing for the weatherIcon but instead of key: \u201ctext\u201d, use key: \u201cicon\u201d and before setting the value to weatherIcon, use a join with text string http: to construct a valid web address to get the image from Weather API servers.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

This is done and our basic weather app with a nice clean and attractive user interface is ready.<\/p>\n\n\n\n

I hope you have as much fun making this app as I had while designing and making it for you.<\/p>\n\n\n\n

Again, you don\u2019t need any extension for this weather app. Just make a free account on WeatherAPI.com and you are good to go. If you like my work, please share it with friends and family and if you haven\u2019t subscribed to my channel yet, kindly do so so that you don\u2019t miss any of the great projects that I have planned for you.<\/p>\n\n\n\n

In the end, I would like to thank the amazing people at WeatherAPI.com for making such a user-friendly API.<\/p>\n\n\n\n

https:\/\/www.weatherapi.com<\/a><\/p>\n\n\n\n

Thank you for reading this tutorial. <\/p>\n\n\n\n

If you like my tutorials, consider supporting me:<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

You can also have a look at the video here:<\/p>\n\n\n\n

\n