Mapping client success in a mobile environment – a case study and tutorial

Mobile Development, Mobile Strategy Comments (0)

Recently, Float Learning was approached by a client to develop an iPad application for a trade show that allowed customers to learn more about their product. The basic premise of the application was to allow the customer to select a region of the country, after which they would be presented with a digital brochure (in pdf format) detailing the company’s product offerings for that region.

In the past, this application had been developed as a standalone kiosk with a touch screen interface that allowed customers to interact with the map in an intuitive, engaging manner. Among the key features of the application that the client wanted to retain were the ability for the customer to touch and drag the map as a navigation mechanism, and to zoom into the map for a detailed view. We wanted to share this experience with you and also provide some insight on how we did it, and finally share the basic code example that was used as the foundation for the iPad application.

We at Float felt that this was an ideal opportunity to leverage the unique capabilities of the iPad to not only meet the requirements of the client in terms of the base functionality of the application, but to also develop it in such a manner that customer contact would be greatly enhanced. In short, we wanted to develop a custom iOS application that would allow representatives to roam the trade show floor with iPad in hand and present customers with the application, increasing face-to-face interaction with the customer. Additionally, we wanted to take advantage of the connectedness of the iPad device, and add functionality that would allow representatives to email a copy of a selected pdf resource to a customer’s email directly from the application. This allowed our client to show great, on the spot customer service, while negating the need to print thousands of brochures to be on site at the show.

In architecting our solution, we wanted to make smart use of existing components in such a way that we could deliver the full set of functionality the client was requesting while at the same time keeping development time to a minimum. One of the key decisions we made in this regard was to leverage the UIWebView component to handle the majority of the map navigation interface. The UIWebView allows you to load in an html page into your application, with the UIWebView itself managing iPad gestural commands such as touch and drag and pinch and zoom. Using this method allowed us to implement the touch points of the many regions of the map using a tried and true and a (relatively) easy to implement method – an html image map. Looking at the UIButton to launch the associated regions pdf document.

With the map navigation managed this way, the next task was to handle the “taps” on the image map to launch the associated pdf within the application. While the UIWebView detects touches “out of the box” on <a href> elements, it effectively keeps those  touches within the UIWebView – that is, it will attempt to navigate to the URL pointed to by the a tag within the UIWebView instance. While this fulfills the base requirements of the standard component, we needed to find a way to intercept taps on the map and handle them within the overall application to launch the associated pdf document. To do this, we turned to a neat trick posted by the folks at Teton Tech. With our MapViewController being defined as a UIWebViewDelegate, we can define a method, shouldStartLoadWithRequest, that will be called whenever a user taps an element that initiates a load request (in our case, tapping one of the image mapped regions), receiving the URL being loaded as a parameter. Returning ‘NO’ from this method will prevent the web view from performing the default action associated with the component – that is, loading a web page.

To take advantage of this interaction between the web view and the overall application we specified the href attribute of each of the mapped regions to simply be a named anchor (i.e. #anchorName). With the URL being passed in as a parameter to our method, we then defined each of these anchor names as keys to a dictionary that holds the name of the associated pdf file within the applications resources bundle. Thus, when our method is fired via a tap on one of the image mapped regions, we could then use the provided anchor name to look up (via the dictionary) the pdf document to be launched.

Now, with a mechanism in place to detect the requested launch of a given pdf document, we turned our focus to actually loading and displaying the requested pdf. For this, some brief research turned up the extremely useful Leaves component developed by Tom Brow. As provided, this component gave us most of what we were looking for in our pdf presentation requirements : loading in the pdf from the resources bundle, then presenting the individual pdf pages in an attractive iBooks-like manner with click and drag page curl transitions. So, in our method that detected and decoded the touches on the map, we added code that created a view controller based on the pdf example given in the Leaves source code, passing in the pdf file name to be loaded from the resources bundle. This view controller was then added to the overall application navigation controller (using the pushViewController method) to provide a nice animated transition from the map to the loaded pdf.

To the core Leaves view controller (PDFExampleViewController), we then added some additional custom functionality to round out our application, namely the ability to navigate back to the main map interface, a button to email the current pdf to a specified email address, and, finally, a set of “quick links” to enable navigating directly to any page of the loaded pdf.  To facilitate these actions, we added buttons to the standard navigation interface, assigning a back button as the left button item, a “share” button as the right button item, then adding a button corresponding to each individual page in the pdf to the toolbar items (achieved by a for loop based on the CGPDFDocumentGetNumberOfPages method for the loaded pdf). The navigation items were then hidden by default (to enable a better overall viewing experience of the document) and made visible by a double tap gesture (see the handleDoubleTap method in the PDFExampleView controller).

For the direct navigation to a page in the pdf, we again leveraged the code provided by Leaves. Due to the very clean and modular implementation by Tom, simply setting the currentPageIndex property of the main leavesView object will automatically load and display the associated page. For our share functionality – emailing a pdf to an email address specified by the customer – we turned to the MFMailComposeViewController. This particular controller allows us to create and send emails using the built in email tools on the iPad within the sandbox of our application. Essentially all that is needed to be done is to create an instance of this controller within our code, then use the core method presentModalViewController to have it appear within the application with a smooth animated transition. The key functionality of attaching the current pdf to the generated email is achieved by simply calling the addAttachmentData method on the created mail compose controller, passing a reference to the current pdf as an argument. This code is contained within the shareButtonClick method of the PDFExampleViewController. Again, a good example of leveraging existing components to provide rich functionality with minimal development time expended.

This project turned out to be a great success for the Float Learning team. Thanks to a great all around team effort we were able to deliver an outstanding application that fulfilled all client requirements and surpassed their expectations. Our client reported only rave reviews of the application from the trade show floor. This provided a great example of using the power of mobile to go above and beyond, delivering what is simply not possible by more standard means.

Follow Float
The following two tabs change content below.

Mark Tovey

Mark is a Mobile Developer at Float with a B.S. in Applied Science (Information Science). Mark has a varied background in the I.T. industry, having worked as both a mainframe programmer/analyst and web developer over the course of his career, in areas as diverse as homeland security, education, insurance, e-commerce, and e-learning. This breadth of experience has given him a deep understanding of all of the phases of the software development life cycle. In the recent past, Mark has developed many content managed websites using open source software, including the Oyez Project, as well as developing interactives for clients such as The Adler Planetarium and Shure Inc. Mark is also an instructor at Bradley University, teaching an introductory course to the Javascript and Actionscript scripting languages.

» Mobile Development, Mobile Strategy » Mapping client success in a...
On November 12, 2010
, ,

Leave a Reply

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

« »