Clever Geek Handbook

Wie wir Widget-UnterstĂŒtzung fĂŒr Anwendungen in MyStore gemacht haben

Hallo, alle miteinander! MySklad Marketplace ist auf Sendung. Das letzte Mal haben wir darĂŒber gesprochen, wie wir Marketpleys-Anwendungen in SaaS-Service MoySklad gestartet haben . Heute werden wir weiter darĂŒber sprechen, wie wir Anwendungen ermöglichen, die BenutzeroberflĂ€che des Dienstes zu erweitern. Wahrscheinlich sind viele auf Desktop-Anwendungen mit Ă€hnlichen Plugins gestoßen, die, wenn sie verbunden sind, einige ihrer eigenen SchaltflĂ€chen, MenĂŒelemente und sogar ganze SĂ€tze neuer Fenster und Dialoge zur Anwendung hinzufĂŒgen und auch ihre eigenen UI-Blöcke in vorhandene Bildschirme einbetten . Wie geht das in einem SaaS-Dienst mit einer Browser-BenutzeroberflĂ€che?





Warum ĂŒberhaupt in die BenutzeroberflĂ€che einbetten?

Zu Beginn des Marktplatzes fĂŒr Allzweckanwendungen ist die einzige verfĂŒgbare Möglichkeit, Anwendungen in MyStore zu integrieren, die Datenintegration ĂŒber eine gemeinsame JSON-API . Über diese API kann das Backend von Herstelleranwendungen Benutzerdaten empfangen und Ă€ndern. Zu Beginn hatten wir daher nur die Möglichkeit, Anwendungs-Backends und MyStore miteinander zu integrieren. Sie konnten dem Bearbeitungsformular fĂŒr Anwendungen keine SchaltflĂ€che oder kein Widget hinzufĂŒgen.





ZunĂ€chst war klar, dass dies nicht ausreichte, um den Endbenutzern die bestmögliche Anwendungserfahrung zu bieten. Auf der anderen Seite mussten externe Entwickler und Integratoren ihre Mechanismen in der BenutzeroberflĂ€che kollektiv bewirtschaften - sie hatten die Wahl, entweder direkt ĂŒber Browser-Plugins in die HTML-Webanwendungen von MyStore einzubetten oder grĂ¶ĂŸtenteils separate Schnittstellen (UI) auf ihrer Seite zu erstellen Duplizieren der FunktionalitĂ€t der Bildschirme in MyStore (z. B. Dokumentlisten mit Filtern).





, — , ( ). — , , . , () , .





, , UI- — must have , .





— — iframe . , , . . 





UI- -.





.

, , SaaS-.





. UI, .





:





:













  3. ,









:





  • . . , , ( ) UI ( ) (UX).





  • . . , , , “” .





  • / . , UI — SPA, : DOM- , UI — . , .





?

SaaS- (Jira, Salesforce, Zendesk) (amoCRM, 24, InSales). .





:





  1. : SPA - ?





  2. - (- , iframe ), , SDK ( UI)?





  3. , ?





  4. . , / .





. , .





, SPA- “” SPA (“” — , , UI SPA, - — ). UI — SPA. 





iframe’. :





  1. iframe , ( , — ). sandbox iframe’a allow-same-origin



    , DOM - . - , , JavaScript-. ().





  2. 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- .





? :





  1. , . , , , - . — .





  2. 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"
}

:





  1. , .





  2. XML- , ( ). 





  3. / , . : , , - , , , .





  4. , -. , 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- , , .





SaaS- — — , .







More articles:


All Articles