Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Ionic 4 Weather App

Sample apps with backend services.

This tutorial uses and demonstrates:

  • Ionic 4.
  • API Express.
  • Invoking an external REST API.

This example​ uses an API Express for connecting to a 3rd party Weather REST API services to show the temperature information based on the entered City name.

OpenWeather API

This tutorial uses the OpenWeatherMap API. Please sign up for a free account to get an API key for using the service.

Creating an API Express Project

To start, you are going to create an API Express project from the backup file.

  • Go to the API Express tab.
  • Click the Create new project button and click "Import from backup".
  • Select the downloaded backup file.
  • For the name, enter weatherAPI. Optionally, enter the API description.
  • Click "Create".

The visual service editor will load where you will see all REST components in the project. But first, you need a place to store the API key for the service. Open the Service keys tab and enter your own OpenWeatherMap API key instead of {weather_api_key} key value.

App (UI)

  1. Create a new Ionic 4 app based on the Blank template.
  2. Inside the App Builder, select Create new > API Express service select the weatherAPI project and select all conditions/weather services.
  3. Click the Import selected services button.
  4. On the left side, unfold the Pages folder and open the predefined Screen1.
  5. On the page, select ToolbarTitle and set its property: Text = Weather App.

App Components

From the components palette menu, drag and drop an Input component into the page main body. In the PROPERTIES menu, for the Input component add the following properties:

  • For Component Name enter locationInput.
  • Unfold the Label section and for Label.Text enter Location.
  • For Placeholder value enter Enter location.

Add a Button component from the palette menu to the page with the following properties:

  • For Component Name enter getWeatherButton.
  • For Text enter Check forecast.
  • And set the Expand property to Block.
The App UI view with Input and Button.

The App UI view with Input and Button.

In our App UI, we will also need a Grid component to show the results of our weather service. From the palette, select a Grid component and place it beneath the Button on the page.

Select a GridRow1 (in a visual builder or by selecting it in the breadcrumbs menu) after that click the plus icon in the top right corner of selection to add 1 more cell into the Grid.

Now we have a Grid with cells but it's empty; for the output data of our service, we will need a Text component inside the grid cells. So, drag and drop a Text component into each grid cell.

Drag and drop Text component.

Drag and drop Text component.

And for each Text component inside the cells, set the Text and Component Name property as follows:

  1. dateTimeText
  2. temperatureText
  3. conditionText
Grid component.

Grid component.

Backend

  1. Open the DATA tab on the left side menu.
  2. Select Service as a datasource in the menu with weatherAPI_conditions_weather_get and click Add.
  3. Name it getWeather.
The DATA service configuration.

The DATA service configuration.

Click the Mapping button of the Before send element. The visual Mapping window will appear.

Expand the Page Components content and drag and drop the locationInput Value property to the Service request Query location parameter.

The Mapping editor window.

The Mapping editor window.

Click the "Save & Replace" button to save before send mapping.

Now in the DATA window, click the Mapping button of the Success element. In the Mapping window, expand the Service response body > list and drag and drop the list.list[i] parameter to the Page->Grid1.GridRow1 element. This way we have linked all the iterated items from the service response and linked them with Grid row data cells on the App UI.

We need to make the same for each mapping elements in our data structure response which we want to show in the App. The structure for mapping would be as follows:

  • body->$.list.list[i].dt_txt parameter to the dateTimeText.Text property.
  • body->$.list.list[i].main.temp parameter to the temperatureText.Text property.
  • body->$.list.list[i].weather.weather[i] parameter to the Page->Grid1.GridRow1.GridCell3 element.
  • body->$.list.list[i].weather.weather[i].main parameter to the conditionText.Text property.
Service response mapping.

Service response mapping.

Just a small touch of adjustment before hitting the Save button. Click the TS button next to temperatureText.Text and add the code: return value + "°F"; there.
Save the TS changes and then click Save & Replace.

TypeScript editor.

TypeScript editor.

Finally, let's go back to the DESIGN tab.

Click the getWeatherButton and expand the Events panel from the bottom. In the Events menu, select the Click event, for action, select Invoke Service with the getWeather datasource. Save.

Events panel menu.

Events panel menu.

Test the App

We are now ready to test our Weather App in the Web browser - in the top menu, select the Test button and choose the testing option you would prefer. When the App starts in the Web browser, enter the City name the weather for which you would like to know and click the "Check Forecast" button.

iPhone X web preview in Chrome browser.

iPhone X web preview in Chrome browser.

Updated 4 months ago

Ionic 4 Weather App


Sample apps with backend services.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.