Inf 17 (chatbot)

GUÍA DE USO DE LABORATORIOS
ESTUDIANTE: Guzmán Gómez Carlos Jossue
SEMESTRE: Tercero
PARALELO: C
CARRERA: Pedagogía de las Ciencias Experimentales Informática
Informe N°17
TEMA:
Chatbots.
OBJETIVO:
Estructurar códigos en la creación de un chatbots mediante el uso de Landbot y Visual Studio Code
para realizar la compra de llantas en su diferente clasificación de rines.
RESULTADOS DE APRENDIZAJE
 Correcto uso de las herramientas que contiene Visual Studio Code y Landbot.
 Obtener trabajos precisos con diferentes variables en la ejecución de programas.
ACTIVIDADES:
-Crear un chatbots en la página web gratuita Lanbot.
-Crear un archivo nuevo en el desarrollador Visual Studio Code.
-Organizar códigos para permitir la entrada y salida de datos al interactuar con un chatbot que
corresponde a la compra de rines.
DESARROLLO DE CONTENIDOS
1. En primer lugar, se debe crear una cuenta en la página web Landbot.com y rellenar los
correspondientes datos personales.

2. En segundo lugar, realizar la edición del chatbot a crear, conforme a los requerimientos
como creador. En esta ocasión se diseñó una asistente que permita realizar la compra de
rines de manera más sencilla e interactiva con cada cliente.
CÓDIGO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta http-equiv='expires' content='0'/>
<meta http-equiv='pragma' content='no-cache'/>
<meta http-equiv='cache-control' content='no-store'/>
<meta name="google" content="notranslate" value="notranslate"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title> landbot | Start the conversation</title>
<meta property="og:title" content="landbot | Start the conversation"/>
<meta name="twitter:title" content="landbot | Start the conversation"/>
<meta name="description" content="Landbot.io is a tool to create conversation
al interfaces in substitution of forms. No coding required!"/>
<meta property="og:description" content="Landbot.io is a tool to create conve
rsational interfaces in substitution of forms. No coding required!"/>
<meta name="twitter:description" content="Landbot.io is a tool to create conv
ersational interfaces in substitution of forms. No coding required!"/>
<meta property="og:type" content="website"/>

4. Posteriormente, se creará un nuevo proyecto dando click izquierdo sobre “File” y “New
File”.
5. Asi pues, para guardar el nuevo archivo creado seleccionamos nuevamente “File” y “Save
As”, para a continuación introducir el correspondiente nombre del trabajo y guardarlo con
formato PHP.

6. Luego en el primer formulario (Edicion.php) se estructura el texto que será el registro
correspondiente de los datos del comprador y los tipos de rines con los precios disponibles
que ofrece la página web; en donde se agregará adicionalmente el correspondiente código
del chatbot creado para su uso previo. Con el siguiente código:
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Inscripciones</title>
<link rel="stylesheet" href="style3.css">
<form action="enviar.php" method="post">
</head>
<body >
<script SameSite="None; Secure" src="https://static.landbot.io/landbot-3/landbot-
3.0.0.js"></script>
<script>
var myLandbot = new Landbot.Livechat({

configUrl: 'https://chats.landbot.io/v3/H-977230-
TVS68W9VY6M25QHE/index.json',
});
</script>
<center><h1>FORMULARIO PARA LA COMPRA DE RINES</h1></center>
<hr />
<center>
<div style=" border: ridge #0f0fef 8px;">
<p><h3>Nombres: </h3></p>
<input type="text" name="nom" value="">
<p><h3>Apellidos: </h3></p>
<input type="text" name="nom2" value="">
<h3>Ciudad: </h3><br>
<input type="radio" name="ciu" value="1"> Quito
<input type="radio" name="ciu" value="2"> Guayaquil
<input type="radio" name="ciu" value="3"> Cuenca
<input type="radio" name="ciu" value="4"> Ambato
</div>
<hr />
<center>
<div style=" border: ridge #33FF00 8px;">
<p><h3>Género:</h3></p>
<input type="radio" name="gen" value="1" />Femenino
<input type="radio" name="gen" value="2" />Masculino
<p><h3>Edad: </h3></p><input type="text" name="edad" value="">
<p><h3>Correo electrónico: </h3></p><input type="text" name="corre" value
="">
<p><h3>Número Telefónico: </h3></p><input type="text" name="nute"
value="">
<p><h3>Dirección: </h3></p><input type="text" name="dire" value="">
</div></center>
</center>
</center>
</div>
<hr />
<center>
<div style=" border: ridge #FFFF00 8px;">
<p><h3>Tipos de llantas: </h3></p><br>
<input type="checkbox" name="idi" value="1"> RIN 10 <br>
<input type="checkbox" name="idi" value="2"> RIN 11<br>
<h3>Material: </h3><br>
<select name="select">
<option> Aluminio </option>
<option> Magnesio</option>
<option> Acero</option>

