Android studio chat bot

Как создать чат приложение для Android с помощью Firebase

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

С Firebase, создание «живого» социального приложения, покажется вам прогулкой в парке. И самое хорошее: вам не нужно писать ни одной строчки кода на стороне сервера.

В этом уроке я покажу вам, как использовать Firebase UI для создания приложения группового чата, которым вы можете поделиться с друзьями. Это будет очень простое приложение с одним чатом, доступным для всех пользователей.

Как вы, возможно, догадались, приложение будет зависеть от Firebase Auth для управления регистрацией и регистрацией пользователей. Он также будет использовать базу данных Firebase в реальном времени для хранения сообщений группового чата.

Предпосылки

Чтобы выполнить это пошаговое руководство, вам понадобится следующее:

Инструкции о том, как настроить учётную запись в Firebase и подготовиться к разработке с Firebase в Android Studio, смотрите мой учебник Начало работы с Firebase для Android здесь на Envato Tuts+.

1. Создадим проект Android Studio

Запустите Android Studio и создайте новый проект с пустой активити под названием MainActivity.

Для того, чтобы настроить проект для использования платформы Firebase, откройте окно Firebase Assistant, нажав на Tools > Firebase.

При использовании платформы Firebase, как правило, хорошей идеей будет добавить в проект Firebase Analytics. Таким образом, внутри окна помощника Firebase, перейдите в раздел Analytics и нажмите Log an Analytics event.

Затем нажмите кнопку Connect to Firebase и убедитесь, что выбрана опция Create new Firebase project. После того, как соединение установиться, нажмите кнопку Add Analytics to your app.

На данный момент проект Android Studio не только интегрирован с Firebase Analytics, но и готов использовать все другие службы Firebase.

2. Добавим зависимости

В этом проекте мы будем использовать две библиотеки: Firebase UI и библиотеку поддержки дизайна Android. Поэтому, откройте файл build.gradle модуля app и добавьте следующие зависимости, как compile :

Нажмите кнопку Sync Now, чтобы обновить проект.

3. Зададим макеты (layouts)

Файл activity_main.xml, который уже привязан к MainActivity , определяет содержимое главного экрана приложения. Другими словами, он будет представлять чат-комнату.

Как и большинство других приложений для группового чата, доступных сегодня, наше приложение будет иметь следующие элементы интерфейса:

• Список, который отображает все сообщения группового чата в хронологическом порядке
• Поле ввода, в котором пользователь может ввести новое сообщение
• Кнопка, которую пользователь может нажать, чтобы отправить сообщение

Поэтому activity_main.xml должен содержать ListView , EditText и FloatingActionButton . После размещения их внутри виджета RelativeLayout ваш XML-макет должен выглядеть так:

Обратите внимание, что я поместил виджет EditText в виджет TextInputLayout . Это добавит плавающий ярлык в EditText , что очень важно, если вы хотите придерживаться принципов материального дизайна.

Теперь, когда макет исходного экрана готов, мы можем перейти к созданию макета для сообщений чата, которые будут элементами внутри ListView . Начните с создания нового XML файла макета под названием message.xml, чей корневой элемент RelativeLayout .

Макет должен содержать виджеты TextView для отображения текста сообщения чата, времени его отправки и его автора. Вы можете разместить их в любом порядке. Вот макет, который я буду использовать:

4. Управление аутентификацией пользователя

Разрешить пользователям общаться в чат-комнате анонимно, не самая лучшая идея. Это может привести к спаму, проблемам с безопасностью и к другим не идеальным ситуациям в общении. Поэтому давайте настроим наше приложение так, чтобы только зарегистрированные пользователи могли читать и публиковать сообщения.

Для начала, перейдите в раздел Auth в Firebase Console и включите возможность регистрации по Email/Password.

Не стесняйтесь подключать поставщиков OAuth 2.0. Однако, FirebaseUI v0.6.0 без проблем поддерживает только вход в Google и Facebook.

Шаг 1. Обработка входа пользователя

Как только приложение запускается, оно должно проверять, вошёл ли пользователь в систему. Если да, приложение должно отобразить содержимое комнаты для дискуссий. В противном случае оно должно перенаправить пользователя на экран входа или регистрации. Для создания этих экранов с FirebaseUI требуется намного меньше кода, чем вы можете себе представить.

