Webサービスのバックエンドの実装

Silicon Valley Super Ware

2020年7月19日

Webサービスのバックエンドの実装

今週はバックエンドの実装を中心にお届けします。
先週簡単なバックエンドの実装の例を「Hello World!」で紹介しました。

「express」のフレームワークを使えば意外に簡単にできました！

今回のバックエンドの基本的な機能は、SendGridのREST APIへのアクセスを 「フロントエンドに代わって行う」のが主な機能です。
やる事は大きく2つです

• フロントエンドからリクエストが何かを識別
• リクエストの内容に応じてSendGridからのデータの取得と、フロントエンドへの応答

これが、今回実装するバックエンドのサービスになります

外部パッケージ（モジュール）で簡単実装！

実際の実装は外部のモジュールを導入する事で、比較的シンプルなコードで実装できます。
今回利用する主なパーケージは

• Express
• Request

です。

この２つが上に挙げたポイントとなる処理をやってくれます。

Expressは、フロントエンドが指定したURLを読み取ってそれに応じた処理に 振り分ける役割を担当します。
これが、先週例題で紹介した「Hello World」の例です。 今回は、3つの処理を、振り分けます

• 宛先リストの取得(contacts)
• 送信登録者のリストの取得(senders)
• メッセージの送信(send)

これを、それぞれ異なるURLで振り分けます

Requestは、SendGridのRest APIを送る役割です。

Expressによる振り分け

まずは、Expressによる振り分けです。

this.app.post( CONSTANTS.API_CONTACTS, async (req: express.Request, res: express.Response) => {
   // ここに処理内容を書く
}

が基本の書き方です。
expressは「import * as express from "express"」でインポートします。 そのうえで、「this.app = express()」でオブジェクトを作ります。
「CONSTANTS.API_CONTACTS」はカスタムAPIで決めた「URL」に対応する文字列になります。 コード上に直接URLを書くと、コードの管理が面倒になるので、定数としてまとめて定義すると コードの管理がやりやすくなります。
「this.app.post」は、クライアント（フロントエンド）が 使っているHTTPメソッドです。今回は全てのカスタムAPIを「POST」にしているので、「post」に なっています。
「req」がリクエストのデータで、「res」が応答の為のオブジェクトになります。

「req」からフロントエンドが送ってくる必要なデータを取り出して、SendGridへのリクエストの 情報を作ります。
あとは、SendGridからの応答に応じて、フロントエンドに応答する情報をつくるのが 主な処理内容になります。

SendGridとのやり取りは「外部のサービス（プログラム）」になるので非同期のやり取りになります。 そのため、処理で「await」を使う必要があるので、「async」をコールバック関数に着けておきます。

宛先リストの取得の例です。

では、例として、SendGridから宛先リストを取得する場合のコードの例です。

this.app.post(    CONSTANTS.API_CONTACTS,
       async (req: express.Request, res: express.Response) => {
         const url: string = CONSTANTS.SG_API_URL + CONSTANTS.SG_API_CONTACTS;
         const options: any = {
         method: "GET",
         url: url,
         headers: { Authorization: this.authHeader },
      };
      request(
         options,
            (error: any, response: request.Response, body: any) => {
               if (error) {
                  this.errorMessage = error;
                  res.end(
                      JSON.stringify({ result: false, data: this.errorMessage })
                  );
               } else {
                  const contacts: Array<TYPE.Contact> = JSON.parse(body).recipients;
                   res.end(JSON.stringify({ result: true, data: contacts }));
               }
            }
         );
      }
   );

「url」は、SendGridのAPIです。ベースのURL「https://https://api.sendgrid.com/v3」とRest APIの「/contactdb/recipients」の組み合わせです。 先ほどの例と同じように、コード上に直接値を書かずにまとめて定数として定義するのが管理しやすいコードにするコツです。

//
// SendGrid V3 API
//
/** Base URL for SendGrid REST API (v3) */
export const SG_API_URL = "https://api.sendgrid.com/v3";
/** SendGrid Legacy Marketing Campaigns -- CONTACTS API - Recipients */
export const SG_API_CONTACTS = "/contactdb/recipients";
/** SendGird Legacy Marketing Campaigns -- Sender Identities API */
export const SG_API_SENDERS = "/senders";
/** SendGrid Mail Send -- v3 Mail Send */
export const SG_API_MAIL = "/mail/send";
//
// Custome API
//
/** Custom API to get contacts from SendGrid server */
export const API_CONTACTS = "/contacts";
/** Custom API to get senders from SendGrid server */
export const API_SENDERS = "/senders";
/** Custom API to send a message via SendGrid server */
export const API_SEND = "/send";

同じデータを何か所かで使う場合、タイプミスする可能性や後でコードを直す事を考えると
一か所にまとめると、ミスを減らすだけではなく変更も簡単になります

サンプルコードを使えば記述も簡単！

SendGridとのやり取りは、6月に体験した「REST API」を使います。
大切なのは、まずはSendGridのドキュメントを見てAPIの仕様をきちんと理解する事です。 実際にプログラムする前に「Postman」などでAPIを試したり、Postmanの作るサンプルコードを見ると参考になります。 SendGridにも、構造計画研究所の提供する日本語のサイトにはありませんが、アメリカのSendGridのサイトに行くと、 APIのドキュメントに「Tri it」というタブがあって、それを利用すると、APIの送り方の例やサンプルコードを見る事ができます。
登録送信者も同じように書けばできます。 明日はメッセージを送る部分について解説します。
シリコンバレースーパーウエアでは、バックエンドを含めた本格的なWebサービスを短期間で 作れるようになる講座を提供しています。 単純に、Webサービスを作るだけではなく、どのように作って、どのようにビジネスにつなげて 行くかを提供します。また、フリーランスの方だけではなく、就職を考えている方にも 「実践力」を養うことで「即戦力」のエンジニアとしてのスキルを身に着ける事ができます！

興味のある方は今すぐお問合せください！

またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。

• お問合せ
• Webサイト
• ニュースレターのお申込み

Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.