Présentation Imaginatèque

Présentation du ProjetIMAGINATEQUE

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

Conception du projet

Les technologies utilisées

Organisation

Referencement SEO

Remerciement

Sécurité

Présentation du Site

Graphisme et Ergonomie

Introduction

sOMmAIRE

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.

Contexte

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

Objectifs

Organisation

02

a) Les outils utilisées

Organisation :

La méthode agile

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

TRELLO

+ INFO

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

Organisation :

+ INFO

Github

Organisation :

github desktop

US1. Creer son compte

US7. Rendre un livre

US6. Voir les emprunts en cours

US5. Ajouter un livre dans le catalogue

US4. Emprunter un livre

US3. Découvrir le catalogue

US2. Se connecter

b) Cahier des charges

Organisation :

Les fonctionnalités :

Organisation :

c) Les diagrammes

Organisation :

c) Les diagrammes

Organisation :

c) Les diagrammes

03

GRAPHISME &ERGONOMIE

a ) WIREFRAME

GRAPHISME ET ERGONOMIE

b) MAQUETTAGE

GRAPHISME ET ERGONOMIE

b) MAQUETTAGE

GRAPHISME ET ERGONOMIE

b) MAQUETTAGE

GRAPHISME ET ERGONOMIE

Police : PrataArial

b) CHARTE GRAPHIQUE

GRAPHISME ET ERGONOMIE

LES TECNHOLOGIES UTILISÉES

04

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

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

les technologies utilisées

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

a) CÔTÉ FRONT /CLIENT : BOOTSTRAP

les technologies utilisées

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.

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

les technologies utilisées

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

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

les technologies utilisées

b) CÔTÉ BACK /SERVER : pgAdmin4

les technologies utilisées

PRÉSENTATION DE LA PLATEFROME WEB

05

CONCEPTION DU PROJET

06

• 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.

a) ARCHITECTURE MVC

Spécifité tecniques

OPÉRATIONS CRUDCreateReadUpdateDelete

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.

b) Administrateur : Gestion du catalogue (CRUD)

Api rest

Spécifité tecniques

server.js

b) Administrateur : Gestion du catalogue CRUD

collections_routes.js

collections_controllers.js

Opération CREATE

Spécifité tecniques

server.js

b) Administrateur : Gestion du catalogue CRUD

collections_routes.js

collections_controllers.js

Opération READ

Spécifité tecniques

server.js

b) Administrateur : Gestion du catalogue CRUD

collections_routes.js

collections_controllers.js

Opération UPDATE

Spécifité tecniques

server.js

b) Administrateur : Gestion du catalogue CRUD

collections_routes.js

collections_controllers.js

Opération Delete

Spécifité tecniques

server.js

C) Client : INSCRIPTION

user_routes.js

user_controllers.js

Opération CREATE

Spécifité tecniques

C) CONNEXION

Spécifité tecniques

d) Reponsive

Spécifité tecniques

07

SÉcurité

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é serveur

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.

sécurité : Côté client

08

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,

REFERENCEMENT SEO

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.

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.

Diagrammes cas d'utilisation

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.

Diagramme de séquence

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.

d) Responsive

a) Architecture utilisés

Authentifications

c) Client

Gestion des collections (CRUD)Gestions des utilsateurs

Spécifité tecniques

b) Administrateur

US2.Se connecter

Utilisateurs concernés: inscrit, l'administrateur

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)

Diagramme de classe

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.)