Внутри метода onCreate() в MainActivity проверьте, был ли пользователь зарегистрирован, проверив, не является ли текущий объект FirebaseUser null . Если оно равно NULL , необходимо создать и настроить объект Intent , который открывает активити входа. Для этого используйте класс SignInIntentBuilder . После этого, вы должны запустить активите входа, используя метод startActivityForResult() .

Обратите внимание, что вход в систему также может зарегистрировать нового пользователя. Поэтому у вас нет необходимости писать дополнительный код для обработки регистрации пользователя.

Добавьте следующий код в метод onCreate() :

Как вы видите в приведенном выше коде, если пользователь уже вошёл в систему, мы сначала отображаем Toast приветствуя пользователя, а затем вызываем метод displayChatMessages. Пока что, просто создайте для этого заглушку. Код в него мы добавим позже.

Как только пользователь выполнит вход, MainActivity получит результат от Intent . Чтобы обработать его, вы должны переопределить метод onActivityResult() .

Если код результата — RESULT_OK , это означает, что пользователь выполнил вход успешно. Если это так, вы должны снова вызвать метод displayChatMessages() . В противном случае вызовите finish() , чтобы закрыть приложение.

На этом этапе вы можете запустить приложение и посмотреть на экран входа и регистрации.

Этап 2. Обработка выхода пользователя из системы

По умолчанию, FirebaseUI использует Smart Lock для паролей. Поэтому, как только пользователи входят в систему, они останутся в системе, даже если приложение будет перезапущено. Чтобы пользователи могли выйти из системы, мы добавим параметр «Выход» в меню MainActivity .

Создайте новый файл меню ресурсов с именем main_menu.xml и добавьте к нему один элемент item , название title которого — Выход. Содержимое файла должно выглядеть так:

Чтобы создать экземпляр ресурса меню внутри MainActivity , переопределите метод onCreateOptionsMenu() и вызовите метод inflate() объекта MenuInflater .

Затем переопределите метод onOptionsItemSelected() для обработки событий клика по пункту меню. Внутри этого метода вы можете вызвать метод signOut() класса AuthUI для выхода пользователя. Поскольку операция выхода из системы выполняется асинхронно, мы также добавим туда OnCompleteListener .

Когда пользователь выйдет из системы, приложение должно автоматически закрыться. Вот почему вы видите вызов метода finish() в коде выше.

5. Создание модели

Чтобы сохранять сообщения чата в базе данных Firebase в реальном времени, вы должны создать для них модель. Макет сообщения чата, который мы создали ранее в этом уроке, имеет три представления. Чтобы иметь возможность заполнить эти представления, модель также должна иметь как минимум три поля.

Создайте новый Java класс под названием ChatMessage.java и добавьте к нему три переменные: MessageText , messageUser и messageTime . Также добавьте конструктор для инициализации этих переменных.

Чтобы сделать модель совместимой с FirebaseUI, также нужнжо добавить конструктор по умолчанию, а также геттеры и сеттеры для всей группы переменных.

На этом этапе класс ChatMessage должен выглядеть так:

6. Отправляем сообщение в чат

Теперь, когда модель готова, мы можем легко добавлять новые сообщения чата в базу данных Firebase в реальном времени.

Чтобы отправить новое сообщение, пользователь будет нажимать FloatingActionButton . Поэтому вы должны добавить к ней OnClickListener .

Внутри слушателя вы должны сначала получить объект DatabaseReference , используя метод getReference() класса FirebaseDatabase . Затем вы можете вызвать методы push() и setValue() , чтобы добавить новые экземпляры класса ChatMessage в базу данных реального времени.

Экземпляры ChatMessage должны, конечно, быть инициализированы с использованием содержимого EditText и отображать имя текущего пользователя.

Соответственно, добавьте следующий код в метод onCreate() :

Данные в базе данных реального времени Firebase всегда сохраняются в виде пар «ключ-значение». Однако, если вы посмотрите код выше, вы увидите, что мы вызываем setValue() без указания какого-либо ключа. Это возможно только потому, что вызову метода setValue() предшествует вызов метода push() , который автоматически генерирует новый ключ.

7. Отображение сообщений чата

