Blog ENI : Toute la veille numérique !
Dernière chance (fin le 29/02) : -25€ dès 75€ sur les livres en ligne, vidéos... code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Conception d'interfaces pour mobiles
  3. Aspects techniques
Extrait - Conception d'interfaces pour mobiles Graphisme et développement des applications natives, web et hybrides
Extraits du livre
Conception d'interfaces pour mobiles Graphisme et développement des applications natives, web et hybrides Revenir à la page d'achat du livre

Aspects techniques

Les applications natives

Sites web adaptés en responsive design, applications web (sites 100 % dédiés au mobile) ou applications natives sont des produits logiciels bien différents.

Historiquement, les premières applications proposées pour les mobiles ont été les applications natives. En effet, à l’époque où Apple a proposé le premier iPhone, en 2007, le réseau téléphonique et les ressources des terminaux eux-mêmes n’étaient pas optimisés pour les contenus connectés. En revanche, le principe de Market Store proposant des applications en téléchargement a permis de proposer très vite des applications performantes.

Nous allons donc commencer par explorer les aspects techniques de la production des applications natives.

Il faut tout de même noter que le développement d’applications natives passe par des langages compilés et fortement structurés. Concrètement, le développement en langage machine demande des connaissances avancées en programmation. Les pages qui suivent ne prétendent pas apporter de méthodes précises pour créer des applications : elles ont pour but de poser quelques repères et aider à appréhender un environnement de développement.

1. Architectures des applications natives

