DEV Community: Julieta Campos Guzmán

Usar LinkedIn para conseguir trabajo en el extranjero

Julieta Campos Guzmán — Thu, 17 Mar 2022 10:04:35 +0000

De nuevo con mi disclaimer pero es importante que sepan que esto que les cuento es sólo mi experiencia. Así me pasó y así lo viví hace más de 5 años. Las cosas han cambiado mucho desde entonces pero sigue gente migrando y siguen habiendo vacantes. Espero que mi experiencia les pueda servir de algo.

Lo primero que les quiero decir son las circunstancias con las que empecé a hacer esto porque eso es muy importante para mi caso.

En mayo del 2016 empecé a trabajar como Frontend Dev usando Javascript. Antes de esto trabajé en muchos lados y como freelance usando PHP y WordPress. Sí sabía un poco de frontend pero no me había metido a fondo a la guerra de frameworks ni nada. Nunca usé AngularJS, ni Grunt, ni Gulp, ni nada. Mi primer experiencia con Javascript fue Angular RC 4. A los 4 meses de haber usado Angular por primera vez fue cuando decidí buscar trabajo en Alemania.

Les digo esto porque en mi momento, el mercado estaba buscando devs con experiencia en Angular y tener esos pocos meses de experiencia ya me ponía en ventaja. Además en 2016 estaban contratando muchísimo.

Ya que decidí aplicar a trabajos en Alemania hice lo siguiente:

Poner mi CV en inglés y mi LinkedIn en inglés y español

Se dice que hay un formato especial de CV para Alemania. Yo nunca lo he usado pero si vas a aplicar a una empresa alemana tradicional, entonces vale la pena que lo busques. En mi caso estaba aplicando a startups, así que un CV normal en inglés me funcionó.

Lo que incluí en el CV fue:

Datos personales: nombre, ubicación general, teléfono, email
Experiencia laboral con resumen de mis actividades y lista de las tecnologías utilizadas
Estudios
Lista de idiomas que hablo

En LinkedIn lo hice un poco distinto ya que decidí hacerlo un poco distinto. En mi experiencia laboral puse un aprendizaje clave que obtuve de cada uno de mis trabajos. Fue un reto porque hay un límite de caracteres y yo quería ponerlo tanto en inglés como en español. ¿Por qué? Porque puedo.

Cosas a considerar al escribir en inglés

Afortunadamente, yo estudié inglés toda mi vida escolar así que no necesité ayuda para escribir mi CV en inglés. Sin embargo, nunca queda de más pedirle a alguien que le eche un ojo para asegurar que los mensajes que quieres transmitir sean claros.

Si vas a aplicar a algún lugar en Europa, te recomiendo que uses Hemingway App para checar el nivel de dificultad de tu texto. Muchas veces hacemos estructuras gramaticales muy complejas cuando escribimos en otro idioma porque queremos decir las cosas como en nuestro idioma nativo. No te olvides que tu audiencia no es necesariamente nativa en inglés y muchas veces tampoco tienen un nivel súper fluído para entender mensajes entre líneas.

Es mucho mejor escribir las cosas de manera clara y en enunciados cortos. Esto facilita que tu lector no se pierda y da menos espacio a confusiones.

Buscar vacantes en la ciudad que quería

En mi caso yo quería venir a Berlín así que enfoqué mi búsqueda a Alemania y a Berlín en especial. Apliqué usando el botón de Apply through LinkedIn en todas las vacantes que me encontré que dijeran Angular 2 y visa sponsorship o relocation.

Creo que ese es uno de mis puntos más importantes: aplica sólo a vacantes que explícitamente dicen que patrocinan visa o dan apoyo para mudarse. Ya me ha pasado que entro a entrevista a una empresa y al final me dicen que no gracias porque no dan patrocinio para visa.

Mandar solicitudes

Fácil mandé 50 solicitudes en LinkedIn. Lo demás fue esperar respuesta. Las cosas en Alemania usualmente no son súper rápidas, así que se tardan unas semanas en responder.

Al final 4 empresas me contactaron para entrevista:

una por recomendación de mi pareja - no quedé porque usaban AngularJS y yo no sabía AngularJS
una por un servicio de reclutamiento que se llama Honeypot.io - me dieron oferta pero estaban en Hamburgo
dos por LinkedIn - en una no quedé por la tarea de código y la otra es la empresa donde laboré cuando me mudé a Alemania

Proceso de entrevista

No voy a elaborar mucho sobre el proceso en sí porque es muy similar a lo que se vive actualmente en todos lados. Eso sí, todas las entrevistas se hacen en horario de Alemania, lo que significa que las tomaba a las 6am hora de México.

Las entrevistas fueron todas en inglés. Pero no te preocupes, que de todas las entrevistas que hice sólo hablé con una persona que tenía inglés nativo. Todas las demás personas lo tenían como segundo o tercer idioma. Todos tenían acento, todos cometían errores y a nadie le importó. Lo más importante es que hables alto y claro.

Algunas entrevistas fueron primero con reclutador, algunas empezaron luego luego con el Engineering Manager. Tuve sólo una que fue un live coding, pero me dejaron "sola" y me dijeron que implementara un cierto feature de un ejercicio en una hora. Las demás fueron con proyecto para hacer en casa.

Después de la entrega del proyecto hubo otra entrevista técnica ya sea con el Lead o con futuros compañeros de trabajo. Aquí me preguntaron sobre mis proyectos, cosas que podría hacer mejor y preguntas para conocerme. Algo muy importante que me preguntaron muchas veces fue mi motivación para irme de mi país.

Finalmente, me extendieron dos ofertas pero me fui por la de la empresa que estaba en Berlín. Tuve una última junta para checar el salario y mi fecha de entrada. Que ojo, no le vayan a hacer como yo y pidan el mínimo para la visa como salario. Se les debe de pagar justo. Tampoco se aceleren con querer empezar luego luego, las empresas alemanas están acostumbradas a esperar candidatos ya que aquí cuando renuncias tienes que cubrir 3 meses de cancelación de tu contrato. Sí, se te hace eterno.

