Embed Size (px)
DESCRIPTION
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.
Citation preview
ByJorge Garifuna
Professional Web [email protected]
213-915-4402
JGari.com/resume
Twitter: @jgarifuna
JGari.com/resumeSMS your name & email to: 213-985-4413
How I came about Sencha Touch
• Very Expensive
• Time Consuming
• Maintenance Nightmare
JGari.com/resumeSMS your name & email to: 213-985-4413
• Leverage Existing Skills
• Get to Market Sooner
• Reach More Users
JGari.com/resume
Sencha Touch
1. HTML5 Mobile Framework2. Build Mobile Apps for IOS, Android & BlackBerry3. Over 50 UI components4. Code in JavaScript5. The closest you can get to mobile native
experience6. Free under the GPLv3
JGari.com/resume
Join LA PhoneGap at: http://www.meetup.com/laphonegap/
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/resumeSMS your name & email to: 213-985-4413
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/resumeSMS your name & email to: 213-985-4413
1. SketchyPad/iMockups for wireframing
2. DreamWeaver CS5.5+3. Sencha Touch4. PhoneGap5. Xcode 4, NetBeans & Eclipse6. IOS Simulator & Real iPhone7. Android Emulator & Real Phone
JGari.com/resumeSMS your name & email to: 213-985-4413
JGari.com/resumeSMS your name & email to: 213-985-4413
JGari.com/resumeSMS your name & email to: 213-985-4413
JGari.com/resumeSMS your name & email to: 213-985-4413
JGari.com/resume
JGari.com/resumeSMS your name & email to: 213-985-4413
1. Visit: http://www.sencha.com/products/touch/download/
2. Download and install (in web folder) Sencha Touch 2 SDK
3. Download and install SDK Tools4. 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
JGari.com/resumeSMS your name & email to: 213-985-4413
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 Windows1. Follow your usual steps
JGari.com/resumeSMS your name & email to: 213-985-4413
1. Open Terminal or Command Line2. Change to directory with Sencha Touch 2
SDK1. Preferably located on web path
3. Type:1. sencha generate app APPNAMESPACE ../myAppLocation
1. Change APPNAMESPACE to anything you want2. ../myAppLocation is the directory of your name app
4. Navigate to http://localhost/myAppLocation and see the default app
JGari.com/resumeSMS your name & email to: 213-985-4413
JGari.com/resumeSMS your name & email to: 213-985-4413
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
JGari.com/resumeSMS your name & email to: 213-985-4413
index.htmlapp.jsapp/view/Main.js
JGari.com/resumeSMS your name & email to: 213-985-4413
xtype Class----------------- ---------------------Form Components---------------------------------------------checkboxfield Ext.field.Checkboxdatepickerfield Ext.field.DatePickeremailfield Ext.field.Emailfield Ext.field.Fieldhiddenfield Ext.field.Hiddeninput Ext.field.Inputnumberfield Ext.field.Numberpasswordfield Ext.field.Passwordradiofield Ext.field.Radiosearchfield Ext.field.Searchselectfield Ext.field.Selectsliderfield Ext.field.Sliderspinnerfield Ext.field.Spinnertextfield Ext.field.Texttextareafield Ext.field.TextAreatextareainput Ext.field.TextAreaInputtogglefield Ext.field.Toggleurlfield Ext.field.Urlfieldset Ext.form.FieldSetformpanel Ext.form.Panel
xtype Class----------------- ---------------------actionsheet Ext.ActionSheetaudio Ext.Audiobutton Ext.Buttoncomponent Ext.Componentcontainer Ext.Containerimage Ext.Imglabel Ext.Labelloadmask Ext.LoadMaskmap Ext.Mapmask Ext.Maskmedia Ext.Mediapanel Ext.Panelsegmentedbutton Ext.SegmentedButtonsheet Ext.Sheetspacer Ext.Spacertitle Ext.Titletitlebar Ext.TitleBartoolbar Ext.Toolbarvideo Ext.Videocarousel Ext.carousel.Carouselcarouselindicator Ext.carousel.Indicator
xtype Class----------------- ---------------------navigationview Ext.navigation.Viewdatepicker Ext.picker.Datepicker Ext.picker.Pickerpickerslot Ext.picker.Slotslider Ext.slider.Sliderthumb Ext.slider.Thumbtabbar Ext.tab.Bartabpanel Ext.tab.Paneltab Ext.tab.Tabviewport Ext.viewport.Default
DataView Components---------------------------------------------dataview Ext.dataview.DataViewlist Ext.dataview.Listlistitemheader Ext.dataview.ListItemHeadernestedlist Ext.dataview.NestedListdataitem Ext.dataview.component.DataItem
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
JGari.com/resumeSMS your name & email to: 213-985-4413
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
JGari.com/resumeSMS your name & email to: 213-985-4413
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_ind
ex.md.html#Getting%20Started%20with%20iOS
JGari.com/resumeSMS your name & email to: 213-985-4413
1. Run PhoneGap app in simulator2. This will create a www folder within file
system, but not in xcode3. Copy www folder from file system to xcode
project
JGari.com/resumeSMS your name & email to: 213-985-4413
1. Copy your packaged Sencha Touch app to www folder in xcode
JGari.com/resumeSMS your name & email to: 213-985-4413
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. 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 Info5. Select your IOS Device from drop down list of
devices next to the run button6. Click the Run button
JGari.com/resumeSMS your name & email to: 213-985-4413
Setup PhoneGap for Android as instructed at http://docs.phonegap.com/en/2.0.0/guid
e_getting-started_android_index.md.html#Getting%20Started%20with%20Android
Copy your Sencha Touch app to assets/www folder
Run appYou can also use PhoneGap Build
from Adobe Dreamweaver CS6
JGari.com/resumeSMS your name & email to: 213-985-4413
1. 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/resumeSMS your name & email to: 213-985-4413
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▪ [email protected]▪ @jgarifuna
JGari.com/resumeSMS your name & email to: 213-985-4413
1. http://www.phonegap.com2. http://www.sencha.com/products/touch3. http://docs.sencha.com/touch/2-0/#!/
guide4. http://docs.sencha.com/touch/2-0/#!/api5. http://miamicoder.com/2012/how-to-
create-a-sencha-touch-2-app-part-1/6. http://developer.apple.com7. http://lampsig.org8. http://www.meetup.com/LAMPsig
JGari.com/resumeSMS your name & email to: 213-985-4413
