diff --git a/diagrams/global.puml b/diagrams/global.puml new file mode 100644 index 0000000..fa475c5 --- /dev/null +++ b/diagrams/global.puml @@ -0,0 +1,38 @@ +@startuml Architecture Globale + +' Définition des composants +node "Interfaces utilisateur" { + [Interface Web] as web + [Application Android] as android +} + +node "Backend" { + [Serveur API] as api + [Traitement d'images (ffmpeg)] as imgproc + database "Base de données (PostgreSQL)" as db +} + +node "Matériel" { + [Caméra] as camera +} + +' Définition des interactions +web --> api : Requêtes HTTP +android --> api : Requêtes HTTP + +api <--> db : Stocke/Récupère les données +api --> imgproc : Traite les timelapses +api <--> camera : Contrôle/Reçoit les images + +' Ajout de style +skinparam component { + BackgroundColor<> LightBlue + BorderColor<> DarkBlue +} + +skinparam node { + BackgroundColor LightGray + BorderColor Gray +} + +@enduml diff --git a/diapo_master.pdf b/diapo_master.pdf index c889b78..092b3e6 100644 Binary files a/diapo_master.pdf and b/diapo_master.pdf differ diff --git a/diapo_master.pytxcode b/diapo_master.pytxcode new file mode 100644 index 0000000..e69de29 diff --git a/diapo_master.tex b/diapo_master.tex index cada7b1..998d6ab 100644 --- a/diapo_master.tex +++ b/diapo_master.tex @@ -1,30 +1,25 @@ \documentclass[aspectratio=169]{beamer} % Theme and color setup -\usetheme{Madrid} +\usetheme{Frankfurt} +%\useoutertheme{infolines} \usecolortheme{default} \setbeamertemplate{navigation symbols}{} \setbeamertemplate{footline}[frame number] -% Show progress bar -\usepackage{etoolbox} -\makeatletter -\patchcmd{\beamer@sectionintoc}{\vskip1.5em}{\vskip0.5em}{}{} -\makeatother -\AtBeginSection[] -{ - \begin{frame} - \frametitle{Plan} - \tableofcontents[currentsection] - \end{frame} -} - % 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} @@ -56,6 +51,13 @@ \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} diff --git a/diapo_master0-plantuml.txt b/diapo_master0-plantuml.txt new file mode 100644 index 0000000..68354a4 --- /dev/null +++ b/diapo_master0-plantuml.txt @@ -0,0 +1,135 @@ + +% 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}