Comment construire une application In-App Voice avec Ruby

Soyons réalistes. Nos journées sont constamment remplies de questions difficiles :

Que dois-je faire pour le dîner ?
Est-ce la meilleure solution pour ma carrière ?
La pizza a-t-elle mal tourné ?
Dois-je lui répondre par texto ?

La vie d'adulte n'est pas de tout repos. Et franchement, c'est dur de devoir prendre des décisions tout le temps tout le temps. Ne serait-ce pas formidable de pouvoir revenir à l'époque de l'enfance où un simple jouet pouvait répondre à toutes les questions difficiles de la vie ? Et mieux encore, si vous le construisiez vous-même !

Dans ce tutoriel, vous allez créer une application vocale Magic 8-Ball avec Ruby. Cette application ne rendra pas les questions moins difficiles, mais elle facilitera facilitera le processus de prise de décision.

Conditions préalables

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.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Ready to start building?

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

En outre, vous aurez besoin

• Ruby on Rails

• ngrok pour exposer votre application Rails à l'extérieur

Créer une application vocale In-App Voice

Comment créer votre application :

1. Créer l'application Rails

2. Configurer les itinéraires et le contrôleur dans l'application

3. Exposez votre application à l'extérieur avec ngrok

4. Acheter un numéro de téléphone Numbers

5. Créer une application Nexmo Voice

6. Tout relier

