le developpement multiplateforme mobile -...

80
LE DEVELOPPEMENT MULTIPLATEFORME MOBILE Travail de diplôme réalisé en vue de l’obtention du Bachelor en Informatique de Gestion par : Ibrahima Amar Diagne Conseiller au travail de diplôme : Monsieur Peter DAEHNE, professeur HES Genève, 27.08.2012 Haute École de Gestion de Genève (HEG-GE) Filière informatique de gestion

Upload: truongthien

Post on 08-Apr-2018

228 views

Category:

Documents


5 download

TRANSCRIPT

Page 1: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

LE DEVELOPPEMENT MULTIPLATEFORME

MOBILE

Travail de diplôme réalisé en vue de l’obtention du

Bachelor en Informatique de Gestion

par :

Ibrahima Amar Diagne

Conseiller au travail de diplôme :

Monsieur Peter DAEHNE, professeur HES

Genève, 27.08.2012

Haute École de Gestion de Genève (HEG-GE)

Filière informatique de gestion

Page 2: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar i

Déclaration

Ce travail de diplôme est réalisé dans le cadre de l’examen final de la Haute école de

gestion de Genève, en vue de l’obtention du titre Bachelor en Informatique de Gestion.

L’étudiant accepte, le cas échéant, la clause de confidentialité. L'utilisation des

conclusions et recommandations formulées dans le travail de diplôme, sans préjuger

de leur valeur, n'engage ni la responsabilité de l'auteur, ni celle du conseiller au travail

de diplôme, du juré et de la HEG.

« J’atteste avoir réalisé seul le présent travail, sans avoir utilisé des sources autres que

celles citées dans la bibliographie. »

Fait à Genève, le 27.08.2012

Ibrahima Amar Diagne

Page 3: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar ii

Remerciements

Mes remerciements vont d’abord à mon professeur monsieur Peter Daehne pour ses

conseils, sa disponibilité et son soutien.

Je remercie aussi ma famille, mes amis et toutes les personnes qui m’ont soutenu tout

au long de la réalisation de ce travail.

Page 4: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar iii

Sommaire

Actuellement, dans la mouvance des nouvelles technologies de l’information et de la

communication, les téléphones intelligents occupent une place très importante. Par

ailleurs, on ne peut pas évoquer les smartphones sans parler des applications mobiles.

En effet ces dernières sont devenues incontournables dans plusieurs domaines tant

pour les entreprises que pour les utilisateurs. Cependant, nous avons constaté un

problème lié à une très grande fragmentation concernant les applications mobiles et

depuis quelques années déjà des tentatives de résolution de ce problème.

L’objectif de ce travail est d’apporter un éclairage sur le développement

multiplateforme d’applications mobiles par un survol des technologies utilisées et un

exemple complet de développement d’une application.

La première partie de ce document relate les différentes notions et technologies qui

existent dans le domaine des applications mobiles.

La seconde partie porte sur une analyse comparative entre les deux principaux outils

de développement multiplateforme mobile et se propose de tirer des conclusions par

rapport à leur utilisation.

La dernière partie est dédiée à un guide des bonnes pratiques et à quelques astuces

que nous avons pu découvrir lors de l’utilisation de ces frameworks.

Page 5: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar iv

Table des matières

Déclaration.......................................................................................................... i

Remerciements ................................................................................................. ii

Sommaire .......................................................................................................... iii

Table des matières ........................................................................................... iv

Liste des Tableaux ........................................................................................... vi

Liste des Figures .............................................................................................. vi

Indications ...................................................................................................... viii

Introduction ....................................................................................................... 9

1. Le développement multiplateforme......................................................... 11

1.1 Définition du développement multiplateforme ..................................... 11

1.2 Intérêt du développement multiplateforme ........................................... 11

2. Les applications mobiles ......................................................................... 12

2.1 Qu’est-ce qu’une application mobile ?.................................................. 12

2.2 Quels sont les types d’applications mobiles et comment fonctionnent-

elles ? ...................................................................................................... 12

2.2.1 Les applications natives ou embarquée ......................................... 12

2.2.2 Les applications hybrides ou synchronisables................................ 13

2.2.3 Les applications web ou connectée ............................................... 13

2.3 Les principaux systèmes d’exploitation mobiles ................................. 13

2.3.1 IOS ................................................................................................ 16

2.3.2 Android .......................................................................................... 18

2.3.3 BlackBerry OS ............................................................................... 20

2.3.4 Windows Phone ............................................................................. 21

2.3.5 Autres systèmes d’exploitation mobiles.......................................... 22

3. Pourquoi le cross-développement appliqué aux applications

mobiles ? ......................................................................................................... 23

3.1 Les avantages ......................................................................................... 25

Page 6: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar v

3.2 Les inconvénients .................................................................................. 25

4. Les Frameworks de développement multiplateforme mobile ............... 26

4.1 Qu’est-ce qu’un Framework ? ................................................................ 26

4.2 PhoneGap ................................................................................................ 27

4.2.1 Les fonctionnalités natives supportées par PhoneGap ................... 28

4.3 Appcelerator Titanium ............................................................................ 29

4.4 Autres Frameworks de développement multiplateforme mobile ......... 30

4.4.1 Rhodes .......................................................................................... 30

4.5 Comparaison entre PhoneGap et Appcelerator Titanium .................... 32

5. Exemple de développement avec ces différents Frameworks ............. 37

5.1 PhoneGap ................................................................................................ 37

5.2 Titanium .................................................................................................. 37

6. Guide des bonnes pratiques pour le développement multiplateforme

mobile .............................................................................................................. 38

6.1 Avant de se lancer .................................................................................. 38

6.2 Choix du type d’application ................................................................... 39

6.3 Choix du Framework .............................................................................. 41

6.4 Organisation du code ............................................................................. 41

6.5 Quelques astuces ................................................................................... 42

6.6 Se documenter ........................................................................................ 46

6.7 Effectuer des tutoriaux ........................................................................... 47

Glossaire .......................................................................................................... 49

Webographie ................................................................................................... 54

Annexe 1 Installation du framework Titanium .............................................. 55

Annexe 2 Installation du framework PhoneGap ........................................... 66

Page 7: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar vi

Liste des Tableaux

Tableau 1 : Les différentes couches de l’architecture IOS .............................. 18

Tableau 2 : systèmes d’exploitation supportés par PhoneGap et Titanium ...... 32

Tableau 3 : Fonctionnalités accessibles pour PhoneGap et Titanium .............. 32

Tableau 4 : Technologies utilisées par PhoneGap et Titanium ........................ 33

Tableau 5 : Environnements de développement pour PhoneGap et Titanium . 33

Tableau 6 : synthèse PhoneGap VS Titanium ................................................. 34

Liste des Figures

Figure 1 : Vente mondiale d’appareils par système d’exploitation second

semestre 2012 .........................................................................................................14

Figure 2 : Vente mondiale d’appareils par fabricant au second semestre 2012.

....................................................................................................................................15

Figure 3 : Architecture d’IOS ...................................................................................17

Figure 4 : Architecture d’Android.............................................................................20

Figure 5 : Architecture de BlackBerry OS ..............................................................21

Figure 6 : Architecture de Windows phone OS .....................................................22

Figure 7 : Fonctionnement du framework PhoneGap ...........................................27

Figure 8 : Les Fonctionnalités supportées par PhoneGap par OS ......................28

Page 8: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar vii

Figure 9 : Fonctionnement de Titanium ..................................................................29

Figure 10 : Fonctionnement d’un projet Titanium ..................................................30

Figure 11 : Illustration du pattern Model – Vue - Contrôleur ................................31

Figure 12 : Organisation d’un projet sous Titanium ..............................................35

Figure 13 : Organisation d’un projet PhoneGap pour IOS ...................................36

Figure 14 : Schéma d’aide au choix du type d’application ...................................40

Figure 15 : Choix de l’organisation du code sous Titanium ..................................42

Figure 16 : Erreur de déploiement vers un appareil Android ...............................43

Figure 17 : Ouverture des configurations de lancement .......................................43

Figure 18 : Suppression des configurations de lancement ..................................43

Figure 19 : Icône de PhoneGap sous Eclipse .......................................................44

Figure 20 : Écran sous Eclipse pour inclure Sencha Touch ou JQuery ..............44

Figure 21 : Erreur lors de la création d’un nouveau projet PhoneGap sous

Eclipse .......................................................................................................................45

Figure 22 : Écran pour le choix de la version de la librairie PhoneGap ..............45

Figure 23 : Ouverture d’un nouveau projet PhoneGap pour IOS ........................46

Page 9: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar viii

Indications

o Tous les termes marqués comme suit sont expliqués dans le glossaire.

o Les termes développement multiplateformes et cross-développement ont la

même définition.

o Les indications pour les citations tirées de la bibliographie sont marquées avec

un chiffre entre crochets [chiffre représentant la référence].

o Les indications pour les citations tirées de la webographie sont marquées avec

une lettre entre crochets [lettre représentant la référence].

Page 10: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 9

Introduction

Depuis le lancement de l’iPhone d’Apple en 2007, le nombre de Smartphones vendus

