Build Mobile Web Apps with
jQTouch and jQuery
Antonio Chagoury
June 2010
1
2
www.inspectorit.com
About Me
• Principal & Software Architect, Inspector IT, Inc.• Microsoft MVP, Visual Basic• DotNetNuke Core Team Member and Project
Lead, Blog and Install Utility• Co-Founder and President, Capital
DotNetNuke User Group (CDUG) • Use DotNetNuke as the Development Platform of
choice for large Web 2.0 and Enterprise Implementations
• Blogs at www.cto20.com
3
www.inspectorit.com
Announcement: Hackathon
• Join developers around the world for the “Visual DotNetNuke” Hackathon
• Learn how to build DotNetNuke modules with compelling user interfaces. Build your own module and win great prizes!
• Broadcast live• Follow me on twitter for updates
(@antoniochagoury)• See Flyer stuffed in your bags for info!
4
www.inspectorit.com
Why jQTouch?
• Who wants to learn Objective-C?• HTML 5 + JavaScript is cool! Plus, you may
learn new tricks in the process• You can go offline with HTML 5• Deploy Apps without the AppStore headache• Want AppStore? Deploy with PhoneGap,
AppCelerator Etc.
5
www.inspectorit.com
Approach
Build a mobile web app for a movie rental website• ASP.NET MVC Website providing data via
JSON• jQTouch Framework + jQuery• HTML 5 + CSS• Test Mobile App with MobiOne Test Center
6
www.inspectorit.com
Buckle Up!
1.Installing jQTouch framework
2.Explore using jQTouch to build a mobile web app
3.Review how we are exposing json data from MVC
4.Build a mobile web app version of our movie app
5.Consume JSON with jQuery
6.Test App with MobiOne
7
www.inspectorit.com
MVC Movies Website
Our Framework’s Architecture
Data
(Mock)
Desktop Browser
MobiOne Test Center
Json MobileHTML
8
www.inspectorit.com
Let’s Code
Enough PowerPoint!
9
www.inspectorit.com
Resources
• jQuery: www.jquery.com • jQTouch Framework: www.jqtouch.com• jQTouch Support and Docs:
http://code.google.com/p/jqtouch/ • MobiOne Emulator: http://www.genuitec.com/mobile/ • Book: Building iPhone Apps with HTML, CSS and Javascript
• My Blog: www.cto20.com • Follow my tweets: www.twitter.com/antoniochagoury • Email me: [email protected]