Zenika © 2011 1

Accélérez et optimisez vos

développements d'applications mobiles

WsN Replay Lyon - Jeudi 10 novembre 2011

François Fornaciari - francois.fornaciari@zenika.com

Billy Thach – billy.thach@zenika.com

Zenika © 2011 2

What’s Next 2011 Présentation Flex Mobile

Retour et décryptage de la présentation de Michaël Chaize

Enjeux des applications RIA (Rich Internet Application) Présentation du framework Flex Développement d’une application Flex Mobile Plus quelques démos…

Zenika © 2011 3

Adobe Flex Introduction

Objectifs des applications RIA o Améliorer l’expérience utilisateur o Proposer du contenu riche et dynamique

Framework produit par Adobe o Contient un ensemble de composants permettant de

développer des applications RIA o Open-source et gratuit depuis 2007

Propose 3 modes de déploiement o Web : navigateur + Flash Player o Desktop : runtime AIR (Adobe Integrated Runtime) o Mobile : runtime AIR

Zenika © 2011 4

Adobe Flex Composants

Zenika © 2011 5

MXML

o Syntaxe déclarative de création d’interface

ActionScript

o Syntaxe familière aux développeurs JAVA

Adobe Flex MXML vs ActionScript

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:Panel> <s:Label text="Label" /> <s:Button label="Button" /> </s:Panel> </s:Application>

package com.zenika.flex { public class MyClass interface MyInterface { public function MyClass() { } public function doSomething():String { } } }

Zenika © 2011 6

Adobe Flex Intégration serveur

Communication via des WebServices o JAX-WS ou JAX-RS o Parseur XML natif

Interrogation de services Java (RPC)

o Frameworks dédiés (BlazeDS, GraniteDS, …) o Sérialisation des données (format AMF) o Intégration avec la plupart des frameworks côté serveur

(Spring, EJB, Seam, …)

Push de données o Synchronisation des données entre les différents clients o Envoie de notifications

Zenika © 2011 7

Flex Mobile Introduction

Extension du framework Flex pour le développement d’applications mobiles o Présent depuis la version 4.5 du SDK Flex o OS supportés : iOS, Android, BlackBerry

Selon Adobe, plus de 50% du contenu Web sera accédé depuis un appareil mobile d’ici 2 ans

Au travers de Flex, Adobe cible le développement d’applications multimodales pour les entreprises o Travail collaboratif et mobilité o Outils de développement avancés o Intégration continue

Zenika © 2011 8

Flex Mobile Objectifs

Développer une application compatible avec la plupart des plateformes mobiles existantes o Evite de développer autant d’applications qu’il y a de

plateformes cibles o Bénéficier d’un rendu graphique identique

Capitaliser sur l’expérience acquise lors des

développements Flex Web

Fournir des composants optimisés pour le mobile o List, Button,TextArea,TextInput, ...

Fournir des composants dédiés aux mobiles o ViewNavigatorApplication, SlideViewTransition,

MultiDPIBitmapSource, ...

Zenika © 2011 9

Flex Mobile Tour de Flex

Zenika © 2011 10

Démonstration Présentation

Développement d'une application prototype utilisant la technologie Flex Mobile o Périmètre fonctionnel : recherche et rédaction de

mémos rédigés lors de rencontres en clientèle

Validation de la technologie Flex Mobile concernant la compatibilité de l'application avec différents formats de tablette et de téléphone mobile

Évaluation de la maturité de la technologie Flex Mobile

Coût d'un développeur Flex à s'approprier le framework Flex Mobile

Zenika © 2011 11

Démonstration

Zenika © 2011 12

Flash Builder Introduction (1/2)

Développé par Adobe Basé sur des plugins Eclipse Fonctionnalités principales

o Auto complétion o Refactoring o Développement pour mobile Emulateur Déploiement sur le device branché en USB

o Debugger et profiler Version pour Windows et Mac Licence payante Alternative pour Linux : IntelliJ IDEA

Zenika © 2011 13

Flash Builder Introduction (2/2)

Zenika © 2011 14

Flash Builder OS supportés

Depuis la version 4.5.1 : Burrito o Google Android o Apple iOS o BlackBerryTablet OS

Zenika © 2011 15

Flash Builder Différents types d'application

ViewNavigatorApplication

TabbedViewNavigatorApplication

Zenika © 2011 16

Flash Builder Support multi-résolutions

Tous les appareils non pas la même densité

Configuration du DPI

o Redimensionnement efficace des images vectorielles et du texte en fonction de la résolution

Utilisation de la classe MultiDPIBitmapSource pour insérer des images non vectorisées

Zenika © 2011 17

Flash Builder Designer

Il est possible d'utiliser le mode designer o Prise en charge des différents mobiles (résolutions) o Design en mode portrait au paysage o Editeur WYSIWIG

Zenika © 2011 18

Flash Builder Déploiement Android (1/2)

Mode développement 1. Installer les drivers 2. Connecter l'appareil

Android via USB 3. Exécuter depuis

Flash Builder en spécifiant le device branché

Zenika © 2011 19

Flash Builder Déploiement Android (2/2)

Mode Release Build 1. Exporter l'application

finale 2. Créer / obtenir un

certificat 3. Signer l'application

Zenika © 2011 20

Flash Builder Déploiement iOS (1/2)

Même procédure pour le mode développement et le Release Build

Deux fichiers sont nécessaires pour déployer sur iOS o Génération d'un certificat iOS DeveloperIdentity.p12 Obtenu, par conversion d’un certificat (.pem) avec

OpenSSL en certificat iOS Developer avec iOS Dev Center

