Heim > Web-Frontend > CSS-Tutorial > Sammeln von E -Mail -Anmeldungen mit der API der Begriff

Sammeln von E -Mail -Anmeldungen mit der API der Begriff

William Shakespeare
Freigeben: 2025-03-19 10:12:11
Original
578 Leute haben es durchsucht

Dieses Tutorial zeigt, dass das Erstellen eines Newsletter -Signup -Systems mithilfe einer Jamstack -Architektur mit Netlify -Funktionen, der API der Begriff und der Mailgun integriert wird. Lassen Sie uns untersuchen, wie Sie E-Mail-Abonnenten direkt sammeln und eine kostenlose, selbst gehostete Alternative zu etablierten Newsletter-Plattformen anbieten.

Sammeln von E -Mail -Anmeldungen mit der API der Begriff

Viele Einzelpersonen erstellen heute Newsletter und nutzen Dienste wie Substack, MailChimp, Revue (Twitter) und sogar Facebook. Andere entscheiden sich für selbst verwaltete WordPress-Lösungen wie MailPoet. Dieses Tutorial zeigt einen anderen Ansatz: ein benutzerdefiniertes System zum Sammeln von E -Mail -Adressen mithilfe eines HTML -Formulars, einer serverlosen Funktion und einer Datenbank. Diese Methode vermeidet die Kosten, die mit vielen vorhandenen Plattformen verbunden sind.

Dieses Tutorial erstellt ein System mit Netlify-Funktionen, einer Begriffsdatenbank und Mailgun (obwohl ein API-fähiger E-Mail-Dienst ersetzt werden könnte). Alle Dienstleistungen bieten kostenlose Ebenen (mit Einschränkungen). Der komplette Code ist auf GitHub verfügbar.

Begriff: Ihre Datenbanklösung

Der Begriff dient als unsere Datenbank. Es ist ein vielseitiger Arbeitsbereich für Notizen, Projektmanagement und vieles mehr. Die Datenbankfunktionalität, die über eine benutzerfreundliche Oberfläche zugänglich ist, ist ideal für die Speicherung unserer E-Mail-Abonnements. Wir erstellen eine Tabelle (Datenbank) mit dem Namen "Newsletter-E-Mails" mit einer einfachen "E-Mail" -Spalte und der integrierten "Erstellung von Zeit" von "Time".

Begriff API -Token und Integration

Um eine Verbindung zur Begriffsdatenbank herzustellen, erstellen Sie eine Integration der Begriff (nicht in Ihrem Begriffskonto, sondern auf der Notion -Website, während Sie sich angemeldet haben). Nennen Sie es "Newsletter Signups" und erhalten Sie den internen Integrationstoken (API -Token). Teilen Sie die Datenbank "Newsletter -E -Mails" mit dieser Integration zur Gewährung des Zugriffs.

Netlify -Funktionen: serverlose Leistung

Netlify -Funktionen bieten serverlose API -Endpunkte an. Während Netlify -Formulare verwendet werden könnten, beschränken die kostenlosen Stufe die Einreichungen auf 100 pro Monat. Netlify -Funktionen bieten jedoch ein viel höheres Aufruflimit (125.000 pro Monat für einen kostenlosen Plan), was sie für die Behandlung eines größeren Volumens von E -Mail -Anmeldungen geeignet ist.

Einrichten des Netlify -Projekts

Installieren Sie die Netlify CLI ( npm install netlify-cli -g ), erstellen Sie ein Projektverzeichnis, initialisieren Sie NPM ( npm init ) und authentifizieren Sie sich mit Netlify. Eine netlify.toml -Datei ist erforderlich, um das Funktionsverzeichnis ( functions = "functions" ) anzugeben.

Die Netlify -Funktion (index.js)

Diese Funktion übernimmt Form von Formularen. Installieren Sie das Paket @notionhq/client ( npm install @notionhq/client --save ). Erstellen Sie eine .env -Datei mit Ihrem Begriff API -Token ( NOTION_API_TOKEN ) und Datenbank -ID ( NOTION_DATABASE_ID ). Die Datenbank -ID befindet sich in der Begriffs -URL der Datenbank.

Die Funktion index.js validiert E -Mail -Adressen, verwendet die API der Begriff, um der Datenbank E -Mails hinzuzufügen, und gibt eine Erfolgs- oder Fehlerantwort zurück.

Das HTML -Formular (index.html)

Es wird ein einfaches HTML -Formular mit einer E -Mail -Eingabe und einer Sendel -Schaltfläche erstellt. Der JavaScript -Code bestätigt die E -Mail und sendet eine Postanforderung an die Netlify -Funktion ( /.netlify/functions/index ). Bootstrap 5 wird zum Styling verwendet.

Mailgun -Integration (Welcome.js)

Um Bestätigungs -E -Mails zu senden, integrieren Sie Mailgun (oder einen ähnlichen Service). Holen Sie sich Ihre Mailgun -API -Schlüssel und Domäne aus dem MailGun -Dashboard und fügen Sie diese zu Ihrer .env -Datei als MAILGUN_API_KEY und MAILGUN_DOMAIN hinzu.

Installieren Sie das mailgun-js -Paket ( npm install mailgun-js --save ). Erstellen Sie eine welcome.js .

Tests und nächste Schritte

Testen Sie das Formular, überprüfen Sie die Datenbankeinträge und senden Sie eine Postanforderung mit einem Tool wie Postman an die welcome . Denken Sie daran, Ihren Spamordner auf Bestätigungs -E -Mails zu überprüfen.

Zukünftige Verbesserungen umfassen die Implementierung einer geplanten Aufgabe (z. B. die Verwendung von GitHub -Aktionen), um regelmäßig willkommene E -Mails zu senden und Sicherheitsmaßnahmen zum welcome hinzuzufügen.

Dieses Tutorial bietet einen robusten, kostengünstigen und pädagogischen Ansatz zum Aufbau eines Newsletter-Anmeldesystems. Der Prozess zeigt die Möglichkeit, verschiedene Dienste und APIs zu kombinieren, um eine funktionale Anwendung zu erstellen.

Das obige ist der detaillierte Inhalt vonSammeln von E -Mail -Anmeldungen mit der API der Begriff. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage