Joe Hudson Collision Center Mobile App

Joe Hudson Collision Center Mobile App

Background:

The Joe Hudson Collision Center has a repair tracking system that allows customers to check the status of their repair by using a form on their website. They decided they wanted to make it even easier and have a mobile app developed to perform the same task. I worked in conjunction with Smart Innovations to bring it to life.

 

Download:

The JHCC App can be found on iTunes Store  and the Android Play Market.

Additional Requirements

  • The existing site is built with WordPress, so having a management back-end built into WordPress was fairly important.
  • The app needed to be available for both Android and iPhone
  • The app needed to receive notifications when the status progresses to the next phase
  • There needed to be buttons within the app:
    • to call the location where the vehicle was being repaired
    • to visit the website
    • to visit the feedback form

Technologies Used

The Backend

Obviously, WordPress was involved, but I used the JSON API plugin and created a separate plugin with a custom controller to deliver:

  • The list of locations
  • The list of Phases, along with details for each
  • To receive/respond to the request for the repair status
  • To obtain the Push Messaging token for the device

For the backend UI, I used some helper classes created by Raz Ohad (bainternet)

For push notifications, the server-side setup for Android was fairly simple – a good php example can be found on Github.  You just need to get a couple api keys and you’re ready to go. For Apple Push Notifications on the other hand, you have to jump through a lot of hoops. I ended up using the ApnsPHP set of classes. There is also a link there with a fairly detailed set of instructions on how to generate the necessary certificates (you need two). Getting the certificates right was probably the hardest part about it.

I also created a panel for debugging to list the mobile devices that had contacted the service and send a test message with the push of a button.

After that, I set up a wp cron schedule to check each reapair that each device had originally requested twice daily and send a notification to the device if the status had progressed since the previous check.

The App

cordova_256My initial plan was to use Adobe Flex Mobile, since I’ve had some experience with that platform, but I had heard some good things about Phonegap/Cordova in regards to its flexibility and ease of use, and so while it wasn’t quite as graphical as Flex, there seemed to be a lot more extensibility with it. There are over 200 plugins in the official plugin registry, and there are many others not in the official registry. If you’re building a mobile app that requires multi-platform support, you should really take a look at phonegap/Cordova.

 

angularI also found AngularJS very useful to minimize the amount of code I had to write for the basic UI, leveraging html templating more for the layouts.

 

 

 

Phonegap plugins used:

PushPlugin for iOS/Android Push Notifications
Notifications for more configurable dialog boxes.
InAppBrowser to allow links to be opened in the native browser and to allow phone dialing
SplashScreen for better control of the splash screen

 

Updates:

Later, it was decided to allow users to track multiple vehicles int the app at the same time, also, we moved to actual real-time notifications, which involved adding another function to update the repair status.