![JS Initialization var jQT = $.jQTouch({ formSelector: false, icon: 'icon.png', startupScreen: 'Default.png', statusBar: 'black', useFastTouch: false, preloadImages: [ 'themes/triviadark/img/back_button.png', 'themes/triviadark/img/back_button_clicked.png', 'themes/triviadark/img/button_clicked.png', 'themes/triviadark/img/grayButton.png', 'themes/triviadark/img/whiteButton.png', 'themes/triviadark/img/loading.gif', 'ttmt-logo.png', 'themes/triviadark/img/ttmt-bg.png' ] });](https://image.slidesharecdn.com/fromjquerytoappstorein30minutes-100927174437-phpapp01/85/From-jQuery-to-App-Store-in-30-Minutes-10-320.jpg)
![Contact Eliot Dill @eliotdill [email_address]](https://image.slidesharecdn.com/fromjquerytoappstorein30minutes-100927174437-phpapp01/85/From-jQuery-to-App-Store-in-30-Minutes-26-320.jpg)
From jQuery to App Store in 30 Minutes
- 1. From jQuery to App Store in 30 Minutes Mobile Apps with HTML, CSS, and Javascript 2010 Barcamp Tampa By Eliot Dill
- 2. Hi, I'm Eliot. Software Developer - Web - Mobile Entrepreneur Grad Student
- 3. Agenda Play a Game: Barcamp Says Highlight the important code How to setup your first project Difficulties
- 4. Background Native Apps - Java (Android) - Objective-C (iOS) Web Apps - HTML5 - CSS3 - Javascript - WebKit Compatibility
- 5. Play “Barcamp Says” http://www.youtube.com/watch?v=_N169k98Vfg
- 6. How does it work? - Single .html - <div> tag for each page - include jqtouch.css, jqtouch.js, theme.css, and jquery.js - initialize $.jQTouch();
- 7. Pick a Style, Create Own
- 8. HTML Header <head> <title>Barcamp Says</title> <link rel="stylesheet" href="jqtouch/jqtouch.min.css" type="text/css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" href="themes/triviadark/theme.css" type="text/css" media="screen" title="no title" charset="utf-8"> <script type="text/javascript" src="jqtouch/jquery.1.3.2.min.js" charset="utf-8"></script> <script type="text/javascript" src="jqtouch/jqtouch.min.js" charset="utf-8"></script> <script type="text/javascript" src="ws.js" charset="utf-8"></script> <link rel="stylesheet" href="ws.css" type="text/css" media="screen" title="no title" charset="utf-8"> </head>
- 9. HTML Div <div id="home" class="current"> <div class="toolbar"> <h1>Barcamp Says</h1> <a class="button flip" href="#top">Top Score</a> </div> <br><br> <center><img src="images/bbb-logo.png" /></center> <br><br> <ul class="rounded"> <li class="arrow"><a onclick="ShowQuestion();" href="#play">Play Now</a></li> <li class="arrow"><a href="#how">How to Play</a></li> <li class="arrow"><a href="#about">About</a></li> </ul> </div>
- 10. JS Initialization var jQT = $.jQTouch({ formSelector: false, icon: 'icon.png', startupScreen: 'Default.png', statusBar: 'black', useFastTouch: false, preloadImages: [ 'themes/triviadark/img/back_button.png', 'themes/triviadark/img/back_button_clicked.png', 'themes/triviadark/img/button_clicked.png', 'themes/triviadark/img/grayButton.png', 'themes/triviadark/img/whiteButton.png', 'themes/triviadark/img/loading.gif', 'ttmt-logo.png', 'themes/triviadark/img/ttmt-bg.png' ] });
- 11. JS Local Database var db; $(document).ready(function(){ $('body > *').css({minHeight: '460px !important'}); var shortName = 'BarCamp Says'; var version = '1.0'; var displayName = 'BarCamp Says'; var maxSize = 65536; db = openDatabase(shortName, version, displayName, maxSize); db.transaction( function(transaction) { transaction.executeSql( "CREATE TABLE IF NOT EXISTS scoreboard (" + "id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, description TEXT, score INTEGER);" ); } ); //Do Stuff Here });
- 12. JS Web Service HTTP.get(URL + myId, null, success, failure, i); var HTTP = { get: function (url, file, success, failure, i) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { success(xhr, i); } else { failure(xhr); } } }; xhr.send(null); } }; function success(xhr, i) { //Do Something Cool }
- 13. Still with me?
- 14. Prerequisites
- 15. JQTouch - jQuery Plug-in - iPhone CSS - Animations: - slide , slideup , dissolve , fade , pop , flip , swap , and cube - Auto Navigation
- 16. PhoneGap - Container -> App Store - with JQTouch -> Native-like Apps - device, location, camera, vibrate, sound, telephony, accelerometer, contacts, orientation - iPhone / iPad, Android, Blackberry, Palm Pre, Symbian, WinMobile
- 17. Installing PhoneGap >git clone git://github.com/phonegap/phonegap-iphone.git >git submodule init >git submodule update >make Run PhoneGapLibInstaller.pkg -More help at phonegap.com/start/
- 18. Provisioning
- 21. Change URL
- 22. Change Settings
- 23. Develop in WWW
- 24. Gotchas Android - SDK and Emulator Setup is more difficult - Deployment is Simple as Pie - No approval process - Be sure to keep Keystores safe Apple - SDK and Emulator Setup is Easy - Provisioning and Deployment is more difficult - 1-2 week turn around Other - Installing PhoneGap (A little confusing) - Selling internationally for US-only app - Don’t upgrade SDKs/Programs/APIs, especially mid-development - Longer than expected dev times
- 25. Learn More http://building-iphone-apps.labs.oreilly.com/ch08.html http://www.phonegap.com http://www.jqtouch.com
- 26. Contact Eliot Dill @eliotdill [email_address]