Nos dois posts anteriores desta série, apresentamos um roteiro para gerar sites de maneira programática e permitir que os usuários da sua plataforma SaaS editem esses sites em um ambiente totalmente white label. Também mencionamos a capacidade de enviar informações armazenadas em seu aplicativo para um site em forma de conteúdo.
Essas informações - que incluem números de telefone, endereços de e-mail, horário comercial, entre outras - podem ser pensadas como um conjunto simples de dados. Apesar de obviamente relevantes para qualquer site, sabemos que as estruturas de dados de produtos SaaS vão além disso e, apesar de complexas, também precisam ser expostas ao público. Este é o assunto que abordaremos agora neste terceiro, e último, post da série.
Na Duda, estruturas de dados complexas podem ser integradas por meio de coleções. Uma coleção consiste em uma lista de dados que possuem estrutura semelhante (por exemplo, membros da equipe, produtos, eventos, notícias, etc.). Cada objeto da lista consiste em um grupo com as mesmas propriedades. Para os membros da equipe, pode ser algo como um nome, biografia, foto de perfil. Para eventos, pode ser uma data, hora, descrição e um endpoint para comprar ingressos. Diferente dos dados de negócios, sobre os quais falamos em posts anteriores, esses dados das Coleções podem ser puxados para a Duda a partir de uma fonte de dados pública, em vez de enviados diretamente por meio de um endpoint da API. A plataforma Duda pode verificar as alterações nas coleções automaticamente e atualizar o site ao vivo para garantir que o conteúdo permaneça sincronizado.
Os dados de Coleções podem ser conectados a widgets da mesma forma que
conectamos nossos dados de negócio. No entanto, como as coleções são uma lista de dados, e não somente uma informação isolada, apenas alguns widgets são capazes de exibir esses mesmos dados em uma página. Alguns exemplos são: widget de lista, widget de galeria de fotos e o widget de acordeão. Depois que uma coleção for conectada, você poderá conectar as propriedades individuais dos itens, exibindo no layout do widget em questão.
Junto com os widgets, as coleções também podem ser conectadas a páginas dinâmicas. Com Dynamic Pages, a Duda pode gerar uma página inteira por item em uma coleção. Alguns exemplos seriam diretórios (listas de receitas, equipes, imobiliárias, lojas, etc.) ou até mesmo um catálogo de produtos. As Dynamic Pages podem criar dezenas, ou até centenas, de páginas em um piscar de olhos. Essas páginas permanecerão sincronizadas com os dados da coleção, portanto, atualizar ou excluir um item da coleção irá atualizar ou excluir sua respectiva página.
Você deve lembrar que no primeiro post dessa série conectamos os widgets em um template aos placeholders de dados armazenados na biblioteca de conteúdo. Ao conectar dados aos placeholders, percebemos algum conteúdo para ajudar na tomada de decisões de design. Quando um novo site baseado no modelo for criado, será possível atualizar facilmente os dados armazenados na biblioteca de conteúdo. Quaisquer widgets conectados exibem as novas informações por meio dessas conexões.
Quando executamos uma integração SaaS, buscamos fazer algo semelhante com as coleções. Dentro do template, iremos especificar uma URL endpoint para os dados do placeholder. Podemos usar este placeholder para conectar nossos widgets e criar páginas dinâmicas. No momento da criação do site, atualizaremos o endpoint de coleções para apontar para dados reais do usuário. Contanto que a coleção consista nos mesmos nomes de propriedade da coleção do placeholder, todos os widgets e páginas dinâmicas conectadas à coleção também serão atualizados.
Para criar uma nova coleção em um template, selecione “Conteúdo” no menu à esquerda. Selecione “Coleções”
e clique no botão “Nova coleção”. Você terá a opção de selecionar o tipo de coleção que deseja criar. A Duda tem a opção de criar uma
coleção interna,
por meio da funcionalidades Internal Collections, na qual os dados são gerenciados diretamente no editor, ou uma
coleção externa, em que o gerenciamento é feito desde uma base de dados externa.
No caso que estamos usando, queremos nos conectar diretamente aos dados de uma plataforma SaaS. Portanto, nossa coleção deve estar conectada a um “Banco de Dados Externo”. Lembre-se que estamos nos conectando a um banco de dados apenas no conceito. A Duda não fará chamadas diretamente por meio de uma conexão de banco de dados. Os dados reais precisam ser disponibilizados por meio de um endpoint público.
Antes de prosseguirmos com a criação da coleção, precisamos falar sobre o formato dos dados. Vamos precisar de um endpoint de dados a qual nos conectaremos. A fase de design do template é um bom momento para reunir um designer e um desenvolvedor, e conversar sobre quais informações do produto SaaS devem ser disponibilizadas no site. O output desta reunião deve ser um arquivo JSON estático ao qual o desenvolvedor possa fazer referência e o designer possa usar como placeholder de dados dentro do template. O importante é que os eventuais dados reais do cliente corresponderão ao esquema do placeholder do JSON.
Para fins de ilustração, vamos usar uma plataforma SaaS fictícia para músicos. Um dos tipos de dados coletados em nosso produto são as próximas informações de turnês dos artistas. Digamos que nossa empresa de SaaS hipotética reúna um designer e desenvolvedor para uma reunião e comece a planejar a integração da Duda, apresentando a seguinte estrutura JSON:
Com uma estrutura de dados acordada, podemos retornar ao nosso template e terminar a criação da nossa coleção. De volta ao editor, navegamos para a tela para criar uma nova coleção. Aqui, vamos escolher a opção “Banco de dados externo” para conectar uma coleção ao arquivo JSON que combinamos. O arquivo deve ser carregado em um servidor web ou você pode usar algo similar ao serviço S3 da Amazon. Em qualquer lugar, você pode pegar um endpoint e ver a saída JSON funcionar. (Observação: este endpoint deve retornar dados com um valor de cabeçalho Content-Type de “application / json”, outros tipos resultarão em um erro ao criar a coleção.)
Na tela da nova coleção, insira o Endpoint do seu arquivo JSON no campo “Endpoint URL”. Você também poderá expandir uma opção para definir o caminho real para os dados dentro da endpoint. Se voltarmos e fizermos referência ao nosso JSON, veremos que a lista de performances está na verdade dentro de uma propriedade “performances”, que por sua vez está dentro de uma propriedade “tour”. Nesse caso, inseriríamos “tour.performances”, como o caminho para nossos itens.
Depois de configurar nosso endpoint, podemos clicar no botão “Confirmar coleção” para confirmar se tudo está funcionando corretamente. Se a Duda conseguir encontrar uma coleção, o primeiro item da lista será exibido como uma prévia. Certifique-se de confirmar se os dados estão corretos antes de continuar.
Abaixo da visualização, você verá uma opção para escolher qual propriedade em sua coleção deseja usar como um endpoint de item de página. Qualquer propriedade que você escolher será usada no endpoint das páginas dinâmicas. Em nosso exemplo anterior do “tour”, poderíamos escolher a propriedade “id” para gerar caminhos semelhantes a “/tour/1”, “tour/2”, etc. (veremos como configurar a parte “tour” do endpoint um pouco mais tarde).
A próxima tela permite escolher o tipo de dado de cada propriedade da nossa coleção. Esta etapa de configuração informa ao editor da Duda quais propriedades podem se conectar a quais widgets. Por exemplo, configurar a propriedade “endereço” na coleção para ser um tipo de dados de “localização” tornará esta propriedade disponível ao conectar widgets de mapa e performance. Atualize as devidas propriedades na coleção, para os tipos de dados corretos, e clique em “Concluir”.
Parabéns! Acabamos de configurar nossa primeira coleção.
Agora que importamos alguns dados, vamos ver como podemos criar algumas novas páginas baseadas nessas informações. Vinculando a nossa coleção com páginas dinâmicas, garantimos que as informações do site estejam sempre sincronizadas com as informações da plataforma SaaS. Nunca teremos que nos preocupar com os visitantes do site recebendo conteúdo desatualizado.
Criar uma página dinâmica é semelhante a criar uma página estática em um site Duda. Selecione “páginas” e clique em “nova página” para ver o novo formato da página. Esta opção apresenta alguns layouts comumente usados, prontos para serem preenchidos por dados.
Depois de adicionar uma página dinâmica, seu editor entrará em “modo dinâmico”. Isso significa que todas as alterações feitas nesta página serão refletidas em todas as outras páginas dinâmicas. Você está livre para fazer ajustes de design como em qualquer outra página da Duda. Você também pode conectar dados a qualquer um dos widgets na página usando as mesmas etapas que usamos para conectar os dados de negócios. Se você selecionar uma propriedade de uma coleção, no entanto, o valor será alterado para cada página gerada pela coleção. Isso nos permite criar várias páginas com o mesmo design, mas com conteúdos totalmente diferentes.
O link para suas novas páginas pode ser feito conectando-se a um widget compatível com a coleção, como o widget de lista, ou fornecendo links diretamente em sua navegação. Basta voltar à opção "páginas" e clicar no ícone de configurações ao lado de sua página dinâmica. O menu do Pop-up tem uma opção para ocultar ou mostrar as páginas na navegação. Daremos a você a opção de adicionar as páginas dinâmicas como uma subnavegação a uma página existente. Você também poderá escolher qual propriedade em sua coleção deve ser usada como o texto de navegação.
Agora que o modelo está atualizado para incluir páginas dinâmicas, podemos voltar nossa atenção para o fluxo de criação do site. Como revisão, aqui está a lista de etapas dos artigos anteriores:
Enquanto a equipe de design trabalhava na criação do template, nosso time de desenvolvimento provavelmente teve tempo para exibir os dados em um endpoint público. Supondo que tudo esteja pronto, vamos adicionar uma chamada adicional à lista para
atualizar o endpoint de coleção, apontando para dados em tempo real. Cada site terá um endpoint que fornece dados em uma única conta em seu produto. O formato é com você. Pode ser por meio de parâmetros de caminho, como “/client/1/collection_name”. Você também pode usar um parâmetro de consulta para filtrar os itens como em “/collection_name? Client=1”. Ele só precisa estar disponível em uma solicitação GET padrão.
Observação: Ao atualizar uma coleção com um novo endpoint, você sempre deve fornecer valores para qualquer propriedade existente, mesmo se o novo valor for igual ao valor existente. A falha no envio de valores para propriedades como page_item_url_field, collection_data_json_path, etc. apagará o valor existente.
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 série de posts apresenta um roteiro padrão para a criação de sites totalmente funcionais de forma programática por meio da sua solução SaaS, mas há espaço para personalização. Você deseja que os sites sejam publicados imediatamente ou deseja que seus usuários os personalizem primeiro? Você vai cobrar dos usuários antes que eles acessem o editor ou quer uma experiência de teste antes da compra, em que a transação não ocorre até que o usuário tente publicar o site? Você tem recursos interativos que gostaria que viessem pré-configurados nos novos sites por meio de um
widget personalizado? Há muito no que pensar e a Duda pode fornecer um time dedicado para te ajudar em cada etapa e decisão.
Caso, além desse time, você precise de uma ajudinha extra em serviços, a Duda também tem um
canal fulfillment com parceiros especialistas para te apoiar com seu design e construção de templates.
Se você tem interesse em oferecer websites por meio da sua plataforma SaaS,
entre em contato com nosso time hoje mesmo.
