Это не ваш типичный учебник типа вставьте это здесь и вставьте это здесь (многие из них можно найти здесь, на сайте cometchat.com/tutorials) . Хотя эти уроки, безусловно, заслуживают внимания, я собираюсь поделиться своими мыслями от начала до конца.

Созданное мной приложение достаточно простое. Когда кто-то загружает приложение, ему предлагается ввести свое имя пользователя и начать чат:

В конечном итоге приложение запускается на Node с помощью NW.js (ранее известного как node-webkit). NW.js выгоден тем, что позволяет нам кодировать кроссплатформенные настольные приложения с использованием наших любимых веб-технологий. Для этого приложения я выбрал React и Redux.

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

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

Просто хотите пример кода?

Вы можете увидеть исходный код здесь. Также имеется подробный README, где вы найдете всю информацию, необходимую для установки, запуска и тестирования приложения.

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

Планирование

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

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

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

Вопросы:

  • Что я делаю? 😆
  • Какое приложение я собираюсь создать?
  • Какие наиболее распространенные компоненты должны быть в таком приложении?
  • Как компоненты приложения взаимодействуют друг с другом?
  • К какому уровню завершения я стремлюсь - (демонстрационные приложения не должны быть полнофункциональными)?

Ответы (в порядке следования вопросов):

  • Это самый игнорируемый вопрос, о котором многие люди забывают задумываться. Когда человек может отойти первым и дать четкий ответ на этот вопрос, его путь для будущего развития станет определенным. В моем конкретном случае ответ, который я получил, звучит примерно так: «Я думаю о создании приложения для чата. Это приложение должно служить демонстрационным учебным приложением. Он должен будет обеспечивать базовую функциональность для «общения в чате» с использованием CometChat API. Он должен работать на рабочем столе ». Стиль и конкретные детали о том, что идет и где нужно, появятся позже в процессе.
  • Приложение чата, которое будет работать на рабочем столе и служить демонстрацией этого руководства.
  • Чтобы дать правильный ответ на этот вопрос, незнакомому человеку нужно сначала провести небольшое исследование. Взгляните на реальные чат-приложения. Запишите, какие функции у них есть. Как они их устанавливают, как они взаимодействуют между собой и с пользователями приложения. В моем случае у меня был некоторый предыдущий опыт и я более или менее получил представление о том, что мне нужно.
  • Взаимодействие между компонентами будет довольно простым. Пользователь должен иметь возможность использовать основной компонент, который представляет собой ввод текста и кнопку для отправки сообщений. И компонент боковой панели, чтобы увидеть других участников чата.
  • Демонстрационное приложение должно обеспечивать базовые функции чата - отправлять и получать сообщения в реальном времени. И иметь возможность запускать на рабочем столе (без браузера).

Функции

Я решил реализовать в демонстрационном приложении следующие функции:

  • Отправить с помощью клавиши Enter
  • Боковая панель с именами и временем последней активности
  • Экран приветствия с вводом и проверкой с сообщениями об ошибках
  • Область чата с автопрокруткой вниз
  • Сообщение в чате и время отправки.

Фронтенд - Реагировать

Мы собираемся использовать React для создания нашего пользовательского интерфейса. Ниже я собираюсь перечислить созданные мной компоненты и дать краткое описание каждого из них:

  • ChatPane - это основной контейнероподобный компонент, который содержит компоненты Участники и Беседа и передает данные, необходимые для визуализации.
  • Разговор - это компонент, отвечающий за набор и отправку сообщений чата.
  • Нижний колонтитул - отображает простое сообщение нижнего колонтитула, содержащее название и версию приложения, как определено в файле package.json.
  • Заголовок - компонент заголовка, удерживающий строку меню приложения.
  • MenuAppBar - компонент строки меню приложения, имитирующий, как бы выглядела настоящая строка меню. Гамбургер-меню слева и раскрывающееся меню профиля справа являются поддельными - кликабельны, но не работают.
  • Сообщения - компонент-контейнер, содержащий само сообщение - он имеет имя отправителя, содержание сообщения и время отправки.
  • Участники - в этом компоненте отображается имя участника чата и время, когда он присоединился.
  • Добро пожаловать - этот компонент отвечает за отображение страницы входа в систему - начальной точки нашего приложения, где у нас есть логика, связанная с проверкой определенных разрешенных имен пользователей и сохранением их в локальном хранилище для дальнейшего использования. Я также реализовал базовую логику обработки ошибок, которая показывает ошибку, когда выбранное имя пользователя неверно, в соответствии с зарегистрированными именами пользователей CometChat API (в данном конкретном случае для нашей демонстрации) - superhero1, superhero2 и так далее до 5.

Вот визуальное представление компонентов приложения:

Государственное управление - Redux

В наши дни каждое современное приложение имеет состояние. Поместите в память, где приложение хранит определенные данные для последующего использования. Для управления состоянием нашего приложения мы используем Redux. Конечно, для такого простого приложения мы могли бы вообще обойтись без Redux. Но с точки зрения обучения (в конце концов, мы все делаем это для изучения нового, верно?), я думаю, было бы неплохо увидеть весь цикл отправки запроса в API, прохождение промежуточного программного обеспечения (redux-thunks) и получение ответа, записанного в состояние. И мы будем управлять этим состоянием с помощью Redux.

Как это работает

Основные строительные блоки в приложении Redux называются редукторами - небольшими функциями, используемыми для управления состоянием. Проще говоря, они принимают старый объект состояния в качестве ввода и, в зависимости от определенных действий (которые также передаются в том же вводе), возвращают новый объект состояния. Новое состояние могло быть изменено полностью или частично.

В нашем приложении есть три простых редуктора, которые отвечают за те части состояния, которые отвечают за список пользователей, процесс входа в систему и отправку / получение сообщений. Все они находятся в папке / src / redurs вместе с файлом, содержащим начальное состояние нашего приложения.

