Opportunities for mobile development are still growing at an accelerating rate!
Sencha Touch is one of the hidden frameworks for developing mobile apps for IOS (iPhone, iPad, iPod Touch), Android and BlackBerry.
The industry calls this cross-platform mobile development and it's all done with HTML5.
Sencha Touch is the closest you can get to a true mobile native experience, while leveraging your existing skills, yet the learning curve for this framework could be very steep and at times intimidating.
In this talk, you are going to learn:
- How to get started with Sencha Touch.
- The life cycle of a Sencha Touch app.
- How Sencha Touch uses models, views, controllers and stores.
- How to test your app on IOS devices.
- How to test your app on Android devices.
- The easiest and fastest way to be productive with Sencha Touch.
- And if time permits, how to package your mobile app for submission to the App Stores.
About Jorge Garifuna:
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 (DDD) 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.
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 community group.
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Intro to mobile development with sencha touch
1. By
Jorge Garifuna
Professional Web Developer
info@GariDigital.com
213-915-4402
JGari.com/resume
Twitter: @jgarifuna
2. How I came about Sencha Touch
SMS your name & email to: 213-985-4413 JGari.com/resume
3. • Very Expensive
• Time Consuming
• Maintenance Nightmare
SMS your name & email to: 213-985-4413 JGari.com/resume
4. • Leverage Existing Skills
Sencha Touch
• Get to Market Sooner
• Reach More Users
JGari.com/resume
5. 1. HTML5 Mobile Framework
2. Build Mobile Apps for IOS, Android & BlackBerry
3. Over 50 UI components
4. Code in JavaScript
5. The closest you can get to mobile native experience
6. Free under the GPLv3
JGari.com/resume
7. 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
JS
Distribution Web Hosting Web Hosting, App Store,
Market
SMS your name & email to: 213-985-4413 JGari.com/resume
8. 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
9. 1. SketchyPad/iMockups for wireframing
2. DreamWeaver CS5.5+
3. Sencha Touch
4. PhoneGap
5. Xcode 4, NetBeans & Eclipse
6. IOS Simulator & Real iPhone
7. Android Emulator & Real Phone
SMS your name & email to: 213-985-4413 JGari.com/resume
10. SMS your name & email to: 213-985-4413 JGari.com/resume
11. SMS your name & email to: 213-985-4413 JGari.com/resume
12. SMS your name & email to: 213-985-4413 JGari.com/resume
14. SMS your name & email to: 213-985-4413 JGari.com/resume
15. 1. Visit:
http://www.sencha.com/products/touch/do
wnload/
2. Download and install (in web folder) Sencha
Touch 2 SDK
3. Download and install SDK Tools
4. Setup local webserver (MAMP or WAMP)
5. Setup modern web browser (Chrome/Safari)
6. Get more details from:
http://docs.sencha.com/touch/2-
0/#!/guide/getting_started
SMS your name & email to: 213-985-4413 JGari.com/resume
16. 1. Add SDK Tools to path
2. On OSX add to ~.bash_profile
1. export PATH=/Applications/SenchaSDKTools-2.0.0-beta3:$PATH
3. On Windows
1. Follow your usual steps
SMS your name & email to: 213-985-4413 JGari.com/resume
17. 1. Open Terminal or Command Line
2. Change to directory with Sencha Touch 2
SDK
1. Preferably located on web path
3. Type:
1. sencha generate app APPNAMESPACE ../myAppLocation
1. Change APPNAMESPACE to anything you want
2. ../myAppLocation is the directory of your name app
4. Navigate to http://localhost/myAppLocation
and see the default app
SMS your name & email to: 213-985-4413 JGari.com/resume
18. SMS your name & email to: 213-985-4413 JGari.com/resume
19. Models: represent a type of object in your app - for example an e-commerce app might have models for Users, Products and
Orders
Views: are responsible for displaying data to your users and leverage the built in Components in Sencha Touch
Controllers: handle interaction with your application, listening for user taps and swipes and taking action accordingly
Stores: are responsible for loading data into your app and power Components like Lists and DataViews
Profiles: enable you to easily customize your app's UI for tablets and phones while sharing as much code as possible
SMS your name & email to: 213-985-4413 JGari.com/resume
20. index.html
app.js
app/view/Main.js
SMS your name & email to: 213-985-4413 JGari.com/resume
22. Modify app.json
▪ Change: "logger": "no”
▪ To: "logger": false
▪ NOTE: you are fixing a bug
From Terminal change to your app directory
Type:
▪ sencha app build -e production -d ../../builds/test1
SMS your name & email to: 213-985-4413 JGari.com/resume
23. To distribute to multiple platforms(IOS, Android, BlackBerry)
Visit: http://phonegap.com
Download latest
Install as instructed at
▪ http://docs.phonegap.com/en/2.0.0/guide_getting-started_index.md.html
SMS your name & email to: 213-985-4413 JGari.com/resume
24. To test in IOS
Load up xcode (mac only)
Create a new phonegap/cordova project as instructed at
▪ http://docs.phonegap.com/en/2.0.0/guide_getting-started_ios_index.md.html#G
SMS your name & email to: 213-985-4413 JGari.com/resume
25. 1. Run PhoneGap app in simulator
2. This will create a www folder within file system, but not
in xcode
3. Copy www folder from file system to xcode project
SMS your name & email to: 213-985-4413 JGari.com/resume
26. 1. Copy your packaged Sencha Touch app to www folder in
xcode
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
1. 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
2. Select your IOS Device from drop down list of devices
next to the run button
3. Click the Run button
SMS your name & email to: 213-985-4413 JGari.com/resume
28. Setup PhoneGap for Android as instructed at
http://docs.phonegap.com/en/2.0.0/guide_getting-sta
20Android
Copy your Sencha Touch app to assets/www
folder
Run app
You can also use PhoneGap Build from Adobe
Dreamweaver CS6
SMS your name & email to: 213-985-4413 JGari.com/resume
29. 1. From Android Market install
AppInstaller or
Quick App Install
1. Insert Micro SD Card on Android Phone
2. Connect Android Phone to Computer Via USB
3. Mount Phone to Computer
1. Slide down from top bar
2. Select USB Connected
3. Click mount button
4. Check mounted card under Devices on Mac OS Finder
5. Copy Newly created .apk files from computer to Phone Card
1. Located in APP_NAME_Android/bin
6. Unmount card from computer
7. Turn off USB on Phone
1. Slide down from top bar
2. Click “Turn off USB storage”
3. Click on “turn off” button
8. Install App either with AppInstaller or Quick App Install
9. Open App
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://www.phonegap.com
2. http://www.sencha.com/products/touch
3. http://docs.sencha.com/touch/2-0/#!/guide
4. http://docs.sencha.com/touch/2-0/#!/api
5. http://miamicoder.com/2012/how-to-create-
a-sencha-touch-2-app-part-1/
6. http://developer.apple.com
7. http://lampsig.org
8. http://www.meetup.com/LAMPsig
SMS your name & email to: 213-985-4413 JGari.com/resume