Ionic 5 Weather Sample App

Sample weather app with backend services.

This sample app uses and demonstrates:

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

This sample app​ 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 API Express Project

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

  1. Go to the API Express tab.
  2. Click the Create new project button and click Import from backup.
  3. Select the downloaded backup file.
  4. For the name, enter weatherAPI. Optionally, enter the API description.
  5. Click Create:

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

Creating App UI

  1. From the Apps tab, click Create new app:
  2. Select Ionic 5 > Ionic 5 Blank as the application type, enter Ionic 5 Weather App for the app name, and click Create:
  1. Inside the App Builder, select CREATE NEW > API Express Service select the weatherAPI project, then all conditions/weather services and click the Import selected services button:
  1. On the left side, unfold the Pages folder and open the predefined Screen1.
  2. Select the Page component from the breadcrumbs (you can also use the OUTLINE view to locate the needed component) and set the page Footer property to False as we will not use it in the app (you will also be asked to confirm changing the property).
  3. On the page, select Toolbar title and set its property: Text = Weather App:

Defining App UI Components

  1. From the components PALETTE menu, drag & drop the Input component into the page main body. In the PROPERTIES menu, add the following properties for the Input component.
  • For Component Name, enter locationInput;
  • Unfold the Label section and, for Label > Text, enter Location;
  • For the Placeholder property, enter Enter location:
  1. Add the Button component from the PALETTE menu to the page with the following properties:
  • For Component Name, enter getWeatherButton;
  • For Text, enter Check forecast:
App UI view with *Input* and *Button*App UI view with *Input* and *Button*

App UI view with Input and Button

  1. In our App UI, we will also need a Grid component to show the results of our weather service. From the PALETTE, select the Grid component and place it beneath the Button on the page.
    The grid will be created nesting a default Grid Row with two child Grid Cell components.
  2. Select Grid Row (in the OUTLINE view 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:
  1. Now we have a grid with three empty cells; for the output data of our service, we will need a Text component inside the grid cells. So, drag & drop the Text component from PALETTE into each grid cell.
  1. And for each Text component inside the cells, set the corresponding Text properties as follows:
  • Date;
  • Temperature;
  • Feels Like:
Grid component.Grid component.

Grid component.

  1. Select the Grid (in the OUTLINE view or by selecting it in the breadcrumbs menu) after that click the plus icon in the top right corner of the selection to add 1 more Grid Row into the Grid:
  1. Select Grid Row2 (in the OUTLINE view or by selecting it in the breadcrumbs menu) and then click the plus icon in the top right corner of the selection to add 1 more cell into the grid so that there are three cells:
  1. Drag & drop the Text component into each grid cell of the second row.
  2. For each Text component inside the cells, set the corresponding Text and Component Name properties as follows:
  • dateTimeText
  • temperatureText
  • feelsLikeText:

Backend

  1. Open the DATA panel on the left side menu.
  2. Select Service as a datasource in the menu with weatherAPI_conditions_weather_get and click Add.
  3. Rename it to getWeather.
*DATA* service configuration*DATA* service configuration

DATA service configuration

The services will be instantly imported and you can quickly test if they work correctly:

  1. Select weatherAPI_conditions_weather_get located under the Services > Weather API > conditions folder, go to its Test > Query String tab, enter some test value, for example, Kyiv, and click the Test button to invoke the service. You should see the service response in a moment:

There is one step left and it is setting the service response.

  1. After you have successfully tested the script, click the Import as Response button:
  1. You can open the Response > Body tab to see how it looks:
  1. Now, return to the Screen 1 > DATA panel tab and click the Mapping button of the Before send element. The visual mapping window will appear.
  2. Expand the Page Components content and drag & drop the locationInput Value property to the service request Query location parameter.
    Click the Save & Replace button to save:
*Mapping* editor window*Mapping* editor window

Mapping editor window

  1. Now in the DATA panel, 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.GridRow2 element. This way, we have linked all the iterated items from the service response and linked them with the grid row data cells on the App UI.
  2. We need to make the same for each mapping element in our data structure response we need 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].main.feels_like parameter to the feelsLikeText.Text property.
Service response mappingService response mapping

Service response mapping

  1. Click Save & Replace.
  2. Finally, let's go back to the DESIGN panel.
  3. Click the getWeatherButton and expand the EVENTS tab from the bottom. From the EVENTS menu drop-down, select the Click event, for action, select Invoke service with the getWeather datasource and save.
*EVENTS* panel menu*EVENTS* panel menu

EVENTS panel menu

App Testing

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:

Web preview in the browserWeb preview in the browser

Web preview in the browser


Did this page help you?