7. Lancez votre application et répondez à toutes les questions difficiles de la vie (celles qui se posent par oui ou par non, c'est-à-dire) !

Ce tutoriel vous guide à travers le processus en partant de zéro. Si vous souhaitez voir le code fini, vous pouvez cloner le dépôt dépôt git pour ce projet.

Créer l'application Rails

Pour commencer, initialisez un nouveau projet Rails API.
À partir de la ligne de commande, exécutez ce qui suit :

(Comme il n'y a pas de données persistantes pour cette application, l'ajout de la partie -api --skip-active-record permet de rendre votre application très légère).

Déplacez-vous dans votre nouveau dossier Rails app cd magic8-ball-voice-app et ouvrez-le dans votre éditeur de code préféré.

Le flux de cette application

Faisons une petite pause pour parler du flux de cette application avant de plonger dans le code.

L'utilisateur se connecte à l'application et est invité à poser une question. Pour montrer qu'il est prêt à recevoir de sages conseils, l'utilisateur est invité à appuyer sur la touche 1 de son clavier. L'application sélectionne alors au hasard une réponse qui sera lue à l'utilisateur.

Pour réaliser ce flux, vous devrez créer ces actions et ces itinéraires dans votre application :

• #answer: pour recevoir l'appel initial

• #caller_inputLe système de gestion de l'appelant : répondre à la question de l'appelant par une réponse sélectionnée de manière aléatoire et traiter les erreurs de saisie.

• #eventPour l'API Nexmo, il s'agit de recevoir l'événement de l'API Nexmo et de l'imprimer dans la console.

Maintenant que le flux de l'application est clair, plongeons dans la partie la plus amusante et écrivons les Routes et les Actions du Contrôleur !

Configurer les itinéraires dans l'application

Pour que votre application sache où diriger la requête Nexmo GET vous devez définir les routes dans le fichier routes.rb.
Pour répondre à l'appel, gérer l'entrée de l'appelant et imprimer les événements sur votre terminal, vous devrez écrire trois routes uniques.

Ouvrir /config/routes.rb à ajouter :

# routes.rb

get '/answer', to: 'responses#answer'

post '/caller_input', to: 'responses#caller_input'

post '/event', to: 'responses#event'

Configurer le contrôleur dans l'application

Dans votre terminal, exécutez la commande rails generate controller Responses.
Cette commande crée un nouveau fichier Controller dans le dossier /app/controllers .
C'est dans ce fichier que vous créerez vos actions :

# responses_controller.rb

class ResponsesController < ActionController::API

    # this URL is the one you use ngrok to create  
    NGROK_URL = "http://********.ngrok.io"

    # it’s up to you if there are more or less positive responses in your array
    POSSIBLE_RESPONSES = ["It is certain.", "It is decidedly so.", "Without a doubt.", "Yes, definitely.", "You may rely on it.", "As I see it, yes.", "Most likely.", "The outlook good.", "Yes.", "All signs point to yes.", "Sorry, but no.", "I really don’t think it will work out.", " Don't count on it.", "That my sources say no.", "It is very doubtful."]

    def answer
        render json:
        [
            {
                :action => 'talk',
                :text => 'Welcome to the Magic Eightball hotline. Ask your question and then press 1.',
                :bargeIn => true
            },
            {
                :action => 'input',
                :eventUrl => ["#{NGROK_URL}/caller_input"],
                :timeOut => '10'
            }
        ].to_json
    end

Ensuite, vous devrez gérer les données de l'appelant.
Dual Tone Multi Frequency (DTMF) est une forme de signalisation utilisée par les systèmes téléphoniques pour transmettre les chiffres de 0 à 9 et les caractères * et #. Nous utiliserons ici "dtmf" pour accepter le chiffre 1 comme signal à l'application que l'appelant est prêt à passer au flux suivant. Si l'appelant appuie sur une autre touche ou ne saisit rien du tout, l'application lui demandera de réessayer.

Ensuite, nous utiliserons la méthode .sample de Ruby. Celle-ci sélectionnera aléatoirement une réponse Magic 8-Ball dans le tableau POSSIBLE_RESPONSES tableau.

# responses_controller.rb continued

    def caller_input
        dtmf = params['dtmf'] || parsed_body['dtmf']

        if dtmf == '1'
            render json:
            [
                {
                    :action => 'talk',
                    :text => "My answer is: #{POSSIBLE_RESPONSES.sample}. I hope that helps. Thanks for calling the Magic 8-ball hotline. Please call again whenever you need help making a decision in life. Goodbye.",
                }
            ].to_json
        else
            render json:
            [{:action => 'talk', :text => 'I did not recognize your selection. Please call back and try again.'}].to_json
        end
    end

Enfin, nous allons imprimer les détails de l'événement dans votre terminal à des fins de débogage.

# responses_controller.rb continued
    def event
        puts params
    end
end

Remarque :
Il y a une variable constante à la ligne 6 du fichier responses_controller.rb qui contiendra l'URL de votre ngrok. Elle est actuellement vide car vous devez encore la créer.

Alors, créons-le maintenant, d'accord ?

Exposez votre application à l'extérieur avecngrok

L'objectif est maintenant d'exposer votre application à l'extérieur afin que Nexmo puisse communiquer avec elle. Parce que l'application est exécutée localement, elle n'est pas disponible sur la machine de quelqu'un d'autre. Cela signifie que nous devons d'une manière ou d'une autre exposer notre serveur local à l'extérieur pour que Nexmo puisse l'atteindre.
Il y a une tonne de façons différentes de faire cela, mais l'une des plus simples est d'utiliser ngrok. Vous pouvez consulter cet article pour un aperçu plus approfondi de la façon dont cela fonctionne.

Mais voici l'essentiel :

• Télécharger et installer ngrok

• Ouvrir une nouvelle fenêtre de terminal

• Exécutez la commande suivante à partir de la ligne de commande :

Ici, ngrok pointe vers le port 3000 car il suppose que votre serveur local tourne sur le port http://localhost:3000. Si vous utilisez un port différent, assurez-vous d'ajuster la commande ngrok.

Vous devriez maintenant voir une interface de journalisation ngrok dans votre fenêtre de terminal.

En haut de l'interface se trouve une ligne qui commence par Forwarding et qui contient deux URL. La première est l'URL ngrok accessible de l'extérieur, qui se termine par ngrok.io et pointe vers votre serveur local.

Copiez et collez cette URL dans votre fichier responses_controller.rb et mettez à jour le NGROK_URL = "http://********.ngrok.io" pour qu'elle soit cette URL (celle qui est exécutée localement sur votre machine en ce moment même).

Note : Veillez à sauvegarder votre ngrok.io dans un endroit sûr ! Vous l'utiliserez également dans les prochaines étapes.

Ensuite, pour que votre application vocale fonctionne, vous devez relier votre compte Nexmo, un numéro de téléphone provisionné et une application Voice.

Acheter un numéro de téléphone Nexmo

• Dans le tableau de bord Nexmo, cliquez sur l'élément de menu Numbers dans le menu de gauche.

• Cliquez sur l'option Buy Numbers et vous serez dirigé vers une page où vous pourrez choisir un pays, des caractéristiques, un type et les quatre chiffres que vous souhaitez voir figurer sur le numéro.

  

• Sélectionnez le pays dans lequel vous vous trouvez pour que l'appel soit local. Pour les fonctions, sélectionnez Voice et pour le type, mobile ou fixe fonctionnera parfaitement.

• Cliquez sur Search pour afficher la liste des numéros de téléphone disponibles.

• Sélectionnez un numéro en cliquant sur le bouton orange Buy et en cliquant à nouveau sur le bouton orange Buy une fois que vous êtes dans la fenêtre de confirmation.

Vous possédez maintenant un numéro de téléphone Nexmo. La prochaine étape consiste à créer une application dans le tableau de bord Nexmo.

Créer une application Nexmo

• Dans le menu de gauche, cliquez sur l'élément de menu Voice dans le menu.

• Sélectionnez l'option Create an application option. Vous êtes dirigé vers une page où vous pouvez créer une nouvelle application Nexmo.

• Complétez le formulaire avec les éléments suivants :
  -Application name champ de texte magic8-ball-voice-app -Event URL champ de texte entrez l'URL ngrok sauvegardée : https://[ngrok url here]/event -Answer URL champ de texte saisir à nouveau l'URL ngrok sauvegardée : https://[ngrok url here]/answer

• Une fois que tout est en place, cliquez sur le bouton bleu Create Application bouton bleu. [video width="1042" height="814" mp4="https://www.nexmo.com/wp-content/uploads/2019/05/create-application.mp4"]

Lier le tout

Vous disposez désormais d'un numéro vocal Numbers et d'une application, il ne vous reste plus qu'à relier les deux.

• Sélectionnez l'option Numbers dans le menu de gauche, puis cliquez sur Your numbers pour être dirigé vers une page listant le numéro de téléphone que vous venez d'acheter.

• Cliquez sur l'icône de l'engrenage sur le côté droit de la page.

• Sélectionnez Application sous la zone Forward to dans la zone

• Sélectionnez votre nouvelle application Nexmo dans la liste déroulante située sous la rubrique Application zone.

• Appuyez sur le bouton bleu Ok bleu.

  

  Votre nouveau numéro de voix Nexmo est maintenant lié à votre nouvelle application Nexmo, et avec cette dernière étape, vous êtes prêt à l'essayer !

Exécuter votre application

Avec votre serveur ngrok toujours en cours d'exécution dans une fenêtre, exécutez rails s à partir d'une autre fenêtre de votre terminal.

Ceci devrait démarrer votre serveur Rails sur http://localhost:3000. Il n'y a pas de vues dans votre application, donc la seule façon d'interagir avec elle est de l'appeler.

C'est maintenant la partie la plus amusante !

• Préparez la question à laquelle vous n'avez pas pu répondre seul.

• Composez votre nouveau numéro de téléphone Nexmo à partir de votre propre téléphone.

• Vous devriez entendre votre application répondre à l'appel et vous demander l'invite de la méthode #answer Controller.

N'hésitez pas à expérimenter différentes options et à jouer avec votre application Nexmo ! Envisagez d'ajouter des réponses idiotes au tableau POSSIBLE_RESPONSES ou d'ajouter une option permettant d'obtenir une réponse différente si l'appelant n'aime pas la première. Félicitations ! Vous avez maintenant une application In-App Voice qui fonctionne parfaitement. utilisant Rails et l'API Voice de Nexmo.

Prochaines étapes

Si cela vous a donné envie d'en faire plus avec la voix, voici quelques idées pour la suite :

• Consultez cette excellente introduction aux SMS et Voice avec Nexmo.

• Jetez un coup d'œil à ce tutoriel amusant sur la façon de mettre en place une conférence téléphonique avec Nexmo Voice API, Ruby et Rails.

• Si vous avez envie d'encore plus de plus de clairvoyance dans votre vie, ne manquez pas de consulter ce tutoriel sur la façon d'écrire des des biscuits de fortune SMS sans serveur avec Nexmo !