# Desarrollar con contenedores





## Explicación

Ahora que tienes instalado Docker Desktop, estás listo para desarrollar aplicaciones. Específicamente, harás lo siguiente:

1. Clonar e iniciar un proyecto de desarrollo
2. Realizar cambios en el backend y en el frontend
3. Ver los cambios de inmediato

## Pruébalo

En esta guía práctica, aprenderás a desarrollar con contenedores.

## Iniciar el proyecto

1. Para comenzar, clona o [descarga el proyecto como un archivo ZIP](https://github.com/docker/getting-started-todo-app/archive/refs/heads/main.zip) en tu máquina local.

   ```console
   $ git clone https://github.com/docker/getting-started-todo-app
   ```

   Y una vez que el proyecto esté clonado, navega al nuevo directorio creado por la clonación:

   ```console
   $ cd getting-started-todo-app
   ```

2. Una vez que tengas el proyecto, inicia el entorno de desarrollo utilizando Docker Compose.

   Para iniciar el proyecto utilizando la CLI, ejecuta el siguiente comando:

   ```console
   $ docker compose watch
   ```

   Verás una salida que muestra la descarga de imágenes de contenedor, el inicio de los contenedores y más. No te preocupes si no lo entiendes todo en este momento. Sin embargo, en uno o dos minutos, las cosas deberían estabilizarse y finalizar.

3. Abre tu navegador en [http://localhost](http://localhost) para ver la aplicación en funcionamiento. Puede tardar unos minutos en ejecutarse. La aplicación es una lista de tareas sencilla, así que siéntete libre de añadir uno o dos elementos, marcar algunos como hechos o incluso eliminar un elemento.

   ![Screenshot of the getting started to-do app after its first launch](/get-started/introduction/develop-with-containers/images/develop-getting-started-app-first-launch.webp)

### ¿Qué hay en el entorno?

Ahora que el entorno está en funcionamiento, ¿qué contiene exactamente? A grandes rasgos, hay varios contenedores (o procesos) y cada uno de ellos atiende una necesidad específica de la aplicación:

- Frontend de React: un contenedor Node que ejecuta el servidor de desarrollo de React, utilizando [Vite](https://vitejs.dev/).
- Backend de Node: el backend proporciona una API que ofrece la capacidad de recuperar, crear y eliminar elementos de la lista de tareas.
- Base de datos MySQL: una base de datos para almacenar la lista de elementos.
- phpMyAdmin: una interfaz basada en web para interactuar con la base de datos que está accesible en [http://db.localhost](http://db.localhost).
- Proxy Traefik: [Traefik](https://traefik.io/traefik/) es un proxy de aplicaciones que enruta las solicitudes al servicio correcto. Envía todas las solicitudes de `localhost/api/*` al backend, las solicitudes de `localhost/*` al frontend y las solicitudes de `db.localhost` a phpMyAdmin. Esto ofrece la posibilidad de acceder a todas las aplicaciones utilizando el puerto 80 (en lugar de puertos diferentes para cada servicio).

Con este entorno, tú como desarrollador no necesitas instalar ni configurar ningún servicio, crear un esquema de base de datos, configurar credenciales de base de datos ni nada por el estilo. Solo necesitas Docker Desktop. El resto funciona de forma automática.

## Realizar cambios en la aplicación

Con este entorno en funcionamiento, estás listo para realizar algunos cambios en la aplicación y ver cómo Docker ayuda a proporcionar un ciclo de retroalimentación rápido.

### Cambiar el saludo

El saludo en la parte superior de la página se completa mediante una llamada a la API en `/api/greeting`. Actualmente, siempre devuelve "Hello world!". Ahora lo modificarás para que devuelva uno de tres mensajes aleatorios (que podrás elegir).

1. Abre el archivo `backend/src/routes/getGreeting.js` en un editor de texto en tu máquina local (en el directorio del proyecto clonado). Este archivo proporciona el controlador para el endpoint de la API. Tus cambios se sincronizarán automáticamente con el contenedor en ejecución.

2. Modifica la variable de la parte superior para que sea un array de saludos. Siéntete libre de usar las siguientes modificaciones o personalizarlo a tu gusto. Además, actualiza el endpoint para enviar un saludo aleatorio de esta lista.

   ```js {linenos=table,hl_lines=["1-5",9],linenostart=1}
   const GREETINGS = [
     "¡Ballenvenido!",
     "¡Todos a cubierta!",
     "¡Trazando el rumbo!",
   ];

   module.exports = async (req, res) => {
     res.send({
       greeting: GREETINGS[Math.floor(Math.random() * GREETINGS.length)],
     });
   };
   ```

3. Si aún no lo has hecho, guarda el archivo. Si actualizas tu navegador, deberías ver un nuevo saludo. Si continúas actualizando, deberías ver aparecer todos los mensajes.

   ![Screenshot of the to-do app with a new greeting](/get-started/introduction/develop-with-containers/images/develop-app-with-greetings.webp)

### Cambiar el texto de marcador de posición

Cuando mires la aplicación, verás que el texto de marcador de posición es simplemente "New Item". Ahora lo harás un poco más descriptivo y divertido. También realizarás algunos cambios en el estilo de la aplicación.

1. Abre el archivo `client/src/components/AddNewItemForm.jsx` en el directorio de tu proyecto local. Este proporciona el componente para agregar un nuevo elemento a la lista de tareas.

2. Modifica el atributo `placeholder` del elemento `Form.Control` por lo que quieras mostrar.

   ```js {linenos=table,hl_lines=[5],linenostart=33}
   <Form.Control
     value={newItem}
     onChange={(e) => setNewItem(e.target.value)}
     type="text"
     placeholder="¿Qué necesitas hacer?"
     aria-label="Nuevo elemento"
   />
   ```

3. Guarda el archivo y regresa a tu navegador. Deberías ver el cambio ya recargado en caliente (hot-reloaded) en tu navegador. Si no te gusta, siéntete libre de modificarlo hasta que quede perfecto.

![Screenshot of the to-do app with an updated placeholder in the add item text field"](/get-started/introduction/develop-with-containers/images/develop-app-with-updated-placeholder.webp)

### Cambiar el color de fondo

Antes de considerar finalizada la aplicación, debes mejorar los colores.

1. Abre el archivo `client/src/index.scss` en el directorio de tu proyecto local.

2. Ajusta el atributo `background-color` a cualquier color que desees. El fragmento provisto es un azul suave para ir a tono con la temática náutica de Docker.

   Si estás utilizando un IDE, puedes elegir un color usando los selectores de color integrados. De lo contrario, siéntete libre de usar un [Selector de color](https://www.w3schools.com/colors/colors_picker.asp) en línea.

   ```css {linenos=table,hl_lines=2,linenostart=3}
   body {
     background-color: #99bbff;
     margin-top: 50px;
     font-family: "Lato";
   }
   ```

   Cada guardado debería permitirte ver el cambio de inmediato en el navegador. Sigue ajustándolo hasta que sea la configuración perfecta para ti.

   ![Screenshot of the to-do app with a new placeholder and background color"](/get-started/introduction/develop-with-containers/images/develop-app-with-updated-client.webp)

Y con eso, has terminado. Felicitaciones por actualizar tu sitio web.

## Resumen

Antes de continuar, tómate un momento y reflexiona sobre lo que ha sucedido aquí. En pocos instantes, has podido:

- Iniciar un proyecto de desarrollo completo con cero esfuerzo de instalación. El entorno contenerizado proporcionó el entorno de desarrollo, asegurando que tengas todo lo necesario. No tuviste que instalar Node, MySQL ni ninguna de las otras dependencias directamente en tu máquina. Todo lo que necesitabas era Docker Desktop y un editor de código.

- Realizar cambios y verlos de inmediato. Esto fue posible porque 1) los procesos que se ejecutan en cada contenedor están observando y respondiendo a los cambios de archivos y 2) los archivos en el directorio de tu proyecto local se comparten con el entorno contenerizado, por lo que las ediciones que realizas localmente se sincronizan automáticamente con los contenedores.

Docker Desktop permite todo esto y mucho más. Una vez que comiences a pensar con contenedores, puedes crear casi cualquier entorno y compartirlo fácilmente con tu equipo.

## Siguientes pasos

Ahora que la aplicación se ha actualizado, estás listo para aprender cómo empaquetarla como una imagen de contenedor y publicarla en un registro, específicamente Docker Hub.

[Compilar y publicar tu primera imagen](/get-started/introduction/develop-with-containers/build-and-push-first-image)