Rapport 1 Adaptation des Interfaces – Groupe 3

Adaptation des interfaces à l’environnement

Rapport n°1

Le groupe

Noms, emails et technologies étudiées :

• ASRI Jihane – jihane.asri@etu.unice.fr – Angular 2 (WebComponents)
• DALIAN Loïc – loic.dalian@etu.unice.fr – PhoneGap (Crossplatform)
• BARZELLINO Matthieu – matthieu.barzellino@etu.unice.fr – Bootstrap (RWD)
• BERLIOZ Alison – alison.berlioz-ricetti@etu.unice.fr – PWA

L’application

Description :

Un site Web ainsi qu’une application mobile qui permettent d’organiser, de visualiser et de s’inscrire à des événements, qu’il s’agisse entre autres d’une grande manifestation ou d’une petite fête privée.

Fonctionnalités générales :

• Un utilisateur peut voir quels sont les événements publics organisés.
• Un utilisateur peut trouver un événement en fonction de certains critères (lieu, date, type, etc.).
• Un utilisateur peut s’inscrire à un événement (essentiel si le nombre de places est limité).
• Un utilisateur peut créer son propre événement et inviter d’autres utilisateurs à participer.
• Un utilisateur peut consulter les détails des événements auxquels il est inscrit et qu’il a organisé(s), en particulier sur mobile.
• Un utilisateur peut être guidé vers le lieu de l’événement grâce à la géolocalisation.

Tâches (point de vue organisateur) :

• Consulter la liste des événements organisés.
• Créer un nouvel événement avec les informations nécessaires telles que quoi, où, quand, comment, combien de personnes, etc. (ajout optionnel de photos, vidéos, maps, etc.).
• Inviter des personnes à un événement.
• Consulter la liste des personnes inscrites à mon événement.
• Rendre un événement privé (optionnel).

Tâches (point de vue participant) :

• Consulter la liste des événements organisés.
• Consulter les détails d’un événement (où, quand, quoi…).
• S’inscrire à un événement.
• Consulter les événements auxquels le participant est inscrit.
• Rechercher un ou des événements en fonction du lieu, de la date, de l’auteur, du type ou d’un tag.
• Se rendre à un événement via la géolocalisation.
• Donner une appréciation sur un événement/organisateur après coup (optionnel).

Liens entre l’application et l’adaptation

L’adaptation sur mobile doit permettre une continuation des services proposés sur PC. L’objectif est qu’un utilisateur puisse utiliser l’application sur différents appareils selon l’endroit où il se trouve (chez lui ou dehors).

Elle doit aussi pouvoir s’adapter à l’OS et ses capteurs (adaptation au support grâce aux Crossplatform) ainsi qu’aux terminaux pouvant avoir plusieurs résolutions (adaptation au support grâce au RWD).

Défis à relever des technologies étudiées

Le défi en Responsive Web Design sera via le framework Bootstrap de Twitter d’avoir une adaptation rapide au contexte d’affichage choisi (pc, mobile, tablette). Pour cela un site web sera créé en html/css mais aussi et surtout en se basant sur les capacités responsives offertes par Bootstrap comme la réorganisation des pages selon la surface d’affichage ou la mise en surbrillance d’éléments importants. En outre, l’un des défis sera de tester les limites de Bootstrap en testant des tableaux complexes pour voir comment il réagit à un nombre conséquent de données.

Le défi pour le Crossplatform est de pouvoir générer un maximum de code sans prendre en compte les spécificités de l’appareil utilisé, afin de pouvoir déployer l’application sur de multiples plateformes sans avoir à écrire du code spécifique pour chacune de ces plateformes et ainsi gagner du temps. Dans le cadre de notre application, il s’agit de pouvoir déployer l’application sur des cibles Windows (version Desktop), iOs et Android (version mobile, avec les principaux OS du marché) afin d’assurer la continuation des services sur les terminaux mobiles que l’utilisateur pourrait vouloir utiliser peu importe l’OS. Ceci est réalisable en codant une WebApp via le logiciel PhoneGap, qui permet de générer du code exécutable sur chacune des trois cibles. Du code spécifique à chaque OS sera néanmoins nécessaire pour la localisation de l’utilisateur (le code pour l’utilisation des capteurs étant non générique) dans le but de situer l’utilisateur et le diriger vers le lieu de l’événement où il compte se rendre.

En ce qui concerne les Web Components, l’adaptation peut se faire sur deux fronts : d’un côté on peut générer du code pour une version PC qui serait réutilisable sur mobile, d’un autre on peut détecter quel est l’appareil utilisé et réagir différemment en fonction de cette information. Le défi sera donc de déterminer quelle approche est la plus adaptée selon les besoins de développement et d’utilisation. Il faudra entre autres trouver le moyen d’adapter les outils fournis par Angular 2 à une utilisation sur Android ou IOS, tout en conservant des performances acceptables. L’objectif final sera d’avoir une application qu’on pourrait caractériser comme “hybride”, dans le but de permettre à l’utilisateur de toujours avoir la meilleure expérience possible.

Le défi pour PWA est de fournir un site adapté à chaque plateforme, afin de fournir la meilleure expérience possible à l’utilisateur. On doit pouvoir faire illusion au niveau des appareils mobiles en simulant une application native, tout en utilisant que des technologies web (JS/HTML/CSS).

Scénarios d’utilisation

• Scénario Loïc (Crossplatform) :

Un utilisateur souhaite participer à un événement qu’il vient de repérer et qui va commencer dans deux heures. Il s’inscrit via son ordinateur et ne remarque pas que son portable principal (qui est sous Android) est à un niveau bas de batterie. Une heure plus tard il décide de partir de chez lui en activant la fonctionnalité de l’application permettant de diriger l’utilisateur sur la carte comme un GPS, mais après quelques minutes son portable n’a plus de batterie et il n’a pas de batterie externe. Il revient donc chez lui pour prendre son téléphone secondaire (sous iOs) et utilise de nouveau le GPS pour se rendre à l’endroit où se déroule l’événement.

• Scénario Jihane (Angular 2) :

Marc organise et participe à plein d’événements. À la maison, il organise son emploi du temps en fonction de tous ces événements, du coup il aime bien avoir une vue d’ensemble sur son dashboard (browser PC). Au travail, où il n’a pas accès à un ordinateur, il veut simplement pouvoir vérifier ou consulter des informations sur deux événements en particulier (parce qu’ils arrivent bientôt ou parce qu’il veut en parler à ses collègues) – ça ne l’arrange donc pas d’avoir à les trouver parmi tous les autres, particulièrement sur le petit écran de son mobile. Du coup, il voudrait pouvoir personnaliser sa vue mobile pour qu’elle n’affiche que les éléments qui lui sont pertinents.

• Scénario Alison (PWA) :

Les amis de John organisent une fête sur le site. À la maison John s’inscrit sur le site puis à l’événement. Le jour de la fête, il veut vérifier sur son téléphone l’adresse mais n’a pas accès au réseau, il peut tout de même accéder aux fiches des événements auxquels il s’est inscrit à sa dernière connexion.

• Scénario Matthieu (Bootstrap) :

Paul regarde de chez lui sur son ordinateur fixe les événements auxquels il participe. Puis une fois en route vers l’événement il souhaite vérifier les informations de l’événement (par exemple l’adresse ou l’heure). Une fois en chemin, Paul peut vouloir vérifier qu’il n’y a pas eu de changements de l’organisateur entre temps ou qu’il se rappelle bien de l’horaire en ouvrant l’application sur son mobile.