ビルドのネイティブSFDC統合とスラックアプリ

スラックアプリケーションの構築

このポストはSalesforce APIとの統合に基づいて私たちのシリーズの継続です.とSlack Starter Kit Salesforceから、スラックアプリケーション開発者はSalesforce認証、ディレクトリ階層、再利用可能なコード、およびHerokuへの展開のような一般的な懸念を相殺することができます.最後の結果はあなたのアプリケーションのための機能を構築するより多くの時間を曲がったコードと時間を費やしている.
私たちはスターターキットに慣れ、基本的なスラックアプリを構築するために開発環境を設定します.このポストでは、私たちはどのようにスラックスターターキットは、すべてのスラックアプリの2つの重要なコンポーネントを開発することが容易に焦点を当て、そのスラックアプリで構築を続行します:

ユーザ相互作用のリスニング

ユーザーインターフェイスの描画.

イベントに応える

JavaScriptやCSSを使用してフロントエンドのWebアプリケーションを開発した場合は、おそらくイベント処理の基本的な教義に精通している.この文脈のイベントは、ユーザーがあなたのウェブサイトにかかる行動と定義されます.たとえば、リンクをクリックしているマウスポインターがonclick イベントテキストを1つの部分にリンクするポインタonhover ; キーボードキーストロークonkeypressed ; など.

写真でStephen Phillips - Hostreviews.co.uk on Unsplash
スラックではmultitude of events あなたは、個々のイベント(メッセージが掲示されているか、またはピンが鳴ったとき)のグローバルな変更(チャネル名や観光スポットが変更されたとき)、管理者(アプリケーションがインストールされたり、新しい絵文字がアップロードされている場合)に至るまで聞くことができます.The full list of emitted events 本当に印象的です.イベントを聞くためのプロセスは以下の通りです.

まず、あなたのアプリはWebhook URLを定義する必要があります.これは、スラックからポストリクエストを受け取ることができるサーバー上のパスです.

次に、あなたのアプリケーションマニフェストでは、キャプチャしたいイベントを識別します.

イベントがあなたのアプリケーションがインストールされているワークスペースで発生すると、JSONペイロードはあなたのアプリケーションに送信されます.すべてのイベントは独自のペイロードがあります.

あなたのアプリがスラックからイベントを受信すると、あなたが望む何かを行うことができます:ユーザーに応答、詳細情報を求めるためにダイアログを開く、または単にあなたのデータベースにいくつかの情報を格納します.覚えておくべき重要な点は一つだけです.you must respond to Slack within three seconds . これはスラックはあなたのアプリは、ペイロードを受信し、応答に取り組んでいる知っているようにすることです.あなたは、おそらく別のスレッドでは、バックグラウンドでその作業を行うことができますが、必要なだけスラックを知っているすべての後に200 OK .
イベントハンドリングが実際にどのように動作するかを見てみましょう.あなたのアプリケーションマニフェストに頭を上に、下のページの下部にスクロールsettings キー.次のようになります.

settings:
  event_subscriptions:
    request_url: https://<your-app-name>.herokuapp.com/slack/events
    bot_events:
      - app_home_opened
  interactivity:
    is_enabled: true
    request_url: https://<your-app-name>.herokuapp.com/slack/events

このセクションでは、イベントが発生した後にスラックがペイロードを送信する場所を識別します.The bot_events Keyは既に1つのイベントを定義しています.app_home_opened , あなたのアプリがスラックで開かれると、起動されます.
さて、IDEでスターターキットのローカルコピーを開きます.移動するapps/slack-salesforce-starter-app/listeners/events/app-home-opened.js . 我々が最後のポストで見たように、スターターキットはどこで修正がなされるべきかについてのどんな曖昧さも解決するために独断的なディレクトリ構造を持ちます.この場合、イベントフォルダは、私たちのイベント応答の全てを定義するのに責任があります.次の行を最初に検索する

client.views.publish

メソッド名が意味するように、この関数はスラックSDKan API named views.publish . このイベントの主ビューは関数と呼ばれる関数によって作成されますauthorization_success_screen , これはapps/slack-salesforce-starter-app/user-interface/app-home/auth-success.js .
これらのファイルにいくつかの変更を加えましょう.行16で、この行を追加してイベントのタイムスタンプを取得します.

let event_ts = event.event_ts;

両方を変えるauthorization_success_screen この変数を新しい引数として含める呼び出し

view: authorization_success_screen(
  currentuser.username,
  event_ts
)

最後に、オープンauth-success.js , メソッドシグネチャを変更してEventHuntsを指定し、表示された文字列を変更します.

'use strict';

const { HomeTab, Blocks } = require('slack-block-builder');

const authorization_success_screen = (username, event_ts) => {

  // preceding code remains unchanged

       Blocks.Section({
           text: `It's ${event_ts}, and you are successfully authenticated to Salesforce as ${username}.`
       })
   );
