
Continuando con los posts relacionados con Docker (ya vimos como dockerizar una aplicación y como utilizar variables de entorno para mantener tus información segura), ahora quiero complementar con un mini tutorial de como desplegar tu aplicación para que pueda ser accedida y utilizada dese cualquier parte del mundo!.

Para lograr esto, utilizaremos el servicio de [Railway](https://railway.app/), el cual es una alternativa de las miles que existen hoy en día, pero la verdad es que a mi me gusta mucho, porque es muy fácil la forma de configurar y hacer despliegues de cualquier tipo de aplicación.

La única consideración que debemos tener es que al momento de crear tu cuenta (como en la mayoria de los servicios conocidos al día de hoy), te piden que introduzcas una tarjeta de crédito válida, pero si logras conseguirla y crear tu cuenta, te puedo comentar que no te van a cobrar por cada proyecto que subas, si no que, y parecido a muchos servicios, te cobran por uso (mientras mas tráfico de uso generes en tu aplicación, te van a ir cobrando un procentaje).

Pero de nueva cuenta, esto no es tan preocupante si tu plan es utilizarlo solo para desplegar proyectos de hobby como por ejemplo para mostrarlos en tu portfolio (asi lo utilizo yo), ya que, los primeros 5 dolares de uso en Railway te los regalan, es decir, si tus proyectos no generan mucho tráfico y son solo de demostración para tu portfolio, no te cobrarán nunca ni 1 dolar. Lo bueno es que Railway nos ofrece un dashboard muy sencillo en el cual podemos monitorear el uso de nuestros proyectos, fijar límites de gastos, dar de baja aplicaciones en caso de que esten generando costos, etc. Por esto y otras ventajas, es que prefiero Railway a muchos otros servicios.

Una vez entendido esto, y teniendo nuestra aplicación lista, veamos los pasos para poder hacer un despliegue en Railway:

## Paso 1: Crea el repositorio de tu imagen Docker en docker hub

Ya habia mencionado en uno de mis post anteriores, que docker hub es el sitio web donde los usuarios pueden publicar sus imagenes de docker para que otros usuarios puedan acceder a ellas (es como si fuera un github pero para imagenes docker). Este es el link para docker hub: <https://hub.docker.com/>

Si no tienes tu cuenta, debes crearla y una vez que hayas iniciado sesión, lo primero que tendremos que hacer es crear un repositorio en docker hub.
Para se esto, vamos al sitio web de docker hub y en la pantalla principal cuando inicias sesión, tendras la opción de crear un nuevo repositorio:

![create-repository](create-repository.png)

En la siguiente pantalla, llena los datos de tu repositorio (nombre y descripción) y da click en "Create":

![repository-info](repository-info.png)

Con esto se crea tu repositorio en docker hub y automáticamente te lleva al sitio web y vista principal de tu repositorio creado (es como el sitio web de tu proyecto en github):

![repository-page](repository-page.png)

## Paso 2: Crea tu imagen Docker con el mismo nombre del repositorio

Una vez que tenemos nuestro repositorio creado, procedemos a crear nuestra imagen con el mismo nombre que tiene nuestro repositorio, para asi ligarlos. Recuerda que tu proyecto, ya debe contar con su archivo Dockerfile para que puedas construir la imagen. En mi caso ya cuento con mi Dockerfile puedo construir mi imagen navegando al terminal que estemos usando y posicionandome en la carpeta raíz de nuestro proyecto (yo utilizo la terminal integrada en mi editor de codigo, en este caso PyCharm). Una vez estando ahí, ejecutamos el siguiente comando:

**docker build -t thegera4/ecommerce-fastapi .**

El cual simplemente es el comando para construir una imagen de docker y con la opción **-t** le asigno el mismo nombre que mi repositorio (thegera4/ecommerce-fastapi). Una vez, terminada la ejecución, podemos confirmar que nuestra imagen se creó correctamente con el comando **docker images** para mostrar el listado de imagenes disponibles o viendo directamente en docker desktop si ya aparece nuestra imagen disponible:

![image-created](image-created.png)

## Paso 3: Agrega tu imagen en el repositorio

Una vez que tenemos nuestro repositorio creado y nuestra imagen disponible con el mismo nombre, ahora podemos publicar/agregar ("pushear") nuestra imagen al repositorio. Esto lo hacemos con el comando:

**docker push thegera4/ecommerce-fastapi**

El cual es el comando utilizado para agregar nuestra imagen hacia el repositorio "thegera4/ecommerce-fastapi" ("thegera4" es mi nombre de usuario en docker hub, el cual se utiliza automáticamente como sufijo en docker hub y "ecommerce-fastapi" es el nombre que yo le puse a mi repositorio cuando lo cree en docker hub). Una vez ejecutado el comando, la terminal nos avisa que se hizo el proceso correctamente.

Otra alternativa es utilizar las opciones en docker desktop, navegando al menu "Images", dando click en el icono de la columna "Actions" de nuestra imagen y seleccionando la opción "Push to Hub". Solo asegurate de haber iniciado sesión de tu cuenta de docker en docker desktop (esto lo puedes revisar en la parte superior derecha)

![docker-desktop-push-to-hub](docker-desktop-push-to-hub.png)

Sin importar la opción que seleccionemos para publicar nuestra imagen en el repositorio, una vez habiendo completado este proceso, podemos ir al sitio web de nuestro repositorio en docker hub y confirmar que ahora ya cuenta con una imagen publicada y disponible para ser usada:

![published-image](published-image.png)


## Paso 4: Crea el proyecto en Railway

Nos dirigimos a la web de railway, y ya habiendo iniciado sesión, en el dashboard principal damos click en crear nuevo proyecto:

![create-project-railway](create-project-railway.png)

En la siguiente pantalla, seleccionamos la opción "Empty Project":

![empty-project](empty-project.png)

Y con eso se crea nuestro proyecto en Railway.

## Paso 5: Agrega la imagen de Docker al proyecto de Railway

Una vez en el área de trabajo del proyecto, damos click en la opción de "Add service" que nos aparece en el centro del dashboard:

![add-service](add-service.png)

Seleccionamos la opción "Docker Image":

![select-image](select-image.png)

Escribimos el nombre de nuestra imagen (en mi caso "thegera4/ecommerce-fastapi") y railway automáticamente detecta la página web donde esta almacenada, incluso si das click en la url que se muestra, puedes navegar a la pagina web de tu repositorio en docker hub para confirmar que sea visible y accesible:

![image](image.png)

Con esto solo nos queda esperar a que railway termine de realizar el despliegue y empezar a usar nuestra aplicación. Solo recuerda que si estas utilizando variables de entorno o alguna otra configuración en tiempo de ejecución para tu proyecto, debes indicarselo a Railway a través del dashboard del proyecto. La verdad es que esto es muy sencillo y por estas razones no lo incluyo en este post, pero si te interesa que haga un post sobre como configurar por ejemplo las variables de entorno en Railway para tu proyecto, me lo puedes hacer saber enviandome un comentario en la sección de contacto :). Espero te haya servido, hasta la próxima!


