Accélérez et optimisez vos                développements dapplications                           mobiles                  ...
Zenika Rennes & Nantes                Nous suivre sur Twitter : @ZenikaOuestZenika © 2011                                 ...
What’s Next 2011  Présentation Flex Mobile    Retour et décryptage de la présentation de Michaël Chaize         Enjeux d...
Adobe Flex  Introduction    Objectifs des applications RIA     o Améliorer l’expérience utilisateur     o Proposer du con...
Adobe Flex  ComposantsZenika © 2011   5
Adobe Flex  MXML vs ActionScript      MXML         o Syntaxe déclarative de création d’interface                <s:Applic...
Adobe Flex  Intégration serveur    Communication via des WebServices     o JAX-WS ou JAX-RS     o Parseur XML natif    I...
Flex Mobile  Introduction    Extension du framework Flex pour le développement d’applications mobiles     o Présent depui...
Flex Mobile  Objectifs    Développer une application compatible avec la plupart des plateformes mobiles     existantes   ...
Flex Mobile  Tour de FlexZenika © 2011    10
Démonstration  Présentation    Développement dune application prototype utilisant la technologie Flex Mobile     o Périmè...
DémonstrationZenika © 2011     12
Flash Builder  Introduction (1/2)    Développé par Adobe    Basé sur des plugins Eclipse    Fonctionnalités principales...
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 BlackBerryTab...
Flash Builder  Différents types dapplication ViewNavigatorApplication    TabbedViewNavigatorApplicationZenika © 2011      ...
Flash Builder  Support multi-résolutions    Tous les appareils non pas la même densité    Configuration du DPI     o Red...
Flash Builder  Designer    Il est possible dutiliser le mode designer     o Prise en charge des différents mobiles (résol...
Flash Builder  Déploiement Android (1/2) Mode développement  1. Installer les drivers  2. Connecter lappareil Android     ...
Flash Builder  Déploiement Android (2/2) Mode Release Build  1. Exporter lapplication finale  2. Créer / obtenir un certif...
Flash Builder  Déploiement iOS (1/2)       Même procédure pour le mode développement et le Release Build       Deux fich...
Flash Builder  Déploiement iOS (2/2)       Signer l’application avec le certificat iOS et le fichier de provision et     ...
Flash Builder  Déploiement : comparatif                                    iOS                Android          Développeme...
Développement  SQLite    Moteur de base de données fourni par le runtime AIR    Permet aux applications de stocker des d...
Développement  WebService    Possibilité d’interroger des WebServices sans passer par un serveur     intermédiaire      ...
Développement  Configuration    Un fichier XML de configuration est généré lors de la création dun nouveau     projet Fle...
Flex Mobile  Etat des lieux (1/2)    Développements familiers si connaissance de Flex    Gestion spécifique de la naviga...
Flex Mobile  Etat des lieux (2/2)    Composants standards non optimisés pour Flex Mobile     o Form, Combobox, ...     o ...
Flex Mobile  Adaptabilité de linterface    Prévoir une interface adaptable aux différentes variétés d’écran     o Une int...
Bibliothèque  Eskimo  Permet d’adapter les composants à la plateforme cible  Fournit de nouveaux composantsZenika © 2011...
What’s Next ?  Intégrations natives    Parseur JSON    Native Text Input UI     o Personnalisation du clavier (email, nu...
What’s Next ?  Captive Runtime et sécurité    Captive Runtime Support pour Android     o Même principe que pour le déploi...
What’s Next ?  Flex 4.6 (1/2)    Ajout de nouveaux composants mobiles optimisés     o Meilleures performances : 50 % de g...
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 ...
Ressources    Présentation de Michaël Chaize à la What’s Next 2011     http://www.whatsnextparis.com/agenda.html    Flex...
Zenika © 2011   37
Prochain SlideShare
Chargement dans…5
×

What's Next Replay - Flex Mobile

558 vues

Publié le

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
558
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

What's Next Replay - Flex Mobile

  1. 1. Accélérez et optimisez vos développements dapplications mobiles WsN Replay Rennes - Jeudi 24 novembre 2011 Billy ThachZenika © 2011 1
  2. 2. Zenika Rennes & Nantes Nous suivre sur Twitter : @ZenikaOuestZenika © 2011 2 2
  3. 3. 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
  4. 4. 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 AIRZenika © 2011 4
  5. 5. Adobe Flex ComposantsZenika © 2011 5
  6. 6. Adobe Flex MXML vs ActionScript  MXML o Syntaxe déclarative de création d’interface <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>  ActionScript o Syntaxe familière aux développeurs JAVA package com.zenika.flex { public class MyClass interface MyInterface { public function MyClass() { } public function doSomething():String { } } }Zenika © 2011 6
  7. 7. 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 notificationsZenika © 2011 7
  8. 8. 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 continueZenika © 2011 8
  9. 9. 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
  10. 10. Flex Mobile Tour de FlexZenika © 2011 10
  11. 11. Démonstration Présentation  Développement dune 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 lapplication avec différents formats de tablette et de téléphone mobile  Évaluation de la maturité de la technologie Flex Mobile  Coût dun développeur Flex à sapproprier le framework Flex MobileZenika © 2011 11
  12. 12. DémonstrationZenika © 2011 12
  13. 13. 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 IDEAZenika © 2011 13
  14. 14. Flash Builder Introduction (2/2)Zenika © 2011 14
  15. 15. Flash Builder OS supportés  Depuis la version 4.5.1 : Burrito o Google Android o Apple iOS o BlackBerryTablet OSZenika © 2011 15
  16. 16. Flash Builder Différents types dapplication ViewNavigatorApplication TabbedViewNavigatorApplicationZenika © 2011 16
  17. 17. 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éesZenika © 2011 17
  18. 18. Flash Builder Designer  Il est possible dutiliser le mode designer o Prise en charge des différents mobiles (résolutions) o Design en mode portrait au paysage o Editeur WYSIWIGZenika © 2011 18
  19. 19. Flash Builder Déploiement Android (1/2) Mode développement 1. Installer les drivers 2. Connecter lappareil Android via USB 3. Exécuter depuis Flash Builder en spécifiant le device branchéZenika © 2011 19
  20. 20. Flash Builder Déploiement Android (2/2) Mode Release Build 1. Exporter lapplication finale 2. Créer / obtenir un certificat 3. Signer lapplicationZenika © 2011 20
  21. 21. 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 dun certificat iOS § DeveloperIdentity.p12 § Obtenu, par conversion d’un certificat (.pem) avec OpenSSL en certificat iOS Developer avec iOS Dev Center o Utilisation dun fichier de provision § *.mobileprovision § Contient les ID des devices iOS § Fourni par le iOS Dev CenterZenika © 2011 21
  22. 22. Flash Builder Déploiement iOS (2/2)  Signer l’application avec le certificat iOS et le fichier de provision et déploiement sur iTunesZenika © 2011 22
  23. 23. Flash Builder Déploiement : comparatif iOS Android Développement - Certificat : Oui - Certificat : Non - Durée : 10 secondes - Durée : 6 secondes - Taille : 6 Mo - Taille : 2Mo Release - Certificat : Oui - Certificat : Oui - Durée : 10 min - Durée : 10 secondes - Taille : 8 Mo - Taille : 1MoZenika © 2011 23
  24. 24. Développement SQLite  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 JDBCZenika © 2011 24
  25. 25. Développement WebService  Possibilité d’interroger des WebServices sans passer par un serveur intermédiaire  Utilisation des classes HttpService ou WebService  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 asynchroneZenika © 2011 25
  26. 26. Développement Configuration  Un fichier XML de configuration est généré lors de la création dun 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 dajouter de la configuration pour un OS en particulier o Ajouts de droit (internet, GPS, …) o Configuration spécifiqueZenika © 2011 26
  27. 27. 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 pratiqueZenika © 2011 27
  28. 28. 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 doptimisation durant les développementsZenika © 2011 28
  29. 29. Flex Mobile Adaptabilité de linterface  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 quune 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 lUI sur tous les émulateurs et les devices est souvent fastidieux mais indispensable !Zenika © 2011 29
  30. 30. Bibliothèque Eskimo  Permet d’adapter les composants à la plateforme cible  Fournit de nouveaux composantsZenika © 2011 30
  31. 31. 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
  32. 32. 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
  33. 33. 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 programZenika © 2011 33
  34. 34. What’s Next ? Flex 4.6 (2/2)Zenika © 2011 34
  35. 35. 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  Sortie prévue tous les 3 mois d’une nouvelle version de AIR  Synchronisation des nouvelles versions de Flex avec AIR (pas nécessairement avec la même fréquence)  HTML 5 au travers d’outils de génération de contenu  Produit Adobe EdgeZenika © 2011 35
  36. 36. 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
  37. 37. Zenika © 2011 37

×