timelapse-diapo/diapo_master.tex

\documentclass[aspectratio=169]{beamer}

% Theme and color setup
\usetheme{Frankfurt}
%\useoutertheme{infolines}
\usecolortheme{default}
\setbeamertemplate{navigation symbols}{}
\setbeamertemplate{footline}[frame number]

% Packages
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{graphicx}
\usepackage{booktabs}
\usepackage{amsmath, amssymb, amsfonts}
\usepackage{pgf,tikz}
\usepackage{xcolor}
\usepackage{listings}
\usepackage{fancyvrb}

% Define the dot-based progress bar
\usepackage{tikz}

% Title information
\title{Caméra Timelapse}
\subtitle{Présentation technique du projet}
\author{THIEFFRY Raphaël, HUA Olivier, RIBETTE Baptiste, PUYAUBREAU Ethan et RUSSAC Antonin} 
\institute{Polytech Paris-Saclay \\ Université Paris-Saclay}
\titlegraphic{\includegraphics[width=0.2\textwidth]{image.png}}
\date{\today}

\begin{document}

% Title frame
\begin{frame}
   \titlepage
\end{frame}

% Table of contents
\begin{frame}{Plan}
   \tableofcontents
\end{frame}

% Introduction
\section{Introduction}
\begin{frame}{Contexte et Objectifs}
   \begin{itemize}
      \item Présentation du projet : Caméra Timelapse
      \item Contexte d'utilisation et motivation
      \item Objectifs principaux du projet
   \end{itemize}
\end{frame}

\section{Exemple UML}
\begin{frame}{Exemple UML}
   \begin{center}
      \includegraphics[width=0.9\textwidth]{diagrams/global.png}
   \end{center}
\end{frame}

% Cahier des charges
\section{Cahier des charges}
\begin{frame}{Spécifications et Contraintes}
   \begin{itemize}
      \item Fonctionnalités attendues
      \item Contraintes techniques (matériel, logiciel)
      \item Livrables
   \end{itemize}
\end{frame}

% Partie mécanique
\section{Partie mécanique}
\begin{frame}{Partie mécanique}
   \begin{itemize}
      \item Présentation de la structure mécanique
      \item Choix des matériaux et conception
      \item Schémas ou photos du montage
   \end{itemize}
\end{frame}

% Partie électronique
\section{Partie électronique}
\begin{frame}{Partie électronique}
   \begin{itemize}
      \item Architecture électronique
      \item Composants utilisés (capteurs, microcontrôleurs, etc.)
      \item Schémas électroniques
   \end{itemize}
\end{frame}

% Partie serveur, front et application mobile
\section{Serveur, Front et Application mobile}
\begin{frame}{Serveur, Front et Application mobile}
   \begin{itemize}
      \item Présentation de l'architecture logicielle
      \item Fonctionnalités principales du serveur
      \item Aperçu du front web et de l'application mobile
      \item Technologies utilisées
   \end{itemize}
\end{frame}

% Partie front end
\subsection{Front end}
\begin{frame}{Front end}
   \textbf{Choix des technologies :}
   \begin{itemize}
      \item HTML, CSS, Javascript
      \item ChartJS pour la visualisation de données
      \item Ajax pour la communication asynchrone
   \end{itemize}
   \vspace{0.5em}
   \textbf{Efforts notables :}
   \begin{itemize}
      \item Carousel 3D animé, modulable selon le nombre de projets
      \item Responsive : adaptation à la taille de la fenêtre
      \item Menu déroulant pour cacher les images en excès
      \item Affichage d'images compressées pour optimiser la génération
      \item Style universel pour le confort utilisateur
   \end{itemize}
\end{frame}

\begin{frame}{Front end : Architecture}
   \textbf{Organisation du code~:}
   \begin{itemize}
      \item \textbf{HTML}~: \texttt{index.html}, \texttt{pages/projet\_detail.html}
      \item \textbf{CSS}~: \texttt{css/base/style.css}, \texttt{css/components/style\_menu.css}, \texttt{css/pages/style\_projet.css}, images dans \texttt{css/image/}
      \item \textbf{JS}~: \texttt{js/core/} (logique principale), \texttt{js/libs/} (librairies tierces), \texttt{js/pages/} (scripts spécifiques aux pages)
   \end{itemize}
   \vspace{0.5em}
   \textbf{Outils et automatisation~:}
   \begin{itemize}
      \item Déploiement automatisé avec \texttt{.gitea/workflows/deploy.yml}
      \item Conteneurisation possible via \texttt{docker-compose.yml}
      \item Fichier \texttt{deploy.sh} pour le déploiement manuel
   \end{itemize}
\end{frame}

\begin{frame}{Automatisation du déploiement : deploy.sh}
   \textbf{Script de déploiement automatique~:}
   \begin{itemize}
      \item Un script bash (\texttt{deploy.sh}) a été développé par Ethan pour automatiser le déploiement du front-end.
      \item Il permet de mettre à jour rapidement la version en ligne lors du développement continu.
      \item Ce script facilite l'intégration des modifications et réduit les risques d'erreur humaine lors des mises à jour.
      \item Il s'intègre dans la chaîne de développement pour accélérer les cycles de test et de validation.
   \end{itemize}
\end{frame}

\begin{frame}{Front end (suite)}
   \textbf{Difficultés rencontrées :}
   \begin{itemize}
      \item Interface optimale entre le front end, le serveur et l'application mobile
      \item Évolution constante des routes et de la logique serveur
      \item Adaptation aux changements du modèle de données
   \end{itemize}
   \vspace{0.5em}
   \textbf{Apprentissages :}
   \begin{itemize}
      \item Génération de 3D en HTML et CSS
      \item Manipulation d'images et de vidéos
   \end{itemize}
\end{frame}

% Démonstration
\section{Démonstration}
\begin{frame}{Démonstration}
   \begin{itemize}
      \item Vidéo ou démonstration en direct du projet
      \item Points forts à montrer
   \end{itemize}
\end{frame}

% Conclusion
\section{Conclusion}
\begin{frame}{Bilan et perspectives}
   \begin{block}{Résumé}
      \begin{itemize}
         \item Synthèse des apports du projet
         \item Retour d'expérience
      \end{itemize}
   \end{block}
   \begin{alertblock}{Perspectives}
      \begin{itemize}
         \item Améliorations possibles
         \item Suites envisagées
      \end{itemize}
   \end{alertblock}
\end{frame}

% Remerciements
\begin{frame}{Remerciements}
   Merci pour votre attention !
\end{frame}

\end{document}