¿Qué pasa después?

Te mandan tu contrato por Fedex y vas a la embajada a sacar tu visa.

En resumen

Tener experiencia relevante y que esté en demanda en el mercado es súper importante
Escribe tu CV y perfil de LinkedIn en inglés, si necesitas ayuda pide a alguien que te ayude a editar tus textos
Aplica a todas las vacantes posibles
Ten paciencia que acá las cosas son lentas
En las entrevistas que no te de pena hablar inglés, es muy probable que quien te entrevista no es hablante nativo y nadie está ahí para calificar tu inglés
No te apures por no poderte subir a un avión a la mañana siguiente de recibir tu contrato, es normal esperar a los candidatos en especial si vienen del extranjero

Esto fue lo que me funcionó a mí hace 5 años. Actualmente sigo usando LinkedIn para buscar trabajo. Así conseguí mi trabajo actual que es mi segundo trabajo en Alemania.

Me pueden dejar comentarios y dudas en Twitter.

¿Cómo fue mi proceso de visa para Alemania?

Julieta Campos Guzmán — Sun, 23 Jan 2022 15:26:35 +0000

Antes de empezar a soltarles la sopa tengo algunas cosas que aclarar. Digamos que va a ser mi disclaimer:

Trabajo como desarrolladora/ingeniero en software
Tengo título universitario
Tuve mucha gente que me ayudó a que todo saliera de forma relativamente sencilla
Esto lo hice hace cinco años
Lo que escribo aquí es todo lo que sé, es mi experiencia pero no será ni relativamente parecida a la de alguien más
Les voy a poner links a la embajada de Alemania en México porque yo soy mexicana y ahí hice mi trámite

Ya con el disclaimer ahí podemos empezar.

En Octubre de 2016 conseguí eso que tanto quería: un trabajo en Alemania. Era algo que se me hacía imposible pero logré convencer a una empresa de que me contratara y una vez que acepté la oferta empezó todo el show para la visa.

La empresa que me contrató arregló una agencia de relocalización para ayudarme con el trámite, esto hizo todo mucho más sencillo. Sin embargo, desde que empecé a buscar trabajo ya tenía algunos papeles listos.

La visa a la que apliqué fue a EU Blaue Karte, EU Blue Card o Tarjeta Azul de la Unión Europea. Es una visa de trabajo para profesiones dónde hay escasez de trabajadores. Lo padre es que esa visa no está ligada al empleador, es tuya y te permite cambiar de trabajo si así lo deseas. Al ser una visa para trabajos altamente calificados, el requisito de idioma es nulo.

Yo ya sabía que encontrar cita para la visa era un viacrucis. Así que desde que decidí buscar trabajo también agendé mi cita para la visa. Cualquier cosa la podía cancelar, así que me adelanté un poco e hice la cita sin tener ninguna propuesta de trabajo.

Al mismo tiempo que hice la cita también me informé de los requisitos para la Blue Card, así que me puse a juntar los papeles necesarios.

En mi caso necesité:

Contrato de trabajo con sueldo mayor a una cierta cantidad que no me acuerdo cual era en ese momento
Seguro médico alemán
Título universitario apostillado y traducido a alemán
Comprobante de ANABIN del título
Pasaporte
El formulario de solicitud
Fotos biométricas
Copias de todo
Pago de la visa que en ese entonces fueron 160 euros

Cuando ya tuve el contrato, contacté a la embajada porque no encontraba mi título y quería ver qué tenía que hacer. Sin embargo, me contestaron que llevara un comprobante de los resultados que salían de la página y que no me preocupara. Así que no me preocupé e hice lo que me dijeron.

Con la agencia de relocalización vi que la solicitud fuera correcta y compré un seguro médico que ellos me recomendaron por tres meses.

Llegó Noviembre y con él mi cita para la visa. Revisé mis documentos ocho veces y mi mamá me acompañó a la embajada. Ojo, no se puede entrar con nada a la embajada no bolsas, no celulares, nada de nada, sólo tu persona y tus documentos.

Ya en la embajada pasé con la cónsul y cuándo vio que el comprobante del título y el título no coincidían me preguntó porque lo llevé así. Ya le conté que había escrito a la embajada y había recibido respuesta de llevarlo así. La cónsul me preguntó el nombre de quién me respondió eso y cuándo le dijo ella me comentó que esa persona procesa las visas, así que si había dicho que estaba bien entonces no iba a haber problema.

Pagué por el trámite, recogí mis documentos y me fui de compras con mi mamá.

A las tres horas recibí un correo de la embajada donde decía que mi visa estaba lista y podía pasar por ella al siguiente lunes.

Y esa es la historia de como saqué mi visa.

Todo parece muy sencillo porque tuve muchísima ayuda y muchísima suerte. Como les dije al principio mi proceso y el de otra persona van a ser muy distintos. Hay muchísimos factores a considerar y lo que me pasó a mí puede que no le pasé a alguien más.

Ahora les contesto otras dudas que me han llegado por DM:

¿Homologáste tu título? No, yo no hice ese proceso porque me dijeron que no era necesario. Sin embargo, recomiendo que escribas personalmente a la embajada y preguntes.
¿Te han pedido título para buscar o solicitar trabajo? Para buscar o solicitar trabajo no. Trabajo como desarrolladora de software, así que los títulos no importan en mi industria. La empresa para la que actualmente trabajo me pidió el título una vez que me contrató y sólo fue para comprobar mis estudios, no tenía que ser un título universitario ni me pidieron apostilla ni nada.
¿Sabías alemán o necesitas alemán para buscar trabajo? De nuevo, en mi industria la mayoría de las posiciones que se encuentran son en inglés porque la mayoría de los desarrolladores son extranjeros. Así que yo no sabía alemán antes de irme. Puedes aprender alemán desde antes, siempre ayuda a los trámites ya que llegas, pero no es necesario. Lo que sí necesitas es que no te de pena hablar y escribir en inglés.

