Conception et développement d une plateforme d Ebook pour étudiants

Texte intégral

(1)PICART Mathieu LE BEC Owen FRÈRE Jules. RAPPORT DE PROJET. Conception et développement d’une plateforme d’Ebook pour étudiants. 3ème année de licence informatique 2019-2020. Tuteur : Mounir LALLALI.

(2) 1- Définition du projet. 3. 1.1 Analyse de l’existant 1.2 Cahier des charges ( Annexe 2 ) 2- Organisation technique de l’application 2.1- Outils et technologies utilisées 2.2- Schéma de l’architecture 2.3- Schéma BDD 3- Organisation graphique de l’application 3.1- Zoning 3.2- Modèle IHM 3.3- Charte & logo 4- Gestion du projet 5- Conclusion 5.1- Ce qui a marché 5.2- Ce qui n’a pas marché 5.3- Ce que l’équipe en a appris 6- Annexes. 3 3 4 4 5 6 8 8 10 12 15 15 15 15 15 16. 7- Table des figures. 25. 2.

(3) 1- Définition du projet Le sujet principal de ce projet étant la création d’une bibliothèque universitaire en ligne nous nous sommes d'abord intéressés à ce qu’il existait déjà. Une fois cette analyse de l’existant terminée nous avons défini les différentes fonctionnalités que notre application devrait fournir ce qui nous a permis de définir un cahier des charges.. 1.1 Analyse de l’existant Pour l’analyse de l'existant, nous nous sommes basés sur des applications web connues du grand public. C’est différentes applications englobes une grande partie des sujets qui tourne autour des ebooks : la vente, la lecture et le téléchargement. Nous avons analysé comment ces applications utilisent ce produit et dans quel environnement le client se trouve lors de l’utilisation de leur application. Nous avons résumé cette analyse en un tableau (Annexe 1). Après cette phase nous avons pu déterminer les grandes fonctionnalités de notre application et ses limites.. 1.2 Cahier des charges ( Annexe 2 ). 3.

(4) 2- Organisation technique de l’application Pour le choix de l’architecture technique de notre application, nous avons décidé de choisir une forme plutôt basique d’un système d’application web. Elle est composée en 2 parties : la partie front, une api permettant l’affichage graphique d’information qui elle même appel une api relié à une base de données. Nous avons choisi pour le front d'utiliser ReactJS et pour l’api back, Express un package de NodeJS. Pour la base de données, l'utilisation de MySQL nous a paru être le bon choix. Le choix de ces technologies s'est fait assez rapidement. Nous les connaissons assez bien et elles répondent parfaitement à notre besoin : une capacité d’adaptabilité avec la possibilité d'ajouter des packages sans avoir à tout recréer et une simplicité à mettre en place grâce à NodeJS et npm.. 2.1- Outils et technologies utilisées Outils : - Visual studio code : traitement de texte spécialisé dans le coding grâce à sa possibilité d’ajouter une multitude d’extensions très utiles - phpMyAdmin : gestion rapide de bases de données grâce à son interface graphique - MySQLWorkbench : création de base de données grâce à un simple schéma - GitHub : partage et gestion de fichier - Figma : création de zoning et de maquette d’application web - Photoshop : modification et création du logo Technologies : - MySQL : serveur d'hébergement de notre base de données - Serveur Express (NodeJS) : ce serveur nous a permis de mettre en place notre api en lien avec la base de données. Nous y avons ajouté plusieurs npm modules : nodemon, cors, mysql, dotenv, multer et bcryptjs - Serveur React (NodeJS) : ce serveur gère toute la partie front, il fait appel à la première api. Nous avons ajouté plusieurs npm modules : axios, bootstrap, cookie-js, react-router et mobx. 4.

(5) 2.2- Schéma de l’architecture. Figure 1 : Schéma de l'architecture. L’application est gérée par deux api. L’api React qui permet de générer les différentes pages de notre application : le client envoie une requête http au serveur qui lui renvoie des fichiers HTML, CSS et JS ( ces différents fichiers sont générés automatiquement par react ). Le javascript de ses pages permet d’envoyer des requêtes à notre second api. Cette api est une api NodeJs gérer grâce à express elle permet le lien entre la base de données et le client. Elle reçoit des requêtes http et renvoie des fichiers json. La base de données est gérée grâce à phpMyAdmin.. 5.

