added pwa

Author: clsource

docs/abstract.html

@@ -196,6 +196,9 @@ <h3 class="title"><a href="index.html">Elixir Full-Stack</a></h3>
   <li class="nav-item" data-depth="1">
     <a class="nav-link" href="mobile/chapter.html">Aplicaciones Móviles</a>
   </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="mobile/pwa.html">Progresive Web Apps</a>
+  </li>
 </ul>
   </li>
   <li class="nav-item" data-depth="0">

docs/afterword.html

@@ -196,6 +196,9 @@ <h3 class="title"><a href="index.html">Elixir Full-Stack</a></h3>
   <li class="nav-item" data-depth="1">
     <a class="nav-link" href="mobile/chapter.html">Aplicaciones Móviles</a>
   </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="mobile/pwa.html">Progresive Web Apps</a>
+  </li>
 </ul>
   </li>
   <li class="nav-item" data-depth="0">

docs/authors.html

@@ -196,6 +196,9 @@ <h3 class="title"><a href="index.html">Elixir Full-Stack</a></h3>
   <li class="nav-item" data-depth="1">
     <a class="nav-link" href="mobile/chapter.html">Aplicaciones Móviles</a>
   </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="mobile/pwa.html">Progresive Web Apps</a>
+  </li>
 </ul>
   </li>
   <li class="nav-item" data-depth="0">

docs/bibliography.html

@@ -196,6 +196,9 @@ <h3 class="title"><a href="index.html">Elixir Full-Stack</a></h3>
   <li class="nav-item" data-depth="1">
     <a class="nav-link" href="mobile/chapter.html">Aplicaciones Móviles</a>
   </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="mobile/pwa.html">Progresive Web Apps</a>
+  </li>
 </ul>
   </li>
   <li class="nav-item" data-depth="0">

docs/book.html

@@ -196,6 +196,9 @@ <h3 class="title"><a href="index.html">Elixir Full-Stack</a></h3>
   <li class="nav-item" data-depth="1">
     <a class="nav-link" href="mobile/chapter.html">Aplicaciones Móviles</a>
   </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="mobile/pwa.html">Progresive Web Apps</a>
+  </li>
 </ul>
   </li>
   <li class="nav-item" data-depth="0">

docs/colophon.html

@@ -196,6 +196,9 @@ <h3 class="title"><a href="index.html">Elixir Full-Stack</a></h3>
   <li class="nav-item" data-depth="1">
     <a class="nav-link" href="mobile/chapter.html">Aplicaciones Móviles</a>
   </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="mobile/pwa.html">Progresive Web Apps</a>
+  </li>
 </ul>
   </li>
   <li class="nav-item" data-depth="0">

docs/dedication.html

@@ -196,6 +196,9 @@ <h3 class="title"><a href="index.html">Elixir Full-Stack</a></h3>
   <li class="nav-item" data-depth="1">
     <a class="nav-link" href="mobile/chapter.html">Aplicaciones Móviles</a>
   </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="mobile/pwa.html">Progresive Web Apps</a>
+  </li>
 </ul>
   </li>
   <li class="nav-item" data-depth="0">

docs/devops/devenvs.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Ambientes de Desarrollo :: Elixir Full-Stack</title>
     <link rel="canonical" href="https://elixircl.github.io/elixir-fullstack/devops/devenvs.html">
-    <link rel="prev" href="../mobile/chapter.html">
+    <link rel="prev" href="../mobile/pwa.html">
     <link rel="next" href="observability.html">
     <meta name="generator" content="Antora 3.1.12">
     <link rel="stylesheet" href="../_/css/site.css">
@@ -198,6 +198,9 @@ <h3 class="title"><a href="../index.html">Elixir Full-Stack</a></h3>
   <li class="nav-item" data-depth="1">
     <a class="nav-link" href="../mobile/chapter.html">Aplicaciones Móviles</a>
   </li>
+  <li class="nav-item" data-depth="1">
+    <a class="nav-link" href="../mobile/pwa.html">Progresive Web Apps</a>
+  </li>
 </ul>
   </li>
   <li class="nav-item" data-depth="0">
