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

​

Pré-requisitos

• Uma conta _ Content Hub Enterprise_, ou uma conta de ambiente de testes de desenvolvedor do CMS.
• O CLI da HubSpot (recomenda-se a versão mais recente), que precisará ser instalada e autenticada com a conta que você está usando. Para verificar quais contas são autenticadas, você pode executar hs accounts list. Saiba mais sobre introdução ao desenvolvimento local.

​

1. Criar um projeto localmente

• No terminal, navegue para o diretório onde você armazenará seu projeto usando o comando cd.

cd Documents/Dev/serverless-function-project

• Execute hs project create para criar um novo projeto.

hs project create

• Siga os prompts de terminal para criar seu projeto. Para o modelo, selecione Criar um projeto vazio (sem modelo).

• Navegue até o novo diretório do projeto usando o comando cd. Por exemplo, se você nomeou seu projeto meu novo projeto:

cd my-new-project

​

2. Adicione uma função sem servidor ao projeto

• app/app.json: o arquivo de configuração do aplicativo.
• app/app.functions: o diretório da função sem servidor. Você pode usar qualquer nome desejado, desde que termine em .functions.
• app/app.functions/function.js: o código JavaScript que será executado quando a função for chamada.
• app/app.functions/serverless.json: o arquivo de configuração da função sem servidor.
• app/app.functions/package.json: inclui as dependências necessárias.

• Copie o código de exemplo abaixo para o seus respectivos arquivos locais app.json, function.js, serverless.json e package.json. Em cada bloco de código .json, você também encontrará uma tabela contendo definições de campo.

{
  "name": "Serverless function app",
  "description": "This app runs a serverless function to fetch a quote using the Zen Quotes API.",
  "scopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
  "uid": "serverless-function-app",
  "public": false
}

const axios = require("axios");

exports.main = async context => {
  try {
    // Make GET request to the ZenQuotes API
    const response = await axios.get("https://zenquotes.io/api/random");

    // Extract the quote data (first item in the array)
    const quoteData = response.data[0];

    // Log the quote and author to console
    console.log(`"${quoteData.q}" — ${quoteData.a}`);

    // Return a properly formatted response with status code and body
    return {
      statusCode: 200,
      body: quoteData,
      headers: {
        "Content-Type": "application/json",
      },
    };
  } catch (error) {
    // Handle any errors that occur during the request
    console.error("Error fetching quote:", error.message);

    // Return an error response
    return {
      statusCode: 500,
      body: { error: "Failed to fetch quote" },
      headers: {
        "Content-Type": "application/json",
      },
    };
  }
};

{
  "appFunctions": {
     "quote-function": {
      "file": "function.js",
      "secrets": [],
      "endpoint": {
        "path": "fetch-quote",
        "method": ["GET"]
       }
    }
  }
}

{
  "name": "example-serverless-function",
  "version": "0.1.0",
  "author": "HubSpot",
  "license": "MIT",
  "dependencies": {
    "@hubspot/api-client": "^7.0.1",
    "axios": "^0.27.2"
  }
}

• Depois de adicionar o código acima, salve suas alterações.

​

3. Carregar o projeto na HubSpot

• No terminal, execute hs project upload.

hs project upload

• Confirme se deseja criar o projeto na conta. Você não precisará confirmar novamente isso após a criação inicial. O terminal exibirá o status atual das etapas de compilação e implantação à medida que avançarem.
• Quando o upload for concluído, execute hs project open para exibir o projeto na HubSpot.

hs project open

​

4. Testar a função

• <domain>: você pode usar qualquer domínio conectado à conta. Por exemplo, se website.com e subdomain.brand.com estiverem conectados à conta, você poderá chamar a função usando https://website.com/hs/serverless/<path> ou https://subdomain.brand.com/hs/serverless/<path>.
• <endpoint-path-from-config>: o valor no campo path em serverless.json.

​

5. Invocar a função de um página do site

• No ambiente local, crie um novo diretório para conter o modelo de página. Para os propósitos deste tutorial, crie este diretório fora do diretório do projeto criado por hs project create.
• No terminal, navegue até esse diretório usando o comando cd.

cd Documents/Dev/serverless-page

• Execute hs create template "serverless-template" para criar um novo modelo chamado serverless-template.

hs create template "serverless-template"

• Selecione o tipo de modelo da página.
• Abra o arquivo de modelo de página recém-criado no editor e substitua o código de formatação pelo código abaixo. Certifique-se de substituir <domain> no URL do endpoint da função (fetch('http://<domain>/hs/serverless/fetch-quote')) com um domínio conectado à sua conta HubSpot.

