のSMSメッセージを送信する

顧客にSMSを送信する反応とAWSを使用して増幅
それは彼らの食糧が準備ができていることを顧客に通知しているかどうか、学校の通知、または配信パッケージ上のステータスの更新を取得するSMSは、通信を得るための素晴らしい方法です.
それがプッシュ通知、電子メール、またはSMSを送信するとなると、AWSはAmazon Simple Notification Service またはSNS.このポストでは、我々はどのように我々は反応で構築されたプロジェクトの内部SNSを活用できる方法について説明しますAWS Amplify .
具体的には、私たちはしばしば、デリバリーアプリなどのデリバリーアプリで発見されたシナリオを模倣します.顧客は私たちに注文を送ってくれました.アーキテクチャのセットアップは少し工夫されていますが、このポストは、人々のための基礎的なツールの多くを開始するために、私たちは将来的により複雑なアプリケーションを構築するのに役立ちます.

キーSNSコンセプト
SNSと共に働くとき、あなたが一般的に動く4つの主要な考えを定義することは重要です:

トピック:SNSサービスの多くのインスタンスを作成することが可能です.たとえば、サインアップに関するメールを送信すると、注文に関するテキストを送信する別のメールを作成できます.それぞれのSNSインスタンスは名前を持ちます.

出版社:単純に、誰がメッセージを送信して置く.この例では、メッセージを公開するAPIを作成します.しかし、これはまた、データベースに保存されている項目などの別のアクションに基づいて起動することもできます.

加入者:出版社への転換は加入者である.受取人は誰ですか.

ファンアウト:Serverlessなアーキテクチャで最も一般的なデザインパターンの1つ.これは、複数のエンドポイント(電子メール、電話番号など)を単一のトピックを購読することができます.そうすることで、1つのメッセージが公開されるとき、それは複数の目標に送られることができます(または外されます).

プロジェクトスターターファイル
お客様にSMSメッセージを送信するに焦点を保つために、我々のプロジェクトは、注文の静的なリストを使用します.このセットアップを開始するには、無料でクローンを感じるthis repo Githubから依存関係をインストールします.
プロジェクトを起動すると、次のページが表示されますlocalhost:3000
マークアップは、アプリケーションを作成する焦点ではありませんが、見て自由に感じる.注文に使用される模擬データは確かに何かを呼び出す価値がある.具体的には、順序はid , products , status , and customerNotes .

🤔 Because this is a delivery app, you might be wondering why there aren't fields like phoneNumber and address. Instead of having those accessible on the frontend, we'll use the order's id to send them to the driver from our backend whenever an order is ready for delivery. This helps protect sensitive customer information by only allowing drivers to access them when they need them.

バックエンドの追加
我々のシナリオを思い出してください:ドライバーは顧客注文のリストを与えられます.注文を選択する際には、注文した顧客に通知します.
開始するには、我々は最初の設定を増幅したいので、カテゴリを追加を開始することができます.

If needing to setup AWS Amplify for the first time, add run the command npm i -g @aws-amplify/cli and follow the prompts after running amplify configure.

お客様の端末で、プロジェクトのディレクトリにあるプロジェクトで、次のコマンドを実行して、プロジェクトの増幅を初期化します

amplify init

プロジェクトの名前を選択した後n デフォルトの設定を受け入れたいかどうか尋ねました.

The default configuration assumes a project created with create-react-app, but this project is scaffolded with create-next-app.

ほとんどのデフォルトは同じであるが、Source Directory Path , の代わりにsrc , 用途.また、Distribution Directory Path , の代わりにbuild , 用途.next
プロジェクトを初期化すると、2つのパッケージをインストールします.

aws-amplify : これは、我々のフロントエンドを我々のクラウドバックエンドに接続させます

@aws-amplify/ui-react : 我々は独自のログインとサインアップフォームを書く必要はありませんので、組み込みのUIコンポーネント

npm i aws-amplify @aws-amplify/ui-react

