5.2 - Projet

L’objectif du laboratoire est de mettre en commun vos connaissances actuelles des technologies web client pour construire une application JavaScript de gestion d’items (CRUDL).

Vous devrez également réfléchir aux aspects UI et UX de votre projet:

UI

• Interface Utilisateur: Tout ce qui entoure l'affichage, formatage et mise en forme d'un site web ou application
• On pourrait comparer avec les graphisme, le HUD et effets spéciaux d'un jeu vidéo
• Dans une application c'est la mise en page, le choix des couleur, le visuel

UX

• Expérience Utilisateur: Englobe l'ensemble des interactions(navigation, clic, gestes tactiles, efficacité, ergonomie, résultat prévisible/intuitif) offertes à l'utilisateur et les émotions qu'elles génèrent
• Dans un jeu vidéo, ce serait les mécaniques de gameplay
• Dans une application ce sont les mécanismes disponibles pour exploiter les fonctionnalités: raccourcis clavier, manipulations, décisions à prendre à l'utilisateur

[BONUS] Librairie CSS

Pour faciliter l'implémentation d'un UI/UX standard et uniforme d'un navigateur à l'autre, on peut créer un ensemble de règles CSS réutilisables.

Il existe plusieurs librairies offrant ce type d'utilitaires

• Pico CSS
• Oat.ink
• Bootstrap
• Materialize
• Bulma
• Semantic UI
• et plus!

Des points bonus sont attribués dans le cadre du travail si vous explorez une librairie CSS pour l'intégrer judicieusement(composants et responsive) dans votre application.

Échéancier

Votre travail est découpé en 2 phases pour encourager une progression itérative:

• Suivi: En personne, sur votre machine, avant la fin du dernier cours
• Livraison: Énoncé de travail LÉA

Fonctionnalités

L'application permets de créer une liste de lecture de vidéos Youtube, selon les spécifications suivantes:

• Apportez une attention particulière au rendu visuel et intégrez votre nom judicieusement à la page
• Chaque vidéo possède les caractéristiques suivantes
  • Nom
  • URL
  • Durée
  • Favori
• Liste des items, sinon indique que la liste est vide
  • Afficher toutes les caractéristiques des vidéos
  • Représenter graphiquement si l'item est favori ou non
  • Calculer et afficher la somme de la durée de toutes les vidéos
• Lecture
  • On doit pouvoir sélectionner une vidéo pour la faire jouer, sinon un message s'affiche
  • La vidéo en cours de lecture doit être identifiée
• Ajout et Modification d'un item dans la liste via un formulaire
  • On peut confirmer l'action via un bouton ET la touche Enter
  • On peut annuler l'action sans appliquer les changements
  • En modification, afficher les valeurs de l'item correspondant
• Valider les données et offrir une rétroaction à l'utilisateur
  • Nom requis
  • URL requise, respectant le format https://www.youtube.com/watch?v=...
  • Durée requise, respectant le format hh:mm:ss et des valeurs valides
• Suppression d’un item de la liste, après confirmation avec l'utilisateur
• Que ce passe-t-il lors de la modification/suppression de la vidéo en cours de lecture?

Exemples

Exemple 1

Exemple 2

Exemple 1

Exemple 2

Requis techniques

• Étant donné les mesures de sécurité accrues des navigateurs, le chargement de ressources externes à partir d'un fichier brute est limité. On peut utiliser un serveur HTTP local pour répondre aux requis du navigateur, par exemple via l'extension VS Code Live Server
• Pour faire jouer la vidéo, on peut utiliser le mécanisme de iframe
  👀 Remarquez le format de l'URL du iframe VS le format d'URL requis par l'application
  • https://www.youtube-nocookie.com/embed/8fcSviC7cRM?autoplay=1
  • https://www.youtube.com/watch?v=8fcSviC7cRM

• Exploitez le mécanisme srcdoc pour afficher l'écran d'attente de sélection de la vidéo à jouer
  👀 srcdoc

Remise

Remettre tous les fichiers votre projet dans un fichier ZIP via LÉA