@@ -276,11 +279,35 @@ <h2 id="ambiente-local"><a class="anchor" href="#ambiente-local"></a>Ambiente Lo
 por uno o más archivos <strong>Dockerfile</strong> con los componentes como servidores y bases de datos
 similares a los usados en producción.</p>
 </div>
-<div class="imageblock kroki">
+<div class="listingblock kroki-error">
+<div class="title">Actividades en ambiente local</div>
 <div class="content">
-<img src="_images/diag-ea1c7c27bf34145f91f9e04227c599c6b09db91e.svg" alt="Actividades en ambiente local">
+<pre>@startuml
+
+skin rose
+
+title Ambiente Local
+
+start
+:Historia y definición de la tarea a realizar;
+
+:Clonar o actualizar desde el repositorio principal;
+:Crear y utilizar rama para los cambios;
+while (¿Pasan las pruebas en ambiente local?)  is (No)
+:Crear o refactorizar pruebas unitarias;
+:Crear o refactorizar pruebas funcionales/de contrato;
+:Crear o refactorizar pruebas de integración;
+:Crear o refactorizar el código de aplicación;
+:Evaluar y cambiar código con pruebas estáticas;
+:Almacenar cambios en repositorio local;
+endwhile (Sí)
+
+:Enviar cambios al repositorio principal en rama separada;
+
+stop
+
+@enduml</pre>
 </div>
-<div class="title">Figure 1. Actividades en ambiente local</div>
 </div>
 </div>
 </div>
@@ -294,11 +321,49 @@ <h2 id="ambiente-dev"><a class="anchor" href="#ambiente-dev"></a>Ambiente Dev</h
 <div class="paragraph">
 <p>Un servidor dev único es creado automáticamente en cada nuevo <em>PR</em> y tiene una duración máxima de 8 horas. Luego es eliminado automáticamente.</p>
 </div>
-<div class="imageblock kroki">
+<div class="listingblock kroki-error">
+<div class="title">Actividades en ambiente de desarrollo</div>
 <div class="content">
-<img src="_images/diag-54029d3ab172e3e7b974486a1bdb620318b08731.svg" alt="Actividades en ambiente de desarrollo">
+<pre>@startuml
+
+skin rose
+
+title Ambiente Desarrollo
+
+start
+
+:Crear Pull Request con los cambios hacia la rama principal;
+
+if (¿Pruebas estáticas exitosas?) then (Sí)
+
+  :Inicio de revisión de código (Code Review);
+
+  if (¿Revisión de código Exitoso?) then (Sí)
+    :Iniciar pruebas en servidor dev;
+    :Registrar metadatos y enviar notificaciones;
+    :Ejecutar pruebas unitarias, funcionales, integración;
+    :Ejecutar pruebas de aceptación;
+
+      if (¿Pruebas exitosas en servidor Dev?) then (Sí)
+        :Obtener última versión de main;
+        if(¿Hay conflictos de merge?) then (No)
+          :Aceptar PR;
+          :Realizar Squash Commits en rama main (usar conventional commits);
+          :Eliminar rama del PR;
+          :Iniciar pruebas en ambiente Staging;
+          stop
+      endif
+    endif
+
+  endif
+endif
+
+:Rechazar PR;
+:Volver al ambiente local;
+stop
+
+@enduml</pre>
 </div>
-<div class="title">Figure 2. Actividades en ambiente de desarrollo</div>
 </div>
 </div>
 </div>
@@ -309,11 +374,42 @@ <h2 id="ambiente-pruebas-staging"><a class="anchor" href="#ambiente-pruebas-stag
 <p>El ambiente staging es un ambiente para realizar pruebas por múltiples equipos. Es el que tiene más recursos que el ambiente dev, pero menos que producción. Tiene una réplica de los datos de producción periódicamente lo que permite realizar pruebas
 con datos lo más cercanos a producción. Se recomienda un periodo de función de 24/5. El despliegue es automático en cada commit en la rama <code>main</code> del repositorio principal del proyecto.</p>
 </div>
