Svelteで書かれたクライアントを使用したSalesforceの活用

記事では、私は確立されたSalesforce RESTful APIを活用する春のブートサービスを導入するためのコースをナビゲートしました.このサービスの目的は、Salesforceに保存されている連絡先データを取得して更新するためにSalesforceに書かれていないクライアントを許可するミドルウェア層として機能することです.このバックエンドサービスは、より高速な応答時間を提供するために独自のキャッシュ層を実装し、また、Salesforceが呼ばれる必要がある回数に削減します.
この記事では、クライアントアプリケーションをSvelte フレームワークは、スプリングブートサービスと対話する.

なぜsvelte？

私がこのシリーズを計画したとき、私はスプリングブートを私のデザインのミドルウェア層として利用するつもりであることを知っていました.私も、私は角度、反応、およびVueを使用してサンプルクライアントアプリケーションを提供したいと思っていた.JSは、現在使用中のJavaScriptベースのクライアントの大部分を表すためです.
同時に、私は自分自身をプッシュし、私に100 %新しいJavaScriptベースのフレームワークを使用します.実際、私は以前に聞いたことがないものを使いたかった.私が主にサービス層開発者であるので、これは仕事のその巨大でありませんでした.
私は良い友人に手を伸ばしました.そして、その人はSvelteを使うという考えを投げました.もちろん、私は“svelte”のGoogle検索をする前にアイディアを「はい」と言いました.
Googleで「svelte」検索を実行するとすぐに、以下の利点を提供するJavaScriptフレームワークを試してみました.
SvelteはインターネットのAPIを構築します.それは新しい(JSXのような)何も紹介しません、そして、基本的なJavaScript、CSSとHTMLで動くように設計されています.このため、ほとんどの開発者は数分でアプリケーションを構築する準備ができており、わずか1時間後に快適です.
Svelteは非常に高速(角度、反応、およびVue . js)を上回るために証明され、生産準備.フレームワークの現在のユーザーは、Godaddy、IBM、スクエアとニューヨークタイムズを含みます.
クライアントの依存関係はゼロ( yes , zero )です.
あなたがより多くを読むことを望むならば、チェックしてくださいthis wonderful article そばRobert Hall .

使用例

以下のユースケースを考えてみましょう.
ビジネスコールセンターは、主要なマーケティングキャンペーンを開始する予定です.しかし、彼らは最近連絡先のリストのために指摘されたタイトルが時間のおよそ90 %不正確であるということを発見しました.これはシステム変換の結果である.
インターンのグループは、Salesforceに格納された情報に連絡するためにタイトルの更新を行うことを使命としています.内部的には、新たに採用されたSvelte Frameworkを使用して小さなアプリケーションを導入するためのアーキテクチャ決定を行った.
Svelteクライアントアプリケーションは次の機能を提供します.

Salesforce内のすべての連絡先のリストを取得します.

タイトル列をインラインで編集することができます(フォームやモードはありません).

タイトル変更を受け入れると、更新はSalesforceドメインに永続化されます.

「Salesforceを使用せずにレバレッジを行うSalesforce」からのスプリングブートRESTful APIが利用されることを期待しています.

public class Contact {
    private String id;
    private String name;
    private String title;
    private String department;

    private SalesforceAttributes attributes;
}

public class SalesforceAttributes {
    private String type;
    private String url;
}

あなたがスプリングブートサービスを見たいならば、ここで春のブートサービスソースコードにアクセスすることができます
https://gitlab.com/johnjvester/salesforce-integration-service

svelteの取得と実行

Svelteで作成され、実行している新しいクライアントを得ることは非常に簡単です.実際、私のMacBook Proでは「Salesforce Integrated Svelte」という新しいインスタンスを作成するために、以下のコマンドを実行しました.

npx degit sveltejs/template salesforce-integration-svelte
cd salesforce-integration-svelte
npm install
npm run dev

これらのコマンドは以下の出力をもたらした.

╭─john.vester@john ~/projects/salesforce-integration-svelte 
╰─$ npm run dev

> [email protected] dev /projects/salesforce-integration-svelte
> rollup -c -w

rollup v2.52.7
bundles src/main.js → public/build/bundle.js...
LiveReload enabled on port 35730
created public/build/bundle.js in 466ms

[2021-07-04 17:09:15] waiting for changes...

> [email protected] start /projects/salesforce-integration-svelte
> sirv public --no-clear "--dev"


  Your application is ready~! 

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

私のブラウザをlocalhostに移動します.

依存関係の追加

次のステップとして、私の新しいアプリケーションのブートストラップを活用することができたかどうか見たかった.結局、私はUI/UXで最高でありません、そして、bootstrapのような感じは速い何かを提供します、そして、それはウェブ1.0のように見えません.
数分以内に私はsveltestrap 依存し、次のコマンドを使用してプロジェクトに追加しました.

npm install --save svelte sveltestrap

