Hacking An Augmented Reality App using the Prolific AMS
Sagar Natekar
Sagar Natekar

Hacking An Augmented Reality App using the Prolific AMS

Sagar Natekar, iOS Engineer

Hack Days are a Prolific tradition and we recently held a mini hack-day in the San Francisco office. The themes of the day were “Optimizing Work Life” (increasing developers’ efficiency) and “Work Life” (office culture). Out of the four teams competing for honor and glory, three teams chose to go with the latter “Work Life”, while the fourth chose to “Optimize Developer Efficiency.”

The Idea

Excited by the prospect of AR debuting in iPhone 8, my team decided to build an AR app. With just five hours from ideation to working prototype, we had to narrow down the scope quickly. Our coworkers in the SF office have certain favorite spots to frequent for happy hours, coffee and lunch, so we decided to focus our efforts on an app that would show these locations as annotations overlaid in familiar AR fashion over a camera view. The app would let users select a particular category in a master view, then the AR overlay detail view would show all the locations that fall under that category.

In addition, it would also display points-of-interest on our office floor, such as office supplies, bathrooms, etc. to help our colleagues visiting from the New York office. Our inspiration was the Monocle feature in the Yelp app, but we decided to cut out the noise and focus on a Prolific-curated guide of locations inside and outside of our office. We named our app “ProPinQuity” to emphasize “proximity”.

Implementation

Team Members Left to Right: Sagar (Me), Daniel, Rolando, Ranjini, Linda, Zameer

iOS

For the AR portion of the app we integrated the HDAugmentedReality library. It takes care of displaying the overlays. All it needs are a set of locations, represented as latitude/longitude pairs, as well as a view to show for each coordinate. The views need to be lightweight (i.e: programmatic with no complicated auto-layout requirements), since the library will take care of redrawing them as users change location and rotate or tilt their phone. HDAugmentedReality also provides options to customize the number of annotations shown on the screen, smoothing factor, maximum annotations that can be stacked vertically, etc.

We also wanted to show a star-rating for the places of interest and so used the Cosmos library for that purpose. It is an open-source control that lets the user easily customize attributes such as size of the stars, color to be used to fill them, whether to show fully-filled stars only, etc.

Data

The next challenge was data for our app. Since we wanted locations near our office, our options were to either query the Yelp/Google Places APIs and filter out nearby locations, or have the locations hardcoded within the app (ouch!)…or work with a tool that is built in-house by Prolific – The App Management System (AMS).

What is the App Management System (AMS)?

Prolific’s AMS is a SaaS product that empowers our partners to manage their mobile app’s content and user experience through an easy-to-use UI and a mobile-optimized API. Once a partner is onboarded using the AMS, they can easily manage the content in their app and even the app functionality itself, without having to jump into the code or push a new release.

While the AMS typically gets us up and running with a RESTful API within a few hours, this was Hack Day! We needed to solve problems and crush blockers in a matter of minutes. Therefore, we decided to use an existing AMS demo account to house our custom mobile content, to provide the location data we needed in the app. By getting a bit creative in defining our data model (to leverage an existing API structure) we were able to save valuable time and focus on what matters – The User Experience.

To achieve our design goals, we first aligned requirements between Design, iOS, and Data sub-teams on a minimum data set needed to support our MVP:

  • Name
  • Category
  • Address
  • Rating
  • GPS Coordinates

We then looked to the existing entities in the API structure and defined a mapping structure for uploading content into the AMS, which was then consumed by the iOS app. We converged on a deep link definition as follows: category://{categoryName}.

This allows the app to navigate from the location category page to the AR view with a filter on categoryName.

For locations we repurposed a “feature” entity in AMS which contains the following fields: {text, image, link}.  We defined the following mappings:

  • text → {categoryName} | {location Name} | {locationAddress} e.g.:  happyhour|Tempest|431 Natoma St, San Francisco, CA 94103
  • link → loc/{latitude}/{longitude} e.g.: loc/37.781838,-122.4134154

With a little parsing on the content we were able to quickly render elements within the AR view.

Design

While programmers like myself were busy fetching data from AMS and building out the app, the design team defined the UX, with associated icons required for the category page and the app itself. All of this came together in the form of design specs for the development team to consume using Zeplin, which is a collaboration tool for designers and developers. It is an online repository that allows designers to upload their wireframes and add notes such as colors and margins for each element, that the whole team can contribute to.

Here is what we were able to come up with in short order:

Left to Right: Category View, AR View

Where to go from here?

Looking ahead, the AR library is unfortunately restricted in its ability to support altitude. Finding a replacement or forking the library to add that functionality is our next priority. Additionally, this prototype could easily be extended using the Prolific AMS to include points-of-interest near our New York office. That would enable a network of users from both offices. One option for keeping data in sync would be using a real time database provided by Firebase. The possibilities are as endless as the points of interest we surface conveniently for our teammates.

This hack day season opener was an exercise in efficient cooperation and collaboration among team members across disciplines who do not work together every day, to create something exciting and useful in a matter of hours by leveraging an invaluable resource for API and content management.