(6) 2.3- Schéma BDD. Figure 2 : Schéma de la base de données. La base de données est constituée de 10 tables : - ROLE - USER - PAGE - FAVORIS - COMMENT - EBOOK - EBOOK_TYPE - TYPE - PRESS - PRESS_COMMENT Le schéma, ci-dessus, à été créé à l’aide du logiciel MySql-WorkBench puis nous avons généré un script SQL grâce à ce schéma que nous avons importé dans phpmyadmin. Un jeu de données a permis de pré-remplir la base de données afin de commencer les tests.. 6.

(7) Vous trouverez un exemple ci-dessous.. Figure 3 : Représentation table BDD. On peut voir que nous avons rempli la table “EBOOK” avec différentes données. Le schéma au-dessus est le dernier schéma que nous avons réalisé. Durant sa conception, nous avons établi 4 schémas différents avant celui-ci. Le jeu de données changeait à chaque fois que le schéma changeait. Il est également important de savoir que tous les id sont auto-incrémentés afin qu’il n’y ait pas de conflits à ce niveau et que l’attribut “img” dans les tables “USER” et “EBOOK” représente respectivement la photo de profil d’un utilisateur ainsi que la première de couverture d’un livre stocké en base64. La table “PRESS_COMMENT” est la table permettant de lier les ebooks et les sites de critiques. Ainsi un commentaire, une date et une note sont enregistrés. Elle possède la même utilitée que la table “COMMENT” qui lie les utilisateurs aux ebooks. La table “ROLE” permet de gérer les différents utilisateurs avec des degrés d’accès différents. Ainsi un étudiant n’aura pas accès aux mêmes fonctionnalités qu’un admin. Le groupe “USER”, “EBOOK” et “FAVORIS” représente la possibilité pour un utilisateur d’ajouter des favoris et d’ainsi de pouvoir les traiter cette liste. Le groupe “EBOOK”, “TYPE” et “EBOOK_TYPE” représente le fait qu’un ebook peut avoir plusieurs genres. Exemple : “science-fiction”, “dramatique” ou encore “action”. Le groupe “USER”, “EBOOK” et “PAGE” représente le fait qu’un utilisateur peut lire un ebook quitter l’application et revenir afin de pouvoir poursuivre sa lecture à la page ou il était rendu.. 7.

(8) 3- Organisation graphique de l’application 3.1- Zoning Le zoning consiste en la séparation en grandes zones des pages de la future application. On le réalise avant les IHM afin d’avoir une idée globale de l’apparence du site. La particularité du zoning est qu’il y a très peu de détails sur ce type de maquettes (contrairement aux IHM) mais diviser le site en zones reste une étape importante lors de la conception d’une application. Pour notre projet, nous avons réalisé 7 maquettes de zoning pour mes 7 pages. Vous trouverez la page d’accueil et la page de présentation d’un livre ci-dessous, les autres seront en annexe.. Figure 4 : Zoning page d’accueil. Pour cette première maquette, on observe 4 zones différentes. Les deux premières sont dans le header. Le menu est à droite et le logo à gauche, une disposition classique afin de ne pas perdre l’utilisateur. Dans le corps de l’application, on distingue 2 zones. Une grande zone de proposition de livre qui permet immédiatement attirer l’attention du visiteur et une barre de recherche sera disposée au-dessus de celle-ci afin d’être rapidement accessible.. 8.

(9) Figure 5 : Zoning page d’un livre. La seconde maquette (ci-dessus) est le zoning de la page de présentation d’un livre. Le header est le même sur toutes les pages comme on peut le remarquer en comparant ces deux maquettes. Nous avons divisé la page en 4 principales zones, l’image du livre, ces informations, les notes de presse et enfin les commentaires des utilisateurs de l’application.. 9.

(10) 3.2- Modèle IHM Les maquettes IHM sont plus détaillées que les maquettes de zoning. Pour les réaliser, nous nous sommes appuyés sur le zoning que nous avions réalisé en amont. Ainsi, les zones sont les mêmes, mais on observe davantage de détails. Nous avons utilisé Figma pour les créer. Dans cette partie, je vais uniquement détailler les 2 premières pages, les autres seront disponibles en annexe. La page d’accueil ressemblera donc à cette IHM. On remarque qu’elle est très proche de celle du zoning, mais nous pouvons mieux visualiser les différents éléments.. Figure 6 : IHM page d’accueil. 10.

