While everyone is getting used to working remotely, staying cautious and testing our preparation to pass this phase at Axway, The Axway Griffin Innovation Lab hosted a #BetterConnected Virtual Hackathon to keep us engaged and rally around to put creatively our time together to build something better. Together. We decided to participate in this challenge and created a platform to promote and encourage a strong sense of community around Axway employees by using the evergreen sport of running—we called it FiTogether.
Here are some goals, and requirements we set as part of the brain-storming and following the philosophy of API first:
📺 Ability to host “Events” like a Weekend Challenge Event and Participants to sign-up for the Events.
📺 Allow all participants to view each other’s time slots in a single view.
📺 Provide an option for everybody to participate in the challenge as a runner, walker or a cheerer (Social Media FTW!).
📺 Allow runners to connect to their devices that already keep track of their physical activities. Enter the Strava platform and the power of APIs, and Integration.
📺 Link the users’ activities to the event being hosted and data modeling that needs to be done to accommodate that.
📺 Provide a single leaderboard–FiTogether Dashboard with live updates via activity feed, and leaderboards over distance, time over different geographies.
📺 Use Axway Federated Identity to ensure we are using best in practice security controls.
📺 Deliver the MVP of our Idea in one week!
API First Design
With our API First design mantra in mind, we started creating mock APIs using stoplight.io. And using those APIs as the base for the building the front-end of the application using React.
Implementing APIs
We implemented our APIs using Spring Boot framework, which allowed us to quickly ramp-up the development effort, with ready-to-use plugins for Elastic Search (our chosen datastore) and various other Spring framework components. Bonus effort from Rathna Natarajan to create a Jenkins pipeline to write code –> checkin/PR/merge –> build –> deploy the code automagically allowed us to collaborate quickly and test our application especially when all of our team was HFH. More on this down below.
Publishing and securing APIs
Emphasis was laid on following the API development best-practices, i.e. our app provided a Swagger document that was exposed via the AMPLIFY Central to secure and govern the lifecycle.
API proxies were created that eventually provided a unified way of exposing these endpoints to consumers i.e. our Application Users.
We created several APIs that needed to be published and secured. We used Axway AMPLIFY™ Central for creating the proxy to existing APIs and published them to the Axway AMPLIFY™ Unified Catalog.
User Acquisition
One of the key aspects of our application was to make sure it fitson into the Axway Culture well. We achieved that by integrating the app with our Identity Manager/Axway ID, and our internal Instant messaging/Productivity tool i.e. Office 365-Teams. This helped the adoption of our app quite well. AMPLIFY helps developers to build these integrations, especially, with Office-365 Integrations and the likes in no time.
Connecting to Strava (Third-Party App) via APIs
For our MVP, we zeroed in on Strava platform to capture our Users Activities. Providing a simple “Connect to Strava” option for each logged in user allowed FiTogether app to capture the Users’ activity as and when they get published. Strava platform offers webhooks that provide a constant stream of information respecting the Consent/Privacy of the Athlete.
We didn’t want to implement fail-safe/fault-tolerance mechanisms to our MVP version of the app, but that’s something we are thinking about as a next step. Stay Healthy at Axway Group has some interesting ideas on using the Service Mesh and in this regard, and this might be a great collaboration of ideas. Check out the following link on how to connect to Strava APIs.
Tying it all together—the User Interface
We started building the user flow diagrams and built the UI components using the React. We relied on React to build quickly the front-end of the application using the mocks APIs we created using stoplight.io to get started and eventually updated with the APIs published in API Central.
Creating the Activity feeds in Teams
Now, we need to push the activities performed by the users into the Microsoft Office 365 Teams as a status feed [Cards]. We used the AMPLIFY Integration Builder. Integration Builder has a catalog of 200+ pre-built connectors for almost all the popular cloud apps/services that helped us accelerate our integration efforts and we were able to integrate with Microsoft teams.
A Sample notification that was sent to the MS-Teams looks like this.
Mail Notifications
Of course, we all love reminders and notifications. Integration Builder to the rescue again, to reduce the lines of code that we must write. We used the Mail connectors to send a notification upon registration for the event, and a calendar reminder for the time of the run, etc. It was simple and to the point. One future extension could be to provide in-app notifications and unsubscribe to email notifications to tie comprehensively the FiTogether app with services like MailChimp.
Reporting Dashboard
The data in all its glory. This was the biggest feature, that received a lot of rave reviews, and brought the gamification flavor to our app. A natural sibling to the Elastic Search is Kibana from the ELK family. We were able to build simple, and quick dashboards in Kibana to show various data points that were collected, and aggregated them over the region, activity type and computed leaderboards.
The tag clouds provided a unique view into the most active Axwegian and had drill-down capabilities. We have some serious Endurance Athletes at Axway—it was a lot of fun to see the activity feed throughout App’s pilot phase. A logical next step for this aspect of the idea would be to package this nicely in a mobile application—giving the consumer what they want.
To promote openness, something that we take seriously, we would love to see your collaborations, and suggestions/critique—the code is available on GitHub. For complete details, Check below:
- Code Repository https://github.com/rathnapandi/runners
High-level Architecture
With AMPLIFY providing the power, we were able to create the entire FiTogether app in a week. Further, we can host a virtual distancing challenge within Axway globally.
Collectively, over the weekend, Axwegians went the long distance from Phoenix to SFO to make FiTogether a reality. By acquiring new tools and having fast implementation that took place within a week was a challenge. It required countless hours and teamwork. Working with a nosql database and normalizing the data was difficult but once we learned the characteristics needed, the results were amazing.
We created visualizations and dashboards which were very useful and helped motivate the team in real-time. With our culture of remote work at Axway and our adoption of effective collaboration tools like WebEx, Teams and Syncplicity, we are prepared to maintain our efficiency during this time.
Learn more about Fit Together: How we hacked together a dream
FiTogether Squad: Roland Royer, Chandu Manda, Rathna Natarajan, Sridhar Chandrasekaran, Abhilash Chavala