dans le monde n’a cessé de croître. Ce sont des milliers d’appareils qui sont acquis par

les utilisateurs chaque année dans le monde avec une tendance à la hausse. Ces

téléphones intelligents « sont devenus en très peu de temps des instruments

indispensables dans la vie de chacun » [G], et l’arrivée des tablettes mobiles n’a fait

qu’intensifier c’est l’engouement que suscite cette nouvelle technologie. « Plus

interactifs, plus pratiques, plus transportables, parfois plus esthétiques ; les qualificatifs

ne manquent pas pour décrire les évolutions qu’ont apportées ces appareils dans la

recherche de la satisfaction en masse des consommateurs » [G].

Pour rappel, le marché a pendant un certain moment été dominé par Apple mais la

réplique de la communauté open source ne s’est pas fait attendre. Ainsi sous

l’impulsion de Google, le système d’exploitation libre Android a fait son apparition.

Selon les sondages actuels, Android est le premier système d’exploitation mobile suivi

de l’IOS d’Apple puis des autres tels que Symbian, RIM etc.

La tendance qui fait actuellement beaucoup de bruit concerne les applications mobiles.

En effet, celles-ci sont perçues comme « nouveau moyen de communication pour les

entreprises et sont extrêmement prisées par les consommateurs » [G]. Ainsi c’est plus

d’une dizaine de milliards d’applications qui sont téléchargées chaque année depuis

les App Stores. Ces micros logiciels peuvent être gratuits ou payants.

La diversité qui existe dans le domaine mobile, notamment le nombre important de

systèmes d’exploitation qui utilisent des technologies différentes, engendre cependant

une « fragmentation : environnement IOS/Objective-C pour l’iPhone et l’iPad, SDK

Java spécifique pour Android, J2ME pour Symbian, etc. » [A]

Conscients de l’importance d’une défragmentation et soucieux d’optimiser les

processus de conception des applications mobiles, les développeurs ont cherché à

mettre en place plusieurs méthodes afin de parvenir à développer pour plusieurs

plateformes à la fois : le développement multiplateforme.

Le travail que nous avons effectué a pour but principal de montrer les différentes

possibilités d’effectuer le développement multiplateforme dans le domaine mobile tout

en essayant de répondre à la question suivante : quel est l’intérêt du développement

multiplateforme mobile ?

Page 11: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 10

Donc, nous allons d’abord expliquer les différents concepts tournant autour des

appareils mobiles, c’est-à-dire cerner le concept de développement multiplateformes,

ensuite nous parlerons des applications mobiles, des systèmes d’exploitation mobiles

et de l’intérêt d’appliquer le cross-développement mobile. Puis nous présenterons les

principaux outils qui permettent le développement multiplateforme mobile après un bref

exposé sur les nouveautés d’HTML5 par rapport à notre sujet et nous montrerons un

exemple concret du cross-développement mobile. Nous tenterons enfin de donner un

avis quant à l’avenir de ce domaine.

Page 12: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 11

1. Le développement multiplateforme

Dans cette partie du document, nous allons définir la notion de multiplateforme en nous

basant sur les logiciels car les applications mobiles sont assimilables à ces derniers,

ensuite nous allons tenter de relater l’intérêt du développement multiplateforme en

toute généralité.

1.1 Définition du développement multiplateforme

Un logiciel multiplate-forme ou multiplateforme est un logiciel conçu pour fonctionner

sur plusieurs plates-formes, c’est-à-dire le couple liant ordinateur et système

d’exploitation. En anglais on parle souvent de « cross-platform software » ou « platform

independent software » ou encore de « multi-platform software ».

Donc le développement multiplateforme peut être défini comme le procédé par lequel

un développeur conçoit un logiciel pouvant être déployé sous différentes plateformes.

1.2 Intérêt du développement multiplateforme

« Write once, run anywhere » 1 est le fameux slogan de Sun Microsystems

2 pour

définir la notion de multiplateforme. En effet, le fait de pouvoir déployer un logiciel sur

plusieurs environnements permet non seulement d’économiser du temps (temps passé

à reproduire le code pour chaque plateforme cible) mais aussi d’économiser des

ressources (coût de production). De plus, un gain non négligeable émane de cette

notion de développement multiplateforme : la maintenance.

Dans le domaine informatique, la maintenance constitue en moyenne près de 70% des

coûts, avoir ainsi un seul logiciel à maintenir reviendrait considérablement moins cher

que si on en avait plusieurs.

1 Écrire une fois, faire fonctionner partout.

2 Sun Microsystems était un constructeur d’ordinateurs et un éditeur de logiciels américain

racheté par Oracle Corporation.

Page 13: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 12

2. Les applications mobiles

Selon Gartner3, « le nombre d'applications téléchargées devrait doubler cette année

pour s'établir à 18 milliards. Les revenus générés devraient atteindre 15 milliards de

dollars en 2011, puis 58 milliards de dollars en 2014. ». Ce qui nous fait comprendre

l’importance économique des applications mobiles et la place qu’elles occupent dans le

fonctionnement des entreprises.

Cette section va permettre de découvrir ce qu’est une application mobile, puis de

savoir les types d’applications qui existent et enfin nous feront un bref survol des

principaux systèmes d’exploitation mobiles.

2.1 Qu’est-ce qu’une application mobile ?

Une application mobile est un logiciel applicatif développé pour être installé sur un

appareil électronique mobile, tel qu'un assistant personnel, un téléphone portable, un

smartphone, ou un baladeur numérique.

Une telle application peut être installée sur l'appareil dès la conception de celui-ci ou

bien, si l'appareil le permet, téléchargée par l'utilisateur par le biais d'une boutique en

ligne, telle que Google Play ou l'App Store. Une partie des applications disponibles

sont gratuites tandis que d'autres sont payantes.

2.2 Quels sont les types d’applications mobiles et comment

fonctionnent-elles ?

Dans le monde mobile, les applications peuvent être déclinées en trois types:

2.2.1 Les applications natives ou embarquée

Une application native ou embarquée « est basée sur le langage de la plateforme qui

l’abrite. Elle sera donc fortement liée (fort couplage) au langage de programmation que

supporte la plateforme » [C]. Par exemple une application programmée en langage

3 Gartner Inc., fondée en 1979, est une entreprise américaine de conseil et de recherche dans

le domaine des techniques avancées dont le siège social est situé à Stamford,

Connecticut.

Page 14: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 13

java destiné à fonctionner sous Android ne fonctionnera que sur les appareils ayant

comme système d’exploitation Android.

2.2.2 Les applications hybrides ou synchronisables

« Une application hybride ou synchronisable est capable d’être déployée sur

différentes plateformes. En effet grâce à des frameworks utilisant le langage web, nous

sommes capables de développer une seule application tournant sur plusieurs

plateformes. On note ici un découplage entre l’application et les plateformes » [C].

Dans la suite de notre travail, nous nous intéresserons principalement à ce type

d’application notamment lors du développement d’une application test.

2.2.3 Les applications web ou connectée

« Ces types d’application fonctionnent comme des sites web. En effet, elles sont

entièrement construites avec le langage web et fonctionnent avec tous les navigateurs

pour mobile. Elles ne sont pas concernées par les problèmes de compatibilité. En effet

tous les appareils disposant d’un navigateur peuvent utiliser ce type d’application.

Cependant on est confronté à un problème de performance pour son utilisation » [C].

2.3 Les principaux systèmes d’exploitation mobiles

Avant de nous intéresser aux systèmes d’exploitation mobiles, essayons de définir ce

qu’est un système d’exploitation tout simplement. Selon le site Wikipédia : un système

d’exploitation « est un ensemble de programmes qui dirige l'utilisation des capacités

d'un ordinateur par les logiciels applicatifs». Cette définition s’applique aussi aux

téléphones intelligents (Smartphones) que nous retrouvons sur le marché car ils

possèdent les mêmes caractéristiques qu’un ordinateur à savoir : une mémoire interne

de stockage, un système d’exploitation, un processeur etc.

Dans le domaine mobile, il existe aujourd’hui plus d’une dizaine de systèmes

d’exploitation mobiles présents sur le marché. Android et IOS d’Apple se taillent la plus

grande part de marché comme nous le montre le graphique (Figure 1) ci-dessous.

Parmi ces systèmes d’exploitation quelques-uns sont libres tandis que d’autre son

propriétaires.

Page 15: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 14

Figure 1 : Vente mondiale d’appareils par système d’exploitation second semestre 2012 4

Le schéma ci-dessus montre une écrasante domination d’Android sur le marché des

systèmes d’exploitation avec 64.1% de part de marché suivi d’IOS avec 18.8% puis

des autres loin derrière. Ce qui est important à noter est la hausse de la part de

marché d’Android et le recul de celle d’IOS.

La prochaine sortie de l’iPhone 5 pourrait peut-être permettre à IOS de gagner

quelques pourcents mais ne devrait pas changer grand-chose dans la tendance

actuelle.

4 Source : http://blog.friendcaller.com/gartner-android-rules-the-smartphone-market-share-in-

q2-2012-report/

Page 16: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 15

