timelapse/timelapse-diapo
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code structure for improved readability and maintainability

Browse Source
This commit is contained in:
Kerboul
2025-04-28 00:52:40 +02:00
parent b6e0080caa
commit 93026436a9
48 changed files with 2116 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
diapos/info.tex Normal file
View File

@@ -0,0 +1,188 @@
\begin{frame}{Architecture informatique}
\begin{itemize}
\item Développement basé sur méthodologie agile
\item Architecture client-serveur distribuée
\item Trois composants principaux : Backend, Frontend, Application mobile
\item Infrastructure robuste et sécurisée
\end{itemize}
\end{frame}
\begin{frame}{Architecture globale}
\begin{center}
\includegraphics[width=0.8\textwidth]{out/diagrams/architecture/architecture_timelapse.png}
\end{center}
\vspace{0.3em}
\begin{itemize}
\item Architecture modulaire avec interfaces standardisées
\item Communication via API REST sécurisée
\item Séparation claire des responsabilités
\item Intégration continue et déploiement automatisé
\end{itemize}
\end{frame}
\begin{frame}{Infrastructure et déploiement}
\begin{center}
\includegraphics[width=0.8\textwidth]{out/diagrams/backend/backend5/Déploiement.png}
\end{center}
\vspace{0.3em}
\begin{itemize}
\item Applications hébergées dans des conteneurs Docker
\item Machine virtuelle Ubuntu Server sur hyperviseur Proxmox
\item Trois niveaux d'abstraction facilitant maintenance et sauvegarde
\item Déploiement et mise à jour automatisés via CI/CD
\end{itemize}
\end{frame}
\begin{frame}{Structure des classes et composants}
\begin{center}
\includegraphics[width=0.8\textwidth]{out/diagrams/raspi/03_structure_classes/Structure des Classes et Composants.png}
\end{center}
\vspace{0.3em}
\begin{itemize}
\item Organisation objet orientée domaines
\item Séparation des responsabilités
\item Interfaces clairement définies entre composants
\end{itemize}
\end{frame}
\begin{frame}{Synchronisation des données}
\begin{center}
\includegraphics[width=0.75\textwidth]{out/diagrams/raspi/04_sequence_synchronisation/Séquence de Synchronisation des Données.png}
\end{center}
\vspace{0.3em}
\begin{itemize}
\item Processus robuste de transfert des images
\item Gestion des échecs de connexion
\item Reprise de transfert automatique
\end{itemize}
\end{frame}
\begin{frame}{Backend - Technologies et architecture}
\begin{columns}
\begin{column}{0.5\textwidth}
\textbf{Technologies utilisées :}
\begin{itemize}
\item Node.js + Express
\item FFMPEG pour traitement vidéo
\item NPM pour la gestion des dépendances
\item Docker pour la conteneurisation
\end{itemize}
\end{column}
\begin{column}{0.5\textwidth}
\textbf{Architecture :}
\begin{itemize}
\item Architecture MVC
\item API RESTful
\item Traitement asynchrone
\item Gestion des erreurs robuste
\end{itemize}
\end{column}
\end{columns}
\begin{center}
\includegraphics[width=0.5\textwidth]{out/diagrams/backend/backend2/Architecture MVC.png}
\end{center}
\end{frame}
\begin{frame}{Backend - Modèles de données et traitement}
\begin{columns}
\begin{column}{0.5\textwidth}
\begin{center}
\includegraphics[width=\textwidth]{out/diagrams/backend/backend1/Modèles de données.png}
\end{center}
\end{column}
\begin{column}{0.5\textwidth}
\begin{center}
\includegraphics[width=\textwidth]{out/diagrams/backend/backend3/Création de vidéo.png}
\end{center}
\end{column}
\end{columns}
\vspace{0.3em}
\begin{itemize}
\item Modèles structurés pour stockage et traitement efficaces
\item Algorithme optimisé pour la création de vidéos timelapse
\end{itemize}
\end{frame}
\begin{frame}{Frontend Web}
\begin{columns}
\begin{column}{0.6\textwidth}
\textbf{Technologies et organisation :}
\begin{itemize}
\item Javascript (jQuery) + HTML + CSS
\item Organisation modulaire du code
\item Style universel pour confort utilisateur
\item Interface responsive et intuitive
\end{itemize}
\vspace{0.5em}
\textbf{Fonctionnalités principales :}
\begin{itemize}
\item Gestion des projets timelapse
\item Visualisation des images et vidéos
\item Configuration des paramètres
\item Carousel 3D animé et modulable
\end{itemize}
\end{column}
\begin{column}{0.4\textwidth}
\begin{center}
\includegraphics[width=\textwidth]{out/diagrams/frontend/frontend3/frontend3.png}
\end{center}
\end{column}
\end{columns}
\end{frame}
\begin{frame}{Application Mobile Android}
\begin{columns}
\begin{column}{0.6\textwidth}
\textbf{Technologies :}
\begin{itemize}
\item Kotlin avec Retrofit et Glide
\item XML pour layouts
\item Android API native
\end{itemize}
\vspace{0.5em}
\textbf{Fonctionnalités :}
\begin{itemize}
\item Visualisation des projets et timelapses
\item Configuration à distance des caméras
\item Mode hors-ligne avec synchronisation
\item Notifications en temps réel
\end{itemize}
\end{column}
\begin{column}{0.4\textwidth}
\begin{center}
\includegraphics[width=\textwidth]{UML Schematique android.png}
\end{center}
\end{column}
\end{columns}
\end{frame}
\begin{frame}{Intégration et flux de données}
\begin{center}
\includegraphics[width=0.8\textwidth]{out/diagrams/global_interspec_lite/global_interspec_lite.png}
\end{center}
\vspace{0.3em}
\begin{itemize}
\item Communication fluide entre tous les composants
\item Interfaces standardisées pour l'échange de données
\item Gestion des erreurs et reprise sur incident
\end{itemize}
\end{frame}
\begin{frame}{Sécurité et optimisation}
\begin{itemize}
\item \textbf{Sécurité :}
\begin{itemize}
\item Authentification sécurisée
\item Exposition sécurisée via reverse proxy
\item Chiffrement des communications
\item VPN et re-routage d'adresses IP
\end{itemize}
\item \textbf{Optimisation :}
\begin{itemize}
\item Adaptation de la qualité selon la connexion
\item Mise en cache des données pour fonctionnement hors-ligne
\item Traitement asynchrone des tâches lourdes
\item Compression adaptative des images et vidéos
\end{itemize}
\end{itemize}
\end{frame}