電子メールは、非常に速く、安価で、トップフリーのオーガニックなビジネス コミュニケーションの不可欠な方法です。 製品を構築するとき、電子メールは、さまざまな種類のデータを電子的に送信するための効果的かつ効率的な媒体をビジネスに大きく提供します。
この記事では、Mailgun サービスを使用してメールを送信するためのフォームを作成する方法を学習します。 フロントエンド アプリケーションには React を使用し、バックエンドでは Node.js を使用し、非同期リクエストを作成するには Axios を使用し、通知を表示するには React-Toastify パッケージを使用します。 . 最終的には、次のように機能するメール サービスを構築する必要がありました。
注: 今日少しずつ構築するこのプロジェクトのリポジトリにアクセスし、これを使用して実装を試すことができます GitHub のリンク.
始めましょう!
プロジェクトの設定
今日最初に構築するのは、React を使用したフロントエンド アプリケーションです。
React ライブラリを使い始めるのは簡単で、JavaScript ファイル (CDN) を HTML ファイルに含めるだけです。 しかし、実際の大規模なアプリケーションの場合は、React CLI を使用することをお勧めします。 今日のチュートリアルでは React CLI を使用します。
この記事では、React チームによって作成された CLI ツールを使用して、React アプリケーションの迅速な開発を容易にします。 React CLI をインストールするには、次のコマンドを実行します –
npm install -g create-react-app
.
それでは、プロジェクトを作成して名前を付けましょう react-node-email-app
、次のコマンドを使用します。
$ npx create-react-app react-node-email-app
これにより、プロジェクトをビルドするためのスターター テンプレートが作成されます。 このテンプレートを表示するには、プロジェクト ディレクトリに移動し、開発サーバーを実行します。
$ cd react-node-email-app
$ yarn start
次に、ブラウザでフロントエンドを表示できます。 localhost:3000
.
プロジェクト UI の構築
これで、アプリケーションのフロントエンドの構築を開始できます。 まず、メールを送信できるフォームを作成します。
これは App.js
ファイルを次のように更新します。
import './App.css';
import { useState } from 'react'; function App() { const = useState('') const [subject, setSubject] = useState('') const [message, setMessage] = useState('') return ( <div className="App"> <section> <form> <h1>Send Email</h1> <div className='form-wrapper'> <div> <label htmlFor='email'>Email Address</label> <input onChange={(e)=>setEmail(e.target.value)} type="email" id="email"></input> </div> <div> <label htmlFor='subject'>Email Subject</label> <input onChange={(e)=>setSubject(e.target.value)} type="text" id="subject"></input> </div> <div> <label htmlFor='message'>Message Body</label> <textarea onChange={(e)=>setMessage(e.target.value)} type="text" id="message"></textarea> </div> <div> <button type='submit'>Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
ここでは、XNUMX つの入力フィールドを持つフォームを作成しました。XNUMX つは受信者の電子メールを入力するためのもので、もう XNUMX つは電子メールの件名を入力するためのもので、最後の XNUMX つは電子メールのメイン メッセージを入力するためのものです。
さまざまな入力フィールドで、入力ボックスの変更を処理する状態を設定しました。これは、ユーザーが onChange
イベントリスナー。
また、メール送信用のボタンも作成しました。
フォームを美しくするために、 App.css
次の CSS スタイルを持つファイルで、その内容は次のようになります。
.App { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #282c34;
}
.App section form { min-width: 25rem; margin: 0 auto; border: solid 1px #bdbdbd; border-radius: 8px; padding: 2rem;
}
form h1 { text-align: center; color: #ffffff;
}
form .form-wrapper { margin: 0 auto;
} form .form-wrapper > div { margin-bottom: 1rem;
}
form .form-wrapper > div > label { margin-bottom: 0.5rem; color: #ffffff; display: block;
}
form .form-wrapper > div > input, form .form-wrapper > div > textarea { padding: 0.5rem; border-radius: 4px; border: none; outline: none; min-width: 20rem; font-family: Arial, Helvetica, sans-serif;
}
form .form-wrapper > div > button { padding: 1rem 2.5rem; color: white; background: rgb(4, 144, 199); border-radius: 4px; border: none; cursor: pointer;
}
アプリケーションのパフォーマンスを向上させるには、 onSubmit
ボタンがクリックされたときに実際にページを更新するフォームのデフォルトの動作を防ぐために、ハンドラーイベント関数をフォーム要素で定義する必要があります。 バックグラウンドでリクエストを送信しているため、ボタンがクリックされたときにページが更新されるのは理想的ではありません。これは、ユーザーにとってより良いエクスペリエンスです。
また、メール、件名、またはメッセージを入力していない場合、ユーザーがメールを送信できないようにすることも理想的です。 そのためには、それらのフィールドが空かどうかを確認するために、いくつかの入力検証が必要です。 そうである場合、「メール、件名、およびメッセージを入力してください」というメッセージとともにエラーが返されます。
これを行うには、 乾杯 アプリケーションにパッケージ化します。 プロジェクト ターミナルで次のコマンドを実行してインストールする必要があります。
$ yarn add react-toastify
次に、更新 App.js
submitHandler
関数:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css' function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button type="submit">Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
これで、ユーザーがボタンをクリックして電子メールを送信するたびに、電子メール アドレス、電子メールの件名、およびメッセージ入力フィールドを事前に入力しなくても、トースト メッセージによって、必要なすべての操作を実行するよう求められます。
も必要なので、 axios
AJAX リクエストを作成するためのライブラリもインストールする必要があります。
$ yarn add axios
次に、作成します try/catch
ブロックを使用して、電子メールを送信するための非同期要求を処理します。
App.js
は次のように更新されました。
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios"; function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const [loading, setLoading] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); try { setLoading(true); const { data } = await axios.post(`/api/email`, { email, subject, message, }); setLoading(false); toast.success(data.message); } catch (error) { setLoading(false); toast.error( error.response && error.response.data.message ? error.response.data.message : error.message ); } }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button disabled={loading} type="submit"> {loading ? "Sending..." : "Send Email"} </button> </div> </div> </form> </section> </div> );
} export default App;
Node を使用してバックエンド アプリケーションを構築する
この時点で、アプリケーションのフロントエンドが正常に実装されました。 次に、Node.js を使用してバックエンドの作業を開始します。
まず、プロジェクトのルートに新しいディレクトリを作成します。 backend
.
今、 cd
バックエンドディレクトリに移動して実行します npm init
Node アプリの作成を開始するためにターミナルから。
$ npm init --y
ベストプラクティス、業界で認められた標準、および含まれているチートシートを含む、Gitを学習するための実践的で実用的なガイドを確認してください。 グーグルGitコマンドを停止し、実際に 学ぶ それ!
Note: --y
オプションは、NPM に、 init
指図。 これにより、基本的に、 package.json
ファイルにソフトウェアを指定する必要があります。
これにより、 package.json
バックエンド プロジェクトのアプリケーション依存関係の管理を可能にするファイル。
次に、次のパッケージをインストールします。
express
: Web サーバーを作成しますdotenv
: 構成データを読み取り、アクセス可能なコードから機密データを遠ざける優れた方法として機能しますmailgun-js
: Mailgun を使用したメールの送信を有効にします
$ yarn add express dotenv mailgun-js
これらのパッケージがインストールされたら、XNUMX つの新しいファイルを作成します。 server.js
および .env
セクションに backend
フォルダにコピーします。
.env
ファイルに、Mailgun のドメインと API キーを保持します。
サーバーの構築
この中の server.js
ファイルの目的は、Express.js を使用してサーバーを作成することです。 そこで、インポートします express
, dotenv
, mailgun-js
パッケージ。
server.js
は次のように更新されます。
const express = require("express");
const dotenv = require("dotenv");
const mg = require("mailgun-js"); dotenv.config(); const mailgun = () => mg({ apiKey: process.env.MAILGUN_API_KEY, domain: process.env.MAILGUN_DOMAIN, });
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true })); app.post("/api/email", (req, res) => { const { email, subject, message } = req.body; mailgun() .messages() .send( { from: "John Doe <>", to: `${email}`, subject: `${subject}`, html: `<p>${message}</p>`, }, (error, body) => { if (error) { console.log(error); res.status(500).send({ message: "Error in sending email" }); } else { console.log(body); res.send({ message: "Email sent successfully" }); } } );
}); const port = process.env.PORT || 4000;
app.listen(port, () => { console.log(`App is served at port ${port}`);
});
ここでは、 mg
関数に割り当て、 mailgun
。 の中に mg
関数では、環境変数から API キーとドメインを渡して使用します mailgun
メールを送信します。
その後、Express アプリが作成され、XNUMX つのミドルウェアが作成されます。 express.json()
および express.urlencoded
API リクエストから Express を使用してペイロードを取得し、それを req.body
.
次に、 POST
パスを使用したルート /api/email
を作成し、その中にリクエストとレスポンスを受け付ける関数を定義します。 メール、件名、およびメッセージは、 req.body
物体。 これらは、ユーザーがフロントエンド アプリケーションの入力フィールドから入力するデータです。
これを抽出すると、 messages
からのメソッド mailgun
最初に設定された関数が呼び出され、その後、 send
メソッドが呼び出されます。 send メソッドでは、次のプロパティを保持するオブジェクトが渡されます。
from
: メールの「差出人」セクションでユーザーに表示される名前。to
電子メールの送信先の電子メール アドレス (入力フィールドに入力された電子メール)。subject
: 件名が入力されました。html
: 電子メール アドレスに送信されるメッセージを定義する HTML マークアップ。
渡された XNUMX 番目のパラメータ send
method は、エラーと本体を受け入れる関数です。 この関数では、 console.log
エラー、ステータス コードを 500
、「電子メールの送信中にエラーが発生しました」というメッセージを送信します。 それ以外の場合は、本文をログに記録し、成功した場合は「メールが正常に送信されました」というメッセージを送信します。
ファイルの最後で、ポートを取得します。 .env
ファイルして呼び出す app.listen()
サーバーを起動します。
API キーの定義
アプリケーションで Mailgun を使用するための API キーを定義するための最初のステップは、無料のアカウントを作成することです。 公式ウェブサイト.
アカウントを作成すると、作成したアカウントの API キーが送信されます。ダッシュボードのサイド ナビゲーションにある送信タブに移動すると、ドメインにアクセスできます。
サンドボックス リンクと API キーの両方をコピーし、 .env
私が行ったように、ファイル:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
次に、リンクをクリックしてドメインの概要ページに戻ります。 ページは次のようになります。
そこで、ページの右側に、電子メールの送信をテストする電子メール アドレスを入力して、承認された受信者を作成します。
[受信者を保存] ボタンをクリックすると、以下のようなメールが送信されます。
「同意する」ボタンをクリックすると、外部ページにリダイレクトされます。
「はい」ボタンをクリックして、受信者アドレスの有効化に進みます。 これで、そのアドレスは Mailgun を介してメールを受信できるようになりました。
最後に、Mailgun を正常にセットアップし、Node.js を使用してバックエンドを構築しました。
これで、バックエンド ディレクトリから次のコードを実行して、Express サーバーを快適に起動できます。
$ node server.js
Node アプリを React アプリに接続する
フロントエンドをバックエンドに接続するには、 package.json
React アプリのプロジェクトのルート ディレクトリにあるファイル。 次に、 name
プロパティ、という新しいプロパティを追加します proxy
、バックエンド サーバーのポートの値を持つ必要があります。 次のようになります。
"proxy": "http://localhost:4000/"
これを追加すると、フロントエンドから行うすべての非同期リクエストが、作成したバックエンド サーバーにリダイレクトされます。
フロントエンド開発サーバーを再起動してアプリをリロードします。
メールアドレス(先ほど有効にした受信者)、メールの件名、メッセージを入力して、これまでのすべての実装をテストしてから、[送信] ボタンをクリックしてください。 これは、電子メールが成功したことを示す成功トーストを表示する必要があります。
また、受信者アドレスの受信トレイにも、私と同じようにメールが届くはずです。
アップラッピング
メールの送信は、パスワードのリセット、アプリケーションへのユーザーの歓迎、注文の確認などの場合に非常に役立ちます。この記事では、Mailgun を使用して Node.js アプリケーションでメールを送信することがいかに簡単かを学びました。 . Mailgun での作業がいかに簡単で、使い始めるためにアカウントを作成するのがいかにユーザーフレンドリーで迅速であるかがわかります。
次回、プロジェクトのメール インフラストラクチャを構築する必要があることに気付いた場合は、Mailgun などのメール送信ツールをチェックしてみてください。 ツールの使用についてサポートが必要な場合は、私または開発者コミュニティの誰にでもお気軽にお問い合わせください。喜んでお手伝いさせていただきます。
その他のリソース
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- できる
- 同意
- 受け入れる
- アクセス
- アクセス可能な
- 従った
- 実際に
- 追加されました
- 住所
- 後
- 先んじて
- 警告
- すべて
- および
- 別の
- 回答
- 誰も
- API
- APIキー
- アプリ
- 申し込み
- 周りに
- 記事
- 割り当てられた
- オート
- Axios
- バック
- バックエンド
- 背景
- bash
- になる
- さ
- 以下
- より良いです
- ビット
- ブロック
- ボディ
- 国境
- ボックス
- ブラウザ
- ビルド
- 建物
- 内蔵
- ビジネス
- (Comma Separated Values) ボタンをクリックして、各々のジョブ実行の詳細(開始/停止時間、変数値など)のCSVファイルをダウンロードします。
- コール
- 呼ばれます
- 取得することができます
- 例
- レスリング
- センター
- 変化する
- 文字
- 安い
- チェック
- コード
- コミュニケーション
- コミュニティ
- お問合せ
- 中身
- 変換
- 作ります
- 作成した
- 作成します。
- 作成
- CSS
- ダッシュボード
- データ
- 中
- デフォルト
- 定義済みの
- 定義する
- 定義
- Developer
- 開発
- DID
- ドメイン
- 各
- 前
- 効果的な
- 効率的な
- 電子的に
- メール
- 可能
- 入力します
- 入力されました
- 入ります
- 環境
- エラー
- 本質的な
- 本質的に
- 等
- イベント
- 体験
- 表現します
- 外部
- 容易にする
- スピーディー
- フィールド
- フィールズ
- File
- 埋める
- もう完成させ、ワークスペースに掲示しましたか?
- 名
- フォーカス
- フォロー中
- フォーム
- フォーム
- 無料版
- から
- フロントエンド
- function
- 取得する
- 受け
- GIF
- Gitの
- 与える
- Go
- 素晴らしい
- 大いに
- ガイド
- ハンドル
- 実践的な
- 助けます
- ヒット
- 保持している
- ホバー
- 認定条件
- How To
- HTML
- HTTPS
- ICON
- 理想
- 実装
- 実装
- import
- 改善します
- in
- 含まれました
- 含めて
- インフラ関連事業
- 当初
- install
- インストール
- IT
- JavaScriptを
- John Redfern
- JOHN DOE
- キープ
- キー
- キー
- 大規模
- 姓
- LEARN
- 学んだ
- 学習
- LG
- 図書館
- LINK
- ローディング
- 見て
- のように見える
- LOOKS
- 製
- メイン
- make
- 作成
- 管理
- ミディアム
- メッセージ
- 方法
- 移動する
- 名
- NAV
- ナビゲート
- 必要
- 新作
- Node.js
- 通知
- オブジェクト
- 客観
- ONE
- オプション
- 注文
- オーガニック
- さもないと
- 概要
- パッケージ
- パッケージ
- パラメーター
- 渡された
- パスワード
- path
- パフォーマンス
- プラトン
- プラトンデータインテリジェンス
- プラトデータ
- プレイ
- お願いします
- ポイント
- 実用的
- 防ぐ
- プロセス
- 製品
- プロジェクト
- プロパティ
- 財産
- 保護された
- 提供します
- 代理
- 目的
- 質問
- 急速な
- RE
- リーチ
- 反応する
- 現実の世界
- 受け取ります
- 受け入れ
- 残っている
- 倉庫
- 要求
- リクエスト
- の提出が必要です
- 応答
- return
- リング
- ルート
- ルート
- ラン
- ランニング
- サンドボックス
- Save
- 言う
- 二番
- 秒
- セクション
- 送信
- 敏感な
- 役立つ
- サービス
- セッションに
- 設定
- Shadow
- すべき
- 表示する
- 示す
- 側
- 簡単な拡張で
- から
- So
- 固体
- 一部
- 何か
- スピン
- スタックアバス
- 規格
- start
- 開始
- 都道府県
- Status:
- 手順
- Force Stop
- テーマ
- 提出
- 提出する
- 成功
- 成功した
- 首尾よく
- そのような
- SVG
- 取り
- ターゲット
- チーム
- 伝える
- template
- ターミナル
- test
- サンドボックス
- アプリ環境に合わせて
- その中に
- もの
- 三
- 介して
- 時間
- 〜へ
- トースト
- 今日
- あまりに
- ツール
- 豊富なツール群
- 遷移
- 送信します
- トリガー
- true
- チュートリアル
- 下
- アップデイト
- 更新しました
- us
- つかいます
- ユーザー
- 「DeckleBenchは非常に使いやすく最適なソリューションを簡単に見つけることができるため、稼働率が向上しコストも削減した。当社の旧システムは良かったが改善は期待していなかった。
- users
- 値
- さまざまな
- Ve
- 詳しく見る
- ウェブ
- 歓迎する
- which
- while
- 白
- 意志
- 無し
- 仕事
- 作品
- でしょう
- XML
- You
- あなたの
- あなた自身
- ゼファーネット