We all know that Mobile Development is the big talk of the moment, but getting started brings more questions than answers. Questions such as: Where do you start? What platforms do you target? and/or Do you have to learn COCOA, JAVA, HTML5, CSS3 and all those technologies that you may not know much about?
The good news is that you can relax for now, because there is a new and exciting way to do it all in simple ways. In this workshop you will learn the following in a few short hours… Oh and actually be productive from day one:
- How to design and build a single application that runs perfectly on: mobile web browsers, iPhone (native app), iPad(native app) and Android(native app).
- How to test your application in IOS Simulator
How to test your application in Android Simulator
- How to transfer your application to an actual iPhone and/or iPad
How to transfer your application to an actual Android phone
- How to deploy your Android application to the Android Market and Amazon AppStore
How to deploy your iPhone/iPad application to the Apple AppStore
About the Speaker
Jorge Garifuna is a Professional Software Developer and Consultant with over 15 years of industry experience. His portfolio of technologies include but are not limited to various programming languages, Web 2.0, a diverse number of Frameworks, countless of databases and the latest and greatest in Mobile for popular platforms such as IOS, Android and BlackBerry, among many.
Over the years, Jorge has successfully Designed, Developed and Deployed Software in the areas of E-Commerce, Project Management, Content Management Systems (CMS), Enterprise Resource Planning (ERP) and Customer Relationship Management (CRM) to name a few. His technologies have been used, by many consumers, employees and businesses, some of which have grown to multi-million dollar businesses.
Jorge prides himself as a happy contributor to various Open Source Projects, including the ATK Framework and vTiger CRM to name a few. He has also given various presentations in the topics of: Joomla CMS; ATK Framework; Wordpress; ELGG Social Network Framework; Integration of Linux, Apache, MySQL, SQLite with Mkahawa Cyber Manager and PHP; and Mobile Development for Web, IOS Native and Android Native.
Jorge joined LAMPsig over six years ago and is currently serving as the president of this dynamic LAMP group. More details of Jorge’s professional qualifications can be found at: http://jgari.com/resume
4. idabiña?
How are you?
maga-dien-tina!
I am fine!
JGari.com/resume
5. NOW: Show you how easy it is to start native
mobile development and illustrate how to
test on different phones.
SOON: Show you how to package your app
to distribute to the different App stores.
Interested?
SMS your name and email to:
213-985-4413
JGari.com/resume
6. • Very Expensive
• Time Consuming
• Maintenance Nightmare
SMS your name & email to: 213-985-4413 JGari.com/resume
7. • Leverage Existing Skills
• Get to Market Sooner
• Reach More Users
JGari.com/resume
9. Web Mobile
Presentation HTML HTML5
Styling CSS CSS3
Logic PHP, Perl, Python, Ruby, PHP, Objective-C, Java,
Java, C, C++, Javascript Javascript
Database MySQL, PostgreSQL SQLite
IDE NetBeans, Eclipse, Xcode, Eclipse,
DreamWeaver DreamWeaver CS5.5
Frameworks CakePHP, Symphony, Jquery Mobile, Sencha
ATK, Jquery, Sencha EXT Touch, Jo, PhoneGap
Distribution JS Hosting
Web Web Hosting, App Store,
Market
SMS your name & email to: 213-985-4413 JGari.com/resume
10. 1. Build Mobile App
2. Test App on Browser
3. Test App on IOS Simulator
4. Test App on IOS Devices
5. Test App on Android Emulator
6. Test App on Android Phone
7. Access Devices APIs
SMS your name & email to: 213-985-4413 JGari.com/resume
11. 1. SketchyPad/iMockups for wireframing
2. DreamWeaver CS5.5
3. Jquery Mobile 1.0a3
4. PhoneGap
5. Xcode 4 & Eclipse
6. IOS Simulator & Real iPhone
7. Android Emulator & Real Phone
SMS your name & email to: 213-985-4413 JGari.com/resume
12. SMS your name & email to: 213-985-4413 JGari.com/resume
13. SMS your name & email to: 213-985-4413 JGari.com/resume
14. SMS your name & email to: 213-985-4413 JGari.com/resume
15. SMS your name & email to: 213-985-4413 JGari.com/resume
17. SMS your name & email to: 213-985-4413 JGari.com/resume
18. SMS your name & email to: 213-985-4413 JGari.com/resume
19. 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
SMS your name & email to: 213-985-4413 JGari.com/resume
20. Create New Mobile Project in DreamWeaver
File -> New -> Page from Sample -> Mobile
Starters -> Jquery Mobile (phonegap)
DocType: HTML 5
SMS your name & email to: 213-985-4413 JGari.com/resume
21. File -> Save
SMS your name & email to: 213-985-4413 JGari.com/resume
22. Activate LiveView in DreamWeaver
Click on buttons of Mobile App
Optionally Transfer to Server For More
Testing
SMS your name & email to: 213-985-4413 JGari.com/resume
23. 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
▪ Save
SMS your name & email to: 213-985-4413 JGari.com/resume
24. From DreamWeaver Menu
For iPhone
▪ Site -> Mobile Applications -> Build and Emulate ->
iPhone
For iPad
▪ Site -> Mobile Applications -> Build and Emulate -> iPad
SMS your name & email to: 213-985-4413 JGari.com/resume
25. 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
On failure, simply build app and manually install
▪ adb install AppFile.apk
SMS your name & email to: 213-985-4413 JGari.com/resume
26. 1. From Android Market install
AppInstaller or
Quick App Install
2. Insert Micro SD Card on Android Phone
3. Connect Android Phone to Computer Via USB
4. Mount Phone to Computer
1. Slide down from top bar
2. Select USB Connected
3. Click mount button
5. Check mounted card under Devices on Mac OS Finder
6. Copy Newly created .apk files from computer to Phone Card
1. Located in APP_NAME_Android/bin
7. Unmount card from computer
8. Turn off USB on Phone
1. Slide down from top bar
2. Click “Turn off USB storage”
3. Click on “turn off” button
9. Install App either with AppInstaller or Quick App Install
10. Open App
SMS your name & email to: 213-985-4413 JGari.com/resume
27. 1. You need to be a paid IOS Developer
1. Your IOS Device must be registered at:
1. http://developer.apple.com/ios/manage/overview/index.action
2. Connect IOS Device to computer via USB
3. Navigate to newly built IOS Project
Located at APP_NAME_IOS
4. Double click on APP_NAME.xcodeproj to open in Xcode
5. 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
SMS your name & email to: 213-985-4413 JGari.com/resume
28. 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
SMS your name & email to: 213-985-4413 JGari.com/resume
29. 1. Jquery Mobile (v1.0a3) does not re-style dynamic list
views (yet)
1. Need to upgrade to JQM v1.0a4.1
2. 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>
SMS your name & email to: 213-985-4413 JGari.com/resume
30. While you think…
Sign up to LAMPsig’s mailing list at:
▪ http://lampsig.org
Join LAMPsig on Meetup at:
▪ http://www.meetup.com/LAMPsig
Jorge Garifuna
▪ info@GariDigital.com
▪ @jgarifuna
SMS your name & email to: 213-985-4413 JGari.com/resume
31. 1. http://tv.adobe.com/watch/cs-55-web-premium-fea
2. http://jquerymobile.com
3. http://www.phonegap.com
4. http://html5doctor.com
5. http://www.sencha.com/products/touch
6. http://joapp.com
7. http://dhtmlx.com/touch
8. http://developer.apple.com
9. http://lampsig.org
10. http://www.meetup.com/LAMPsig
SMS your name & email to: 213-985-4413 JGari.com/resume