Home
eCapture Mobile App

eCapture Mobile App

to : Gunner built an onsite marketing app that functions offline, so promotors could run their campaigns and collect email addresses even without an internet connection.

Showcase & Media

Video Case Study

Post Mortem Discussion

Screenshots

Check out photos of this project

Architectural Diagrams

Check out architectural diagrams of this project

Problem

What was the problem to be solved?

Palm Beach Broadcasting, LLC owns and operates radio stations in Palm Beach County.

The company broadcasts music and entertainment, as well as information on local news, traffic, and weather.

It also offers listeners and advertisers with local marketing resources, as well as provides advertising and marketing opportunities.

The company was founded in 2002 and is based in West Palm Beach, Florida.

One thing all the radio stations owned by PBB does is event marketing; often in the parking lots of music concerts and other similar type events.

The common thread among these venues is the volume of foot traffic, which often renders cell data useless.

"If you've ever been to a concert or a football game, or something like that, you've probably experienced this problem," Gunner Technology CEO, Cody Swann, said. "You have full bars, but you're not getting any data and none of your apps work."

This presented a problem for PBB, which wanted to collect email addresses for marketing purposes electronically, but had no way to save them.

Instead, they reverted to pen and paper signup forms, which were difficult to read and required manual entry after the event; not to mention they were not environmentally friendly.

"They were missing out on so many signups, simply because the papers would get lost or couldn't be read," Swann said. "Not to mention the man hours that went into copying the data into a digital system."

Solution

What was the proposed solution?

Gunner Technology CEO, Cody Swann, encountered a PBB-owned station doing this at a concert and proposed a solution.

"This was the perfect fit for a React Native app with AWS AppSync," Swann said. "The app would function regardless of whether data is being transimitted over the air. If it couldn't get out, the app would store the data locally and then transmit it when the app was connected and could send data out."

And as a React Native app, it would run on any Android or iOS device.

The app would provide a simple interface for users and simple analytics (such as how many email addresses are stored on the app) for administrators who could, at any point, push all email and other data from the device to the cloud.

Challenges

What challenges arose during the project?

Fortunately, AWS AppSync with Apollo took most of the complexity of syncing local and remote data out of the development of the app.

The team did encounter one challenge, which was satisfying the request that the app be able to be skinned by administrators and also change the opt-in language and branding on an event-by-event language.

Technical

What was the technical approach to the project?

The first thing the team had to do was build out some simple wireframes using Adobe Photoshop.

These were very basic and included three different screens:

  1. Opt-in screen
  2. Confirmation screen
  3. Admin screen

"The UI was never the complicated part of this app," Gunner project manager, Caitlin Walton, said. "We just needed some clean forms and messenging."

Once the wireframes were approved, the team moved on to building a static app that implemented the design.

"Unless there is good reason not to, we use Google's Material Design, Design Framework when building apps," Gunner UI designer, Cory Schneider said. "Millions of people out there are already familiar and comfortable with it. So why redesign a stop sign if everyone recognizes it?"

The team used the Open Source library, Material UI, to implement the Design Framework.

Once the moving parts were in place, the team moved on to wiring it up.

For that, the team used AWS AppSync with AWS Amplify.

This combo creates an integrated stack consisting of Apollo as a GraphQL client, Amazon DynamoDB to persist data, Amazon API Gateway to front requests to Node.js AWS Lambda functions and Amazon Cognito to authenticate those requests.

Apollo would ensure the data was persisted locally and sync it remotely when able to do so.

The actual emails were sent to the participants using Amazon SES.

Finally, in order to let admins skin the app, the team provided an interface that would upload HTML to Amazon S3 and serve it to the app via Amazon CloudFront.

Management

What was the project management approach to the project?

The team used an Agile Scrum approach to develop this app.

Beginning with a set of requirements, the team performed a one-week Research Sprint to create a comprehensive set of user stories and chores and assigned Effort Points to each.

These were all placed in the project backlog where the project manager added up the sum of all Effort Points and divided that number by the team's average sprint Velocity.

This allowed the team to create a projected timeline as each sprint is one-week long (total Effort Points divided by average Velocity equals number of weeks of development).

The team generally allotes half time for end-user testing and final deployment, so if a project requres two months of development, the team will estimate three months total for development, testing and launch.

Architectural Description

What platform was built for this project?

Gunner created a Serverless architectural infastructure on Amazon Web Services to host this application.

