Tricks of developing smart-apps for SmartMarket

Starting from September 2020, SberDevices, a division of Sber, has been developing its own platform for developing applications based on the family of virtual assistants (Sber, Athena and Joy) or smartups. In addition, SberDevices provides a set of tools for developing such applications – SmartApp Studio, SmartApp Code and others, as well as a marketplace for downloading and selling applications – smart market.

Smartups come in two varieties: Chat App and Canvas App. In this article, we will consider the second type. The Canvas App is a regular web application that can be installed on one of the SberDevices devices (Sber Portal, Sber Box, Sber Watch) and whose capabilities are enhanced through the use of virtual assistants. SmartApp can be compared to a skill in Alice, but SmartApp provides a wider range of interaction options: voice, touch, text input, and even a virtual gamepad.

There is a good article that describes in detail the procedure for testing a smartup locally. In this article, I will talk about local testing of a smartup without the need to purchase a device from Sberbank.

Installing Libraries

The assistant-client library was developed in SberDevices for local testing of a smartup. assistant-client allows you to exchange messages between the smartup backend (webhook) and the frontend.

First, install the assistant-client library on the computer

$ npm i @sberdevices/assistant-client

Also install React

npm install --save react react-dom react-scripts

Now you need to create a separate project in SmartMarket Code and SmartMarket Studio. Here I will not describe the process of creating a project – it is quite simple.

First, we need to link the project in SmartMarket Studio and SmartMarket Code. To do this, we need a smartup webhook in SmartMarket Code. It can be obtained from the Publications section in the left panel of the project in Code

Next, you need to open the project settings in Studio and paste the webhook into the External link box under the smartup’s Webhook heading. You also need to select the SmartApp API project type.

After each publication of the smartup version, when making changes, you need to update the backend webhook in Studio.

In addition, you need to specify an activation phrase for the smartup in Studio. In the Activation names field in the project settings, enter the word for activation (it can be the name of the project), which will be used to start the smartup using the voice command “Start “.

It is recommended to specify a word in Russian as an activation name. You can use the whole phrase.

For testing with the Assistant Client, we need a token. It can be found in Studio. Go to the profile settings, select the Emulator in the left panel and copy the token.

The token is valid for 24 hours. After that, it must be updated by clicking the Update key button.

Create a client

Let’s create a simple React app

npx create-react-app test_app

Open the App.tsx file and add the import lines for the necessary modules

import React, { FC, memo, useReducer, useState, useRef, useEffect } from 'react';
import { createSmartappDebugger, createAssistant, AssistantAppState } from '@sberdevices/assistant-client';

We need to initialize the Assistant Client

const initializeAssistant = (getState: any) => {
  if (process.env.NODE_ENV === 'development') {
      return createSmartappDebugger({
           token: "<токен>",
          initPhrase: `Запусти <активационное имя>`,
          getState,
          nativePanel: {
              defaultText: 'Покажи что-нибудь',
              screenshotMode: false,
              tabIndex: -1,
          },
      });
  }

  return createAssistant({ getState });
};

It remains only to add this React code:

export const App: FC = memo(() => {
    const assistantStateRef = useRef<AssistantAppState>();
    const assistantRef = useRef<ReturnType<typeof createAssistant>>();

    useEffect(() => {
      assistantRef.current = initializeAssistant(() => assistantStateRef.current);

      assistantRef.current.on('data', ({ action }: any) => { 
      });
    }, []);

    return (
      <div className="App">
        <header className="App-header">
          <h1>Title</h1>
        </header>
      </div>
    );
});

Now let’s start the frontend:

npm start

We will have a screen like this

Our application is activated at startup. We can click on the green pita ball and say a command with our voice or press one of the buttons. The development of a script on the backend of a smartup can be viewed in series of educational videos.

PS: For a better understanding of the work of smart-ups, I advise you to watch the video of the SberDevices team (video, a series of educational videos).

In conclusion, I would like to say that if a problem arises in the development of smart-ups, you can contact SberDevices team chat in Telegram. In this community, you can quickly get answers to any questions or suggest ideas for improving the platform. Good luck to everyone in developing virtual assistants for SmartMarket!

Similar Posts

Leave a Reply Cancel reply