Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Cross-Platform Mobile Apps with Sencha...

Building Cross-Platform Mobile Apps with Sencha Touch Bundle

Daniel Gallo

May 23, 2013
Tweet

More Decks by Daniel Gallo

Other Decks in Technology

Transcript

  1. ‣ About me and introduction ‣ The Sencha Touch Bundle

    ‣ Where Sencha fits in ‣ Example app ‣ Getting Started ‣ Questions Overview
  2. About Me ‣ Daniel Gallo (@DanielJGallo) ‣ Technical Sales Engineer

    for Sencha ‣ Based in the UK ‣ Using Sencha’s frameworks since 2009 ‣ Joined Sencha in February 2012 ‣ Background in web app development (ASP.NET C#)
  3. Sencha Rapid and easy development of rich web apps for

    the broadest range of devices from IE6 to the latest tablet
  4. Sencha Touch Bundle ‣ Suite of mobile development tools and

    components: ‣ Sencha Touch - Single page mobile app dev framework ‣ Sencha Architect - HTML5 visual app builder ‣ Sencha Eclipse Plugin - Enhances coding within Eclipse ‣ Sencha Touch Charts - Interactive HTML5 charts ‣ Sencha Mobile Packager - Device APIs and native wrapping ‣ Support - Technical support, code reviews, bug fix releases
  5. ‣ High-performance mobile HTML5 framework for building cross- platform apps

    ‣ Complete set of appealing and ready-to-use mobile UI components Sencha Touch 2 Mobile HTML5 Framework
  6. ‣ Build applications that run on Android, Apple iOS, BlackBerry,

    and Windows Phone 8 ‣ Native packaging for iOS and Android from Windows and Mac Sencha Touch 2 Mobile HTML5 Framework
  7. ‣ Bring your data to life without the need for

    any plugins ‣ Multi-touch gestures allow users to pinch and zoom through data, spin pie charts, pan line charts, and more Sencha Touch Charts
  8. Sencha Architect App Builder for Sencha frameworks ‣ Visual app

    builder for desktop and mobile ‣ Generates live interfaces ‣ Build UI and code apps directly in Architect ‣ Connect to backends easily ‣ Best practices generated code
  9. Sencha Eclipse Plugin Code Intelligence for Sencha JavaScript frameworks ‣

    Reduce coding errors and increase productivity with full code completion for Sencha Touch 2 ‣ Integrates in to existing Eclipse workflows ‣ Ease and simplify version migrations with type libraries for each framework version ‣ Support for mixins, classes, inheritance, overrides, defines, etc ‣ Code hints and suggestions for base framework and custom classes
  10. ‣ Build native iOS and Android applications using Sencha Touch

    2 ‣ Access native APIs from a Sencha Touch 2 app ‣ Package apps on Windows and Mac Sencha Mobile Packager
  11. Where Sencha Fits In Sencha Touch - Mobile and Tablet

    Sencha Ext JS - Desktop and Laptop Internet / Intranet Database Server SQL Server Oracle Sybase MySQL ... Application Server Java PHP ColdFusion .NET Ruby on Rails ... Web Server IIS Apache Tomcat Websphere ... JSON/XML Transport Layer
  12. ‣ Device information ‣ In-app purchases ‣ SQLite ‣ Camera

    ‣ Connection ‣ Contacts ‣ Geolocation ‣ Notification ‣ Orientation ‣ Push Ext.device.Camera.capture({ success: function(image) { imageView.setSrc(image); }, quality: 75, destination: 'data' }); Sencha Mobile Packager
  13. Ext.Viewport.add({ xtype: 'list', itemTpl: '{First} {Last}', store: { fields: ['First',

    'Last'], data: Ext.device.Contacts.getContacts() } }); Sencha Mobile Packager ‣ Device information ‣ In-app purchases ‣ SQLite ‣ Camera ‣ Connection ‣ Contacts ‣ Geolocation ‣ Notification ‣ Orientation ‣ Push
  14. { "applicationName": "Simple Camera App", "bundleSeedId": "Q8U8378N9L", "applicationId": "com.danielgallo.cameraapp", "outputPath":

    "../build/", "versionString": "1.0", "inputPath": "./", "icon": { "57": "resources/icons/icon.png", "72": "resources/icons/[email protected]", "114": "resources/icons/[email protected]", "144": "resources/icons/[email protected]" }, ... Building Your App
  15. ... "configuration": "Debug", "platform": "iOS", "deviceType": "iPad", "certificateAlias": "iPhone Developer",

    "minOSVersion": "4.0", "orientations": [ "portrait", "landscapeLeft", "landscapeRight", "portraitUpsideDown" ] } Building Your App
  16. Community-driven forum for seeking and o ering help. ‣ Over

    400,000 registered members ‣ Ask questions ‣ O er help to others ‣ Powerful search facility ‣ Premium Forums for paid support subscribers ‣ Monitored by Sencha sta Sencha Forums sencha.com/forum
  17. Meetups meetup.com ‣ Sencha meetup groups organised by Sencha community

    ‣ Good opportunity to meet and discuss all things Sencha!
  18. ‣ Sencha’s annual conference ‣ Interact with Sencha engineers and

    fellow developers ‣ 16th - 19th July in Orlando, Florida ‣ 1,000 developers ‣ 60+ technical sessions ‣ Hackathon senchacon.com