UIlicious y AI Studio: Alertas SMS para pruebas de bajo código

Deberías ir a las conferencias de desarrolladores. En primer lugar, te llevas a casa todo tipo de cosas gratis. Y en segundo lugar, puedes aprender sobre nuevas metodologías y software. Y lo que es más importante, puedes hablar con personas vivas que están construyendo estas nuevas e increíbles herramientas.

Cuando estuve en la conferencia CityJS Singapur, me enteré de una nueva plataforma de bajo código llamada UIlicious. Sí, me atrajo la oportunidad de ganar una Nintendo Switch. La tarea era simple: construir algunas pruebas interesantes con UIlicious. Y en menos de 30 minutos, fui capaz de escribir una buena integración entre UIlicious y AI Studio de Vonage para construir pruebas automatizadas con alertas.

En este artículo, aprenderás cómo crear algunas pruebas básicas en UIlicious y cómo crear alertas SMS en AI Studio cuando tus pruebas fallen. Y lo harás todo con plataformas de interfaz de usuario de bajo código.

Requisitos previos

• Account UIlicious

• Cuenta de desarrollador de Vonage

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Cómo crear pruebas en UIlicious

Escribir pruebas en el desarrollo de software es notoriamente doloroso. Es como ir al dentista: todo el mundo sabe que tiene que hacerlo, pero nadie quiere. UIlicious es una gran plataforma nueva que elimina gran parte del dolor de escribir pruebas.

En primer lugar, no necesitas descargar nada. UIlicious está alojado en el navegador. Así que puedes escribir tus pruebas, ejecutar tus pruebas, ver los resultados, e incluso programar un seguimiento regular todo en el navegador.

En segundo lugar, escribir pruebas con UIlicious no requiere experiencia escribiendo pruebas o incluso escribiendo software. La plataforma promete:

Escribe tus pruebas como si le estuvieras diciendo a tu padre por teléfono cómo entrar en Facebook.

Más información sobre las pruebas en UIlicious con el Editor en el navegador.

Cómo redactar nuestras pruebas

En el UIlicious Studioabre un nuevo proyecto. Crea una nueva carpeta. Añade una nueva prueba a tu carpeta como esta:

Create a new test file in UIlicious

Cómo configurar alertas SMS para UIlicious

Misión: Queremos probar el sitio de documentación de UIlicious y asegurarnos de que haya información sobre las integraciones de Vonage.

Queremos comprobar si el sitio de documentación tiene una sección sobre Integraciones para Vonage. Para ello, nuestra prueba visitará el sitio de UIlicious, irá a la documentación y, a continuación, buscará la pestaña correspondiente en la sección Integraciones.

Las pruebas se parecen mucho al lenguaje humano que acabo de escribir. Echa un vistazo:

// Start by going to the documentation, like this:
I.goTo("https://uilicious.com/")
I.see("Docs")
I.click("Docs")

// Navigate to the Integrations section:
I.see("How to Guides")
I.click("How to Guides")
I.see("Integrations")
I.click("Integrations")

Ahora necesitamos evaluar de alguna manera que Vonage no está aquí. UIlicious nos permite escribir Javascript directamente en nuestros tests. Así que podemos usar un condicional y comprobar que no vemos Vonage:

if(!(I.see$("Vonage"))){
  // Something will happen here
}

Cómo crear un agente SMS AI Studio

Pero, ¿qué queremos poner aquí? Necesitamos activar de algún modo nuestro agente de AI Studio, que a su vez enviará el SMS. Así que tendremos que dirigirnos al Desarrollador de Vonage y crear un nuevo agente. Podemos seguir las instrucciones de la documentación para crear nuestro agente de SMS. Hay tres opciones importantes para nuestro agente, seleccione:

• Tipo: SMS

• Plantilla: Empezar de cero

• Evento: Salida

Como sólo vamos a enviar un único mensaje de alerta, nuestro flujo será muy sencillo. Crearemos un parámetro personalizado personalizado (de entidad @sys.any) llamado $TestingError. Entonces nuestro único nodo Send Message enviará un mensaje junto con nuestro $TestingError que vendrá de nuestro test. El nodo debería tener este aspecto

Send Alert Node in AI Studio

Para mejorar la experiencia del cliente, cierre el flujo con un nodo Nodo de fin de conversación.

Cómo activar un agente SMS de AI Studio desde UIlicious

Ahora que nuestro agente está listo, vamos a activarlo desde nuestro test. UIlicious nos permite hacer peticiones HTTP, exactamente como AI Studio nos indica que activemos un agente saliente. Dentro de nuestro condicional necesitamos añadir el siguiente código:

if(!(I.see$("Vonage"))){
  let res = UI.httpPost("https://studio-api-eu.ai.vonage.com/messaging/conversation", {
    headers:{ "X-Vgai-Key": "YOUR X-Vgai-Key"},
    // Instructions to send AI Studio
    data: { 
      "to": "TO_NUMBER", 
      "agent_id": "AGENT_ID", 
      "channel": "sms",
      "session_parameters": [{
        "name": "TestingError",
        "value": "Vonage not found in Integrations Section"
      }]
    },
    //Expect the response to be JSON
    responseType: "json"
  })
  // log the response from the API
  TEST.log.info("Response from API is: " + JSON.stringify(res.data))
}

Tendrá que actualizar los archivos X-Vgai-Key, to, agent_id a sus valores.

• Encontrará el icono X-Vgai-Key en la parte superior derecha de tu lienzo. Haz clic en el icono "usuario" y, a continuación, en "Generar clave API".

• El número to es el destino de las alertas, probablemente el responsable de DevOps.

• La dirección agent_id puede encontrarse en sus Datos de Agente:

AI Studio Agent Details

¿Qué hace el código?

• Envía una solicitud a AI Studio, que activa un agente.

• ¿Qué agente? Pues debe ser un agente SMS y concretamente el agent_id y utiliza su X-Vgai-Key para asegurarse de que se trata de una petición legítima.

• También le indicamos dónde debe enviar el mensaje. Le proporcionamos el valor del parámetro $TestingError para que sepa qué decirle al usuario final.

• Y, por último, nos ocupamos de la respuesta de AI Studio, que nos permite saber si la solicitud se ha realizado correctamente o no.

Únete a la conversación

¿Le ha gustado este artículo? ¿Qué herramientas utilizas para las pruebas de software? Me encantaría conocer tus herramientas preferidas de código bajo y sin código. Puede consultar más de nuestros entradas de blog de bajo código.

¿Utilizas SMS para notificaciones u otros canales? Dirígete a la Slack de la comunidad de desarrolladores de Vonage y cuéntanos qué estás creando.

Me encantaría conocer tu opinión sobre AI Studio y UIlicious. Envíame un Tweet en X, antes conocido como Twitter. Y dale a VonageDev ¡un follow mientras estás en ello!