Clever Geek Handbook

Kenalan saya dengan asisten virtual Salyut, serta dengan platform SmartMarket dan SmartApp

Latar Belakang

Pada September 2020,  Sberbank  mengumumkan keluarga asisten virtual:





  • Sber adalah suara laki-laki. Berkomunikasi secara resmi, menyapa pengguna dengan "Anda";





  • Athena adalah suara wanita. Berkomunikasi secara resmi, menyapa pengguna dengan "Anda";





  • Joy adalah suara wanita. Berkomunikasi secara informal, menyapa pengguna dengan "Anda";





   SmartApp Studio -  SmartApp   SmartMarket.





SmartApp ( ) — , , : , , , .





 SmartApp Studio   :





  • Graph — . ;





  • Code — SmartApp DSL JavaScript. ;





  • API — ;





24  @smartapp_studio. 3- .





,   :





  • Chat App - . ;





  • Canvas App - . -;





  • Native App - Android-;





  • Provider App - ;





, , Chat App  SmartApp API.

, API .

API, , .





,     (    ), , :





  1. , . , . . , ( ) .   " < >" .   character.





  2. , .





  3. auto_listening -   . .





  4. emotion - . 22 .





  5.  (RUN_APP) (CLOSE_APP) , (ERROR).





  6. (bubble) .





   (App Store, Google Play)  SberBox  SberPortal.

,   ID,  SmartApp Studio. .   .





, - asr_hints.

ASR (Automatic Speech Recognition) :





"asr_hints":{"words":["","","","","","","",""]}

. - !





Chat App

chat app  , anvas app .

  Native App ( ).





, . , , , . "/" ,  12.10.2020 chat app , .





aplikasi obrolan
chat app

,   chat app      .  canvas app, .  canvas app .





Canvas App?

Canvas App – web- ( ),  assistant-client.

Canvas App WebView (Android, iOS). HTML, CSS JS ( frontend) WebView (SberBox, SberPortal,  ).





-   :





:





  • ;





  • webhook (  SmartApp Studio)  ;





  • (  SmartApp Studio — Frontend Endpoint);





  • webhook frontend «»  assistant-client;





  • frontend, webhook, - , - webhook, ;





canvas app ( API)  SmartApp Studio:





 canvas app?

Webhook  frontend  command:





"payload":{
   "items":[
      {
        "command":{
            "type":"smart_app_data",
            "smart_app_data":{"myTest":"data"}
        }
      }
   ]
}

,  smart_app_data,  frontend. , .





 assistant-client:





  •  ReactJS (  )





  • script (  )





 ReactJS  ,  assistant-client  frontend script:





<html>
<head>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@sberdevices/assistant-client@2.6.0/umd/assistant.min.js"></script>
</head>
<body>  canvas app</body>
</html>

canvas app , .

 ReactJS   assistant-client.





  assistant-client  ""  webhook  frontend canvas app,  canvas app  SberBox, SberPortal .Assistant-client  .





body:





    <div id="command"></div>
    <script type="text/javascript">
        var state = { };
        const url = new URL(window.location.href);
        if (url.searchParams.get('devel') === 'true'){
            console.info('Start devel version');
            var token = ''; // <-     smartapp-studio (https://github.com/sberdevices/assistant-client/tree/main/examples/umd-example)
            var initPhrase = '   '; // <-      canvas app
            var ac = assistant.createSmartappDebugger({ getState: () => state, token, initPhrase });
        }else{
            console.info('Start production version');
            var ac = assistant.createAssistant({ getState: () => state });
        }
        var processData = function(command){
            console.info('got command',command);
            document.getElementById('command').innerHTML = JSON.stringify(command);
        }

        ac.on('start', (command) => {
            let initialData = ac.getInitialData();
            for(let i=0; i < initialData.length; i++){
                processData(initialData[i]);
            }
        });
        ac.on('data', (command) => {
            processData(command);
        });
    </script>

assistant.createSmartappDebugger .

URL ( )    devel. : https://example.ru/frontend.html?devel=true





, "" .





webhook smart_app_data  div id "command":





" -" webhook .





ac.on('start',...) . . , smart_app_data  webhook.





ac.on('data',...).





:





,  assistant.createSmartappDebugger    .    assistant.createAssistant.





, webhook  ac.on('data',...)  processData - . (  Audio())  /.





  frontend webhook. , - .

. Sberportal (touch), SberBox .





body :





<button id="next"></button>

script webhook ( ) id :





var el = document.getElementById("next");
el.addEventListener(
   "click",
   function(){
      ac.sendData({ action: { action_id: el.id} });
   },
   false
);

, webhook  SERVER_ACTION:





{
    "messageId":1612645866245327000,
    "sessionId":"130618ec-8cf5-4a64-83e6-29e0dc6deeb1",
    "messageName":"SERVER_ACTION",
    "payload":{
        "server_action":{"action_id":"next"},
        "message":{"original_message_name":"SERVER_ACTION"}
    }
}

webhook webhook frontend .





canvas app  ( localstorage, ).

canvas app  websocket   . canvas app .

.





, ,  github.

,  github pages  frontend github.





canvas chat app webhook .





aplikasi kanvas
canvas app

, canvas app  .





, canvas app (SberBox, SberPortal ). : 559x568, 768x400, 959x400, 1920x1080.

Chrome   Devices.





canvas app, . SmartMarket     API.





:





  • canvas app (F12);





  • () ;





  • canvas app   ,   ;





  •   ;





  •     ;





  •  Community roadmap  ;





  •  - @smartapp_studio;





Saya ingin berterima kasih kepada tim  SberDevices  atas keterbukaannya (terutama untuk rapat umum dengan komunitas di zoom) dan tentu saja mendengarkan pendapat komunitas. Ini jelas merupakan keunggulan Anda atas orang lain.





Saya juga ingin berterima kasih kepada para pengguna smart-up saya, berkat siapa saya bisa menang di  tahap pertama kompetisi . Terima kasih telah menghargai usaha saya.





Saya berharap Anda semua sukses!







More articles:


All Articles