Grow with AppMaster Grow with AppMaster.
Become our partner arrow ico

Reproducir bloques de sonido y fuego de confeti en AppMaster

Reproducir bloques de sonido y fuego de confeti en AppMaster

En AppMaster, puede añadir elementos interactivos a las aplicaciones web, como efectos visuales, sonidos y otros. En este artículo, le mostraremos cómo utilizar los bloques Fire Confetti y Play Sound conjuntamente.

El ejemplo descrito en este artículo es muy sencillo para que un lector de cualquier nivel de conocimiento del trabajo con la plataforma AppMaster pueda entender la esencia del uso de estos bloques y adaptarlos para su aplicación.

Digamos que nuestra aplicación web necesita responder de alguna manera al evento de inicio de sesión del usuario. Es decir, el confeti se dispara en la pantalla con un inicio de sesión exitoso, y una determinada melodía se reproduce. Se ve así en la imagen de abajo (como se trata de una animación, no hay manera de integrar el sonido ya que se trata de una animación, pero puedes probar el resultado por ti mismo):

Confetti visual effects no codeEn primer lugar, veamos con más detalle los bloques de proceso de negocio Play Sound y Fire Confetti en sí mismos.

1. Reproducir sonido - un bloque de un proceso de negocio que reproduce el sonido de un archivo en un enlace dado.
URL (mp3) [cadena] - ruta al archivo. Es una buena práctica especificar la ruta al archivo desde el almacenamiento de archivos de la aplicación, entonces la URL se verá como /api/_file/<ID>/download/, donde ID es el ID del archivo en el backend de la aplicación.

no-code2. Disparar confeti - un bloque de proceso de negocio que dispara confeti para el usuario actual.

  • Preset [vmodel] - permite seleccionar la animación para disparar confetti

- Cañón
- Fuegos artificiales
- Realista
- Nieve
- Orgullo escolar

  • Duración (ms) [integer] - duración de la animación en ms
  • Posición superior (%) [integer] - desviación del punto de disparo desde la parte superior de la pantalla
  • Posición izquierda (%) [integer] - desviación del punto de disparo desde la izquierda de la pantalla
  • Número de partículas [integer] - número de partículas de confeti
  • Ángulo [integer] - ángulo
  • Colores [cadena] - colores de las partículas de confeti

Fire Confetti no-codePasemos a configurar el proceso de negocio en sí. En nuestro ejemplo, el confeti se dispara después de un inicio de sesión exitoso del usuario. Por lo tanto, todas las modificaciones necesarias se harán en el proceso de negocio asociado con el botón de inicio de sesión.

no-codeEs necesario encontrar un momento en el proceso de negocio que redirija al usuario a la siguiente página tras un inicio de sesión exitoso, es decir, el bloque Navegar. Nuestra modificación del proceso de negocio es la siguiente:

no-codeConfiguración del bloque Fire Confetti que se utiliza aquí:

  • Preset = Cañón;
  • Duración (ms) = 1;
  • Recuento de partículas = 500;
  • Ángulo = 30.

La entrada del bloque Reproducir sonido recibe la ruta del archivo de música que se cargó previamente en el servidor de la aplicación.

Así, en este artículo hemos descrito las posibilidades de uso de los bloques interactivos Play Sound y Fire Confetti. Después de entender cómo funcionan, puedes utilizarlos tú mismo para escenarios más complejos.

Entradas relacionadas

La clave para desbloquear estrategias de monetización de aplicaciones móviles
La clave para desbloquear estrategias de monetización de aplicaciones móviles
Descubra cómo aprovechar todo el potencial de ingresos de su aplicación móvil con estrategias de monetización comprobadas que incluyen publicidad, compras dentro de la aplicación y suscripciones.
Consideraciones clave al elegir un creador de aplicaciones de IA
Consideraciones clave al elegir un creador de aplicaciones de IA
Al elegir un creador de aplicaciones de IA, es esencial considerar factores como las capacidades de integración, la facilidad de uso y la escalabilidad. Este artículo le guiará a través de las consideraciones clave para tomar una decisión informada.
Consejos para notificaciones push efectivas en PWA
Consejos para notificaciones push efectivas en PWA
Descubra el arte de crear notificaciones push efectivas para aplicaciones web progresivas (PWA) que impulsen la participación del usuario y garanticen que sus mensajes se destaquen en un espacio digital abarrotado.
EMPIEZA GRATIS
¿Inspirado para probar esto usted mismo?

La mejor manera de comprender el poder de AppMaster es verlo por sí mismo. Haz tu propia aplicación en minutos con suscripción gratuita

Da vida a tus ideas