Your SlideShare is downloading. ×
  • Like
  • Save
Create Cross-Platform Native Mobile Apps in Flex with ELIPS Studio
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Create Cross-Platform Native Mobile Apps in Flex with ELIPS Studio

  • 6,252 views
Published

In this FITC SF 2010 session, Guilhem explains what makes development of mobile applications development so special compared to Rich Internet Applications. You will learn what it means to be "native", …

In this FITC SF 2010 session, Guilhem explains what makes development of mobile applications development so special compared to Rich Internet Applications. You will learn what it means to be "native", why it matters for performance and user experience, and how OpenPlug's ELIPS Studio turns your Flex code into a native app. You'll also hear about the bewildering diversity in mobile operating systems and how ELIPS Studio helps keeping fragmentation at bay. Taking examples from popular apps created by ELIPS Studio users and some hands-on code examples, Guilhem will take you through the entire journey of specifying, designing, developing, testing and publishing an app created in Flex with ELIPS Studio on popular devices.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • use of openplug


    www.linefocus.com
    Are you sure you want to
    Your message goes here
  • Yes b00bs , please
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,252
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
2
Likes
7

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
  • Session Title: Create cross-platform native mobile apps in Flex with OpenPlug ELIPS Studio Session description: In this session you will learn how ELIPS Studio allows Flex developers to create native mobile applications in Flex for iPhone, Android, Windows Mobile and Symbian.
  • 1 OpenPlug mobile Flex component -> mapped to native UI control 2 different user experiences Physics / momentum List items grouping touch behavious Scrollbar behaviour Many, many small differences that make each platform “special” and are too difficult to handle in Flex code
  • Almanaque Anos 80 #1 paid app in Brazil tweetMWC -> all app stores
  • Almanaque Anos 80 #1 paid app in Brazil tweetMWC -> all app stores