<option> Aleación</option>
</select></center>
</div><hr />
<center>
<div style=" border: ridge #00FFFF 8px;">
<h3>Comentario:</h3> <br/>
<textarea name="comentario" rows="5" cols="50">Comentario: Gracias por su compra!
</textarea>
</div>
<hr />
<input type="submit" name="Enviar" />
<input type="reset" name="Limpiar" />
</body>
</html>
7. Después en un nuevo formulario (Diseño.php) se organiza la información que será impresa
por pantalla en el caso de haber efectuado el formulario, en donde se realiza el diseño
respectivo en color, espacio, letra, imágenes y el recordatorio de espacios sin rellenar o
errores en el registro de datos. Así:
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style3.css">
<title>Inscrito</title>
</head>
<body >
<center><h1>Compra de rines para autos </h1></center><br />
<hr />
<div style=" border: ridge #0f0fef 8px;">
<?php
if(!empty($_POST['nom']))
{
$n=$_POST['nom'];
}
else {
echo "<p>Por favor Ingrese sus Nombres</p>";
}
if(!empty($_POST['nom2']))
{
$n1=$_POST['nom2'];
echo "<p>Su nombre completo es:</p>".$n." ".$n1;
}
else {

echo "<p>Por favor Ingrese sus Apellidos</p>";
}
if(!empty($_POST['ciu']))
{
$c=$_POST['ciu'];
switch ($c)
{
case 1: echo "<p>Su ciudad es:</p>QUITO";
break;
case 2: echo "<p>Su ciudad es:</p> GUAYAQUIL";
break;
case 3: echo "<p>Su ciudad es: </p>CUENCA";
break;
case 4: echo "<p>Su ciudad es: </p>AMBATO";
break;
}
}
else {
echo "<p>No ha selecionado una ciudad</p>";
}
?>
</div>
</hr>
<div style=" border: ridge #33FF00 8px;">
<?php
if (!empty ($_POST['gen']))
{
$g=$_POST['gen'];
switch ($g)
{
case 1: echo "<p>Genéro:</p>Femenino";
break;
case 2: echo "<p>Género:</p>Masculino";
break;
}
}
else
{
echo "<p>No ha selecionado un Género</p>";
}
$e=$_POST['edad'];
if (!is_numeric($e))
{
echo "<p>Debe ingresar Números en el casillero edad</p>";
}
else
{
if ($e>=100 or $e<=0)
{
echo "Edad no permitida";

}
else
{
echo"<p>Su edad es:</p>".$e;
}
}
if (!empty($_POST['corre']))
{
$c2=$_POST['corre'];
echo "<p> Su correo es:</p>".$c2;
}
else
{
echo "<p>NO ha ingresado un correo electronico</p>".br;
}
if(!empty($_POST['nute']))
{
$nt=$_POST['nute'];
echo "<p>Su numero es:</p>".$nt;
}
else
{
echo "<p>Debe ingresar Números en el casillero Numero Telefonico</P>";
}
if (!empty($_POST['dire']))
{
$di=$_POST['dire'];
echo "<p> Su direccion es: </p>".$di;
}
else
{
echo "<p>Casillero Direccion vacio</p>";
}
?>
</div><hr />
<?php
if(!empty($_POST['idi']))
{
$idi=$_POST['idi'];
if ($idi==1)
{
echo "<p>RIN:</p>10";
}
elseif($idi==2)
{
echo "<p>RIN:<p>11";
}
elseif($idi==3)
{

}
elseif($idi==4)
{
}
elseif($idi==5)
{
}
elseif($idi==6)
{
}
}
else
{
echo" No selecciono un idioma";
}
?>
</div>
<?php
if (!empty ($_POST["select"])){
$exa=$_POST["select"];
if ($exa=="Aluminio"){
$msm="<p><img src='8.png'> El material es: Aluminio</img><p>";
print $msm."<br>";
}
elseif ($exa=="Magnesio"){
$msm="<p><img src='7.jpg'> El materia es: Magnesio</img><p>";
print $msm."<br>";
}
elseif ($exa=="Acero"){
$msm="<p><img src='3.jpg'> El precio es: Acero</img><p>";
print $msm."<br>";
}
elseif ($exa=="Aleación"){
$msm="<p><img src='3.jpg'> El precio es: Aleación</img><p>";
print $msm."<br>";
}
else {
echo "<p>No seleccion un material</p>";
}
?>
</div>
</body>
</html>
8. A continuación, se procede a la descarga de imágenes con el respectivo nombre declarado
en el paso anterior. Es fundamental guardar todos los archivos en una sola carpeta

determinada, almacenar las imágenes con formato “jpg” y finalmente arrastrar las
diferentes ilustraciones al Visual Studio Code.
9. Por consiguiente, se introduce el uso del formato “style3” con formato “css” que es el
encargo de indicar la información de estilo, con el siguiente código:
body {
background-image:url(dos.jpg);
background-size:100vw 100vh;
background-attachment:fixed;
margin:0;
}
div {
width:600px;
margin:auto;
background: rgb(236, 220, 232);
padding:10px 20px;
box-sizing: border-box;
margin-top:20px;
border-radius:7px;
}
h1{
color:#ffffff;
}
}
h3{
color:#08288a;
}
h2{
color:#0b0b94;
}
p
{
font-size:24px;
color:#0c0c8a;
}
10. Y se guarda por medio de un “Save” la información ingresada.

