Mustache

Entendendo a Notação Mustache em APIs

A notação Mustache desempenha um papel fundamental no desenvolvimento de APIs ao permitir a separação clara entre a lógica de negócios e a apresentação de dados. Em um contexto de API, onde os dados são frequentemente transmitidos entre servidores e clientes, a notação Mustache oferece uma maneira simples e eficaz de estruturar e exibir esses dados de forma dinâmica.

O que é Mustache?

No caso do Floui a notação Mustache é amplamente utilizada para manipular e exibir valores através de objetos Javascript que são transferidos entre conectores dentro do fluxo.

Utilizando notações Mustache na plataforma Floui.

No Floui, as cargas de saída relacionados a um determinado componente podem ser acessadas por msg.payload (saiba mais sobre a Anatomia de um conector Floui).

Neste contexto, os campos geralmente são referenciados usando essa sintaxe a partir do objeto da mensagem que trafega pelo fluxo. Por exemplo, se quisermos utilizar o valor de um campo específico na mensagem, utilizamos algo semelhante à notação {{msg.payload}}

Sintaxe básica

1. valores de variáveis

   As variáveis são representadas entre chaves duplas {{ }} e sem espaços internos.

   • Exemplo: {{nome}}

   No contexto de uma API, nome seria uma variável que seria substituída pelo valor correspondente quando o template fosse renderizado.

2. utilizando com HTML

   Para evitar a interpretação de HTML nas variáveis, você pode usar chaves triplas {{{ }}}.

   • Exemplo: {{{conteúdoHTML}}}

   Isso é útil para evitar ataques de injeção de código (XSS), já que o conteúdo HTML será tratado como texto simples.

3. criando seção:

   As seções são usadas para lidar com listas ou estruturas condicionais.

   • {{# secao }} indica o início de uma seção.

   • {{/ secao }} indica o final de uma seção.

No exemplo a seguir, produtos é uma lista de objetos e o template dentro da seção será repetido para cada objeto na lista.

var produtos = [
  {
    descrição: "Blusa feminina tam M",
    cores: ["Azul", "Preta", "Branca", "Ciano"]
  },
  {
    descrição: "Shorts feminino tam P",
    cores: ["Azul", "Preta", "Branca", "Ciano"]
  }
];

{{#produtos}}
  {{descrição}}
  {{#cores}}
    {{.}}
  {{/cores}}
{{/produtos}}

O ponto na linha 15 dentro do bloco {{#cores}} representa o contexto atual da iteração. Neste caso, ele se refere a cada elemento individual no array de cores.

Acessando um atributo

Considere o seguinte objeto JSON:

msg.payload

{
    name:'Floui',
    site: 'https://floui.io/',
    app: 'https://app.floui.io/', 
    since : [2021, 2022, 2023]   
}

Agora, para acessar o atributo que contém uma string com o link para o site da plataforma, precisamos usar {{msg.payload.app}} ou ainda, podemos acessar os demais atríbutos alterando apenas o caminho:

• {{msg.payload.app}} -> https://app.floui.io/
• {{msg.payload.name}} -> Floui

Helpers

Helper	Função	Exemplo de uso
var	Substitui a expressão por um valor de variável cadastrada no Floui	{{var nome_da_variavel}}
json	Substitui a expressão por um objeto Javascript convertido em JSON (String)	{{json msg.payload}}
to_float	Substitui a expressão pelo valor já convertido para float	{{to_float msg.price}}
to_int	Substitui a expressão pelo valor já convertido para integer	{{to_int msg.payload.ID}}
to_base64	Substitui a expressão pelo valor já convertido para base64	{{to_base64 msg.response.data}}
to_slug	Substitui a expressão pelo valor convertido em um Slug, substituindo caracteres especiais por traços.	uma-frase-em-forma-de-slug
var timestamp	Substitui a expressão pelo valor de timestamp do momento da execução do Flow	{{var timestamp}}
var workspace_url	Substitui a expressão pelo valor da URL pública do workspace	{{var workspace_url}}
var current_time	Substitui a expressão pelo horário da execução do fluxo	{{var current_time}}
var current_datetime	Substitui a expressão pela data e horário da execução do fluxo	{{var current_datetime}}
var current_date	Substitui a expressão pela data da execução do fluxo	{{var current_date}}