こんにちは、私はあなたがどのようにマイクロソフトチームの開発を開始する方法を楽しんでほしい.
これは初心者シリーズの2番目の1つであり、今回は、会話ボットを構築する方法をあなたを歩いていきます.
チームのアプリを構築する方法を学ぶために多くの異なるパスがあり、このチュートリアルでは、最低限のコードと最小のツールセットを使用します.また、このチュートリアルでは、ホスティング環境から独立しているので、私はazureセットアップでプロセスを見つめていません、そして、基本的に、これはどんな環境ででも走らなければなりません.(この記事は、Azure😉)
で、タブを埋め込む方法を紹介しましたが、このチュートリアルでは、全く別の機能、ボットを表示します.

チームの特徴：ボット

があるa variety of features あなたは、拡張子、タブなどのメッセージングのようなチームのアプリを構築するために使用することができますボットなどのアクションには、順序を生成する、私のコードを確認し、チケットのステータスを確認するなど、ボットは、チーム内のワークフローのこれらの種類をオフにすることができます.

このチュートリアルで何をするつもりですか

あなたは後方で言うものを返すプレーンボットを作成するつもりです.はい、これはすべての有用なボットではありませんが、うまくいけば、このサンプルは、将来的に構築するものについていくつかの良いアイデアを与える.

アプリケーションスタジオでアプリを設定します

オンラインIDEでコードを設定し、実行する

使用してマイクロソフトボットフレームワークボットの会話を処理する

結果は次のようになります.

📓 必要条件

チームにアプリをインストールすることができるように、あなたの組織の管理者は許可を付与する必要があります.
それ以外の場合は、マイクロソフト365開発プログラム、開発者テナントサンドボックスとサンプルデータパック、模擬ユーザーデータのように来る無料、更新可能なサブスクリプションのためにサインアップすることができます!

チームまたは開発者テナントで開発する許可Sign up for M365 developer program! )

アプリStudioは-チームのクライアントのアプリメニューからアプリを探して、ワークスペースにインストールする

ノードの経験.の基本的な理解Express.js

以前のチュートリアルとは異なり、いくつかのフロントエンドコーディングスキルを必要とするボットで動作するには、別のスキルセットを必要とする、このチュートリアルでは、ノード.js

チャットボット

🎏 コードサンプルの取得

このチュートリアルでは、サードパーティツールを使用しています.Glitch このプロジェクトと他のチュートリアルシリーズのホストと実行を行う.Glitchは、WebベースのIDEで、ノードを書き込み、実行できます.JSコードは、少なくとも今のところ、あなたは実行し、トンネリングlocalhost、または展開について心配せずに、チームのアプリケーションの開発の概念と基礎を学ぶことに集中することができます.(将来、私はそれらをカバーします!)
まず始めましょうclick this Glitch link to remix the project . リミックスは、Githubのrepoをフォークするようなものですので、それはあなたのためのプロジェクトのコピーを生成するので、あなたが元の🙌

したら、独自のプロジェクトのレポを取得すると、自動的にアプリを提供し、独自のWebサーバーのURLを取得します.たとえば、生成されたプロジェクト名は、通常、それはいくつかのランダムな単語で構成され、勤勉なベルを達成され、ノードのサーバーのURLになりますhttps://achieved-diligent-bell.glitch.me . 必要に応じて名前もカスタマイズできます.あなたがアプリケーションのスタジオでアプリを後で設定しているときにURLが必要になります.

⚙️ アプリケーションの設定：アプリケーションスタジオでアプリケーションマニフェストを作成する

このセクションは、私の以前のチュートリアルのタブと同じです.
あなたがチームのための任意のアプリケーションを構築している場合は、チームのクライアントにインストールされるアプリケーションパッケージを作成する必要があります.パッケージには

📁 your-app-package
    └── 📄 manifest.json
    └── 🖼 color.png (192x192)
    └── 🖼 outline.png (32x32)

そして、残りのアプリケーションコードと資産は、あなたのウェブサーバでホストされなければなりません.このチュートリアルでは、自動的にアプリケーションを提供するグリッチを使用しています.
私たちは今日マニフェストファイルを手動で作成していませんが、代わりに、アプリケーションのパッケージを作成するつもりですVisual Studioを使用してアプリケーションStudioとしては、パッケージのクライアントに直接パッケージを作成することができます.

🎛 アプリスタジオの使用

あなたがしていない場合、チームのクライアントでインストールされたアプリケーションのスタジオアプリケーション.
アプリケーションのスタジオでは、マニフェストエディタータブを上部からクリックし、新しいアプリケーションを作成し、ボット名、説明などを含むすべての必須フィールドを入力します.
アプリのURLのセクションでは、あなたのプライバシーと使用規約のウェブページのURLを入力します.この例では、プレースホルダURLを使用しています.https://example.com , しかし、あなたが公開するアプリを開発しているとき、あなたは声明でウェブページを持たなければなりません.
また、アプリケーションのIDを生成します.

🔖 ボットの設定

左側のメニューから「機能」ウィンドウを選択します.
次に、設定をクリックして新しいボットを設定します.
は、ボットの名前を入力し、ちょうど今の個人的な範囲を選択してみましょう.個人的なボットは、ボットとシングルユーザー間の変換ができます.(スコープについてもっと学ぶためにConversation basics docsについて)

次に、新しいパスワードを生成するをクリックします.モーダルポップアップでは、パスワードをコピーする必要があります.次のステップでENVファイル!

🔐 アプリケーション資格情報

あなたのボット名の隣にIDをコピーします2cd53e8a-e698-4exx-... ) で環境変数としてペーストします.env fileは、隠しファイルであることを想定しています.env-sample to .env ).
アプリのパスワードの下に、新しいパスワードを生成し、それをコピーします.次に、あなたの中に貼り付けます.envファイル.
これらの資格情報は、ボットアダプタを初期化するために使用されます.( index . jsを参照ください).
Messagindエンドポイントでは、あなたのボットサーバーを入力してくださいhttps://[your project].glitch.me/api/messages .

📦 アプリケーションマニフェストパッケージのインストール

テストに行って、配布してください.
エラーが発生した場合は、修正を行ってください.そうでなければ、クライアントをインストールしてください.

zipファイルをダウンロードすることもできますmanifest.json , そして、2つのアイコンイメージは、後でインストールするか、分配します.
コードサンプルを再混合する限り、ボットは既に動作します.しかし、私はすぐにどのようにボットをしようとする前にコーディングされて説明することができます.

🤖 マイクロソフトボットフレームワーク

The Microsoft Bot Framework は、インテリジェントな、エンタープライズグレードのボットを構築することができますオープンソースのSDKです.
このSDKは、チームのためだけでなく、WEB＆モバイルチャット、Skype、Facebook、Amazon Alexa、スラック、twilioなどを含む幅広い種類のチャットボットのために動作するように設計された強力なプラットフォームです!

🔧 ボットサービスの開始

まず、グリッチコードサンプルrepo、indexに2つのjsファイルがあります.JSとボット.js
注意:グリッチは、定義済みのすべての依存関係を自動的にプルしますpackage.json したがって、手動でパッケージをインストールする必要はありません.
インデックスで.ライブラリを含める必要があります.botbuilder , HTTPサーバを設定し、HTTPリクエストをルーティングするライブラリ.使用中Express しかし、他の何かを使うことができます.Restify .
インデックス.js

// Import Express & set up HTTP server
const express = require('express');
const app = express();
const server = app.listen(process.env.PORT || 3978);

// Import bot services
const { BotFrameworkAdapter } = require('botbuilder');

// Bot's main dialog
const { ReverseBot } = require('./bot');

注意:この例では、botbuilder version 4.10.0を使用しています.コードが予想通りに動作しない場合は、使用しているバージョンをチェックしてください!
それから、あなたのロボットがユーザーと通信して、応答を送るのを許すアダプターをセットしてください.

const adapter = new BotFrameworkAdapter({
  appId: process.env.MicrosoftAppId,
  appPassword: process.env.MicrosoftAppPassword
});

// Error handlings (See the Glitch sample for details!)

// Create the main dialog
const myBot = new ReverseBot();

🦉 BOT論理への転送要求

Expressを使用して着信要求をリッスンするルーティングを処理します.

app.post('/api/messages', (req, res) => {
  adapter.processActivity(req, res, async context => {
    await myBot.run(context);
  });
});

あなたは前のステップでアプリケーションのスタジオでURLを設定している.The /api/messages クライアントのリクエストに応答するアプリケーションのエンドポイントURLです.

💬 リクエストの処理とボットの応答

リクエストがエンドポイントで受信され、ボットロジックに転送されると、アプリケーションはリクエストのコンテキストを受け取り、その後ボットでカスタム応答を作成します.js
参照TeamsActivityHandler が要求された場合、適切なハンドラを作成するために拡張されます.

const { TeamsActivityHandler, MessageFactory } = require('botbuilder');

class ReverseBot extends TeamsActivityHandler {
  constructor() {
    super();
    this.onMessage(async (context, next) => {
      const backward = [...context.activity.text].reverse().join(''); // reverse string
      const replyText = `🙃 *${ backward }*`; // you can use markdown
      await context.sendActivity(MessageFactory.text(replyText));

      await next();
    });
  }
}

The TeamsActivityHandler メッセージイベントを扱うチーム固有のクラスです.onMembersAdded このメソッドは、メンバーが会話に追加されるたびに呼び出され、応答を送信します.
この例では、メッセージがクライアントに送信されると、onMessage がトリガされ、メッセージのテキストを取得し、カスタムの応答を作成するために使用する場合は、この場合、文字列を逆にして、ユーザーに送信します.

🤖💬 ボットを試みる

さて、ボットを試してみましょう!チームのクライアントに移動し、左のメニューバーからボットを起動をクリックします.
すべてが期待通りに動作するなら、以下のようにBOTとの会話ができます.

この例では、テキスト応答を送信する方法を示しますが、ボタンやその他のUIコンポーネントを使用して、よりインタラクティブなメッセージを作成できます.後で詳しく説明します.
私はあなたがチュートリアルを楽しんだことを願って、私はあなたがこれより良い使用例を見つけて、何か驚くべきことを作成願っています!また会いましょう👋

📚 もっと学ぶ

MSチームドキュメンテーションWhat are conversational bots?

Microsoft Bot Frameworks

ボットサービスドキュメンテーションHow bot works?

マイクロソフトAzureチュートリアルと記事