Présentation Imaginatèque

Présentation du Projet IMAGINATEQUE

Présentée par Jade SAINT-ANGE le 25/03/2024

sOMmAIRE

Sécurité

Introduction

Organisation

Referencement SEO

Remerciement

Graphisme et Ergonomie

Les technologies utilisées

Présentation du Site

Conception du projet

Contexte

Afin de limiter la propagation du virus Covid-19 lors du premier confinement, les bibliothèques et centres de documentation, au même titre que d'autres établissementsrecevant du public, ont dû fermer leurs portes. Victime elle aussi de cette contrainte et inspirée par le click and collect, la médiathèque imaginateque souhaite en profiter pour développer en interne une solution d’emprunt en ligne. Les 42.500 livres (romans, bandes dessinées, albums pour enfants, documentaires) potentiellement disponibles à la lecture devraient figurer dans un annuaire accessible aux habitants des environs inscrits.

Objectifs

Permettre à l'administrateur de gerer le catalogue, les emprunts

Possibilité de consulter en ligne le catalogue de livre

Permerttre aux habitants d'emprunter un livre pendant la perdiode de crise sanitaire

02

Organisation

Organisation :

a) Les outils utilisées

TRELLO

Trello est une application de gestion de projet en ligne qui utilise des tableaux pour organiser les tâches. .

La méthode agile

+ INFO

Organisation :

Github

GitHub est une plateforme en ligne où les developpeurs peuvent travailler ensemble sur des projets .

+ INFO

Organisation :

github desktop

Organisation :

b) Cahier des charges

Les fonctionnalités :

US1. Creer son compte

US2. Se connecter

US3. Découvrir le catalogue

US4. Emprunter un livre

US5. Ajouter un livre dans le catalogue

US6. Voir les emprunts en cours

US7. Rendre un livre

Organisation :

c) Les diagrammes

Organisation :

c) Les diagrammes

Organisation :

c) Les diagrammes

03

GRAPHISME & ERGONOMIE

GRAPHISME ET ERGONOMIE

a ) WIREFRAME

GRAPHISME ET ERGONOMIE

b) MAQUETTAGE

GRAPHISME ET ERGONOMIE

b) MAQUETTAGE

GRAPHISME ET ERGONOMIE

b) MAQUETTAGE

GRAPHISME ET ERGONOMIE

b) CHARTE GRAPHIQUE

Police : Prata Arial

04

LES TECNHOLOGIES UTILISÉES

les technologies utilisées

a) CÔTÉ FRONT /CLIENT : REACT JS

Bibliothèque JavaScript open-source utilisée pour construire des interfaces utilisateur interactives et dynamiques pour les applications web Permet de créer des composants qui sont des éléments réutilisables Jsx : permet d’écrire langage html dans du javascript

les technologies utilisées

a) CÔTÉ FRONT /CLIENT : BOOTSTRAP

Framework qui simplifie la création de sites web en fournissant des styles et des composants pré- conçus.

les technologies utilisées

b) CÔTÉ BACK /SERVER : POSTGRES SQL

PostgreSQL est un système de gestion de base de données relationnelle (SGBDR) open-source et puissant. Il est utilisé pour stocker et gérer de grandes quantités de données de manière efficace et sécurisée.

les technologies utilisées

b) CÔTÉ BACK /SERVER : EXPRESS JS , NODE JS

Express.js : framework web minimaliste et flexible pour Node.js, offrant un système de routage et de middleware pour simplifier le développement d'applications web et d'API. Node.js : environnement d'exécution côté serveur open source permettant d'exécuter du code JavaScript côté serveur

les technologies utilisées

b) CÔTÉ BACK /SERVER : pgAdmin4

05

PRÉSENTATION DE LA PLATEFROME WEB

06

CONCEPTION DU PROJET

Spécifité tecniques

a) ARCHITECTURE MVC

• Le modèle représente les données et la logique de l'application, les requêtes SQL et les opérations sur la base de données.

• La vue responsable de l'affichage des données à l'utilisateur

• En tant qu’intermédiaire, le contrôleur reçoit les requêtes de l'utilisateur depuis la vue, les traite en fonction des règles métier du modèle, puis renvoie la réponse à la vue.

Spécifité tecniques

b) Administrateur : Gestion du catalogue (CRUD)

OPÉRATIONS CRUDCreate Read Update Delete

Api rest

Une API REST (Representational State Transfer) est un style d'architecture logicielle pour la conception de systèmes distribués, principalement utilisé dans le développement d'applications web. Une API RESTful utilise les principes fondamentaux du protocole HTTP pour permettre aux clients de communiquer avec un serveur de manière simple et cohérente.

Spécifité tecniques

Opération CREATE

b) Administrateur : Gestion du catalogue CRUD

server.js

collections_routes.js

collections_controllers.js

Spécifité tecniques

Opération READ

b) Administrateur : Gestion du catalogue CRUD

server.js

collections_routes.js

collections_controllers.js

Spécifité tecniques

C) CONNEXION

Spécifité tecniques

d) Reponsive

07

SÉcurité

sécurité : Côté serveur

