Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai
Upcoming SlideShare
Loading in...5
×
 

Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai

on

  • 7,989 views

A quick rampup through the learning curve of PhoneGap, by way of walking through an App Development.

A quick rampup through the learning curve of PhoneGap, by way of walking through an App Development.

Statistics

Views

Total Views
7,989
Views on SlideShare
6,678
Embed Views
1,311

Actions

Likes
6
Downloads
111
Comments
0

10 Embeds 1,311

http://www.scoop.it 1085
http://managingtechnologywebandmobile.blogspot.in 167
http://managingtechnologywebandmobile.blogspot.com 32
http://www.linkedin.com 13
http://paper.li 7
http://a0.twimg.com 2
http://webcache.googleusercontent.com 2
http://translate.googleusercontent.com 1
https://twitter.com 1
https://www.google.fr 1
More...

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Any SDK, preferred is eclipse with ADT plugin The SDK and AVD need to be installed PhoneGap Lib (links code to Webview) and DroidGap (for creating and deploying, Ruby based) assets/ www folder android manifest  - global setting
  • Create the page blocks for each page (Switch to IDE to show Code each function wise) Home screen My Preferences List Meetups Register Run in emulator (Switch to Emulator) Run on device  About Distribution
  • Audience Interaction - Get to know what apart from the functionality would they expect to enjoy using an App as Users
  • Audience Interaction - Get to know what apart from the functionality would they expect to enjoy using an App as Users

Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai Presentation Transcript

  • Mobile App Development using PhoneGap - A Comprehensive Walk-through Gomathi Viswanathan & Vijesh K V Unimity Solutions Chennai
  • Lets Checkout an App!
  • Lets Checkout an App!
    • What do Apps typically accomplish?
    Images Courtesy various Internet Sources Present Information Transmit Data to remote servers Access device APIs Capture and Save Information Handle Notifications
  • A Sample App - Meetup Updater
    • Here is an App that will help you be updated with the Meetups of your preferred groups in & around your place
        • It fetches Meetup Details from a remote server
        • Has a local data store for your preferences
        • Send Data to Server - Register for an Event
        • Encompasses the typical navigational and user interaction elements
  • What is behind the scenes?  PhoneGap
  •   PhoneGap
    • Is a Cross Platform Native Mobile App development framework
    • Leverages HTML, CSS and Javascript
    • Supports – Android, iOS, Blackberry, Symbian, Windows, WebOS, Bada and Palm
    • Has APIs for sensors and data 
    • Was recently acquired by Adobe and the current code base is to be submitted to Apache Software Foundation
  • PhoneGap Build
    • PhoneGap Build an Online service to compile code blocks in HTML, CSS, JS to native apps without the need for the developer to work with the respective APIs
    • Without PhoneGap build, you need to download and work using different SDKs and builds.
    • Beta is free
  • Want to know how to get all this done?
  • Gearing Up for Development
      • Since the App is compiled as a Native application, respective SDKs for each platform needs to be installed.
    Mac 10.6 OS computer Xcode Windows (or) Mac computer Android SDK AVD Eclipse and ADT plugin Windows Computer Apache Ant Sun JDK BB WebWorks SDK
  • The Nuts & Bolts
  • Getting Started
    • PhoneGap is open web-standards based, which means you can run and test and test your App on any Webkit based Browser (Chrome, Safari)
    • The application creation is very similar to that of web pages creation, except for the installation and deployment stages. HTML, CSS and Javascript is all that you need from a programming perspective.
    • You can use Browser based debugging tools that are available as addons. Eg. FireBug
  • The Add-Ons
    • Use popular JS plugin like JQuery (mobile version), mobile specific like jQTouch, Sencha.
    • Use Webkit specific pre-release implementation of certain CSS properties.
    • Use Local Storages
      • Cookies for session maintenance
      • PhoneGap API – Web SQL database
      • HTML5 local Storage API is a breeze
      • Indexed storage option Indexed DB is upcoming
    • Structure App in a MVC model
  •  
  • Environment Views
    • Switching to IDE view (will be removed from slides)
  • Looking Inward – PhoneGap API Images Courtesy various Internet Sources
  • Looking Inward – PhoneGap API
    • Accelerometer – Device motion sensor
    • Geolocation – GPS Sensor
    • Compass
    • Capture – audio, video and image capture capabilities
    • Camera
    • Media- Allows Record and Playback of Audio
    • Contacts database
    • File
    • Connection type
    • Device
    • Notification – Audio Visual and Tactile
    • Deviceready
    • Pause and Resume
    • Online and Offline
    • Menubutton
    • Searchbutton
    • Startcallbutton and endcallbutton
    • Volumedownbutton and volumeupbutton
    Core Events
  • Looking Outward - Linking to Remote Servers
    • PhoneGap Applications can communicate with Remote web servers
      • Remote servers can be public (meetup, twitter etc) (or) proprietary, eg. Any business app say a CRM APP may contact a central proprietary web server of the company.
      • Services can be RESTful API based (or) SOAP based
      • The response can be XML (or) JSON
      • The client can use XHR (Ajax HTTP request)
      • WebSockets are an emerging trend
  • The Demo
  • Flow of Building and Deploying Courtesy www.phonegap.com
  • Code Aside – The design elements, best practices and testing
  • Visual Design
    • User experience is enhanced when the App is Consistent in design and behavior with Native device. Eg. The menu style, notifications style.
    • This means some of the core design components and their consistency need to be maintained. 
      • Fonts and Sizes
      • Icon Styles
      • Device Sizes and Resolutions
      • Notifications
      • Screen Navigation
    • Data display
      • Running Text
      • Categorized Text 
      • Images and Media
      • Scroll - Slide, with Thumbnail
    Design Elements Images Courtesy various Internet Sources
    • Data capture options
      • Text Boxes
      • Select Fields
      • Multi-Select
    Design Elements Images Courtesy various Internet Sources
  • Testing your App
    • The features testing at a unit level, needs to be done not only on the emulator, also at the device level.
    • Apart from testing for the functionality, pre-market submission checklists need to be applied
    • Testing of the Installation Process, Upgrades Workflow and Application fire-up are also equally critical
    • The response to external events like incoming calls and application state maintenance is at the outset taken care of by PhoneGap
  • References
    • Looking for Support
      • IRC Channel for JS, JQuery
      • Google PhoneGap group
      • iOS, Android communities on Social Networking Sites
    • References made in this presentations
      • http://www.meetup.com
      • http://www.phonegap.com
      • http://www.patternsofdesign.co.uk
      • http://developer.android.com
      • Images from various internet sources
  • Thank you.