Intro to mobile development with sencha touch


Published on

  • Be the first to comment

  • Be the first to like this

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. SMS your Name and Email to: 213-985-4413SMS your name & email to: 213-985-4413
  3. 3. How I came about Sencha TouchSMS your name & email to: 213-985-4413
  4. 4. • Very Expensive • Time Consuming • Maintenance NightmareSMS your name & email to: 213-985-4413
  5. 5. • Leverage Existing SkillsSencha Touch • Get to Market Sooner • Reach More Users
  6. 6. 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
  7. 7. Join LA PhoneGap at:
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. SMS your name & email to: 213-985-4413
  12. 12. SMS your name & email to: 213-985-4413
  13. 13. SMS your name & email to: 213-985-4413
  14. 14.
  15. 15. SMS your name & email to: 213-985-4413
  16. 16. 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
  17. 17. 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
  18. 18. 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 app4. Navigate to http://localhost/myAppLocation and see the default app SMS your name & email to: 213-985-4413
  19. 19. SMS your name & email to: 213-985-4413
  20. 20.  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
  21. 21.  index.html app.js app/view/Main.jsSMS your name & email to: 213-985-4413
  22. 22. 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
  23. 23.  Modify app.json, if not already updated ▪ 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 ▪ NOTE: this may create build dir within projectSMS your name & email to: 213-985-4413
  24. 24.  To distribute to multiple platforms(IOS, Android, BlackBerry) Visit: Download latest Install as instructed at ▪ SMS your name & email to: 213-985-4413
  25. 25.  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
  26. 26. 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
  27. 27. 1. Copy your packaged Sencha Touch app to www folder in xcode SMS your name & email to: 213-985-4413
  28. 28. 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
  29. 29.  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
  30. 30. 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
  31. 31.  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
  32. 32. 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