Description du projet

Contexte

Lors de plusieurs matières avec différents enseignants vous aller avancer sur un projet d’applicatif web qui répond à une problématique concrète que l’on va voir juste après.

Les grands paliers de ce projet sont :

• la partie conception/modélisation/implémentation backend NodeJS et base de donnée PostgreSQL avec Élise ;
• la partie conception frontend UI/UX avec Coral ; et
• la partie implémentation du frontend en ReactJS avec Gilles.

Problématique

Prenons trois exemples :

• la Paris Games Week ;
• les carriers summit à l’école ;
• les JPO en école.

Ces deux événement ont en commun un élément important : une fois qu’ils sont commencé leur programme se fige : il est publié sur un site web statique, il est imprimé sur des flyers et sur les feuilles de routes. À partir de cet instant le moindre imprévu causera une rupture dans l’information aux visiteurs.

Un programme figé a aussi pour désavantage qu’il peut être fastidieux de trouver ce que l’on cherche, en particulier si plusieurs activités ont lieu en même temps ou finissent à des intervals irréguliers.

Plus spécifique aux grands salons mais cela arrive aussi en JPO : il y a aussi le problème de files d’attentes. Personne n’aime attendre debout sans rien pouvoir faire d’autre que ça soit son tour.

Les problématiques sont donc :

• comment améliorer l’information aux visiteurs lors de salons et événements en utilisant la technologie ? et
• comment améliorer l’expérience client dans les situations ou de l’attente est nécessaire.

Réponse à la problématique

Le but : proposer de l’information visiteur sur trois postes clés :

• les écrans de hall ;
• les écrans en salle de conférence, salle de démonstration, pole d’échange ; et
• les appareils des invités (téléphone portables, ordinateurs, etc.).

En fonction du contexte les informations sont présentées un peu différemment, typiquement une écran de salle affichera seulement son programme a elle, avec en grand l’activité en cours et la suivante et en plus petit la liste des activités suivantes. Un écran de hall affichera tout le programme à la façon d’un écran de hall de gare.

Dans tous les cas les informations a mettre en avant sont les activités, leurs horaires et les changements d’horaires, les salles, les changement de salle, les activités en pause, celles qui ont un nombre de place limité et auxquelles on peut s’inscrire.

Il doit aussi être possible de diffuser une annonce.

Les activités sont la plupart du temps la responsabilité d’un intervenant, qui doit au début confirmer son lancement, autrement elle apparaîtra sur les écrans comme en attente de commencement. De même un intervenant peut indiquer s’il commencera en retard (et qu’il sait à peut près à quelle heure) ainsi que s’il finira en retard (et de combien de temps.)

Un événement dans sa globalité est géré par un ou plusieurs responsable qui eux aussi peuvent agir sur les activités en fonction de s’il y a des retards ou des changement.

Les visiteurs à l’aide d’un lien et de codes QR sur les écrans, peuvent ouvrir le programme sur leurs appareils, pointer les activités qu’ils veulent faire, afficher leurs détails, s’inscrire à l’une d’entre-elles.

Les visiteurs peuvent également s’inscrire sur une file d’attente virtuelle pour les poles étant limités en visiteurs concurrents. Ainsi il peuvent avoir une estimation de l’heure à laquelle ils vont passer et peuvent profiter de ce temps d’attend pour faire autre chose. À leur tour les visiteurs reçoivent une notification.

Nom du projet

Le nom du projet pour le service pédagogique et les enseignant c’est VenueBoard, mais pour votre version vous pouvez lui trouver un nom qui raisonne plus avec vous.

Finalité

Les meilleures réalisations seront testées en conditions réelles lors de journées portes ouvertes, de rentrée des classes, voir même à l’occasion du H-Tech Summit, si vous êtes assez convaincants.

Étape : API

Lors de cette étape vous aller concevoir et implémenter une API en NodeJS et TypeScript dont le but est d’organiser l’accès au données en base et leur modification pour porter le projet tout entier.

L’API présente mesures de sécurités : hachage de mots de passes, JWT, sécurité des cookies, CORS.

Cette API a pour but d’être utilisée par le frontend.

Étape : Conception d’interfaces

Lors de cette étape vous aller réfléchir aux interfaces qui composent le projet, qu’elles informations doivent être présentées, quand, et comment. Vous aller passer par plusieurs stages de conception frontend :

• zoning,
• wireframe,
• maquettage.

Vous allez aussi passer en revue les user stories utilisées lors de l’implémentation de l’API tout en en apportant de nouvelles.

Vous allez travailler avec Figma ou des outils similaires pour chacun des stages.

Étape : Implémentation d’interfaces

L’objectif de cette étape est l’implémentation du frontend du projet, l’implémentation des interfaces maquettées, l’implémentation de la communication avec l’API, et l’implémentation des fonctionnalités interactives.

Vous allez travailler en ReactJS.

Vous allez suivre les users stories établies lors du travail sur l’API.