Hasta aquí el post de hoy, díganme en Twitter si tienen otras dudas. También les puedo escribir sobre cómo conseguí mi trabajo o shocks culturales que tuve llegando a Alemania. :)

¿Cómo hacer un blog usando Gatsby y Ghost? - Parte 1

Julieta Campos Guzmán — Tue, 21 Jul 2020 18:53:49 +0000

Mi breve historia con los blogs

Desde hace muchísimos años, estoy hablando del 2003/2004 encontré plataformas como LiveJournal o Blogger y empecé a ver que mucha gente escribía diarios en línea. Algo así como lo que eran las páginas de GeoCities en los 90's que tenían páginas de visitas y eran lugares divertidos para escribir cualquier cosa.

Desde ese entonces me ha interesado muchísimo este fenómeno de tener un sitio web propio y llenarlo de contenido y con el pasar de los años he intentado crear y mantener un blog.

Es más, en el 2007 aprendí a usar WordPress y de ahí me volví soporte técnico de blogging para varias chicas que tenían blogs de moda. Me pagaban para ayudarles a modificar sus comentarios, los menús, hasta conseguí trabajos con influencers grandes de esa época. Me especialicé tanto en WordPress que trabajé desarrollando sitios en WordPress hasta inicios de 2016.

Durante todo eso, siempre tuve un sitio como proyecto para probar las cosas nuevas que salían pero nunca logré tener una audiencia o desarrollar un presencia en línea. Nunca hice mucho sobre monetización ni nada por el estilo.

Ahora estoy escribiendo este blog para generar un recurso para la yo del pasado y todas esas personas que pasan por estos pequeños problemas y no encuentran las soluciones fácilmente.

¿Por qué Gatsby?

GatsbyJS me llamó la atención porque no conocía los generadores de sitios estáticos. Todo mundo decía que era muy sencillo de usar, incluso yo cuando creé este sitio, pero luego me di cuenta que para hacer cosas más complejas realmente hay que conocer todas sus partes. Hay que saber usar React, hay que saber usar GraphQL y hay que saber configurar Gatsby para lograr lo que quieres. Hacer la instalación inicial es muy rápido con su herramienta de línea de comando (CLI), pero después se puede volver confuso para cambiar cosas.

Quiero seguir intentando con Gatsby porque me ha gustado la experiencia de usar GraphQL pero aún tengo mucho que aprender en términos de cómo Gatsby funciona internamente y otras cosas que puedo hacer con él.

¿Por qué Ghost?

Ghost es un administrador de contenido hecho en Node. Recuerdo la primera vez que escuché de él fue por ahí del 2013. No lo usé al principio porque recuerdo que mi compañía de hosting no lo soportaba. Después lo usé brevemente en 2017 cuando recién me mudé a Alemania pero la verdad es que el diseño y las plantillas no me gustaban y no quise aprender a hacer temas en Handlebars.

Después de que leí un artículo en Smashing Magazine sobre usar CMS en modo headless, o sea como fuentes de contenido en lugar de tener el contenido y el front-end en el mismo lugar decidí buscar si eso se podía hacer con Ghost. Pues resulta que sí se puede y tienen tanto un plugin de Gatsby para hacerlo, como un proyecto listo para empezar a usar Ghost. Además se puede usar junto con Netlify y todos los aspectos de administrar y publicar tu sitio están cubiertos.

Ahora sí, vamos a empezar

Para crear un blog con Gatsby y Ghost se necesitan dos cosas:

Una instalación de Ghost
Un proyecto de Gatsby

Nota: todo este tutorial se puede hacer en localhost, pero para ponerlo en línea usé un droplet de Digital Ocean para poner mi instalación de Ghost y alimentar el front-end en Gatsby.

Paso 1: Instalar Gatsby

Para instalar Gatsby hay que instalar su herramienta de línea de comando. Como lo mencioné en mi post anterior sobre crear blogs con Gatsby, hay que correr el siguiente comando:

npm i -g gatsby-cli

Paso 2: Instalar Ghost

Para instalar la herramienta de Ghost en un ambiente local, hay que correr el comando:

sudo npm install -g ghost-cli

Esto nos permitirá crear el blog en Ghost que servirá para alimentar de contenido nuestro front-end en Gatsby.

Paso 3: Crear un blog en Ghost

Primero vamos a crear el blog en Ghost. Esto es importante ya que necesitaremos algunos datos de la instalación de Ghost para conectarla con Gatsby.

Crea un nuevo directorio para tu blog en Ghost:

mkdir ghost-blog && cd ghost-blog
ghost install local

Sigue las instrucciones de instalación y crea tu usuario de Ghost.

Cabe mencionar que la instancia de Ghost se quedará funcionando en segundo plano, así que no necesitas correrla activamente para usarlo.

Una vez dentro, en el menú elige Integrations y vas a ver una opción que se llama + Add custom integration. Se va a ver algo así:

Vista de integraciones en la sección administrativa de Ghost

Oprime + Add custom integration y dale un nombre a tu instalación. Yo la llamé Gatsby para mantener las cosas sencillas.

Ya que creaste la integración, vas a ver una pantalla con algunos datos, entre ellos uno llamado Content API Key. Esta llave es la que necesitamos para poder alimentar el contenido a Gatsby. Así que mantenla a la mano para lo que sigue.

Paso 4: Crear un sitio de Gatsby

Para crear un sitio en Gatsby usando la herramienta de línea de comando, vamos a correr el siguiente comando en la consola:

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Este comando va a llamar el repositorio de la plantilla de inicio para hacer un sitio en Gatsby. Este sitio va a tener las cosas básicas que necesitamos para empezar a trabajar, es el equivalente a escribir "Hola Mundo" usando Gatsby.

La razón por la que no elegí usar la plantilla que ya trae Gatsby conectado a Ghost o usar la plantilla de blog de Gatsby es que estas plantillas traen muchas configuraciones. Todas esas configuraciones añaden una capa de complejidad a la hora de querer cambiar estilos o hacer cosas distintas a las predeterminadas. Me gusta mucho más tomar lo básico y aprender desde lo más abajo posible para después poder entender cómo funcionan las configuraciones más complejas. Por eso hoy empezaremos a trabajar con la plantilla inicial y no con algo más elaborado.

Ya que terminó el instalador, vamos a cambiar de carpeta y a correr nuestro servidor de Gatsby en modo de desarrollo:

cd gatsby-site
gastby develop

Si todo salió bien, debes de ver poder visitar http://localhost:8000 y ver las palabras Hello World.

Muestra de como se ve "Hello World!" en la plantilla básica de Gatsby

Si te fijas en la consola, vas a ver que existe otra dirección, http://localhost:8000/___graphql, si vamos a esta URL podemos ver una instancia de GraphiQL. En esta parte podemos probar las diferentes consultas y operaciones que se pueden hacer con GraphQL y Gatsby antes de ponerlas en el código.

Vamos a jugar bastante con esta consola más adelante para crear las consultas que usaremos en el blog.

Vista de GraphiQL en un proyecto nuevo de Gatsby

Paso 5: Conectar Gatsby y Ghost

Algo bien padre que hizo la comunidad de Ghost fue crear un plugin para Gastby que crea la conexión entre la API de Ghost y el GraphQL de Gatsby. Usar un sistema de blog de esta forma se llama headless CMS o administrador de contenido sin cabeza.

Headless CMS se refiere a que en lugar de usar el CMS para guardar el contenido y presentarlo, usamos sólo los datos y los presentamos en otro lado. En este caso, usaremos Gatsby para hacer un sitio estático usando los datos de Ghost.

El plugin se llama gatsby-source-ghost y lo vamos a agregar a Gatsby de la siguiente manera:

yarn add gatsby-source-ghost

Ya que está instalado, hay que abrir el archivo gatsby-config.js. Este archivo va a tener todas las configuraciones que necesitamos para hacer funcionar el sitio. Para configurar nuestro Ghost hay que añadir el siguiente bloque de código dentro de plugins: []:

{
   resolve: `gatsby-source-ghost`,
   options: {
       apiUrl: `https://<your-subdomain>.ghost.io`,
       contentApiKey: `<your content api key>`,
       version: `v3` // Ghost API version, optional, defaults to "v3".
                     // Pass in "v2" if your Ghost install is not on 3.0 yet!!!
   }
}

apiUrl - aquí va la URL de la instalación de Ghost, si es local entonces hay que poner la URL del localhost.
contentApiKey - la llave que sacamos cuando hicimos la integración en Ghost
version: la versión de Ghost

Ahora hay que reiniciar el servidor de Gatsby para ver los cambios.

En la parte visual no se va a notar nada ya que no hemos cambiado la interfaz. Entonces hay que visitar GraphiQL para ver las nuevas interfaces que tenemos disponibles.

Actualización de GraphiQL después de instalar el plugin de Ghost

Ahora nuestro Ghost está conectado con Gatsby. Es importante notar que cada que hagamos un cambio en Ghost, será necesario volver a compilar el sitio en Gatsby.

Ahora podemos hacer consultas a nuestro sistema en Ghost. Una de ejemplo puede ser para conseguir datos del sitio, como el título y la descripción.

query MyQuery {
  ghostSettings {
    title
    description
  }
}

En el caso de mi sitio el resultado va a ser:

{
  "data": {
    "ghostSettings": {
      "title": "Juliescript",
      "description": "Otro blog de tecnología en español."
    }
  },
  "extensions": {}
}

¡Al fin tenemos Gatsby y Ghost conectados!

Con esto se termina el tutorial de hoy pero en la siguiente parte veremos como crear páginas usando las consultas de Ghost.

Así trabajo desde casa - mi escritorio y rutina

Julieta Campos Guzmán — Mon, 27 Apr 2020 13:42:00 +0000

Quiero empezar este post reconociendo el gran privilegio de tener un trabajo estable, de tiempo completo, que me permite trabajar desde mi casa. No todos lo tenemos y reconozco el valor que tienen aquellos que salen todos los días para mantener a su familia durante esta situación.

Desde que nos mudamos al departamento donde vivimos actualmente, quisimos tener un espacio dedicado para el trabajo. Mi prometido y yo somos ingenieros en software y ocasionalmente trabajamos desde casa. También tenemos varios hobbies que involucran usar la computadora, así que tener unos buenos escritorios y unas sillas apropidas para trabajar era prioridad para nosotros.

Con el tiempo hemos agregado cosas para hacer nuestro espacio de trabajo más cómodo. Ahora que llevamos más de un mes trabajando desde casa, la inversión en nuestro espacio de trabajo ha valido muchísimo la pena. Podemos trabajar cómodamente, separar nuestro trabajo del resto de la casa y mantenernos concentrados durante el día.

Mi escritorio en particular se ve así:

Escritorio - Lillåsen de IKEA
Silla - Långfjäll de IKEA
Descansa Pies - Dagotto de IKEA
Lámpara - Forså de IKEA, la que tengo en mi escritorio no la encontré en el sitio pero esta es la de mi prometido
Stand para celular/tablet - Sigfinn de IKEA

Sí, somos totalmente IKEA.

Stand para laptop: mStand de Rain Design
Hub para cargar dispositivos USB de Aukey
Monitor Dell U2419H
Teclado Logitech Ergo K860, este lo compré con descuento de mi empresa
Audífonos Sony WH-1000XM3
Apple Magic Trackpad 2
Macbook Pro 15 pulgadas, es la del trabajo
Macbook Air 13 pulgadas, es la personal
Y muchos, muchos cables

La rutina que medio me he hecho ha sido la siguiente:

Despierto cerca de las 8:00, me baño y arreglo para trabajar. Normalmente me maquillo para trabajar porque me gusta estar arreglada, pero no es algo que haga diario o a fuerza. Normalmente desayunamos un cereal en frente de la compu y empieza el día de trabajo.

Mi primer junta del día siempre es mi stand up a las 9:45, así que antes de eso debo de estar conectada y revisando mis tareas del día. Dependiendo del día, a veces tengo juntas o a veces no tengo nada agendado. Sin embargo, tengo varias video llamadas al día para platicar con mis compañeros sobre el proyecto en el que estamos trabajando.

A las 11:45 sale mi recordatorio de la comida, así que por ahí de las 12 me levantó del escritorio y cocino. Si pedimos comida a domicilio, entonces pedimos antes de las 12 y esperamos a que llegue. Tratamos de comer juntos y en la cocina para tener un verdadero respiro del trabajo. Entre 45 minutos y 1 hora es lo que nos damos para comer y regresamos a trabajar.

Durante el tiempo de trabajo me doy 2 descansos de 15 minutos para preparar té, descansar mis ojos y estirar un poco las piernas.

El día de trabajo termina a las 17:00, a veces media hora más. Normalmente me pongo a ver YouTube o a jugar Animal Crossing. Algunas veces vamos a caminar después del trabajo o a hacer algo que tenga pendiente como sacar la basura o ir al super mercado.

Estuve haciendo ejercicio constante durante unas 2 o 3 semanas pero no lo incluyo en la rutina porque no es algo que hago diario a cierto tiempo. Lo hago cuando tengo ganas y no siempre a la misma hora.

Mi rutina diaria no difiere mucho de mi rutina normal sin pandemia. La única diferencia es que no tengo que tomarme tiempo para llegar a la oficina. Aún así extraño mucho a mis compañeros e ir a la oficina. Me gusta mucho socializar con mi equipo y aunque hablamos mucho, no es lo mismo.

¿Ustedes cómo se han sentido con la pandemia?

Hicimos el sitio web de nuestra boda en Angular y Rust

Julieta Campos Guzmán — Fri, 24 Apr 2020 13:42:00 +0000

La historia

En agosto del año pasado nos comprometimos durante nuestras vacaciones en Japón.

Decidimos planear nuestra boda en México porque aunque vivimos en Alemania, nuestras familias están en México y es donde queremos celebrar con todos nuestros seres queridos.

Una de las partes más importantes de planear una boda son las invitaciones. Usualmente se hacen de forma física, son cosas muy hermosas y elaboradas que se envían a los invitados. En ellas se encuentran todos los datos sobre la boda como:

Fecha
Lugar
Hora
Programa
Etiqueta
Mesa de regalos
Boletos para la recepción

Hacer invitaciones no es una opción para nosotros. Tenemos que coordinar invitados que vienen de distintas ciudades y de distintos países. Además de que mandarlas a hacer puede ser muy caro y enviarlas es mucho trabajo.

Por eso fue que decidimos usar nuestras habilidades como desarrolladores y unir fuerzas para crear un sitio web para nuestra boda.

El sitio

Nuestro sitio va a tener dos funciones principales:

Dar la información sobre la boda
Administrar la asistencia de los invitados

Así que pensamos en crear un sistema que sirviera para que los invitados confirmen su asistencia y que después podamos enviar la invitación más formal en PDF antes del mero día de la boda.

Para lograr esto nos dividimos el trabajo. Mi prometido se encargó de hacer todo el backend y yo me encargué de hacer el frontend. Entre los dos decidimos en un diseño y agregamos el contenido a la página. Mi prometido se encargó de traducir los textos porque necesitamos tener el sitio en español e inglés.

Va sin recalcar que tenemos excepciones para invitados que no saben o que no tienen acceso a la web.

El tech stack

Para el backend, todo fue manejaod por mi prometido así que no entraré en muchos detalles.

El lenguaje de programación fue Rust porque es el lenguaje que está usando ahora.

El stack del backend terminó así:

Rust
- Gotham - para manejar el API
- Diesel - para conectar y administrar la base de datos
PostgreSQL
GitHub Actions
Hosting en Digital Ocean

El stack del frontend fue el siguiente:

Angular 9
SASS
Deploy en Netlify

Para el manejo de usuarios decidimos usar Facebook y Google login. La verdad no queríamos quedarnos con información personal del usuario y no quisimos lidiar con GDPR.

El proceso

En el momento en que empezamos a planear el sitio, mi prometido estaba tomando una clase de administración de proyectos web para su maestría. Por mi lado, he tomado varios talleres de generación de ideas y de crear proyectos de forma ágil.

De nuevo juntamos recursos e hicimos una sesión para definir que es lo que necesitaba la página y que es lo que queríamos lograr. Al final terminamos poniendo todas las tareas en un tablero tipo Kanban en JIRA. Esto nos ayudó mucho a mantener nuestro objetivo en la mira.

El diseño

El diseño fue decisión principalmente mía. La verdad soy pésima diseñando así que me puse a buscar inspiración en Pinterest y otros sitios como Wix y Squarespace.

Al final decidí reproducir una plantilla de sitio para boda de Squarespace. El diseño nos gustó mucho porque era sencillo y elegante. El esquema de colores es neutral y no se ve super feminino o masculino.

Es un diseño bastante sobrio y la tipografía me encantó.

Además de que ya viene con diseño móvil que siempre es un viacrucis incluir.

Plantilla Morena de Squarespace

A partir del diseño creamos las demás páginas que no estaban definidas.

No tiene nada de malo reproducir un diseño ya creado si no eres bueno en diseño o si no puedes pagarle a un diseñador.

El frontend

Jugué con la idea de hacer el frontend con React y Gatsby pero la verdad es que me siento mucho más cómoda con Angular. Puedo resolver problemas mejor y no tengo que sufrir tanto conectándome al backend.