Figure 2 : Vente mondiale d’appareils par fabricant au second semestre 2012. 5

D’après ces deux graphiques ci-dessus, nous constatons qu’Android est le premier

système d’exploitation tant au niveau du nombre d’appareils par système d’exploitation

vendu qu’au niveau des appareils vendus par fabriquant. Ainsi Android représente à lui

seul plus de 60% du marché.

Avant de continuer sur le détail des principaux systèmes d’exploitation, il est

nécessaire d’expliquer certaines notions que nous allons évoquer plus loin:

Noyau linux : Le noyau Linux est un logiciel libre développé essentiellement en

langage C par des centaines de bénévoles et salariés communiquant par Internet. Le

noyau est le cœur du système, c'est lui qui s'occupe de fournir aux logiciels une

interface pour utiliser le matériel.6

5 Source : http://blog.friendcaller.com/gartner-android-rules-the-smartphone-market-share-in-

q2-2012-report/

6 Source: http://fr.wikipedia.org/wiki/Noyau_Linux

Page 17: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 16

Kernel hybride XNU : est le nom du noyau des systèmes Darwin et Mac OS X.

L’acronyme signifie « X is Not Unix »1. C'est un noyau enrichi hybride, basé sur le

micro noyau Mach, et utilisant le noyau BSD en tant que service du système

d'exploitation.7

Micronoyau Mach : Mach (prononcer mâr) est un noyau de système d'exploitation

libre et gratuit, écrit en C, tout en étant orienté objet. Il est portable, temps réel et

satisfait le niveau B3 des critères de sécurité du standard TCSEC.8

2.3.1 IOS

IOS, anciennement iPhone OS, est le système d'exploitation mobile développé par

Apple pour l'iPhone, l'iPod touch, et l'iPad. Il est dérivé de Mac OS X dont il partage les

fondations (le kernel hybride XNU basé sur le micronoyau Mach, les services Unix et

Cocoa, etc.). IOS comporte quatre couches d'abstraction, similaires à celles de

Mac OS X : une couche « Core OS », une couche « Core Services », une couche

« Media » et une couche « Cocoa ». Le système d'exploitation occupe moins d'un

demi-gigaoctet (Go) de la capacité mémoire totale de l'appareil.9

7 Source: http://fr.wikipedia.org/wiki/XNU

8 Source: http://fr.wikipedia.org/wiki/Mach_(noyau)

9 Source: http://fr.wikipedia.org/wiki/IOS_(Apple)

Page 18: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 17

Figure 3 : Architecture d’IOS

Le schéma ci-dessous montre les différentes couches du système d’exploitation

IOS.

Page 19: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 18

Tableau 1 : Les différentes couches de l’architecture IOS 10

Applications : les applications natives (préinstallées) et les applications

tierces téléchargées depuis l’App Store.

Cocoa Touch : couche de plus haut niveau permettant la gestion des

interfaces mais aussi de gérer le multitâches, les alertes, etc.

Media : couche pour la gestion multimédia comme l’audio et le vidéo mais

aussi les aspects graphiques comme le support d’OpenGL pour le rendu 2D et

3D

Core Services : couche haute du système comme le support du format XML,

l’accès à une base SQLite, etc.

Core OS : la couche basse du système avec notamment la gestion de la

sécurité

2.3.2 Android

Android est un système d'exploitation open source utilisant le noyau Linux, pour

smartphones, tablettes tactiles, PDA et terminaux mobiles conçu par Android, une

startup rachetée par Google, et annoncé officiellement le 5 novembre 2007. 11

La figure 4 illustre l’actuel Architecture d'Android (en couches).

Le noyau Linux modifié fonctionne comme HAL12

, et fournit des pilotes de

périphériques, gestion de la mémoire, gestion des processus, ainsi que des

fonctionnalités de mise en réseau.

10 Source :

http://disanji.net/IOS_Doc/#documentation/Security/Conceptual/Security_Overview/Architecture/

Architecture.html

11 Source: http://fr.wikipedia.org/wiki/Android

12 La couche d'abstraction matérielle (Hardware Abstraction Layer ou HAL) est une

spécification et un utilitaire logiciel qui traque les périphériques du système informatique

Page 20: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 19

La couche de bibliothèque est reliée par Java (qui s'écarte de la conception

traditionnelle Linux). C'est dans cette couche que la librairie d’Android (Bionic) est

située.

Le gestionnaire s'occupe de la couche de l'interface utilisateur (UI) et des fenêtres.

La couche d'exécution Android contient la machine virtuelle Dalvik 13

(DVM) et les

bibliothèques de base (tels que Java ou IO14

). La plupart des fonctionnalités

disponibles dans Android sont fournis par les bibliothèques de base.

La couche application héberge l'interface API. Dans cette couche, le gestionnaire

d’activités régit le cycle de vie des applications. Les fournisseurs de contenu

permettent aux applications de soit accéder aux données depuis d'autres applications

ou de partager leurs propres données. Le gestionnaire de ressources permet

d'accéder à du code non-ressources (telles que des graphiques), tandis que le

gestionnaire de notification permet aux applications d'afficher des alertes

personnalisées. Au sommet de la couche application se trouvent respectivement les

applications de base, ainsi que les applications de l'utilisateur.

13 Dalvik est la machine virtuelle logiciel open-source utilisée dans les appareils mobiles

Android.

14 Dans un système à base d'un processeur, d'un microprocesseur, d'un microcontrôleur ou

d'un automate, on appelle Entrées-Sorties les échanges d'informations entre le processeur et

les périphériques qui lui sont associés. De la sorte, le système peut réagir à des modifications

de son environnement, voire le contrôler. Elles sont parfois désignées par l'acronyme I/O, issu

de l'anglais Input/Output.

Page 21: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 20

Figure 4 : Architecture d’Android

Source : http://www.cmg.org/measureit/issues/mit78/m_78_3.pdf

L’image ci-dessus montre les différentes couches du système d’exploitation Android.

2.3.3 BlackBerry OS

BlackBerry OS est un système d'exploitation propriétaire pour téléphone mobile de la

gamme BlackBerry, conçu par la société canadienne Research In Motion (RIM).

Il s'agit d'un système multitâche. Le système est surtout connu pour son support natif

des courriels à travers le protocole Mobile information device profile (MIDP 1.0), et

plus récemment un sous-ensemble de MIDP 2.0 qui permet une synchronisation

complète avec les messageries d'entreprise telles que Microsoft Exchange ou IBM

Lotus Domino.15

15 Source: http://fr.wikipedia.org/wiki/BlackBerry_OS

Page 22: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 21

L’image ci-dessous illustre les différentes couches de BlackBerry OS.

Figure 5 : Architecture de BlackBerry OS

Source : http://supportforums.blackberry.com/t5/BlackBerry-App-World-

Development/Blackberry-processor-target/td-p/258910

BlackBerry Os est un système propriétaire, nous n’avons pas pu trouver plus

d’information sur son fonctionnement interne.

2.3.4 Windows Phone

Windows Phone 7 est un système d'exploitation mobile développé par Microsoft pour

succéder à Windows Mobile, sa précédente plateforme logicielle qui a été renommée

pour l'occasion en Windows Phone Classic. Contrairement au système qu'il remplace,

Windows Phone 7 est principalement destiné au grand public plutôt qu'au marché des

entreprises. 16

16 Source: http://fr.wikipedia.org/wiki/Windows_Phone

Page 23: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 22

L’image ci-dessous montre l’organisation de Windows Phone OS.

Figure 6 : Architecture de Windows phone OS

Source :

http://advertboy.files.wordpress.com/2011/12/image_thumb1.png?w=500&h=323

2.3.5 Autres systèmes d’exploitation mobiles

HP webOS est un système d'exploitation mobile propriétaire

fonctionnant grâce à un noyau Linux. D'abord appelé « Palm webOS », il a été

renommé HP webOS le 19 octobre 2010 suite au rachat intervenu quelques mois

auparavant de Palm par Hewlet Packard (HP).17

Symbian OS est un système d'exploitation pour téléphones

portables (on parle de « Smartphone ») et PDA conçu par Symbian Ltd.18

Bada est le système d'exploitation pour smartphones Samsung Wave de

Samsung basé sur le système d'exploitation propriétaire SHP OS. Il est sorti début

17 Source: http://fr.wikipedia.org/wiki/HP_webOS

18 Source: http://fr.wikipedia.org/wiki/Symbian_OS

Page 24: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 23

2010, après avoir été dévoilé au Mobile World Congress de Barcelone de la même

année.19

3. Pourquoi le cross-développement appliqué aux

applications mobiles ?

Maintenant que nous savons ce qu’est une application mobile, nous nous intéressons

au cœur du sujet c’est-à-dire l’intérêt du développement multiplateforme pour le

mobile.

Les applications étant considérées comme des logiciels à part entière sont elles aussi

sujettes aux problèmes concernant les logiciels évoqués plus haut. En plus le monde

mobile est « victime » d’une très grande fragmentation due notamment à une très

grande variété de systèmes d’exploitation utilisant une multitude de technologies qui

sont incompatibles entre elles. D’où la nécessité d’avoir les outils permettant