L’évolution du marché des tablettes et téléphones mobiles depuis 2013 montre clairement la diminution du nombre d’OS mobiles (http://www.zdnet.fr/actualites/chiffres-cles-les-os-pour-smartphones-39790245.htm).

Après que BlackBerry et Nokia ont tenté une percée dans ce secteur extrêmement concurrentiel, il semblerait que la guerre des mobiles ne se joue plus qu’entre les trois gérants du secteur : iOS, Android et Windows.

Cette atteinte à la diversité peut en désespérer certains (encore un effet de la loi des monopoles) ou en réjouir d’autres (pour qui c’est la garantie d’une plus grande compatibilité des contenus sur l’ensemble des plateformes). Quoi qu’il en soit, nous n’étudierons ici que ces trois systèmes.

a. Les langages de programmation

La programmation des applications natives se fait au moyen de langages de programmation...

Applications web et sites RWD (Responsive Web Design)

1. Architectures des applications Web et sites RWD

À la différence des applications natives, les sites RWD, tout comme les sites web, sont hébergés sur des serveurs web et non sur les magasins d’applications mobiles (Stores). Ces contenus importés du serveur distant sont constitués de pages HTML, CSS et JavaScript et lus côté client par un navigateur.

Le navigateur est le logiciel au moyen duquel nous naviguons sur le net. Il interprète le code HTML qu’il transforme en interfaces graphiques.

Il en existe aujourd’hui plusieurs téléchargeables en version mobile, dont les plus connus sont Firefox, Chrome et Edge (anciennement Internet Explorer).

Voici une liste non exhaustive de ces navigateurs sur mobile :

Android

  • Google Chrome,

  • Firefox,

  • Opera,

  • Dolphin Browser,

  • CM Browser,

  • Adblock Browser,

  • Next Browser.

IOS

  • 360 Web Browser,

  • iCab Mobile - compatible iPad,

  • Life Browser - compatible iPad,

  • Safari.

Windows

  • Edge,

  • Chrome,

  • Kraken,

  • Octane.

À noter que les constructeurs de téléphones portables peuvent proposer leurs propres navigateurs par défaut.

Que pouvons-nous attendre d’un navigateur ? En fait beaucoup de choses. Nous reviendrons plus loin sur les multiples ressources de ces outils devenus très puissants avec l’arrivée du HTML 5. Retenons déjà quelques propriétés de base qui constituent le socle traditionnel d’un navigateur :

  • chargement de pages,

  • gestions de documents multiples (navigation par onglets),

  • ouverture de liens (potentiellement dans une nouvelle fenêtre),

  • moteur de recherche (intégré à la barre d’adresse),

  • fonction de recherche dans la page,

  • ouverture possible en plein écran,

  • gestion des plug-ins,

  • modification de la taille du texte,

  • personnalisation de l’apparence.

a. Sites et applications web statiques ou dynamiques

Du côté du serveur, les pages qui constituent les sites et applications web peuvent être de simples pages associées par des liens hypertextes ou bien au contraire puiser leurs contenus dans des bases de données (également hébergées sur serveur). À la différence des applications natives, les sites RWD, tout comme la plupart des applications web (mais pas toutes, justement), sont stockés...

Applications hybrides : écrire une fois et déployer partout

1. Architecture mixte

images/03OW36.png

Comment les applications hybrides interfèrent avec les APIs

Les applications hybrides sont riches de plusieurs technologies capables de fonctionner ensemble, et ce grâce justement au principe des APIs. En effet comme on peut le voir dans l’illustration ci-dessus, une application hybride contient à la fois des fichiers HTML 5/CSS/JavaScript et des sources binaires issues de la compilation des pages de programmations Java ou C.

Dans la figure ci-dessus, vous pouvez voir que ces sources web et natives sont présentes sur des compartiments différents du terminal, mais ces compartiments communiquent entre eux grâce à la standardisation des APIs.

Dans la partie web constitutée de code HTML, CSS et JavaScript, et directement lisible par un navigateur, on peut noter la présence d’un moteur de rendu : c’est une couche logicielle intermédiaire entre les contenus HTML 5 et les services spécifiques des OS, où les objets JavaScript accèdent grâce aux instructions issues de Java ou C.

L’un des grands avantages des applications hybrides, en plus du fait qu’elles ne nécessitent qu’un développement unique pour un déploiement multiplateforme, c’est qu’elles permettent l’accès aux API des navigateurs en même temps qu’à celles des machines. Une flexibilité qui peut être exploitée dans le cadre d’écosystèmes complexes dans lesquels, les versions pour chaque support vont s’appuyer sur des APIs complémentaires en vue d’assurer une continuité de contenu dans les environnements.

2. Les outils de production pour projets hybrides

La production d’une application hybride nécessite un outil capable de convertir une partie du code JavaScript en sources binaires téléchargeables et amenées à être interprétées par les processeurs des terminaux. La conversion en Java, en Objective-C ou C# et la compilation de ces sources passent par un outil qu’on appelle un transpileur.

a. Apache Cordova, le traducteur polyglotte

Présentation

Le framework Cordova de la fondation Apache (anciennement Phonegap) est l’outil le plus connu pour effectuer ce type de tâches....

Programmation des accessoires vestimentaires connectés

images/03OW42.png

Échanges entre terminaux et avec un cloud

Les applications pour wearables sont en grande majorité l’extension d’applications mères installées sur smartphone ou tablette, et pourquoi pas sur ordinateur de bureau. Outils d’enregistrement de données (par exemple pour les applications de santé) et de notifications, les montres, lunettes ou bracelets n’ont pas encore le statut de terminaux autonomes du fait qu’elles permettent difficilement la saisie de textes et la manipulation des données.

Au cœur des échanges, se trouvent les réseaux Wi-Fi, Bluetooth et un format de données JSON qui permet de transporter sous forme de chaîne de caractères structurée hiérarchiquement des objets complexes (dont des objets Java).

Dans les accessoires vestimentaires connectés, les fichiers binaires sont développés avec les mêmes outils que pour les applications de smartphones, même si les versions d’OS diffèrent parfois. Pour les montres, par exemple, Android se décline en Android Wear et iOS en WatchOS.

images/03OW43.png

Cas de la smart Watch - Architecture connectée de iOS à WatchOS

La programmation destinée aux accessoires vestimentaires connectés, et plus particulièrement les montres, se fait au moyen des modules spécifiques dans...