Webveloper
Editor de páginas web sin código · ingeniero frontend en un equipo grande y distribuido · 2019 a 2021
Un editor de páginas web sin código para negocios pequeños, como un restaurante, un dentista o un gimnasio. Yo era ingeniero frontend en un equipo grande y distribuido, y construí las pantallas donde un negocio llena sus secciones.
- El problema
- Un negocio pequeño necesita un sitio web y no sabe escribir código.
- Lo que hice
- Construí las pantallas de edición de Ubicación y productos, y la biblioteca de medios.
- El resultado
- Un editor de páginas web sin código con el que pequeños negocios publicaron sus sitios.
Un negocio pequeño necesita un sitio web y no sabe escribir código
Un restaurante, un dentista o un gimnasio necesitan un sitio web de verdad, y ninguno va a abrir un editor de código para conseguirlo. El producto le hacía preguntas al negocio sobre sí mismo, sus colores, sus horarios, su ubicación, sus precios, sus fotos, y convertía las respuestas en un sitio terminado. Desde ahí el dueño editaba ese sitio en el navegador, agregando secciones de un menú de opciones predefinidas, sin tocar nunca un archivo.
Construí las pantallas desde las que un negocio edita su sitio
Lo mío eran las pantallas de edición: los paneles donde un negocio llena un tipo de sección completo, Ubicación y productos físicos entre ellos, más la biblioteca de medios que hizo reutilizable cualquier imagen subida en todo el sitio. La arquitectura de la plataforma estaba definida antes de mí y trabajé dentro de ella. Tres decisiones de ingeniería dentro de ese trabajo fueron mías.
Construí las pantallas de edición de Ubicación y productos.
Cada sitio generado se guardaba como un solo archivo de ajustes: páginas, y cada página una lista de secciones. Cada sección que se podía agregar necesitaba una pantalla para llenarla. Construí dos de esas pantallas: Ubicación, donde un negocio escribe su dirección y sus datos de contacto, y productos físicos, donde escribe el nombre, el precio, las fotos y la descripción de un producto para que el sitio pueda venderlo. El popup de horarios y el renderizado público de ambas fueron trabajo de colegas.
Construí la biblioteca de medios que hizo reutilizable cada imagen.
Antes, una foto quedaba atada al lugar donde se subió, así que un negocio volvía a subir el mismo logo para la cabecera, la galería y una tarjeta de producto. Construí la pantalla de la biblioteca: el único lugar donde un negocio elige una imagen que ya subió y la reutiliza donde quiera. El archivo de ajustes guardado nunca tuvo enlaces a fotos, solo códigos cortos que más abajo se convertían en imágenes reales. La subida de archivos por debajo fue trabajo de un colega.
Entregué cada sección con sus casos límite resueltos.
Una sección renderiza lo que el negocio escribió, y los negocios escriben cualquier cosa. Ubicación se rompía si el negocio dejaba vacía su zona de servicio. El autocompletado de direcciones fallaba en ciertos estados. Un video de producto no se reproducía. Una palabra larga en el título de una sección rompía su diseño. Después del lanzamiento arreglé cada forma en que el contenido real rompía estas pantallas, y desde entonces el estado vacío, el texto largo y el campo faltante salían resueltos con la sección.
Lo que construí dentro del editor
El editor salió a producción y les permitió a dueños no técnicos manejar sus propios sitios, con más de cuarenta sitios web de negocios reales construidos y publicados desde ahí. Mi aporte es concreto: las pantallas donde un negocio llena tipos de sección completos, Ubicación y productos físicos entre ellos, y la biblioteca de medios que hizo reutilizable cualquier imagen subida. Lo más difícil fue encajar una sección nueva en un producto en vivo sin cambiarle nada a los negocios que ya lo usaban.
Puedo sumar a un producto en vivo del que ya dependen clientes reales sin romper lo que hay, y después arreglar lo que el contenido real le hace una vez publicado.