<!--
    templateType: page
    label: Serverless function example template
    isAvailableForNewContent: true
-->
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{ content.html_title }}</title>
    <meta name="description" content="{{ content.meta_description }}" />
    {{ standard_header_includes }}
  </head>
  <body>
    {% module "page_template_logo" path="@hubspot/logo" label="Logo" %}
    <!-- Button to fetch quote via serverless function -->
    <div class="serverless-container">
      <h2>Get quote</h2>
      <p class="subtitle">Click the button to fetch and display a quote.</p>
      <button id="data-button" type="button">Get quote!</button>
      <div id="data-container">
        <p class="data"></p>
      </div>
    </div>
    <!-- End button section -->

    {{ standard_footer_includes }}

    <!-- JavaScript that invokes the serverless function
     and adds returned data into the "data" text element -->
    <script>
      const dataButton = document.getElementById("data-button");
      const dataContainer = document.getElementById("data-container");

      dataButton.addEventListener("click", function (e) {
        console.log("Button clicked!");

        // Show loading state
        dataContainer.innerText = "Loading...";
        // Replace <domain> with your own domain
        fetch("http://<domain>/hs/serverless/fetch-quote")
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! Status: ${response.status}`);
            }
            // Parse the JSON response
            return response.json();
          })

          .then(data => {
            console.log("Raw data received:", data);

            // Clear container
            dataContainer.innerText = "";

            // Create the paragraph element
            const newDataElement = document.createElement("p");
            newDataElement.innerText = `"${data.q}" — ${data.a}`;
            dataContainer.appendChild(newDataElement);
          });
      });
    </script>
  </body>
</html>

• Salve o arquivo e execute hs upload para carregá-lo na HubSpot. Siga os prompts de terminal para selecionar o caminho local de origem e destino. Para este tutorial, você pode apenas pressionar Inserir para cada prompt para usar os caminhos padrão.

• Navegue até o página do site da sua conta HubSpot executando o hs open website-pages.

hs open website-pages

• No navegador, clique em Criar no canto superior direito para criar uma nova página.
• Na caixa de diálogo, selecione um domínio para usar, depois atribua um Nome da página. O domínio da página precisará corresponder ao domínio que você está usando para chamar a função sem servidor para evitar erros de origem cruzada (CORS). Você pode selecionar esse domínio no menu suspenso ou atualizar o URL do endpointno código de modelo de página (fetch('http://<domain>/hs/serverless/fetch-quote')) para usar o domínio selecionado nesta etapa.
• Clique em Criar página.
• Na tela de seleção de modelo, procure o novo modelo. Você pode usar o rótulo ou o nome do arquivo para pesquisar o modelo (por exemplo, “Página de exemplo da função sem servidor”). O modelo aparecerá em Outros modelos, pois não faz parte de um tema.

• Clique em Selecionar modelo.
• No editor de página, clique em Visualizar na parte superior direita.

• Clique em Abrir em uma nova guia.

​

Próximas etapas

• Incluir autenticação em uma solicitação para fazer chamadas para APIs HubSpot ou outras APIs autenticadas de terceiros.
• Implementar o botão e o código JavaScript em um módulo em vez de inseri-los no modelo de página. Isso lhe daria uma opção mais portátil, permitindo que a função fosse chamada de qualquer página à qual o módulo fosse adicionado. Para fazer isso, crie um módulo e adicione o HTML ao module.html e o JavaScript no arquivo module.js.

<div class="serverless-container">
  <h2>Get quote</h2>
  <p class="subtitle">Click the button to fetch and display a quote.</p>
  <button id="data-button" type="button">Get quote!</button>
  <div id="data-container">
    <p class="data"></p>
  </div>
</div>

const dataButton = document.getElementById("data-button");
const dataContainer = document.getElementById("data-container");

dataButton.addEventListener("click", function (e) {
  console.log("Button clicked!");

  // Show loading state
  dataContainer.innerText = "Loading...";

  fetch("http://meowmix-2272014.hs-sites.com/hs/serverless/fetch-quote")
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      // Parse the JSON response
      return response.json();
    })

    .then(data => {
      console.log("Raw data received:", data);

      // Clear container
      dataContainer.innerText = "";

      // Create the paragraph element
      const newDataElement = document.createElement("p");
      newDataElement.innerText = `"${data.q}" — ${data.a}`;
      dataContainer.appendChild(newDataElement);
    });
});