Создайте чат-приложение React с помощью Sendbird UIKit

Эрик Ким
Инженер по решениям | Sentbird

Возможно, вам будет полезно ознакомиться с примером кода React Chat UIKit. Если вам нужны дополнительные рекомендации, см. документацию или демонстрацию чата в приложении. Подробнее об UIKit читайте на этой странице.

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

Введение

В этом руководстве по началу работы используется Sendbird UIKit, набор готовых компонентов пользовательского интерфейса, которые можно использовать для создания современного интерфейса обмена сообщениями в вашем приложении менее чем за 10 минут. Вы также можете использовать Sendbird Chat SDK со своим собственным пользовательским интерфейсом.

Чтобы отправить первое сообщение, вам необходимо:

  1. Создайте учетную запись Sendbird и добавьте пользователей чата в среду Sendbird.
  2. Импортируйте зависимости Sendbird UIKit и интегрируйте компонент Sendbird UIKit в свое приложение.

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

  • Создайте учетную запись Sendbird
  • Создание пользователей в панели управления Sendbird
  • Добавьте зависимости UIKit
  • Подключите UIKit к вашему приложению
  • Протестируйте интеграцию

Давайте начнем!

Шаг 1. Создание учетной записи Sendbird

1.1 Зарегистрируйте бесплатную учетную запись Sendbird.

1.2. Создайте учетную запись, используя свой адрес электронной почты, или нажмите Продолжить с Google.

1.3. Настройте свою организацию, заполнив поля Название организации и Номер телефона.

1.4. Создайте приложение Sendbird, выбрав Тип продукта и введя Название приложения, Регион.

1.5. Вы будете перенаправлены на главную страницу панели управления Sendbird, чтобы приступить к внедрению SDK и API Sendbird Chat в свой продукт.

1.6. Скопируйте свой уникальный applicationID из раздела Application и вставьте его в буфер обмена.

Шаг 2. Создание пользователей в личном кабинете Sendbird

2.1. Перейдите в раздел «Пользователи» в левой части панели инструментов.

2.2. Нажмите значок Создать пользователя + в правом верхнем углу.

2.3. Создайте нового пользователя, заполнив следующие поля:

  • ID
  • Псевдоним
  • URL-адрес профиля — необязательно
  • Выдать токен доступа — необязательно

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

Шаг 3. Добавление зависимостей Sendbird UIKit

Мы будем использовать онлайн-интегрированную среду разработки (IDE) под названием codesandbox.io, чтобы имитировать вашу среду разработки, но вы можете начать добавлять зависимости Sendbird UIKit напрямую в свое приложение.

3.1. Настройте среду.

3.1.1. Вы можете перейти на codesandbox.io › нажать Создать песочницу › выбрать React.

OR

Если вы создаете чат в своем приложении, запустите следующий код, чтобы установить sendbird-uikit.

npm install sendbird-uikit --save

3.1.2. Вам будут представлены 3 файла по умолчанию: App.js, index.css и style.css.

App.js

Index.js

Стиль.css

3.2. Импортируйте зависимость sendbird-uikit.

3.2.1. Нажмите Добавить зависимость.

3.3.2. Найдите sendbird-uikit.

Зависимости Sendbird UIKit подключены

3.3. Импортируйте компонент sendbird-uikit.

3.3.1. В App.js добавьте следующий код:

import { App as SendbirdApp } from 'sendbird-uikit'
import "sendbird-uikit/dist/index.css";

Шаг 4. Подключите Sendbird UIKit к вашему приложению и создайте пользователя

4.1. Добавьте следующий код в файл App.js.

Это создаст переменные для applicationID и userID, которые будут переданы компоненту sendbird-uikit.

  • Передайте applicationID приложения Sendbird, которое вы создали ранее, на панели инструментов, чтобы инициализировать SDK Sendbird Chat.
  • Примечание. Ваш идентификатор приложения будет выглядеть следующим образом: 45612F31–4304–4FC4–9FD9-C35B5FCDCE30.

const APP_ID = "Your APP ID"
const USER_ID = "Any User ID"

4.2. Заполните список каналов и вид канала.

  • Добавьте следующий код в App.js.
  • Для оформления добавьте следующий код в style.css.

height: 100vh;

Шаг 5. Проверьте свою интеграцию

  • Если вы работаете в среде codesandbox.io, ваш код должен компилироваться и запускаться автоматически.
  • Если вы работаете в своем локальном приложении, вам нужно будет запустить команду npm.

npm start run

5.1. Создайте канал.

Теперь вы можете создать канал для общения пользователей в вашем приложении.

  • Нажмите кнопку «+» в левой части экрана, чтобы создать групповой канал.
  • Приглашайте пользователей на канал.

5.2. Отправьте свое первое сообщение.

Попробуйте набрать сообщение и нажмите отправить. Вы должны быть в состоянии успешно отправить свое первое сообщение во вновь созданном чате в вашем приложении.

Поздравляем!

Вы готовы отправлять и получать сообщения в своем приложении с помощью Sendbird UIKit.

Для получения дополнительной информации о UIKit, JavaScript SDK и функциях ознакомьтесь с нашей документацией.

Вот как легко запустить чат в вашем приложении. Если вы также создаете для мобильных устройств, отправьте свое первое сообщение с помощью Sendbird UIKit для Android и iOS.

Мы болеем за вас, когда вы строите что-то великое.

Удачного создания чата! 💻