SlideShare ist ein Scribd-Unternehmen logo
1 von 31
Downloaden Sie, um offline zu lesen
By
       Jorge Garifuna
Professional Web Developer
   info@GariDigital.com
        213-915-4402

    JGari.com/resume

   Twitter: @jgarifuna
How I came about Sencha Touch




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


                                     • Time Consuming


                                     • Maintenance Nightmare


SMS your name & email to: 213-985-4413            JGari.com/resume
• 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


  SMS your name & email to: 213-985-4413                       JGari.com/resume
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


     SMS your name & email to: 213-985-4413   JGari.com/resume
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


     SMS your name & email to: 213-985-4413   JGari.com/resume
SMS your name & email to: 213-985-4413   JGari.com/resume
SMS your name & email to: 213-985-4413   JGari.com/resume
SMS your name & email to: 213-985-4413   JGari.com/resume
JGari.com/resume
SMS your name & email to: 213-985-4413   JGari.com/resume
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
     SMS your name & email to: 213-985-4413 JGari.com/resume
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




      SMS your name & email to: 213-985-4413                    JGari.com/resume
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 name app
4.        Navigate to http://localhost/myAppLocation
          and see the default app
 SMS your name & email to: 213-985-4413                   JGari.com/resume
SMS your name & email to: 213-985-4413   JGari.com/resume
   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




      SMS your name & email to: 213-985-4413                                                           JGari.com/resume
 index.html
 app.js
 app/view/Main.js




SMS your name & email to: 213-985-4413   JGari.com/resume
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
   ▪ 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




SMS your name & email to: 213-985-4413              JGari.com/resume
 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
 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
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




    SMS your name & email to: 213-985-4413      JGari.com/resume
1. Copy your packaged Sencha Touch app to www folder in
   xcode




   SMS your name & email to: 213-985-4413   JGari.com/resume
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
     SMS your name & email to: 213-985-4413                       JGari.com/resume
 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



SMS your name & email to: 213-985-4413   JGari.com/resume
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

     SMS your name & email to: 213-985-4413                        JGari.com/resume
 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
SMS your name & email to: 213-985-4413     JGari.com/resume
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
     SMS your name & email to: 213-985-4413   JGari.com/resume

Weitere ähnliche Inhalte

Ähnlich wie Intro to mobile development with sencha touch

PhoneGap talk from Singapore
PhoneGap talk from SingaporePhoneGap talk from Singapore
PhoneGap talk from SingaporeSteve Gill
 
Cross Platform Mobile App Development - An Introduction to Sencha Touch
Cross Platform Mobile App Development - An Introduction to Sencha TouchCross Platform Mobile App Development - An Introduction to Sencha Touch
Cross Platform Mobile App Development - An Introduction to Sencha TouchFolio3 Software
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Heiko Behrens
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildChris Griffith
 
Fluid 3 showcase
Fluid 3  showcaseFluid 3  showcase
Fluid 3 showcasefluid3
 
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCAndroid Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCJim Tochterman
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Jon Arne Sæterås
 
What's New with Windows Phone - FoxCon Talk
What's New with Windows Phone - FoxCon TalkWhat's New with Windows Phone - FoxCon Talk
What's New with Windows Phone - FoxCon TalkSam Basu
 
I like i phone and android but know .net
I like i phone and android but know .netI like i phone and android but know .net
I like i phone and android but know .netChris Love
 
Phonegap facebook- plugin
Phonegap facebook- pluginPhonegap facebook- plugin
Phonegap facebook- pluginSteve Gill
 
Painless Mobile App Development Webinar
Painless Mobile App Development WebinarPainless Mobile App Development Webinar
Painless Mobile App Development WebinarSalesforce Developers
 
I phone app develoment ppt
I phone app develoment   pptI phone app develoment   ppt
I phone app develoment pptsagaroceanic11
 
I phone app develoment ppt
I phone app develoment   pptI phone app develoment   ppt
I phone app develoment pptsagaroceanic11
 
