What are we going to build?
In this tutorial, we’ll learn how to build a weather app that displays current weather data (temperature and icon) for a given zip code.
The app will look like:
Before you begin
- Tutorial level: beginner; your first mobile app.
- Prerequisites: an Appery.io account.
The app uses an API from World Weather Online. The API is free to use, but requires registration to get a special API Key. Please register to get your key. The API key should be stored safely in the database, and called through the proxy channel.
Creating new app
1. First, create a new app. Enter WeatherApp for the name and click “Create”.
When the mobile builder loads, you’ll see something like:
2. On the left-hand side, click Pages > startScreen. An editor with an empty startScreen opens:
Creating the mobile UI
1. You are ready to build the UI. You’ll will see the Caption label at the top. That’s part of the header. Click it and change the label to Weather App, to look like:
2. From the PALETTE section (on the left-hand side), drag and drop the Label component onto the screen. When a component that holds a text value is dropped into a screen, its label goes into edit mode. Change the label to Zip code, to look like:
3. Drag and drop the Input component below the Label component. Delete its label text.
4. Because you’ll need to reference this component when defining services, you should rename it. Select the component and go to PROPERTIES. Change its name to zipCodeInput. Clear the Text field:
5. Drag and drop the Button component, and change its label to Get Weather. The result will look like:
6. If you want to change the spacing between each component, in PROPERTIES, select the component, and change its Margin property.
7. You need to create the UI for displaying the results. The goal is to display the temperature and an image. Drag and drop a Label component below the button. Delete its label text. You’ll need to reference this component when defining services, so you should rename it. Select the component and go to PROPERTIES. Change its name to temperature:
8. Lastly, you need the Image component. Drag and drop the the component below the label. In PROPERTIES, change its default name to icon. Uncheck the “Visible” property box. The weather image will become visible when the result is received:
9. The final UI should look like:
10. One nice feature of Appery.io is that you can test the app and see how it looks in-browser. Simply click “Test” to open the app in the browser.
11. To test the app on the device, open “Test” and check “Public”, to make the app link public. Scan the QR code or email the link to your phone.
Storing an API key in the database
You need to create the database where the key will be stored.
1. Open the Appery.io Databases tab, or click “Database”:
2. To create a new database, click “Create new database”. Enter secureDB for the database name, and click “Create.” The database Collections tab will open:
3. Click “Create new collection”, and enter secretKeys for the collection name. Click “Add”:
4. Click “+Col” to add a column. Enter keyName and click “Create column”:
5. In the same way, add one more column: secretValue:
6. Enter your data. Click “+Row,” add WeatherKey for keyName, and for secretValue, enter your API key (get a free API key here):
Now you’ll create a proxy channel.
Creating a proxy channel
1. Switch to the Secure Proxy tab:
2. To create a new proxy channel, click “Create new proxy”. Enter SecureProxy for the channel name:
3. The channel you created will open with default settings:
4. Check the “Use proxy+ store sensitive (private) data in database” box.
5. In the open drop-down menus, select the needed parameters and click “Save”:
Database> secureDB.Collection> secretKeys.Key column> keyName.Value column> secretValue.
6. The Proxy ID is a unique value, and is used to define the proxy channel in the app. Copy it and save it; you’ll need it later:
Defining REST service
1. Create a service to connect with the weather REST service. In the Appery.io app builder, click CREATE NEW > Service.
2. Rename the service to getWeather, and click “Create Service”.
3. A service editor opens:
4. For the service URL, enter:
|
1 |
http://api.worldweatheronline.com/free/v2/weather.ashx |
5. Select SecureProxy from the drop-down menu and thus check the “Use Appery.io Proxy” box:
The next step is to define service inputs:
1. Open the Request panel.
2. Here, you’ll define request parameters for the service. The weather service requires three parameters:
q– zip code.format– response format.key– key name in the database.
3. In the input field, enter q and click “Add”.
4. Now create two more parameters, format and key. The result should look like:
5. For format, enter json as the Default value.
6. For key, enter {WeatherKey}.
7. Test the service: Go to the Test tab, enter any zip code value for q. For the key value, enter the API key instead of the key name, otherwise the test will fail.
8. Click “Test”. The result should look something like:
The next step is to define the service response parameters. If you scroll through the test results, you’ll notice that the weather REST service returns a large number of parameters. Creating them all by hand would be time consuming and error-prone. Of course, you could define only the parameters that you need, but another solutions exits:
1. Click “Import as Response”. This feature automatically creates the service response based on the parameters present in sample test.
2. You should see a “Service response created successfully” message.
3. Go to the Response tab, where all response parameters are listed (after expending data and weather):
4. Close the getWeather service editor. Go to the startScreen > DATA tab.
5. From the drop-down menu, select Service > getWeather and click “Add”ю
Mapping UI and service
1. Now you need to map the UI to the service. Rename restservice1 to weather, and click “Mapping” for the Before Send event instance:
2. Define the mapping by selecting the Text property and connecting it to the q property on the service side, then save. Both format and key are predefined: 
3. Click “Mapping” for ерц Success event and create the following mapping:
temp_F> temperature/Text.weatherIconURL[i]/value> icon/Asset.
4. The result should look like:
5. Click “Save and return”.
There is one more thing we need to do:
6. You’ll see an EVENTS tab on the bottom of the page. Click it to expand and add an event shown on the screenshot below:
7. Click “Save”.
Defining an action to invoke the service
1. Lastly, invoke the service on button click. Go to the DESIGN tab, open the EVENTS view (bottom of the screen).
2. Select the Button component (a click event is set by default) > Invoke Service > weather.
3. Click “Save”.
4. Click “Test”, enter any zip code, and click “Get Weather”.
Testing the app
Click “Test” to launch the app in the browser.
The app should look like:
To test the app on the device, open the Test menu, and check “Public”. Scan the QR code or email the app link to your device.