FirebaseUI имеет очень удобный класс под названием FirebaseListAdapter, что значительно снижает попытки, необходимые для заполнения ListView , используя данные, имеющиеся в базе данных Firebase. Сейчас мы будем использовать его для извлечения и отображения всех объектов ChatMessage , которые присутствуют в базе данных.

Добавьте объект FirebaseListAdapter в качестве новой переменной класса MainActivity .

Внутри метода displayChatMessages() инициализируйте адаптер, используя его конструктор, который ожидает следующие аргументы:

• Ссылка на Activity
• class объекта, который вас интересует
• Расположение элементов списка
• Объект DatabaseReference

FirebaseListAdapter является абстрактным классом и имеет абстрактный метод populateView() , который должен быть переопределен.

Как следует из его названия, populateView() используется для заполнения представлений каждого элемента списка. Если вы знакомы с классом ArrayAdapter , вы можете думать о populateView() как альтернативе методу getView() .

Внутри метода, вы должны сначала использовать findViewById() , чтобы получить ссылки на каждый TextView , который присутствует в файле макета message.xml. Затем вы можете вызвать их методы setText() и заполнить их с помощью геттеров класса ChatMessage .

На этом этапе содержимое displayChatMessages() должно выглядеть следующим образом:

Приложение группового чата готово. Запустите его и отправьте новые сообщения, чтобы они сразу же появились в ListView . Если вы поделитесь приложением с друзьями, вы также сможете видеть их сообщения, как только они их отправят.

Вывод

Из этого урока вы узнали, как использовать Firebase и FirebaseUI для создания очень простого приложения группового чата. Вы также видели, как легко работать с классами, доступными в FirebaseUI, для быстрого создания новых экранов и реализации сложных функций.

Чтобы узнать больше о Firebase и FirebaseUI, перейдите к официальной документации. Или ознакомьтесь с некоторыми другими нашими уроками по Firebase здесь, на Envato Tuts+!

Источник

Building Chatbots with Android and Dialogflow

Table of Contents

Building Your Application Structure and Setting Up Appropriate Accounts

Building the Backend Server

Building the Android App

How 5 Top Fintech Chatbots Use AI for Conversational Banking

Building Conversational Chatbots with React

How to Add Chatbots to Stream Chat Using Dialogflow

• over 1 year ago

Interest in and application of artificial intelligence and machine learning have been rapidly rising in the last few years. One of the most popular ways in which this interest has manifested is a rise in the use of chatbots. Especially in years past, communicating with a chatbot can be a frustrating experience. However, with advances in machine learning and artificial intelligence, there is no excuse for not providing a positive experience for chat users. These advances allow machines/computers to process, understand, and reply to human messages in a way that is genuinely useful to the human contacting your system.

A few of the current applications of chatbots are:

• Customer support systems
• Knowledgebase and/or help centers
• Appointment scheduling
• Booking events, hotels and/or restaurant reservations

In this tutorial, I will be describing how to build an Android app with a chatbot, using Stream Chat and Dialogflow. We’ll also walk through how to implement custom event handlers to allow for real-time communication; when a message is sent, our event listener will send the message to the backend, and the backend server will send the text to Dialogflow, which will process the message and reply with the most appropriate answer. Once this flow has completed, the backend server will send the message to the «Chat» channel in your application. Through this process, your Android app will be updated with both the text from the user and the message updated from the backend!

By the end of this post, you should have an app that looks a lot like this:

As always, the entire source code of this tutorial can be found on GitHub.

Note: Because this app is created using Android Studio, the directory structure, when viewed inside of a folder, may be different than you would typically expect.

Prerequisites

To build this application, we’ll be utilizing the following tech:

Note: Please make sure you’ve installed all of the above before proceeding. You won’t need to worry about actually creating a Dialogflow account just yet, as we’ll review the details for doing so in a few sections.

Building Your Application Structure and Setting Up Appropriate Accounts

This tutorial is going to contain two applications — the backend server and the Android app. The first step is to create a directory to contain both of these; this can be done with the following commands:

This will create a chatbot-android directory and, within that, a server directory.

Setting Up Your Android App