Fiware IoT Proposal & Community
Fiware IoT Proposal & Community Fiware IoT Proposal & Community
Fiware IoT Proposal & Community TIDChile
 
Internet of things the salesforce lego machine cloud
Internet of things   the salesforce lego machine cloudInternet of things   the salesforce lego machine cloud
Internet of things the salesforce lego machine cloudandyinthecloud
 
IoT Quick Demo for Heroku & Salesforce
IoT Quick Demo for Heroku & SalesforceIoT Quick Demo for Heroku & Salesforce
IoT Quick Demo for Heroku & SalesforceAkihiro Iwaya
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegapRakesh Jha
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegapRakesh Jha
 

Ähnlich wie Intro to mobile development with sencha touch (20)

PhoneGap talk from Singapore
PhoneGap talk from SingaporePhoneGap talk from Singapore
PhoneGap talk from Singapore
 
Cross Platform Mobile App Development - An Introduction to Sencha Touch
Cross Platform Mobile App Development - An Introduction to Sencha TouchCross Platform Mobile App Development - An Introduction to Sencha Touch
Cross Platform Mobile App Development - An Introduction to Sencha Touch
 
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
 
Fluid 3 showcase
Fluid 3  showcaseFluid 3  showcase
Fluid 3 showcase
 
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCAndroid Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
 
What's New with Windows Phone - FoxCon Talk
What's New with Windows Phone - FoxCon TalkWhat's New with Windows Phone - FoxCon Talk
What's New with Windows Phone - FoxCon Talk
 
I like i phone and android but know .net
I like i phone and android but know .netI like i phone and android but know .net
I like i phone and android but know .net
 
Phonegap facebook- plugin
Phonegap facebook- pluginPhonegap facebook- plugin
Phonegap facebook- plugin
 
Painless Mobile App Development Webinar
Painless Mobile App Development WebinarPainless Mobile App Development Webinar
Painless Mobile App Development Webinar
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
 
I phone app develoment ppt
I phone app develoment   pptI phone app develoment   ppt
I phone app develoment ppt
 
I phone app develoment ppt
I phone app develoment   pptI phone app develoment   ppt
I phone app develoment ppt
 
Fiware IoT Proposal & Community
Fiware IoT Proposal & Community Fiware IoT Proposal & Community
Fiware IoT Proposal & Community
 
Internet of things the salesforce lego machine cloud
Internet of things   the salesforce lego machine cloudInternet of things   the salesforce lego machine cloud
Internet of things the salesforce lego machine cloud
 
IoT Quick Demo for Heroku & Salesforce
IoT Quick Demo for Heroku & SalesforceIoT Quick Demo for Heroku & Salesforce
IoT Quick Demo for Heroku & Salesforce
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
 
iphone presentation
iphone presentationiphone presentation
iphone presentation
 

Mehr von jgarifuna

Joomla/Mambo CMS
Joomla/Mambo CMSJoomla/Mambo CMS
Joomla/Mambo CMSjgarifuna
 
Joomla/Mambo CMS
Joomla/Mambo CMSJoomla/Mambo CMS
Joomla/Mambo CMSjgarifuna
 
http://www.slideshare.net/jgarifuna/elgg-presentation-ca-032109
http://www.slideshare.net/jgarifuna/elgg-presentation-ca-032109http://www.slideshare.net/jgarifuna/elgg-presentation-ca-032109
http://www.slideshare.net/jgarifuna/elgg-presentation-ca-032109jgarifuna
 
The Elgg Social Networking Framework
The Elgg Social Networking FrameworkThe Elgg Social Networking Framework
The Elgg Social Networking Frameworkjgarifuna
 
Joomla Content Management Systems, Part 3
Joomla Content Management Systems, Part 3Joomla Content Management Systems, Part 3
Joomla Content Management Systems, Part 3jgarifuna
 
Integrating LAMP with Mkahawa Cyber Manager & SQLite
Integrating LAMP with Mkahawa Cyber Manager & SQLiteIntegrating LAMP with Mkahawa Cyber Manager & SQLite
Integrating LAMP with Mkahawa Cyber Manager & SQLitejgarifuna
 
