Crear una tarjeta de aplicación (BETA)

​

Requisitos previos

• Asegúrate de haber instalado la última versión beta de la CLI de HubSpot.
• Si aún no lo has hecho, crea una aplicación.
• Se recomienda crear una cuenta de prueba configurable para que puedas construir y probar en un entorno aislado.

​

Crear una tarjeta de aplicación

1

Agregar un componente de tarjeta a tu proyecto

Para agregar un nuevo componente de tarjeta de aplicación a tu proyecto, utiliza el terminal para navegar hasta el directorio local de tu proyecto y ejecuta el siguiente comando:

Report incorrect code

Copy

Ask AI

hs project add

A continuación, cuando se te pida que selecciones un componente para agregar, selecciona Tarjeta.Si tu proyecto aún no contiene ninguna tarjeta de aplicación, se creará para ti un directorio cards/ en el directorio de app/. El directorio cards/ contendrá:

• Un archivo JSON de configuración de la tarjeta (*-hsmeta.json)
• Un archivo de componentes de React (.jsx)
• Un archivo package.json

Si tu proyecto ya incluye tarjetas de aplicaciones, los archivos anteriores se agregarán al directorio cards/ existente (excluyendo package.json si ya existe).

Report incorrect code

Copy

Ask AI

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

Más información sobre estos archivos en la documentación de referencia de las tarjetas de la aplicación.

2

Subir a HubSpot

Para subir la nueva tarjeta a tu cuenta de HubSpot:

• Ejecuta hs project install-deps para instalar las dependencias necesarias para la tarjeta de la aplicación. Esto actualizará el directorio cards/ con los módulos de Node necesarios y un archivo package-lock.json, lo que acelerará la compilación de la extensión de la tarjeta de la aplicación subida y garantizará que cualquier dependencia en tu entorno de desarrollo local y producción coincidan.
• A continuación, ejecuta hs project upload para subir el proyecto a tu cuenta por defecto.
• Para especificar una cuenta diferente (como una cuenta de prueba independiente), incluye la bandera --account y especifica el HubID de la cuenta. Por ejemplo, hs project upload --account 123456.
• Si el proyecto no se ha subido antes, se te pedirá que confirmes que quieres crear el proyecto en tu cuenta. De lo contrario, el terminal mostrará el estado de compilación e implementación, y luego confirmará una vez que el proyecto se haya subido correctamente.

​

Ver la tarjeta en HubSpot

• Haz clic en el nombre de la aplicación en el resumen del proyecto, a la izquierda, o en Componentes del proyecto.

• Haz clic en la pestaña Distribución.
• Haz clic en Instalar ahora.

• En tu cuenta de HubSpot, navega a CRM > Contactos.
• Haz clic en el nombre de un contacto.
• En la parte superior de la columna central del registro del contacto, haz clic en Personalizar.

• Haz clic en Vista predeterminada.
• Selecciona la pestaña a la que quieras agregar la tarjeta. A continuación, puedes pasar el cursor por encima del lugar donde quieras colocar la tarjeta y hacer clic en el botón más. Esto se puede ajustar en cualquier momento después de la configuración inicial.

• En la barra lateral derecha, haz clic en la pestaña Biblioteca de tarjetas. A continuación, haz clic en el menú desplegable Tipos de tarjetas y selecciona Aplicación para filtrar por tarjetas de aplicaciones.

• Haz clic en Agregar tarjeta debajo de la tarjeta de la aplicación que has creado y, a continuación, haz clic en el botón cerrar situado en la parte superior derecha de la barra lateral.
• En la parte superior derecha, haz clic en Guardar y salir.

​

Iniciar el desarrollo local

• En la terminal, ejecuta hs project dev.
• Sigue los aviso de la terminal para seleccionar la cuenta que quieras utilizar para el desarrollo local.
• La terminal iniciará el servidor de desarrollo local y, una vez en marcha, lo confirmará.
• Con el servidor en funcionamiento, vuelve a la pestaña del navegador con el registro de contacto y recarga la página.

​

Próximos pasos

• Consulta la documentación de referencia del componente de extensión de interfaz de usuario para agregar más componentes de interfaz de usuario a la tarjeta.
• Consulta todas las opciones de configuración de la tarjeta de aplicaciones y más en la documentación de referencia de la tarjeta de aplicaciones.
• Consulta todas las utilidades y métodos disponibles para las extensiones de interfaz de usuario en la referencia SDK de extensiones de interfaz de usuario.

​

Agregar asistencia de hubspot.fetch()

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

​

Migrar una tarjeta de aplicación creada previamente

• Migrar una aplicación pública existente
• Migrar una aplicación privada existente