The team used the Serverless framework to manage the disparate parts, including AWS API Gateway, AWS Lambda, Amazon Cognito, Amazon DynamoDB and more.

For deployments, the team used a continuous deployment, DevOps based-process that leveraged AWS CodeBuild, AWS CodeCommit, AWS CodeDeploy and AWS CodePipeline in a Git-based workflow.

Jest was used in the deployment pipeline to run unit and integration tests against the code base and any failures would halt the deployment process.

The team used Yarn as the package manager and Webpack to bundle and transpile the ES6 JavaScript to ES5 JavaScript.

Lessons

What did you learn from working on this project?

This was an extremely compressed deadline, so the team learned the importance of creating an exhaustive list of user stories.

There simply wasn't time for the team to keep adding new scope.

Benefits

How did this project benefit the client?

PBB has deployed the app to all of their radio stations and has been able to save roughly 10 hours a week they previously spent on data entry.

Additionally, they save roughly $200 per event on print costs and have reduced their carbon footprint significantly.

Why Gunner?

Why was Gunner selected for this project?

PBB didn't even know this was possible until Gunner suggested it, so we had a pretty good inside track to getting the gig.

That said, Gunner had done similar work in marketing for Country Shore so there were some case studies to show PBB as illustrations.

Proficiencies

What tools, techniques and methodologies were used on this project?

[object Object]

Adobe Photoshop

Photoshop is Adobe's photo editing, image creation and graphic design software.

[object Object]

Agile

Agile software development refers to a group of software development methodologies based on iterative development, where requirements and solutions evolve through collaboration between self-organizing cross-functional teams

[object Object]

Amazon API Gateway

Amazon API Gateway is a fully managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale.

[object Object]

Amazon CloudFront

Amazon CloudFront is a content delivery network offered by Amazon Web Services.

[object Object]

Amazon DynamoDB

DynamoDB is a nonrelational database for applications that need performance at any scale

[object Object]

Amazon Guard​Duty

Intelligent threat detection and continuous monitoring to protect your AWS accounts and workloads

[object Object]

Amazon Inspector

Automated security assessment service to help improve the security and compliance of applications deployed on AWS.

[object Object]

Amazon Route 53

Amazon Route 53 is a highly available and scalable Domain Name System (DNS) web service.

[object Object]

Amazon S3

Object storage built to store and retrieve any amount of data from anywhere

[object Object]

Amazon SES

Flexible, affordable, and highly-scalable email sending and receiving platform for businesses and developers

[object Object]

Apollo

Apollo binds data to your UI with the ultra-flexible, community-driven GraphQL client for React, JavaScript, and native platforms.

[object Object]

AWS Amplify

AWS Amplify is a toolchain which includes a robust feature set for simplifying mobile and web application development.

[object Object]

AWS AppSync

AWS AppSync automatically updates the data in web and mobile applications in real time, and updates data for offline users as soon as they reconnect.

[object Object]

AWS CodeBuild

Build and test code with continuous scaling.

[object Object]

AWS CodeCommit

AWS CodeCommit is a fully-managed source control service that hosts secure Git-based repositories.

[object Object]

AWS CodeDeploy

Automate code deployments to maintain application uptime

[object Object]

AWS CodePipeline

Continuous delivery service for fast and reliable application updates

[object Object]

AWS Lambda

AWS Lambda lets you run code without provisioning or managing servers.

[object Object]

AWS Shield

AWS Shield is Managed DDoS Protection for platforms and services built on AWS.

[object Object]

ES6

The next version of JavaScript

[object Object]

Git

Fast, scalable, distributed revision control system

[object Object]

GraphQL

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

[object Object]

JavaScript

JavaScript is the world's most widespread programming language, powering the Internet.

[object Object]

Jest

Jest is used by Facebook to test all JavaScript code including React applications.

[object Object]

React Native

React Native is a framework for building native mobile apps with React

[object Object]

RxJS

Reactive Extensions for JavaScript

S

Scrum

Scrum is a framework for project management that emphasizes teamwork, accountability and iterative progress toward a well-defined goal.

[object Object]

Serverless Framework

Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more

[object Object]

TestFlight

TestFlight makes it easy to invite users to test your apps and collect valuable feedback before you release them on the App Store.

[object Object]

Webpack

Webpack is a module bundler

[object Object]

Yarn

Yarn is a package manager for JavaScript