Intro to mobile development with sencha touch
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Intro to mobile development with sencha touch

  • 1,199 views
Uploaded on

Opportunities for mobile development are still growing at an accelerating rate! ...

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,199
On Slideshare
1,199
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
85
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. By Jorge GarifunaProfessional Web Developer info@GariDigital.com 213-915-4402 JGari.com/resume Twitter: @jgarifuna
  • 2. How I came about Sencha TouchSMS your name & email to: 213-985-4413 JGari.com/resume
  • 3. • Very Expensive • Time Consuming • Maintenance NightmareSMS your name & email to: 213-985-4413 JGari.com/resume
  • 4. • Leverage Existing SkillsSencha Touch • Get to Market Sooner • Reach More Users JGari.com/resume
  • 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 JGari.com/resume
  • 6. Join LA PhoneGap at: http://www.meetup.com/laphonegap/
  • 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 JGari.com/resume
  • 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 JGari.com/resume
  • 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 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
  • 13. 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 SDK3. 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 SMS your name & email to: 213-985-4413 JGari.com/resume
  • 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 JGari.com/resume
  • 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 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 apps 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.jsSMS your name & email to: 213-985-4413 JGari.com/resume
  • 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 Ext.tab.Bar hiddenfield Ext.field.Hiddenloadmask Ext.LoadMask tabpanel Ext.tab.Panel input Ext.field.Inputmap Ext.Map tab Ext.tab.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.  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 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 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 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.action2. 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 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 CS6SMS your name & email to: 213-985-4413 JGari.com/resume
  • 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 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 ▪ @jgarifunaSMS your name & email to: 213-985-4413 JGari.com/resume
  • 31. 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 SMS your name & email to: 213-985-4413 JGari.com/resume