Fonctions Netlify simples pour la messagerie de contact

Les fonctions Netlify sont des codes sans serveur qui sont faciles à déployer. Ici, je veux montrer comment programmer une simple fonction Netlify pour envoyer un message de contact depuis mon site web à une adresse e-mail et l'enregistrer dans une feuille Airtable. Dans les coulisses, Netlify utilise les fonctions AWS Lambda et gère toutes les tâches complexes comme la configuration d'une passerelle API, etc.

Netlify

Netlify est une entreprise basée à San Francisco qui propose l'hébergement de sites statiques et de fonctions serverless. Elle a été fondée en 2014 et dispose d'une quantité généreuse de fonctions serverless gratuites. L'entreprise se concentre sur le cas d'utilisation Jamstack, qui est un mouvement évolutif visant à utiliser les sites statiques et le code sans serveur pour fournir des sites web plus simples, plus rapides et plus sûrs.

Sendgrid

Le service que j'utilise ici pour envoyer le message de contact à mon adresse email est Sendgrid de Twilio.

Twilio est une société de communication en ligne basée à San Francisco qui offre des API de messagerie en nuage. Vous pouvez envoyer un certain nombre d'e-mails gratuitement par mois avec le plan gratuit.

Airtable

Airtable est également basé à San Francisco et est un fournisseur d'une plate-forme de communication avec une API. Pour notre but, vous devez créer une base que nous utilisons pour enregistrer la demande de contact depuis notre site web. Vous devez ajouter les quatre champs ("Name", "Email", "Message" et "Date").

Plus tard, quand un utilisateur envoie un message, les données seront enregistrées dans la base Airtable et vous pourrez les consulter.

Préparation

Pour un déploiement simple, Netlify offre une ligne de commande appelé Netlify CLI. Vous pouvez l'installer via :

npm install netlify-cli -g

Pour plus d'informations sur la configuration de Netlify CLI et la connexion à votre compte, consultez la page de documentation :

https://docs.netlify.com/cli/get-started/

Le package.json

Le projet TypeScript du formulaire de contact utilise les paquets tiers suivants :

{
  "name": "contact-form",
  "version": "1.0.0",
  "description": "Netlify function for contact form messaging",
  "main": "contact-form.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "netlify",
    "serverless",
    "typescript"
  ],
  "author": "Netlify",
  "license": "MIT",
  "dependencies": {
    "@netlify/functions": "^0.7.2",
    "@sendgrid/mail": "^7.4.7",
    "airtable": "^0.11.1",
    "typescript": "^4.0.0"
  },
  "devDependencies": {
    "@types/node": "^16.9.6"
  }
}

Les deux paquets pour l'intégration de Sendgrid et de Airtable sont inclus dans ce fichier.

La fonction de contact

La fonction de contact est écrite en TypeScript et ressemble à ceci :

import { Handler } from "@netlify/functions";
import sendgridMail from "@sendgrid/mail";
import Airtable from 'airtable';

sendgridMail.setApiKey(process.env.SENDGRID_API_KEY);

Airtable.configure({ apiKey: process.env.AIRTABLE_API_KEY })
const base = Airtable.base('app1x2RVWTmxkxcxx');

export const handler: Handler = async (event) => {
  const { email, name, message } = event.queryStringParameters;
  const date = new Date();

  base('Table 1').create([
    {
      "fields": {
        Name: name,
        Email: email,
        Message: message,
        Date: `${date.getMonth()+1}/${date.getDate()}/${date.getFullYear()}`,
      }
    },
  ], (err) => {
    if (err) {
      console.error(err);
    } else {
      console.log("Successfully logged to Airtable!");
    }
  });

  const msg = {
    to: "[email protected]",
    from: "[email protected]",
    subject: "Contact Message from Website",
    text: `Message from ${name} with email ${email}: ${message}`,
    html: `Message from ${name} with email ${email}: ${message}`,
  };

  try {
    await sendgridMail.send(msg);
  } catch (error) {
    console.error(error);

    if (error.response) {
      console.error(error.response.body);

      return {
        statusCode: 400,
        headers: {
          'Access-Control-Allow-Origin': '*', // Required for CORS support to work
        },
        body: JSON.stringify({
          message: 'Error: '+JSON.stringify(error.response.body)
        }),
      };
    }
  }

  return {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*', // Required for CORS support to work
    },
    body: JSON.stringify({
      message: 'Success!'
    }),
  };
};

Avant de pouvoir exécuter la fonction localement, vous devez définir les variables d'environnement. Sur les systèmes basés sur Linux, vous pouvez simplement exécuter export SENDGRID_API_KEY=votre-clé dans le terminal. De même pour la variable AIRTABLE_API_KEY.

De plus, vous devez adapter la variable Airtable dans le code avec votre propre ID et adapter le nom de la table ("Table 1") s'il est différent.

De plus, pour recevoir le message électronique, vous devez entrer votre adresse électronique dans la propriété '''msg.to'''. adresse électronique dans la propriété '''msg.to'''.

Test de la fonction

Vous pouvez exécuter et tester la fonction localement avec la commande suivante :

netlify dev

Vous pouvez tester la fonction GET http dans votre navigateur Web ou à l'aide d'un outil comme Insomnia en allant à l'adresse vers :

http://localhost:8888/.netlify/functions/contact-form/?name=Wolf&[email protected]&message=Hi!

Si cela a réussi, vous devriez recevoir un email et les paramètres devraient être enregistrés dans votre base Airtable.

Déploiement en production

Maintenant si tout a bien fonctionné vous pouvez déployer votre fonction en production avec une simple commande :

netlify deploy --prod

Vous obtenez également un point de terminaison sécurisé https après le déploiement. Ce point de terminaison sécurisé que vous pouvez utiliser dans votre code frontal pour appeler la fonction.

Sachez que vous devez définir vos variables d'environnement dans l'application web de Netlify où vous avez configuré et paramétré votre fonction.

Conclusion

Les fonctions Netlify constituent un moyen simple de programmer et de déployer des fonctions lambda AWS. Elles s'intègrent bien aux API tierces, grâce à l'outil CLI, vous pouvez facilement les tester localement, ce qui accélère le développement.

Références

• Fonctions Netlify : https://docs.netlify.com/functions/overview

• Twilio Sendgrid : https://www.twilio.com/sendgrid

• Airtable : https://airtable.com

• Insomnia API client : https://insomnia.rest