Building Cross-Platform Mobile Apps with Sencha Touch Bundle

Transcript

1. Daniel Gallo @DanielJGallo Building Cross-Platform Mobile Apps with Sencha Touch Bundle
2. ‣ About me and introduction ‣ The Sencha Touch Bundle ‣ Where Sencha fits in ‣ Example app ‣ Getting Started ‣ Questions Overview
3. 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#)
4. Sencha Rapid and easy development of rich web apps for the broadest range of devices from IE6 to the latest tablet
5. 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
6. Frameworks
7. ‣ 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
8. ‣ 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
9. ‣ 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
10. Tools
11. 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
12. 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
13. ‣ 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
14. 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
15. Create a Sencha Touch app
16. Packaging Apps
17. ‣ 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
18. 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
19. PhoneGap Build Sencha Mobile Packager Building Your App
20. sencha package build settings.json From command line: Building Your App
21. { "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/Icon@72.png", "114": "resources/icons/Icon@2x.png", "144": "resources/icons/Icon@144.png" }, ... Building Your App
22. ... "configuration": "Debug", "platform": "iOS", "deviceType": "iPad", "certificateAlias": "iPhone Developer", "minOSVersion": "4.0", "orientations": [ "portrait", "landscapeLeft", "landscapeRight", "portraitUpsideDown" ] } Building Your App
23. From Sencha Architect: Building Your App
24. Building Your App build.phonegap.com
25. Getting Started
26. Sencha Touch Bundle sencha.com/products/touch-bundle ‣ Register for a 30-day trial
27. Documentation and Examples docs.sencha.com
28. Documentation and Examples docs.sencha.com
29. 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
30. Getting Involved
31. Meetups meetup.com ‣ Sencha meetup groups organised by Sencha community ‣ Good opportunity to meet and discuss all things Sencha!
32. ‣ 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
33. Questions
34. Create amazing apps built on web standards Daniel Gallo @DanielJGallo