Además de que estilizar Angular es algo que es un sueño cuando lo haces con SASS. Es mi tech stack favorito y me ha servido bien varios años ya.

El mapa del sitio quedó de la siguiente manera:

Página principal
Información de la boda

- Información de viaje

RSVP

Login
Redirección de login de facebook
Página de perfil
- 404

Diseño responsivo

Hacer sitios responsivos creo que es algo que nos llega a dar mucha flojera a varios programadores. Hay muchas variables y hay que escribir mucho código. Afortunadamente pude usar casi puro CSS para manejar el diseño responsivo.

La única ocasión donde tuve que incorporar Javascript fue con el menú para dispositivos móviles. Necesitaba manejar cuando activo y desactivo el menú y no me quise complicar la vida. Así que fue con Javascript.

Facebook y Google Login

Para el manejo de usuario usamos Google y Facebook login. Toda la implementación la hizo mi prometido en Rust, así que del lado del frontend me tocó manejar las redirecciones.

El flujo que tenemos es el siguiente:

Usuario recibe un link de invitación con un código único
En la página, el usuario puede elegir entre iniciar sesión con Facebook o con Google
Ya que se inicia la sesión, se redirecciona al usuario de regreso al sitio
El usuario puede elegir si asistirá o no a la boda y si necesita llevar pareja

Traducciones

Como lo mencioné al principio, necesitamos traducciones para el sitio. Tenía muchas ganas de usar las traducciones nativas de Angular pero me hubiera tomado mucho tiempo configurarlas.

Decidí ir por un paquete que usé mucho tiempo en mi trabajo anterior llamado @ngx-translate/core. Este paquete me permite generar variables y mantener los idiomas con base en archivos json. La configuración es muy corta y maneja el cambio de idioma de inmediato y a nivel de aplicación.

El producto terminado

Al final el sitio terminó así:

Conclusiones

¿Lo volvería a hacer?

La verdad es que si no fuera por la funcionalidad especial que queríamos para administrar a los usuarios, hubiera utilizado alguna herramienta ya existente para hacerlo. Incluso contratar Squarespace para usar la plantilla que reproduje.

No queríamos lidiar con procesar formularios a mano o conservar datos de invitados, por eso el login con Facebook o Google fue muy importante y eso es algo que no vimos en otras plataformas para hacer sitios de boda.

Altervativas para tu propio sitio de boda

Puedes usar una herramienta como Squarespace o Wix para hacer un sitio. Incluso hay portales exclusivos de bodas como The Knot que te permiten crear un pequeño sitio con links a todo lo que necesitas.

¿Es necesario?

Probablemente no. Si tu boda puede llevarse con invitaciones normales y es la ruta que quieres tomar, es lo único que se necesita. Si quieres manejar todo con un evento de Facebook se puede. Todo depende de lo que quieras para mantener a tus invitados enterados de todos los detalles de tu evento.

Me gustó mucho la experiencia de hacer el sitio de la boda. Mi prometido y yo nunca habíamos trabajado en un proyecto juntos, así que fue una bonita experiencia. Además esto nos ayudó a pensar en más detalles del evento y organizar a nuestros invitados de mejor manera.

Lamentablemente tuvimos que posponer la boda debido al COVID-19 pero cuando tengamos una nueva fecha pondremos el sitio en línea.

Validación personalizada en Angular

Julieta Campos Guzmán — Thu, 30 Jan 2020 13:42:00 +0000

Angular viene ya con un muy buen número de validaciones para formularios. Te maneja que el campo requerido, que el mínimo, que el máximo, que si el campo debe de cumplir un patrón, de todo.

Sin embargo, hay veces que necesitamos algo más, algo que no cabe dentro de los casos genéricos que vienen incluidos con Angular. He ahí donde entra la validación personalizada o los validadores.

¿Qué es un validador?

Un validador, o validator en inglés, es una función que escribes para checar que tu formulario cheque alguna función en específico. Usualmente se crea en un archivo aparte y se importa al componente. También se puede probar para revisar que los casos sean correctos.

Al crear un validador también creas nuevas categorías de errores, mismos que puedes usar en tus plantillas para mostrar mensajes de error y marcar el formulario como válido o inválido.

Ok, ok, ahora vamos a hacer uno porque sigo sin entender

El caso clásico para un validador personalizado es el de checar que un formulario para registrar una contraseña y luego confirmarla.

Para crear este formulario vamos a usar una forma reactiva:

this.form = this.fb.group({
  'password': ['', Validators.required],
  'confirmarPassword': ['', Validators.required]
}, {
  validators: validarQueSeanIguales
});

En este caso estoy declarando dos campos en el formulario, ambos deben de ser requeridos y después el grupo de campos va a tener una validación para ver que sean iguales.

Ahora toca hacer una plantilla sencilla para mostrar nuestros campos:

<form [formGroup]="form">
    <mat-form-field>
        <input matInput type="password" formControlName="password" placeholder="Contraseña">
    </mat-form-field>

    <br>

    <mat-form-field>
        <input matInput type="password" formControlName="confirmarPassword" placeholder="Confirmar Contraseña">
    </mat-form-field>
</form>

Nota: En este ejemplo estoy usando Angular Material para darle estilo a la interfaz, pero no es necesario usar Material para hacer validadores personalizados.

El siguiente paso es escribir nuestra función de validación. Esto lo voy a hacer en un archivo separado llamado app.validator.ts, me gusta mucho usar la convención <nombre_del_componente>.validator.ts para denotar mis validadores, pero depende del caso y la necesidad del proyecto. A veces los validadores se pueden llegar a compartir entre componentes, por lo cual es mejor idea llamarlos de acuerdo a lo que vayan a validar. También cabe notar que pueden haber varias funciones de validación dentro de un mismo archivo de validadores.

import { FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';

export const validarQueSeanIguales: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
    const password = control.get('password');
    const confirmarPassword = control.get('confirmarPassword');

    return password.value === confirmarPassword.value
        ? null
        : { 'noSonIguales': true };
};

