Créer une carte d'application (BÊTA)

​

Conditions préalables

• Assurez-vous d’avoir installé la dernière version bêta de l’ILC HubSpot.
• Si vous ne l’avez pas encore fait, créez une application.
• Il est recommandé de créer un compte de test configurable afin de pouvoir créer et tester dans un environnement isolé.

​

Créer une carte d’application

1

Ajouter un composant de carte à votre projet

Pour ajouter un nouveau composant de carte d’application à votre projet, utilisez le terminal pour accéder au répertoire local du projet, puis exécutez la commande suivante :

Report incorrect code

Copy

Ask AI

hs project add

Ensuite, lorsque vous êtes invité à sélectionner un composant à ajouter, sélectionnez Carte.Si votre projet ne contient pas encore de cartes d’application, un répertoire cards/ sera créé pour vous dans le répertoire app/. Le répertoire cards/ contiendra :

• Un fichier de configuration de carte JSON (*-hsmeta.json)
• Un fichier de composant React (.jsx)
• Un fichier package.json

Si votre projet inclut déjà des cartes d’application, les fichiers ci-dessus seront ajoutés au répertoire cards/ existant (sauf package.json s’il existe déjà).

Report incorrect code

Copy

Ask AI

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

Découvrez-en davantage sur ces fichiers dans la documentation de référence des cartes d’application.

2

Télécharger vers HubSpot

Pour télécharger la nouvelle carte sur votre compte HubSpot :

• Exécutez hs project install-deps pour installer les dépendances nécessaires pour la carte d’application. Cela mettra à jour le répertoire cards/ avec les modules Node nécessaires et un fichier package-lock.json, ce qui accélérera la création de l’extension de carte d’application téléchargée et garantira que toutes les dépendances dans votre environnement de développement local et la production correspondent.
• Ensuite, exécutez hs project upload pour télécharger le projet sur votre compte par défaut.
• Pour spécifier un autre compte (comme un compte de test distinct), incluez l’indicateur --account et spécifiez le HubID du compte. Par exemple : hs project upload --account 123456.
• Si le projet n’a pas encore été chargé, vous serez invité à confirmer que vous souhaitez créer le projet dans votre compte. Sinon, le terminal affichera l’état de création et de déploiement, puis confirmera une fois que le projet aura été téléchargé avec succès.

​

Afficher la carte dans HubSpot

• Cliquez sur le nom de l’application dans le résumé du projet à gauche ou sous Composants du projet.

• Cliquez sur l’onglet Distribution.
• Cliquez sur Installer maintenant.

• Dans votre compte HubSpot, accédez à CRM > Contacts.
• Cliquez sur le nom d’un contact.
• En haut de la colonne centrale de la fiche d’informations d’un contact, cliquez sur Personnaliser.

• Cliquez sur Vue par défaut.
• Sélectionnez l’onglet auquel vous souhaitez ajouter la carte. Vous pouvez ensuite déplacer le curseur sur l’emplacement où vous souhaitez placer la carte et cliquer sur le bouton plus. Cela peut être ajusté à tout moment après la configuration initiale.

• Dans la barre latérale de droite, cliquez sur l’onglet Bibliothèque de cartes. Ensuite, cliquez sur le menu déroulant Types de cartes et sélectionnez Application pour filtrer les cartes d’application.

• Cliquez sur Ajouter une carte sous la carte d’application que vous avez créée, puis cliquez sur le bouton fermer en haut à droite de la barre latérale.
• En haut à droite, cliquez sur Enregistrer et quitter.

​

Commencer le développement local

• Dans le terminal, exécutez hs project dev.
• Suivez les invites du terminal pour sélectionner le compte que vous souhaitez utiliser pour le développement local.
• Le terminal démarrera le serveur de développement local, puis confirmera une fois qu’il sera en cours d’exécution.
• Maintenant que le serveur est en marche, revenez à l’onglet du navigateur avec la fiche d’informations d’un contact, puis rechargez la page.

​

Étapes suivantes

• Consultez la documentation de référence sur les composants d’extension d’interface utilisateur pour ajouter davantage de composants d’interface utilisateur à la carte.
• Consultez toutes les options de configuration des cartes d’application et plus encore dans la documentation de référence relative aux cartes d’application.
• Affichez tous les utilitaires et méthodes disponibles pour les extensions d’interface utilisateur dans la référence du kit de développement logiciel pour les extensions d’interface utilisateur.

​

Ajout de la prise en charge de hubspot.fetch()

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

​

Migration d’une carte d’application précédemment créée

• Migrer une application publique existante
• Migrer une application privée existante