Intro to mobile development with sencha touch


Published on

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.

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Intro to mobile development with sencha touch

  1. 1. By Jorge GarifunaProfessional Web Developer 213-915-4402 Twitter: @jgarifuna
  2. 2. How I came about Sencha TouchSMS your name & email to: 213-985-4413
  3. 3. • Very Expensive • Time Consuming • Maintenance NightmareSMS your name & email to: 213-985-4413
  4. 4. • Leverage Existing SkillsSencha Touch • Get to Market Sooner • Reach More Users
  5. 5. 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
  6. 6. Join LA PhoneGap at:
  7. 7. Web MobilePresentation HTML HTML5Styling CSS CSS3Logic PHP, Perl, Python, Ruby, PHP, Objective-C, Java, Java, C, C++, Javascript JavascriptDatabase MySQL, PostgreSQL SQLiteIDE NetBeans, Eclipse, Xcode, Eclipse, DreamWeaver DreamWeaver CS5.5+Frameworks CakePHP, Symphony, Jquery Mobile, Sencha ATK, Jquery, Sencha EXT Touch, Jo, PhoneGap JSDistribution Web Hosting Web Hosting, App Store, Market SMS your name & email to: 213-985-4413
  8. 8. 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 SMS your name & email to: 213-985-4413
  9. 9. 1. SketchyPad/iMockups for wireframing2. DreamWeaver CS5.5+3. Sencha Touch4. PhoneGap5. Xcode 4, NetBeans & Eclipse6. IOS Simulator & Real iPhone7. Android Emulator & Real Phone SMS your name & email to: 213-985-4413
  10. 10. SMS your name & email to: 213-985-4413
  11. 11. SMS your name & email to: 213-985-4413
  12. 12. SMS your name & email to: 213-985-4413
  13. 13.
  14. 14. SMS your name & email to: 213-985-4413
  15. 15. 1. Visit: wnload/2. Download and install (in web folder) Sencha Touch 2 SDK3. Download and install SDK Tools4. Setup local webserver (MAMP or WAMP)5. Setup modern web browser (Chrome/Safari)6. Get more details from: 0/#!/guide/getting_started SMS your name & email to: 213-985-4413
  16. 16. 1. Add SDK Tools to path2. On OSX add to ~.bash_profile 1. export PATH=/Applications/SenchaSDKTools-2.0.0-beta3:$PATH3. On Windows 1. Follow your usual steps SMS your name & email to: 213-985-4413
  17. 17. 1. Open Terminal or Command Line2. Change to directory with Sencha Touch 2 SDK 1. Preferably located on web path3. Type: 1. sencha generate app APPNAMESPACE ../myAppLocation 1. Change APPNAMESPACE to anything you want 2. ../myAppLocation is the directory of your name app4. Navigate to http://localhost/myAppLocation and see the default app SMS your name & email to: 213-985-4413
  18. 18. SMS your name & email to: 213-985-4413
  19. 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 apps UI for tablets and phones while sharing as much code as possible SMS your name & email to: 213-985-4413
  20. 20.  index.html app.js app/view/Main.jsSMS your name & email to: 213-985-4413
  21. 21. xtype Class xtype Class xtype Class----------------- --------------------- ----------------- --------------------- ----------------- ---------------------actionsheet Ext.ActionSheet navigationview Ext.navigation.View Form Componentsaudio Ext.Audio datepicker Ext.picker.Date ---------------------------------------------button Ext.Button picker Ext.picker.Picker checkboxfield Ext.field.Checkboxcomponent Ext.Component pickerslot Ext.picker.Slot datepickerfield Ext.field.DatePickercontainer Ext.Container slider Ext.slider.Slider emailfield Ext.field.Emailimage Ext.Img thumb Ext.slider.Thumb field Ext.field.Fieldlabel Ext.Label tabbar hiddenfield Ext.field.Hiddenloadmask Ext.LoadMask tabpanel input Ext.field.Inputmap Ext.Map tab numberfield Ext.field.Numbermask Ext.Mask viewport Ext.viewport.Default passwordfield Ext.field.Passwordmedia Ext.Media radiofield Ext.field.Radiopanel Ext.Panel DataView Components searchfield Ext.field.Searchsegmentedbutton Ext.SegmentedButton --------------------------------------------- selectfield Ext.field.Selectsheet Ext.Sheet dataview Ext.dataview.DataView sliderfield Ext.field.Sliderspacer Ext.Spacer list Ext.dataview.List spinnerfield Ext.field.Spinnertitle Ext.Title listitemheader textfield Ext.field.Texttitlebar Ext.TitleBar Ext.dataview.ListItemHeader textareafield Ext.field.TextAreatoolbar Ext.Toolbar nestedlist Ext.dataview.NestedList textareainput Ext.field.TextAreaInputvideo Ext.Video dataitem togglefield Ext.field.Togglecarousel Ext.carousel.Carousel Ext.dataview.component.DataItem urlfield Ext.field.Urlcarouselindicator Ext.carousel.Indicator fieldset Ext.form.FieldSet formpanel Ext.form.Panel
  22. 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/test1SMS your name & email to: 213-985-4413
  23. 23.  To distribute to multiple platforms(IOS, Android, BlackBerry) Visit: Download latest Install as instructed at ▪ SMS your name & email to: 213-985-4413
  24. 24.  To test in IOS Load up xcode (mac only) Create a new phonegap/cordova project as instructed at ▪ SMS your name & email to: 213-985-4413
  25. 25. 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 SMS your name & email to: 213-985-4413
  26. 26. 1. Copy your packaged Sencha Touch app to www folder in xcode SMS your name & email to: 213-985-4413
  27. 27. 1. You need to be a paid IOS Developer 1. Your IOS Device must be registered at: 1. Connect IOS Device to computer via USB3. Navigate to newly built IOS Project  Located at APP_NAME_IOS1. 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 Info2. Select your IOS Device from drop down list of devices next to the run button3. Click the Run button SMS your name & email to: 213-985-4413
  28. 28.  Setup PhoneGap for Android as instructed at  20Android Copy your Sencha Touch app to assets/www folder Run app You can also use PhoneGap Build from Adobe Dreamweaver CS6SMS your name & email to: 213-985-4413
  29. 29. 1. From Android Market install  AppInstaller or  Quick App Install1. Insert Micro SD Card on Android Phone2. Connect Android Phone to Computer Via USB3. Mount Phone to Computer 1. Slide down from top bar 2. Select USB Connected 3. Click mount button4. Check mounted card under Devices on Mac OS Finder5. Copy Newly created .apk files from computer to Phone Card 1. Located in APP_NAME_Android/bin6. Unmount card from computer7. Turn off USB on Phone 1. Slide down from top bar 2. Click “Turn off USB storage” 3. Click on “turn off” button8. Install App either with AppInstaller or Quick App Install9. Open App SMS your name & email to: 213-985-4413
  30. 30.  While you think…  Sign up to LAMPsig’s mailing list at: ▪  Join LAMPsig on Meetup at: ▪  Jorge Garifuna ▪ ▪ @jgarifunaSMS your name & email to: 213-985-4413
  31. 31. 1. http://www.phonegap.com2.!/guide4.!/api5. a-sencha-touch-2-app-part-1/6. http://lampsig.org8. SMS your name & email to: 213-985-4413