Optimizando el Proceso de Creación de Componentes

Entonces, ¿qué es Slice Machine? Bueno, una slice de Prismic es básicamente una sección repetible y reutilizable de su sitio que está conectada al CMS de Prismic, y Slice Machine es un entorno de desarrollo que facilita la creación de slices.

Así que en esta demostración de charla relámpago, vamos a crear una slice con Slice Machine. Vamos a enviar esa slice a Prismic. Vamos a completar el contenido en esa slice, y luego vamos a enviar esa slice a producción para actualizar nuestro sitio web.

Entonces, no perdamos más tiempo, comencemos agregando una slice a nuestro sitio web existente de Next.js construido con Slice Machine. Como pueden ver aquí, tengo este sitio de restaurante, que tiene un menú y algunas otras secciones aquí. Veamos el archivo de Figma en el que se basa esto. Y como pueden ver, hemos creado slices de cada una de estas partes. Cada una de estas es una slice aquí, y esta es la slice que vamos a agregar hoy.

Es una slice de mapa que básicamente muestra la ubicación del lugar, la dirección y algunos otros elementos con una imagen y un encabezado. Entonces, sigamos adelante, no perdamos tiempo, vayamos a nuestra terminal y creemos esta slice. Voy a ejecutar prismic sm create slice, así nomás. Y me preguntará dónde quiero esta slice. Y digo en mi carpeta de slices, y la llamo location map, así nomás. Genial.

Ahora que hemos creado esa slice, veamos lo que acabamos de hacer con ejecutar ese comando. Aquí en location map, tenemos cuatro archivos. index.js es un componente de react. Aquí tenemos una historia de storybook que ya está construida para nosotros. Aquí en los mocks, tenemos algunos datos de mock que llenarán nuestra historia. Y en el modelo, esto muestra la estructura de datos. Volveremos a esto en un segundo y veremos qué cambios se producen una vez que los editemos en la interfaz de Slice Machine.

Voy a iniciar Slice Machine UI ejecutando Prismic, SM y luego develop. Y esto iniciará un servidor de desarrollo local y pondrá en marcha la interfaz de Slice Machine. Así que volvamos aquí. Y aquí mismo, vemos que location map está junto a todos nuestros otros componentes. Es posible que los reconozcan de nuestro sitio web. Así que sigamos adelante. Deshagámonos de lo que viene por defecto y creemos esto totalmente desde cero. Estoy viendo Figma. Veo que tenemos prácticamente cuatro tipos diferentes que necesitamos construir aquí. Tenemos este encabezado, comencemos con eso. Voy a agregar un campo de texto enriquecido y llamarlo encabezado. Y voy a deseleccionar todo y hacer que sea solo un H2, llamarlo encabezado, así nomás.

Y voy a hacer clic en Guardar. A continuación, tenemos esta dirección. Voy a codificar en duro la ubicación, así que vamos a por la dirección. Voy a hacer un campo de texto enriquecido para la dirección así. Presionar Enter y agregar una etiqueta aquí, así. Y luego vamos a tomar esta imagen. Así que tenemos todos estos diferentes tipos para elegir. Voy a tomar una imagen y etiquetarla como imagen. Así nomás. Genial. Y luego necesitamos una geolocalización porque tenemos un tipo de mapa aquí. Así que GeoPoint nos permitirá hacer eso. Así que voy a obtener la ubicación. Eso es lo que voy a llamar a eso. Voy a entrar aquí, darle una etiqueta. Y para la configuración de burla, voy a elegir la sede de Prismic. Justo ahí. Y ahora guardo este modelo en el sistema de archivos y vamos a ver cómo se ve esto en aquí en nuestro sistema de archivos.

