• Like


Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Building A Quick Base Mobile Application - Phil Gross


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.

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Building a QuickBase Mobile Application
    Philip Gross
    Senior Business Operations Manager
    Intuit QuickBase
  • 2. Several Approaches to Mobile Quickbase:
    • QuickBase Native iPhone Application – MCF Technology Solutions
    • 3. Windows Mobile and VB.Net proxy – Juiced Technologies
    • 4. jQuery and jQTouch – Robert McDonald
  • 5. Native iPhone Application Development
    MCF Technology Solutions
  • 6.
  • 7.
  • 8.
  • 9. 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
  • 10. 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.
  • 11. 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
  • 12. Windows Mobile App Development
  • 13. Handheld device should be capable of the following:
    • Make and Receive phone calls
    • 14. Scan barcodes
    • 15. GPS
    • 16. 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
  • 17. 2.
    Process Flow
  • 18. Barcode Scanned
    Signature Captured
    QuickBase Updated
    Mobile Application Screen Shots
  • 19. jQuery and jQTouch
    Advanced Mobile devices
  • 20. jQuery/jqTouch
  • 21. jQueryPlugin for iPhone and iPod Touch, Android, and Palm Pre
    Create mobile applications with just HTML, CSS, and Javascript
    Native animation
    What is jQTouch?
  • 22. Add a DB Page
    Include jQuery from Google
    Include jQTouch (either hosted yourself, or test with our version)
    Include jQTouchcss
    Adding JQTouch to your Application
  • 23. 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
  • 24. Quick Demo – Task list
  • 25. Quick Code Walkthrough – Head Material
    <!doctype html>
    <meta charset="UTF-8" />
    <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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 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">
  • 26. Main Handlers
    //On document ready, refresh the counts in the main list items
    //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");
  • 27. Querying QuickBase
    function queryDB(type, list){
    type: "POST",
    url: "https://www.quickbase.com/db/beuity3db?act=api_doquery",
    data: {qid: 7, nv: 1, v0: type},
    success: function(xml)
    vartypeList = list + "List";
    $('#' + typeList).empty();
    var thought = $(this).text();
    $('#' + typeList).append('<li><a href="#">' + thought + '</a></li>');
  • 28. One of the content pages
    <div id="today">
    <div class="toolbar">
    <a class="back" href="#home">Home</a>
    <ul id="todayList"> </ul>
  • 29. Main HTML body
    <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>
  • 30. Thank You