¿Qué está pasando aquí?

Lo que estoy haciendo es definir una función de validación o ValidatorFn, que recibe como parámetro un grupo de campos , FormGroup, y va a regresa o un objeto de errores de validación, ValidationErrors, o un null.

Ya dentro de la función, podemos encontrar cada campo que necesitamos comparar. En este caso son los dos campos de nuestro formulario password y confirmarPassword. Posteriormente comparamos los valores de los campos y si son los mismos retornamos un null. Si no es así, entonces se retorna el objeto con el error { noSonIguales: true }.

Con esto nuestro formulario va a saber si es válido o si tiene algún error.

¿Cómo despliego estos errores?

Para desplegar estos errores, necesitamos indicarle a nuestra plantilla cuando hay un error de validación. En el caso de este validador, va a mostrar un error desde que empecemos a escribir en el primer campo. Esto no es ideal ya que el usuario se va a preguntar que cómo hizo algo malo si apenas empezó a llenar el formulario.

Podemos combinar el resultado de nuestro validador con el estado de los campos del formulario.

En Angular, los campos de un formulario tienen 4 estados: pristine, touched, untouched y dirty.

En resumen quedan algo así:

pristine - No se ha tenido interacción alguna con el campo
untouched - Si pusiste el cursor o fuiste al campo con la tecla de tabulador, sólo se activa cuando se llega al campo
touched - Si ya te fuiste del campo, ya cambiaste el cursor de lugar o seguiste a los demás campos
dirty - Si ya se tuvo interacción con el campo

Nuestro usuario necesita saber si las contraseñas son iguales después de que empieza a escribir la confirmación. Así que voy a checar que ambos campos tengan estatus dirty y checar si el formulario tiene el error de noSonInguales.

checarSiSonIguales(): boolean {
    return this.form.hasError('noSonIguales') &&
        this.form.get('password').dirty &&
        this.form.get('confirmarPassword').dirty;
}

A mí me gusta hacer funciones que revisen estas cosas en lugar de tener toda la lógica en plantilla, pero si ponen la condición en la plantilla también funciona igual.

En la plantilla queda así:

<mat-error *ngIf="checarSiSonIguales()">Las contraseñas no coinciden</mat-error>

Así que cuando las contraseñas no coinciden, se va a mostrar un bonito mensaje de error en color rojo que dice Las contraseñas no son iguales.

Incluso si queremos ir un paso más allá, podemos usar el estatus del formulario para bloquear un botón de Enviar y una vez que nuestra forma esté libre de errores, habilitarlo y dejar al usuario enviar su formulario.

<button mat-raised-button [disabled]="!form.valid">Enviar</button>

Hay muchas otras formas para jugar con mensajes de error, clases, habilitar y deshabilitar campos y botones. Todo depende del formulario con el que se esté trabajando y las condiciones que necesita.

Como siempre, acá les dejo un ejemplo en StackBlitz de este pequeño tutorial:

En el siguiente tutorial, voy a hacer un formulario dinámico con varios tipos de validaciones para que vean como se pueden combinar.

¿Cómo usar formularios dinámicos en Angular?

Julieta Campos Guzmán — Sun, 06 Oct 2019 13:42:00 +0000

Disclaimer: Esta tarea la hice originalmente en Angular 7 y estamos en proceso de actualizar a Angular 8 por esta razón puede que las cosas cambien en versiones más recientes.

Uno de los retos más raros que he tenido ha sido trabajar con formularios dinámicos en Angular.

¿Qué es un formulario dinámico?

Un formulario dinámico es cuando un formulario permite a un usuario generar campos con una acción. El formulario nunca va a saber cuantos campos quiere tener un usuario, por lo que el usuario tiene todo el control sobre la cantidad de campos que se generan. El usuario también puede quitar campos y eso es lo que hace la forma dinámica.

Un ejemplo es un típico formulario para hacer un currículum en internet. La parte de educación y experiencia laboral se ven algo como así:

Angular nos permite tener formularios dinámicos con su módulo de formularios reactivos o ReactiveFormsModule. Un formulario reactivo es un tipo de formulario que se crea desde el controlador. En lugar de tener el formulario 100% en la plantilla, desde el controlador se crean los campos y se añaden características como las validaciones.

Hacer formularios directo en la plantilla parece ser más fácil al principio, pero si se tiene un formulario muy complejo es mejor hacerlo con formularios reactivos. Además parece que los formularios de plantilla serán deprecados en versiones futuras de Angular.

¿Cómo se crea un formulario reactivo?

Lo primero que hay que hacer es añadir el módulo de formularios reactivos a nuestro módulo.



import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Ya que tenemos el módulo importado, tendremos todas las herramientas para nuestro formulario dinámico disponibles en nuestra aplicación.

Ahora en nuestro controlador, lo primero que hay que hacer es definir dos cosas:

Un FormBuilder que nos va a ayudar a construir el formulario
Un FormGroup que va a ser nuestro formulario

Para el FormBuilder, tenemos que definirlo en el constructor del componente.



constructor(private fb: FormBuilder) {}

Y el FormGroup sólo lo definimos como una variable en el componente.



formulario: FormGroup;

Después, usando el método de ngOnInit(), mandamos llamar a la función que va a crear el formulario. Esta función se puede llamar como sea, yo la llamé crearFormulario porque soy mega original.



crearFormulario() {
  this.formulario = this.fb.group({
    experienciaLaboral: new FormControl('')
  });
}

Si este fuera un formulario normal, con esto ya tendríamos un formulario con un campo, pero queremos un formulario dinámico así que hay que seguir.

¿Cómo se hace un formulario dinámico?

Ahora es tiempo de introducir otra herramienta del módulo de formularios reactivos, se llama FormArray. Un FormArray es un arreglo de FormControl. Se comporta muy parecido a un arreglo normal y tiene ciertos métodos propios que hace muy sencillo agregar y quitar elementos del mismo. Para usarlo vamos a modificar nuestro método crearFormulario.



