En los dos posts anteriores de esta serie, hemos trazado una hoja de ruta para generar mediante programación sitios web simples y permitirles a los usuarios de tu plataforma SaaS editar esos sitios en un entorno completamente white label.
También hemos hablado de la capacidad de empujar la información almacenada en tu aplicación a un sitio web como contenido. Esta visión general de las capacidades de Duda se centró en datos simples como números de teléfono, direcciones de email, horarios de trabajo, etc.
Mientras que esa información a nivel de negocio es obviamente importante para cualquier sitio web, los productos SaaS a menudo contienen estructuras de datos más complejas que necesitan ser expuestas al público. Este es el tema que trataremos ahora en este tercer y último post del blog de nuestra serie.
En Duda, las estructuras de datos complejas se pueden integrar a través de colecciones.
Una colección consiste en una lista de objetos similares (por ejemplo, miembros del personal, productos, eventos, noticias, etc.). Cada objeto de la lista consiste en un grupo de propiedades iguales.
En el caso de los miembros del personal, puede tratarse del nombre, la biografía o una foto de perfil. En el caso de eventos, podría ser una fecha, hora, descripción y URL para comprar ingresos.
A diferencia de los datos a nivel de negocio de los que hablamos en posts anteriores, los datos de las colecciones pueden ser enviados a Duda desde una fuente de datos pública en lugar de ser enviados a través de Duda API endpoint.
Duda puede comprobar los cambios en las colecciones de forma automática y actualizar el sitio web en el aire para asegurar que el contenido se mantiene sincronizado.
Los datos de las colecciones pueden conectarse a los widgets de la misma manera que conectamos nuestros datos a nivel empresarial. Sin embargo, debido a que los datos de las colecciones son una lista de elementos en lugar de una sola pieza de datos discretos, solo ciertos widgets son capaces de mostrar esos datos en una página.
Estos tipos de widgets incluyen el widget de lista, el widget de galería de fotos y el widget de acordeón, entre otros. Una vez conectada una colección, podrás conectar las propiedades individuales de los elementos para mostrarlos dentro del diseño del widget.
Junto con los widgets, las colecciones también pueden conectarse a páginas dinámicas. Con las páginas dinámicas, Duda puede generar una página completa por cada elemento de una colección.
Los ejemplos pueden incluir un directorio de personal o un catálogo de productos. Las páginas dinámicas pueden hacer que la creación de docenas o incluso cientos de páginas sea muy fácil.
Estas páginas se mantendrán sincronizadas con los datos de la colección, por lo que la actualización o eliminación de un elemento de la colección actualizará o eliminará su respectiva página.
¿Recuerdas que en la primera parte de esta serie conectamos los widgets de una plantilla con los datos del marcador de posición almacenados en la biblioteca de contenidos?
Al proporcionar datos de marcador de posición, pudimos ver algunos contenidos que ayudan a tomar decisiones de diseño. Cuando se creaba un nuevo sitio basado en la plantilla, podíamos actualizar fácilmente los datos almacenados en la biblioteca de contenidos.
Cualquier widget conectado mostraría entonces la nueva información a través de las conexiones.
Al planificar una integración de SaaS, queremos hacer algo similar con colecciones. Dentro de la plantilla, especificaremos una URL a los datos del marcador de posición.
Podemos utilizar este marcador de posición para conectar nuestros widgets y diseñar páginas dinámicas. En el momento de la creación del sitio, actualizaremos el punto final de la colección para que apunte a los datos reales del usuario.
Mientras la colección esté formada por los mismos nombres de propiedad que la colección del marcador de posición, todos los widgets y las páginas dinámicas conectadas a la colección se actualizarán también.
Para crear una nueva colección en una plantilla, selecciona contenido en el menú de la izquierda. Selecciona collections y, a continuación, haz clic en el botón Nueva colección.
Se te presentará la opción de seleccionar el tipo de colección que deseas crear. Duda tiene la opción de crear una colección interna, donde los datos se gestionan dentro del editor, o una colección externa, en la cual los datos se gestionan desde una fuente externa.
Para nuestros propósitos, queremos conectarnos directamente a los datos de una plataforma SaaS. Así que nuestra colección debe estar conectada a una "Base de datos externa".
Recuerda que nos estamos conectando a una base de datos solo en concepto. Duda no hará llamadas directamente a través de una conexión de base de datos. Los datos reales deben estar disponibles a través de una URL pública.
Antes de proceder a la creación de la colección, tenemos que hablar del formato de los datos. Vamos a necesitar una URL de datos a la que nos conectaremos. La fase de diseño de la plantilla es un buen momento para reunir al diseñador y al desarrollador para hablar sobre qué información del producto SaaS debe estar disponible en el sitio web.
El resultado de esta reunión debería ser un archivo JSON estático al que el desarrollador pueda hacer referencia y que el diseñador pueda utilizar como datos de marcador de posición dentro de la plantilla. Lo importante es que los datos reales del cliente coincidan con el esquema del JSON del marcador de posición.
A modo de ejemplo, vamos a utilizar una plataforma SaaS ficticia para músicos. Uno de los tipos de datos recogidos en nuestro producto es la información sobre las próximas giras de los artistas.
Supongamos que nuestra hipotética empresa de SaaS reúne a un diseñador y a un desarrollador para comenzar a planificar la integración de Duda y se les ocurre la siguiente estructura JSON.
Con una estructura de datos acordada, podemos volver a nuestra plantilla y terminar de crear nuestra colección. De vuelta en el editor hemos navegado a la página de la nueva colección. Aquí vamos a elegir la opción “External Database” para conectar una colección al archivo JSON que hemos acordado.
El archivo debe ser subido a un servidor web, o puedes usar algo como el servicio S3 de Amazon. Cualquier lugar en el que puedas obtener una URL y ver la salida JSON, debería funcionar.
(Nota: Esta URL debe devolver datos con un valor de encabezado Content-Type de "application/json", ya que otros tipos de contenido darán lugar a un error al crear la colección).
En la pantalla de la nueva colección, introduce la URL de tu archivo JSON en el campo "Endpoint URL". También podrás expandir una opción para definir la ruta real de los datos dentro del punto final.
Si volvemos y hacemos referencia a nuestro JSON, veremos que la lista de actuaciones está en realidad dentro de la propiedad "performances", que a su vez está dentro de la propiedad "tour". En este caso, introduciríamos "tour.performances", como la ruta de acceso a nuestros elementos.
Una vez que hayamos configurado nuestro endpoint, podemos hacer clic en el botón "Fetch Collection" para confirmar que todo funciona correctamente. Si Duda es capaz de encontrar una colección, el primer elemento de la lista se mostrará como una vista previa. Asegúrate de confirmar que los datos sean correctos antes de continuar.
Debajo de la vista previa, verás una opción para elegir qué propiedad de tu colección quieres utilizar como URL del elemento de la página. La propiedad que elijas se utilizará en la URL de las páginas dinámicas.
En nuestro ejemplo del tour, podríamos elegir la propiedad "id" para generar rutas similares a "/tour/1", "tour/2", etc. (más adelante veremos cómo configurar la parte "tour" de la URL).
La siguiente pantalla nos permite elegir el tipo de dato para cada propiedad de nuestra colección. Este paso de configuración le indica al editor de Duda qué propiedades pueden conectarse a qué widgets.
Por ejemplo, configurando la propiedad "dirección" en la colección para que sea un tipo de dato de "ubicación", hará que esta propiedad esté disponible cuando se conecte una actuación a un widget de mapa.
Actualiza cada propiedad de la colección con el tipo de datos correcto y haz clic en "done".
¡Felicitaciones! Acabamos de configurar nuestra primera colección.
Ahora que hemos importado algunos datos, vamos a ver cómo podemos crear algunas páginas nuevas basadas en la información.
Al vincular nuestra colección a las páginas dinámicas, nos aseguraremos de que la información en el sitio web esté siempre sincronizada con la información en la plataforma SaaS. No tendremos que preocuparnos nunca de que los visitantes del sitio web reciban datos desactualizados.
La creación de una página dinámica es similar a la creación de una página estática en un sitio web de Duda. Selecciona "páginas" y luego haz clic en "nueva página" para ver el modo de la nueva página.
Este modo presenta algunos diseños de uso común listos para ser rellenados con datos.
Después de añadir una página dinámica, el editor la colocará en "modo dinámico". Esto significa que cualquier cambio que hagas en esta página se reflejará en todas las demás páginas dinámicas.
Aquí eres libre de hacer ajustes de diseño al igual que en cualquier otra página de Duda. También puede conectar los datos a cualquiera de los widgets de la página utilizando los mismos pasos que utilizamos para conectar los datos empresariales.
Sin embargo, si seleccionas una propiedad de una colección, el valor cambiará para cada página generada por la colección. Esto nos permite crear múltiples páginas con el mismo diseño, pero con diferente contenido.
Los links a tus nuevas páginas pueden hacerse conectando con un widget compatible con la colección, como el widget de lista, o proporcionando links directamente en tu navegación.
Solo tienes que volver a la pestaña "páginas" y hacer clic en el icono del engranaje junto a tu página dinámica. El menú desplegable tiene una opción para ocultar o mostrar las páginas en la navegación.
Te daremos la opción de añadir las páginas dinámicas como una subnavegación a una página existente. También podrás elegir qué propiedad de tu colección debe utilizarse como texto de navegación.
Ahora que la plantilla está actualizada para incluir páginas dinámicas. Podemos volver a centrar nuestra atención en el flujo de creación del sitio web. Como repaso aquí está la lista de pasos de los artículos anteriores.
Mientras que el diseñador ha trabajado duro en la creación de la plantilla, nuestro desarrollador ha tenido tiempo de desenvolver los datos en una URL pública. Asumiendo que todo está listo para funcionar, vamos a añadir una llamada adicional a la lista para actualizar el punto final de la colección para que apunte a los datos en vivo.
Cada sitio web tendrá una URL que proporciona datos sobre una sola cuenta de tu producto. El formato depende de ti. Podría ser a través de parámetros de ruta como "/cliente/1/nombre_de_la_colección". También puedes utilizar un parámetro de consulta para filtrar los elementos como "/nombre_de_colección?cliente=1". solo tiene que estar disponible a través de una petición GET estándar.
Nota: Actualizar una colección con un nuevo punto final. Siempre debes proporcionar valores para cualquier propiedad existente, incluso si el nuevo valor es igual al existente. Si no se envían valores para propiedades como page_item_url_field, collection_data_json_path, etc. resultará en la eliminación del valor existente.
Ahora tenemos todas las piezas para crear instantáneamente un sitio web bonito y útil. Aunque son muchos pasos para escribir, en la práctica, solo necesitas implementar un puñado de llamadas a la API.
También es fácil que se trabaje simultáneamente en diferentes caminos de tu implementación. Tu diseñador puede trabajar en las plantillas mientras un desarrollador se pone a trabajar en la superficie de los datos para tus colecciones.
Otro diseñador o desarrollador puede trabajar en el white label. Y, por último, se podría asignar a alguien la implementación de la interfaz de usuario y las llamadas a la API dentro de la propia aplicación SaaS. Al paralelizar el trabajo, se puede realizar una implementación muy rápidamente.
He aquí una lista completa de los pasos, divididos en caminos de trabajo separados:
Esta serie proporciona una hoja de ruta estándar para crear sitios web totalmente funcionales mediante programación a través de tu aplicación SaaS, pero hay espacio para la personalización. ¿Quieres que los sitios se publiquen inmediatamente o quieres que tus usuarios los personalicen primero? ¿Vas a cobrarles a los usuarios antes de que accedan al editor, o quieres una experiencia de "probar antes de comprar" en la que la transacción no se produce hasta que el usuario intente publicar el sitio? ¿Tienes funciones interactivas que te gustaría que vinieran preconfiguradas en los nuevos sitios a través de un widget personalizado? Hay mucho que pensar, pero por suerte, Duda puede proporcionarte una gestión de cuenta dedicada para ayudarte en cada paso y decisión.
¿Necesitas un poco de ayuda? Duda también tiene un canal de cumplimiento de los profesionales de la web que pueden ayudar a diseñar y construir tus plantillas.
Si estás interesado en ofrecer sitios web a través de tu plataforma SaaS, ¡Entra en contacto con nuestro equipo hoy mismo!
Agora temos todas as peças para criar instantaneamente um site bonito e de alta performance. Embora sejam muitas etapas para descrever, na prática, você só precisa implementar algumas chamadas de API. Também é fácil trabalhar em diferentes frentes de implementação simultaneamente. Seu time de designers pode trabalhar em modelos enquanto desenvolvedores começam a trabalhar na camada de dados das suas coleções. Outros profissionais de design e desenvolvimento podem estar trabalhando em seu White Label. E, finalmente, alguém pode estar implementando as chamadas de UI e API dentro da própria plataforma SaaS. Ao distribuir e organizar tarefas, uma implementação poderá acontecer muito rapidamente.
Aqui está uma lista completa das etapas, divididas por tópicos organizados:
Esta serie proporciona una hoja de ruta estándar para crear sitios web totalmente funcionales mediante programación a través de tu aplicación SaaS, pero hay espacio para la personalización.
¿Quieres que los sitios se publiquen inmediatamente o quieres que tus usuarios los personalicen primero?
¿Vas a cobrarles a los usuarios antes de que accedan al editor, o quieres una experiencia de "probar antes de comprar" en la que la transacción no se produce hasta que el usuario intente publicar el sitio?
¿Tienes funciones interactivas que te gustaría que vinieran preconfiguradas en los nuevos sitios a través de un widget personalizado?
Hay mucho que pensar, pero por suerte, Duda puede proporcionarte una gestión de cuenta dedicada para ayudarte en cada paso y decisión.
¿Necesitas un poco de ayuda? Duda también tiene un canal de cumplimiento de los profesionales de la web que pueden ayudar a diseñar y construir tus plantillas.
Si estás interesado en ofrecer sitios web a través de tu plataforma SaaS, ¡Entra en contacto con nuestro equipo hoy mismo!
