> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.es/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Crear una tarjeta de aplicación (BETA)
> Aprende a crear una tarjeta de aplicación en la última versión de la plataforma para desarrolladores (BETA).
Puedes crear una tarjeta de aplicación basada en React para proyectos en la última versión (`2025.2`) de la plataforma para desarrolladores. Las tarjetas de aplicaciones funcionan de forma similar a las tarjetas existentes que hayas [creado para aplicaciones anteriores](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/reference), con algunas modificaciones menores en tus archivos de configuración.
Esta guía te explica cómo crear una tarjeta de aplicación estándar en una aplicación existente, junto con cómo subir y previsualizar tu tarjeta en HubSpot. A continuación, subirás todos estos archivos a tu proyecto, donde podrás previsualizar la tarjeta en una cuenta de prueba de desarrollador en la que hayas instalado tu aplicación.
## Requisitos previos
* Asegúrate de haber instalado la última versión beta de la [CLI de HubSpot](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli).
* Si aún no lo has hecho, [crea una aplicación](/docs/getting-started/quickstart).
* Se recomienda [crear una cuenta de prueba configurable](/docs/developer-tooling/local-development/configurable-test-accounts) para que puedas construir y probar en un entorno aislado.
## Crear una tarjeta de aplicación
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:
```shell theme={null}
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).
```shell theme={null}
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](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/reference).
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
Después de subir el proyecto, puedes verlo en HubSpot ejecutando `hs project open`. Se abrirá una pestaña del navegador en la página de detalles del proyecto, donde podrás ver tu proyecto, la aplicación y su nuevo componente de tarjeta.
Si aún no has instalado la aplicación en la cuenta, tendrás que hacerlo antes de poder ver la tarjeta. Para instalar la aplicación:
* 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**.
La tarjeta de aplicación creada por `hs project add` está configurada para aparecer en la columna central de los registros de contactos. Para mostrar la tarjeta, primero tendrás que agregarla a la vista de registro de contactos:
* 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**.
A continuación, se te redireccionará de nuevo al registro de contactos, donde ahora aparecerá tu tarjeta. Mantén abierta la página de registro de contactos en tu navegador para el siguiente paso, cuando inicies el servidor de desarrollo local.
## Iniciar el desarrollo local
Con tu tarjeta de aplicación agregada a todos los registros de contacto, ahora puedes seguir creando la tarjeta de aplicación. La forma más fácil de iterar rápidamente es iniciar el servidor de desarrollo local con el comando `hs project dev`:
* 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.
La tarjeta de la aplicación se mostrará con una etiqueta `Developing locally`, indicando que el servidor de desarrollo local está listo.
El servidor de desarrollo local detectará automáticamente cualquier cambio guardado en los archivos React del front-end de la tarjeta de la aplicación (es decir, cualquier archivo `.jsx` o `.tsx`). Si necesitas hacer cambios en otros tipos de archivos, como un archivo de configuración de `.json`, tendrás que volver a subir el proyecto y reiniciar el servidor de desarrollo local.
## Próximos pasos
Consulta los siguientes recursos para crear el aspecto y la funcionalidad de la tarjeta.
* Consulta la [documentación de referencia del componente de extensión de interfaz](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/overview) 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](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/reference).
* 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](/docs/apps/developer-platform/add-features/ui-extensibility/ui-extensions-sdk).
### Agregar asistencia de hubspot.fetch()
Para realizar llamadas a tu backend o a un servicio de terceros, actualiza el [archivo de configuración](/docs/apps/developer-platform/build-apps/app-configuration) `*-hsmeta.json` de la aplicación para incluir el campo `permittedUrls`:
```json theme={null}
"permittedUrls": {
"fetch": ["https://api.example.com"],
"img": [],
"iframe": []
}
```
El campo `permittedUrls` define una lista de URI a los que tu aplicación tiene permitido acceder. Agrega una capa adicional de seguridad tanto para tu aplicación como para HubSpot, ya que te permite controlar explícitamente con qué recursos externos puede interactuar tu aplicación en tiempo de ejecución.
El campo `permittedUrls` es un objeto con un conjunto específico de propiedades admitidas, lo que significa que no puedes pasar claves arbitrarias aquí. La clave más importante que hay que especificar es `fetch`, que especifica a qué URL se puede acceder a través de `hubspot.fetch`. Esto equivale al campo anterior `allowedUrls` cuando se construye una aplicación pública anterior.
Más información sobre el uso de `hubspot.fetch` en la [documentación existente](/docs/apps/developer-platform/add-features/ui-extensibility/fetching-data#fetching-data-for-public-apps-beta).
## Migrar una tarjeta de aplicación creada previamente
Si necesitas migrar un proyecto existente con tarjetas de aplicación a la plataforma para desarrolladores, consulta las siguientes guías:
* [Migrar una aplicación pública existente](/docs/apps/developer-platform/build-apps/migrate-an-app/migrate-an-existing-public-app)
* [Migrar una aplicación privada existente](/docs/apps/developer-platform/build-apps/migrate-an-app/migrate-an-existing-private-app)
Si tu proyecto existente tenía una tarjeta con objetos personalizados conectados, confirma que tienes el permiso `crm.objects.custom.read` en tu aplicación antes de la migración. Para los proyectos construidos antes de la última versión de `2025.2`, se podían construir tarjetas de objetos personalizadas solo con el permiso `crm.schemas.custom.read` necesario. En la última versión (`2025.2`) de la plataforma para desarrolladores, se requiere `crm.objects.custom.read`. Si no incluyes este ámbito, la construcción durante la migración fallará con el siguiente error:
**\[ERROR] La construcción ha fallado o ha expirado. Inspecciona el fallo para actualizar tu compilación y vuelve a intentar la migración.**
Tu aplicación de cara al cliente no se verá afectada, a pesar del estado en la página de detalles del proyecto. Para solucionar el problema, agrega el permiso `crm.objects.custom.read` a los permisos de tu aplicación anterior, vuelve a crear la aplicación en la versión `2023.2` e intenta de nuevo la migración.