認証
増幅の最大の機能の一つは、その能力を簡単に認証を追加することです.
これにより、開発者がより多くのアプリケーションのビジネスのロジックに集中し、不変のアプリケーションの側面に少ない.我々のアプリケーションの場合は、我々のドライバにログインする機能を提供したい.端末では次のコマンドを実行します.

amplify add auth

これは、一連のプロンプトを通して私たちを歩きます.このプロジェクトでは、デフォルトの設定を受け入れ、ユーザー名を持つドライバのサインアップを行います.


APIの追加
これはプロジェクトの主な部分です!
ここから、SMSメッセージを送信するServerless関数を指示するAPIを作成します.
このコマンドを再び使用して、次のコマンドを実行します.

amplify add api

以前と同様に、これはAPIの設定方法についての一連のプロンプトを尋ねるでしょう.
Amplifyは両方のGraphSQLとREST APIの両方をサポートし、両方とも同じプロジェクトで構成することができます.目的のために、残りのAPIを作成し、以下のスクリーンショットのオプションを選択します.

🚨We'll update the code for the Lambda function that was created for us in the next step, but keep the terminal prompt open as there are a few more prompts to answer.

ちょうど私たちのためにテンプレート化されたラムダについては、生成されたコードを次のように置き換えましょう.

/* Amplify Params - DO NOT EDIT
    API_DELIVERYAPI_APIID
    API_DELIVERYAPI_APINAME
    ENV
    REGION
Amplify Params - DO NOT EDIT */ const AWS = require('aws-sdk')
const SNSClient = new AWS.SNS()

exports.handler = async (event) => {
    // 1. get orderID from the event
    const orderID = JSON.parse(event.body).orderID

    // 🪄 used orderID to look up orderDetails in database 🪄

    const order = {
        orderID: '123-abc',
        address: '987 fakeaddress ln',
        phoneNumber: '+12813308004', //replace with your phone #
    }

    let response

    try {
        // 2.  🎉 send order update to customer
        const resp = await SNSClient.publish({
            Message: 'Your order is out for delivery',
            TargetArn: process.env.SNS_TOPIC_ARN,
            MessageAttributes: {
                sms: {
                    DataType: 'String.Array',
                    StringValue: JSON.stringify([order.phoneNumber]),
                },
            },
        }).promise()
        console.log(resp)
        // 3. send response back to the frontend
        response = {
            statusCode: 200,
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Headers': '*',
            },
            body: JSON.stringify({
                address: '987 fakeaddress ln',
            }),
        }
    } catch (e) {
        console.log(e)
        // todo: update response for when things go bad 😢
    }
    return response
}

をもたらすこと以外はaws-sdk 新しいものを作るそれ自体SNS 例として、3つのキー領域があります.(3つの領域を反映するために上記のコードスニペットに注意しました).

フロントエンドからのデータは文字列として送信され、body 事件のそれを解析することによって、我々はそれをデータベースからの順序を検索するために使うことができます.

ここでは、メッセージを送る!これはどのように簡単にメッセージを公開することをショーケース.私たちは、私たちが送りたいSNS話題を指定して、メッセージを指定して、いくつかの属性を提供します.属性はここで重要です.デフォルトでは、SNSはすべての加入者にメッセージを発行します.これにより、送信する正確な加入者を指定できます.分で最後のビットの詳細!

我々は、Corsのアクセスを許可し、フロントエンド上のドライバにアドレスを送信します.

🗒️ Because the purpose of this post is to showcase how to send an SMS message, we're removing topics like database lookups or updating database fields.

私たちのラムダ関数をコード化して、あなたの端末に戻って、以下のスクリーンショットのショーとして残りの質問に答えることによって、プロンプトを終えてください.


SNSトピックの作成
ラムダ関数では、ターゲットarnの環境変数があることに気づくでしょう.

TargetArn: process.env.SNS_TOPIC_ARN