-<div class="imageblock kroki">
+<div class="listingblock kroki-error">
+<div class="title">Actividades en ambiente de pruebas</div>
 <div class="content">
-<img src="_images/diag-0cd9c47b98bcb7b263865989dcc11612b0c0bdd3.svg" alt="Actividades en ambiente de pruebas">
+<pre>@startuml
+
+skin rose
+
+title Ambiente Pruebas (Staging)
+
+start
+
+:Commit en la rama main;
+:Crear nueva versión aumentando número PATCH (tag);
+:Iniciar pruebas estáticas;
+:Ejecutar pruebas unitarias, funcionales, integración;
+
+if (¿Pruebas exitosas?) then (Sí)
+
+    :Iniciar proceso de despliegue a Staging;
+    :Registrar metadatos y enviar notificaciones;
+    :Iniciar pruebas en servidor staging;
+
+    :Ejecutar pruebas de aceptación;
+
+    if (¿Pruebas exitosas en servidor Staging?) then (Sí)
+      :Marcar versión como aprobada para Prod;
+      :Iniciar proceso de Despliegue a Prod;
+      stop
+    endif
+endif
+
+:Marcar versión como fallida;
+stop
+
+@enduml</pre>
 </div>
-<div class="title">Figure 3. Actividades en ambiente de pruebas</div>
 </div>
 </div>
 </div>
@@ -323,11 +419,52 @@ <h2 id="ambiente-producción"><a class="anchor" href="#ambiente-producción"></a
 <div class="paragraph">
 <p>Es el ambiente donde se ejecuta el sistema y el más critico. Todo cambio enviado debe ser aprobado y documentado por personas autorizadas y correctamente informado en los canales de comunicación oficiales. El despliegue es automatizado, pero debe ser autorizado de forma manual. Para el proceso productivo se recomienda utilizar <strong>Canary Deployments</strong>, sobre todo si son sistemas <strong>Tier 0</strong>.</p>
 </div>
-<div class="imageblock kroki">
+<div class="listingblock kroki-error">
+<div class="title">Actividades en ambiente de producción</div>
 <div class="content">
-<img src="_images/diag-a95518798f2ceffadc8a055bec12b25248908a85.svg" alt="Actividades en ambiente de producción">
+<pre>@startuml
+
+skin rose
+
+title Ambiente Producción
+
+start
+
+:Versión aprobada en Staging;
+:Iniciar pruebas estáticas;
+:Ejecutar pruebas unitarias, funcionales, integración;
+
+if (¿Pruebas exitosas?) then (Sí)
+
+  :Iniciar proceso de despliegue a Producción;
+
+  if (¿Proceso de Aprobación Manual Iniciado?)
+    :Iniciar pruebas en servidor producción;
+    :Registrar metadatos y enviar notificaciones;
+    :Ejecutar pruebas de humo;
+    :Ejecutar pruebas E2E;
+    :Ejecutar pruebas de aceptación;
+
+    if (¿Pruebas exitosas?) then (Sí)
+      :Despliegue a producción exitoso;
+      :Marcar versión como última disponible en producción;
+      :Ejecutar pruebas de desempeño (opcional, perfomance);
+      stop
+    else
+      :Marcar versión como fallida;
+      stop
+    endif
+  endif
+
+  :Esperar la aprobación manual;
+  stop
+endif
+
+:Marcar versión como fallida;
+stop
+
+@enduml</pre>
 </div>
-<div class="title">Figure 4. Actividades en ambiente de producción</div>
 </div>
 </div>
 </div>
@@ -341,7 +478,7 @@ <h2 id="mejores-prácticas"><a class="anchor" href="#mejores-prácticas"></a>Mej
 </div>
 </div>
 <nav class="pagination">
-  <span class="prev"><a href="../mobile/chapter.html">Aplicaciones Móviles</a></span>
+  <span class="prev"><a href="../mobile/pwa.html">Progresive Web Apps</a></span>
   <span class="next"><a href="observability.html">Observabilidad e Instrumentación</a></span>
 </nav>
 </article>