FirebaseとSendGridを使って送信者の削除を行うには？
FirebaseとSendGridを使って送信者の削除を行うには？
2020年11月26日
FirebaseとSendGridを使って送信者の削除を行うには？
FirebaseとSendGridを利用してメルマガ（ニュースレター）のサービスを実装する場合には、単にメッセージを送信するだけではなく、SendGridといろいろな情報を取得する必要があります。
今日は、メッセージの送信者の削除を中心にお届けします。
前回までに、SendGridに登録されているメッセージ配信先の取得と、送信者の登録の実装例を紹介してきました。SendGridのサーバーのやり取りのパターンとしては、「データの取得」、「データの追加」をカバーしています。もう一つ「削除」や「指定したデータの取得」の場合は、処理対象のＩＤをSendGridに送って処理するスタイルのやりとりがあります。
この記事ではこの最後のパターンのIDを使ったやり取りの例を紹介します。
削除する送信者の特定が必要
今回は登録送信者の削除を例にお届けします。登録送信者の削除には削除する送信者を特定する必要があります。
特定の方法はいろいろありますが、一般的な方法として、登録送信者の一覧を表示してその中から選ぶというのがエラー処理もシンプルになるので多くのWebサービスやWebアプリで利用される方法です。
全ての登録送信者を取得する方法は、基本的に以前に紹介したSendGridに登録されているメッセージ配信先の取得と同じです。 違うのはAPIが異なるだけで実際にコードに書く場合にはほぼ同じコードを使うことができます。
ここでは、取得した登録送信者をテーブルに表示するコードの例を挙げて起きます。 取得した登録送信者は、Reactのステートで管理しています。
render() {
return (
<React.Fragment>
<SenderForm />
<table className="table table-hover">
<thead>
<tr className="table-primary">
<th>E-Mail</th>
<th>Name</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.senders.map((item: TYPE.sgSender) => (
<tr key={item.id}>
<td>{item.from.email}</td>
<td>{item.from.name}</td>
<td>
<button
id={String(item.id)}
className="btn btn-secondary"
onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
this.select(e)
}
>
Select
</button>
</td>
<td>
<button
id={String(item.id)}
className="btn btn-danger"
onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
this.delete(e)
}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</React.Fragment>
);
}
送信者一覧を、ユーザーインターフェースの送信者のページが呼ばれたときに取得しておきます。 これを、テーブルに表示します。各送信者のエントリー（行）に削除(delete)と選択(select)のボタンをつけて選べるようにしています。選択(select)のボタンは、送信者の情報を更新する場合などに利用できます。要領は送信者を追加する場合と同様の処理で実装できます。HTTPの「POST」の代わりに「PATCH」を使います。また、SendGridに送信するデータが若干違います。（SendGridのAPIのドキュメントを見るとわかります）
削除の場合は、削除ボタンを押したときに削除する送信者を特定します。特定にはSendGridの登録送信者（sender）のIDを使います。削除ボタンに「id」のアトリビュートを入れておいて、イベント処理でIDを取得します。 以下がイベント処理の例です。
delete(e: React.MouseEvent<HTMLButtonElement>) {
const id = e.currentTarget.id;
this.sg.deleteSender(id);
// 必要に応じて、送信者の一覧を再取得する処理を入れる（画面の更新が必要な場合）
}
アトリビュートで指定しているIDをイベントのオブジェクトから取得できます。（e.currentTarget.id）
これを実際にバックエンドに送信するモジュールに渡してバックエンドの処理を呼び出します。 この部分は、「データの追加」、「データの取得」の場合に似ています。
deleteSender(id: string): Promise<boolean> {
return new Promise((resolve) => {
// Payload to send the backend
const options: any = {
url: this.url + CONSTANT.API_SENDERS,
method: "DELETE",
data: {
id: id,
},
};
axios(options)
.then((res: AxiosResponse): void => {
// Normal completion: returns a list of contacts
console.log(res.data);
resolve(res.data.success);
})
.catch((error: any): void => {
// Error: returns an empty array
console.log(error);
resolve(false);
});
});
}
バックエンドの処理
あとは、この処理を受けてSendGridとやり取りをするバックエンドを実装するだけです。 削除の場合は、SendGridの送信先のURLに送信者のIDを追加して送るところが他のデータ処理と違います。 特定のIDのデータのみを取得する場合も似たようなやり方をします。
// Deletes a sender
this.app.delete(
CONSTANT.API_SENDERS,
(req: express.Request, res: express.Response) => {
const id = req.body.id;
const url = CONSTANT.SG_URL + CONSTANT.API_SENDERS + "/" + id;
const options: any = {
method: "DELETE",
url: url,
headers: { AUthorization: "Bearer " + CONSTANT.SG_API_KEY },
};
axios(options)
.then((response: AxiosResponse) => {
JSON.stringify({
success: true,
data: "Success to delete",
});
})
.then((error: any) => {
res.end(
JSON.stringify({
success: false,
data: error,
})
);
});
}
);
一覧表示のデータの更新
SendGridの登録送信者を削除しても表示中の登録送信者のデータは基本的には更新されません。 削除後に取得しているデータを更新する処理を入れる必要があります。
まとめ
この記事では、SendGridとFirebaseを利用してメルマガ（ニュースレーター）のサービスを実装する場合に、データの削除をする場合の実装を紹介しています。
これで、SendGridのデータ処理の基本パターンの「データの取得」、「データの追加」、「データの削除」の例を紹介したことになります。データの更新がありますが、基本的な処理はデータの削除とデータの追加を組み合わせた感じで実装できます。
- 更新するデーターを一覧から選択
- 既存のデータをフォームに取り込んで表示
- フォームのデータを更新してバックエンドに送信
という手順です。 SendGridとのデータのやり取りはこの基本パターンがわかれば後は、APIの置き換えなど同じ処理の繰り返しなのでコードの量はある程度多くなりますが、処理自体は簡単に実装できます。
次回は、送信するメッセージのフォームの作り方を紹介する予定です。
コメント
コメントを投稿