ihm etat de l'art du développement d'applications mobiles françois bonneville aricia -...
TRANSCRIPT
IHM
Etat de l'art
du développement
d'applications mobilesFrançois BONNEVILLE
aricia - [email protected]
Laboratoire d'Informatique
de l’Université de Franche-Comté
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
Les smartphones
• SMARTPHONE = PDA+ téléphone portable• Lancé en 2001 Sagem• L’essor 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 d’exploitation• Se comporte comme un ordinateur portable• Téléchargement d'applications
Magasins d’applications
• Plateformes de téléchargement (gratuit ou payant) de logiciels pour smartphones.
• Appstore d’Apple, Google Play, Windows Phone, etc.
• Les éditeurs d’applications sont obligés de déposer leurs logiciels sur ces plateformes, afin qu’elles soient disponibles
• Modèle économique– Application payante
– Publicité
– Contenu payant
Les systèmes d’exploitation 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 l’Appstore
– Android• Basé sur un noyau Linux
• Open source
• Intègre les services Google
– Windows Phone 7
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 hybridesImplé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
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.
Les outils de développement
• Java pour Android– classes java spécifiques avec l’import du paquetage android.
– Une application android contient six principaux éléments • Activity : couche visuelle de l’application.• Views : composants IHM de l’application.• Service : Permet l’exécution de l’algorithme 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 d’autres 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.
Eclipse : un IDE intégré très pratique
« 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);
PhonegapFramework 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
« Hello World » en Phonegap <title>Home</title>
<script charset="utf-8" src="phonegap-1.2.0.js" type="text/javascript">
</script>
<form id="form1">
<h1>
Hello PhoneGap..!</h1>
</form>
Phonegap : Compilation Onlinehttps://build.phonegap.com/
Paramétrage de son appli Phonegap
Appcelarator TitaniumFramework 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 d’alertes.
aux fonctions natives du mobile comme le système de fichiers, le son, le réseau, l’accès à une base de données locale, la géolocalisation, l’accéléromètre et les cartes.
Extensibilité à travers des interfaces libres et des licences autorisant les développeurs à ajouter les supports d’autres langages de programmation, de codecs multimédia et des fonctions spécifiques à l’appareil.
Inconvénients de TitaniumUne API Titanium à apprendre.
L’obligation de s’adapter aux fonctionnalités de chaque mobile et à l’évolution de leurs systèmes d’exploitation.
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.
« Hello World » avec TitaniumFichier javascriptvar 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
Jquery MobileFramework 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, à l’intérieur de la balise body, permettant d’ajouter 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
Structure d'une page Jquery mobile<div data-role= ‘page’ >
<div data-role=’header’>…>/div>
<div data-role=’content’>…>/div>
<div data-role=’footer’>…>/div>
</div>
« look and feel » qui limite le choix dans l’ergonomie
incapacité d’accéder à des fonctionnalités natives comme par exemple un scanner de code barre ou à l’appareil photo
« Hello World » avec Jquery Mobile<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title>MDS PhoneGap API Demo with jQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-2.7.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="index.js"></script> </head>
<body onload="init()>
<div data-role="page" >
<div data-role="header" ><h1>Test</h1></div>
<div data-role="content" class="result"><p>Hello World!</p></div>
</body></html>
Sensa TouchFramework 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 s’appuie exclusivement sur javascript pour fournir les composants de l’interface 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 l’ensemble des données utilisées et peut être lier à d’autres modèles.
Le store est le cache côté client des instances des modèles.
Les vues représentent composants graphiques d’affichage comme les panels de tables, les boutons, les formulaires, etc.
Les contrôleurs représentent le traitement de l’application comme les événements sur les composants des vues.
Sensa TouchLes avantagesframework 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énientsn’accède pas aux fonctionnalités natives de l’appareil mobile
son utilisation du javascript pour générer les éléments html peut être déroutante.
Le déploiementdispose d’un service web appelé sencha.io pour le déploiement des
applications sur les plate-formes supportées.
« Hello World » avec Sensa Touch <html><head>
<meta charset="UTF-8">
<title>Hello World </title>
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/sencha-touch-2.0.1/resources/css/sencha-touch.css" />
<script type="text/javascript" src="http://dev.sencha.com/deploy/sencha-touch-2.0.1/sencha-touch-all.js"></script>
<script type="text/javascript">
Ext.setup({
onReady: function() {
Ext.Msg.alert('Hello World!');
} });
</script></head<body></body></html>
Conclusion
Nombreuses solutions pour développer des applications mobiles
Bien choisir son framework en fonctiondu type d'application à développer
des limitations techniques de certains framework
de vos connaissances de développeur
de la réutilisation de code existant