¿Cómo crear un chatbot en Android con la API de BrainShop?

Hemos visto muchas aplicaciones y sitios web en los que veremos un chatbot donde podemos chatear junto con el chatbot y podemos obtener fácilmente soluciones para nuestras preguntas respondidas desde el chatbot. En este artículo, veremos cómo construir un chatbot en Android . 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que construiremos un chatbot simple donde podemos hacerle una pregunta a nuestro bot y el bot responderá nuestras preguntas. A continuación se muestra el video en el que veremos lo que vamos a construir en este artículo.  

Implementación paso a paso

Paso 1: crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia a continuación en su archivo build.gradle

Vaya a la aplicación > Gradle Scripts > archivo build.gradle y agregue la dependencia a continuación en la sección de dependencias.  

implementación ‘com.android.volley:volley:1.1.1’

Después de agregar esta dependencia, sincronice su proyecto y ahora muévase hacia la parte AndroidManifest.xml .  

Paso 3: agregar permisos a Internet en el archivo AndroidManifest.xml

Vaya a la aplicación > AndroidManifest.xml y agréguele el siguiente código. 

<!--permissions for internet-->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Paso 4: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--recycler view to display our chats-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVChats"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/idLLMessage" />
  
    <LinearLayout
        android:id="@+id/idLLMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:weightSum="5">
  
        <!--edit text to enter message-->
        <EditText
            android:id="@+id/idEdtMessage"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="4"
            android:hint="Enter Message" />
  
        <!--button to send message-->
        <ImageButton
            android:id="@+id/idIBSend"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:background="@color/purple_200"
            android:src="@android:drawable/ic_menu_send"
            android:tint="@color/white" />
  
    </LinearLayout>
      
</RelativeLayout>

Paso 5: Creando una clase Modal para almacenar nuestros mensajes

Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java y asígnele el nombre MessageModal y agréguele el siguiente código.

public class MessageModal {
  
    // string to store our message and sender
    private String message;
    private String sender;
  
    // constructor.
    public MessageModal(String message, String sender) {
        this.message = message;
        this.sender = sender;
    }
  
    // getter and setter methods.
    public String getMessage() {
        return message;
    }
  
    public void setMessage(String message) {
        this.message = message;
    }
  
    public String getSender() {
        return sender;
    }
  
    public void setSender(String sender) {
        this.sender = sender;
    }
}

Paso 6: Creación de un archivo de diseño para mensajes de usuario

Los iconos utilizados en este archivo están presentes en la carpeta dibujable. Navegue a la aplicación> res> diseño> Haga clic derecho en él> Nuevo> archivo de recursos de diseño y nombre el archivo como user_msg y agregue el código a continuación. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:layout_margin="5dp"
    android:elevation="8dp"
    app:cardCornerRadius="8dp">
  
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
  
        <!--text view for displaying user message-->
        <TextView
            android:id="@+id/idTVUser"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_margin="5dp"
            android:padding="3dp"
            android:text="User message"
            android:textColor="@color/black" />
  
        <!--we are displaying user icon-->
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:src="@drawable/ic_user" />
          
    </LinearLayout>
  
</androidx.cardview.widget.CardView>

Paso 7: Cree un archivo de diseño para mensajes de bot 

Los iconos utilizados en este archivo están presentes en la carpeta dibujable. Vaya a la aplicación > res > diseño > haga clic con el botón derecho en él > Nuevo > archivo de recursos de diseño y nombre el archivo como bot_msg  y agregue el siguiente código. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="start"
    android:layout_margin="5dp"
    android:elevation="8dp"
    app:cardCornerRadius="8dp">
  
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
  
        <!--below widget is for image of bot-->
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:src="@drawable/ic_bot" />
  
        <!--below widget is for 
            displaying message of bot-->
        <TextView
            android:id="@+id/idTVBot"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_margin="5dp"
            android:padding="3dp"
            android:text="Bot message"
            android:textColor="@color/black" />
          
    </LinearLayout>
  
</androidx.cardview.widget.CardView>

Paso 8: trabajar con la clase Adapter

Para configurar los datos de nuestros elementos de Chat RecyclerView , debemos crear una clase de adaptador. Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java y nombre su clase como MessageRVAdapter y agréguele el siguiente código.  

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
  
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
  
import java.util.ArrayList;
  
public class MessageRVAdapter extends RecyclerView.Adapter {
      
    // variable for our array list and context.
    private ArrayList<MessageModal> messageModalArrayList;
    private Context context;
  
    // constructor class.
    public MessageRVAdapter(ArrayList<MessageModal> messageModalArrayList, Context context) {
        this.messageModalArrayList = messageModalArrayList;
        this.context = context;
    }
  
    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;
        // below code is to switch our 
        // layout type along with view holder.
        switch (viewType) {
            case 0:
                // below line we are inflating user message layout.
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.user_msg, parent, false);
                return new UserViewHolder(view);
            case 1:
                // below line we are inflating bot message layout.
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.bot_msg, parent, false);
                return new BotViewHolder(view);
        }
        return null;
    }
  
    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        // this method is use to set data to our layout file.
        MessageModal modal = messageModalArrayList.get(position);
        switch (modal.getSender()) {
            case "user":
                // below line is to set the text to our text view of user layout
                ((UserViewHolder) holder).userTV.setText(modal.getMessage());
                break;
            case "bot":
                // below line is to set the text to our text view of bot layout
                ((BotViewHolder) holder).botTV.setText(modal.getMessage());
                break;
        }
    }
  
    @Override
    public int getItemCount() {
        // return the size of array list
        return messageModalArrayList.size();
    }
  
    @Override
    public int getItemViewType(int position) {
        // below line of code is to set position.
        switch (messageModalArrayList.get(position).getSender()) {
            case "user":
                return 0;
            case "bot":
                return 1;
            default:
                return -1;
        }
    }
  
    public static class UserViewHolder extends RecyclerView.ViewHolder {
          
        // creating a variable 
        // for our text view.
        TextView userTV;
  
        public UserViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing with id.
            userTV = itemView.findViewById(R.id.idTVUser);
        }
    }
  
    public static class BotViewHolder extends RecyclerView.ViewHolder {
          
        // creating a variable
        // for our text view.
        TextView botTV;
  
        public BotViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing with id.
            botTV = itemView.findViewById(R.id.idTVBot);
        }
    }
}

