Building A Quick Base Mobile Application - Phil Gross


Published on

See how easy it is to create an iPhone application for your QuickBase. In this session Phil will show you how to use the QuickBase API and jQuery to build an iPhone to enter and view QuickBase data.

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building A Quick Base Mobile Application - Phil Gross

  1. 1. Building a QuickBase Mobile Application Philip Gross Senior Business Operations Manager Intuit QuickBase
  2. 2. Several Approaches to Mobile Quickbase: -QuickBase Native iPhone Application – MCF Technology Solutions -Windows Mobile and VB.Net proxy – Juiced Technologies -jQuery and jQTouch – Robert McDonald Agenda
  3. 3. Native iPhone Application Development MCF Technology Solutions
  4. 4. • Why iPhone? – Increased speed and usability. Leverage existing iPhone UI patterns to decrease the learning curve and increase the speed at which data can be retrieved and/or entered. – Create fast and specific data entry screens for mobile users. – Allow mobile users to quickly access information while on the go. – Capture of different media types, such as images and audio recordings, with greater ease. – Anything you can do through the API (which is quite a lot) you can do in a mobile application. – Allow capture of data (and limited browsing) while disconnected from the network. Native iPhone Application
  5. 5. – Intel based Mac. – Xcode and iPhone SDK. – Registered in Apple's iPhone Developer Program (if you want to run apps outside of the simulator). – iPhone or iPod Touch for testing on devices. – Familiarity with QuickBase API. Requirements
  6. 6. – Objective-C (a new language for many) – Familiarity with Cocoa Frameworks – Devices have limited processing power and memory – You must do your own memory management – You must plan for limited or no connectivity Native iPhone Development Challenges
  7. 7. Windows Mobile App Development
  8. 8. Handheld device should be capable of the following: o Make and Receive phone calls o Scan barcodes o GPS o Work in a somewhat rugged environment Juiced developed a Windows Mobile application that utilizes the QuickBase api to interface with their existing QuickBase application. Handheld Device: Motorola MC75 running Windows Mobile 5 Technology: Microsoft VB.Net and the QuickBase API Project Requirements and Solution
  9. 9. ATT Telecom Juiced Web Service Notify Involved Parties Of Delivery QuickBase Delivery is Made 1 . 2 . 3 . 4 . 5 . Process Flow
  10. 10. Barcode Scanned QuickBase Updated Signature Captured Mobile Application Screen Shots
  11. 11. jQuery and jQTouch Advanced Mobile devices
  12. 12. jQuery/jqTouch
  13. 13. • jQuery Plugin for iPhone and iPod Touch, Android, and Palm Pre • Create mobile applications with just HTML, CSS, and Javascript • Native animation • Themes What is jQTouch?
  14. 14. • Add a DB Page • Include jQuery from Google • Include jQTouch (either hosted yourself, or test with our version) • Include jQTouch css Adding JQTouch to your Application
  15. 15. Any descendent under the body tag (usually <divs> become their own full screen panels <ul>s are lists For example (from jQTouch wiki) <div id="demolist"> <div class="toolbar"> <h1>Demo List</h1> <a class="back" href="#">Back</a> </div> <h4>Options</h4> <ul class="rounded"> <li><a href="#item1">Item 1</a></li> <li><a href="#item2">Item 2</a></li> <li><a href="#item3">Item 3</a></li> </ul> </div> Classes and structure
  16. 16. Quick Demo – Task list
  17. 17. Quick Code Walkthrough – Head Material <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>GTDBase</title> <style type="text/css" media="screen">@import "/db/berkfpbkn/gl/jqtouch/jqtouch.min.css";</style> <style type="text/css" media="screen">@import "/db/berkfpbkn/gl/themes/jqt/theme.min.css";</style> <script src="" type="text/javascript" charset="utf-8"></script> <script src="/db/berkfpbkn/gl/jqtouch/jqtouch.min.js" type="application/x- javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8">
  18. 18. Main Handlers $(function(){ //On document ready, refresh the counts in the main list items refreshHome(); //event handlers for main list items $('#showInbox')[0].onclick = function(event) { queryDB("Inbox", "inbox"); } $('#showToday')[0].onclick = function(event) { queryDB("Today", "today"); } $('#showNext')[0].onclick = function(event) { queryDB("Next", "next"); }
  19. 19. Querying QuickBase function queryDB(type, list){ $.ajax({ type: "POST", url: "", data: {qid: 7, nv: 1, v0: type}, success: function(xml) { var typeList = list + "List"; $('#' + typeList).empty(); $('thought',xml).each(function(){ var thought = $(this).text(); $('#' + typeList).append('<li><a href="#">' + thought + '</a></li>'); }); } }); }
  20. 20. One of the content pages <div id="today"> <div class="toolbar"> <h1>Today</h1> <a class="back" href="#home">Home</a> </div> <ul id="todayList"> </ul> </div>
  21. 21. Main HTML body <ul> <li class="arrow" id="showInbox"><a href="#inbox">Inbox</a><small id=inboxCount class="counter">0</small></li> <li class="arrow" id="showToday"><a href="#today">Today</a><small id=todayCount class="counter">0</small></li> <li class="arrow" id="showNext"><a href="#next">Next</a> <small id=nextCount class="counter">0</small></li> …….
  22. 22. Thank You