Build a Weather Mobile App with Ionic

Published in

ITNEXT

7 min readJan 4, 2022

Introduction

In this article, I will be taking you through the process of building a mobile application that gives the weather information of major locations around the world. With the concept in this tutorial, you can add as many locations as possible, even custom locations. This app will be built using the Ionic Framework and the Tomorrow.io Weather API

Ionic is an open source mobile toolkit that allows you to create cross platform web and mobile applications.

Tomorrow.io Weather API gives developers a robust set of APIs that reports fast, accurate, and reliable weather data flexible for any integration.

Let’s get to it.

Getting Started

Two prerequisites to building an Ionic mobile app is to have Node and Ionic installed globally on your PC. If you are not sure you have them installed, run the commands:

node -v

ionic -v

Each of these commands will output the versions of Node and Ionic on your system, respectively.

If you don’t have them installed, visit NodeJS to download and install Node. Then run the command below to install Ionic:

npm install -g ionic

Building the Ionic App

It’s quite easy to start an Ionic app as it has good starting templates:

tabs: A project with default bottom tabs you can customize.
sidemenu: A project with a side menu already added.
list: A project with a list layout.
blank: An empty project with a single page.

For our case, we will be using the list template. Run this command to start:

ionic start ionic-weather-project list --type angular

Here, ‘ionic-weather-project’ is the project name. You can name yours anything you prefer.

‘list’ is the ionic template we are using.

‘-type angular’ means we will be using angular as the framework. Other frameworks are Vue and React.

Use Type y if presented with a prompt to add Capacitor.

Move into the directory ionic-weather-project and open with VS Code

cd ionic-weather-project

code .

Run the project with the command:

ionic serve

This will open the app in your default browser at http://localhost:8100, like so:

Customizing and Integrate It with Our Weather API

We will be getting weather information for the locations in the list below. To get the weather information from Tomorrow.io Weather API, you require the latitude and longitude of the locations. Here, we are going to get them manually. However, you can use any geolocation plugins.

Visit Google Maps and type in the location name. You can get the latitude and longitude from the URL.

New York, New York, United States = 40.6971494,-74.2598666

London, United Kingdom = 51.5285582,-0.2416813

Dubai, United Arab Emirates = 25.0757595,54.9475536

Los Angeles, CA, United States = 34.0201613,-118.6919217

Lagos, Nigeria. = 6.5480357,3.1438724

Create Locations Data Service File

Go to the src/app/services/ folder and create a location.services.ts file. Enter the script below.

I only added 2 locations for brevity, but you can add all the locations. Their geolocations are above: I listed them.

Now that we have our location services, let’s feed it into our home page. Go to src/home/home.page.html . Edit the home.page.html file so that it has a title called Location and the app-message components duplicate based on the locations fetched. See the code below:

Fetch the locations from the locations services. Go to src/app/home/home.page.ts and edit it like so:

Customize the <app-message> component that shows the list of locations. Edit the src/app/message/message.component.html and src/app/message/message.component.ts files to dynamically receive location feeds and display them accordingly in the view.

And for the message.component.html file:

Here’s what happens next. Once you click a location, it takes you to the <view-message> component. You’ll need to update the routing.

Go to src/app/app-routing.module.ts and edit the View Message path to:

...{    path: "location/:id",    loadChildren: () =>        import("./view-message/view-message.module").then(           (m) => m.ViewMessagePageModule        ),},...

At this point, here’s what you will have:

Integrating the Tomorrow.io Weather API

First, you need to register and get an API Key. It is with this key that you can call various endpoints on the Tomorrow.io Weather API. Visit the Tomorrow.io and sign up. You can also sign up using your Google or Github accounts.

Reveal Your API Key

Once you are logged in, click development menu on the left. Under Keys, click reveal (the eye icon) in front of your Secret key to reveal it. Now you can make multiple calls.

Don’t forget to refer to their robust documentation for using any endpoint you wish to call.

For this tutorial, we will be using the Retrieve Timelines (Basic) endpoint to get weather information of our locations.

When making calls to this endpoint, you pass a couple of parameters. Some of which we will be passing are:

location: We will be using the ‘latlong’ format that takes the latitude and longitude of the location, separated by a comma.
timesteps: This is the intervals of the data received. The allowed values are: “best”, “1m”, “5m”, “15m”, “30m”, “1h”, “1d”.
units: This refers to the unit of measure of the data received.
apikey*: This is your API key to access the endpoint.
startTime: This refers to the time the report should start from. It defaults to now.
endTime: This refers to the time the returned data should stop. We will be using moments for inputting this.
fields: This is an array of returned fields you want in your result. The endpoint returns a lot and you can specify which one(s) you want here.

We’ll be using Angular’s HttpClient to make the calls and moment for the endTime. Let’s install moment:

npm install moment

Then, add HttpClientModule to your app.module.ts. Go to app.module.ts, import it at the top, and add imports array to it.

...import { HttpClientModule } from "@angular/common/http";...imports: [    HttpClientModule,],...

Let us call the Weather API from our Location Service. In the location.services.ts file, add these:

...import { HttpHeaders, HttpClient } from "@angular/common/http";...baseURL = "https://api.tomorrow.io/v4/";apiKey = "<yourAPIkey>";constructor(private http: HttpClient) {}public fetchLocationData(latlong) {<see screenshot below for content of this function>}

What we just did in the above snippets is:

We imported HttpClient and HttpHeaders modules to make calls to our weather API.
We created the baseURL and the API Key constants. Note that the API key should be in your environment file and not uploaded to any public repository.
We created the fetchLocationData() function to make the call the weather endpoint using the parameters specified earlier. This function receives the latitude and longitude of the location to fetch its data.

Call the Location Services in Your Component

Open the src/app/view-message/view-message.page.ts and let’s call our location service from there:

In the above snippet, we imported the location service, called the service, and assigned it to the LocationData variable created in the class.

As this is done, we will also need to show the result on the view. Edit the src/app/view-message/view-message.page.html file as in the snippet below:

This snippet shows the data retrieved from the API in a list format. Your page should come up like this image:

This marks the end of the tutorial. For the full source code, you can check the Ionic Weather App on Github

Conclusion

It has been a wonderful session and I hope you followed along. The Tomorrow.io Weather API is robust and flexible for any use case. Study the documentation for as many use cases as you want. You can also add icons or create your app with a different layout. It all depends on you.