Paso 9: Generar clave API para usar el servicio de chatbot

Ve a Brainshop.ai genera tu cuenta simple con tu usuario y contraseña. Simplemente cree su cuenta en este sitio web. Después de crear una nueva cuenta, verá la siguiente pantalla. Después de crear su cuenta, debe solicitar una nueva contraseña desde la opción de solicitud de contraseña e ingresar su dirección de correo electrónico. Después de agregar su dirección de correo electrónico, debe agregar la contraseña a su cuenta. Ahora estamos listos para generar nuestra clave API. 

Siga los pasos anteriores para generar un nuevo cerebro para su chatbot. Después de generar su bot ahora obtendremos la URL de la API para este cerebro. Navegue a la pestaña de configuración dentro de su cerebro creado, podrá ver los detalles de su bot como se muestra a continuación.

Nota : ahora usaremos esta URL de API solo dentro del archivo MainActivity.java . 

Paso 10: trabajar con el archivo MainActivity.java

Actividad principal.java Actividad principal.java

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
  
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;
  
import org.json.JSONException;
import org.json.JSONObject;
  
import java.util.ArrayList;
  
public class MainActivity extends AppCompatActivity {
  
    // creating variables for our
    // widgets in xml file.
    private RecyclerView chatsRV;
    private ImageButton sendMsgIB;
    private EditText userMsgEdt;
    private final String USER_KEY = "user";
    private final String BOT_KEY = "bot";
  
    // creating a variable for
    // our volley request queue.
    private RequestQueue mRequestQueue;
  
    // creating a variable for array list and adapter class.
    private ArrayList<MessageModal> messageModalArrayList;
    private MessageRVAdapter messageRVAdapter;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // on below line we are initializing all our views.
        chatsRV = findViewById(R.id.idRVChats);
        sendMsgIB = findViewById(R.id.idIBSend);
        userMsgEdt = findViewById(R.id.idEdtMessage);
  
        // below line is to initialize our request queue.
        mRequestQueue = Volley.newRequestQueue(MainActivity.this);
        mRequestQueue.getCache().clear();
  
        // creating a new array list
        messageModalArrayList = new ArrayList<>();
  
        // adding on click listener for send message button.
        sendMsgIB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // checking if the message entered
                // by user is empty or not.
                if (userMsgEdt.getText().toString().isEmpty()) {
                    // if the edit text is empty display a toast message.
                    Toast.makeText(MainActivity.this, "Please enter your message..", Toast.LENGTH_SHORT).show();
                    return;
                }
  
                // calling a method to send message
                // to our bot to get response.
                sendMessage(userMsgEdt.getText().toString());
  
                // below line we are setting text in our edit text as empty
                userMsgEdt.setText("");
            }
        });
  
        // on below line we are initialing our adapter class and passing our array list to it.
        messageRVAdapter = new MessageRVAdapter(messageModalArrayList, this);
  
        // below line we are creating a variable for our linear layout manager.
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(MainActivity.this, RecyclerView.VERTICAL, false);
  
        // below line is to set layout
        // manager to our recycler view.
        chatsRV.setLayoutManager(linearLayoutManager);
  
        // below line we are setting
        // adapter to our recycler view.
        chatsRV.setAdapter(messageRVAdapter);
    }
  
    private void sendMessage(String userMsg) {
        // below line is to pass message to our
        // array list which is entered by the user.
        messageModalArrayList.add(new MessageModal(userMsg, USER_KEY));
        messageRVAdapter.notifyDataSetChanged();
  
        // url for our brain
        // make sure to add mshape for uid.
        // make sure to add your url.
        String url = "Enter you API URL here" + userMsg;
  
        // creating a variable for our request queue.
        RequestQueue queue = Volley.newRequestQueue(MainActivity.this);
  
        // on below line we are making a json object request for a get request and passing our url .
        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                try {
                    // in on response method we are extracting data 
                    // from json response and adding this response to our array list.
                    String botResponse = response.getString("cnt");
                    messageModalArrayList.add(new MessageModal(botResponse, BOT_KEY));
                     
                    // notifying our adapter as data changed.
                    messageRVAdapter.notifyDataSetChanged();
                } catch (JSONException e) {
                    e.printStackTrace();
                      
                    // handling error response from bot.
                    messageModalArrayList.add(new MessageModal("No response", BOT_KEY));
                    messageRVAdapter.notifyDataSetChanged();
                }
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                // error handling.
                messageModalArrayList.add(new MessageModal("Sorry no response found", BOT_KEY));
                Toast.makeText(MainActivity.this, "No response from the bot..", Toast.LENGTH_SHORT).show();
            }
        });
          
        // at last adding json object 
        // request to our queue.
        queue.add(jsonObjectRequest);
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción: 

Consulte el proyecto en el siguiente enlace: https://github.com/ChinmayMunje/GFG-Bot