Intro to mobile development with sencha touch

By
Jorge Garifuna
Professional Web Developer
info@GariDigital.com
213-915-4402

JGari.com/resume

Twitter: @jgarifuna

SMS your Name and Email to:

213-985-4413
SMS your name & email to: 213-985-4413 JGari.com/resume

How I came about Sencha Touch


• Very Expensive

• Time Consuming

• Maintenance Nightmare


• Leverage Existing Skills
Sencha Touch

• Get to Market Sooner

• Reach More Users

JGari.com/resume

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

Join LA PhoneGap at: http://www.meetup.com/laphonegap/

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


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


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


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

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


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 app
4. Navigate to http://localhost/myAppLocation
and see the default app

 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


 index.html
 app.js
 app/view/Main.js


xtype Class xtype Class xtype Class
----------------- --------------------- ----------------- --------------------- ----------------- ---------------------
actionsheet Ext.ActionSheet navigationview Ext.navigation.View Form Components
audio Ext.Audio datepicker Ext.picker.Date ---------------------------------------------
button Ext.Button picker Ext.picker.Picker checkboxfield Ext.field.Checkbox
component Ext.Component pickerslot Ext.picker.Slot datepickerfield Ext.field.DatePicker
container Ext.Container slider Ext.slider.Slider emailfield Ext.field.Email
image Ext.Img thumb Ext.slider.Thumb field Ext.field.Field
label Ext.Label tabbar Ext.tab.Bar hiddenfield Ext.field.Hidden
loadmask Ext.LoadMask tabpanel Ext.tab.Panel input Ext.field.Input
map Ext.Map tab Ext.tab.Tab numberfield Ext.field.Number
mask Ext.Mask viewport Ext.viewport.Default passwordfield Ext.field.Password
media Ext.Media radiofield Ext.field.Radio
panel Ext.Panel DataView Components searchfield Ext.field.Search
segmentedbutton Ext.SegmentedButton --------------------------------------------- selectfield Ext.field.Select
sheet Ext.Sheet dataview Ext.dataview.DataView sliderfield Ext.field.Slider
spacer Ext.Spacer list Ext.dataview.List spinnerfield Ext.field.Spinner
title Ext.Title listitemheader textfield Ext.field.Text
titlebar Ext.TitleBar Ext.dataview.ListItemHeader textareafield Ext.field.TextArea
toolbar Ext.Toolbar nestedlist Ext.dataview.NestedList textareainput Ext.field.TextAreaInput
video Ext.Video dataitem togglefield Ext.field.Toggle
carousel Ext.carousel.Carousel Ext.dataview.component.DataItem urlfield Ext.field.Url
carouselindicator Ext.carousel.Indicator fieldset Ext.form.FieldSet
formpanel Ext.form.Panel

 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 project


 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


 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


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


1. Copy your packaged Sencha Touch app to www folder in
xcode


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

 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


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


 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

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

Intro to mobile development with sencha touch

More Related Content

Viewers also liked

Similar to Intro to mobile development with sencha touch

Intro to mobile development with sencha touch