o Utilisation d'un fichier de provision *.mobileprovision Contient les ID des devices iOS Fourni par le iOS Dev Center

Zenika © 2011 21

Flash Builder Déploiement iOS (2/2)

Signer l’application avec le certificat iOS et le fichier de provision et déploiement sur iTunes

Zenika © 2011 22

Flash Builder Déploiement : comparatif

iOS Android

Développement - Certificat : Oui - Durée : 10 secondes - Taille : 6 Mo

- Certificat : Non - Durée : 6 secondes - Taille : 2Mo

Release - Certificat : Oui - Durée : 5 min - Taille :10 Mo

- Certificat : Oui - Durée : 10 secondes - Taille : 1Mo

Zenika © 2011 23

Moteur de base de données fourni par le runtime AIR Permet aux applications de stocker des données localement

o Gestion du mode déconnecté

Mise en œuvre o Configuration du fichier dans lequel est persistée la base

de données Généralement dans l’espace de stockage propre à

l’application o Interrogation via des requêtes SQL o Support des transactions o Utilisation très proche du standard JDBC

Développement SQLite

Zenika © 2011 24

Possibilité d’interroger des WebServices sans passer par un serveur intermédiaire o Utilisation des classes HttpService ou WebService o Conversion native du résultat au format XML en structure

objet

Flash Builder propose un outil de génération de code d’appel au WebService à partir du WSDL o Génère les classes permettant d’appeler les méthodes

du WebService o Traitement du résultat asynchrone

Développement WebService

Zenika © 2011 25

Un fichier XML de configuration est généré lors de la création d'un nouveau projet Flex Mobile

Permet de modifier la configuration du projet o Nom et version de l’application o Mode Full screen o Icône application o Etc.

Permet également d'ajouter de la configuration pour un OS en particulier o Ajouts de droit (internet, GPS, …) o Configuration spécifique

Développement Configuration

Zenika © 2011 26

Flex Mobile Etat des lieux (1/2)

Développements familiers si connaissance de Flex Gestion spécifique de la navigation : empilement des vues

o Facile d’utilisation o Mécanisme interne de transmission de données entre les

vues Possibilité d’utiliser les bibliothèques Flex 4.5

o Attention : tous les composants graphiques Flex 4 ne sont pas optimisés pour le mobile

Gestion du mode offline inhérente au développement mobile

Prise en main o Prototypage et déploiement extrêmement rapide sur

Android (exemple avec le Nexus S) o Simulateur de device très pratique

Zenika © 2011 27

Flex Mobile Etat des lieux (2/2)

Composants standards non optimisés pour Flex Mobile o Form, Combobox, ... o A ne pas utiliser pour ne pas dégrader les performances o Composants très courants qui ne sont pas utilisables

avec Flex Mobile Liste de composants supportés assez restreinte

o Framework en pleine évolution Bonne compatibilité entre les différents devices testés Performances générales en dessous de nos espérances

o Nécessité d’aborder la problématique d'optimisation durant les développements

Zenika © 2011 28

Flex Mobile Adaptabilité de l'interface

Prévoir une interface adaptable aux différentes variétés d’écran o Une interface pour tablette ne sera pas pensée de la

même façon qu'une interface pour smartphone Utilisation des pourcentages

o Pratique pour gérer toutes les résolutions o Moins adaptée pour la précision

Difficile de trouver un compromis entre relatif et absolu Tester l'UI sur tous les émulateurs et les devices est souvent

fastidieux mais indispensable !

Zenika © 2011 29

Bibliothèque Eskimo

Permet d’adapter les composants à la plateforme cible Fournit de nouveaux composants

Zenika © 2011 30

What’s Next ? Intégrations natives

Parseur JSON Native Text Input UI o Personnalisation du clavier (email, number, …)

Native Extensions o Intégration de fonctionnalités natives du téléphone o Ex : vibreur, lecteur de carte bleue, équipement

médical, …

Zenika © 2011 31

What’s Next ? Captive Runtime et sécurité

Captive Runtime Support pour Android o Même principe que pour le déploiement iOS o Déploiement simplifié : AIR n’est plus un pré-requis o Garantie sur la version AIR utilisée : tests simplifiés

Encrypted Local Storage for Mobile o Sécurisation des données utilisateur sur le mobile

Et bien d’autres …

Zenika © 2011 32

What’s Next ? Flex 4.6 (1/2)

Ajout de nouveaux composants mobiles optimisés o Meilleures performances : 50 % de gain annoncé o Meilleure compatibilité avec les dernières

plateformes Android et iOS

Flash Builder 4.6 o Intégration des extensions natives o Captive Runtime

Pre-release program

Zenika © 2011 33

What’s Next ? Flex 4.6 (2/2)

Zenika © 2011 34

Flex et HTML 5

Adobe investit à la fois sur les technologies Flex et HTML 5

Flex Mobile au travers du runtime AIR et du framework Flex o Sortie prévue tous les 3 mois d’une nouvelle version

de AIR o Synchronisation des nouvelles versions de Flex avec

AIR (pas nécessairement avec la même fréquence) o Nouveau compilateur nommé « Falcon »

HTML 5 au travers d’outils de génération de contenu o Produit Adobe Edge

Zenika © 2011 35

Ressources

Présentation de Michaël Chaize à la What’s Next 2011 http://www.whatsnextparis.com/agenda.html

Flex http://flex.org/

Tour de Flex http://www.adobe.com/devnet/flex/tourdeflex.html

Tour de Mobile Flex (application Android) http://flex.org/tour-de-mobile-flex/

Zenika © 2011 36