Intro to Mobile Development for Web iOS and Android
-
Upload
sendgrid -
Category
Technology
-
view
2.216 -
download
4
description
Transcript of Intro to Mobile Development for Web iOS and Android
![Page 1: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/1.jpg)
Intro to Mobile Development for Web, IOS Native Apps and
Android Native AppsBy
Jorge GarifunaProfessional Web Developer
JGari.com/resumeTwitter: @jgarifuna
![Page 2: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/2.jpg)
Web Vs. Mobile DevelopmentBasic Comparison
Web Mobile
Presentation HTML HTML5
Styling CSS CSS3
Logic PHP, Perl, Python, Ruby, Java, C, C++, Javascript
PHP, Objective-C, Java, Javascript
Database MySQL, PostgreSQL SQLite
IDE NetBeans, Eclipse, DreamWeaver
Xcode, Eclipse, DreamWeaver CS5.5
Frameworks CakePHP, Symphony, ATK, Jquery, Sencha EXT JS
Jquery Mobile, Sencha Touch, Jo, PhoneGap
Distribution Web Hosting Web Hosting, App Store, Market
JGari.com/resume
![Page 3: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/3.jpg)
Goals
1. Build Mobile App2. Test App on Browser3. Test App on IOS Simulator4. Test App on IOS Devices5. Test App on Android Emulator6. Test App on Android Phone7. Access Devices APIs
JGari.com/resume
![Page 4: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/4.jpg)
Tools
1. SketchyPad/iMockups for wireframing
2. DreamWeaver CS5.53. Jquery Mobile 1.0a34. PhoneGap5. Xcode 46. IOS Simulator & Real iPhone7. Android Emulator & Real Phone
JGari.com/resume
![Page 5: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/5.jpg)
Wireframing
JGari.com/resume
![Page 6: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/6.jpg)
Wireframing
JGari.com/resume
![Page 7: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/7.jpg)
Wireframing
JGari.com/resume
![Page 8: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/8.jpg)
DreamWeaver CS5.5 Setup
Create New Site Site -> New Site
Configure Application Frameworks (IOS, Android) Site -> Mobile Applications -> Configure
Application Framework▪ “Easy Install” for Android SDK Installation▪ IOS Developer Tools Path: /Developer
JGari.com/resume
![Page 9: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/9.jpg)
Create Mobile App
Create New Mobile Project in DreamWeaver File -> New -> Page from Sample ->
Mobile Starters -> Jquery Mobile (phonegap)
DocType: HTML 5
JGari.com/resume
![Page 10: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/10.jpg)
Save App As index.html
File -> Save
JGari.com/resume
![Page 11: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/11.jpg)
Test App In Browser
Activate LiveView in DreamWeaver Click on buttons of Mobile App Optionally Transfer to Server For
More Testing
JGari.com/resume
![Page 12: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/12.jpg)
Configure Application Settings
From DreamWeaver Menu Site -> Mobile Applications ->
Application Settings▪ VERY IMPORTANT: Make sure the Bundle ID
does not contain any underscores(_) and no spaces▪ Fill out Information▪ Optionally add Application Icon and Startup
Screen▪ Images must be PNG 8
▪ SaveJGari.com/resume
![Page 13: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/13.jpg)
Test App in IOS Simulator
From DreamWeaver Menu For iPhone▪ Site -> Mobile Applications -> Build and
Emulate -> iPhone For iPad▪ Site -> Mobile Applications -> Build and
Emulate -> iPad
JGari.com/resume
![Page 14: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/14.jpg)
Test App in Android Emulator
Start Android Emulator▪ From command line:▪ /Applications/Android/tools/emulator -avd DW_AVD
NOTE: Substitute “/Applications/Android” with your Android installation path
Site -> Mobile Applications -> Build and Emulate -> Android
JGari.com/resume
![Page 15: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/15.jpg)
Test App on Android Phone1. From Android Market install
AppInstaller or Quick App Install
2. Insert Micro SD Card on Android Phone3. Connect Android Phone to Computer Via USB4. Mount Phone to Computer
1. Slide down from top bar2. Select USB Connected3. Click mount button
5. Check mounted card under Devices on Mac OS Finder6. Copy Newly created .apk files from computer to Phone Card
1. Located in APP_NAME_Android/bin7. Unmount card from computer8. Turn off USB on Phone
1. Slide down from top bar2. Click “Turn off USB storage”3. Click on “turn off” button
9. Install App either with AppInstaller or Quick App Install10. Open App
JGari.com/resume
![Page 16: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/16.jpg)
Test App on iPhone/iPad
1. You need to be a paid IOS Developer1. Your IOS Device must be registered at:
1. http://developer.apple.com/ios/manage/overview/index.action
2. Connect IOS Device to computer via USB3. Navigate to newly built IOS Project
Located at APP_NAME_IOS4. Double click on APP_NAME.xcodeproj to open in Xcode5. Click on the project name in Xcode
1. Set deployment target to the same version as your IOS device in IOS Application Target
2. Set the appropriate target device(iPhone, iPad, Universal)3. Make your preferences in iPhone/iPod Deployment Info
6. Select your IOS Device from drop down list of devices next to the run button
7. Click the Run button
JGari.com/resume
![Page 17: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/17.jpg)
Customize App
Add better navigation provided by Jquery Mobile http://jquerymobile.com/demos/1.0a4.1/
Tap into the device’s APIs (camera, GPS) with PhoneGap http://docs.phonegap.com
JGari.com/resume
![Page 18: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/18.jpg)
Gotchas
1. Jquery Mobile (v1.0a3) does not re-style dynamic list views (yet)
1. Need to upgrade to JQM v1.0a4.12. Refresh list with: jQuery('#link_list').listview();
2. Navigation bar transition in Jquery Mobile is not very smooth (yet) DAVID FELDMAN recommends ▪ Sencha Touch: ▪ http://www.sencha.com/products/touch/
▪ Read David’s review: “Comparing Mobile Web (HTML5) Frameworks: Sencha Touch, jQuery Mobile, jQTouch, Titanium” at: ▪ http://interfacethis.com/2011/adventures-in-html5-part-one/
3. To access devices’ APIs you need to either add or update PhoneGap path in index.html to: <script src="phonegap.js" type="text/javascript"></script>
JGari.com/resume
![Page 19: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/19.jpg)
Questions?
While you think… Sign up to LAMPsig’s mailing list at:▪ http://lampsig.org
Join LAMPsig on Meetup at:▪ http://www.meetup.com/LAMPsig
Me on twitter: @jgarifuna
JGari.com/resume
![Page 20: Intro to Mobile Development for Web iOS and Android](https://reader038.fdocuments.net/reader038/viewer/2022110115/54b7508f4a79599b698b456b/html5/thumbnails/20.jpg)
Resources
1. http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-
2. http://jquerymobile.com3. http://www.phonegap.com4. http://html5doctor.com5. http://www.sencha.com/products/touch6. http://joapp.com7. http://dhtmlx.com/touch8. http://developer.apple.com9. http://lampsig.org10.http://www.meetup.com/LAMPsigJGari.com/resume