こんにちは、私はあなたのマイクロソフトチームの開発を開始する方法
これは初心者シリーズの第3のものです、そして、今度は、メッセージから行動を起こす方法を通してあなたを歩きます.
チームのアプリを構築する方法を学ぶために多くの異なるパスがあり、このチュートリアルでは、最低限のコードと最小のツールセットを使用します.また、このチュートリアルでは、ホスティング環境から独立しているので、私はazureセットアップでプロセスを開始していない、と基本的に、これはブラウザを実行することができる限り、任意の環境で実行する必要があります.
このチュートリアルでは、別のチームプラットフォーム機能を紹介します.Messaging Extensions . この機能は、2つの異なるタイプ、アクションと検索が付属し、それはどのようにUIの要素とフローとの対話に依存します.
このチュートリアルでは、アクションコマンドの作成方法を示します.

チームの特徴：メッセージ拡張

アクションコマンドを使用すると、情報を収集または表示するためにモーダルポップアップを使用してユーザーを提示することができます.彼らがフォームを提出するとき、あなたのウェブサービスはメッセージを直接会話に挿入することによって、または、メッセージメッセージ領域にメッセージを挿入することによって応じることができて、メッセージを提出するのを許します.畝

モールス符号メッセージアクションの構築

我々はビルドする予定のアプリは、ユーザーメッセージからのアクションを呼び出すテキストを抽出し、モールス符号に変換!
アプリの仕組み

ユーザーがメッセージメニューを開き、メニューからMorse

ユーザーアクションがトリガーされると、ペイロードがメッセージングエンドポイント(/API/message)に送信されます

これは、Count - fetchTask

ポップアップダイアログが表示されます.ユーザーがテキストコンテンツを編集することができます

アプリは、モードコードにテキストを翻訳し、返信としてコンテンツを表示します

ユーザは結果をクライアントに送ることができます

これは結果がどのように見えるかです.

📓 必要条件

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

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

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

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

👾 このチュートリアルで使用する技術

ノード.js

Microsoft Bot Framework

Adaptive Cards UIのスニペットの構築

行動を起こす

🎏 コードサンプルの取得

このチュートリアルでは、サードパーティツールを使用しています.Glitch このプロジェクトと他のチュートリアルシリーズのホストと実行を行う.グリッチが何であるか、そして、私がなぜそれを使っているか、もう少し詳細については、私を参照してください!
まず始めましょうclick this Glitch link to remix the project . リミックスは、Githubのrepoをフォークするようなものですので、それはあなたのためのプロジェクトのコピーを生成するので、あなたが元の🙌

したら、独自のプロジェクトのレポを取得すると、自動的にアプリを提供し、独自のWebサーバーのURLを取得します.あなたがアプリケーションのスタジオでアプリを後で設定しているときにURLが必要になります.

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

チームのAPPパッケージの基本的な考え方を参照してください.

🎛 アプリスタジオの使用

チームのクライアントで開くアプリのスタジオアプリケーション.
アプリケーションのスタジオでは、マニフェストエディタータブを上部からクリックし、新しいアプリケーションを作成し、ボット名、説明などを含むすべての必須フィールドを入力します.
次に、アプリケーションIDを生成します.

🔖 メッセージング拡張機能の設定

左側のメニューから「機能」を選択します.先に行くとセットアップボタンを設定するをクリックします.

あなたのアプリの名前を付けます.

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

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

