Блок Play Sound и Fire Confetti в AppMaster

В AppMaster есть возможность добавлять интерактивные элементы в веб-приложения, как например визуальные эффекты, звуки и т.д. В данной статье рассмотрим использование двух блоков Fire Confetti и Play Sound в связке друг с другом.

Пример, описанный в данной статье, является совсем простым, чтобы читатель любого уровня осведомленности работой с платформой AppMaster мог понять суть использования этих блоков и адаптировать их для своего приложения.

Допустим, наше веб-приложение должно как-то реагировать на событие логина пользователя. А именно, на экране выстреливает конфетти, при успешном логине, и проигрывается определенная мелодия. Выглядит это следующим образом (так как это анимация, то нет возможности интегрировать звук при воспроизведении, но вы можете протестировать результат сами):

Для начала рассмотрим подробно сами блоки бизнес-процессов Play Sound и Fire Confetti.

1. Play Sound - блок бизнес-процесса, проигрывающего звук из файла по заданной ссылке.

   URL (mp3) [string] - путь до файла. Хорошей практикой является указывать путь до файла из файлового хранилища приложения, тогда URL будет иметь вид /api/_file//download/, где ID - идентификатор файла в бекенде приложения.

2. Fire Confetti - блок бизнес-процесса, выстреливающего конфетти для текущего пользователя.

• Preset [vmodel] - позволяет выбрать анимацию выстреливания конфетти

- Cannon

- Fireworks

- Realistic

- Snow

- School Pride

• Duration (ms) [integer] - длительность анимации в мс

• Position top (%) [integer] - отклонение точки запуска от верхней границы экрана

• Position left (%) [integer] - отклонение точки запуска от левой границы экрана

• Particle count [integer] - количество частиц в анимации

• Angle [integer] - угол раскрытия “залпа” конфетти

• Colors [string array] - массив значений цветов частиц конфетти

Перейдем к настройке самого бизнес-процесса. В нашем примере конфетти стреляет после успешного логина пользователя. Таким образом, все необходимые модификации будут проведены в бизнес-процессе, связанным с кнопкой Login.

Необходимо найти момент в бизнес-процессе, который перенаправляет пользователя на следующую страницу при успешном логине, а именно блок Navigate. Наша модификация бизнес-процесса выглядит следующим образом:

Настройки блока Fire Confetti:

• Preset = Cannon;

• Duration (ms) = 1;

• Particle Count = 500;

• Angle = 30.

На вход блока Play Sound передается путь до музыкального файла, заранее загруженного на сервер приложения.

Таким образом, в данной статье мы описали возможности применения интерактивных блоков Play Sound и Fire Confetti. Поняв принцип их работы, вы можете самостоятельно их использовать для более сложных сценариев.