Fonctionnalités demandées

Voici la liste des fonctionnalités que vous devez implémenter dans votre application

• Permettre d'explorer/rechercher des super-héros en :
• cliquant sur un "bouton" pour obtenir une liste aléatoire de 10 super-héros
• en effectuant une recherche par mot clef (sur le nom et la description des personnages)
• Les super-héros résultant d'une recherche aléatoire ou non sont présentés sous forme de liste minimaliste où le nom de chaque personnage sera accompagné d'un thumbnail d'illustration
• Si l'on clique sur un super-héros de la liste, on visualise les détails disponibles sur lui. En particulier on affichera au moins :
  • Une illustration (qui pourra automatiquement cycler lorsque plusieurs visuels sont disponibles)
  • Son nom
  • Sa description
  • Le comic (titre, date, description) où est apparu le personnage pour la première fois
  • Le comic (titre, date, description) où est apparu le personnage pour la dernière fois
• Permettre à l'utilisateur de composer ses propres équipes de super-héros :
• Par défaut, l'utilisateur dispose d'une équipe "vide" (comme un panier sur un site marchand)
• Lorsqu'il visualise en détail un super-héros, un "bouton" lui permet de l'ajouter à son équipe
• L'utilisateur peut visualiser à tout moment la liste des membres de son équipe, et éventuellement supprimer des personnages (de son équipe) s'il le souhaite
• Lorsqu'il visualise les membres de son équipe, l'utilisateur peut la supprimer ou la sauvegarder (en local -localstorage par exemple- sur son navigateur ) auquel cas il devra lui donner un nom
• L'utilisateur peut aussi choisir de composer une nouvelle équipe, auquel cas la précédente sera soit supprimée soit sauvegardée au préalable
• L'utilisateur peut charger une équipe précédemment sauvegardée (pour poursuivre sa composition par exemple)

L'API Marvel

Cet API nécessite la création d'un compte développeur. C'est notamment nécessaire pour obtenir vos clés qui vous permettront de requêter l'API. La documentation est claire et sa version "interactive" vous permet de tester l'API préalablement à tout développement. Un compte développeur ne vous coûtera rien bien entendu. Il sera toutefois limité à 3000 requêtes par jour. C'est amplement suffisant mais attention toutefois à ne pas oublier une requête dans une boucle mal ficelée !

Précisons que pour utiliser l'API, vous devrez indiquer le nom de domaine (ou les noms de domaine) depuis lesquels vous effectuez vos requêtes. A priori, si vous développez votre projet en local, vous pouvez juste saisir "localhost" ou votre IP. Sinon indiquez le domaine de votre hébergement. Enfin il faut aussi dire quelle est la nature de votre projet. Un simple "school project" suffira.

Critères d'évaluations

• Maîtrise du framework

  Pour réaliser ce projet, vous devez utiliser Vue ou Angular. Quelque soit votre choix, la logique du framework doit être respecté et ses composants utilisés à bon escient. La duplication des données comme du code est à proscrire. Vous avez un projet avec plusieurs "liste de", c'est forcément exploitable.

  Si vous optez pour Vue.js, la mise en oeuvre du "store pattern" vous simplifiera sans aucun doute la vie. En revanche, vous ne pouvez pas recourir à Vuex (au cas où l'idée vous traverserait l'esprit).

• Application 100% fonctionnelle

  Votre application doit être totalement fonctionnelle. Elle sera testée en détail, console ouverte.

• Organisation et clarté du code, facilité d'évolution

  Une attention toute particulière doit être portée à l'organisation de vos fichiers, la clarté de votre code que l'on attend un minimum commenté, l'homogénéité des conventions de nommage... Vous êtes des développeurs web. On ne peut pas se contenter d'un code qui marche à l'instant t. Il faut aussi et surtout que ce soit propre et bien pensé, de sorte à ce que l'application puisse facilement évoluer sans restriction.

• Ergonomie

  Même si ce n'est pas l'objectif principal de ce projet, on attend une interface claire et un minimum intuitive. Dites vous que votre travail doit faire l'objet d'une présentation à un client et qu'il convient de ne pas le faire fuir au premier coup d'oeil.

Mise en garde

Le web ne manque d'exemples de projet Vue ou Angular autour de l'API Marvel. On peut toujours y voir des exemples ou de la documentation. Prenez-bien soin de ne pas y voir davantage...

Modalité et livrable du projet

• Binôme

  Ce projet est à réaliser par groupe de 2 étudiants. Ce n'est pas pour être sympa, c'est parce qu'il y a du travail pour 2, largement.

• A qui

  Votre livrable sera à envoyer par mail à frederic.mora@unilim.fr et julien.dupuis.aff@unilim.fr. Préférez un Git ou un lien pour télécharger votre archive plutôt que de la joindre directement à votre message, la passerelle de l'université filtre les archives contenant des scripts.

• Quand : le 6 avril 2021 au plus tard

  Vous devrez fournir :

  1. les sources (documentées!) de votre application

  2. une url où l'on peut tester en ligne votre application (pensez à inclure le domaine sur votre compte Marvel)

  3. un micro rapport (3000 mots maximum) qui résume l'organisation de votre implémentation afin que l'on puisse rapidement s'y retrouver dans votre code