(11) Comme vous pouvez le voir, nous reprenons exactement les mêmes éléments que dans le zoning, mais nous avons précisé les composants.. Figure 7 : IHM page d’un livre. 11.

(12) 3.3- Charte & logo. Nous avons choisi la police “Inter!” afin de nous démarquer de la classique Roboto de Google, mais tout en restant sur une police sobre et lisible.. Figure 8 : Représentation police. Pour les couleurs, nous sommes restés sur les couleurs de base de bootstrap, sauf pour la couleur principale que nous avons modifiée afin qu’elle corresponde à notre logo. Figure 9 : Représentation couleurs. 12.

(13) Les boutons sont des boutons classiques pour une lisibilité claire.. Figure 10 : Représentation boutons. Nous nous sommes inspirés des formulaires de Google pour un style simple et minimaliste.. Figure 11 : Représentation formulaire. 13.

(14) Et enfin nous avons défini plusieurs composants de carte simple et lisible.. Figure 12 : Représentation card. Pour le logo nous avons choisi de donner la forme d’un livre à notre texte ainsi que de créer plusieurs couches afin d’imiter des pages.. Figure 13 : Logo. 14.

(15) 4- Gestion du projet Pour une bonne communication dans le groupe, nous avons utilisé plusieurs technologies : - Pour informer les différents participants des avancements du projet, nous avons utilisé le tableau de bord proposé par github. Il nous a permis de mieux organiser notre travail. - Pour accélérer notre communication nous avons aussi utilisé messenger (la messagerie instantanée de facebook) et Discord. - Pour partager nos différents fichiers, nous avons utilisé GitHub. 5- Conclusion 5.1- Ce qui a marché Le choix d'utiliser une technologie que les personnes du groupe connaissaient en partie fut un vrai plus et nous a permis de démarrer le développement très rapidement. Nous avons pu choisir les différentes technologies que nous voulions utiliser avant même le début du développement. La communication pendant le développement à été simplifiée et bien utilisée grâce aux différentes technologies choisies. Ces différents choix mis en place et utilisés pendant ce projet nous ont permis d'obtenir une partie d’application fonctionnelle et qui respectait en grande partie notre attente.. 5.2- Ce qui n’a pas marché Une des parties qui a le moins bien marché est l’utilisation d’une des technologies, la technologie de lecture des fichiers de type epub ( React Reader ). Nous n’avions pas bien analysé la manière d’utiliser cette technologie. Une fois le problème découvert il était trop tard pour pouvoir chercher et apprendre une nouvelle. Nous avons donc décidé d'abandonner en partie cette fonctionnalité en utilisant des fichiers pdf à la place de ces fichiers epub.. 5.3- Ce que l’équipe en a appris Cette expérience nous a permis d'appréhender le travail de groupe et à distance. Nous avons pu enrichir nos connaissances des différentes technologies utilisées : celles de développement mais aussi celles de communication.. 15.

(16) Nous avons pris conscience que le choix des technologies doit être un vrai travail de recherche et pas juste une lecture de son descriptif. Elle va nous permettre de mettre en place plus rapidement les prochains projets et de mieux connaître différents outils de gestion de projets.. 16.

(17) 6- Annexes 1) ANNEXE 1 https://docs.google.com/spreadsheets/d/1-cV8MfsPfs8ezkqoHvghqf2DEnngdLLyrV-Zsq9Eq6o/edit#gid=0. 2) ANNEXE 2 CAHIER DES CHARGES. PROJET EBOOK 1) Introduction L’application permet la gestion et le partage de livres en ligne. Cette application servira de bibliothèque universitaire en ligne pour l'université de Brest. Elle sera gérée par la bibliothèque universitaire mais aussi par le corps enseignant. Cette application sera une application uniquement web.. 2) Utilisateurs Il y aura trois types d’utilisateurs, ils auront tous la possibilité de se connecter à l’application, de modifier les données de leur compte, de rechercher un livre dans la bibliothèque, d’ajouter un dans leur favorie, de lire un livre depuis l’application, de commenter l’application et de télécharger un livre. Les utilisateurs de base (les étudiants) n’auront pas d’autre fonctionnalité accessible. Les enseignants auront en plus la possibilité de partager une œuvre à un groupe de personnes (classes ou groupe de personnes qu’il aura choisis lui-même). Les administrateurs (certains enseignants mais aussi les gestionnaires de la BU) auront en plus la possibilité de modérer les commentaires et de mettre en ligne de nouveaux livres.. 17.