d’atteindre un plus grand nombre de plateformes. C’est ainsi qu’est apparu une

multitude de Frameworks pour le développement multiplateforme mobile.

Tout a commencé avec HTML5. En effet avec les nouveautés que ce dernier inclut, la

transformation d’une application purement web en une application quasi native est

devenue possible. Cependant, HTML5 n’est pas au niveau des possibilités techniques

et de l’expérience utilisateur offertes par les applications natives.

HTML5 représente de nouvelles normes pour le web d’aujourd’hui.

« Une grande nouveauté est la possibilité de pouvoir lire des fichiers audio sans avoir

recours au Flash ou au Silverlight » [2] qui posait un très grand problème avant.

19 Source: http://fr.wikipedia.org/wiki/Bada

Page 25: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 24

« Le tag vidéo est probablement celui qui fait plus parler de lui et Apple n’y est pas

pour rien » [2]. Le standard pour les vidéos était Flash. De nombreux sites utilisaient

Flash comme technologie pour jouer de la vidéo. Mais après le succès d’Apple avec

l’iPhone, la tendance a changé. En effet, Apple n’autorise pas la lecture du Flash sur

ses appareils. Du coup il n’était pas possible de jouer de la vidéo dans un browser sauf

si on utilisait HTML5.

« D’autres nouveautés telles que dessiner sur un navigateur, des formulaires plus

intelligents, l’intégration de micro données sont désormais compris dans HTML5 » [2].

À ces nouveautés d’HTML5 viennent s’ajouter celles de CSS et de JavaScript. Ainsi

avec CSS « il nous est possible de créer des animations, d’avoir du style selon le

périphérique etc » [2].

JavaScript n’est pas en reste il « s’est vu enrichir de nombreuses fonctionnalités telles

que la localStorage qui permet de stocker des informations en local (la limite de

stockage est de 5 Mo) » [2] et d’autres que nous ne traiterons pas ici.

HTML5 permet de d’effectuer des choses qui n’étaient pas possibles avant. Ainsi nous

pouvons utiliser la géolocalisation, stocker de l’information en local, gérer un cache

complet etc. En plus l’utilisation de de Frameworks JavaScript comme JQuery Mobile

ou Sencha Touch facilite grandement le développement pour web mobile.

Cependant HTML5 a ses limites car même s’il permet un accès au stockage et à la

géolocalisation, « on se rend très vite compte que l’essentiel des fonctionnalités

natives telles que la caméra ou l’appareil photo ne sont pas accessibles, Il est fort

probable que cela n’arrivera jamais pour des questions de sécurité » [2].

Pour pallier à cette situation, Il existe des frameworks permettant de se rapprocher des

fonctionnalités natives, l’idée serait de créer une application en HTML5 et de la rendre

native en la mettant par exemple dans une webview Objective-C ou Java.

Plus loin, nous allons les découvrir et les détailler.

Page 26: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 25

3.1 Les avantages

Les avantages inhérents au développement multiplateforme peuvent se distinguer en

deux catégories :

- Les avantages coté développeur (entreprise) :

o Utilisation de technologies web connues : ce qui ne nécessite pas une

formation supplémentaire.

o Maintenance sur un seul logiciel.

o Pouvoir déployer l’application sur les magasins (App Store), afin de

bénéficier de ce canal de distribution et de communication.

o Réduire les coûts de développements en mutualisant du code.

- Les avantages coté utilisateur

o Possibilité d’avoir la même application disponible sur plusieurs plateformes.

o La réduction des couts de production entrainera une baisse du prix des

applications payantes.

3.2 Les inconvénients

Le cross développement mobile présente quelques inconvénients tels que :

- L’adaptation inévitable par rapport à l’appareil. Par exemple le bouton menu

que l’on retrouve chez Android n’existe pas chez Apple. Ainsi lors de la

conception, le développeur doit tenir compte de cet aspect en séparant le

traitement selon l’appareil concerné. Ce qui engendre une répétition de code et

une maintenabilité plus ardue. Par ailleurs, il est important de noter qu’une

séparation de traitement est nécessaire si les tablettes mobiles sont ciblées.

- La rapidité d’évolution des systèmes d’exploitation mobiles est aussi un

handicap car les applications qui tournaient sur les versions précédentes d’un

système d’exploitation bien défini pourraient ne plus fonctionner lors d’une mise

à jour. De ce fait les développeurs auront la lourde tâche d’adapter leurs

applications à chaque fois qu’une mise à jour interviendra.

Page 27: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 26

4. Les Frameworks de développement multiplateforme

mobile

Ce chapitre a pour objectif de définir ce qu’est un framework et de permettre une

découverte des principaux frameworks pour le développement mobile.

4.1 Qu’est-ce qu’un Framework ?

Un framework est un ensemble d'outils et de composants logiciels organisés

conformément à un plan d'architecture et de patterns, l'ensemble formant ou

promouvant un squelette de programme. Il est souvent fourni sous la forme d'une

bibliothèque logicielle, et accompagné du plan de l'architecture cible du framework.

« Un framework est conçu en vue d'aider les programmeurs dans leur travail.

L'organisation du framework vise la productivité maximale du programmeur qui va

l'utiliser - gage de baisse des coûts de construction et maintenance du programme. Le

contenu exact du framework est dicté par le type de programme et l'architecture cible

pour lequel il est conçu » [H].20

Dans domaine des applications mobiles, les Frameworks fournissent des APIs

(Application Programming Interface) indépendante des plateformes cibles. Ces APIs

utilisent des langages de programmation grand public (JavaScript, HTML5, CSS3,

Ruby, Java, etc.). Les développeurs utilisent ces APIs pour construire l'application

mobile, comprenant l'interface graphique, la persistance de données, et la couche

métier. Le code passe ensuite par le cross-compiler qui le transforme dans un langage

dédié à une plateforme (Android, IOS etc.). Le programme ainsi obtenu peut être

déployé et exécuté de manière native sur le mobile.

Actuellement, il existe une multitude de Frameworks qui permettent d’effectuer le

développement multiplateforme mobile. Dans notre démarche, nous avons choisi de

nous concentrer sur les deux principaux, à savoir PhoneGap et Appcelerator Titanium.

20 Source: http://fr.wikipedia.org/wiki/Framework

Page 28: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 27

4.2 PhoneGap

PhoneGap est un framework libre basée principalement sur HTML5, CSS3 et

JavaScript qui permet le développement multiplateforme mobile. En effet, ce

framework peut être déployé sur sept plateformes différentes et il permet aussi un

accès aux fonctions de bas niveau. En effet son fonctionnement basée sur des outils

de développement web, nous permet d’accéder à des fonctions natives des appareils

mobiles telles que la caméra, la géolocalisation, les contacts etc.

PhoneGap peut aussi être associé à d’autres technologies telles que : Sencha touch,

Appmobi, Netbiscuits etc.

Figure 7 : Fonctionnement du framework PhoneGap

Source : http://phonegap.com/

Même si PhoneGap apporte un énorme plus au développement d’applications web

mobiles, ce n’est pas encore suffisant pour prétendre au vrai niveau du natif. Tout

d’abord, « cela ne ressemble pas à du natif même avec l’utilisation des frameworks

comme JQuery et Sencha Touch, nous ne parvenons pas à paraitre exactement

comme une application native. Ensuite, de vraies limitations existent. Par exemple au

niveau de la base de données. Nous n’avons encore accès qu’à la version HTML5.

Même si nous avons accès au système de fichiers, qui lui n’est pas limité, nous

manquons de moyens lorsque nous sommes en mode déconnecté. Finalement la

webview reste moins performant qu’une application totalement native » [2].

Page 29: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 28

Apache Cordova, est le nom qui a été donné à PhoneGap depuis le rachat de ce

dernier par Adobe.

4.2.1 Les fonctionnalités natives supportées par PhoneGap

PhoneGap ne peut pas accéder à toutes les fonctionnalités natives des smartphones

comme nous l’avons évoqué plus haut. Le tableau ci-dessous montre les

fonctionnalités accessibles et celles qui ne le sont pas pour ce Framework.

Figure 8 : Les Fonctionnalités supportées par PhoneGap par OS

Source : http://www.w3t.ca/nos-services/applications-web-mobiles/

Dans l’ensemble, nous constatons que même si PhoneGap ne couvre pas toutes les

fonctionnalités natives pour certains systèmes d’exploitation, il couvre l’intégralité de

celles d’Android et d’IOS qui dominent le marché.

Page 30: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 29

4.3 Appcelerator Titanium

Figure 9 : Fonctionnement de Titanium

Titanium mobile est un Framework qui permet de développer des applications pour

Android et IOS (bientôt pour Blackberry OS). Le code des applications est écrit en

JavaScript et Titanium fournit des API pour interagir avec le téléphone mais aussi pour

la création de l’interface utilisateur (UI). Les ressources telles que les fichiers HTML,

CSS et JavaScript sont utilisés par Titanium et sont combinés avec les APIs

permettant d’accéder aux fonctions natives de l’appareil pour enfin générer une

application que nous pourrons ensuite installer sur un simulateur ou un appareil

fonctionnel.

