Working With OpenWeather Maps API for making a Weather Application

-
Areyou planning to make an app that displays current weather conditions? Want to know how to make one on App Inventor?

 Here we're going to use Open Weather API for this purpose.

Why OpenWeather API?

If you are thinking why I'm using particularly OpenWeather API. 
For the developers who build apps on App Inventor or its distros, the Free & Premium Packs are suitable in OpenWeatherMaps compared to other API services.

It comes with 60 requests per min for Free. So I choose it as a better option. ( If you find any other services feel free to say me in the comments section )

Getting OpenWeatherMaps API Key

Firstly, go to OpenWeatherMaps. You'll find a sign-up button in the top right corner.

Complete the sign-up formalities and you'll be redirected to your dashboard.

Find the API section and create a new API key.

Setting Up the App

There is nothing much to do in the designer section. Just add a Web component from the Connectivity section. 
For making easy to yourself to parse the JSON response import JSON UTILLs extension by Luke.
JSON Utils extension makes easy to get particular data from the response text.

Then add some labels to show up the data you want to get.

The Blocks Section

Just refer the below image to know how actually app works.

(I'll be providing AIA file at the end)




That's all is how you can make your own weather displaying application in any of the app inventor distros.


Make sure you subscribe to this blog so you'll never miss an update. Cheers !

Download Free AIA:

⤏ [TEST APK] Download Now ( Google Drive Link ) ( Open-load Link )
⤏ [AIA]Download Now ( Google Drive Link ) ( Open-load Link )

Comments

Post a Comment

Popular posts from this blog

Setting up JAVA_HOME variable in windows | CodeWaala

-
Image
For making your own extension the first step would be setting up java variables. Setting Up JAVA_HOME 1. Locate the Java Directory If you haven't change the path in installation then the java directory should be at "C:\Program Files\Java\jdk1.8.0_65" Else type "where java" to get the directory of java jdk. 2. Do according to your computer Windows 7 - Right click on My Computer > properties > advanced Windows 8 – Go to Control Panel > System > Advanced System Settings Windows 10 – Search for Environment Variables then select Edit the system environment variables Click the Environment Variables button. Under System Variables, click New. In the Variable Name field, enter either:       • JAVA_HOME for JDK (Java Development Kit) 3. Now put the path to JDK directory Now save by clicking ok and apply the changes. After you setup java variables yoully need to reopen the git command pro...
Read more

Grid Card View using HTML & Java Script

-
You might want a grid card view in your app. Until now Grid Card View Extension are paid. Are you searching for a free one? Then you are in the right place. You can use the below HTML/JavaScript to make a grid card view design in your application. ------------------------------------------------------------------ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="animate.css"/> <style> body{ background: #e2e9f1; } .item{     width: 100%;     float: left; clear: right; } .frame { position: relative;     font-family     : Arial; background: white url(l...
Read more