Создайте чат-приложение React с помощью Sendbird UIKit
Эрик Ким
Инженер по решениям | Sentbird
Возможно, вам будет полезно ознакомиться с примером кода React Chat UIKit. Если вам нужны дополнительные рекомендации, см. документацию или демонстрацию чата в приложении. Подробнее об UIKit читайте на этой странице.
На нашем портале для разработчиков есть множество руководств, примеров кода, демонстраций и других ресурсов, которые могут помочь вам в вашем путешествии по программированию. Обязательно посмотрите!
Введение
В этом руководстве по началу работы используется Sendbird UIKit, набор готовых компонентов пользовательского интерфейса, которые можно использовать для создания современного интерфейса обмена сообщениями в вашем приложении менее чем за 10 минут. Вы также можете использовать Sendbird Chat SDK со своим собственным пользовательским интерфейсом.
Чтобы отправить первое сообщение, вам необходимо:
- Создайте учетную запись Sendbird и добавьте пользователей чата в среду Sendbird.
- Импортируйте зависимости 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.
Мы болеем за вас, когда вы строите что-то великое.
Удачного создания чата! 💻