Open the Android Studio app and create a new application at chatbot-android/DialogFlowApplication (so our chatbot-android directory will now contain a DialogFlowApplication directory, as well as a server directory). You’ll also want to set the Android version to be «API 29» and select «Java» as the programming language in the Android Studio settings for this app.

Setting Up Dialogflow

Head over to Dialogflow’s dashboard to set up your new chatbot! Create a free account (or sign in if you already have an account) and open your Dialogflow dashboard. If yours is a new account, you will need to connect Dialogflow to a Google Cloud project. It is a relatively simple process; you just need to follow the on-screen instructions.

Once Dialogflow is connected to Google Cloud, the next step will be creating an «intent» and a «Small Talk agent». You’ll need to start by creating an agent, by clicking the CREATE button at the top right (once the agent has been successfully created, you’ll be prompted to create your intent, which will be where you can begin setting up how your bot will respond to your users):

Next, navigate to Small Talk in the left side panel to begin setting up your Small Talk agent. The «Small Talk agent» is what is responsible for processing the user’s text and finding an appropriate response:

Building the Backend Server

Our server will accomplish a few tasks:

• Generate authentication token for users
• Connect the app to Dialogflow and send messages to the chat channel

Navigate to the server directory we created earlier ( cd server ), to:

• Start a new project
• Install a few packages
• Build the actual app(!)

You can use the following commands to start a new project and install the required packages:

The next step is to create an index.js file, which will contain the logic of our entire server:

Now, we’ll copy and paste the following code into the newly created index.js file:

In the above code, we create two endpoints, using app.post :

• /dialogflow : used to connect the application with Dialogflow, get the result, and send it in to the chat channel, so that the Android app user gets updated in real-time
• /auth : used to create the user’s token, which will be used to identify and authenticate the user

Finally, create a .env file in the server directory, using the following command:

Once the above command succeeds, you will need to fill it with the appropriate values:

Please update these values with the correct ones retrieved from the GetStream dashboard and Google Cloud. The Google Cloud project ID should be the same one you enabled the Dialogflow API on previously.

The backend server can be started now, by running:

Building the Android App

The first step is to define our dependencies in the Gradle build file; copy and paste the following code into your build.gradle file:

The next step is to populate the application level build.gradle file (at app/build.gradle )0 with the following:

Since these edits are done in Android studio, a Sync now button should pop up; click it when it appears.

MainActivity.java File

Once these dependencies have been installed, we’ll focus on building the actual application. We’ll start with MainActivity.java , as it is the entry point of the app:

While the above code is complete, you will notice the MainActivity contains a few place holders. You will need to send a request to the backend server using the /auth endpoint to get these values. You can use any HTTP request tool, but we chose to use a cURL request:

The above command returns a response that contains the username and a JSON Web Token (JWT). The values to be replaced are as follows:

• your_API_KEY with the API Key from Stream dashboard
• with the username
• with your full name
• your_AUTH_TOKEN_FROM_BACKEND_SERVER with the JWT

To complete our work with the MainActivity.java functionality, we’ll update the associated layout file at res/layout/activity_main.xml :

ChannelActivity.java

Next, you will need to create a new _Empty Activity_ called ChannelActivity . Once that is created, populate your ChannelActivity.java file with the following code:

Then, fill out your layout/activity_channel.xml file, like so:

DialogInputView.java

You will notice that in activity_channel.xml , we make use of a class called com.example.dialogflowapplication.DialogInputView . DialogInputView.java is non-existent, so it will need to be created. This doesn’t need to be an activity; a plain Java class will suffice. After creating this file, add the following:

In the above code, we implement the MessageSendListener . This interface allows us to create callbacks for messages — successful or not. In the above code, we also define the onSendMessageSuccess method, which is responsible for handling the callback whenever the user successfully sends a message.

Notice the generic request URL in the onSendMessageSuccess method: https://subdomain.ngrok.io/dialogflow . You’ll need to replace this URL with your ngrok URL, which you can find by running the following command:

Now, our application is complete, and you can click the Play button to run the app on a simulator:

Wrapping Up

In this tutorial, I have described how to build a chatbot with Dialogflow and Stream Chat’s Android components. I have also shown how to implement callbacks for handling whether or not messages are successful. We would love to see how you implement these strategies in your app; please feel free to show off your creations to us!

Источник