Transcript

  • 1. Create native cross-platform mobile apps in Flex with ELIPS |Studio Guilhem Ensuque [email_address] Twitter: @gensuque_op #elips3 San Francisco 17 August 2010
  • 2. Who we are
    • Founded 2002, VC-backed
    • 30 people, France and Taiwan
    • Focus on mobile device software and tools
    • Software shipping in millions of devices
    Experts in mobile software development Copyright OpenPlug 2010
  • 3. OpenPlug Products & Customers 3G Telephony Stack for Linux devices Cross-platform Mobile Application Development Tool Software platform for mass-market mobile phones Copyright OpenPlug 2010
  • 4. Copyright OpenPlug 2010 Create native cross-platform mobile apps in Flex with ELIPS |Studio … what a mouthful … ! 
  • 5. Copyright OpenPlug 2010 “ Create” – mobile IS different Design Code Test Publish
    • UI controls
    • Platforms
    • Touch, GPS, Cam, ...
    • Content / HIG
    • Performance
    • Memory
    • Connectivity
    • New APIs
    • Variants
    • Simulation
    • Device
    • Signing
    • Approval
    Spec
  • 6. Copyright OpenPlug 2010 “ native” – what it’s NOT
    • Compiled to VM byte code
    • Interpreted by a VM / runtime
    • Hiding host system features
    • Replacing host system UI
  • 7. Copyright OpenPlug 2010 “ native” – what it IS
    • Compiled to machine code
    • Executed by the CPU directly
    • Using host system features
    • Using host system UI controls
  • 8. Copyright OpenPlug 2010 “ native” – how it works with ELIPS |Studio Cross-compile to C++ Build to binary ELIPS COMPILER ELIPS PACKAGER Select Devices Sign Packages ELIPS SDK Code your App in ActionScript 3 and MXML Publish your Native Apps
  • 9. Copyright OpenPlug 2010 “ native” – why ? #1 : Performance Grant Skinner’s AS3 bench (AS3 Functions, ArrayIterators, Scope) HTC Desire Android 2.1 “Éclair” Cortex-A8 CPU 1 GHz v2515540 6 times faster ! (and we can do better)
  • 10. Copyright OpenPlug 2010 “ native” – why ? 1 code line <mob: GroupList > 2 different UX #2: Get the native look & feel ... ... with no extra work.
  • 11. Copyright OpenPlug 2010 “ cross-platform” – a mess iPhone iPod iPad BB OS 6 S60 5 th Ed S60 3 th Ed Win Mob 6 Win Mob 6.5 Win Phone 7 Symbian ^3 iPhone 3.1 iOS 4.0 iPad 3.x Android 1.6.x Android 2.1.x Android 2.2 Web OS Bada 1.0 Bada x.y Maemo 3 Maemo 4 Meego 1 JDE v4.x JDE v3.x
  • 12. Copyright OpenPlug 2010 “ cross-platform” – some data Smartphones: 54 millions shipped in Q1 Feature phones: 260 millions shipped in Q1
  • 13. Copyright OpenPlug 2010 “ cross-platform” – some data Smartphone OSes Q1 2010 shipments Source: Gartner http://www.gartner.com/it/page.jsp?id=1372013
  • 14. Copyright OpenPlug 2010 “ cross-platform” – some data Smartphone OSes Q1 2010 shipments Source: Gartner http://www.gartner.com/it/page.jsp?id=1372013
  • 15. “ cross-platform” in action Copyright OpenPlug 2010 Download our TweetMWC application from ANY App Store
  • 16. Example app – TweetMWC
    • App developed in Flex Buidler in 2w
    • Uses open source twitter AS3 library
    • optimized assets for each screen size
    • Approved and distributed in 4 app stores
    1 Flex code base  4 platforms Copyright OpenPlug 2010 Available on Available on Available on
  • 17. “ Mobile Apps” – big opportunity Source: Mobile Applications & Apps Stores, Juniper Research, 2009 Mobile Apps Downloads (in millions) Copyright OpenPlug 2010
  • 18. Copyright OpenPlug 2010 “ Mobile Apps” – monetise easily with ELIPS |Studio Compliant with Apple’s App Store ToS Simplified publishing to all app Stores Increased revenue with mobile ads
  • 19. #1 Paid App in Brazil Created by Baiao Games with ELIPS |Studio (as of June 30 2010) Copyright OpenPlug 2010
  • 20. #2 Free App in Belgium Created by Exuvis with ELIPS |Studio (as of July 1 2010) Copyright OpenPlug 2010
  • 21. Copyright OpenPlug 2010 Demo time - let’s create an app …
  • 22. Download ELIPS |Studio
    • Join the OpenPlug Developer Zone
    • http:// developer.openplug.com
    • Download ELIPS|Studio Free
    • All materials available
      • Installation Guide
      • Setup Guide for each platform
      • Tutorials
      • API reference
      • Samples & Videos
      • Support forum
    Copyright OpenPlug 2010
  • 23. Getting started with ELIPS |Studio
    • Mac and Windows installers available
    • Pre-requisites
      • Flex Builder 3 or Flash Builder 4 installed
      • For iPhone: you need a Mac + xCode / iPhone SDK
      • Register to each developer program
      • Get a device
    • Don’t rush into coding
      • Check the samples first (UICatalog)
      • Start from scratch with a simple app
      • Then (and only then) start creating your app
    Copyright OpenPlug 2010
  • 24. Copyright OpenPlug 2010 Step 1 - Specification
    • Define “what” your application does and looks like
      • Screen flows and UI controls (using our <mob:>)
      • Which devices will your app target (iPhone, Android …)
      • Which device features (GPS, Camera, Contacts, Tel …)
      • Interface with web services (HTTP requests)
      • App Store content guidelines (no b00bs, please !)
    Spec
  • 25. Copyright OpenPlug 2010 Step 2 - Design Design
    • Internal object model (e.g. MVC pattern/framework)
    • Optimum CPU / Memory usage (see tips on our forum)
    • Data loading and persistence (XML files)
    • REST Interface with web services (XML, JSON)
    • Use of 3 rd -party AS3 libraries (e.g. opensource)
    List View Twitter lib cache HTTP Req / JSON loadHashTagSettings() loadCachedData()
  • 26. Copyright OpenPlug 2010 Step 3 - Code Code
    • See our API reference http://developer.openplug.com/code/api
    • Use our <mob: > namespace
    • Choose WindowedApplication or ScreenStackApplication
    • Pack your resources in variants folder
    • Use platform-specific conditional tests
  • 27. Copyright OpenPlug 2010 Step 4 – Build & Test Test
    • Test your app with our Simulator (AIR-based)
    • Test with a remote testing service like http://www.perfectomobile.com/
    • Test on device ! (and test again, it is never enough  )
  • 28. Copyright OpenPlug 2010 Step 5 - Publish Publish
    • Register to the App Stores you want (there are 79 and counting !)
    • Get the necessary stuff from the App Store (certificate, etc.)
    • Set the publishing settings for your app (icons, cert keys …)
    • Final build & Submit (and wait  )
  • 29. ELIPS |Studio – Key Takeaway You are a Flex developer ? Now you are a mobile expert ! Copyright OpenPlug 2010
  • 30. Copyright OpenPlug 2010 Thank You - Q & As http://developer.openplug.com Follow us on Twitter: @elips3 Guilhem Ensuque [email_address] Twitter: @gensuque_op #elips3 San Francisco 17 August 2010