Блок Play Sound и Fire Confetti в AppMaster

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

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

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

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

1. Play Sound - блок бизнес-процесса, проигрывающего звук из файла по заданной ссылке. 
   URL (mp3) [string] - путь до файла. Хорошей практикой является указывать путь до файла из файлового хранилища приложения, тогда URL будет иметь вид /api/_file/<ID>/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. Поняв принцип их работы, вы можете самостоятельно их использовать для более сложных сценариев.