Así que vemos que esto se agregó de inmediato. Nuestros data se ha actualizado. La forma de estos data ha cambiado. Así que ahora podemos empezar a construir nuestro componente ahora que hemos definido la forma tan rápido ya. Así que diríjase aquí a slices, voy a copiar o voy a mostrar fragmentos de código que puedo copiar fácilmente en mi componente. Haga clic en copiar código en este encabezado y vaya a mi componente de react. Borro lo que hay aquí y voy a pegar eso ahí. Ese es mi encabezado. Aquí está mi dirección y los estilizaré en un minuto. Voy a tomar mi imagen, copiar código, veo que estoy pegando esa imagen. Y luego aquí para mi ubicación, simplemente voy a pegar eso y en realidad es un objeto que tiene latitud y longitud. Voy a mostrar la latitud y vamos a verlo en storybook.

Tengo storybook funcionando. Ya está conectado. Vamos a ver nuestro mapa de ubicación y boom, así de fácil. Tenemos nuestro título, nuestra dirección, nuestra imagen y nuestra latitud. Todo es solo ficticio por defecto, así que podemos mejorarlo con el tiempo. Pero por ahora esto se ve bien.

Ahora voy a darle estilo rápidamente. Veamos qué podemos hacer. Muy bien, hemos avanzado hasta el estilo. He agregado algunas clases. También he traído este componente de mapa que hice que espera este objeto de ubicación. Y también codifiqué en duro este texto de ubicación y solo hicimos algunas reestructuraciones y estilos. Y ahora nuestro componente se ve mucho, mucho mejor, así de fácil.

Ahora podemos tomar una captura de pantalla que se puede usar para nuestro editor. Tomaremos una captura de pantalla así. Y así nuestros editores pueden usar eso en Prismic. Y ahí tenemos nuestra captura de pantalla que se ve genial. Ahora podemos seguir adelante y enviar nuestro slice a Prismic para que podamos usarlo en el CMS. Y luego también voy a enviar mi código que hicimos con Slice Machine a GitHub. Para que Vercel pueda reconstruir mi aplicación de Next JS. Voy a decir agregar slice de mapa de ubicación, git push. Y ahora que se reconstruye, voy a ir a mi repositorio de Prismic y voy a ir a mis tipos personalizados y agregar este nuevo slice como opción para que mis editores lo usen.

Así que vemos aquí en slices compartidos, estos son los otros slices que han podido usar. Y ahora tenemos nuestro nuevo mapa de ubicación con esa captura de pantalla. Podemos agregar eso a nuestros tipos personalizados y guardar. Y ahora nuestros editores saben exactamente lo que están obteniendo cuando ingresan a editar la página de inicio. Así que voy a entrar a la página de inicio y puedo agregar este nuevo slice en cualquier lugar entre los otros slices, voy a ir hasta el final ahora, porque ahí es donde va este. Y voy a desplazarme y ahí está nuestro mapa de ubicación. Así que vamos a completarlo con algo de contenido. Tengo un título aquí.

Así que una gran historia comienza con una gran cena. Y tenemos esta dirección. Ya tengo una imagen cargada que puedo elegir. Y tengo una latitud y longitud pegadas aquí que vamos a usar. Boom, justo ahí. Ahora voy a presionar guardar. Y lo que puedo hacer es que Prismic tiene una excelente función de vista previa. Así que podría hacer clic en producción, pero por el bien de esto, vamos a saltar a la publicación, pero podría probarlo primero y asegurarme de que se vea exactamente como quiero. Puedo publicarlo ahora o más tarde. Voy a publicarlo ahora, presionando publicar y boom, así de fácil. Va a desencadenar una reconstrucción y vamos a ver cómo se ve cuando estemos listos. Una vez que hacemos clic en publicar, el webhook hace que Versell reconstruya nuestra página y aquí en la parte inferior, genial, se ve muy bien. Ahí están nuestros componentes. Así que en el tiempo de esta charla, creamos un componente React con algunos tipos diferentes ya vinculados al CMS de Prismic con una historia de Storybook para facilitar el desarrollo y una vista visual previa para que nuestros editores sepan qué componente están eligiendo. Todos nuestros cambios se respaldaron en Git y todo esto me permitió lanzar un constructor de páginas. No solo una página, sino un constructor de páginas. Me encantaría que pruebes Prismic Slice Machine. Ve a slicemachine.dev. Haznos saber qué piensas. Muchas gracias.