Il existe une autre variante de ce framework : Titanium Desktop qui lui est orienté vers

les applications pour ordinateurs.

Le schéma ci-dessous montre le fonctionnement en général de Titanium mobile pour

une application sous Android :

Page 31: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 30

Figure 10 : Fonctionnement d’un projet Titanium

4.4 Autres Frameworks de développement multiplateforme

mobile

4.4.1 Rhodes

Rhodes est le framework que propose Rhomobile pour le développement

d'applications mobiles. Le développement se fait dans Eclipse à l'aide du plugin "Rho

Studio" et du debugger "Rho Debugger" à installer sur l'appareil de test. Une

application "Rhodes" est une application hybride de type Ruby On Rails pouvant

accéder à certains widgets et aux ressources matérielles des appareils. On peut le

Page 32: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 31

combiner avec un framework HTML tel que Sencha pour compléter les éléments

graphiques qu'il propose.21

Figure 11 : Illustration du pattern Model – Vue - Contrôleur

La figure 11 montre désigne le fonctionnement en général des frameworks pour le

développement multiplateforme mobile et en particulier Rhodes. Ici les tâches sont

bien réparties afin de garantir une bonne lisibilité mais aussi une facilité au niveau de la

maintenance.

Il existe aussi quelques autres frameworks dont nous nous contenterons de donner la

liste :

o Mojito depuis début 2012 22

o MonoCross 23

o Mulberry 24

21 Source : http://www.journaldunet.com/developpeur/outils/les-outils-de-developpement-multi-

plateforme-mobile/rhomobile.shtml

22 Source : http://developer.yahoo.com/cocktails/mojito/

23 Source : http://www.monocross.net/

24 Source : http://mulberry.toura.com/

Page 33: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 32

4.5 Comparaison entre PhoneGap et Appcelerator Titanium

Le premier élément de comparaison entre ces deux Frameworks est le nombre de

systèmes d’exploitations cibles.

Tableau 2 : systèmes d’exploitation supportés par PhoneGap et Titanium

PhoneGap Titanium

IOS, Android, BlackBerry, Bada,

WindowsPhone, WebOS, Symbian

IOS, Android et depuis très récemment

BlackBerry

Source : http://blog.octo.com/applications-mobiles-multi-plateformes-les-approches-

phonegap-et-titanium-mobile/

Nous constatons que PhoneGap, sur ce point de vue est meilleures car il permet de

cibler plus de sept systèmes d’exploitations alors que Titanium ne peut en atteindre

que deux (bientôt trois avec BlackBerry OS).

Le second point de comparaison porte sur l’accès aux fonctionnalités natives des

appareils :

Tableau 3 : Fonctionnalités accessibles pour PhoneGap et Titanium

PhoneGap Titanium

Possibilités des navigateurs Web + API

PhoneGap (principalement appareil photo,

système de fichier, accéléromètre, liste

des contacts, géolocalisation)

Accès aux composants de l’interface

homme machine (IHM) natifs + API

Titanium (base de données,

géolocalisation, gestion des contacts,

intégration Facebook, appareil photo,

lecture et enregistrement audio/vidéo…)

Source : http://blog.octo.com/applications-mobiles-multi-plateformes-les-approches-

phonegap-et-titanium-mobile/

Ici Titanium à l’avantage car elle permet d’accéder quasiment à toutes ces

fonctionnalités.

Page 34: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 33

Tableau 4 : Technologies utilisées par PhoneGap et Titanium

PhoneGap Titanium

HTML/CSS/JavaScript standard. On

développe comme si c’était une

application Web normale. Les API

PhoneGap sont bien documentées, par-

contre on devra chercher sur le Web la

documentation pour les technologies

HTML/CSS/JS et les éventuelles librairies

JavaScript utilisées.

JavaScript en utilisant des API

spécifiques à Titanium, que ce soit pour

créer les IHM ou pour écrire des appels

au système. Le site d’Appcelerator

propose la documentation des API ainsi

qu’une application démo (KitchenSink) et

des vidéos.

Source : http://blog.octo.com/applications-mobiles-multi-plateformes-les-approches-

phonegap-et-titanium-mobile/

Tableau 5 : Environnements de développement pour PhoneGap et Titanium

PhoneGap Titanium

PhoneGap nécessite de développer pour

chaque plateforme ciblée dans l’IDE

correspondant, et ne fournit pas d’outils

supplémentaires.

Titanium fourni un IDE dédié, basé sur

Aptana, un des meilleurs IDE Web

reposant lui-même sur Eclipse (acheté

récemment par Appcelerator)

Source : http://blog.octo.com/applications-mobiles-multi-plateformes-les-approches-

phonegap-et-titanium-mobile/

Page 35: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 34

Tableau 6 : synthèse PhoneGap VS Titanium

Fonctionnalité Synthèse

Plateformes supportées

Avantage PhoneGap

Richesse (fonctionnalités + IHM)

Avantage Titanium

Langage de développement

Égalité

Productivité des développements

Avantage Titanium

Gestion des déploiements

Avantage PhoneGap

Source : http://blog.octo.com/applications-mobiles-multi-plateformes-les-approches-

phonegap-et-titanium-mobile/

Les points forts de PhoneGap sont donc aujourd’hui son support de plus, de sept

plateformes, et le fait qu’il utilise au maximum les technologies standards du Web.

Ses points faibles concernent ses limitations fonctionnelles et sa moindre richesse de

l’interface homme machine (IHM) du fait qu’il n’utilise pas les composants natifs, ainsi

que son manque d’outillage de développement.

« Les points forts de Titanium sont sa richesse fonctionnelle et graphique, ainsi que la

productivité de son environnement de développement. Son point faible concerne le peu

de plateformes supportées » [A] (Android et IOS).

« On a pu voir que Titanium est globalement plus productif et fournit plus de

fonctionnalités que PhoneGap dans le but de développer des applications mobiles

multiplateformes. On le préfèrera en général, si l’on ne doit pas supporter plus qu’IOS

et Android » [A].

Page 36: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 35

De plus si nous considérons le « Look an Feel » des applications que nous pourrions

avoir, Titanium est le meilleur de ce point de vue car les applications développées

avec ce dernier ressemblent beaucoup plus au natif. Rappelons que Apple est très

exigeant sur le point de vue design d’où un léger avantage pour Titanium.

D’un point de vue de l’expérience utilisateur que nous avons eu lors de l’installation et

de l’utilisation de ces deux frameworks, Titanium a l’avantage sur PhoneGap sur

plusieurs éléments :

o Facilité d’installation

o Convivialité de l’interface

o Disponibilité de l’aide

o Facilité de déploiement

Par contre comme nous pouvons le constater sur l’image tirée d’un projet sous

Titanium qui suit ce texte, la séparation d’une partie du code selon le système

d’exploitation et selon le type d’écran (tablette ou téléphone) est inévitable. Ce qui peut

être vu comme un défaut du développement multiplateforme mobile avec ce

framework.

Figure 12 : Organisation d’un projet sous Titanium

Page 37: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 36

Figure 13 : Organisation d’un projet PhoneGap pour IOS

La figure 13 montre un exemple de code avec PhoneGap pour IOS.

Page 38: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 37

5. Exemple de développement avec ces différents

Frameworks

Comme exemple d’application, nous allons développer un gestionnaire de contacts

simplifié. Ce gestionnaire permettra à l’utilisateur de recueillir l’ensemble des contacts

enregistrés dans l’appareil et de passer des appels grâce à cette liste. L’objectif de

notre exemple est de montrer une preuve de l’accès aux fonctionnalités natives des

mobiles ainsi que le déploiement d’une application sur plusieurs plateformes (Android

et IOS).

Le projet complet est en annexe sur le disque accompagnant ce travail.

Néanmoins, nous allons tenter de décrire les grandes lignes pour l’installation (détaillée

en annexe), le paramétrage et les étapes de développement pour chaque Framework.

5.1 PhoneGap

Pour PhoneGap, il est nécessaire de rappeler qu’il nous faut pour chaque système

d’exploitation cible, à savoir IOS et Android, un environnement de développement

spécifique. De ce fait nous allons utiliser l’environnement XCode pour IOS et Eclipse

pour Android.

5.2 Titanium

En ce qui concerne Titanium, un seul environnement est nécessaire pour déployer

notre application sous Android et IOS. Le développement de l’application de s’est

déroulé sans difficulté majeure.

Page 39: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 38

6. Guide des bonnes pratiques pour le développement

multiplateforme mobile

Cette partie du document a pour but d’établir un guide des bonnes pratiques pour se

lancer dans le développement multiplateforme. Au passage nous avons établi une

section pour les astuces que nous avons découvertes lors de l’étude de ces deux

frameworks que sont PhoneGap et Titanium.

Une note d’installation pour les frameworks PhoneGap et Titanium sou Mac OS est

disponible en annexe.

6.1 Avant de se lancer

Avant toute chose, vous devez vous assurer d’avoir le matériel requis et les outils

nécessaires.

Si nous voulons développer pour tous les systèmes d’exploitation sauf IOS, il est

nécessaire d’avoir au minimum :

o un ordinateur Windows avec Vista ou Windows 7, Mac OS X Lion ou plus

