\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}