シェア:
){kind=small}
私はJavaScript開発者で、Vonageの開発者教育者です。長年にわたり、テンプレート、Node.js、プログレッシブ・ウェブ・アプリケーション、そしてオフライン・ファースト戦略に熱中してきましたが、私がいつも本当に愛しているのは、便利できちんと文書化されたAPIです。私の目標は、当社のAPIを使用するお客様の体験を、私がお手伝いできる最高のものにすることです。
Node.jsでどこでもメッセージング
所要時間：1 分
ボンテージ メッセージ API サンドボックスは、あなたの組織がまだ持っていないコミュニケーションチャンネルを試すのに最適です。WhatsApp、Viber、Facebook Messengerチャットの便利さを知れば、本番環境に追加したくなるかもしれません。
サンドボックスと通常の メッセージ API.また、個々のチャネルにも若干の違いがあります。この例では、サンドボックスまたは本番環境から、任意のチャネルからメッセージを送信するサーバを作成します。また Glitch のコードをリミックスするのコードをリミックスすることもできます。
Node.jsと Nexmo Node SDKしか必要ありません。ただし、動作させるには正しく設定されたアプリケーションが必要です。詳しくはこれから説明するので、とりあえず新しいプロジェクト・ディレクトリを作成し、それがあることを確認してください：
コマンドラインから npm initを実行してプロジェクトを準備する。その後、以下のコマンドでパッケージをインストールできる：
> npm install nexmo@beta express body-parser dotenv -s
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
コードを書き始める前に Vonage開発者ダッシュボード.まず、新しいアプリケーションを作成し、電話番号を1つ割り当ててください。プロジェクトディレクトリに .envファイルを作成します。いくつかの変数を作成し、新しいアプリケーションIDと秘密鍵をファイルに直接貼り付けることができます：
あなたの API_KEYと API_SECRETを スタートページにあります。と SMS_NUMはアプリケーションに割り当てた番号です。 WHATSAPP_NUM, VIBER_IDAND FB_IDは メッセージAPIサンドボックスのページ、それぞれのチャンネルのcURLコマンドの例にあります。この例では、3つすべてのサンドボックスを使用し、まだ自分のアカウントを持っていないことを想定しています。
ここで server.jsファイルを作成します。この例のコードは、GlitchのデフォルトのExpressサーバーのセットアップを使用しています。Expressとbody-parserミドルウェアが必要です。 /publicディレクトリから静的ページを提供するように設定します。静的なランディングページを提供するためにいくつかのエンドポイントを追加し、アプリケーション用のウェブフックエンドポイントを提供することができます。ファイルの最後に、サーバーを起動することができます：
const express = require("express");
const app = express();
const bodyParser = require('body-parser');
app.use(express.static('public'));
app.use(bodyParser.json());
// https://expressjs.com/en/starter/basic-routing.html
app.get("/", (request, response) => {
response.sendFile(__dirname + "/views/index.html");
});
app.post('/answer', function(req, res) {
// this is where contacts could send you new communication info
res.status(204).end();
});
// this endpoint receives information about events in the app
app.post('/event', function(req, res) {
res.status(204).end();
});
// TODO: Add some messaging logic here!
// listen for requests :)
const listener = app.listen(process.env.PORT, () => {
console.log("Your app is listening on port " + listener.address().port);
});
Vonage Messages Sandbox APIからSMSメッセージを送信することができないため、あなたのアプリがSMSだけでなく他のメッセージングチャネルでの通信を許可している場合、2つのクライアントが必要になります。リスナー関数の下に /eventリスナー関数の下に追加できます：
// create Nexmo clients
const Nexmo = require('nexmo');
// this client uses your real SMS, WhatsApp, Viber, and Messenger accounts
const nexmo = new Nexmo({
apiKey: process.env.API_KEY,
apiSecret: process.env.API_SECRET,
applicationId: process.env.APP_ID,
privateKey: process.env.PRIVATE_KEY
});
// this client uses the Message API Sandbox, for testing only
const sandbox = new Nexmo({
apiKey: process.env.API_KEY,
apiSecret: process.env.API_SECRET,
applicationId: process.env.APP_ID,
privateKey: process.env.PRIVATE_KEY
}, {
apiHost: 'messages-sandbox.nexmo.com'
});
// add channels to this array to use a production account
// in this example, only SMS is a "real" channel, the rest use the sandbox
const prodChannels = ['SMS'];まず、SDKを使用するために nexmoパッケージが必要です。次に、ほぼ同じクライアントを2つ作成します。唯一の違いは sandboxクライアントが特定のMessages Sandbox apiHostキーを使うことです： messages-sandbox.nexmo.com.
サンドボックスから本番環境にチャンネルを切り替えるには、本番環境のチャンネルを配列に格納します。次のステップでこの配列をチェックして、どのクライアントを使うべきかを決定します。
次に、フロントエンドのフォームからのリクエストを処理するようにサーバをセットアップします。このフォームでは、連絡先やユーザー、メッセージを送るチャンネル、送信するテキストを選択することができます。サンプルのコードでは、ユーザーの配列と連絡先の詳細を .data/contacts.ホワイトリストに登録されている Numbers と Account は、この形式で提供する必要があります：
module.exports = [
{
id: 1,
name: 'Template McTemplateypants',
sms: '441234567890',
viber: '441234567890',
whatsapp: '441234567890',
messenger: '1234567890123456'
}
];データファイルを要求した後、POST リクエストを処理することができます。 /send.へのPOSTリクエストを処理できます。 contact, methodと messageを取得し、コンタクトIDを使用して対応するユーザオブジェクトを見つけます。デフォルトのクライアントを sandboxに設定し methodがプロダクションチャネルの配列にあるかどうかをチェックし、ある場合はクライアントを nexmoに変更します。
あなたは そしてそして からオブジェクトを別々の関数で構築し、それらを messageとともにクライアントの channel.sendメソッドに渡す。このメソッドは、問題があればエラー、送信されたメッセージに関するデータを返します。リクエストを終了するために、クライアントにレスポンスを送り返すことを忘れないでください。
サーバーに追加する最後のものは getFromと getTo関数である。これらは をと オブジェクトがオブジェクトが選択されたチャンネルに対して正しく構成されていることを確認します：
const users = require('./.data/contacts');
// handle the form submission from the client
app.post("/send", function(req, res) {
var contact = req.body.contact;
var user = users.find(u => u.id == contact);
var method = req.body.method;
var message = req.body.message;
var client = sandbox;
if (prodChannels.includes(method)) {
client = nexmo;
}
client.channel.send(getTo(user, method), getFrom(method), {
content: {
type: 'text',
text: message
}
}, (e, data) => {
if (e) {
console.error(e);
}
console.log(data);
});
res.send({data: 'sent'});
});
function getFrom(method) {
if (method == 'SMS') {
return { "type": 'sms', "number": process.env.SMS_NUM };
}
if (method == 'WhatsApp') {
return { "type": 'whatsapp', "number": process.env.WHATSAPP_NUM };
}
if (method == 'Viber') {
return { "type": 'viber_service_msg', "id": process.env.VIBER_ID };
}
if (method == 'FB') {
return { "type": 'messenger', "id": process.env.FB_ID };
}
}
function getTo(user, method) {
if (method == 'SMS') {
return { "type": 'sms', "number": user.sms };
}
if (method == 'WhatsApp') {
return { "type": 'whatsapp', "number": user.whatsapp };
}
if (method == 'Viber') {
return { "type": 'viber_service_msg', "number": user.viber };
}
if (method == 'FB') {
return { "type": 'messenger', "id": user.messenger };
}
}
メッセージを送信するには何らかのインターフェースが必要です。この例では、クライアント側に最小限のフォームを使用しています。この例の値はハードコードされており、この例が持っているオブジェクトと一致しています。 .data/contacts.js.さらに一歩進んで、データの量に応じてオプションを動的に入力することもできます：
<form>
<label>Contact:
<select id="contact">
<option value="1">Angie</option>
<option value="2">Benji</option>
<option value="3">CJ</option>
<option value="4">Digby</option>
</select>
</label>
<label>Method:
<select id="method">
<option>SMS</option>
<option>WhatsApp</option>
<option>Viber</option>
<option value="FB">Facebook Messenger</option>
</select>
</label>
<section>
<label for="message">Message:</label>
<textarea id="message"></textarea>
<button>Send</button>
</section>
</form>フォームを送信するスクリプトは、一般的なボタンのクリックに応答します。スクリプトはフォームの値を取得し、それを使ってリクエストボディを作成します。 /sendエンドポイントに送信します。データが返ってきたら、フォームを空白にします：
<script>
const contact = document.querySelector('#contact');
const method = document.querySelector('#method');
const message = document.querySelector('#message');
document.querySelector('button').onclick = function(e) {
let body = JSON.stringify({
contact: contact.value,
method: method.value,
message: message.value
});
fetch('/send', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: body
})
.then(response => response.json())
.then(data => {
contact.value = '';
method.value = '';
message.value = '';
});
return false;
};
</script>
ホワイトリストに登録したアカウントと SMS 番号のデバイスが手元にあれば、フォームからメッセージを送信してみることができます。一旦それが動作したことを確認したら、このコードをあなたのアプリケーションのロジックのためのVerify Messages API Sandboxでテストをセットアップするために適応させることができます。