Despliega tu aplicación Dockerizada en Railway


Continuando con los posts relacionados con Docker, quiero compartirles en esta ocasión, una forma sencilla de utilizar variables de entorno en tu aplicación Dockerizada (si no sabes como Dockerizar tu aplicación, checa mi post anterior donde te explico como Dockerizar una aplicación hecha con FastAPI).

Importante! Este NO es un curso de Docker completo, simplemente son los primeros pasos o repaso de los pasos básicos. Recuerda que para que puedas utilizar Docker y sus comandos en tu computadora, tienes que instalarlo desde su web oficial: [Instalar Docker](https://docs.docker.com/get-docker/).

Para este ejemplo, voy a utilizar una aplicación hecha con fast api, la cual es básicamente un api de ejemplo para un e-commerce (web de comercio electrónico), en la cual tenemos varios endpoints CRUD para usuarios y productos. Si te interesa descargarla para revisarla, te dejo el link a mi repo de github (Se agradecen las estrellas): <https://www.github.com/thegera4/ecommerce-api.git>.

Una vez que ya tengamos nuestra aplicación Dockerizada podemos empezar con nuestra estrategia para utilizar variables de entorno, pero antes aqui te dejo una vista al Dockerfile de la aplicación que voy a utilizar en este ejemplo a manera de repaso del Dockerfile:

```js
//Dockerfile

//Con esta primera instruccion se indica la imagen base que se va a utilizar
//o sobre la cual se va a basar nuestro proyecto, en este caso se utiliza la
//imagen de python 3.11 version slim. Esta imagen tiene que esta almacenada en
//docker hub, que es el sitio web donde se almacenan las imagenes de docker.
FROM tiangolo/uvicorn-gunicorn-fastapi:python3.11-slim

//Con esta segunda instruccion se indica que queremos copiar todo el contenido
//del directorio actual (.), osea nuestro directorio raiz, hacia el directorio
//(/app) que seria el nombre del directorio de la imagen de docker. En resumen,
//se copia todo el contenido de nuestro proyecto hacia la imagen de docker.
COPY . /app

//Con esta tercera instruccion se indica que debemos instalar todas las
//dependencias que se encuentran en el archivo requirements.txt, que es el
//archivo que contiene listadas las dependencias de nuestro proyecto, es decir
//las librerias que utilizamos en nuestro proyecto como fastapi,uvicorn,etc.
RUN pip install -r requirements.txt

//Con esta cuarta instruccion se indica el comando que utilizamos para arrancar
//nuestra aplicacion, en mi caso al ser una app de FastApi se utiliza el comando
//"uvicorn main:app" para arrancar el servidor. Si tu aplicacion es por ejemplo,
//una aplicacion de node.js, aqui tendrias que cambiarlo por CMD ["npm", "start"]
//o segun sea tu caso, esto lo encuentras en internet facilmente...
//En mi caso le agrego la opcion "--host" y "0.0.0.0", para no tener problemas
//de conexion de ningun tipo y hacer que el conteneor acepte peticiones desde
//cualquier cliente / aplicacion que quiera usar mi api.
CMD ["uvicorn", "main:app", "--host", "0.0.0.0"]
```

## Paso 1: Crea tu archivo .env

Define tus variables de entorno en tu archivo .env, el cual, para este ejemplo, tiene que esta a nivel raiz de tu aplicación. En el caso de mi API las variables de entorno que estoy utilizando son las siguientes :

```js
//.env
EMAIL="tuEmail@email.com"
PASSWORD="tuPassword"
SECRET="Cadena de caracteres hexadecimal 10 digitos"
SERVER_URL="http://localhost:8000"
```

## Paso 2: Crear archivo docker-compose.yaml

Si bien existen varias alternativas para el uso y manejo de variables de entorno, a mi en lo personal, me gusta manejarlo con docker-compose, el cual es una herramienta muy útil en docker para la "orquestación" de contenedores múltiples, es decir, el manejo de varias aplicaciones dockerizadas (corriendo en un contenedor docker) se vuelve muy simple con un simple comando :

**"docker-compose up"** para arrancar todos los contenedores de las aplicaciones definidas en tu archivo docker-compose.yaml (incluso si no tienes la imagen creada en tu equipo, este comando te la crea y lugo te arranca el contenedor!) y **"docker-compose down"** para terminar y eliminar los contenedores una vez que hayamos terminado de utilizar nuestra aplicación (las imagenes si se quedan almacenadas!).

Con este comando, te ahorras los famosos **"docker build + 1000 opciones configurables mas"** por cada imagen de cada aplicación que quieras crear y tambien **"docker run + 1000 opciones configurables mas"**. Es por eso que yo siempre prefiero utilizar docker-compose para ahorrarme escribir cientos o miles de palabras en la terminal por cada aplicacion dockerizada que quiero correr.

Entonces, mi archivo docker-compose.yaml, que tambien se enuentra a nivel raiz de mi aplicación, se ve asi:

```js
//docker-compose.yaml
version: '3'
services:
  ecommerce-fastapi:
    build: .
    env_file:
      - .env
    ports:
      - "8000:8000"
```

La explicación sencilla es: estoy utilizando la version 3 de docker-compose, el cual esta configurado con un solo servicio (aplicación/contenedor) en este caso "ecommerce-fastapi" (este nombre es a tu gusto, asi le llame yo para identificar que es mi aplicación hecha en fastapi para el ecommerce), el cual se crea ("build") a partir del Dockerfile que se encuentra en el directorio actual (en mi caso el Dockerfile tambien esta a nivel raíz, si en tu caso esta a otro nivel, aquí debes hacer la modificación de acuerdo a tu ruta), y este contenedor utiliza un archivo env ("env-file"), en este caso puede ser una lista de varios archivos pero yo solo tengo uno, por lo tanto lo agrego con el nombre del archivo correspondiente y finalmente mapeo ("ports") el puerto 8000 del host (mi pc) a el puerto 8000 del contenedor (mi aplicación escucha en el puerto 8000, por lo que si tu app escucha en otro puerto, debes modificar esta parte).

## Paso 3: Ejecutar comando "docker-compose up"

Una vez que ya tengamos nuestro archivo docker-compose.yaml creado, simplemente ejecutamos el comando **"docker-compose up -d"** (le agrego la opcion **-d** para que no me bloquee la misma terminal, ya que el proceso queda corriendo en nuestro equipo, pero no es obligatorio), y listo, en mi caso podemos ver que no me crea la imagen (porque ya la tenia creada, pero si me crea el contenedor y lo ejecuta automaticamente):

![docker-compose](docker-composeup.png)

![container-running](container-running.png)

Con estos sencillos pasos, ya tienes tu(s) contenedores corriendo y utilizando variables de entorno para que tu información este segura! (solo asegurate de no hacer commit de tus archivos .env a tus repositorios...). Espero te haya servido, hasta la próxima!


Variables de entorno (env) en Docker


Recientemente me encuentro practicando Python en conjunto con el framework FastAPI, del cual estoy fascinado por su simpleza y por su generación automática de documentación (solo te preocupas por escribir el código de tu aplicación y el framework te genera la documentación en Swagger!). Por otra parte tambien me encuentro practicando Docker por las grandes ventajas que representa hoy (correr aplicaciones sin tener que instalar nada en tus equipos, facilidades de despliegue en cualquier lugar, etc.).

Importante! Este NO es un curso de Docker completo, simplemente son los primeros pasos o repaso de los pasos básicos para Dockerizar tu aplicación fácil y rápido. Recuerda que para que puedas utilizar Docker y sus comandos en tu computadora, tienes que instalarlo desde su web oficial: [Instalar Docker](https://docs.docker.com/get-docker/).

Para este ejemplo, voy a utilizar una aplicación hecha durante el curso de backend con Python y FastAPI creado por uno de mis mayores influencias en programación: [Brais Moure](https://mouredev.com/). Si te interesa aprender a programar backend con Python, te recomiendo buscar su curso en youtube (aproximadamente de 8 horas, gratis), en el que vas a crear esta misma aplicación que voy a usar a continuación para Dockerizar.

## Paso 1: Crea el archivo Docker (Dockerfile)

Una vez que ya tengas tu aplicación finalizada y Docker instalado en tu computadora, se debe agregar el Dockerfile a nivel raíz de tu proyecto (recuerda que el archivo debe llamarse asi tal cual "Dockerfile"):

![Dockerfile](Dockerfile.png)

## Paso 2: Escribir comandos para Docker dentro del Dockerfile

Una vez que ya tengamos el archivo, procedemos a escribir las instrucciones para que Docker pueda crear la imagen (asi se llama lo que construimos con estos comandos del dockerfile):

```js
//Con esta primera instruccion se indica la imagen base que se va a utilizar
//o sobre la cual se va a basar nuestro proyecto, en este caso se utiliza la
//imagen de python 3.11 version slim. Esta imagen tiene que esta almacenada en
//docker hub, que es el sitio web donde se almacenan las imagenes de docker.
FROM tiangolo/uvicorn-gunicorn-fastapi:python3.11-slim

//Con esta segunda instruccion se indica que queremos copiar todo el contenido
//del directorio actual (.), osea nuestro directorio raiz, hacia el directorio
//(/app) que seria el nombre del directorio de la imagen de docker. En resumen,
//se copia todo el contenido de nuestro proyecto hacia la imagen de docker.
COPY . /app

//Con esta tercera instruccion se indica que debemos instalar todas las
//dependencias que se encuentran en el archivo requirements.txt, que es el
//archivo que contiene listadas las dependencias de nuestro proyecto, es decir
//las librerias que utilizamos en nuestro proyecto como fastapi,uvicorn,etc.
RUN pip install -r requirements.txt
```

En mi caso, el archivo requirements.txt de mi proyecto se ve asi:

```js
//requirements.txt
fastapi~=0.103.1
uvicorn
python-jose
pydantic~=2.4.1
pydantic_settings
passlib~=1.7.4
pymongo~=3.11.0
python-dotenv~=1.0.0
python-multipart
starlette~=0.27.0
```

## Paso 3: Crear la imagen de Docker

El siguiente paso es construir la imagen de docker. esto lo logramos abriendo la terminal y corriendo el siguiente comando (puede ser la terminal integrada en tu editor de codigo para que ya este posicionada al nivel raiz de tu proyecto):

**docker build -t fastapi-python .**

La explicación sencilla de este comando es: con la instrucción *docker build*, le decimos a nuestro sistema que vamos a crear una nueva imagen de docker, la bandera *-t* significa tag, lo cual es el etiqueta (como un nombre amigable) para identificar nuestra imagen fácilmente, en mi caso yo le llame *fastapi-python* y el punto al final especifica el "contexto de construcción". El contexto de construcción es el conjunto de archivos y directorios que Docker utilizará para construir la imagen. En este caso, el punto representa el directorio actual, lo que significa que Docker utilizará los archivos en el directorio actual como el contexto de construcción.

## Paso 4: Crear el contenedor para correr la app

Si todo sale bien con el comando anterior, se creará la imagen de docker y se almacenará en tu computadora (esta imagen tu la puedes compartir en docker hub para que todo el mundo pueda descargarla, asi como por ejemplo nosotros descargamos la imagen de python 3.11, alguien más la subió y creamos una nueva imagen con base en esa imagen!).

Ahora con base en esta imagen que acabmos de crear, tu puedes crear y correr los contenedores que quieras (bueno los que te permita los recursos de tu computadora). Esto lo haces con el siguiente comando:

**docker run -d --name fastapiexamplecontainer -p 80:80 fastapi-python**

La explicación sencilla de este comando es: con la instrucción *docker run*, le decimos al sistema que vamos a ejecutar un contenedor de docker, la bandera *-d* significa que vamos a correr en "detached mode", osea el contenedor se ejecuta en segundo plano y no bloquea la terminal para su uso, la bandera *--name* es para asignar el nombre al contenedor en mi caso "fastapiexamplecontainer", la bandera *-p* es para mapear los puertos del host y el contenedor, en mi caso el puerto 80 del host (osea mi computadora) se mapea al puerto 80 del contenedor que voy a crear, esto permite que las solicitudes al puerto 80 de mi computadora se dirijan al puerto 80 del contenedor (esto puede variar de acuerdo a los puertos que hayas definido en tu aplicacion, si es que escucha en algun puerto), y finalmente *fastapi-python* es el nombre de la imagen que utilizamos para ejecutar el contenedor.

Una vez que hayas ejecutado este comando, y en mi caso que uso Windows como sistema operativo, puedo revisar visualmente en la aplicación "Docker Desktop" si ya esta corriendo mi contenedor. Docker desktop se instala automáticamente cuando instalas docker en windows (para el caso de otros sistemas operativos a la fecha actual no cuentan con esta aplicación extra, esperemos a futuro si, pero si no, tu puedes correr otro comando para confirmar si el contenedor y la imagen ya existen y estan corriendo..).

![running-container](container-running.png)

En la imagen de arriba, podemos ver que mi contenedor fue creado y esta corriendo actualmente, lo que significa que puedo probar mi aplicación visitando localhost en mi computadora o el path definido en la aplicación, para este caso el localhost:8000 por lo que si en mi navegador me dirigo a esa dirección, puedo ver mi aplicacion corriendo correctamente:

![app-ok](app-ok.png)

Finalmente, en el caso de que no cuentes con Docker Desktop debido a tu sistema operativo, e incluso en windows puedes usar tu terminal y correr los siguientes comandos para revisar y confirmar que tu imagen y tu contenedor fueron creados correctamente:

Para revisar las imagenes creadas/existentes: **docker images**

Para revisar los contenedores creados y su estatus: **docker ps**

Espero que este tutorial te haya servido. Nos vemos en la próxima!


Dockeriza tu aplicación con FastAPI


En este post, quiero compartirles esta guía paso a paso, sobre como cambiar tu disco duro (HDD o SSD), sin perder tus datos ni sistema operativo ni nada, ya que en estos días estuve cambiando varios y aunque ya había hecho este proceso, se me olvidó como hacerlo :P y tuve que volver a investigar, por lo que decidí compartirlo aqui para recordarlo también a futuro.

Primero hablemos de las herramientas que necesitas para este proceso:

## Paso 1: Herramientas requeridas para realizar el proceso

*Disco nuevo* : Simplemente asegurate y confirma que tipo de disco acepta tu PC y compra el adecuado(no explicaré todos los tipos de discos ya que no es el obejtivo de esta guía.).

*Software de clonado de disco* : Existen muchas aplicaciones que nos van a ayudar con nuestro propósito, las cuales puedes encontrar en internet rápidamente, pero para esta guía (y en general) yo recomiendo el software llamado **Macrium Reflect** ya que es super fácil de usar. Lo puedes descargar de esta web: [Macrium](https://www.macrium.com/reflectfree)

![Web Macrium](web-macrium.png)

*Gabinete / carcasa / adaptador NVMe/M.2 a USB* : Si tu PC cuenta con más de 2 puertos para SSD, puedes omitir esta herramienta, pero si solo cuenta con 1, la necesitarás obligatoriamente para poder conectar los 2 discos al mismo tiempo al PC y que puedan leerse por el software de clonado. Estos adaptadores los encuentras en cualquier e-commerce donde vendan componentes de PC o electrónica, por ejemplo Amazon, eBay, MercadoLibre, etc. Dependiendo de la calidad de construcción y velocidades de transferancia, el precio puede variar, pero te recomiendo adquirir el más barato que encuentres ya que el precio ronda entre 10 a 15 USD.

![Adaptador NVMe / M.2 a USB](adaptador.jpg)

## Paso 2: Clonar disco

Una vez que tengamos las herramientas lista, colocamos el disco nuevo (receptor) en el adaptador SSD (o en el puerto libre de tu PC) y lo conectamos al PC.

![Disco nuevo](disco-nuevo.png)

En mi caso, el disco receptor es de 512 GB (el que voy a clonar es de 128 GB, ya le urgía cambiarlo por falta de espacio del almacenamiento :P). El disco receptor era parte de otra PC, por lo cual trae información tanto del sistema operativo como los archivos del usuario que usa el equipo. Con esto les quiero mostrar que el mismo software de clonado nos va a ayudar a no tener que pre-formatear o borrar nada del disco ya que el mismo software hará lo necesario para dejar listo el nuevo disco.

![Informacion en disco](ssd-nuevo-con-info.png)

A continuación, abrimos el software Macrium Reflect, ya instalado, y se nos presentará la siguiente pantalla, en donde podremos ver todos los discos conectados a nuestro equipo y detectados por el software:

![Discos detectados](discos-detectados.png)

Seleccionamos el disco que vamos a clonar, en mi caso el disco 2 y damos click en *'Clonar este disco...'* :

![Clonar disco](clonar-disco.png)

Se nos presenta otra pantalla donde seleccionamos la opción *'Seleccionar un disco receptor'* . Este es el disco hacia el cual pasaremos toda la info y reemplazará a nuestro disco viejo. En mi caso es el disco 3:

![Seleccion disco](seleccion-disco.png)

![Disco receptor](disco-receptor.png)

El software nos devuelve a la pantalla inicial, mostrandonos ya las selecciones que hicimos. El siguiente paso es **muy importante**. Debemos dar click en la opción *'Copiar particiones'* y después seleccionar la opción *'Comprimir o extender para llenar el disco receptor'*. Si por alguna razón, olvidas realizar esta selección y solo das click en siguiente, lo que va a pasar es que no se va a llenar el espacio de tu disco correctamente y vas a ver en windows como si tu disco duro no tuviera el espacio de almacenamiento correcto, si no menos. Este se puede solucionar despues con alguna aplicación que te pueda asignar espacio a particiones, pero para evitar mas pasos innecesarios, esta selección te permite rellenar todo el disco para que no haya problema:

![Extender disco](extender-para-llenar.png)

Una vez que hayamos seleccionado la opción anterior, damos click en siguiente y se nos presentarán varias pantallas: una nos pide si queremos programar la clonación para una fecha / hora futuros, damos click en siguiente, luego una pantalla con el resumen de lo que se va a realizar, damos click en siguiente, y luego una pantalla donde nos avisa que se va a guardar un backup, por si sucede algo en el proceso de clonación, se pueda retomar esta misma configuración y proceso, damos click en ok /siguiente /finish.

En mi caso se presenta otra pantalla extra, ya que comente al principio, mi SSD receptor tiene información almacenada, esta pantalla solo nos avisa que se van a sobre-escribir (borrar) los datos actuales, damos click en el checkbox para confirmar y en continuar:

![Sobreescribir](sobreescribir.png)

Para finalizar, se nos mostrará una pantalla con el porcentaje de progreso del clonado, por lo que solo queda esperar a que finalice el proceso. La velocidad va a variar dependiendo de la cantidad de almacenamiento de los discos y velocidades de transferencia de tus puertos asi como el adaptador que compraste, pero en promedio con discos de 1TB a mi me toma entre 20 y 25 minutos.

## Paso 3: Intercambiar el SSD en la PC

Ya por último, una vez terminado el proceso de clonado, simplemente intercambiamos físicamente el SSD en el equipo y confirmamos que nuestro equipo arranque el sistema operativo sin problemas.

![Cambiar a nuevo ssd](cambiar-ssd-a-nuevo.jpg)

Eso es todo! espero que esta guía te haya servido. Hasta luego!


Cambia el SSD de tu PC por uno nuevo


A veces necesitamos guardar información en el navegador del usuario, por ejemplo, si el usuario ya ha iniciado sesión en nuestra aplicación y queremos guardar un token para futuras peticiones al servidor en nombre del usuario loggeado, o si el usuario ha aceptado los términos y condiciones de nuestra aplicación,etc.

Una buena opción que tenemos para guardar esta información en el navegador, es en forma de cookies, las cuales son pequeños archivos de texto que se guardan en el navegador del usuario y que pueden ser accedidos por el servidor.

En este post, te muestro como guardar/setear una cookie en tu app web hecha con Flutter, sin necesidad de instalar un paquete externo adicional y solo con 2 sencillos pasos...

## Paso 1: Crear una clase para el manejo de cookies

Creamos una clase para el manejo de cookies (yo la nombré "CookieManager"). Lo primero que agregamos es una variable (yo la nombré "manager") de tipo estático, la cual será la instancia de la clase, y un método estático (yo lo nombre "getInstance") que nos permitirá obtener la instancia de la clase.

```dart
static CookieManager manager = CookieManager.getInstance();

static getInstance() {
  return manager;
}
```

Luego creamos un método para agregar una cookie (yo lo nombré "addCookie"), el cual recibe como parámetros el nombre que queremos darle a la cookie y el valor que va a contener. En este método, usamos la propiedad "document.cookie" para agregar la cookie al navegador del usuario. A esta propiedad le pasamos las características que queremos para nuestra cookie en forma de string y separadas por punto y coma. Para poder acceder a la propiedad "document", debemos importar la librería "dart:html".

```dart
import 'dart:html';
//...
//...
//...
void addCookie(String key, String value) {
  // 2592000 sec = 30 days.
  document.cookie = "$key=$value; max-age=2592000; path=/; SameSite=Lax; Secure";
}
```

También creamos un método para obtener/leer el valor de una cookie (yo lo nombré "getCookie"), el cual recibe como parámetro el nombre de la cookie que queremos obtener/leer. En este método, usamos la propiedad "document.cookie" para obtener las cookies y las guardamos en la variable "cookies". A esta propiedad le pasamos el nombre de la cookie que queremos obtener. Luego, usamos la función "split" para separar las cookies en un array de strings, donde cada string es una cookie. Luego, iteramos sobre el array de cookies y usamos la función "split" para separar el nombre de la cookie del valor de la cookie. Finalmente, retornamos el valor de la cookie que queremos obtener.

```dart
String getCookie(String name) {
    String? cookies = document.cookie;
    List<String> listValues = cookies!.isNotEmpty ? cookies.split(";") : [];
    String matchVal = "";
    for (int i = 0; i < listValues.length; i++) {
      List<String> map = listValues[i].split("=");
      String key = map[0].trim();
      String val = map[1].trim();
      if (name == key) {
        matchVal = val;
        break;
      }
    }
    return matchVal;
  }
```

Por último, creamos un método para eliminar una cookie (yo lo nombré "removeCookie"), el cual recibe como parámetro el nombre de la cookie que queremos eliminar. En este método, usamos la propiedad "document.cookie" para eliminar la cookie del navegador del usuario. A esta propiedad le pasamos el nombre de la cookie que queremos eliminar y las características que queremos para nuestra cookie en forma de string y separadas por punto y coma. En este caso, la forma que elegí para eliminar la cookie, es asignándole un valor vacío en su propiedad "max-age".

```dart
void removeCookie(String name) {
    document.cookie = "$name=; max-age=0; path=/; SameSite=Lax; Secure";
  }
```

Al final, nuestra clase "CookieManager" debería quedar de la siguiente manera:

```dart
import 'dart:html';
//...
//...
//...
class CookieManager {
  static CookieManager manager = CookieManager.getInstance();

  static getInstance() {
    return manager;
  }

  void addCookie(String key, String value) {
    // 2592000 sec = 30 days.
    document.cookie =
        "$key=$value; max-age=2592000; path=/; SameSite=Lax; Secure";
  }

  String getCookie(String name) {
    String? cookies = document.cookie;
    List<String> listValues = cookies!.isNotEmpty ? cookies.split(";") : [];
    String matchVal = "";
    for (int i = 0; i < listValues.length; i++) {
      List<String> map = listValues[i].split("=");
      String key = map[0].trim();
      String val = map[1].trim();
      if (name == key) {
        matchVal = val;
        break;
      }
    }
    return matchVal;
  }

  void removeCookie(String name) {
    document.cookie = "$name=; max-age=0; path=/; SameSite=Lax; Secure";
  }
}
```

## Paso 2: Utilizar la clase y sus métodos en tu código de Flutter

Ahora que ya tenemos nuestra clase para el manejo de cookies, podemos utilizarla en nuestro código de Flutter. En mi caso particular, la utilicé para guardar una cookie que contiene el token de autenticación de mi usuario, luego de que este se loggea en mi aplicación. Para ello, en el método "login" de mi servicio de autenticación, llamo al método "addCookie" de la clase "CookieManager" y le paso como parámetros el nombre de la cookie y el valor de la cookie.

```dart
//...mucho codigo omitido por brevedad...
try {
  //llamo al servicio de autenticación
  var result = await userLogin(email, password);

  //obtengo el mensaje de respuesta del servicio y el token de autenticación
  //y los guardo en variables
  var msg = result['msg'];
  var token = result['token'];

  //uso la clase CookieManager con su método addCookie para guardar la cookie
  //le paso como parámetros el nombre de la cookie 'jwt' y el valor que 
  //quiero que contenga en este caso, el token de autenticación que me 
  //regresa el servicio de autenticación.
  CookieManager().addCookie('jwt', token);

  //Al final, solo mando un mensaje al usuario si la autenticación fue 
  //exitosa y lo mando a la página principal de la aplicación...
} catch (e) {
  //Si la autenticación no fue exitosa, mando mensaje al usuario.
}
//...mucho codigo omitido por brevedad...
```

Al setear la cookie, el navegador del usuario la guarda y la envía en cada petición que haga a mi servidor. Las cookies guardadas en el navegador del usuario, se pueden ver en la pestaña "Application" de la consola de desarrollador del navegador. En la siguiente imágen, se puede ver que la cookie "jwt" que guardé en mi aplicación:

![Cookie 'jwt' que guarda el token](jwt-cookie.PNG)

Listo! Esto es todo lo que hay que hacer para guardar una cookie en el navegador del usuario. Ahora, si quisieramos eliminar la cookie, solo tendríamos que llamar al método "removeCookie" de la clase "CookieManager" y pasarle como parámetro el nombre de la cookie que queremos eliminar. Por ejemplo, si quisiera eliminar la cookie "jwt" que guardé en mi aplicación, solo tendría que llamar al método "removeCookie" de la clase "CookieManager" y pasarle como parámetro "jwt", esto puede ser por ejemplo en el método "logout" para que cuando el usuario cierre sesión, se elimine la cookie que contiene el token de autenticación.

```dart
//...mucho codigo omitido por brevedad...

//al dar click/tap en el botón/icono de cerrar sesión, 
//borrar la cookie "jwt" que guarda el token
onTap:(){
  CookieManager().removeCookie('jwt');
  //...mucho codigo omitido por brevedad...
}
//...mucho codigo omitido por brevedad...
```

## Conclusión

En este tutorial, aprendimos a crear una clase en Dart para el manejo de cookies en Flutter. Esta clase nos permite agregar, obtener y eliminar cookies en el navegador del usuario. Espero que este tutorial les haya sido de utilidad. Si tienen alguna duda o comentario, pueden enviarme un mensaje a través de mi el link de contacto en la parte superior de esta página. Saludos y hasta la próxima!


Guardar cookies en Flutter Web


Flutter cada vez toma más fuerza en el mundo de la programación, y es que con Flutter puedes crear aplicaciones de escritorio, móviles y web en poco tiempo y con el mismo código!.

Pero bueno, si estas aquí es porque ya sabes que es Flutter y quieres saber como desplegar tu app web hecha con Flutter en Vercel, ya que es una de las plataformas más populares para desplegar aplicaciones web, fácil de usar y sin ningún costo.

Entonces, bajo la suposición de que ya tienes tu app hecha con Flutter junto con su respectivo repositorio en Github, y tu cuenta en Vercel, veamos los **2 sencillos** pasos para desplegar tu web!

## Paso 1: Crear un nuevo proyecto en vercel y conectarlo con tu repositorio de Github

Simplemente crea un nuevo proyecto en Vercel y conéctalo con tu repositorio de Github como ya lo has hecho en otras ocasiones, en este caso sería el repositorio de la app hecha con flutter que quieres desplegar.

![Crea tu proyecto](paso1.PNG)

## Paso 2: Configurar el proyecto

Como Vercel aún no cuenta con un template para desplegar Flutter, debemos configurar nuestro proyecto en la sección **Build & Output Settings** de la siguiente manera:

**Build command:** *flutter/bin/flutter build web --release*

**Output directory:** *build/web*

**Install command:** *if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git -b stable; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web*

![Configura tu proyecto](paso2.PNG)

**Nota:** en la imágen anterior, puedes ver que agregué la opción *--web-renderer html* en la parte de build command, esto se explica al final de este post.

..y **LISTO!**, sólo tienes que dar click en el botón de DEPLOY y esperar a que se despliegue tu web!.

## Extra: Explicación de la opción *--web-renderer*

La opción *--web-renderer* es para especificar el renderizador que se usará para construir la aplicación web. Hay 2 opciones disponibles (3 con la opcion *auto* que se selecciona por default si no se especifica ninguna, pero en realidad la opción *auto* es la misma que html):

* **html:** el renderizador por defecto, que usa el DOM de HTML para renderizar la aplicación web.

* **canvaskit:** un renderizador experimental que usa la biblioteca CanvasKit para renderizar la aplicación web y es más consistente con aplicaciones móvil.

**Cual me recomiendas usar?**

* En este caso como estamos enfocados a web, por ende en navegadores de computadoras de escritorio o laptops, utilizamos *html*, ya que es más rápido y más ligero.

Para más información sobre esta opción, puedes visitar la documentación oficial de [Flutter](https://docs.flutter.dev/development/platform-integration/web/renderers).





Hola, Soy Gerardo

Últimos Posts

Despliega tu aplicación Dockerizada en Railway

Variables de entorno (env) en Docker

Dockeriza tu aplicación con FastAPI

Cambia el SSD de tu PC por uno nuevo

Guardar cookies en Flutter Web

Despliega tu app Flutter Web en Vercel