The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

To say that the Ionic team, currently comprised of natives of the Midwest and the East Coast, is a little obsessed with checking the weather forecast, is putting it mildly. In fact, Ionic team members routinely Slack pictures of the day’s forecast to each other. The Midwesterners and East Coasters trade jabs about whose town is colder, snowier, and generally more miserable. Then Brandy crushes us with her reports that it’s 80 in Florida, and we weep.

So, when we hear about Ionic apps that deal with weather, we get excited–especially when those apps are IoT apps, because you know how we feel about IoT apps.

Our friends at Cuttlesoft, a custom software agency based in Tallahassee, where, according to Brandy, the weather is almost always nicer than it is in Madison, recently built an Ionic app for another Tallahassee company, UCompass. UCompass’ WeatherSTEM product blends scientific instruments, data, and free curriculum for teachers.

Individuals, schools, or community groups can install WeatherSTEM units made by Davis Instruments in their backyard, schoolyard, or anywhere onsite that’s convenient. They can use the units to collect data on rainfall, soil temperature, and leaf wetness, for example.

Then, they can use the Ionic app, available for iOS and Android, to browse all of the WeatherSTEM units in the U.S. from the app alphabetically, by state/county, or by proximity. At the time of this writing, there are 163 live units in nine different states, installed at locations varying from farms to university football stadiums.

“The unit network is growing to be one of the most impressive subnets for weather units and is certainly disruptive in how people interact with their environments every day,” says Cuttlesoft co-founder and CTO Emily Morehouse.

Users can build a custom dashboard to track and analyze the data from the units, like unit details and forecasts, which is accessible via an API. All the information can then be shared on social media. App users can also configure notifications and manage linked accounts.

“Users can monitor multiple units from their dashboard and receive alerts based on sensor data, forecasts, lightning strikes, scheduled alerts, and weather alerts,” says Morehouse. “The Ionic app serves as the mobile companion to the WeatherSTEM web application.”

The WeatherSTEM system that provides data to the public-facing web and mobile apps is also used by schools to teach students about weather and the environment, using live data from just outside the classroom door.

“Since this is a project for a client, we were responsible for the Ionic app and parts of designing the API for the backend,” says Morehouse. “We moved through an initial process of iterating through mockups with WeatherSTEM’s design team to fine-tune what they wanted the look and feel to be.”

From there, the Cuttlesoft team worked mostly in sprints to build out the functionality, making use of iTunes Test Flight to get user feedback early on.

The team relied on Ionic and Cordova plugins to create many of the app’s features. The app uses a standard geolocation plugin to allow users to browse through the units by proximity. It incorporates Craig MacKay’s Google Analytics plugin for usage tracking. The Cuttlesoft team integrated the app availability plugin to open a unit’s Facebook and Twitter pages in their respective native apps. Lastly, they used One Signal’s push notification plugin.

“We’re constantly fine-tuning and evaluating how the app looks and how users interact with it, and we have big ideas for future improvements,” says Morehouse. “Ionic has proven itself to be incredibly versatile, easy to use, and customizable.”

The first version of the WeatherSTEM app faced a tight deadline. The team relied on Ionic’s docs and community forums to solve problems.

“From the first character typed to release in both stores, we completed the project in under a month,” says Morehouse. “With a small and already busy team, this would have been impossible for us to develop both apps natively in that amount of time and with such precision.”

Morehouse says she’s become such an Ionic devotee that she’s started teaching workshops locally.

“Ionic is a great way to have a unified codebase for multiple mobile platforms and to iterate quickly using modern web languages,” she says.