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.

Like this presentation? Why not share!

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.



Total Views
Views on SlideShare
Embed Views



9 Embeds 939

http://quickbase.intuit.com 910
http://www.slideshare.net 13 8
http://www.quickbasesolutions.com 2
http://quickbase.eu 2
http://www.quickbaseprojects.com 1
https://quickbase.intuit.com 1
http://intuit.dev.odin.commonplaces.com 1
http://www.qblp.quickbase.com 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Building A Quick Base Mobile Application - Phil Gross Building A Quick Base Mobile Application - Phil Gross Presentation Transcript

    • Building a QuickBase Mobile Application
      Philip Gross
      Senior Business Operations Manager
      Intuit QuickBase
    • 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
    • Native iPhone Application Development
      MCF Technology Solutions
    • 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
    • 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.
    • 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
    • Windows Mobile App Development
    • Handheld device should be capable of the following:
      • Make and Receive phone calls
      • Scan barcodes
      • GPS
      • 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
    • 2.
      Process Flow
    • Barcode Scanned
      Signature Captured
      QuickBase Updated
      Mobile Application Screen Shots
    • jQuery and jQTouch
      Advanced Mobile devices
    • jQuery/jqTouch
    • jQueryPlugin for iPhone and iPod Touch, Android, and Palm Pre
      Create mobile applications with just HTML, CSS, and Javascript
      Native animation
      What is jQTouch?
    • 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
    • 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
    • Quick Demo – Task list
    • 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">
    • 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");
    • 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>');
    • One of the content pages
      <div id="today">
      <div class="toolbar">
      <a class="back" href="#home">Home</a>
      <ul id="todayList"> </ul>
    • 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>
    • Thank You