Overview

Skill Level: Beginner

Con este ejemplo, queremos ayudar al p√ļblico a poder crear un chatbot usando el servicio conversation y conectarlo con una aplicaci√≥n web, para este caso usamos un aplicaci√≥n PHP simple, sin una interfaz compleja para as√≠ poder explicar la conexi√≥n.

Ingredients

  • Tener una cuenta de IBM Bluemix.
  • Opcional:
    • Plantillas HTML para la interfas de la pagina web donde se conecte el chatbot.

Step-by-step

  1. Crear aplicación Conversation en Bluemix

    Figura 01:

    imagen01

    El primer paso es buscar el servicio Conversation dentro del cat√°logo de aplicaciones disponibles en Bluemix.

     

    Figura 02:

    imagen02

    Despu√©s de escribir el nombre, hacer clic en ‚ÄúCrear‚ÄĚ.

     

    Figura 03:

    imagen03

    Desplegamos la aplicaci√≥n, haciendo clic en ‚ÄúLaunch tool‚ÄĚ.

     

    Figura 04:

    imagen04

    Procederemos a crear el WorkSpace para el desarrollo de la aplicación, para ello escribamos el nombre y descripción del workspace.

     

    Figura 05:

    imagen05

    Cuando se haya desplegado la interfaz, hacemos clic en el segundo icono de la lista de la izquierda.

     

    Figura 06:

    imagen06

    Estos datos mostrados, en el Workspace Details, son importantes para la conexión con la pagina PHP que crearemos después.

    Hay que tenerlos anotados, para usarlos después.

    Nota:

    • Se deber√° crear las conversaciones naturales en este entorno, para cuando ingresos preguntas en la p√°gina web, IBM Conversation pueda respondernos.
  2. Crear Aplicación PHP y realizar la conexión con el chatbot creado

    Figura 01.

    figura01

    Procederemos a crear un aplicación en Bluemix buscando un lenguaje de programación, para este ejercicio será PHP.

     

    Figura 02.

     figura02

    Despu√©s de iniciar la aplicaci√≥n PHP, hacer clic en ‚ÄúHabilitar‚ÄĚ para referenciar, los repositorios (ejem: GitHub).

     

    Figura 03.

     figura03

    Se habilita la interfaz de Cadena de herramientas Continuous Delibery, donde deberemos hacer clic en ‚ÄúCrear‚ÄĚ.

     

    Figura 04.

     figura04

    Una vez, creada la cadena de herramientas, nos aparecer√°n los servicios para modificar a nuestro gusto.

    Para empezar la codificación, usaremos el IDE web Eclipse Orion para desplegar el espacio de trabajo donde se procederá con ingreso y modificación de código HTML.

     

    Figura 05.

     figura05

    Creamos un archivo ‚ÄúconexionWatson.php‚ÄĚ para ah√≠ pegar el c√≥digo con el que especificamos las funciones de conexi√≥n¬†al servicio Conversation, que nos servir√° para indicar una serie de variables √ļnicas de cada aplicaci√≥n Conversation como: Usuario, Contrase√Īa y Contexto, la cual nos servir√° cuando ejecutemos la conexion desde el index.php, cuando realicemos preguntas al chatbot.

     

    Figura 06.

     figura06

    Pegar el siguiente código, en el archivo creado del paso anterior. 

    <?php

    class Conexion_Watson {

     

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† private $Usuario = “”;

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† private $Contrase√Īa = “”;

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† private $Contexto = “”;

     

                   function __construct()

        {

    ¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† $this->Contexto = $_SESSION[‘context’];

        }

     

                   public function set_credenciales($usr,$pass){

                                   $this->Usuario = $usr;

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† $this->Contrase√Īa = $pass;

                   }

     

                   public function set_contexto($context){

                  

                                                  $this->Contexto = $context;

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† $_SESSION[‘context’] = $context;

                                  

                   }

     

                    public function Enviar_Pregunta($text, $workspace) {

                        $curl = curl_init();

                       

                        $context_data = json_decode($this->Current_Context);

                        $resp = array(

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬†¬† ‘input’ => array(

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† ‘text’ => $text

                                                  ),

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬†¬† ‘context’ => $context_data

                        );

                                   

                                    $dataa = json_encode($resp);

     

                        curl_setopt($curl, CURLOPT_POST, true);

                        curl_setopt($curl, CURLOPT_POSTFIELDS, $dataa);

                        curl_setopt($curl, CURLOPT_HTTPHEADER, array(

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† ¬†¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬†¬†¬† ‘Content-Type: application/json’,¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† ¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† ‘Content-Length: ‘ . strlen($dataa))¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†

                                    ); 

                        curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† ¬†¬†¬†¬† curl_setopt($curl, CURLOPT_USERPWD, $this->Usuario.”:”.$this->Contrase√Īa);

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† ¬†¬†¬†¬† curl_setopt($curl, CURLOPT_URL, “https://gateway.watsonplatform.net/conversation/api/v1/workspaces/”.$workspace.”/message?version=2017-05-26″);

                        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

                        $result = curl_exec($curl);

                        if (curl_errno($curl)) {

    ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† ¬†¬†¬† echo ‘Error:’ . curl_error($curl);

                                    }

                        curl_close($curl);

                        $decoded = json_decode($result, true);

         return $decoded;

                    }

                  

                    }

                   ?>

    Figura 07.

    figura07

    Dentro de index.php, cambiaremos el código para visualizar como funciona este ejemplo, ya que solo buscamos explicar la conexión con el chatbot, no usaremos una interfaz compleja ni vistosa.

    Usemos este código:

    <?php
    session_start();
    include ‘conexionWatson.php’;

    ?>

    <!DOCTYPE html>
    <html>
    <head>
    <title>PHP Starter Application</title>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <link rel=”stylesheet” href=”style.css” />
    </head>
    <body>

    <?php

    $watson = new Conexion_Watson();
    $watson->set_credenciales(“a013ceec-03ab-4a11-ba77-88fee6a75a2c”,”0M06YHFqhHEh”);

    // define variables and set to empty values
    $Pregunta = “”;
    $respuesta = “”;

     

    function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
    }

    if ($_SERVER[“REQUEST_METHOD”] == “POST”) {

    $Pregunta = test_input($_POST[“Pregunta”]);
    $respuesta = $watson->Enviar_Pregunta($Pregunta, “05010da0-5870-4333-b2c6-26bb179d976c”);
    $watson->set_contexto(json_encode($respuesta[‘context’]));

    echo $respuesta[‘output’][‘text’][0];
    echo “<br><br>”;
    echo json_encode($respuesta);
    }

    ?>
    <table>
    <tr>
    <td style=’width:50%;’>
    </td>
    <td>
    <h2>ChatBot</h2>

    <form method=”post” action=”<?php echo htmlspecialchars($_SERVER[“PHP_SELF”]);?>”>
    <input type=”text” name=”Pregunta”>
    <input type=”submit” name=”submit” value=”Submit”>
    </form>
    </td>
    </tr>
    </table>
    </body>
    </html>

    Figura 08.

     figura08

    Ejecutemos la aplicación y se mostrara una interfaz simple, pero donde se aprecia como funciona el servicio Conversation de Bluemix.

    Escribamos preguntas que hayamos programado anteriormente en la aplicación Conversation creada.

    Por ejemplo, si la saludamos con un ‚ÄúHola‚ÄĚ, Conversation IBM nos responde con lo que se aprecia arriba del textbox donde ingresamos el saludo.

    Se puede apreciar en el texto, lo que recibe el chatbot y como responde, en las líneas abajo de la respuesta.

Join The Discussion