次に、単に以下を加えました<link> にpublic/index.html ファイル

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

さて、ブートストラップクラスは私の新しいSvelteアプリケーションで使用できます.
次に、ランダムに選んだsvelte-inline-edit Googleの検索結果のリストのインラインエディタ.私は、これが使用する最高のものかどうかわからないが、それは私の基本的なニーズを満たすように見えた.次のコマンドを使用して、2番目のカスタム依存関係を追加しました.

npm install svelte-inline-edit --save-dev

この時点で、私はSalesforceに住んでいる連絡先オブジェクトを処理することに集中する準備ができていました.

連絡先コンポーネントの作成

私の作品の残りは、プロジェクトの/srcフォルダの一つのファイルを中心に、コンタクトと呼ばれます.スベルト.単一のファイルのすべてを持つことは、Svelteフレームワークを採用するためにしばしば別の利点として見られます.

ビューの追加

コンタクトオブジェクトのペイロードを知って、私はコンタクトで以下のビュー・ロジックを加えました.Svelteファイル:

{#if contacts}
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Department</th>
                <th scope="col">Title</th>
            </tr>
        </thead>
        <tbody>
            {#each contacts as contact }
                <tr>
                    <td>{contact.Name}</td>
                    <td>{contact.Department ? contact.Department : "(not set)"}</td>
                    <td><InlineInput length="2" bind:value={contact.Title} on:save={patchContact(contact)} ></InlineInput></td>
                </tr>
            {/each}
        </tbody>
    </table>
{:else}
    <p class="loading">loading ...</p>
{/if}

ここには本当にハイテクはありませんが、連絡先の部門がヌルのときに「(設定しない)」を示す特別な規則があります.さらに、ビューから直接タイトル列の更新を確実にするには、InlineInputタグを追加します.

サービスの追加

次のコンポーネントのサービス側を作成しました

<script>
    import { onMount } from "svelte";
    import InlineInput from 'svelte-inline-edit';

    export let contacts;

    onMount(async () => {
        await fetch(`http://localhost:9999/contacts`)
            .then(r => r.json())
            .then(data => {
                contacts = data;
            });
    });

    async function patchContact(contact) {
        console.log('contact', contact);

        const headers = {
            "Content-type": "application/json"
        }

        const res = await fetch('http://localhost:9999/contacts/' + contact.id, {
            method: 'PATCH',
            body: JSON.stringify({
                "Title": contact.Title
            }),
            headers: headers
        })

        const json = await res.json()
        console.log(JSON.stringify(json));
    }
</script>

The onMount() イベントはRESTfulサービスへのGETコールを介してデータを読み込みますpatchContact() 関数はRESTfulサービスへのパッチ呼び出しを行う.

最終段階

連絡先のコンポーネントを準備すると、私は更新する必要がありましたApp.svelte ファイルは、連絡先コンポーネントを含めると“こんにちは世界”サンプルコードを取り除く.

<svelte:head>
  <title>`salesforce-integration-svelte` App</title>
</svelte:head>

<h1>Contact List (from Salesforce)</h1>

<main>
  <Contacts {contacts} ></Contacts>
</main>

最後に、私はmain.js "Hello World "コードの最後を削除するファイル

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: { }
});

export default app;

Svelteクライアントの使用

変更を加えて実行しましたnpm run dev コマンド再び.スプリングブートRESTfulサービスを実行してSalesforceに接続して確認した後localhost:5000 次の情報を紹介します.

ショーンフォーブス( 2行目)のタイトルをシングルクリックすると、セルが編集モードになります.

ショーンフォーブスのタイトルは“CFO”から“CEO”に更新されました

チェックマークをクリックすると、クライアントはパッチ要求に新しい値をスプリングブートRESTfulサービスに送ります.ページの再読み込みには、更新された情報が表示されます.

その結果、我々はビジネスのニーズを満たすためにSalesforceのデータを更新することができます実際にSalesforceクライアントを使用することなく.

結論

2021年から始まって、私は次のミッションステートメントをライブしようとしています.

“Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.”

• J. Vester

この例では、初めてsvelteを使いました.実際、時間の短い期間(私にとって2時間未満)の中で、私は空のフォルダからSalesforceの連絡先情報を読んで、更新する機能的なアプリケーションに行きました.
もちろん、生産可能なシナリオは、“プライムタイム”の使用のために、このアプリケーションを準備するいくつかの追加の作業が必要になります.しかし、Svelteフレームワークは、確かに私は例のユースケースで述べられているビジネスニーズを満たす上で私の時間を集中することができました.
Svelteクライアントに使用されるソースコードに興味がある場合は、単にGitLabの次のリポジトリに移動します.
https://gitlab.com/johnjvester/salesforce-integration-svelte
将来の記事は、以下の他のJavascriptベースのクライアントにも計画されています.

Vuejs

反応する

角度

稲妻ウェブコンポーネント(Salesforce生態系の外)

本当に素晴らしい一日を!