Building a Real-Time Airline Application Using Adobe Experience Platform, Adobe I/O Runtime and Project Firefly
The Adobe Experience Platform has tremendous potential to transform Adobe Marketing Cloud platforms. So, to showcase the full potential of Adobe Experience Platform, we recently created the very first demo website, featuring the fictitious Netcentric Airlines. An incredibly talented team of our experts came together to produce the demo. Alongside it, we also developed services using Adobe I/O, a back-office interface and launched a responsive demo website that used machine learning intelligence to manage offers and real-time events, and handle triggers and notifications.
The demo leverages the very latest in Adobe technology, Project Firefly. Firefly is a complete design, application, and runtime framework for building third-party cloud-native applications that extend the functionality of several Adobe Experience Cloud solutions, and it runs serverlessly on Adobe I/O Runtime. This technology gives Adobe’s customers full developer toolsets, code generators, and pre-built components, meaning productivity is increased and time to value for application development is improved. Project Firefly also uses industry standards where possible, including Jamstack, single page applications (i.e. React) and open-sourced Adobe I/O CLI, to ensure the framework can be picked up and used by developers instantly. What’s more, by building tools as open-source projects, Firefly enables developers to extend these tools, contribute to them, or just learn how they work.
With this stack, we were able to build a data-driven application, which leverages real-time data, within six weeks.
Our application structure
The application we built consists of two UIs: one for the airline website itself and one for controlling the demo. The website is implemented as a SPA using React and any data needed is obtained via actions implemented using the Firefly Experience Platform SDK and running on Adobe I/O Runtime. This also applies to the data and business logic needed by the back office application.
It’s safe to say the development for this back office UI took our team on a bit of a journey. We started out using custom React without Project Firefly. Later, when we migrated to Project Firefly. We developed components like Card and Dialog with Adobe Spectrum CSS, which allowed us to control the demo, for example, by creating a new set of demo data/profiles. As more and more native components were added to our Firefly framework, we migrated our backend UI to leverage pre-built React-Spectrum components.
The result was a fantastic-looking back-end UI, based on Firefly components, which was perfectly integrated into the Adobe Experience Cloud console and appears to be a native part of Experience Cloud. This will certainly help business users who are already familiar with other Adobe Experience Cloud solutions.
Meanwhile the deployment and build from our git repo to I/O Runtime happens using Adobe's latest github actions.
Conclusion
Overall, creating the "Netcentric Airlines" demo you see above proved to be a very dynamic project. We migrated from a custom to a Firefly UI, from API to SDK, and from Jenkins to Github, with all these challenges resulting in greater satisfaction and rewards for our team members.
Firefly is a great framework for any kind of marketing tool/UI that integrates Adobe Experience Cloud solutions, and Adobe I/O Runtime proved to be ready for production projects.. Project Firefly is currently running a Developer Preview prerelease program and is implementing developer feedback on a continuous basis. We can't wait to see what's next for Firefly, and we’re looking forward to using this stack in many of our Adobe projects.