Chapitre 5 : Implémentation
6.1. Développement frontend (mobile et web)
6.1.1. Implémentation des écrans clés
(Flutter/ReactJS)
Le développement frontend de SOS Communautaire repose sur
une approche modulaire, avec des composants réutilisables et une
architecture orientée utilisateur. Voici les détails techniques
des écrans principaux :
Écran d'accueil (Mobile - Flutter)
· Objectif : Afficher une carte interactive avec les
incidents récents et un bouton centralisé pour le signalement.
· Technologies :
· google_maps_flutter pour
l'intégration de Google Maps.
· provider pour la gestion
d'état (ex. liste des incidents).
· Code exemple :
Formulaire de signalement (Mobile - Flutter)
· Fonctionnalités :
· Sélection de la catégorie (accident, vol,
incendie).
· Ajout de médias via
image_picker.
· Géolocalisation automatique via
geolocator.
· Validation :
· Contrôle du format de la photo (WebP, taille = 2
Mo).
· Vérification de la description (= 10
caractères). Tableau de bord autorité (Web -
ReactJS)
· Objectif : Interface de gestion des incidents avec
filtres, cartographie et actions prioritaires.
· Technologies :
· React Table pour les listes
dynamiques.
· Chart.js pour les statistiques (zones
à risques).
· Code exemple :
6.1.2. Intégration des APIs
Les appels API suivent une architecture RESTful, avec des
requêtes sécurisées via JWT :
· Authentification :
Signalement d'un incident :
6.2. Développement backend
6.2.1. Logique métier (gestion des incidents,
priorisation)
Le backend, développé en Node.js + Express ,
orchestre les flux de données entre la base de données et les
interfaces :
Gestion des incidents Création :
Priorisation via confirmations
communautaires
· Mécanisme :
· Chaque confirmation incrémente un compteur dans la
table Confirmation.
· Si le compteur dépasse un seuil (ex. 5),
l'incident est marqué comme "Confirmé".
Code exemple :
6.2.2. Sécurité (JWT, OTP, cryptage)
Authentification sécurisée :
· JWT : Tokens expirant toutes les 15 minutes, avec
rafraîchissement via un refresh_token stocké en base
OTP (One-Time Password) :
· Envoi par SMS via Twilio ou Nexmo.
· Validation :
Cryptage des données :
· Chiffrement AES-256 pour les mots de passe et les
données sensibles :
6.3. Intégration des services externes
6.3.1. Géolocalisation (Google Maps/Mapbox)
Implémentation :
· Frontend mobile :
· Utilisation de geolocator pour obtenir
les coordonnées GPS.
· Envoi des coordonnées au backend lors du
signalement.
· Frontend web :
· Affichage des incidents sur une carte via
@react-google-maps/api.
· Backend :
· Stockage des coordonnées en type
GEOGRAPHY dans PostgreSQL.
Exemple de requête SQL pour les incidents proches
:
| 
