Weather API and Geolocation jQM Sample App
Sample apps with backend services.
This example uses Weather REST API to show the temperature information based on your location.
Sample app uses and demonstrates:
- jQuery Mobile.
- Server Code.
- Invoking an external REST API.
App (UI)
To get the app UI:
- Create a new jQuery Mobile app based on the Blank template.
- Inside the App Builder, select CREATE NEW > From plugin. Under Appery.io Examples select Weather API with Geolocation.
- Click the Import selected plugin button.
- Select Weather as the starter page and click Apply settings.
Backend
To get the app backend:
- Go to the Server Code page.
- Open the Plugins page.
- Import the WeatherUnderground plugin. Open the imported script, it should look like this:
var apiKey = "Quickly check weather conditions for a location.";
var location = request.get("location");
var url = "http://api.wunderground.com/api/"+apiKey+"/conditions/q/"+location+".json";
var XHRResponse = XHR2.send("GET", url, {});
Apperyio.response.success(XHRResponse.body, "application/json");
- You need to sign up for a Weather Underground Developer account to get an API key. Once you have the API key, set it on line 1 in the script. How to find the API key?
- If you would like to test the script before using it in the app open the Script parameters tab. Create a parameter called location and set its value to an airport, for example, JFK.
- Switch to the Run tab and click the Save and run button.
Connecting the UI and the Backend
The last step is to connect the app with the backend.
- In Server Code, open the API information tab.
- From Service URL, copy the script ID.
- Inside the App Builder, open Services > WeatherAPI_service.
- In service URL, replace {servercode} with the ID from step #2 (the curly brackets are not needed).
- Now you can test the app by clicking the Test button in the toolbar.
Updated almost 4 years ago