(18) 3) Fonctionnalités L’inscription : Toute personne possédant une adresse mail de l’ubo aura un compte qui lui sera relié. La connexion : Un utilisateur pourra se connecter grâce à son adresse mail de l’université et le mot de passe sera le même que celui de l’ent. Recherche d’une œuvre : Un utilisateur aura une liste d'œuvres à sa disposition (l’ensemble de la bibliothèque numérique) il pourra affiner ses recherches grâce à des mots clé, une sélection par types/genre, des titres, des auteurs et des dates de parution. Proposition de livre : L'application propose à l’utilisateur des livres qui pourraient l'intéresser. L’utilisateur pourra sélectionner des centres d'intérêts mais l’application lui proposera aussi des livres en fonction des ses précédentes lectures et de ses commentaires. Lecture : une œuvre pourra être lue depuis l’application, cette lecture pourra être reprise plus tard (l'application enregistre la page de l’utilisateur). Commenter : un livre pourra être commenté par un utilisateur positivement ou négativement. Liste de Favoris : chaque utilisateur pourra ajouter un livre à sa liste de favoris ce qui lui permettra de les retrouver plus rapidement. Partage de citation : un utilisateur aura la possibilité de générer un lien relié à un point clé du livre Téléchargement : un utilisateur aura la possibilité de télécharger un livre (format à définir) Groupe d’étude : un enseignant aura la possibilité de créer un groupe d’étude et de leur partager des œuvres et d’en discuter dans un chat intégré à l'application. Modération : les administrateurs pourront supprimer un commentaire, voire bannir un utilisateur pour une durée déterminée. Ajout d’une œuvre : les administrateurs auront la possibilité de mettre en ligne une avec ses données (titre, auteur, date de parution, type/genre) elle pourra aussi relier des mots clefs a cette œuvre. Ces informations pourront être modifiées si besoin.. 18.

(19) 4) Scénarios Scénario 1 (Administrateur) :. L’administrateur se connecte il peut consulter les livres. présents de l’application. Il va ajouter un livre, remplir le formulaire (titre, auteur…) puis le mettre en ligne. Il va ensuite modifier un autre livre et en supprimer un autre. Scénario 2 (Étudiant) : Il se connecte, utilise l’outil de recherche de l’application afin de trouver un livre qui pourrait lui plaire, il commence à lire le livre qu’il a trouvé puis il l’ajoute à sa liste de favoris, il regarde les autres livres et retourne dans ses favoris pour reprendre la lecture, il poste un commentaire sur celui ci.. 3) ANNEXE 3 Zoning :. 19.

(20) 20.

(21) 21.

(22) 4) ANNEXE 4 IHM :. 22.

(23) 23.

(24) 24.

(25) 7- Table des figures Figure 1 : Schéma de l'architecture……………………………………………………………………………5 Figure 2 : Schéma de la base de données..………………………………………………………………….6 Figure 3 : Représentation table BDD…………………………………………………………………….……7 Figure 4 : Zoning page d’accueil……………………………………………………………………………….8 Figure 5 : Zoning page d’un livre……………………………………………………………………………....9 Figure 6 : IHM page d’accueil…………………………………………………………………………………10 Figure 7 : IHM page d’un livre………………………………………………………………...………………11 Figure 8 : Représentation police……………………………………………………………………………...12 Figure 9 : Représentation couleurs………………………………………………..…………………………12 Figure 10 : Représentation boutons………………………………………………………………………….13 Figure 11 : Représentation formulaire……………………………………………………………………….13 Figure 12 : Représentation card……………………………………………………………………………...14 Figure 13 : Logo…………………..……………………………………….…………………………………...14. 25.

(26)