Introduction to Weather STEM with Ionic

As part of our new AngularJS series, we invited Katie Ginder-Vogel from Ionic to tell us about some of the cool things people have built with Ionic. Ionic is an open source mobile platform built on AngularJS, with a rich ecosystem of tools to help you quickly build and ship quality mobile apps.  – Ed.

Show me a person who’s not obsessed with weather forecasts and I’ll show you a person who’s probably gotten soaked in a thunderstorm. Weather’s awesome, and with the myriad forecasting tools we have available to us, why not check out a bunch of them and evaluate the options?

UCompass, a Tallahassee company that was started by a husband and wife team more than nineteen years ago, helps companies leverage technology to improve content delivery. Their product WeatherSTEM blends scientific instruments, data, and curriculum. Individuals, schools, and community groups can install WeatherSTEM units made by Davis Instruments and collect data on rainfall, soil temperature, and leaf wetness; build a custom dashboard to track and analyze data; and share via social media. There’s free curriculum for educators, and users can access data via an API.

Cuttlesoft, a custom software agency also based in Tallahassee, built a custom WeatherSTEM app using Ionic that interfaces with WeatherSTEM units in a variety of ways.

Users can browse all of the WeatherSTEM units (at the time of this writing, there are 163 live units in nine different states) from the app—alphabetically, by state/county, and by proximity. Users can view unit details and forecasts, configure notifications, and manage their linked accounts.

“The coolest part is that users can monitor multiple units from their dashboard and receive alerts based on sensor data, forecasts, lightning strikes, scheduled alerts, and weather alerts,” says Emily Morehouse, co-founder and CTO at Cuttlesoft. “The Ionic app serves as the mobile companion to the WeatherSTEM web application.”

The same WeatherSTEM system that powers all of the data for the public-facing web and mobile apps is also used in school systems as part of an educational platform that allows students to learn about weather and their environment using live data from right outside their classroom doors.

Cuttlesoft built the Ionic app and helped design the API for the backend. The Cuttlesoft team went 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, we worked mostly in sprints to build out the functionality, making use of iTunes Test Flight to get user feedback early on,” says Morehouse. “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.”

The most recent release allows users to tap into the network further than they’ve been able to in the past. Users can create push notifications that are triggered by various factors from the weather units, like sensor thresholds, weather alerts, lightning strikes, and forecasts.

“The WeatherSTEM network is growing to be one of the most impressive subnets for weather units and has certainly impacted how people interact with their environments every day,” says Morehouse.

Morehouse’s team integrated and built on an existing backend system to create the app and had to create numerous custom features. They also used a standard geolocation plugin to allow users to browse through the units by proximity, Craig MacKay’s Google Analytics plugin for usage tracking, the app availability plugin to open a unit’s Facebook and Twitter pages in their respective native apps, and One Signal’s push notification plugin.

Cuttlesoft’s other recent Ionic projects include a recently released app for the Florida Restaurant and Lodging Association that lets users track upcoming events, view event details, and manage bookmarked events and event-specific schedules. CouchDB/PouchDB allows the app to work offline and sync data when an internet connection is available. Cuttlesoft has white-labeled the app and is in the process of productizing it as a single-event or multi-event app for larger associations. The company has another white-labeled festival app and is about to release a version for the Best Coast Beer Fest.

“Ionic is a great way to have a unified codebase for multiple platforms and to iterate quickly using modern web languages,” says Morehouse. “The Ionic docs are incredibly thorough, Ionic (and Cordova) plugins are typically abundant and top-notch, and the community forums are always there when you hit a problem you don’t know how to solve.”

Morehouse says she loves Ionic so much that she’s actually started teaching workshops to other Tallahassee developers, whom she hopes will leverage the Ionic toolkit to create great apps for their organizations and clients.