Building an Event App: Ionic’s first Mobile Application for the Enterprise App Summit 2021
Leveraging Ionic 6, developers created the first app dedicated to Ionic events. The whole process, from concept to deployment took less than two months.
To put together a large-scale remote, online event for attendees and speakers from around the world takes careful planning, time management, and an abundance of creative problem solving. When the events team wanted to do something a bit different for the second annual Enterprise App Summit (EAS), it required even more team collaboration.
“We wanted to build an app that gave attendees more information about the speakers, a schedule of events, and a swag giveaway,” says Matt Netkow, head of product marketing at Ionic and member of the EAS event planning team. “We wanted to show attendees how building with Ionic products can really look. And we only had about a month to do it.”
The second annual Enterprise App Summit took place December 8, 2021 completely online. Thousands of enterprise tech leaders across various industries registered, and the day consisted of 13 sessions from industry experts from many companies including Amazon, Volkswagen, and T-Mobile.
With a roster this size, creating an event app with multiple moving parts—including speaker bios, photos, session abstracts, event calendars, and notifications—would traditionally be very difficult to have solidified in just a month.
We wanted to be sure we could quickly and easily deliver event changes to the app on time.
Matt Netkow, Head of Product Marketing at Ionic
Real-time updates under a short deadline
Liam DeBeasi, Ionic’s software developer and Ionic 6 project lead, worked with Ben Sperry, chief design officer and Ionic co-founder, and Netkow on the concept of the app.
Built using HTML, CSS, and Javascript, the Ionic EAS app leaned on Ionic 6—the newest version of Ionic’s open source UI toolkit. The app brought together the best of Ionic 6’s new features and Ionic’s other powerful tools, including one that offers quick update and bug fix delivery.
“Last-minute changes to event schedules, speaker lineups, and talk topics are all part of putting together a live event,” says Netkow. “We wanted to be sure we could quickly and easily deliver event changes to the app on time.”
The developers of the Ionic Enterprise App Summit app used Appflow—Ionic’s CI/CD platform—to ensure changes were easy to make and deploy.
With Appflow, the developers were able to build the EAS app using Native Builds, a feature within Appflow that makes it easy to build native app binaries for iOS and Android in the cloud.
Along with Native Builds, the developers used another Appflow feature—Live Updates—which allowed them to update the UI, add speakers, and edit session abstracts remotely and in real-time. Since the content is web content and not native content, the developers could bypass going through the app store to make changes.
“We added a few speakers and changed the abstract description of one of the sessions the morning of the event,” says Netkow. “We wouldn’t have been able to update the app so quickly and within the same day without Appflow.”
Customized notification warnings
Another exciting feature the app developers used with Ionic 6 was the sheet modal. Mostly seen in iOS, this modal appears in the bottom forth of the screen, and acts as a type of popup for users. Sheet modals can serve as a way for businesses to communicate with their customers about business announcements, app functionality, permissions, and other important information.
Traditionally, modals appear on the entire screen or take up three-quarters of the screen real-estate. With Ionic 6 sheet modals using Capacitor—Ionic’s cross-platform native runtime for web apps—engineers can choose how long or short to display the modal to better fit with the company’s UX design and provide a better customer experience.
The developers of the EAS event app chose to use sheet modals in a slightly different way.
Traditionally, developers can customize the messages that iOS and Android show customers when asked to enable camera permissions, bluetooth permissions, and others. However, push notification permission prompts are not customizable.
It is always good to have your own version of that prompt before showing the native permissions prompt.
Matt Kremer, Head of Product at Ionic
“For the Enterprise App Summit app, I chose to use the upgraded Ion sheet modal as a way to explain to users why turning on notifications would be beneficial to the app experience,” says Netkow.
Matt Kremer, head of product at Ionic, agrees that a warning before the pop-up that requests notification permissions is essential.
“It is always good to have your own version of that prompt before showing the native permissions prompt,” says Kremer. “Once a user chooses not to allow notifications, it becomes very difficult to get them to ever turn on notifications again.”
Asking permission before the OS notification prompt and storing that setting in Ionic’s Secure Storage—a cross-platform local database system—creates a user-friendly experience and an easy solution to encourage customers to opt in to notifications.
The push notification capabilities were enabled using Firebase—a Google product that provides a cost-free connection between servers and devices and allows developers to deliver and receive messages and notifications on iOS, Android, and the web.
Front-end notifications capabilities
In the EAS app, once notifications are enabled, attendees can set reminders five minutes before sessions begin. This feature is easily configured to pull from the operating system and not stored in the server, which allows for minimal load time and complexity.
“Enabling notifications requires a level of trust between the company and the app user,” says Kremer. “It’s important for businesses to provide crucial information to users, like event times and schedule changes, in a way that is not invasive or overwhelming.”
The notification dialogue is also completely customizable to include any kind of information that needs to be relayed to the app users.
“Configuring notifications on Ionic 6 requires just a few lines of code and is fully customizable to the company’s messaging and style,” says Netkow.
Building the Enterprise event app quickly with Ionic
The whole process, from concept to deployment took less than two months. And with each upcoming event, the app can be updated, enhanced, and optimized.
The Ionic 6 updates also provided the developers with the features necessary to build functional features quickly. One feature improved with Ionic 6 and used in the Ionic EAS app is dark mode.
“With a simple CSS change, the primary colors on the app can be easily swapped to different colors to transition from light mode to dark mode,” says Netkow. “That saved us from needing to configure a dark mode setup.”
Features like these saved the developers countless hours needed to build native apps from scratch.
The code for the app is available to use, and the iOS and Android apps can be downloaded for free in the app stores.
iOS: App Store
Android: Google Play
Web (hosted on Vercel): https://eas21.ionic.io
OSS Code: https://github.com/ionic-team/eas-2021
Netkow has also written a blog detailing the thought process behind developing the app and the tech used.
“With this app, we now have a great foundation for Ionic events,” says Netkow. “The possibilities for future iterations are endless.”
About Ionic
Ionic is a leader in enterprise mobile app development, with 5 million developers worldwide and thousands of enterprise customers who use Ionic to build mission-critical apps for their customers, both external and internal. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.