Jailbreak Mobile App – From Idea to Product Release


This community mobile app is a cross platform mobile solution built with Xamarin, Xamarin.Forms, on a Windows Azure Mobile Service (WAMS) ASP.Net Endpoint with  SQL Azure Backend. The solution is however frontloaded by Azure API Management as a Product API with Subscription Key access.  The management of the App in the Back Office is handled through a Node.JS Single Page Application (SPA). IDE’s used in this solution was Visual Studio and Webstorm and Xamarin Studio. Time to market 6 weeks with Native Applications for iOS and Android. Get the App today using the QR Code at the bottom of the post or searching the app stores for “jailbreak brewing” or “fabian williams”.

Why Read this Blog Post? Who is it Intended for?

This blog post takes a different approach than my standard blog posts.

  1. It is Video Based with Code referenced in GitHub
  2. It is broken up in the following Key areas taking an approach of (1) End User Knowledge, (2) Business Decision Maker Art of the Possible Narrative, (3) Technical Decision Maker Geek Out Fest (4) Deep Dive into Code Build

I wrote this blog to evangelize Microsoft Technologies, there is a reason “ALL” roads lead back to Azure; that is to say, the Database Backend (was) MongoDb Database as a Service (DBaas) through MongoLabs hosed offering in the Azure Marketplace until the recent Driver Update caused me more work than I needed, now it is in SQL Azure.  The middle tier i.e. the Web Service (Web API) is an WAMS solution that is a “product” inside Azure API management which is only accessible via a subscriber policy.  To finish this off, I built the Mobile Front End using Xamarin, specifically Xamarin.Forms which is geared towards Data driven Applications.

Part of that evangelism is also for Xamarin, just last week end (October 24, 2015) I spoke at a Xamarin Dev Days in Washington DC.  As a part of my delivery I spoke on the fact that after only 1 year of getting into Mobile Development & 10 months of learning Xamarin, I now have not 1 but 2 Apps in the App Store. This Jailbreak App is my second App in the Store and using Xamarin.Forms I was able to get approximately 95% code re-use from my single Shared Code Base to output 2 Native Application, one for Android and the other for iOS. This product is awesome and the support and learning aids are phenomenal. If you want a way to dominate Mobile Dev, get Xamarin.

Finally, if you are like me, coming from a .NET/SharePoint focused development environment and want to keep up [keep pace] with where the industry is heading, you need to get behind Satya Nadella “mobile first – cloud first” mantra, its mine now. When I think of development, I think how can I make my solution portable to mobile because if you solve the mobile problem, you are solving all the other problems you will most likely face and you end up with a more responsive application that is lighter, faster, and more in tune to the expectations of your end users.  In that same vein, I decided to build the Administrative Console using Node.JS to firm up my JavaScript skills both Server Side and Client Side using a SPA to do all the management for beers and staff members utilizing the same Mobile Endpoint in Azure API Management.

Sounds like something you would be interested in hearing more about, I will give you two ways to navigate this:

  • Go your own way, a la carte
  • Follow me as I narrate and add videos where they fit in

Want to got at your Own Pace?

Depending on where you are in your own professional development, you may want to skip ahead, adjust the order in which you watch this or quite honestly don’t have an interest in. In view of that, I have broken up the video series in a manner that tells its own story. Please see below for the narrative and link.

1.       What problem does the App Solve? & Walkthrough from an End User perspective on an actual Mobile Device  [12 mins 11 sec] — https://www.youtube.com/watch?v=r_u6KWf4vVw
2.       How does the App Owners Back office Staff Interact with App Management [12 min 19 sec]– https://www.youtube.com/watch?v=3NyG0taY8Rc
3.       Technology Make Up – Geek out on how the App works [8mins 41 sec]– https://www.youtube.com/watch?v=28lFpIyXrBU
4.       Technology Makeup — How the Admin Utility was Made [10 mins 44 sec] — https://www.youtube.com/watch?v=O44BiOJAYBg
5.       Code Development of the Mobile App [17 mins 12 sec] — https://www.youtube.com/watch?v=FPK6FteDUOM

Take the Guided Tour then…

Ok, so to frame the conversation about this Jailbreak story in a narrative that will make sense with the videos but not take away from it, I will break it out into section headers with call outs to elements in the video that I need to emphasize or things that you need to see in print to pivot to other areas.

Why build this App?

While some may build an app for building an app’s sake, in order to have an effective app, you must be solving a problem or at the very least adding value to something. This app does that in a few ways.

  • It answers questions patrons may have before they decide to go and visit the brewery – things like what is on Tap, what food trucks or events will be there on any particular day, etc.
  • It helps the proprietors by way of engaging with their patrons at any time and at any day, it also promotes other social experiences through its Untappd Integration

To learn more, please see this video here

How do you apply back-office management to the App

Now that the app is built, unless you want to see your app go by the way side into obscurity, or loose its relevance, you need a constant stream of “Fresh Content”, now mind you we could have build a ‘management app’ or extended the current app to support management and added authentication to security trim that feature or capability, but I decided to go another way. I created a Single Page Web Application (SPA) using Node JS as a back end and the UI with Express and the Jade templating engine.  The essence of the app is to allow CRUD Q of content i.e. the ability to Create Read Update and Delete Beer and Staff (employee) data. The premise being that frequently there may be the need to put a new beer into the system as it comes online, you may also want to move beers in “on Tap” or “not on Tap” trigger. From a staff management perspective, we have a screen that has “Meet or People” that scrolls through and shows the staff members, their bios and titles; here too you will want to do CRUD operations as well.

To see how that works from a End User perspective, check out the video here and

To see how it was built using Node JS, Express and Jade, check out the video here

Art of the Possible Conversation

If you are a Business Decision Maker (BDM) and want to get a 10’000 view and get a ‘what is possible’ conversation going to determine if this technology is right for you, then the video included here will be of great interest. It runs through all the workloads in Microsoft Azure that makes this solution possible. listed here are the key ones

  • Microsoft Azure Mobile Service (Cloud Service, Database and Mobile Solution)
  • SQL Azure (but earlier on I used MongoDB inside MongoLabs DbaaS offering in the Azure Marketplace)
  • Xamarin
  • Azure API Management (this is a front end that serves as an obfuscation for the Azure Mobile Service Web API endpoint.

To see the art of the possible check out this video here

The Mobile Coded solution in Xamarin

Ok, all this is a lead up to the fully coded solution. Id be remised if I didn’t say that using Xamarin to write this mobile application has made this entire experience not just a pleasure to do, but it was not only stress free, but the support you get from the Xamarin Forums, using the education benefit you have from Xamarin University and the fact that I was able to use my C# skills to get almost 95% code re-use allowed me to have a REAL world mobile application done for both Android and iOS done in almost 6 weeks of effort. While this video will focus only on my Jailbreak Mobile Application,

To see the video on how the Xamarin solution was built, you want to check out this video

For other late night reading

I have a few blog post that cover how to use Xamarin on my blog site

Permalink to Xamarin.Forms – Basic Stuff to WAMS Expert

Permalink to Xamarin.Forms – Basic Stuff to WAMS Expert–Part 2

Permalink to My recommended way for ALM in Mobile Development

https://github.com/fabianwilliams

More Stuff

If you click on this QR Code it will take  you to either the Apple Store or the Google Play Store.

image

 

Summary

Well I hope you find value in this, if you have any questions or comments, please leave me a note below.

Leave a comment

Your email address will not be published. Required fields are marked *