Halo semuanya! MySklad Marketplace sedang mengudara. The terakhir kali kita berbicara tentang bagaimana kami meluncurkan aplikasi marketpleys di SaaS-layanan MoySklad . Hari ini kami akan melanjutkan tentang cara kami mengaktifkan aplikasi untuk memperluas antarmuka pengguna layanan. Mungkin, banyak yang menemukan aplikasi desktop dengan plugin serupa, yang, ketika terhubung, menambahkan beberapa tombol mereka sendiri, item menu dan bahkan seluruh rangkaian jendela dan dialog baru ke aplikasi, dan juga menyematkan blok UI mereka sendiri ke layar yang ada. . Bagaimana Anda melakukan ini di layanan SaaS yang memiliki UI browser?
Mengapa harus menyematkan UI?
Di awal Marketplace untuk aplikasi tujuan umum, satu-satunya cara yang tersedia untuk mengintegrasikan aplikasi dengan MyStore adalah integrasi data melalui API JSON umum . Melalui API ini, backend aplikasi vendor dapat menerima dan mengubah data pengguna. Jadi, pada awalnya, kami hanya memiliki kemampuan untuk mengintegrasikan backend aplikasi dan MyStore satu sama lain. Mereka tidak dapat menambahkan tombol atau widget ke formulir pengeditan aplikasi.
Awalnya, terlihat jelas bahwa ini tidak cukup untuk memberikan pengalaman aplikasi terbaik kepada pengguna akhir. Di sisi lain, pengembang dan integrator eksternal harus mengumpulkan mekanisme mereka di UI - mereka memiliki pilihan untuk menyematkan langsung ke aplikasi web HTML MyStore melalui plugin browser atau membuat antarmuka terpisah (UI) di pihak mereka, sebagian besar. menduplikasi fungsionalitas layar di MyStore (misalnya, daftar dokumen dengan filter).
, — , ( ). — , , . , () , .
, , 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- , , .