Collecte des inscriptions par e-mail avec l'API de notion

Ce didacticiel montre la construction d'un système d'inscription à la newsletter à l'aide d'une architecture Jamstack, d'intégration des fonctions Netlify, de l'API de notion et de Mailgun. Explorons directement comment collecter les abonnés par e-mail, offrant une alternative gratuite et auto-hébergée aux plateformes de newsletter établies.

De nombreuses personnes créent aujourd'hui des newsletters, en tirant parti des services comme Substack, MailChimp, Revue (Twitter) et même Facebook. D'autres optent pour des solutions WordPress autogérées telles que MailPoet. Ce tutoriel présente une approche différente: un système personnalisé pour collecter des adresses e-mail à l'aide d'un formulaire HTML, une fonction sans serveur et une base de données. Cette méthode évite les coûts associés à de nombreuses plateformes existantes.

Ce tutoriel construit un système à l'aide de fonctions Netlify, d'une base de données de notion et de MailGun (bien que tout service de messagerie compatible API puisse être remplacé). Tous les services offrent des niveaux gratuits (avec des limitations). Le code complet est disponible sur GitHub.

Notion: votre solution de base de données

La notion sert de base de données. Il s'agit d'un espace de travail polyvalent pour la prise de notes, la gestion de projet, etc. Sa fonctionnalité de base de données, accessible via une interface conviviale, est idéale pour stocker nos abonnements par e-mail. Nous allons créer une table (base de données) appelée "e-mails de newsletter", avec une simple colonne "e-mail" et la propriété "Time" intégrée de la notion.

NE TOKEN API NOTION

Pour vous connecter à la base de données de notion, créez une intégration de notion (pas dans votre compte de notion, mais sur le site Web de notion lors de son connexion). Nommez-le "inscriptions de newsletter" et obtenez le jeton d'intégration interne (jeton API). Surtout, partagez la base de données "e-mails de newsletter" avec cette intégration pour accorder l'accès.

Fonctions Netlify: puissance sans serveur

Les fonctions Netlify fournissent des points de terminaison API sans serveur. Bien que les formulaires Netlify puissent être utilisés, le niveau libre limite les soumissions à 100 par mois. Les fonctions Netlify, cependant, offrent une limite d'invocation beaucoup plus élevée (125 000 par mois sur un plan gratuit), ce qui les rend adaptés à la gestion d'un plus grand volume d'inscriptions par e-mail.

Configuration du projet Netlify

Installez le NetLify CLI ( npm install netlify-cli -g ), créez un répertoire de projet, initialisez NPM ( npm init ) et authentifiez avec NetLify. Un fichier netlify.toml est nécessaire pour spécifier le répertoire des fonctions ( functions = "functions" ).

La fonction Netlify (index.js)

Cette fonction gère les soumissions de formulaires. Installez le package @notionhq/client ( npm install @notionhq/client --save ). Créez un fichier .env avec votre token API de notion ( NOTION_API_TOKEN ) et ID de base de données ( NOTION_DATABASE_ID ). L'ID de la base de données se trouve dans l'URL de notion de la base de données.

La fonction index.js valide les adresses e-mail, utilise l'API de notion pour ajouter des e-mails à la base de données et renvoie une réponse de succès ou d'erreur.

Le formulaire HTML (index.html)

Un formulaire HTML simple avec une entrée par e-mail et un bouton de soumission est créé. Le code JavaScript valide l'e-mail et envoie une demande de message à la fonction Netlify ( /.netlify/functions/index ). Bootstrap 5 est utilisé pour le style.

Intégration de Mailgun (bienvenue.js)

Pour envoyer des e-mails de confirmation, intégrez Mailgun (ou un service similaire). Obtenez votre clé API Mailgun et votre domaine à partir du tableau de bord Mailgun, en les ajoutant à votre fichier .env sous le nom MAILGUN_API_KEY et MAILGUN_DOMAIN .

Installez le package mailgun-js ( npm install mailgun-js --save ). Créez une fonction welcome.js Netlify pour récupérer de nouvelles inscriptions à partir de la notion (dans les 30 dernières minutes) et envoyez des e-mails de confirmation à l'aide de l'API Mailgun.

Tests et étapes suivantes

Testez le formulaire, vérifiez les entrées de la base de données et envoyez une demande de message à la fonction welcome à l'aide d'un outil comme Postman. N'oubliez pas de vérifier votre dossier de spam pour les e-mails de confirmation.

Les améliorations futures incluent la mise en œuvre d'une tâche planifiée (par exemple, en utilisant des actions GitHub) pour envoyer régulièrement des e-mails de bienvenue et l'ajout de mesures de sécurité au point de terminaison welcome .

Ce tutoriel offre une approche robuste, rentable et éducative pour construire un système d'inscription à la newsletter. Le processus démontre la puissance de combiner divers services et API pour créer une application fonctionnelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!