Is Ionic on Your Radar?: Building Cross-Platform Mobile Weather Apps

Why Use a Hybrid Framework?

When developing mobile apps intended to be used by as many users as possible, dev teams want to make it available on as many devices as possible. That usually means developing for both iOS and Android. Developing two different code bases using native tooling and languages can be quite the undertaking for smaller teams. Reproducing the same experience across more than one platform requires using different tools, languages, and design philosophies. However, the end result is usually a very polished, fast, and smooth experience. This article and its tutorial are intended for experienced web developers that want to start developing for mobile with limited time, budget, and team members.

Smaller teams may not have the resources to concurrently develop and maintain different versions of an application. ArcGIS app developers are usually experienced web developers and getting comfortable developing for new platforms might not be in a budget or timeline. This is where hybrid frameworks can be utilized to great effect. There are always tradeoffs that must be considered, but hybrid mobile frameworks have come a long way and can produce very polished, “native looking” experiences.

Image of five people gathered around a table. There are computers, notebooks, and paper spread out across the table. The person in the middle is standing up while explaining something to the other four, who are seated.
Hybrid frameworks help make developing mobile apps feasible even for small teams. Image Source

Ionic is one-such framework ; it allows developers to use the web tools and languages they are comfortable with to create apps that run on multiple platforms. Ionic embraces the NPM ecosystem for handling dependencies, so building an ArcGIS app for mobile devices should be very familiar for most web developers. Ionic also supports popular MVC (Model-View-Controller) frontend frameworks such as Angular, React, and Vue for building responsive UIs, as well as Cordova plugins for accessing OS and hardware features. Ionic combines all of these to provide web developers a flexible toolbox to build a polished mobile experience.

With Ionic, iterating and testing during development is as familiar and streamlined as developing a standard web application in a browser. Ionic apps run in the browser, and Ionic comes with a hot reloading server that detects any changes and automatically refreshes your app. Once a feature is complete, developers can use Ionic’s command line interface to build for iOS and Android via XCode and Android Studio, respectively. This article will not cover that build process. Setting up the Android SDK and Android Studio could be a whole separate article and Ionic’s documentation has that covered. This article will focus on setting up an app to use the ArcGIS JavaScript API and walk through an example that combines native OS features and common ArcGIS classes to quickly create something useful, hopefully demonstrating the possible value of hybrid frameworks for small dev teams.

Tutorial

This tutorial assumes that NPM is already installed. There is complete documentation on how to install NPM and most web developers already have it on their dev machines. 

Installing Ionic is as simple as running the NPM install command in your favorite terminal:

$ npm install -g @ionic/cli

and the Ionic CLI command for creating the directory structure of a new Ionic app is as follows (must be an interactive terminal, Git Bash for Windows will not work):

$ ionic start

Ionic will prompt for answers to a few questions. For this tutorial the answers are:

$ ionic start
? Use the app creation wizard? No

Pick a framework!

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.

? Framework: Angular

Every great app needs a name!

Please enter the full name of your app. You can change this at any time. To bypass this prompt next time, supply name,
the first argument to ionic start.

? Project name: MyWeatherRadar

Let's pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.

? Starter template: blank

The resulting project directory is a working Ionic app that you can run and check out by navigating into the project directory and running:

$ ionic serve

Ionic will start a web server and open a browser tab to the appropriate port. The blank app is ready to start development. The first thing to do is get ArcGIS installed. Again, in the terminal run:

$ npm install @arcgis/core --save

This will install the ArcGIS JavaScript node modules. The ArcGIS CSS needs to be added. Insert this stylesheet link tag into index.html.

Screenshot of code example

ArcGIS is now ready to go. Open src > app > home > home.page.ts to see the home page code, which is just an Angular component:

Screenshot of code example

The first code changes are importing the necessary ArcGIS classes, instantiating a Map and MapView object, connecting it to the markup in home.page.html ,and sizing it to fill the available screen space by styling it in home.page.css – just like developing ArcGIS web apps. Make the following changes to the following files (changes highlighted in green and blue).

Screenshot of code example

The Ionic web server should reload the browser tab and display a map.

Screenshot of a mapping application. There is nothing currently on the map. The ratio of the size of the image indicates this application might be on someone's phone.

In order to create the intended features, the device’s navigator must be used to display and update the user’s location on the map, and an ArcGIS ImageLayer will be used to display a radar imagery service from the National Weather Service. Make the following changes to display and update the user’s location on the map on a 10 second interval.

Screenshot of code example.


The subsequent browser refresh should display a marker on your current location like so:

Screenshot of mapping application. The map is centered on Gulfport, Mississippi, where GEO Jobe's development team is located. There is a black circle on the map, indicating the location of the user of the application.

All that needs to be done to make this simple app feature complete is add the National Weather Service’s radar service as a layer to the map with the following changes. The URL is cutoff in the screenshot below, but it is:
https://idpgis.ncep.noaa.gov/arcgis/rest/services/radar/radar_base_reflectivity_time/ImageServer

Screenshot of code.

The app should now display radar images over the map. It’s clear skies at the GEO Jobe software development headquarters, but zooming out shows weather systems across the U.S.

Screenshot of the mapping application. This time, the map is centered on a portion of the United States of America. Colored bands indicating the intensity of rainfall range from Texas up into Minnesota. This information is commonly used to display weather conditions visually.

The radar layer will refresh periodically giving the user current radar information in relation to their location.

This app can be built to run on iOS and Android. A Mac and XCode are necessary to build for iOS, and the Android SDK and Android Studio must be installed to build for Android. If those are installed, the ionic cap run <iOS / Android> command will compile the source code into XCode or Android Studio projects and open the appropriate IDE. From there, app packages can be built and installed on devices.

The same five people from the first image are now sitting and standing around a couch. They are all looking at the camera and smiling. All of them have an arm raised with a fist, indicating victory and celebrating an accomplishment.
Hybrid frameworks make developing mobile apps for a variety of platforms much simpler. Image Source

Hopefully, this article demonstrates some of the value of using hybrid mobile frameworks such as Ionic to build polished and performant ArcGIS mobile apps using web tools. As stated before, the advantages and drawbacks must be considered against the budget, timeline, and available resources of a dev team.

Have questions about this tutorial? Have an idea for an application, but need a team of developers to bring it to life? Reach out to us via e-mail or on Twitter. We’ll be delighted to talk with you!

Application Developer