Blog Insights
Behind the Scenes: Making a Mobile Application for Good
As mission-driven organizations explore how to engage audiences through mobile applications, here is a look into a recent app build that makes it easier for families and educators to access key information that supports young children’s education.
Forum One recently had the opportunity to design, develop, and launch a new Head Start resources mobile app for iOS and Android. Head Start programs promote school readiness of children ages birth to five from low-income families by supporting the development of the whole child by enhancing their cognitive, social, and emotional development. Head Start is housed within the Office of the Administration for Children and Families, under the U.S. Department of Health and Human Services (HHS).
While Head Start was not starting from scratch — they did already have a mobile app online — the purpose of this new version was different. The previous app was simply a mobile version of their website. It contained no native control and no way for the application to interact with other systems, applications, libraries, etc. The new mobile app aims to create an optimized experience that provides early childhood educators, and others involved in Head Start programs, with specific, valuable information and resources. The major need was to have something that makes it easy to access key information on the go (rather than searching through the website), is accessible, and has a solid user interface.
The app itself is built in React Native. This approach comes with a number of benefits. A React Native project embeds a JavaScript runtime that runs the project’s code, which gave us access to patterns similar to web builds during development. Unlike most JavaScript-based frameworks, however, a React Native project does not embed a web browser; the components used by the app correspond to native views and controls. A well-built React Native app is virtually indistinguishable from an app built with native tools. When combined with the framework’s cross-platform features, it allows us to rapidly iterate on a native experience without having to learn two new platforms – Android and iOS – just to implement the project.
The JavaScript engine React Native uses is able to consume npm packages. These packages consist of the usual modules one would use for a React project (for example, Redux and a Fetch API polyfill), but we also installed modules that bridge JavaScript and device-platform APIs. This allows us to integrate features such as add-to-calendar functionality from within our React components, for example.
Building the new native Head Start app
This project involved a lot of players. Forum One worked with the developers of the original app, our client’s web team, and other federal employees from Head Start and their parent agency to define the key goals and needs of the app so that it could truly be a valuable, easily-accessible resource for people who need this kind of information in real-time. On the technical front, there were also a lot of players; as the interface required dealing with multiple data sources, several APIs (application program interface), and a complex multi-person authorizing environment, a smooth integration plan was essential. Our technical team worked to create a system that worked seamlessly, without sacrificing speed or performance.
The app itself is built in React Native. This approach comes with a number of benefits. A React Native project embeds a JavaScript runtime that runs the project’s code, which gave us access to patterns similar to web builds during development. Unlike most JavaScript-based frameworks, however, a React Native project does not embed a web browser; the components used by the app correspond to native views and controls. A well-built React Native app is virtually indistinguishable from an app built with native tools. When combined with the framework’s cross-platform features, it allows us to rapidly iterate on a native experience without having to learn two new platforms – Android and iOS – just to implement the project.
The JavaScript engine React Native uses is able to consume npm packages. These packages consist of the usual modules one would use for a React project (for example, Redux and a Fetch API polyfill), but we also installed modules that bridge JavaScript and device-platform APIs. This allows us to integrate features such as add-to-calendar functionality from within our React components, for example.
Seamless updates from website to app
The content for the Head Start app is managed from within the existing Head Start website, to create a seamless updating experience across platforms. We worked with the Head Start web team to create JSON-based APIs that expose filterable content listings and other endpoints the app can access. Content is managed centrally from within the website’s Drupal CMS, which in turn updates the app in real-time without any need to be pushed out separately. This prevents any headaches that come with attempting to maintain two sources of content where the configuration may begin drifting apart. We created a small access layer that tracks users’ filter selections, which allowed us to rely on the Drupal site for content management, and shift our attention to creating a solid user experience.
The result: a handy tool for educators
The new Head Start app offers many useful features, including:- Quick access to featured resources, policy, news, and events
- Mobile access to the Early Childhood Learning and Knowledge Center (ECLKC)
- A mobile share option for each piece of content
- The option to add events to the user’s calendar
- The ability to save various types of resources to an individual “My Stuff” section for quick access
