Introdução às funções sem servidor

Last updated:

Observação: se estiver criando uma função sem servidor como parte de um projeto de desenvolvedor, visite a documentação para desenvolvedores sobre a função sem servidor em projetos. A documentação abaixo é destinada a criação de funções sem servidor fora da plataforma do projeto do desenvolvedor.

APPLICABLE PRODUCTS
  • Content Hub
    • Enterprise

As funções sem servidor oferecem uma forma de escrever código do lado do servidor que interaja com a HubSpot e serviços de terceiros através de APIs.  As APIs que necessitam de autenticação não são seguras para o front-end de um site, já que sias credenciais estariam expostas.

 Funções sem servidor podem atuar como um intermediário entre os serviços de front-end e back-end que exigem autenticação. Com as funções sem servidor, os desenvolvedores não precisam criar e gerenciar novos servidores. As funções sem servidor exigem menos pessoal e, por isso, são mais fáceis de ampliar conforme a empresa cresce. Temos uma visão geral de alto nível do que são as funções sem servidor da HubSpot e como elas funcionam; recomendamos que você a leia antes de seguir este tutorial.

Este tutorial o orientará pela criação da sua primeira função sem servidor.

Você criará uma pasta de função sem servidor, definirá sua pasta de configuração, criará uma função e obterá uma resposta dela.

O que você deve fazer antes de seguir este tutorial:

1. Criar uma pasta de projeto

Abra o arquivo hubspot.config.yml e certifique-se de que defaultPortal está definido para a sua conta de Sandbox para desenvolvedores do CMS ou para uma conta do CMS Hub Enterprise.

No computador, na pasta que contém o arquivo hubspot.config.yml, crie a pasta serverless-tutorial. Esta pasta conterá todos os nossos arquivos, tanto as próprias funções quanto um modelo que usará a função. 

No terminal, execute o comando watch:

hs watch serverless-tutorial serverless-tutorial

Assim, todas as edições nesta pasta resultarão em uploads no Gerenciador de design. Como a pasta ainda não tem conteúdo, este comando simplesmente indicará que o Watcher está pronto e em funcionamento.

2. Crie uma pasta de funções

Dentro da pasta serverless-tutorial, crie a pasta my-first-function.functions.
Similares às pastas de módulos personalizados que terminam em .module, .functions serve para comunicar que a pasta contém funções sem servidor. Os arquivos armazenados nesta pasta não podem ser publicamente acessados.

Como a pasta está vazia no momento, o comando watch que você está executando ainda não criará a pasta no Gerenciador de design.

3. Crie um arquivo de configuração

Crie um novo arquivo na pasta my-first-function.functions e nomeie-o serverless.json. serverless.json é um arquivo obrigatório contido em uma pasta .functions. Ele serve como um arquivo de configuração para funções sem servidor. Definindo o ambiente de tempo de execução, a versão da função sem servidor e os endpoints disponíveis. Para obter um resumo de tudo o que é definido neste arquivo, consulte nossa referência das funções sem servidor.

Se você criou e salvou o arquivo vazio, receberá uma mensagem de erro no terminal informando que não é possível carregar um arquivo serverless.json vazio. Não há problema em ignorar porque você vai adicionar esse código e salvá-lo, o que acionará um novo upload que terá êxito.

Cole o código abaixo em serverless.json:

// place this in your serverless.json file, without this comment { "runtime": "nodejs18.x", "version": "1.0", "endpoints": { } }

Salve o arquivo.

Mantenha este arquivo aberto no editor de código, voltaremos a ele depois.

Como o comando watch está em execução, se você atualizar o gerenciador de design, verá as pastas serverless-tutorial e my-first-function.functions e o novo arquivo serverless.json. 

4. Crie um arquivo de função

Crie um novo arquivo na pasta my-first-function.functions e nomeie-o congratulation.js.

Este é o arquivo de função real, o arquivo que será executado para realizar a tarefa.

Cole o código abaixo:

exports.main = (context, sendResponse) => { // your code called when the function is executed const functionResponse = "Congrats! You've just deployed a Serverless Function." // sendResponse is a callback function you call to send your response. sendResponse({body: functionResponse, statusCode: 200}); };

Esta função sem servidor, quando executada, retorna a string "Parabéns! Você acabou de implantar uma função sem servidor." e o código de status 200, indicando sucesso.

Em um cenário real, é provável que você use APIs ou faça alguns cálculos que não deseja que se tornem públicos. Você retornaria o resultado desses cálculos ou um código de status simples com base no sucesso das transações da API.

Você ainda não terminou; ainda não há maneira de executar esta função.

5. Registre sua função em serverless.json

Abra o arquivo serverless.json novamente. No arquivo, localize o objeto "endpoints".

Atualize o objeto para ficar assim:

// update the endpoints object in your serverless.json to reflect this object. "endpoints": { "congratulation": { "method": "GET", "file": "congratulation.js" } }

O objeto endpoints contém um objeto "congratulation". "congratulation" é o endpoint que você está criando. O nome do endpoint é o que define o caminho que você usará para chamar a função sem servidor.

As funções sem servidor são expostas por meio de um caminho no domínio da sua conta do HubSpot CMS.

Essas funções podem ser acessadas em: 

<https://www.example.com>/_hcms/api/<endpoint-name/path>

No caso do endpoint "congratulation" que você criou, ele será 

<https://www.example.com>/_hcms/api/congratulation

Por isso, geralmente é uma boa ideia nomear o endpoint de forma semelhante ao nome do arquivo de função, e ambos devem ser nomeados com base nas informações contra as quais eles atuam, não na ação tomada contra essas informações. Você deve usar o método HTTP ou outros métodos para comunicar o tipo de ação que está tomando contra essas informações. O parâmetro "method" define o método HTTP ao qual a função dá suporte. Pode ser uma única string ou uma matriz de strings que denotam os métodos aos quais a função dá suporte.

6. Teste sua função

A maneira mais simples de testar uma solicitação GET para sua função sem servidor é acessar a URL do endpoint diretamente no navegador.
https://your-domain.com/_hcms/api/congratulation

Substituindo your-domain.com pelo domínio do seu site da HubSpot.

Você deve ver "Parabéns! Você acabou de implantar uma função sem servidor".

Sucesso! Você conseguiu.

Se você não receber essa resposta, comece do início deste tutorial lendo cuidadosamente cada etapa e verificando o código. É provável que as instruções na etapa 4 ou 5 não tenham sido seguidas corretamente.

Para solicitações mais complexas, é útil usar uma ferramenta como o Postman. O Postman facilita o teste e a depuração de APIs. Um recurso útil para desenvolvedores de front-end é a geração de código, que pode criar um ponto de partida para a chamada javascript da sua função.

7. Crie um modelo básico chamando sua função

Em uma nova janela do terminal, navegue para a pasta serverless-tutorial usando cd.

Execute o seguinte comando no terminal:

hs create template "test-function"

O comando cria um arquivo test-function.html. Abra o arquivo no editor de código.

Acima da tag </head>, adicione <script></script>.

Copie o javascript abaixo:

var requestOptions = { 'method': 'GET', 'headers': { 'Content-Type': 'application/json', } }; fetch("https://www.example.com/_hcms/api/congratulation", requestOptions) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error));

As funções sem servidor do HubSpot oferecem suportam apenas ao tipo de conteúdo application/json. Deixá-lo de fora resultará em um erro de "Tipo de mídia não suportada".

Cole o código JavaScript copiado dentro da tag do script que você criou anteriormente.

Altere www.example.com para o domínio da sua conta.

Salve o arquivo.

8. Crie uma página usando o modelo test-function.html

No Gerenciador de design, localize o arquivo test-function.html (talvez seja necessário atualizar)

Clique com o botão direito no arquivo e escolha "criar página".

Nomeie sua página como "Função de teste". Criar página.

Clique para visualizar em nova janela. 

Inspecione a página clicando com o botão direito em qualquer lugar na página e selecionando "inspecionar".

Se você fez tudo corretamente, verá no console a mensagem de felicitações.

Parabéns, você chamou sua função sem servidor de uma página do HubSpot CMS. 

Embora este tutorial faça você chamar a função sem servidor no nível do modelo, você pode chamá-la em qualquer lugar em que possa adicionar JavaScript em seu site hospedado no CMS. O lugar mais comum para fazer isso é dentro dos módulos personalizados.

Depurar sua função sem servidor

Até aqui, sua função sem servidor deve funcionar corretamente. Quanto mais complexa sua função fica, mais difícil é solucionar os problemas. Assim como o console no navegador é útil para depurar javascript no front-end, você pode obter logs semelhantes para suas funções sem servidor usando hs logs. Confira a referência de desenvolvimento local para obter mais informações sobre este comando.

hs logs <endpoint-name> --follow

O que você fez?

Você criou uma pasta de função sem servidor, com um arquivo de configuração serverless.json e um arquivo de função chamado congratulation.js. Você usou "GET" para obter o texto de felicitação da função sem servidor. Você usou javascript para fazer uma chamada para a função sem servidor a partir de uma página no HubSpot CMS.

Agora que você entende como o arquivo de configuração, o arquivo de função e a pasta .functions se relacionam, a CLI tem um comando útil que você pode usar para criar suas funções mais rápido da próxima vez.

hs create function <function name>

Esta função cria uma pasta .functions, um arquivo serverless.json e um arquivo de função com os nomes fornecidos.

Para onde ir a partir daqui?

Este artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot..