みなさん、こんにちは！MySkladマーケットプレイスが放送されています。前回我々はSaaS型サービスでmarketpleysアプリケーションを立ち上げたかについて話しましたMoySklad。今日は、アプリケーションがサービスのユーザーインターフェイスを拡張できるようにする方法について続けます。おそらく、多くの人が同様のプラグインを備えたデスクトップアプリケーションに出くわしました。これらのプラグインは、接続すると、独自のボタン、メニュー項目、さらには新しいウィンドウやダイアログのセット全体をアプリケーションに追加し、独自のUIブロックを既存の画面に埋め込みます。 。ブラウザUIを備えたSaaSサービスでこれをどのように行いますか？
なぜUIに埋め込むのですか？
汎用アプリケーションのための市場の開始時に、ディレクトリのmystoreでアプリケーションを統合するためにのみ利用可能な方法は、共通介してデータ統合でJSONのAPI。このAPIを介して、ベンダーアプリケーションのバックエンドはユーザーデータを受信および変更できます。したがって、当初は、アプリケーションバックエンドとMyStoreを相互に統合する機能しかありませんでした。アプリケーション編集フォームにボタンやウィジェットを追加できませんでした。
当初、これではエンドユーザーに可能な限り最高のアプリケーションエクスペリエンスを提供するには不十分であることは明らかでした。一方、外部の開発者とインテグレーターは、UIでメカニズムを集合的にファームする必要がありました。ブラウザープラグインを介してMyStoreのHTML Webアプリケーションに直接埋め込むか、主に独自のインターフェイス（UI）を作成するかを選択できました。 MyStoreの画面の機能を複製します（たとえば、フィルター付きのドキュメントリスト）。
, — , ( ). — , , . , () , .
, , UI- — must have , .
— — iframe . , , . .
UI- -.
.
, , SaaS-.
. UI, .
:
:
,
:
. . , , ( ) UI ( ) (UX).
. . , , , “” .
/ . , UI — SPA, : DOM- , UI — . , .
?
SaaS- (Jira, Salesforce, Zendesk) (amoCRM, 24, InSales). .
:
: SPA - ?
- (- , iframe ), , SDK ( UI)?
, ?
. , / .
. , .
, SPA- “” SPA (“” — , , UI SPA, - — ). UI — SPA.
iframe’. :
iframe , ( , — ). sandbox iframe’a
allow-same-origin
, DOM - . - , , JavaScript-. ().
iframe (
allow-same-origin
) — , DOM- - . . - postMessage, , , , JavaScript- - . , postMessage JS SDK — JavaScript-.
JS SDK. JS SDK API , API “” postMessage JavaScript-.
amoCRM, DOM- -. , , , — , UI. , . , , , - .
(, ) — JSON- (). XML — XML- ( JSON-). XML JSON’a — .
XML-
, , :
<ServerApplication xmlns="https://online.moysklad.ru/xml/ns/appstore/app/v2"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://online.moysklad.ru/xml/ns/appstore/app/v2
https://online.moysklad.ru/xml/ns/appstore/app/v2/application-v2.xsd">
<iframe>
<sourceUrl>https://example.com/iframe.html</sourceUrl>
<expand>true</expand>
</iframe>
<vendorApi>
<endpointBase>https://example.com/dummy-app</endpointBase>
</vendorApi>
<access>
<resource>https://online.moysklad.ru/api/remap/1.2</resource>
<scope>admin</scope>
</access>
<widgets>
<entity.counterparty.edit>
<sourceUrl>https://example.com/widget.php</sourceUrl>
<height>
<fixed>150px</fixed>
</height>
<supports>
<open-feedback/>
<save-handler/>
</supports>
<uses>
<good-folder-selector/>
</uses>
</entity.counterparty.edit>
</widgets>
<popups>
<popup>
<name>somePopup</name>
<sourceUrl>https://example.com/popup.php</sourceUrl>
</popup>
<popup>
<name>somePopup2</name>
<sourceUrl>https://example.com/popup-2.php</sourceUrl>
</popup>
</popups>
</ServerApplication>
, XML, JSON? , XML — XML Schema. JSON — , JSON Schema. JSON- ( XML-) , , IDE. , JSON- . , XML- . JSON-, , XML JSON , XML- .
? :
, . , , , - . — .
code completion IDE “ ” UI . - ( ), .
, , Intellij IDEA , :
IDE open-feedback ( - ):
:
.
XML-
( ) . , ( ) . — . , . , . . . .
. , . , — , , , , , , - . , , - , . .
, XML-:
<widgets>
<some.extension.point1>...</some.extension.point1>
<some.extension.point2>...</some.extension.point2>
</widgets>
, , :
<widgets>
<widget location="some.extension.point1">...</widget>
<widget location="some.extension.point2">...</widget>
</widgets>
XML- (“”) . - “” — . , XML-, XML-.
? , , ?
:
<document.customerorder.edit>
<sourceUrl>https://example.com/widget.php</sourceUrl>
<height>
<fixed>150px</fixed>
</height>
<supports>...</supports>
<uses>...</uses>
</document.customerorder.edit>
sourceUrl
height
. sourceUrl
iframe, height
( , — , , UI).
( ) - (, , ), , <height><dynamic/></height>
. — . , , <dynamic/>
, .
supports
uses
. .
( API , ):
:
<document.customerorder.edit>
<sourceUrl>https://example.com/widget.php</sourceUrl>
<height>
<fixed>150px</fixed>
</height>
<supports>
<open-feedback/>
<save-handler/>
<change-handler>
<expand>agent</expand>
<expand>positions.assortment</expand>
</change-handler>
</supports>
<uses>
<good-folder-selector/>
</uses>
</document.customerorder.edit>
.
— , UI , . , HTTP postMesssage. .
.
— , / ( ). . , sourceUrl
height
, iframe HTTP - postMessage- Open
.
DOM- :
Open
:
{
"name": "Open",
"messageId": 12345,
"extensionPoint": "entity.counterparty.edit",
"objectId": "8e9512f3-111b-11ea-0a80-02a2000a3c9c",
"displayMode": "expanded"
}
— ( ) , . supports
( ). .
supports
. .
pen-feedback
( ) — , , , OpenFeedback
. , . - , .
:
OpenFeedback
:
{
"name": "OpenFeedback",
"correlationId": 12345
}
save-handler
( ) — , - “” Save
.
Save
:
{
"name": "Save",
"messageId": 32109,
"extensionPoint": "entity.counterparty.edit",
"objectId": "8e9512f3-111b-11ea-0a80-02a2000a3c9c"
}
hange-handler
( ) — , , , ( ). , change-handler
, - “” — - (, ) - Change
JSON . expand
, JSON API ( change-handler
expand
).
— , - . . uses ( ). , -> - -.
— good-folder-selector
. . :
1. - SelectGoodFolderRequest
(, - ):
{
"name": "SelectGoodFolderRequest",
"messageId": 12345
}
2. - :
3. - SelectGoodFolderResponse
:
{
"name": "SelectGoodFolderResponse",
"correlationId": 12345,
"selected": true,
"goodFolderId": "8e9512f3-111b-11ea-0a80-02a2000a3c9c"
}
:
, .
XML- , ( ).
/ , . : , , - , , , .
, -. , change-handler, - , ( SPA- ).
(, - Init postMessage, iframe. , , ( ), (, ). , , — , - , ( ). , .
?
?
. - , . - . . iframe, . postMessage- -. .
change-handler
. — update
, -.
:
“” postMessage JavaScript/TypeScript Widget SDK
UI- ( ) — , :
,
UI
RESP API Widget SDK
UI — SaaS- , .
— email- , , .