Mise à jour de la présentation technique : ajout de sections sur l'exemple UML, l'automatisation du déploiement et réorganisation du contenu.
This commit is contained in:
38
diagrams/global.puml
Normal file
38
diagrams/global.puml
Normal file
@@ -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<<Frontend>> LightBlue
|
||||
BorderColor<<Frontend>> DarkBlue
|
||||
}
|
||||
|
||||
skinparam node {
|
||||
BackgroundColor LightGray
|
||||
BorderColor Gray
|
||||
}
|
||||
|
||||
@enduml
|
||||
BIN
diapo_master.pdf
BIN
diapo_master.pdf
Binary file not shown.
0
diapo_master.pytxcode
Normal file
0
diapo_master.pytxcode
Normal file
@@ -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}
|
||||
|
||||
135
diapo_master0-plantuml.txt
Normal file
135
diapo_master0-plantuml.txt
Normal file
@@ -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}
|
||||
Reference in New Issue
Block a user