IHM Etat de l'art du développement d'applications mobiles François BONNEVILLE aricia - Laboratoire d'Informatique de lUniversité de.

Présentation au sujet: "IHM Etat de l'art du développement d'applications mobiles François BONNEVILLE aricia - Laboratoire d'Informatique de lUniversité de."— Transcription de la présentation:

1 IHM Etat de l'art du développement d'applications mobiles François BONNEVILLE aricia - francois@aricia.fr Laboratoire d'Informatique de lUniversité de Franche-Comté

2 Historique Téléphone portable Norme GSM créée en 1982 Premier téléphone portable fabriqué en 1983 par Motorola 1986, 1er réseau en France : Radiocom 2000 1992, France Telecom lance Itineris Les assistants numériques personnels (PDA) –Années 1990 –Agenda, carnet d'adresses, bloc-notes –Système d'exploitation –Synchronisation des données avec un PC

3 Les smartphones SMARTPHONE = PDA+ téléphone portable Lancé en 2001 Sagem Lessor commence en 2005 avec –la sortie de l'IPhone –Le rachat de la startup Android, par Google. GPS et Wifi : téléphone + connexion Internet Nombreuses fonctionnalités Système dexploitation Se comporte comme un ordinateur portable Téléchargement d'applications

4 Magasins dapplications Plateformes de téléchargement (gratuit ou payant) de logiciels pour smartphones. Appstore dApple, Google Play, Windows Phone, etc. Les éditeurs dapplications sont obligés de déposer leurs logiciels sur ces plateformes, afin quelles soient disponibles Modèle économique –Application payante –Publicité –Contenu payant

5 Les systèmes dexploitation mobiles Ancienne génération –Symbian (Nokia) –BlackBerry OS –Windows Mobile OS « tactiles » –IOS dérivé de Mac OS X 300 000 applications téléchargeables sur lAppstore –Android Basé sur un noyau Linux Open source Intègre les services Google –Windows Phone 7

6 Développement d'applications mobiles Les applications natives –façon classique pour implémenter une application –java pour Android, Objective C pour iOS, C# pour Windows phone 7 –Accès direct aux fonctionnalités de l'appareil : Téléphone, GPS, Camera, Carnet d'adresses, Agenda –Nécessite de réécrie le code pour chaque plateforme Les applications hybrides Implémentées en HTML, CSS et Javascript Pas de réécriture de code à chaque changement de plate-forme Plusieurs framework permettent leur création et leur déploiement Phonegap, Titanium, Sencha et JQuery mobile

7 Les outils de développement Xcode pour IOS dispose de deux API de programmation : –Carbon qui permet de programmer avec les langages C et C++. –Cocoa qui permet de développer avec les langages Objective-C, AppleScript et Java. Fourni avec toute une suite logicielle (graphiques, audio, etc.)..Net Compact framework pour Windows phone –framework fonctionnant avec Visual studio en programmant avec C# ou Visual Basic.Net. –sous-ensemble de la bibliothèque.NET Framework –contient également des classes spécialement conçues –hérite la totalité de l'architecture de Common Language Runtime et d'exécution de code managé du.NET Framework.

8 Les outils de développement Java pour Android –classes java spécifiques avec limport du paquetage android. –Une application android contient six principaux éléments Activity : couche visuelle de lapplication. Views : composants IHM de lapplication. Service : Permet lexécution de lalgorithme sur un temps indéfini et terminé en fonction de la tâche. Content Provider : fournit des données aux applications via un fournisseur de contenu capable de les partager avec dautres applications (agenda, photos, contacts). Intents : une application peut appeler un service ou une activité (explicite) ou un service du système android (implicite). Broadcast Receiver : Reçoit les messages systèmes et les Intents implicites.

9 Eclipse : un IDE intégré très pratique

10 « Hello World » en java pour Android Instanciation d'un textview (composant qui sert à afficher des alphanumériques). TextView tv = new TextView(this); On lui a donne une valeur : tv.setText("Hello, Android"); On affiche notre composant : setContentView(tv);

