UIlicious & AI Studio : Alertes SMS pour les tests de code bas

Vous devriez assister à des conférences de développeurs ! Tout d'abord, vous rentrez chez vous avec toutes sortes d'objets gratuits. Ensuite, vous apprenez de nouvelles méthodologies et de nouveaux logiciels. Et surtout, vous avez la possibilité de parler avec des personnes vivantes qui construisent ces nouveaux outils géniaux.

Lors de la conférence CityJS Singapore, j'ai appris l'existence d'une nouvelle plateforme low-code géniale appelée UIlicious. Oui, j'ai été attiré par la possibilité de gagner une Nintendo Switch. La tâche était simple : créer des tests sympas avec UIlicious. Et en moins de 30 minutes, j'ai pu écrire une intégration assez cool entre UIlicious et AI Studio de Vonage pour construire des tests automatisés avec des alertes.

Dans cet article, vous apprendrez à construire des tests de base dans UIlicious et à créer des alertes SMS dans AI Studio lorsque vos tests échouent. Et vous ferez tout cela avec des plateformes d'interface utilisateur conviviales à code bas !

Conditions préalables

• Compte UIlicious

• Compte de développeur 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.

Comment construire des tests avec UIlicious

L'écriture de tests dans le cadre du développement de logiciels est notoirement pénible. C'est un peu comme aller chez le dentiste ; tout le monde sait qu'il faut le faire, mais personne ne veut le faire. UIlicious est une nouvelle plateforme géniale qui élimine une grande partie de la douleur liée à l'écriture de tests.

Tout d'abord, vous n'avez pas besoin de télécharger quoi que ce soit. UIlicious est hébergé dans le navigateur. Vous pouvez donc écrire vos tests, les exécuter, voir les résultats et même programmer des contrôles réguliers, le tout dans le navigateur.

Deuxièmement, l'écriture de tests avec UIlicious ne nécessite pas d'expérience dans l'écriture de tests ou même de logiciels. La plateforme promet :

Rédigez vos tests comme si vous expliquiez à votre père comment se connecter à Facebook par téléphone.

En savoir plus sur les tests dans UIlicious avec l'outil éditeur en ligne.

Rédiger nos tests

Dans le UIlicious Studioouvrez un nouveau projet. Créez un nouveau dossier. Ajoutez un nouveau test à votre dossier comme ceci :

Create a new test file in UIlicious

Comment configurer les alertes SMS pour UIlicious ?

Mission : Nous voulons tester le site de documentation d'UIlicious et nous assurer qu'il contient des informations sur les intégrations de Vonage.

Nous voulons vérifier si le site de documentation contient une section sur les intégrations pour Vonage. Pour ce faire, notre test se rendra sur le site UIlicious, ira dans la documentation, puis cherchera l'onglet approprié dans la section Intégrations.

Les tests ressemblent remarquablement au langage humain que je viens d'écrire ! Jetez-y un coup d'œil :

// 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")

Nous devons maintenant évaluer d'une manière ou d'une autre que Vonage n'est pas là. UIlicious nous permet d'écrire du Javascript directement dans nos tests. Nous pouvons donc utiliser une conditionnelle et vérifier que nous ne voyons pas Vonage :

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

Comment créer un agent AI Studio de SMS ?

Mais que voulons-nous mettre ici ? Nous devons d'une manière ou d'une autre déclencher notre agent AI Studio, qui enverra à son tour le SMS. Nous devons donc nous rendre dans le tableau de bord du développeur de Vonage tableau de bord du développeur et créer un nouvel agent ! Nous pouvons suivre les instructions de la documentation pour créer notre agent SMS. Il y a trois options importantes pour notre agent, à sélectionner :

• Type : SMS

• Modèle : Partir de zéro

• Événement : Sortie

Comme nous n'envoyons qu'un seul message d'alerte, notre flux sera très simple. Nous allons créer un paramètre (de l'entité @sys.any) appelé $TestingError. Ensuite, notre nœud Send Message enverra un message accompagné de notre paramètre $TestingError qui proviendra de notre test. Le nœud devrait ressembler à ceci :

Send Alert Node in AI Studio

Pour améliorer l'expérience des clients, clôturez le flux avec un nœud de fin de conversation. nœud de fin de conversation.

Comment déclencher un agent SMS d'AI Studio depuis UIlicious

Maintenant que notre agent est prêt, déclenchons-le à partir de notre test. UIlicious nous permet de faire des requêtes HTTP, exactement de la manière dont AI Studio nous indique de déclencher un agent sortant. Dans notre conditionnel, nous devons ajouter le code suivant :

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))
}

Vous devrez mettre à jour les X-Vgai-Key, to, agent_id en fonction de vos valeurs.

• Vous trouverez l'icône X-Vgai-Key en haut à droite de votre canevas. Cliquez sur l'icône "utilisateur", puis sur "Générer une clé API".

• Le numéro to numéro est la destination vers laquelle les alertes iront, probablement la personne en charge de votre DevOps.

• Les agent_id se trouve dans les détails de l'agent :

AI Studio Agent Details

Que fait le code ?

• Il envoie une demande à AI Studio, qui déclenche un agent.

• Quel agent ? Eh bien, il doit s'agir d'un agent SMS et plus précisément de l'agent agent_id et il utilise votre X-Vgai-Key pour s'assurer qu'il s'agit d'une demande légitime.

• Nous lui indiquons également où envoyer le message. Nous fournissons la valeur du paramètre $TestingError afin qu'il sache ce qu'il doit dire à l'utilisateur final.

• Enfin, nous traitons la réponse d'AI Studio, qui nous indique si la demande a abouti ou non.

Participez à la conversation

Vous avez apprécié cet article ? Quels outils utilisez-vous pour tester vos logiciels ? J'aimerais connaître vos outils préférés de type "no-code" et "low-code". Vous pouvez consulter d'autres articles de notre blog sur le articles de blog sur le low-code.

Utilisez-vous les SMS pour les notifications ou d'autres canaux ? Rendez-vous sur le Slack de la Slack de la communauté des développeurs de Vonage et faites-nous savoir ce que vous construisez.

J'aimerais savoir ce que vous pensez d'AI Studio et d'UIlicious. Envoyez-moi un Tweet sur X, anciennement connu sous le nom de Twitter. Et donnez à VonageDev pendant que vous y êtes !