o Une mémoire RAM d’au moins 2 Go (pour une question de performance car

l’émulateur consomme beaucoup de ressources)

o Et d’une mémoire de stockage suffisante

Si votre développement inclus IOS ;

o un ordinateur Mac OS X Lion ou plus

o XCode 4.3 ou plus

o Pour pouvoir déployer sur un appareil :

un appareil IOS (iPhone, iPad, iPod touch)

un certificat pour développeur IOS25

25 Un guide des étapes à suivre est disponible sous :

http://forum.frenchiphone.com/index.php?topic=18561.0

Page 40: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 39

6.2 Choix du type d’application

Le choix du type d’application sur laquelle se lancer est une étape très importante dans

le développement d’applications mobiles.

L’aide au choix (Figure 12) vous permettra de choisir un des trois types d’applications

mobiles (web, natif ou hybride) dont nous avons parlé plus haut.

Le choix que vous effectuerez sera décisif sur l’utilisation ou non d’un des deux

frameworks (Titanium et PhoneGap) qui sont concernés par ce guide.

Ainsi si votre choix se dirige vers une application de type hybride ou web, l’utilisation

de PhoneGap ou de Titanium sera pertinente. Par contre si votre choix porte sur une

application native, il serait plus judicieux de s’orienter vers les plateformes de

développement spécifiques à chaque système d’exploitation.

La raison d’un choix porté sur les plateformes propres aux systèmes d’exploitation pour

les applications de type natif se justifie par plusieurs raisons :

- Si on veut être proche de système d’exploitation cible, on doit en respecter le

design. En effet chaque système d’exploitation a ses propres principes

ergonomiques et Apple particulièrement est très exigent à ce niveau.

- La seconde raison est qu’on ne peut faire du vrai natif qu’en utilisant le langage

conçu pour fonctionner avec le système d’exploitation concerné.

Page 41: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 40

Figure 14 : Schéma d’aide au choix du type d’application

Source : http://www.nrblog.fr/pepito/2012/04/14/web-application-application-native-ou-

application-hybride-choix-cornelien/

Page 42: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 41

Nous remarquons qu’ici, le choix du type d’application aura une influence sur le choix

du framework si l’interface utilisateur est importante pour nous. En effet, les

applications développées sous Titanium, rappelons-le, ressembleront plus à du natif

que celles conçues à partir de PhoneGap.

6.3 Choix du Framework

Si votre souhait est de vous rapprocher du natif Titanium studio est le plus apte à

répondre à votre ambition.

En outre le choix du framework dépendra aussi des habitudes de programmation du

concepteur et du design qu’il voudra donner à son application.

Pour notre part, nous portons une préférence vers Titanium pour la simple raison qu’un

déploiement simultané sous IOS et sous Android est possible dans cet environnement

alors qu’avec PhoneGap un environnement spécifique à chaque système d’exploitation

est nécessaire. Par exemple, si nous voulons développer une application pour Android

et IOS à la fois en utilisant Titanium, nous n’aurons à créer qu’un seul projet et le

déployé ensuite vers les deux cibles. Par contre sous PhoneGap, il est nécessaire

d’utiliser XCode pour IOS et Eclipse pour Android.

Au-delà du choix de l’outil, notre conseil majeur restera d’utiliser les outils pour ce qu’ils

savent faire, et éviter de « tordre » leur usage pour leur faire faire autre chose ou de

manière différente. Cela s’approche des problématiques bien connues d’utilisation trop

personnalisée de progiciels, qui rend rapidement très coûteuse la moindre évolution.

6.4 Organisation du code

À ce sujet, Titanium propose une section sur les best practices. Voici le lien :

http://docs.appcelerator.com/titanium/2.1/index.html#!/guide/Cod

ing_Best_Practices

Apple propose aussi des éléments à ce sujet. Vous pouvez visiter le site officiel :

https://developer.apple.com/

Page 43: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 42

6.5 Quelques astuces

Titanium

Dans l’environnement Titanium, il est recommandable de choisir un modèle de projet

lors de la création d’un nouveau projet pour bénéficier d’une organisation du code

automatique.

Figure 15 : Choix de l’organisation du code sous Titanium

Page 44: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 43

Lors du déploiement d’un projet vers un appareil sous Android, il peut arriver qu’une

erreur survienne comme nous pouvons le constater sur la Figure 16. Dans ce cas, il

faut supprimer toutes les configurations de lancement présentes dans les options

(Figure 17et 18).

Figure 16 : Erreur de déploiement vers un appareil Android

Figure 17 : Ouverture des configurations de lancement

Figure 18 : Suppression des configurations de lancement

Page 45: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 44

PhoneGap pour Android

Pour simplifier la création de projet PhoneGap pour Android, il est possible de rajouter

le plugin PhoneGap qui inclut à la fois la librairie JQuery ou Sencha Touch avec

Cordova grâce au lien ci-dessous :

https://svn.codespot.com/a/eclipselabs.org/mobile-web-

development-with-phonegap/tags/r1.2/download

Une fois le lien ajouté et le plugin installé, il apparait l’icône de PhoneGap comme

indiqué sur l’image ci-dessous.

Figure 19 : Icône de PhoneGap sous Eclipse

Sencha Touch ou JQuery peuvent être facilement intégrés aussi.

Figure 20 : Écran sous Eclipse pour inclure Sencha Touch ou JQuery

Page 46: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 45

Lors de la création d’un projet, l’erreur suivante peut survenir. Pour la corriger, il faut

éliminer le bloc « <support- screen …/> » dans AndroidManifest.xml.

Figure 21 : Erreur lors de la création d’un nouveau projet PhoneGap sous Eclipse

Il est aussi possible de choisir une version de la librairie de PhoneGap pour le nouveau

projet ou d’installer une version qui ne figure pas dans la liste selon l’mage suivante :

Figure 22 : Écran pour le choix de la version de la librairie PhoneGap

Pour une raison inconnue, nous ne parvenons pas à importer la version actuelle de la

librairie PhoneGap c’est-à-dire la version 2.0.0.

Page 47: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 46

Ainsi pour utiliser une version de PhoneGap plus récente que la 1.9, il faudra suivre la

méthode indiquée en annexe.

PhoneGap pour IOS

Pour créer un nouveau projet PhoneGap pour IOS, il ne faut pas oublier de mettre

dans la ligne de commande cd pour pouvoir ouvrir le dossier bin copié. Dans la

marche à suivre du site officiel ceci n’est pas mentionné.

Figure 23 : Ouverture d’un nouveau projet PhoneGap pour IOS

6.6 Se documenter

Aussi bien pour Titanium que pour PhoneGap, une communauté très active et une

documentation régulièrement mise à jour sont disponibles sur leurs sites officiels. De

plus des blogs et des forums portant sur des sujets relatifs à ces outils existent en

grande quantité sur la toile. Les sites officiels pour les deux frameworks fournissent

aussi une documentation très complète.

Par ailleurs, il existe aussi quelques applications qui reprennent toute la documentation

aussi bien pour PhoneGap que pour Titanium disponibles sur Google Play ainsi que

sur l’App Store. En voici quelques-uns :

PhoneGap Developer

GWT Mobile PhoneGap

Api Doc Appcelerator

Page 48: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 47

6.7 Effectuer des tutoriaux

La meilleure manière de bien comprendre un outil est d’effectuer des tutoriaux dans le

but de mieux se familiariser avec les différents concepts possibles. Il existe une

multitude de documents et de vidéos relatifs à l’utilisation de ces frameworks sur

internet.

Page 49: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 48

Conclusion

En guise de conclusion, nous pouvons affirmer que le développement multiplateforme

mobile est un domaine enrichissant au niveau expérimental et qu’il est en évolution

constante.

Ainsi tout au long de ce travail, nous avons abordé la plupart des concepts liés au

développement mobile puis nous nous sommes intéressés au développement

multiplateforme mobile. Ce qui nous a permis d’aborder le problème de fragmentation

dans le monde mobile, qui a été le cœur du sujet. De ce fait, nous avons abordé les

principaux aspects liés à ce problème, ensuite nous avons découvert les principales

solutions : les frameworks de développement multiplateformes et enfin nous avons

établis un guide des bonnes pratiques.

L’étude des deux des frameworks (Titanium et PhoneGap) de développement

multiplateforme mobile, nous a permis de mieux comprendre certains aspects du

développement mobile, mais aussi de constater sa principale force : la rapidité à

laquelle ce domaine évolue et se perfectionne. Cependant, cette force, pourrait dans

un avenir proche être sa principale faiblesse. Cette dernière se traduit par le manque

d’organisation des bases de connaissances mises à disposition, par l’obsolescence

rapide de ces mêmes bases découlant forcement de l’évolution fulgurante de ce

domaine ainsi que de la division des technologies utilisées. Ces éléments rendent la

tâche des développeurs difficile et pourraient à la longue diminuer l’engouement

important de la communauté. De plus, « La problématique du développement mobile

multiplateforme est loin d’être encore résolue, et nul ne doute qu’il fera encore parler

de lui encore longtemps car c’est un enjeu fort pour les entreprises aujourd’hui » [A].

