Научитесь создавать собственное настольное приложение для чата с помощью React и Electron, шаг за шагом

Это руководство было написано в сотрудничестве с замечательным Кристианом Нвамба.

Когда вы учитесь программировать, в вашем распоряжении множество ресурсов - книги, скринкасты, учебные пособия и даже упражнения. Но чтобы стать отличным разработчиком, вам нужно практиковать то, чему вы научились, в проекте.

Мотивация для этой статьи - обучение на практике. Вы начнете с нуля и шаг за шагом создадите полноценное приложение для чата.

Вы будете строить проект поэтапно, и, чтобы проверить, понимаете ли вы его, в конце мы добавили несколько специальных бонусных заданий. Готовы к тесту?

Вот что мы построим:

Довольно круто, правда 😏?

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

Звучит неплохо? Настройтесь на FreeCodeCamp radio и слушайте плавную, нежную фоновую музыку, чтобы не терять концентрацию, и вперед!

Что тебе нужно знать

Собственно еще кое-что 👀:

Было бы неплохо, если бы вы уже знали базовый JavaScript, Node и React. При этом, если вы не чувствуете себя комфортно с этими технологиями, все равно попробуйте!

Мы намеренно структурировали это руководство, чтобы было ясно, куда вставлять код, чтобы вы могли следить за ним. Если у вас есть вопросы, задавайте их здесь!

Хорошо, шаг первый:

Настроить Электрон

Для создания кроссплатформенного настольного приложения с использованием веб-технологий мы будем использовать Электрон.

Чтобы начать работу, мы сделали минимальный стартовый шаблон. Загрузить:

git clone https://github.com/pusher/electron-desktop-starter-template electron-desktop-chat
cd electron-desktop-chat

И установите эти локальные зависимости:

npm install

Создать учетную запись Chatkit

В этом руководстве нас не слишком заботит создание серверной части, поэтому мы будем использовать Chatkit.

Чтобы продолжить, создайте бесплатную учетную запись и новый экземпляр под названием Электронный чат на рабочем столе:

В окне настроек включите провайдер тестовых токенов:

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

Настройте сервер Node

Chatkit имеет два основных понятия: Пользователи и комнаты.

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

Это должно происходить на сервере.

В электронно-настольном чате запустите:

npm install --save express cors body-parser pusher-chatkit-server

И вставьте это в новый файл с именем server.js:

Не забудьте заменить instanceLocator и key своими собственными Instance Locator и Key.

Большая часть этого кода является шаблоном, импортирующим зависимости, настройкой Express и т. Д.

Важной частью является маршрут «/ users», который обрабатывает запросы на создание нового пользователя.

Запустите сервер с node server.js, и вы увидите, что сервер «работает на порту 3001».

Создайте форму имени пользователя

Когда кто-то загружает наше приложение, мы хотим попросить у них имя пользователя, а затем отправить его «/ users».

Установите несколько нативных компонентов пользовательского интерфейса с помощью:

npm install --save react-desktop

И создайте компонент формы под названием UsernameForm:

Подробнее о компонентах формы React вы можете прочитать здесь. Случайно в документации используется класс NameForm, похожий на наш, так что все должно быть вам знакомо!

Затем замените все приложение на:

И чтобы проверить это, запустите npm run dev. Вы увидите, что форма имени пользователя отображается:

Убедитесь, что сервер запущен (помните, что это команда `node server.js), нажмите Отправить, и вы увидите, что пользователь создан:

Переходные экраны без библиотеки

Когда у нас есть пользователь, мы можем перевести его из формы имени пользователя в фактический экран чата. Мы должны определить это сейчас.

Создайте новый компонент под названием Chat:

И обновите приложение:

Запустите приложение, введите имя пользователя, и вы перейдете к экрану чата:

Добавить чат в реальном времени с Chatkit

Вещи действительно идут, не так ли?

Для подключения к Chatkit из клиента необходимо установить @ pusher / chatkit:

npm install --save add @pusher/chatkit

И замените весь чат на:

Не забудьте заменить значения tokenProviderUrl и instanceLocator на конечную точку поставщика тестовых токенов и указатель экземпляра.

Запустите приложение, нажмите ⌘ + ⌥ + I (Control + Shift + I), и вы увидите, что вы подключились к Chatkit.

Создать чаткит-комнату

У нас есть пользователь, но теперь нам нужна комната!

Чтобы создать его, используйте инспектор Chatkit:

Не забудьте скопировать идентификатор своей комнаты, он понадобится нам на следующем шаге.

Создайте компонент чат-комнаты

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

Чтобы отобразить их, создайте компонент MessageList:

И обновите чат:

Как всегда, не забудьте обновить roomId, указав фактический идентификатор комнаты.

Теперь, когда сообщения будут отправлены в нашу комнату, будет вызываться onNewMessage. Отсюда мы можем обновить наше состояние и, в свою очередь, наш пользовательский интерфейс.

Через секунду мы позволим пользователям отправлять свои собственные сообщения. А пока для тестирования подписки воспользуйтесь инспектором:

Отправка сообщений

Чтобы пользователи могли отправлять собственные сообщения, создайте компонент SendMessageForm:

И обновите чат:

Перезагрузите приложение с помощью ⌘ + R (Control + Shift + R), и вы сможете отправлять сообщения:

На самом деле, почему бы не открыть два приложения бок о бок и не поговорить с самим собой?

Какое время быть живым ...

Стиль пользовательского интерфейса

Благодаря React Desktop наше приложение уже выглядит прилично, но мы можем улучшить его.

Давайте внесем несколько изменений и определим наш макет для использования на следующем и последнем шаге.

Замените весь index.css на:

Покажи, кто в сети

Чтобы завершить работу над нашим приложением чата, мы добавим список «кто в сети», чтобы показать, как вы догадались, кто в сети!

Создайте компонент OnlineList:

Затем обновите чат:

Вы ожидали, что это будет сложнее? Я точно так и сделал с первого раза!

Поскольку Chatkit динамически обновляет свойство users, нам не нужно управлять каким-либо собственным состоянием. Нам просто нужно сказать React, что нужно выполнить повторный рендеринг и, в свою очередь, повторно оценивать users каждый раз, когда кто-то подключается к сети (onUserCameOnline), переходит в автономный режим (onUserWentOffline) или присоединяется к комнате (onUserJoined).

Идите вперед, запустите сервер и клиент и полюбуйтесь своим великолепным новым приложением для чата:

Если вы зашли так далеко, можете продолжать! Попробуйте выполнить эти бонусные испытания…

Задача 1. Покажите, кто в комнате активно печатает.

Посмотрите, сможете ли вы добавить в приложение индикаторы набора текста. Например, если я печатаю, вы и все остальные в комнате увидите «Букер печатает…».

Если бы мы с Крисом оба печатали, вы бы увидели: «Букер и Крис печатают…» и так далее.

Подсказки:

Задача 2: разрешить пользователю создать свою собственную комнату

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

В большинстве приложений вам нужно динамически создавать комнаты с помощью функции createRoom.

Когда кто-то загружает приложение, попросите у них также название комнаты:

Если комната существует, присоединяйтесь к ней; если нет, создайте его, а затем присоединитесь к нему.