Criar um cartão de aplicativo (BETA)

​

Pré-requisitos

• Certifique-se de instalar a versão beta mais recente da CLI da HubSpot.
• Se ainda não fez isso, crie um aplicativo.
• É recomendado criar uma conta de teste configurável para que você possa compilar e testar em um ambiente isolado.

​

Criar um cartão de aplicativo

1

Adicionar um componente de cartão ao seu projeto

Para adicionar um novo componente de cartão de aplicativo ao seu projeto, use o terminal para navegar até o diretório local do projeto e execute o seguinte comando:

Report incorrect code

Copy

Ask AI

hs project add

Em seguida, quando solicitado a selecionar o componente a ser adicionado, selecione Cartão.Se o seu projeto ainda não contém nenhum cartão de aplicativo, um diretório cards/ será criado para você no diretório app/. O diretório cards/ conterá:

• Um arquivo de configuração de cartão JSON (*-hsmeta.json)
• Um arquivo de componente do React (.jsx)
• Um arquivo package.json

Se seu projeto já inclui cartões de aplicativo, os arquivos acima serão adicionados ao diretório cards/ existente (excluindo package.json, se já existir).

Report incorrect code

Copy

Ask AI

myProject
└── src/
    └── app/
        └── cards/
            ├── NewCard-hsmeta.json
            ├── NewCard.jsx
            └── package.json

Saiba mais sobre esses arquivos na documentação de referência de cartões de aplicativo.

2

Carregar no HubSpot

Para carregar o novo cartão na sua conta da HubSpot:

• Execute hs project install-deps para instalar as dependências necessárias para o cartão de aplicativo. Isso atualizará o diretório cards/ com os módulos de Nó necessários e um arquivo package-lock.json, que irá acelerar a compilação da extensão do cartão de aplicativo carregado e garantir que todas as dependências em seu ambiente de desenvolvimento local e produção correspondam.
• Em seguida, execute hs project upload para carregar o projeto em sua conta padrão.
• Para especificar uma conta diferente (como uma conta de teste separada), inclua o sinalizador --account e especifique o HubID da conta. Por exemplo hs project upload --account 123456.
• Se o projeto não tiver sido carregado antes, você será solicitado a confirmar se deseja criar o projeto em sua conta. Caso contrário, o terminal exibirá o status de compilação e implantação e confirmará quando o projeto tiver sido carregado com sucesso.

​

Ver o cartão no HubSpot

• Clique no nome do aplicativo no resumo do projeto à esquerda ou em Componentes do projeto.

• Clique na guia Distribuição.
• Clique em Instalar agora.

• Na sua conta da HubSpot, navegue até CRM > Contatos.
• Clique no nome de um contato.
• Na parte superior da coluna central do registro de contato, clique em Personalizar.

• Clique em Exibição padrão.
• Selecione a guia na qual deseja adicionar o cartão. Em seguida, passe o mouse sobre o local onde deseja colocar o cartão e clique no botão de adição. Isso pode ser ajustado a qualquer momento após a configuração inicial.

• No painel direito, clique na guia Biblioteca de cartões. Em seguida, clique no menu suspenso Tipos de cartão e selecione Aplicativo para filtrar cartões de aplicativo.

• Clique em Adicionar cartão no cartão de aplicativo que você criou e clique no botão fechar no canto superior direito da barra lateral.
• No canto superior direito, clique em Salvar e sair.

​

Iniciar desenvolvimento local

• No terminal, execute hs project dev.
• Siga as instruções do terminal para selecionar a conta que você deseja usar para desenvolvimento local.
• O terminal iniciará o servidor de desenvolvimento local e confirmará quando estiver em execução.
• Com o servidor em execução, volte para a guia do navegador com o registro de contato e recarregue a página.

​

Próximas etapas

• Consulte a Documentação de referência do componente de extensão da interface do usuário para adicionar mais componentes de interface ao cartão.
• Veja todas as opções de configuração de cartão de aplicativo e muito mais na documentação de referência do cartão de aplicativo.
• Veja todos os utilitários e métodos disponíveis para extensões de interface do usuário na Referência do SDK da extensão da interface do usuário.

​

Adicionar suporte a hubspot.fetch()

"permittedUrls": {
    "fetch": ["https://api.example.com"],
    "img": [],
    "iframe": []
}

​

Migrar um cartão de aplicativo criado anteriormente

• Migrar um aplicativo público existente
• Migrar um aplicativo privado existente