Case Study: A Practical Approach
Your most unhappy customers are your greatest source of learning.
—Bill Gates
The preceding quotation tells the gist of our first case study. How do you identify what a client feels about your product or service? Can you digitize the process? Can you make the feedback data-collection process easy? Can you make an app for that? The answer to these questions is definitely yes.
This case study, presented courtesy of SEED Management Services, targets services offered at any hotel SEED Management Services is a company based in Pune, India that has developed an app called Survey Data ++. This app handles digitization of long and complex questionnaires.
This chapter covers the steps to be taken to complete the application.
The prerequisites for this process are as follows:
Creating a Feedback Application
Let’s get started with the application:
Figure 13-1. AppBuilder—creating a workspace
Figure 13-2. AppBuilder—continuing to create a project
Figure 13-3. AppBuilder—project creation continued
Figure 13-4. AppBuilder—project creation continued
Figure 13-5. AppBuilder—Project Navigator
Figure 13-6. AppBuilder—displaying the project content
Figure 13-7. AppBuilder—index.html references
Figure 13-8. Title and style markup code
The <body> content at a glance will look like Figure 13-9.
Figure 13-9. HTML UI—markup code
The main <div> container contents are a hotel label, camera icon, and feedback form, as shown in Figure 13-10.
Figure 13-10. Responsive containers in the markup
The feedback form is a responsive <table>. Note that the text boxes used in <table> are with specific classes referenced from the Star Rating jQuery plug-in. The rest of the classes used are from responsive CSS and are discussed in Chapter 7. See Figure 13-11.
Figure 13-11. Responsive containers in markup continued
The next <div> is for displaying a Thank You message to the customer, as shown in Figure 13-12. This step completes the UI.
Figure 13-12. A div container for the message
Writing the Business Logic
Now let’s focus on jQuery code. Follow these steps:
Figure 13-13. Validation and data collection using jQuery code
Figure 13-14. Camera picture-collection code using jQuery
Figure 13-15. Photo and data access functions using jQuery/ JavaScript
Figure 13-16. Build ing the code
Figure 13-17 shows snapshots of the application from the device and simulators.
Figure 13-17. application, under execution on different devices
Summary
In this chapter, you created a feedback system application as a hybrid mobile application. You used camera access and file storage within the device’s SD card itself. The case study illustrated that JSON and jQuery AJAX are vital for developing hybrid mobile applications.
18.189.188.238