mobile app development using phonegap - a comprehensive walkthrough - touch tour chennai
DESCRIPTION
A quick rampup through the learning curve of PhoneGap, by way of walking through an App Development.TRANSCRIPT
![Page 1: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/1.jpg)
Mobile App Development using PhoneGap - A Comprehensive Walk-through
Gomathi Viswanathan &
Vijesh K V
Unimity SolutionsChennai
![Page 2: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/2.jpg)
Lets Checkout an App!
![Page 3: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/3.jpg)
Lets Checkout an App!
• What do Apps typically accomplish?
Present Information
Transmit Data to remote servers
Access device APIs
Capture and Save Information
Handle NotificationsImages Courtesy various Internet Sources
![Page 4: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/4.jpg)
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
![Page 5: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/5.jpg)
What is behind the scenes? PhoneGap
![Page 6: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/6.jpg)
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
![Page 7: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/7.jpg)
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
![Page 8: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/8.jpg)
Want to know how to get all this done?
![Page 9: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/9.jpg)
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
XcodeWindows (or) Mac computer
Android SDK
AVD
Eclipse and
ADT plugin
Windows Computer
Apache Ant
Sun JDK
BB WebWorks SDK
![Page 10: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/10.jpg)
The Nuts & Bolts
![Page 11: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/11.jpg)
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
![Page 12: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/12.jpg)
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
![Page 13: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/13.jpg)
![Page 14: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/14.jpg)
Environment Views
• Switching to IDE view (will be removed from slides)
![Page 15: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/15.jpg)
Looking Inward – PhoneGap API
Images Courtesy various Internet Sources
![Page 16: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/16.jpg)
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
![Page 17: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/17.jpg)
• Deviceready
• Pause and Resume
• Online and Offline
• Menubutton
• Searchbutton
• Startcallbutton and endcallbutton
• Volumedownbutton and volumeupbutton
Core Events
![Page 18: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/18.jpg)
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
![Page 19: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/19.jpg)
The Demo
![Page 20: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/20.jpg)
Flow of Building and Deploying
Courtesy www.phonegap.com
![Page 21: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/21.jpg)
Code Aside – The design elements, best practices and testing
![Page 22: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/22.jpg)
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
![Page 23: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/23.jpg)
• Data display– Running Text– Categorized Text – Images and Media– Scroll - Slide, with Thumbnail
Design Elements
Images Courtesy various Internet Sources
![Page 24: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/24.jpg)
• Data capture options– Text Boxes– Select Fields– Multi-Select
Design Elements
Images Courtesy various Internet Sources
![Page 25: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/25.jpg)
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
![Page 26: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/26.jpg)
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
![Page 27: Mobile app development using PhoneGap - A comprehensive walkthrough - Touch Tour Chennai](https://reader035.vdocuments.net/reader035/viewer/2022062513/554d2a54b4c905ab268b4ee9/html5/thumbnails/27.jpg)
Thank you.