En fin de compte, ce travail nous a permis de découvrir de nouvelles technologies

(JQuery, CSS5, HTML5 etc.) et aussi de comprendre certains aspects du domaine

mobile.

Ainsi nous avons pu mettre en évidence les compétences que nous avons acquises

pendant notre formation à la Haute Ecole de Gestion de Genève et aussi en acquérir

de nouvelles grâce à ce projet. Dans une perspective d’avenir, nous pouvons affirmer

que le développement multiplateforme mobile sera forcément la technologie mobile du

future mais avec une tendance vers l’open source.

Page 50: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 49

Glossaire

A

App Store :

Plateforme de téléchargement d’applications.

Aptana :

Aptana Studio est un environnement de développement intégré orienté web,

multiplate-forme et open-source.

D

Debugger :

est un logiciel qui aide un développeur à analyser les bugs d'un programme.

E

Eclipse :

est un projet de la Fondation Eclipse visant à développer tout un environnement de

développement libre, extensible, universel et polyvalent

G

Google Play :

Plateforme de téléchargement d’applications.

Page 51: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 50

I

IBM :

International Business Machines Corporation, connue sous l’abréviation IBM, est une

société multinationale américaine présente dans les domaines du matériel

informatique, du logiciel et des services informatiques.

L

Lotus Domino :

Lotus Domino est un produit IBM qui fournit une plateforme de gestion électronique

des documents développée en mode open source, qui inclut une messagerie

électronique et des applications de travail collaboratif.

M

Microsoft Exchange :

Microsoft Exchange Server est un Groupware (logiciel de groupe de travail) pour

serveur de messagerie électronique créé par Microsoft, pour concurrencer Lotus

Domino d'IBM.

Mobile information device profile :

Désigné par l'acronyme MIDP, est un profil J2ME utilisé par certains téléphones

mobiles.

Mobile World Congress :

Le Mobil Wordl Congress est le plus grand salon de l'industrie du téléphone

mobile.

Page 52: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 51

P

Pattern :

Le mot anglais « pattern » est souvent utilisé pour désigner un modèle, une

structure, un motif, un type, etc.

R

Research In Motion :

est une société canadienne spécialisée dans la conception, la fabrication et la

commercialisation de solutions sans fil pour le marché de la communication

mobile.

Ruby On Rails :

Ruby on Rails, également appelé RoR ou Rails est un framework web libre écrit

en Ruby

S

Système multitâche :

Un système d'exploitation est multitâche en anglais: multi-task s’il permet

d’exécuter, de façon apparemment simultanée, plusieurs programmes

informatiques. On parle également de multiprogrammation.

T

Tag :

Langage de balisage HTML.

Page 53: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 52

W

Widgets :

Widget est une contraction des mots window et gadget. En informatique, le mot widget

recouvre deux notions distinctes en relation avec les interfaces graphiques. Il peut

alors être considéré comme étant la contraction des termes window (fenêtre) et

gadget.

X

XCode : est un environnement de développement pour Mac OS X.

Page 54: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 53

Bibliographie

[1] Eric, Sarrion. XHTML/CSS & JavaScript pour le web mobile. s.l. : EDITIONS

EYROLLES. ISBN:978-2-212-12775-1.

[2] Loïc, Bar. 2011. Développez vos applications pour ANDROID, IPHONE et IPAD.

s.l. : MA EDITIONS, 2011. ISBN:978-2-822-400213.

[3] Mark, Murphy. L'art du développement Android. s.l. : Pearson Education France.

ISBN:978-2-7440-2495-5.

Page 55: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 54

Webographie

[A] PETITIT, François. Applications mobiles multi-plateformes: les approches

PhoneGap et Titanium Mobile : http://blog.octo.com/applications-mobiles-multi-

plateformes-les-approches-phonegap-et-titanium-mobile/ [publié le 14/04.2012]

[Consulté le 08/08/2012]

[B] KOLAMBIGUE, Tyab. PhoneGap vs Appcelerator:

http://fr.slideshare.net/kcresus/phonegap-vs-appcelerator [publié le 14/04.2012]

[Consulté le 08/08/2012]

[C] Ekito, Application mobile : web ou natif : http://www.ekito.fr/portail/application-

mobile-web-ou-natif [Consulté le 30/07/2012]

La rédaction journal du Net, Les outils de développement multiplateforme

mobiles : http://www.journaldunet.com/developpeur/outils/les-outils-de-developpement-

multi-plateforme-mobile/ [publié le 03/11.2011] [Consulté le 21/08/2012]

[D] PhoneGap Google Group, Getting Started

Guide: http://docs.phonegap.com/en/2.0.0/guide_getting-started_index.md.html

[E] Appcelerator, Titanium Studio: http://www.appcelerator.com/platform/titanium-

studio

[F] Appcelerator, Titanium Documentation:

http://docs.appcelerator.com/titanium/2.1/index.html

[G] Nicolas. L, L’avènement des applications

mobiles: http://www.ovianet.com/blog/mobile/l%E2%80%99avenement-des-

applications-mobiles/ [publié le 20/10.2010] [Consulté le 03/08/2012]

[H] Wikipédia, Framework : http://fr.wikipedia.org/wiki/Framework [Dernière

modification le 23/08/2012] [Consulté le 26/08/2012]

Page 56: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 55

Annexe 1

Installation du framework Titanium

Le guide complet se trouve en:

https://wiki.appcelerator.org/display/guides/Quick+Start#QuickStart-

InstallingandConfiguringTitaniumStudio

To download and use Titanium Studio, a valid Appcelerator Network account is

required. You may get one via the Sign Up page.

Then, download the installer from http://my.appcelerator.com, extract it if necessary,

run it, and following any on-screen instructions.

Launching Titanium Studio

When you launch Titanium Studio for the first time, login with your Appcelerator

Network username and password. Select a "workspace", which is simply a folder

where Titanium Studio places all of the project files and IDE preferences data.

When Studio launches for the first time, it automatically starts installing the latest

Titanium SDKs. Once this is complete, confirm that no further updates are pending and

that Studio is at the latest version.

Run Help > Check for Updates to ensure that the latest version of Titanium

Studio is installed.

Run Help > Check for Titanium SDK Updates to ensure that all the official

Titanium SDK releases are installed.

Page 57: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 56

Repeat these two steps until there are no more updates available.

Configuring Titanium Studio

If the Titanium Studio Dashboard is not already open, click the toolbar button with the

Appcelerator logo, click the dashboard "Configure" tab and then the "Let's get things

set up!" button that appears.

Page 58: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 57

Since Titanium enables the development of native mobile applications with a vast array

of native functionality built-in, we require the native tool chains to be installed, for each

of the mobile platforms that you will be targeting. Thus, click each of the Android and

IOS platform icons in turn and follow the resulting instructions to install and configure

the respective native SDKs.

Installing XCode and the IOS SDK

Note that to develop IOS applications for Apple devices, such as the iPhone and iPad,

you will need to have an IOS developer account. The account is free, but to run on

device you will need to sign up for the IOS Developer Program, costing $99/year. Also

be aware of Apple's license terms, which prohibit the building and execution of IOS

applications on anything other than Apple hardware.

After clicking the Titanium Studio Dashboard IOS icon, follow the on-screen

instructions to download XCode, and install the resulting software image file.

Page 59: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 58

Selecting the Active XCode Version

For systems with both XCode 4.2.x and 4.3.x installed, the current version can be

selected by running sudo XCode-select at the command-line. For XCode 4.2.x installed

in the default location, run the following command:

sudo XCode-select -switch /Developer/

For XCode 4.3.x installed in the default location, run the following command:

sudo XCode-select -switch /Applications/XCode.app/Contents/Developer/

Refer to the Titanium Compatibility Matrix for the versions of XCode currently

supported by Titanium.

Installing the Android SDK

After clicking the Titanium Studio Dashboard Android icon, follow the on-screen

instructions to download and install the Android SDK.

when the Android SDK installer starts, set the destination directory.

The Android SDK Manager will present a list of package categories.

Select those supported by the latest official Titanium SDK, as described in the

Titanium Compatibility Matrix.

Ensure that the Prerequisite Android SDK / API for the latest official Titanium

SDK is selected.

Page 60: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 59

To reduce install time, expand each category and de-select unnecessary

components, such as Documentation, Samples and Sources.

Click the Install x packages button to proceed.

Default Android SDK

It's important to ensure that the Default Android SDK is correctly set to a SDK

supported by the Titanium SDK you will be using most, as all applications will use this

when they are launched for the first time. Thus, open the Preferences dialog.

On OS X, select Preferences from the Titanium Studio menu and navigate to

OS X Menu Bar > Preferences.

On Windows and Linux, use the Window menu and navigate to Windows Menu

Bar > Preferences.

Page 61: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 60

Your First Mobile App

Now it's time to create an app!

Return to the Titanium Studio dashboard to start a new mobile project. Choose the

"Develop" tab, and click on the New Project button of the "Single Window Application"

template.

Page 62: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 61

Next, configure the project settings, including the project name, application identifier

(app id) and your website URL.

Project name - this will become your app's name as seen by users, so choose