// continued code remains unchanged

この変更をコミットし、Herokuに配備します.

$ git add .
$ git commit -m "Add event timestamp"
$ git push heroku main

展開が完了すると、左のスラックメニューでアプリケーションのタブに移動します.あなたがアプリケーションを開いたときのタイムスタンプを示す別の文字列を表示する必要があります.

UIの作成

応答app_home_opened あなたのアプリケーションがデータを取得するために集中した場所を必要とするたびに聞くために有用なイベントをすることができます.このため、私たちの次のステップは、Salesforceからデータを取得し、我々のスラックUIにそれを提示することです.
レイアウトを設計し、提示するために、スラックはBlock Kit . HTMLがWeb用のマークアップ言語であるように、VisualForceはSalesforceのマークアップ言語です.ブロックキットはJSONを使用する以外はスラック用のマークアップ言語です.たとえば、ブロックキットでデザインされたボタンは次のようになります.

{
  "type": "button",
  "text": {
    "type": "plain_text",
    "text": "Save"
  },
  "style": "primary"
}

ブロックキットは、すべてのスラックのアプリは、一貫したユーザーインターフェイスを持っています.このため、使用できるUI要素の制限セットがあります.
ブロックキットで作業するときは、JSONでレイアウトを設計します.その後、スラックAPIを使用して、JSONをチャネル、タブ、または直接メッセージに投稿します.
我々はすでに、イベントを聞いて、テキストを提示するためのシステムを持っているので、その基礎に構築しよう.私たちがスラックで働く前に、我々の新鮮なSalesforce orgに若干のデータを加えましょう.Salesforce orgに直接ブラウザを起動するには、次のコマンドを実行できます.

sfdx force:org:open

セットアップメニューでData Import Wizard . データ型としてCSVを選択し、次の行をデータという新しいファイルにコピーします.CSV

Contact First Name, Contact Last Name, Contact Description
Arden, Isabela, Lorem ipsum dolor sit amet
Rowina, Arti, Proin a est sit amet quam varius efficitur.
Aislin, Oedipus, Praesent et euismod sem
Sindri, Filbert, Proin facilisis sit amet libero vulputate sodales
Cyril, Gratien, Nulla at massa eu turpis venenatis egestas

このファイルをデータソースとしてアップロードします.このデータをインポートするには1分または2つだけを取る必要があります.あなたは、余分な確信し、これらの名前が存在することを確認したい場合は、連絡先タブに移動することができます.
次に、イベントタイムスタンプを追加するときに、以前に作ったものと同様の変更を行います.変数という変数conn が使用可能です.我々はそれを使用して、我々はスラック表示に興味を持っている連絡先データのクエリを使用することができます.
移動するapps/slack-salesforce-starter-app/user-interface/app-home/auth-success.js . 我々はこの機能で約束を解決するのを待ちます、そして、我々は既存を含みますconn 新しい引数として変数

view: await authorization_success_screen(
                   currentuser.username,
                   event_ts,
                   conn
               )

もう一度、開くauth-success.js メソッドシグネチャをconn . また、この関数をasyncと宣言する必要があります.

'use strict';

const { HomeTab, Blocks } = require('slack-block-builder');

const authorization_success_screen = async (username, event_ts, conn) => {

// continued code remains unchanged for now

次に、この接続で、我々は新しく作成された連絡先レコードを取得するためにSalesforceにクエリを発行するつもりです.その後、我々のスラックアプリのホームタブに表示されます.
Salesforceに接続しているので、SQLクエリを発行するのと同じようにデータをフェッチするのも簡単です.場所の直前にこのコードを配置しますhomeTab 変数が定義されています:

const result = await conn.query(
  `SELECT Name, Description FROM Contact`
);
let records = result.records;

let fields = records.map((record) => {
  return `*${record.Name}*: ${record.Description}`;
});

次に、ブロックメソッド呼び出しの底で、これらの行を追加します.これはブロックキットから構成されているUIを表します.

Blocks.Section({
  text: `It's ${event_ts}, and you are successfully authenticated to Salesforce as ${username}.`
}),
Blocks.Header({ text: 'Contacts' }),
Blocks.Divider(),
Blocks.Section({
  text: fields.join('\n')
})

あなたのスラックアプリのホームタブに戻る場合は、連絡先の組織のリストが表示されます!

もっと学ぶ

我々はSleesforceからデータを取得し、ブロックキットと呼ばれるフレームワークを使用してUIでデータを提示スラックアプリケーションを構築しました.我々の次のポストでは、我々はSlesforceにスラックからデータを送ります!
その前に、ブロックキットがどのように動作するかをよく理解したいかもしれません.スラックはBlock Kit Builder , UI要素の遊び場です.フードの下、スラックスターターキットはBlock Builder 私たちが働いたUIアセンブラを簡素化するために.