Intro to Quick Web Application Builder (QWAB)
Intro to Quick Web Application Builder (QWAB)Intro to Quick Web Application Builder (QWAB)
Intro to Quick Web Application Builder (QWAB)jgarifuna
 
A practical intro to web development with mongo db and nodejs when, why and ...
A practical intro to web development with mongo db and nodejs  when, why and ...A practical intro to web development with mongo db and nodejs  when, why and ...
A practical intro to web development with mongo db and nodejs when, why and ...jgarifuna
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to phpjgarifuna
 

Mehr von jgarifuna (9)

Joomla/Mambo CMS
Joomla/Mambo CMSJoomla/Mambo CMS
Joomla/Mambo CMS
 
Joomla/Mambo CMS
Joomla/Mambo CMSJoomla/Mambo CMS
Joomla/Mambo CMS
 
http://www.slideshare.net/jgarifuna/elgg-presentation-ca-032109
http://www.slideshare.net/jgarifuna/elgg-presentation-ca-032109http://www.slideshare.net/jgarifuna/elgg-presentation-ca-032109
http://www.slideshare.net/jgarifuna/elgg-presentation-ca-032109
 
The Elgg Social Networking Framework
The Elgg Social Networking FrameworkThe Elgg Social Networking Framework
The Elgg Social Networking Framework
 
Joomla Content Management Systems, Part 3
Joomla Content Management Systems, Part 3Joomla Content Management Systems, Part 3
Joomla Content Management Systems, Part 3
 
Integrating LAMP with Mkahawa Cyber Manager & SQLite
Integrating LAMP with Mkahawa Cyber Manager & SQLiteIntegrating LAMP with Mkahawa Cyber Manager & SQLite
Integrating LAMP with Mkahawa Cyber Manager & SQLite
 
Intro to Quick Web Application Builder (QWAB)
Intro to Quick Web Application Builder (QWAB)Intro to Quick Web Application Builder (QWAB)
Intro to Quick Web Application Builder (QWAB)
 
A practical intro to web development with mongo db and nodejs when, why and ...
A practical intro to web development with mongo db and nodejs  when, why and ...A practical intro to web development with mongo db and nodejs  when, why and ...
A practical intro to web development with mongo db and nodejs when, why and ...
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to php
 

Kürzlich hochgeladen

COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdfPaige Cruz
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimizationarrow10202532yuvraj
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 

Kürzlich hochgeladen (20)

COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf99.99% of Your Traces  Are (Probably) Trash (SRECon NA 2024).pdf
99.99% of Your Traces Are (Probably) Trash (SRECon NA 2024).pdf
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 

Intro to mobile development with sencha touch

  • 1. By Jorge Garifuna Professional Web Developer info@GariDigital.com 213-915-4402 JGari.com/resume Twitter: @jgarifuna
  • 2. How I came about Sencha Touch SMS your name & email to: 213-985-4413 JGari.com/resume
  • 3. • Very Expensive • Time Consuming • Maintenance Nightmare SMS your name & email to: 213-985-4413 JGari.com/resume
  • 4. • Leverage Existing Skills Sencha Touch • Get to Market Sooner • Reach More Users JGari.com/resume
  • 5. 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
  • 6. Join LA PhoneGap at: http://www.meetup.com/laphonegap/
  • 7. 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 SMS your name & email to: 213-985-4413 JGari.com/resume
  • 8. 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 SMS your name & email to: 213-985-4413 JGari.com/resume
  • 9. 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 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
  • 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 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 SMS your name & email to: 213-985-4413 JGari.com/resume
  • 16. 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 SMS your name & email to: 213-985-4413 JGari.com/resume
  • 17. 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 name app 4. 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 app's 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.js SMS 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 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
  • 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/test1 SMS 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 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 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.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 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 CS6 SMS your name & email to: 213-985-4413 JGari.com/resume
  • 29. 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 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 ▪ @jgarifuna SMS your name & email to: 213-985-4413 JGari.com/resume
  • 31. 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 SMS your name & email to: 213-985-4413 JGari.com/resume