11. Ingresar en la página web de preferencia con el enlace “http://127.0.0.1“ junto al nombre
de la carpeta o espacio en el que se guardó el archivo, en este caso “/deber”.
Posteriormente se selecciona el nombre del documento (formulario2) para visualizar por
pantalla los códigos ingresados.

12. Por último, al ejecutar el programa se obtiene:
a. Principalmente se logra interactuar con un chatbot predeterminado al momento de
realizar la compra de rines de manera sencilla y rápida.
b. También al rellenar el formulario ya conformado anteriormente, se podrá visualizar
la información ingresa para corroborar la compra realizada y observar el respectivo
precio e ilustración del rin seleccionado.
a)
b)
BIBLIOGRAFÍA:
• Tira, C. (2020). Explicación y uso de SWITCH (ejemplos en Visual Studio MacOS). .
https://www.tiracodigo.com/index.php/programacion/c-visual-studio-mac/explicacion-y-uso-
de-switch-ejemplos-en-visual-studio-macos

f.) ________________________ f.) _______________________
Carlos Jossue Guzmán Gómez MSc. Víctor Zapata
ESTUDIANTE DOCENTE
• Ponce, L. A. A. (2018, 11 octubre). Estructuras de decisión: If Then y Select Case - Visual Basic
paso a paso. AulaFácil. https://www.aulafacil.com/cursos/programacion/visual-basic-paso-a-
paso/estructuras-de-decision-if-then-y-select-case-l42171

Inf 17 (chatbot)

Más contenido relacionado

La actualidad más candente (19)

Similar a Inf 17 (chatbot) (20)

Más de Carlos Guzmán (20)

Último (20)

Inf 17 (chatbot)