crearFormulario() {
  this.formulario = this.fb.group({
    experienciaLaboral: this.fb.array([])
  });
}

Como FormBuilder ya incluye todas estas herramientas, no necesitamos definir un nuevo FormArray con new FormArray([]). Los dos métodos son válidos, pero si ya tenemos el FormBuilder definido, hay que usarlo.

A mi gusto personal, prefiero crear una función para añadir campos al FormArray que definimos en el formulario inicial. En el caso de este ejemplo, voy a crear un FormGroup con 3 campos, y cada uno de estos grupos será añadido al arreglo llamado experiencia laboral.

Ahora les voy a dar un consejo buenísimo que aprendí en mi nuevo trabajo: hay que crear una función de get para conseguir el arreglo y así no hacernos mil bolas a la hora de manipularlo.



get experienciaLaboral(): FormArray {
  return this.formulario.get('experienciaLaboral') as FormArray;
}

Este get nos va a permitir manejar el arreglo de manera mucho más sencilla que escribir todo cada vez y además hará que el código sea mucho más legible para otros.

Ya que tenemos nuestro get, podemos proseguir a crear el grupo que le vamos a poner:



anadirExperienciaLaboral() {
  const trabajo = this.fb.group({
    empresa: new FormControl(''),
    puesto: new FormControl(''),
    descripcion: new FormControl('')
  });

  this.experienciaLaboral.push(trabajo);
}

Cada vez que llamemos a anadirExperienciaLaboral vamos a generar un FormGroup con 3 campos: empresa, puesto y descripción. Ya que esté creado, se va a añadir al arreglo de experienciaLaboral. Todo de una manera muy sencilla por todo el código que ya escribimos.

No se te olvide añadir esta función a ngOnInit justo abajo de la de crearFormulario para añadir campos la primera vez.

Ahora, ¿cómo lo vemos en la plantilla?

¿Cómo es la plantilla de un formulario dinámico?

La plantilla no es tan diferente que la de un formulario hecho con base en plantillas. Sin embargo, hay detalles que tenemos que tener en cuenta a la hora de generarlo.

Una cosa que me tuvo atorada mucho tiempo, fue olvidar poner el nombre del arreglo en la plantilla antes de hacer un ciclo for para generar los campos.



<form [formGroup]="formulario">
  <div formArrayName="experienciaLaboral">
    <div *ngFor="let trabajo of experienciaLaboral.controls">
      <input>
    </div>
  </div>
</form>

El atributo de formArrayName es fundamental para que nuestra plantilla sepa que va a recibir un arreglo dentro del formulario. Si esto no se define, los campos no aparecerán en la plantilla.

Otra cosa importante es que aunque tenemos nuestro get para experienciaLaboral, el FormArray no funciona como un arreglo normal por el que podemos iterar. Por eso es importante definir que vamos a iterar por los controles del arreglo. Los controles son todos los FormGroups que se han añadido al FormArray.

Para mostrar los campos que queremos es necesario añadir el código para mostrarlos:



<form [formGroup]="formulario">
  <h3>
    Experiencia Laboral:
  </h3>
  <div formArrayName="experienciaLaboral">
    <div *ngFor="let trabajo of experienciaLaboral.controls">
      <div>
        <label>Empresa:</label><br />
        <input type="text" />
      </div>
      <div>
        <label>Puesto:</label><br />
        <input type="text" />
      </div>
      <div>
        <label>Descripción:</label><br />
        <textarea></textarea>
      </div>
      <hr />
    </div>
  </div>
</form>

¿Cómo se vuelve este show dinámico?

Como lo mencioné al principio, el chiste de los formularios dinámicos es que el usuario pueda añadir y quitar campos a voluntad. En el caso de este formulario, no se van a poder añadir o quitar campos individuales, sino todo un grupo completo a la vez.

Para añadir más campos hay que crear un botón en la plantilla que llame a la función de anadirExperienciaLaboral, algo así:



<button (click)="anadirExperienciaLaboral()">
  + Añadir
</button>

Este botón se puede poner afuera del *ngFor para que aparezca una vez en la plantilla.

En el caso de quitar campos del formulario, hay que agregar un botón para borrar dentro de cada grupo que añadimos. Pero primero hay que crear la función que se va a encargar de borrar en nuestro controlador.



borrarTrabajo(indice: number) {
  this.experienciaLaboral.removeAt(indice);
}

Se podrán dar cuenta que la función que cree se llama borrarTrabajo y que recibe un índice. Este índice es el mismo índice que tiene el grupo en el arreglo y para conseguirlo desde la plantilla hay que modificar nuestro *ngFor de la siguiente manera:



<div *ngFor="let trabajo of experienciaLaboral.controls; let i = index;">

Esa variable i va a contener el índice, lo que le va a decir al método removeAt cual elemento del arreglo tiene que borrar.

En la plantilla el botón para borrar va de la siguiente manera:



<button (click)="borrarTrabajo(i)">Borrar</button>

Y así es como ya se pueden añadir y borrar campos a nuestro formulario de manera dinámica.

El código de este ejemplo se ve muy sencillo, pero la primera vez que lo tuve que hacer se me complicó muchísimo. En la documentación no estaba muy bien explicado como funcionan los FormArray, tampoco como se muestran en la plantilla. Mucho menos había explicaciones sobre como validar todo esto para ver si el formulario estaba correcto antes de mandarlo. Este post sólo es la primera parte de una serie que puede ser enorme y que estaré escribiendo poco a poco.

Aquí abajo les dejo el proyecto final en Glitch y lo estaré usando como base para los siguientes posts.

Espero que este pequeño ejemplo les sirva para entender mejor los formularios reactivos y dinámicos. Son herramientas muy útiles para hacer aplicaciones con funcionalidades más complejas. En la siguiente parte escribiré sobre validación y como crear validaciones dinámicas y como aplicarlas a diferentes partes del formulario.