wisely.

App Id - Titanium's version of the Android Package Name or CF Bundle

Identifier. It's important to enter the name in reverse domain name format, with

your app's name at the end. For example, com.example.myFirstApp. Avoid

spaces and special characters.

Company/Personal URL - enter in the form, http://example.com.

Page 63: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 62

Click Finish, and the project will be automatically created and opened. Notice the

features that you will be using often with Titanium Studio.

Page 64: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 63

The project filesystem layout is always the same.

Resources folder - your project's code files and graphics are stored in this

folder.

app.js - your project's bootstrap file. Every project has one; it's the file loaded

first when your app is launched.

tiapp.xml - the details you enter in the new project wizard are used to populate

the tiapp.xml file.

Those are essentially the only required files, but you can create others to produce a

manageable and scalable code base. For example, you could put all your graphics in

the Resources directory, or you could put them into subfolders. We'll dig more deeply

into cross-platform development in the rest of our documentation, but the android and

iPhone directories within Resources are locations for your platform-specific assets.

Running your app

To build and run your app, simply click the Run button as shown in the following

screenshot, and choose the appropriate target.

Page 65: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 64

Your app should now be running in the mobile simulation environments you selected.

IOS Android

Troubleshooting

Page 66: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 65

If you are experiencing problems after following these setup instructions, please follow

the more detailed Setting up Titanium Studio guide.

Next Steps

Congratulations! You've just created and run your first Titanium application. If you

enjoyed it, try importing one of the sample projects, as explained in Creating Your First

Titanium Apps.

Then work through the considerable free educational material, available via the

Titanium Studio "Learn" tab, which includes videos, tutorials, API documentation and

even a Titanium book.

Page 67: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 66

Annexe 2 Installation du framework PhoneGap

Le guide d’installation complet pour PhoneGap vers tous les systèmes d’exploitation

compatible se trouve en :

http://docs.phonegap.com/en/2.0.0/guide_getting-started_index.md.html

Dans cette section nous allons monter que l’installation pour Android et IOS.

Getting Started with Android

This guide describes how to set up your development environment for Cordova and run

a sample application. Note that Cordova used to be called PhoneGap, so some of the

sites still use the old PhoneGap name.

1. Requirements

Eclipse 3.4+

2. Install SDK + Cordova

Download and install Eclipse Classic

Download and install Android SDK

Download and install ADT Plugin

Download the latest copy of Cordova and extract its contents. We will be

working with the Android directory.

Page 68: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 67

3. Setup New Project

Launch Eclipse, and select menu item New Project

Then specify new application project

Page 69: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 68

Then speciy an Application Name, a Project Name and Package Name with

Namespace

Then select a graphic

Page 70: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 69

Then Create a Blank Activity

Page 71: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 70

Make sure the activity doesn't inherit from anything. You most likely won't have

PhoneGap on your Eclipse Workspace. Once this is done, click finish

In the root directory of your project, create two new directories:

o /libs

o assets/www

Copy cordova-2.0.0.js from your Cordova download earlier to assets/www

Copy cordova-2.0.0.jar from your Cordova download earlier to /libs

Copy xml folder from your Cordova download earlier to /res

Verify that cordova-2.0.0.jar is listed in the Build Path for your project. Right

click on the /libs folder and go to Build Paths/ > Configure Build Path.... Then,

in the Libraries tab, add cordova-2.0.0.jar to the project. If Eclipse is being

temperamental, you might need to refresh (F5) the project once again.

Edit your project's main Java file found in the src folder in Eclipse:

o Add import org.apache.cordova.*;

o Change the class's extend from Activity to DroidGap

Page 72: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 71

o Replace the setContentView() line with

super.loadUrl("file:///android_asset/www/index.html");

Right click on AndroidManifest.xml and select Open With > Text Editor

Paste the following permissions between the <uses-sdk.../> and

<application.../> tags.

<supports-screens

android:largeScreens="true"

android:normalScreens="true"

android:smallScreens="true"

android:resizeable="true"

android:anyDensity="true" />

<uses-permission android:name="android.permission.VIBRATE" />

<uses-permission

android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission

android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission

android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"

/>

<uses-permission

android:name="android.permission.READ_PHONE_STATE" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.RECEIVE_SMS" />

<uses-permission android:name="android.permission.RECORD_AUDIO"

Page 73: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 72

/>

<uses-permission

android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

<uses-permission android:name="android.permission.READ_CONTACTS"

/>

<uses-permission android:name="android.permission.WRITE_CONTACTS"

/>

<uses-permission

android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-permission

android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.GET_ACCOUNTS"

/>

<uses-permission

android:name="android.permission.BROADCAST_STICKY" />

*Note you are adding a blanket list of permissions to your application. You should

remove permissions you aren't using before submitting your application to

Google Play.

Support orientation changes by pasting the following inside the <activity> tag.

android:configChanges="orientation|keyboardHidden|keyboard|screen

Size|locale"

Your AndroidManifest.xml file should look like

Page 74: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 73

4. Hello World

Create and open a new file named index.html in the assets/www directory.

Paste the following code:

<!DOCTYPE HTML>

<html>

<head>

<title>Cordova</title>

<script type="text/javascript" charset="utf-8" src="cordova-

2.0.0.js"></script>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

Page 75: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 74

5A. Deploy to Simulator

Right click the project and go to Run As > Android Application

Eclipse will ask you to select an appropriate AVD. If there isn't one, then you'll

need to create it.

5B. Deploy to Device

Make sure USB debugging is enabled on your device and plug it into your

system. (Settings > Applications > Development)

Right click the project and go to Run As > Android Application

Done!

Getting Started with IOS

This guide describes how to set up your development environment for Apache Cordova

and run a sample Apache Cordova application.

Requirements

XCode 4.3+

XCode Command Line Tools

Intel-based computer with Mac OS X Lion or greater (10.7+)

Necessary for installing on device:

o Apple IOS device (iPhone, iPad, iPod Touch)

o IOS developer certificate

Page 76: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 75

Install the IOS SDK and Apache Cordova

Install XCode from the Mac App Store

Install the XCode Command Line Tools (XCode Preferences -> Downloads ->

Components -> Command Line Tools -> Install).

Download the latest release of Apache Cordova

o extract its contents

o Apache Cordova IOS is found under lib/IOS

Setup New Project

Run the installer 'Cordova-2.0.0.pkg' to completion

Copy the bin folder (either from the source, or from the .dmg) to a location on

your hard drive

Launch Terminal.app

Page 77: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 76

Drag the copied bin folder to the Terminal.app icon in your Dock, it should

launch a new Terminal window

Type in ./create <project_folder_path> <bundle_id>

<project_name> then press "Enter"

<project_folder_path> is the path to your new Cordova IOS project

(it must be empty if it exists)

<package_name> is the package name, following reverse-domain

style convention

<project_name> is the project name

Locate your new project folder that you just created

Launch the .XCodeproj file in the folder

Deploy to Simulator

Change the Target in the Scheme drop-down menu on the toolbar to

"HelloWorld" (your project name)

Page 78: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 77

Change the Active SDK in the Scheme drop-down menu on the toolbar to IOS

[version] Simulator

Select the Run button in your project window's toolbar

Deploy to Device

Open HelloWorld-Info.plist, under the Resources group

Change BundleIdentifier to the identifier provided by Apple or your own bundle

identifier

o If you have a developer license, you can run the Assistant to register

your app

Change the Target in the Scheme drop-down menu on the toolbar to

"HelloWorld" (your project name)

Change the Active SDK in the Scheme drop-down menu on the toolbar to

[Your Device Name]

o You will need to have your device connected via USB

Select the Run button in your project window's toolbar

Page 79: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 78

Results

You should see the screen below, with a pulsating green "device is ready"

message

Problems in XCode

If you have compilation problems related to missing headers, the build products should

build into the same build directory. You may need to set the preference "XCode

Preferences -> Locations -> Derived Data -> Advanced…" to "Unique". This is the

default setting for XCode on a fresh new install, if you upgraded from older versions of

XCode, you might have a legacy preference in there that you need to update.

Page 80: LE DEVELOPPEMENT MULTIPLATEFORME MOBILE - …campus.hesge.ch/Daehne/TB/2012/DiagneIbrahimaAmar.pdf · Le développement multiplateforme mobile DIAGNE, Ibrahima Amar i Déclaration

Le développement multiplateforme mobile

DIAGNE, Ibrahima Amar 79

Also, when installing Cordova-2.0.0.pkg, you must ensure XCode is not running, if not

certain XCode variables won't be set.

Build Your App

You now have an XCode project setup and you can build and run on the Simulator and

device. It is important to understand that you do not need to use XCode to write your

web application. You can use your favourite text editor and simply rebuild your project

using XCode, or the command-line tools in your project folder (under the cordova sub-

folder) XCode will automatically detect the files that are changed in www.

Problems in the Command Line Tools

If you see this error: "Error: No developer directory found at /Developer. Run

/usr/bin/XCode-select to update the developer directory path." Run this to set your

Developer folder:

sudo /usr/bin/XCode-select -switch

/Applications/XCode.app/Contents/Developer