IHM

Etat de l'art

du développement

d'applications mobilesFrançois BONNEVILLE

aricia - francois@aricia.fr

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