FirebaseとSendGridを使って登録送付先を取得する方法

FirebaseとSendGridを使って登録送付先を取得する方法

FirebaseとSendGridを利用してメルマガ（ニュースレター）のサービスを実装する場合には、単にメッセージを送信するだけではなく、SendGridからいろいろな情報を取得する必要があります。

SendGridのサーバーとやり取りをするためには、SendGridのAPIキー（秘密鍵／secret key）が必要になります。従って、実装はフロントエンドが直接SendGridのサーバーとやり取りをするのではありません。バックエンド（サーバー）側のサービスを介してSendGridとやり取りをします。

この記事ではまず、SendGridに登録した送付先をバックエンドを介して取得する方法を解説しています。

バックエンドの実装

まず最初にSendGridと直接やり取りをするバックエンドの実装例です。

SendGridに登録した送付先を一括取得する部分のコードです。 バックエンドのサーバーのフレームワークにはexpressを利用しています。 事前にexpressのパッケージをnpmを利用してインストールする必要があります。expressの詳しい実装例はこちらの記事をご覧ください。

SendGridのサーバーから、登録した送付先を一括取得するAPIは「contactdb/recipients」をHTTPの「GET」のメソッドでSendGridのサーバーに送ります。

HTTPの送信にはaxiosを使っています。バックエンドのファンクション（functions）をフロントエンドと別々にWebホスティングする場合には、CORS(Cross Origin Resource Sharing)の設定も必要です。CORSに設定に関してはこちらの記事を参照してください。

import * as express from "express";

const app:express.Express = express();

.....

app.get(

      CONSTANT.API_RECIPIENTS,

      (req: express.Request, res: express.Response) => {

        const url = CONSTANT.SG_URL + CONSTANT.API_RECIPIENTS;

        const options: any = {

          method: "GET",

          url: url,

          headers: { AUthorization: "Bearer " + CONSTANT.SG_API_KEY },

        };

        axios(options)

          .then((response: AxiosResponse) => {

            // 正常終了の場合は登録された送付先のリストを返します

            res.end(

              JSON.stringify({ success: true, data: response.data.recipients })

            );

          })

          .catch((error: any) => {

            // エラーが発生した場合は、空のリストを返します

            res.end({

              success: false,

              error: error.message,

              data: JSON.stringify([]),

            });

          });

      }

    );

フロントエンドの実装

この記事ではフロントエンドのフレームワークにReactを利用した例を紹介しています。

フロントエンドの実装では、バックエンドとのやり取りをする部分とユーザーインターフェースを行う部分を分けて実装した方が将来的なコードの管理や機能の拡張がやりやすくなります。

バックエンドとやり取りをする部分

バックエンドとやり取りをする部分を一つのファイルにまとめます。 今回は、登録した送付先のリストを一括取得するメソッドを抜き出してあります。

getContacts(): Promise<Array<TYPE.Recipient>> {

    return new Promise((resolve): void => {

      // Payload to send the backend

      const options: any = {

        url: this.url + CONSTANT.API_RECIPIENTS,

        method: "GET",

      };

      axios(options)

        .then((res: AxiosResponse): void => {

          // Normal completion: returns a list of contacts

          resolve(res.data.data);

        })

        .catch((error: any): void => {

          // Error: returns an empty array

          resolve([]);

        });

    });

}

このメソッドがバックエンドで実装した処理を呼び出します。 わかりやすくするために、定数を定義したファイルはバックエンドと同じものを使っています。 ソースコード上は「CONSTANT.API_RECIPIENTS」となっていますが、SendGridのAPIと同じ「contactdb/recipients」を使っています。バックエンドのURLは、Webホスティングをフロントエンドとバックエンドで共有する場合は「/」で問題ありませんが、別々のWebホスティングをする場合は、URLを指定する必要があります。

ユーザーインターフェースの実装例

ユーザーインターフェースは、Reactを利用しているので、JSXを利用してHTMLに近い形で記述できます。 以下の例は、取得したSendGridに登録されている送付先のリストをテーブルで表示するようになっています。

import * as React from "react";

import SendGrid from "../lib/sendgrid";

import * as CONSTANT from "../lib/constants";

import * as TYPE from "../lib/types";

interface IProps {}

interface IState {

  contacts: Array<TYPE.Recipient>;

}

export default class CampaginPage extends React.Component<IProps, IState> {

  /** Instance to access SendGrid Server via backend on the web host */

  private sg = new SendGrid(CONSTANT.HOST_URL);

  /** Constructor of this class

   * ＠param props Properties which are passed by the parent component (IProps)

   */

  constructor(props: IProps) {

    super(props);

    // Initializes state of this class

    this.state = {

      contacts: [],

    };

  }

  /** Initialize this class after mounted */

  componentDidMount():void {

    // Gets contacts from SendGrid Server via backned on the web host

    this.sg.getContacts().then((contacts: Array<any>) => {

      console.log(contacts);

      this.setState({

        contacts: contacts,

      });

    });

  }

  render():JSX.Element {

    return (

      <React.Fragment>

        <div>

          <table className="table table-hover">

            <thead>

              <tr className="table-primary">

                <th>E-Mail</th>

                <th>Name</th>

              </tr>

            </thead>

            <tbody>

              {this.state.contacts.map((item: TYPE.Recipient) => (

                <tr key={item.id}>

                  <td>{item.email}</td>

                  <td>{item.first_name + " " + item.last_name}</td>

                </tr>

              ))}

            </tbody>

          </table>

        </div>

      </React.Fragment>

    );

  }

}

これで、Firebaseを利用してSendGridのサーバーから登録されている送付先を取得して表示することができます。 一つの情報の場合は余り複雑ではないので、フロントエンドとバックエンドを同じWebホスティングで実装しても大きな問題にはなりません。しかし、今後この実装を基に、別の情報をやり取りする部分を追加していく必要があります。従って、今後の実装を考えてこれから紹介していく実装例ではWebホスティングを分ける方向で進めて行きます。

まとめ

この記事では、Firebaseのバックエンド（ファンクション／functions）とホスティングを利用して、SendGridのサーバーから登録されている送付先情報（contacts）を取得して表示する実装例について紹介してきました。

大きく分けて３つの部分から構成されています。

＊　バックエンド

＊　フロントエンドのバックエンドとのやり取りを行うモジュール

＊　表示（ユーザーインターフェース）

他の情報に関しても基本的なコンセプトは同じです。この繰り返しで、SendGridを利用するためのやり取りを実装する事ができます。この連載では、一つ一つの情報について今後詳しく紹介していく予定です。