概念APIで電子メールのサインアップを収集します

このチュートリアルでは、Jamstackアーキテクチャを使用してニュースレターのサインアップシステムを構築し、Netlify機能、概念API、Mailgunを統合します。メールサブスクライバーを直接収集する方法を調べてみましょう。

今日、多くの個人がニュースレターを作成し、Subrcack、MailChimp、Revue（Twitter）、さらにはFacebookなどのサービスを活用しています。その他は、MailPoetなどの自己管理WordPressソリューションを選択します。このチュートリアルでは、HTMLフォーム、サーバーレス機能、データベースを使用して電子メールアドレスを収集するためのカスタムシステムです。この方法は、多くの既存のプラットフォームに関連するコストを回避します。

このチュートリアルは、netlify関数、概念データベース、およびmailgunを使用してシステムを構築します（ただし、API対応の電子メールサービスは置き換えられる可能性があります）。すべてのサービスには無料の層があります（制限付き）。完全なコードはGitHubで利用できます。

概念：データベースソリューション

概念はデータベースとして機能します。これは、メモを取る、プロジェクト管理などのための多用途のワークスペースです。ユーザーフレンドリーなインターフェイスからアクセスできるデータベース機能は、メールサブスクリプションを保存するのに最適です。 「ニュースレターメール」と呼ばれるテーブル（データベース）を作成し、シンプルな「電子メール」列と概念の組み込み「作成された時間」プロパティを使用します。

概念APIトークンと統合

概念データベースに接続するには、概念統合を作成します（概念アカウント内ではなく、ログイン中の概念Webサイトで）。 「ニュースレターのサインアップ」に名前を付けて、内部統合トークン（APIトークン）を取得します。重要なことに、「ニュースレターメール」データベースをこの統合と共有して、アクセスを付与します。

NetLify関数：サーバーレス電源

Netlify関数は、サーバーレスAPIエンドポイントを提供します。 Netlifyフォームを使用できますが、無料ティアは1か月あたり100までの提出を制限します。ただし、Netlify関数は、はるかに高い呼び出し限界（無料プランで月額125,000）を提供し、より多くの電子メールサインアップを処理するのに適しています。

Netlifyプロジェクトのセットアップ

Netlify CLI（ npm install netlify-cli -g ）をインストールし、プロジェクトディレクトリを作成し、NPM（ npm init ）を初期化し、NetLifyで認証します。 functionsディレクトリ（ functions = "functions" ）を指定するには、 netlify.tomlファイルが必要です。

netlify関数（index.js）

この関数は、フォームの送信を処理します。 @notionhq/clientパッケージ（ npm install @notionhq/client --save ）をインストールします。 notion APIトークン（ NOTION_API_TOKEN ）とデータベースID（ NOTION_DATABASE_ID ）を使用して.envファイルを作成します。データベースIDは、データベースの概念URLにあります。

index.js関数は、電子メールアドレスを検証し、概念APIを使用してデータベースにメールを追加し、成功またはエラー応答を返します。

HTMLフォーム（index.html）

電子メール入力と送信ボタンを備えた単純なHTMLフォームが作成されます。 JavaScriptコードは電子メールを検証し、Netlify関数（ /.netlify/functions/index ）にpostリクエストを送信します。ブートストラップ5はスタイリングに使用されます。

Mailgun Integration（welcome.js）

確認メールを送信するには、MailGun（または同様のサービス）を統合します。 MailGunダッシュボードからMailGun APIキーとドメインを取得し、 MAILGUN_API_KEYおよびMAILGUN_DOMAINとして.envファイルに追加します。

mailgun-jsパッケージ（ npm install mailgun-js --save ）をインストールします。 welcome.js Netlify関数を作成して、概念から新しいサインアップを取得し（過去30分以内）、Mailgun APIを使用して確認メールを送信します。

テストと次のステップ

フォームをテストし、データベースエントリを確認し、郵便配達員のようなツールを使用してwelcome関数に投稿リクエストを送信します。確認メールについては、スパムフォルダーを確認してください。

将来の改善には、スケジュールされたタスクの実装（GitHubアクションを使用するなど）を実装して、ウェルカムメールを定期的に送信し、 welcomeエンドポイントにセキュリティ対策を追加することが含まれます。

このチュートリアルは、ニュースレターサインアップシステムを構築するための堅牢で費用対効果の高い教育的アプローチを提供します。このプロセスは、さまざまなサービスとAPIを組み合わせて機能的なアプリケーションを作成する力を示しています。

以上が概念APIで電子メールのサインアップを収集しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。