(画面3のステップ3について説明する.

🎬 アクションの設定

メッセージングエンドポイントで、あなたのウェブサーバURLを入力してください.https://[your project].glitch.me/api/messages あなたがサンプルrepoを再混合したならば.
コマンドをクリックして“追加”をクリックしてください.
ダイアログボックスで-

を選択します.

を選択してください

コマンドIDとタイトルテキストを入力します.をクリックして“マッサージ”(未選択の他のチェックボックスは、事前に選択されている場合).残りの空白を残して保存します.

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

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

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

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

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

🔧 ボットサービスの開始

まず、グリッチコードサンプルrepo、indexに2つのjsファイルがあります.JSとボット.js
HTTPサーバを設定し、HTTPリクエストをルーティングするためにExpressを使用しています.そして、サービスを開始する方法は同じですが、これは初期化の要約であり、ボットアダプタを作成します.

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

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

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

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

注意:この例では、botbuilder version 4.10.0を使用しています.コードが予想通りに動作しない場合は、使用しているバージョンをチェックしてください!

🦉 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 が要求された場合、適切なハンドラを作成するために拡張されます.

class MorseBot extends TeamsActivityHandler {

  // Triggers when the message action is invoked by a user
  handleTeamsMessagingExtensionFetchTask(context, action) {
    /*
      We're going to create an adaptive card UI (modal dialog) here.
      In the dialog, the user confirms what text to be encoded to Morse code.
    */
  }

// Triggers when the dialog box is submitted from the FetchTask
  handleTeamsMessagingExtensionSubmitAction(context, action) {
    // display the result 
  }

The TeamsActivityHandler メッセージイベントを処理し、返信を送信するチーム固有のクラスです.
このシナリオでは、ユーザーがメッセージからアクションをトリガーするとき.handleTeamsMessagingExtensionFetchTask あなたのボットは、アクションが行われたときにメッセージに関する情報を受信したので、呼び出されます.
あなたはそれについての詳細を学ぶことができますCreate and send the task module チームドキュメント

📇 適応型カードを用いたモーダル対話の表示

ダイアログUIはAdaptive Cards , JSONのUIのスニペットを構築するマイクロソフトオープンソースで、マイクロソフトチーム、Outlook Actionableメッセージ、Cortanaスキルなどで使用できます.
時handleTeamsMessagingExtensionFetchTask を呼び出すと、メッセージコンテンツのテキストを取得し、応答としてモードダイアログとして適応カードに表示します.

アダプティブカードとコンテンツを定義するには、次の手順に従います.

const card = {
  type: 'AdaptiveCard',
  version: '1.0'
};

card.body = [
  { type: 'TextBlock', text: 'The message to be encoded to Morse code:', weight: 'bolder'},
  { id: 'editedMessage', type: 'Input.Text', value: content },
];
card.actions = [{
  data: { submitLocation: 'messagingExtensionFetchTask'},
  title: 'Encode to Morse!',
  type: 'Action.Submit'
}];

const adaptiveCard = CardFactory.adaptiveCard(card);

return {
  task: {
    type: 'continue',
    value: {
    card: adaptiveCard
  }
}

私は、抽出されたメッセージテキストをtype: 'Input.Text' ユーザーがモールス符号化するテキストを編集できるように!
フルコードを表示するには、ボットを参照してください.GlitchのコードサンプルのJSファイル.

📮 ユーザー投稿の取り扱い

ユーザがタスクモジュールを送信すると、handleTeamsMessagingExtensionSubmitAction あなたのWebサービスは、コマンドIDとパラメータ値を設定してオブジェクトを受け取ります.
このサンプルコードでは、カスタムデータをチェックするだけです.editedMessage あります.そして、もしそうならば、値(グラブでなければならない)をつかみ、それを変えて、新しいメッセージとして構成される内容を表示してください.

async handleTeamsMessagingExtensionSubmitAction(context, action) {

  if(action.data.editedMessage) {
    const text = action.data.editedMessage;
    const morseText = await encodeToMorse(text);

    return {
      composeExtension: {
      type: 'result',
        attachmentLayout: 'list',
        attachments: [
          // The message UI component here
          // Please refer to the sample code on Glitch to see the entire code
        ]
      }
    }
  }
}

BOTで示したコードサンプルで.私はシンプルなUIの“カード”を使用しているThumbnail Card それは結果のメッセージを作成するボットフレームワークが付属しても、適応カードを使用することができます!

🤖💬 メッセージアクション

さて、アクションを試してみましょう!チームのクライアントに移動し、テキストメッセージのいずれかをクリックします.
すべてが期待通りに動作する場合は、モールス符号に任意のテキストメッセージを変換することができます!

私はあなたがこのチュートリアルを使用してマイクロソフトチームのプラットフォームで何ができるかについていくつかの良いアイデアを得ることを願って、私はあなたがこれより良いユースケースを見つけて、何か素晴らしいものを作成願っています!
次のチュートリアルでは、検索コマンドである別の種類のメッセージング拡張モジュールを構築する方法を説明します.また会いましょう👋