Premiers pas avec les fonctions sans serveur

Last updated:

Remarque : si vous créez une fonction sans serveur dans le cadre d'un projet de développement, consultez plutôt la documentation relative aux fonctions sans serveur dans les projets de développement. La documentation ci-dessous concerne la création de fonctions sans serveur en dehors de la plate-forme de projets de développement.

APPLICABLE PRODUCTS
  • Content Hub
    • Enterprise

Les fonctions sans serveur permettent d'écrire un code côté serveur qui interagit avec HubSpot et des services tiers via des API.  Les API exigeant une authentification ne sont pas sécurisées pour l'interface d'un site web, car vos identifiants seraient exposés.

 Les fonctions sans serveur peuvent agir comme intermédiaires entre vos services frontaux et dorsaux qui nécessitent une authentification. Grâce aux fonctions sans serveur, les développeurs n'ont pas besoin d'installer et de gérer de nouveaux serveurs. Les fonctions sans serveur exigent moins de ressources et sont donc plus faciles à faire évoluer au fil de la croissance d'une entreprise. Nous proposons une vue d'ensemble de haut niveau de ce que sont les fonctions sans serveur HubSpot et de leur fonctionnement. Nous vous recommandons de vous y référer avant de suivre ce tutoriel.

Ce tutoriel vous guidera à travers la création de votre première fonction sans serveur.

Vous allez créer un dossier de fonction sans serveur, configurer votre dossier de configuration, créer une fonction et obtenir une réponse à partir de celle-ci.

Ce que vous devez faire avant de suivre ce tutoriel :

1. Créer un dossier de projet

Ouvrez votre fichier hubspot.config.yml et assurez-vous que defaultPortal est configuré soit sur votre compte d'environnement de test développeur CMS, soit sur un compte CMS Hub Entreprise.

Sur votre ordinateur, dans le dossier qui contient votre fichier hubspot.config.yml, créez un dossier serverless-tutorial. Ce dossier contiendra tous nos fichiers, à la fois les fonctions elles-mêmes et un modèle qui utilisera la fonction. 

Dans votre terminal, exécutez la commande watch :

hs watch serverless-tutorial serverless-tutorial

Toutes les modifications apportées à ce dossier entraîneront des chargements dans le gestionnaire de conception. Étant donné que le dossier n'a actuellement aucun contenu, cette commande indiquera simplement « Watcher is ready and watching ».

2. Créer un dossier de fonctions

À l'intérieur du dossier serverless-tutorial, créez un dossier my-first-function.functions.
Ceci est similaire aux dossiers de modules personnalisés qui se terminent par .module, .functions servant à indiquer que le dossier contient des fonctions sans serveur. Les fichiers stockés dans ce dossier ne sont pas accessibles publiquement.

Étant donné que ce dossier est actuellement vide, la commande watch que vous avez exécutée ne créera pas encore ce dossier dans le gestionnaire de conception.

3. Créer un fichier de configuration

Créez un nouveau fichier dans votre dossier my-first-function.functions, nommez-le serverless.json. serverless.json est un fichier requis contenu dans un dossier .functions. Il sert de fichier de configuration pour les fonctions sans serveur. Définition de l'environnement d'exécution, de la version de la fonction sans serveur et des points de terminaison disponibles. Pour un aperçu de tout ce qui est défini dans ce fichier, consultez notre référence sur les fonctions sans serveur.

Si vous avez créé et enregistré le fichier vide, vous recevrez un message d'erreur dans votre terminal indiquant que vous ne pouvez pas télécharger un fichier serverless.json vide. Vous pouvez ignorer ce message car vous allez ajouter ce code, puis l'enregistrer, ce qui déclenchera un nouveau téléchargement.

Collez le code ci-dessous dans votre serverless.json :

// place this in your serverless.json file, without this comment { "runtime": "nodejs18.x", "version": "1.0", "endpoints": { } }

Enregistrez le fichier.

Gardez ce fichier ouvert dans votre éditeur de code, nous y reviendrons.

En raison de l'exécution de watch, si vous actualisez votre gestionnaire de conception, vous verrez désormais vos dossiers serverless-tutorial et my-first-function.functions ainsi que votre nouveau fichier serverless.json. 

4. Créer un fichier de fonction

Créez un nouveau fichier dans votre dossier my-first-function.functions et nommez-le congratulation.js

Il s'agit du véritable fichier de fonction, qui sera exécuté pour effectuer une tâche.

Collez le code ci-dessous :

exports.main = (context, sendResponse) => { // your code called when the function is executed const functionResponse = "Congrats! You've just deployed a Serverless Function." // sendResponse is a callback function you call to send your response. sendResponse({body: functionResponse, statusCode: 200}); };

Lorsqu'elle est exécutée, cette fonction sans serveur renvoie une chaîne "Congrats! You just deployed a Serverless Function." ainsi qu'un code de statut 200 indiquant la réussite de l'opération.

Dans un scénario réel, il est probable que vous utilisiez des API ou que vous effectuiez certains calculs que vous ne souhaitez pas rendre publics. Vous renverrez le résultat de ces calculs ou un code de statut simple basé sur le succès de vos transactions d'API.

Vous n'avez pas encore terminé car il n'existe aucun moyen d'exécuter cette fonction pour le moment.

5. Enregistrer votre fonction dans votre serverless.json

Ouvrez à nouveau votre fichier serverless.json. Dans votre fichier, trouvez votre objet "endpoints".

Mettez à jour l'objet pour qu'il ressemble à ceci :

// update the endpoints object in your serverless.json to reflect this object. "endpoints": { "congratulation": { "method": "GET", "file": "congratulation.js" } }

L'objet de point de terminaison contient un objet "congratulation". "congratulation" est le point de terminaison que vous créez. Le nom du point de terminaison définit le chemin que vous utiliserez pour appeler votre fonction sans serveur.

Les fonctions sans serveur sont exposées via un chemin d'accès au domaine de votre compte CMS Hub.

Ces fonctions peuvent être consultées via le chemin : 

<https://www.example.com>/_hcms/api/<endpoint-name/path>

Dans le cas de ce point de terminaison "congratulation" que vous avez créé, le chemin sera 

<https://www.example.com>/_hcms/api/congratulation.

Pour cette raison, il est généralement judicieux de nommer votre point de terminaison de la même manière que le nom de votre fichier de fonction. Ces deux éléments doivent être nommés en fonction des informations qu'ils traitent et non de l'action effectuée par rapport à ces informations. Vous devez utiliser la méthode HTTP ou d'autres méthodes pour communiquer le type d'action que vous effectuez à l'égard de ces informations. Le paramètre "method" définit la méthode HTTP que votre fonction prend en charge. Il peut s'agir d'une seule chaîne ou d'un tableau de chaînes désignant les méthodes prises en charge par la fonction.

6. Tester votre fonction

La façon la plus simple de tester une requête GET pour votre fonction sans serveur consiste à accéder directement à l'URL de votre point de terminaison dans le navigateur.
https://votre-domaine.com/_hcms/api/congratulation

Remplacez votre-domaine.com par le domaine de votre site HubSpot.

Vous devriez voir "Congrats! You just deployed a serverless function".

Bravo !

Si vous n'obtenez pas cette réponse, revenez au début de ce tutoriel en lisant attentivement chaque étape et en vérifiant le code. Il est probable que les instructions des étapes 4 ou 5 n'aient pas été suivies correctement.

Pour les requêtes plus compliquées, il est judicieux d'utiliser un outil comme Postman. Postman facilite le test et le débogage des API. Une fonctionnalité pratique pour les développeurs frontaux est sa génération de code qui peut créer un point de départ pour votre appel JavaScript à votre fonction.

7. Créer un modèle de base appelant votre fonction

À l'aide d'une nouvelle fenêtre de terminal, accédez à votre dossier serverless-tutorial via cd.

Exécutez la commande suivante dans votre terminal :

hs create template "test-function"

Cela crée un fichier test-fonction.html. Ouvrez ce fichier dans votre éditeur de code.

Au-dessus de la balise </head>, ajoutez <script></script>.

Copiez le JavaScript ci-dessous :

var requestOptions = { 'method': 'GET', 'headers': { 'Content-Type': 'application/json', } }; fetch("https://www.example.com/_hcms/api/congratulation", requestOptions) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error));

Les fonctions sans serveur HubSpot ne prennent en charge que le type de contenu application/json. Le laisser en dehors entraînera une erreur « Type de média non pris en charge ».

À l'intérieur de la balise de script que vous avez créée précédemment, collez le code JavaScript copié.

Modifiez www.example.com dans le domaine de votre compte.

Enregistrez le fichier.

8. Créer une page en utilisant le modèle test-function.html

Dans le gestionnaire de conception, trouvez votre fichier test-function.html (vous devrez peut-être rafraîchir la page).

Effectuez un clic droit sur le fichier, choisissez « Créer une page ».

Nommez votre page « Test de fonction ». Créez une page.

Cliquez sur prévisualiser dans une nouvelle fenêtre. 

Inspectez la page en effectuant un clic droit sur la page et en sélectionnant « Inspecter ».

Si vous avez tout fait correctement, vous devriez voir dans votre console le message de félicitations.

Félicitations, vous avez appelé votre fonction sans serveur depuis une page CMS Hub. 

Bien que ce tutoriel consiste à appeler la fonction sans serveur au niveau du modèle, vous pouvez appeler des fonctions sans serveur partout où vous pouvez ajouter du code JavaScript sur votre site hébergé par CMS. Vos modules personnalisés constituent l'endroit le plus utilisé.

Déboguer votre fonction sans serveur

À ce stade, votre fonction sans serveur devrait fonctionner correctement. Plus votre fonction devient complexe, plus il est difficile de résoudre les problèmes. Tout comme la console de votre navigateur est utile pour déboguer JavaScript sur vos éléments frontaux, vous pouvez obtenir des journaux similaires pour vos fonctions sans serveur grâce à hs logs. Consultez notre référence de développement local pour plus d'informations sur cette commande.

hs logs <endpoint-name> --follow

Qu'avez-vous fait ?

Vous avez créé un dossier de fonctions sans serveur, avec un fichier de configuration serverless.json et un fichier de fonction nommé congratulation.js. Vous avez utilisé GET pour obtenir un texte de félicitations depuis la fonction sans serveur. Vous avez utilisé JavaScript pour passer un appel à votre fonction sans serveur depuis une page de CMS Hub.

Maintenant que vous comprenez la relation entre le fichier de configuration, le fichier de fonction et le dossier .functions, l'ILC dispose d'une commande pratique que vous pouvez utiliser pour créer vos fonctions plus rapidement la prochaine fois.

hs create function <function name>

Cette fonction crée un dossier .functions, un fichier serverless.json et un fichier de fonction avec les noms que vous fournissez.

Que faire après ?

Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.