Chapitre 4 : Conception technique
5.1. Architecture du système
5.1.1. Architecture client-serveur
Le système SOS Communautaire repose sur une architecture
client-serveur modulaire, optimisée pour la scalabilité, la
sécurité et la réactivité en contexte urbain. Elle
se divise en trois couches principales :
1. Frontend (Client) :
· Mobile : Application développée en Flutter
(multiplateforme Android/iOS) pour une interface native et fluide.
· Web : Interface pour les autorités et
administrateurs en ReactJS avec Material UI, intégrant des tableaux de
bord interactifs et des rapports statistiques.
· Responsiveness : Design adaptatif pour smartphones,
tablettes et ordinateurs.
2. Backend (Serveur) :
· Node.js + Express : API REST pour gérer les
requêtes (création d'incidents, notifications,
authentification).
· JWT (JSON Web Token) : Authentification
sécurisée avec rafraîchissement des tokens toutes les 15
minutes.
· Gestion des erreurs : Retours structurés en JSON
avec codes d'erreur standardisés (ex. 401
Unauthorized, 404 Not Found).
3. Base de données :
· PostgreSQL : Modèle relationnel pour les
données structurées (utilisateurs, incidents, validations).
· MongoDB (optionnel) : Stockage flexible pour les logs,
statistiques et données non structurées (ex. médias
associés aux incidents).
5.1.2. Technologies utilisées
Composant
|
Technologie
|
Justifications
|
Frontend mobile
|
Flutter
|
Développement
multiplateforme avec
performance
native.
|
Frontend web
|
ReactJS + Material UI
|
Interface réactive et
moderne pour les
tableaux
de bord.
|
Backend
|
Node.js + Express
|
Scalabilité, gestion
asynchrone,
et
intégration facile avec
les APIs externes.
|
Base de données
|
PostgreSQL
|
Modèle relationnel
robuste pour les
données
critiques (utilisateurs,
incidents).
|
Notifications
|
Firebase Cloud
Messaging (FCM)
|
Notifications push en
temps réel avec
faible
latence.
|
Géolocalisation
|
Google Maps API /
Mapbox
|
Précision des
coordonnées GPS et
affichage
interactif des
incidents.
|
Stockage médias
|
AWS S3 / Firebase
Storage
|
Hébergement sécurisé et
scalable
des
photos/vidéos associées
aux incidents.
|
|
5.2. Conception de l'interface utilisateur (UI/UX)
5.2.1. Maquettes des écrans clés 1.
Écran d'accueil :
· Carte interactive avec marqueurs pour les incidents
récents.
· Bouton "SIGNALER" en position centrale, accessible en un
clic.
· Filtres par type d'incident (accident, vol, incendie) et
date.
1. Formulaire de signalement :
· Sélection d'une catégorie (accident,
vol, incendie).
· Ajout d'une photo/vidéo (bouton "Ajouter
média").
· Description textuelle libre avec compteur de
caractères.
· Géolocalisation automatique avec option de
correction manuelle.
x
4
Signaler un incident
Type d'incident
Ci Incendie di Vol
Accident Autre
Description
Décrivez brièvement
l'incident...
Ajouter une photo (facultatif)
a
Cliquez pour ajouter une photo
Localisation
Rue de la République, Paris 75011
|
|
Annuler
|
aor Envoyer
|
|
| 