Cross-Origin Resource Sharing (CORS) CORS : protocole de sécurité, permet de définir par quelle url on va recevoir des requêtes + Permet de contrer les attaques XSS (Cross site Scripting). Permet de gérer le Backend (API) et le Frontend (application React) qui sont hébergés sur des domaines ou des ports différents.

sécurité : Côté serveur

.env (prononcé "dot env") est un fichier de configuration utilisé pour stocker des variables d'environnement dans un projet logiciel. Les fichiers .env sont conçus pour stocker des informations sensibles en toute sécurité en les plaçant en dehors du code source ex: Secret Key, Clé API, l’url de la BDD

sécurité : Côté serveur

Bcrypt

Protections des données sensible

sécurité : Côté client

LE REGEX

S’assurer que les mots de passe respectent certains critères de complexité Permet d’éviter les injections SQL

sécurité : Côté client

sécurisation des routes

Seul un administrateur est autorisé à acceder à la partie gestion du catalogue , des emprunts et des users.

08

REFERENCEMENT SEO

REFERENCEMENT SEO

Le référencement SEO (Search Engine Optimization) est l'art d'optimiser un site web pour qu'il apparaisse plus haut dans les résultats des moteurs de recherche.

• Mots-clés : Choisir les bons termes que les gens utilisent pour rechercher des informations
• Contenu de qualité : Créer des informations utiles, intéressantes et de haute qualité qui répondent aux questions et besoins des utilisateurs.
• Expérience utilisateur : S'assurer que le site est facile à naviguer, rapide à charger,

Merci ! questions?

US4.Emprunter un livre

Utilisateurs concernés: inscritSi le livre est disponible, un bouton associé permettra alors de l’emprunter. Si l’inscrit clique sur le bouton, le livre ne sera plus accessible pour d’autres utilisateurs.

US7. Rendre un livre

Utilisateurs concernés: inscrit, admin Lorsqu’un inscrit vient rendre un livre sur place, l'admin confirme la remis et met le livre en disponible

Technologies utilisées

a) Côté Front / clientb) Coté Back/Serveur

US6.Voir les emprunts

Utilisateurs concernés: admin

• L'admin voit la liste des emprunts en cours.
• De son côté, l’inscrit voit aussi la liste des livres qu’il a empruntés.

Diagrammes cas d'utilisation

Un diagramme de cas d'utilisation est une représentation visuelle des interactions entre les acteurs (utilisateurs) et le système, montrant comment les utilisateurs interagissent avec le système pour atteindre leurs objectifs.

Diagramme de séquence

Un diagramme de séquence est une représentation visuelle des interactions entre les objets ou les composants d'un système dans une séquence temporelle. Il montre comment les différents objets coopèrent entre eux pour réaliser une action spécifique.

US5.Ajouter un livre dans le catalogue

Utilisateurs concernés: adminChaque livre possède :

• Un titre,
• Une image de la première de couverture,
• Une date de parution,
• Une description,
• Un auteur,
• Un genre.

US1.Creer son compte

Utilisateurs concernés: habitantL’habitant désirant s’inscrire devra renseigner : un nom, un prénom, un email valide,une date de naissance, son adresse postale et un mot de passe sécurisé résistant aux injections SQL.

La methode Agile

La méthode agile est une approche de gestion de projet qui favorise la flexibilité, l'adaptabilité et la collaboration. Plutôt que de planifier tous les détails du projet dès le départ, la méthode agile divise le travail en petites phases appelées "itérations". besoins changeants.

Qu'est ce que c'est?

GitHub est une plateforme en ligne qui permet aux développeurs de collaborer sur des projets de logiciels en utilisant Git, un système de gestion de versions. Sur GitHub, les utilisateurs peuvent héberger leurs projets, partager leur code source, suivre les modifications apportées au code, proposer des modifications, examiner le code des autres, et gérer les problèmes ou les bugs.

Spécifité tecniques

a) Architecture utilisés

b) Administrateur

Gestion des collections (CRUD)Gestions des utilsateurs

c) Client

Authentifications

d) Responsive

US2.Se connecter

Utilisateurs concernés: inscrit, l'administrateur

Diagramme de classe

Un diagramme de classes est une représentation visuelle des classes d'objets dans un système logiciel et des relations entre ces classes. Il montre les différentes classes, les attributs et les méthodes de chaque classe, ainsi que les relations telles que l'héritage, l'association, l'agrégation et la composition entre les classes. Le MCD (Modèle Conceptuel de Données) représente les entités et leurs relations dans la conception de bases de données. Le MPD (Modèle Physique de Données) décrit comment ces données sont stockées concrètement.(les détails tels que les types de données, les index et les contraintes)

a) Les outils utilisées b) Cahier des chargesc) Les diagrammes

a) Wireframe b) Maquettage c) Charte graphique

US3.Découvrir le catalogue

Utilisateurs concernés: inscrit, admin L’inscrit aura accès à l’intégralité du catalogue de la médiathèque. Un visuel permettra de différencier les livres disponibles de ceux qui ne le sont pas. Si besoin, il peut rechercher un livre précis par son titre grâce à une barre de recherche ou filtrer par genre (ex : romance, science-fiction, fantastique, etc.)