\section{Introducción}

\begin{frame}
\frametitle{\textbf{Somos esta gente}}
{\small O sea, no somos todos esos de la foto. Somos los frikis del fondo.}
\vspace{0.3cm}

\centering
\includegraphics[width=1.1\linewidth]{images/pointat.png}
\end{frame}


\begin{frame}
\frametitle{\textbf{Open Bokeron}}
\begin{itemize}
    \item Asociaci\'on de software libre de la ETSII (UMA).
    \item Hacemos cosas \#HazCosas
    \item Web: \bluehref{https://openbokeron.uma.es}{openbokeron.uma.es}
\end{itemize}

\vspace{0.2in}
\begin{mybox}
\begin{itemize}
    \item[\ding{229}] Objetivo del taller: entender un correcto flujo de desarrollo, CI/CD y perderle miedo a Jenkins de forma pr\'actica usando un proyecto base (FastAPI + Svelte).
\end{itemize}
\end{mybox}
\end{frame}

\begin{frame}
\frametitle{\textbf{Y yo soy este}}
\begin{columns}[T]
    \begin{column}{0.60\linewidth}
        \begin{itemize}
            \item Amin hazme el favor y pon cosas sobre ti
            \item Toma Marcos, tanto que decías que no te gustaba esta foto
            \item No sé qué más poner, así que: ¿Cómo hacer una buena bechamel? Las proporciones correctas
            para obtener una bechamel perfecta, son las siguientes: utiliza el mismo peso de harina que de grasa y
            la proporción de ingredientes líquidos con ingredientes secos es de 9<:1.
        \end{itemize}
    \end{column}
    \begin{column}{0.3\linewidth}
        \includegraphics[width=1\linewidth]{images/amin.jpg}
    \end{column}
\end{columns}
\end{frame}

\begin{frame}
\frametitle{\textbf{\'Que es CI/CD?}}
\begin{itemize}
    \item \textbf{CI (Integraci\'on Continua)}: integrar cambios peque\~nos frecuentemente y validarlos autom\'aticamente.
    \item \textbf{CD (Entrega/Despliegue Continuo)}: llevar el cambio a un entorno desplegable con un proceso reproducible.
    \item Se apoya en automatizaci\'on: pipeline + artefactos versionados + entornos.
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{\textbf{Ejecuci\'on del taller y consideraciones}}
\begin{itemize}
    \item Se os da una \textbf{VM Ubuntu} con el repo clonado en local.
    \item Trabajaremos con:\\
    \hspace{0.25em}-- \texttt{backend/} (FastAPI + pytest + ruff)\\
    \hspace{0.25em}-- \texttt{frontend/} (Svelte/Vite + svelte-check)\\
    \hspace{0.25em}-- pipelines: \texttt{Jenkinsfile.ci} y \texttt{Jenkinsfile.cd}
\end{itemize}
\end{frame}

\begin{frame}
\frametitle{\textbf{Jenkins vs GitHub Actions}}
\begin{columns}[T]
    \begin{column}{0.48\linewidth}
        \textbf{Jenkins}
        \begin{itemize}
            \item Muy flexible; se integra con casi cualquier cosa.
            \item Control total: agentes, credenciales, redes, storage.
            \item Contras: mantenimiento, plugins, upgrades y seguridad.
        \end{itemize}

        \vspace{0.4em}
        \centering
        \includegraphics[width=1.2\linewidth]{images/jenkins_smile.jpg}
    \end{column}
    \begin{column}{0.48\linewidth}
        \textbf{GitHub Actions}
        \begin{itemize}
            \item Experiencia integrada con GitHub (PRs, checks, permisos).
            \item Menos ops; runners gestionados (o self-hosted pagando).
            \item Contras: lock-in, l\'imites de ejecuci\'on, dependes de un externo, starvation.
        \end{itemize}

        \vspace{0.4em}
        \centering
        \includegraphics[width=0.75\linewidth]{images/tenna_spray_github.jpg}
    \end{column}
\end{columns}
\end{frame}

\begin{frame}
\frametitle{\textbf{Conceptos de Jenkins}}
\small
\begin{columns}[T]
    \begin{column}{0.49\linewidth}
        \begin{block}{Piezas}
        \begin{itemize}
            \item \textbf{Controller}: coordina jobs, UI, credenciales y cola.
            \item \textbf{Nodo/Agente}: m\'aquina (VM, contenedor, bare metal) donde \emph{se ejecuta} el trabajo.
            \item \textbf{Executor}: \# de trabajos simult\'aneos que un agente puede correr.
            \item \textbf{Workspace}: carpeta donde Jenkins hace el checkout y trabaja.
        \end{itemize}
        \end{block}
    \end{column}
    \begin{column}{0.49\linewidth}
        \begin{block}{Pipeline}
        \begin{itemize}
            \item \textbf{Job/Pipeline}: definici\'on del flujo (en este taller: \texttt{Jenkinsfile.*}).
            \item \textbf{Stage}: fase visible (lint, test, build, deploy...).
            \item \textbf{Step}: acci\'on concreta dentro de un stage.
            \item \textbf{Artefactos}: salidas versionadas (builds, reports) que Jenkins guarda/publica.
        \end{itemize}
        \end{block}
    \end{column}
\end{columns}

\vspace{0.3em}
\begin{mybox}
\begin{itemize}
    \item[\ding{229}] En \textbf{nuestro caso}: Jenkins corre en \textbf{bare metal} y el \textbf{controller} y el \textbf{agente} son la \textbf{misma m\'aquina}; los pipelines ejecutan comandos lanzando \textbf{contenedores Docker}.
\end{itemize}
\end{mybox}
\end{frame}

\begin{frame}
\frametitle{\textbf{Arquitectura del repo}}
\begin{itemize}
    \item API: \texttt{backend/} (FastAPI)
    \item Front: \texttt{frontend/} (Svelte + Vite, base path \texttt{/taller/})
    \item Orquestaci\'on: \texttt{docker-compose.yml} (frontend + backend)
    \item Jenkins:
    \begin{itemize}
        \item Pipelines: \texttt{Jenkinsfile.ci} y \texttt{Jenkinsfile.cd}
    \end{itemize}
\end{itemize}

\vspace{0.15in}
\begin{mybox}
\begin{itemize}
    \item[\ding{229}] Importante: el frontend usa un \textbf{base path} \texttt{/taller/}.
\end{itemize}
\end{mybox}
\end{frame}