11 Phonegap Framework open source de développement mobile Développé par la société Netiobi software, racheté par Adobe. Utilise les langages javascript, Html5 et css3. Supporte plusieurs plateformes (IOS, Android, Symbian, Windows Phone, Blackberry OS) Bonne documentation Lenteur comparée aux applications natives Très difficile à débugguer

12 « Hello World » en Phonegap Home Hello PhoneGap..!

13 Phonegap : Compilation Online https://build.phonegap.com/

14 Paramétrage de son appli Phonegap

15 Appcelarator Titanium Framework pour développer des applis pour Android et iOS. Logiciel open source. Code écrit en javascript, puis transformé en bytecode Fournit des API pour accéder aux composants UI natifs comme les barres de navigation, les menus, les boites de dialogues et dalertes. aux fonctions natives du mobile comme le système de fichiers, le son, le réseau, laccès à une base de données locale, la géolocalisation, laccéléromètre et les cartes. Extensibilité à travers des interfaces libres et des licences autorisant les développeurs à ajouter les supports dautres langages de programmation, de codecs multimédia et des fonctions spécifiques à lappareil.

16 Inconvénients de Titanium Une API Titanium à apprendre. Lobligation de sadapter aux fonctionnalités de chaque mobile et à lévolution de leurs systèmes dexploitation. Le déploiement des applications se fait avec un IDE Titanium Studio basé sur Eclipse et qui permet de créer, tester, débuguer et déployer les applications pour Android et IOS.

17 « Hello World » avec Titanium Fichier javascript var win = Titanium.UI.createWindow({ title:'My Window', backgroundColor:'#cccccc' }); win.open(); // ouvrir la fenêtre var label = Titanium.UI.createLabel({ color:'#999', text:'Hello World', font:{fontSize:20}, textAlign:'center' }); win.add(label); // ajouter le label à la fenêtre win.open(); // ouvrir la fenêtre

18 Jquery Mobile Framework qui fonctionne sur toutes les plate-formes mobiles actuelles Utilise une bibliothèque javascript pour créer des sites web adaptés aux smartphones et tablettes. une page HTML5 qui référençe les fichiers du framework dans la balise head. Utilise les attributs data, à lintérieur de la balise body, permettant dajouter une donnée ou une information à lélément html. Prise de main rapide qui ne demande pas un niveau expérimenté en développement Documentation riche Communauté active dans les forums. Déploiement avec PhoneGap

19 Structure d'une page Jquery mobile …>/div> « look and feel » qui limite le choix dans lergonomie incapacité daccéder à des fonctionnalités natives comme par exemple un scanner de code barre ou à lappareil photo

20 « Hello World » avec Jquery Mobile MDS PhoneGap API Demo with jQuery Mobile Test Hello World!

21 Sensa Touch Framework conçu pour développer des applications mobile avec HTML5 Basé sur Javascript Compatible avec de nombreuses plate-formes comme Ios, Android et BlackBerry Contrairement à Jquery Mobile qui contente de fournir du Css, Sencha Touch sappuie exclusivement sur javascript pour fournir les composants de linterface graphique et ensuite générer les éléments du html. Utilise le design pattern MVC(Modèle-Vue-Controlleur) : Le modèle représente lensemble des données utilisées et peut être lier à dautres modèles. Le store est le cache côté client des instances des modèles. Les vues représentent composants graphiques daffichage comme les panels de tables, les boutons, les formulaires, etc. Les contrôleurs représentent le traitement de lapplication comme les événements sur les composants des vues.

22 Sensa Touch Les avantages framework performant orienté objet fournit des composants graphiques proches de ceux proposés par les applications natives. utilise le design pattern MVC qui assure une meilleure maintenabilité et une meilleure évolutivité de ses applications. Les inconvénients naccède pas aux fonctionnalités natives de lappareil mobile son utilisation du javascript pour générer les éléments html peut être déroutante. Le déploiement dispose dun service web appelé sencha.io pour le déploiement des applications sur les plate-formes supportées.

23 « Hello World » avec Sensa Touch Hello World Ext.setup({ onReady: function() { Ext.Msg.alert('Hello World!'); } });

24 Conclusion Nombreuses solutions pour développer des applications mobiles Bien choisir son framework en fonction du type d'application à développer des limitations techniques de certains framework de vos connaissances de développeur de la réutilisation de code existant