これはSNSトピックが既に設定されていると仮定します.AmplifyはSNSトピックを作成するCLIコマンドを持っていませんが、コンソールでこれを行うことができますし、CLIを使用して残りを処理します.
ヘッドトゥthis link SNSのためにAWSコンソールにとられるために、あなたはAWS口座に署名するように促進されるかもしれません.

🗒️ Ensure the region in the top right of the page is the same as the region your Amplify project is in.

ここから、「標準」をトピックタイプとして選択し、名前を付けます.完了したら、ページの下部にある“トピックを作成”ボタンをクリックします.

次のステップは、加入者を作成することです.これは、APIまたは手動でコンソールを介して自動的に行うことができます.コンソールにいる間、我々は「作成者」を選びます、そして、以下のページで、我々の加入者詳細を入力してください

🚨Copy the ARN. We'll need that in a bit. Also note that the phone number entered, should be replaced with a valid phone number and is what should be put in the order object inside of our Lambda function.

何がフィルタポリシーで起こっているのか疑問に思うかもしれません.SNSトピックに掲載するとき、メッセージは自動的に購読者のすべてに追放されるでしょう.加入者の上でフィルタ方針を指定することによって、我々はこの加入者がそれらの属性でメッセージについて気にかけるSNSを話しています.これらの属性はラムダ関数と一致することに注意してください.

await SNSClient.publish({
            Message: 'Your order is out for delivery',
            TargetArn: process.env.SNS_TOPIC_ARN,
            MessageAttributes: {
                sms: {
                    DataType: 'String.Array',
                    StringValue: JSON.stringify([order.phoneNumber]),
                },
            },
        }).promise()

私たちのトピックは、加入者と一緒に作成すると、我々のコードに戻ることができます.

機能の更新
前述のように、私たちのラムダ関数の電話番号をあなたのSNSのトピックで入力された電話番号と同じになるように更新する必要があります.
次に、SNSを呼び出すためにラムダ関数の許可を与える必要があります.また、SNS_TOPIC_ARN .
ラムダ許可を更新するには、custom-policies.json ラムダ関数が生成されるたびに.

そのファイルの内容を以下のJSONポリシーで置き換えます.

[
  {
    "Action": ["sns:Publish"],
    "Resource": ["arn:aws:sns:us-east-1:ActNumber:Orders"] 
  }
]

SNSを呼び出すには、関数の許可を与えるのが必要です.
環境変数を追加するには、CLIを使用します.次のコマンドを端末で実行します.

amplify update function

使用しているラムダ関数を選択し、次のスクリーンショットに示すように、環境変数を表示するようにプロンプトに従ってください.

これで、ラムダ関数は、現在加入者にメッセージを送信するように構成されています!
次のコマンドを実行して、AWSにローカルバックエンドサービスをすべてプッシュします.

amplify push -y

アプリケーションのテスト
バックエンドの変更を行うと、テストユーザーを作成し、フロントエンドを設定してAPI呼び出しをトリガーします.
イン_app.js , コードをコメントしないように、フロントエンドを作ることができます.
次は同じですindex.js . インポートおよびエクスポート文に加えて、onClick ハンドラの定義と、コメントされる必要がある場所.
すべてが保存され、先に行くと、アプリケーションを再起動し、アカウントのサインアップし、製品をクリックすると、電話番号を購読するために使用するメッセージを受信する必要があります!

🚨 To clean up the app, run amplify delete. This will delete all of the Amplify created resources, both locally and in the cloud. Note that since the SNS topic was created outside of Amplify, that would have to be done manually.

少し工夫されている間、この例では、Samplingを使用してSNS加入者へのアップデートを送信し、フィルタポリシーを使用するための実用例を示しました.実世界アプリケーションでは、データベースエントリは、API呼び出しの代わりにラムダのためのトリガーとして機能することができました.データベーストリガーの設定方法に興味があれば、チェックアウトしてくださいSetting Up A Serverless Contact Form .
このポストをチェックアウトするためのおかげで、私はコメントであなたの考えを知っているとどのように増幅あなたの開発の流れをスピードアップすることができます上でより多くのヒントをお楽しみください!