Redux, как библиотека управления состоянием, может использоваться с любой другой структурой пользовательского интерфейса, практически каждое приложение, которому необходимо иметь состояние, может извлечь выгоду из использования Redux. Если вы хотите углубиться, начните с их веб-сайта и следуйте инструкциям.

Обработка побочных эффектов - Redux Thunks

Один из самых известных подходов к управлению побочными эффектами в приложении redux называется redux-think. Это то, что мы тоже используем в нашем приложении. Если вы хотите узнать больше о преобразователях redux и о том, как их использовать, я рекомендую их веб-сайт в качестве отправной точки, а затем создайте небольшое приложение, подобное этому, например :).

В нашем проекте в папку / src / actions я помещаю преобразователи, используемые в демонстрационном приложении. А в каталоге / store находятся конфигурации для redux store.

Сделайте его настольным - NW.js

О той части нашего приложения, которая позволяет нашему приложению работать на рабочем столе, заботится библиотека под названием NW.js. Помните, что мы создаем настольное приложение. Именно десктопная часть будет реализована через NW.js. Подобно Electron, другой библиотеке для создания настольных приложений, NW.js предоставляет разработчикам возможность использовать свои веб-навыки для создания приложений, которые могут работать на настольном компьютере. Это означает, что вы по-прежнему можете использовать свои навыки JavaScript / React при создании приложения, а затем использовать всю мощь настольной операционной системы через API-интерфейсы Nw.js. Другими словами, Nw.js дает вам возможность создать скелетное приложение, которое можно заполнить вашим пользовательским интерфейсом, независимо от того, какую библиотеку вы использовали для его создания. И самое лучшее, что такое приложение имеет доступ к API-интерфейсам Node.js / NW.js и DOM в том же контексте JavaScript.

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

Nw.js против Electron

  • Ввод заявки

- В NW.js основной точкой входа приложения является веб-страница или JS-скрипт. Вы указываете файл HTML или js в package.json, и он открывается в окне браузера как главное окно приложения (в случае точки входа HTML) или выполняется сценарий.

- В Electron точкой входа является сценарий JavaScript.

  • Система сборки

- Nw.js использует Chromium

- Electron использует libchromiumcontent для доступа к Content API Chromium. libchromiumcontent - это единая разделяемая библиотека, которая включает модуль Chromium Content и все его зависимости.

  • Интеграция узлов

- В NW.js для интеграции узла на веб-страницы требуется исправление Chromium для работы.

- В Electron используется другой способ интеграции цикла libuv с циклом сообщений каждой платформы, чтобы избежать взлома Chromium.

  • Мульти-контекст

- Из-за того, как был реализован NW.js, были изобретены концепции контекста узла и веб-контекста.

- Используя мульти-контекстную функцию Node, Electron не вводит новый контекст JavaScript на веб-страницы.

Чат - CometChat

CometChat API довольно прост в использовании. Это RESTFull API, на котором построен еще один уровень абстракции - CometChat SDK. Это позволяет нам вызывать напрямую открытые методы для различных действий, которые мы можем захотеть выполнить, например, для отправки. Вот пример такого метода:

return CometChat.sendMessage(textMessage).then(    
  message => {      
    console.log("Message sent successfully:", message);      
    return message;
  }, 
  error => {      
    console.log("Message sending failed with error:", error);    
  }
);

Вы можете увидеть всю логику Chat API в папке / src / chat-api. Там вы также увидите созданные мной макеты, которые позволяют нам тестировать наше приложение без реального подключения к API.

Улучшения

Каждый проект заслуживает некоторых размышлений после завершения первого этапа. Одна часть этого мыслительного процесса будет посвящена тому, как все прошло, что было хорошо и что плохо и что можно было бы сделать лучше. И одна часть будет посвящена размышлениям о возможных улучшениях. Вот несколько идей для нашего случая. Если кто-то пойдет в этом направлении и реализует что-либо из этого по-настоящему, пожалуйста, не забудьте сообщить мне :)

  • Ожидание анимации при загрузке истории чата и списка пользователей
  • Возможность пропустить экран входа в систему, если он уже зарегистрирован
  • Возможность рассылки приглашений новым пользователям
  • Возможность просмотра статуса сообщения - отправлено, получено, прочитано
  • Поддержка Emojis
  • Встроенные ссылки / изображения / поддержка видео, так что пользователь может видеть их интерпретируемые - воспроизведение видео, визуализированное изображение или веб-страницу, на которую указывает ссылка. Я добавил это как проблемы в моем GitHub на случай, если кто-то захочет взглянуть.

Развернуть на Netlify

Чтобы развернуть свое приложение на платформе Netlify, вам необходимо сначала создать учетную запись. Зайдите на их сайт и создайте новую учетную запись. После этого войдите в систему. Пока вы все еще находитесь в разделе Сайты, вы должны увидеть кнопку для развертывания нового сайта из Git.

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

Теперь последний шаг перед развертыванием вашего приложения - убедиться, что у вас есть правильные команды сборки и переменные среды. Для этого после создания сайта для развертывания перейдите на экран настроек Сборка и развертывание и введите следующее (не забудьте использовать URL-адрес репозитория):

В разделе Среда вам нужно ввести переменные среды, как определено в вашем файле .env. Вот как это выглядит у меня:

Примечание. Я удалил значения, так как это должна быть личная информация, и вам не следует делиться своими.

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

Вывод

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

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

🔥 Спасибо за чтение! 🔥

Примечания:

  • Чтобы использовать Nw.js DevTools, вам необходимо установить сборку SDK - https://nwjs.io/downloads/ - версии 0.38.2 или выше.

Ресурсы: