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.
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”.
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.
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.