Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Создание приложения для совместного использования при помощи PubNub, React.js и ES6

by
Difficulty:IntermediateLength:LongLanguages:

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

В моих предыдущих руководствах я показала, как создавать прототип устройств, соответствующих концепции IoT (* Internet of Things – Интернет вещей; концепция вычислительной сети физических предметов («вещей»), оснащённых встроенными технологиями для взаимодействия друг с другом или с внешней средой. Здесь и далее прим. пер.), а также провела визуализацию данных, полученных от датчиков оборудования, при помощи Сети потока данных (* DSN – Data Stream Network) PubNub (* быстро работающая система обмена сообщениями между любыми устройствами и платформами).  В данном руководстве я собираюсь показать, как использовать PubNub для создания веб-приложения для совместного использования, работающего в режиме реального времени, при помощи React.js, который позволяет вам очень эффективно манипулировать DOM (*  Объектная модель документа), и следующего поколения JavaScript, ES6 (* спецификация ECMAScript 6).

PubNub Reactjs Stickie Web App

Онлайн демоверсия: Стикеры для заметок совместного пользования

Я создала две версии одного и того же приложения Stickie Note (* для создания стикеров для заметок): в первой, которая располагается на CodePen, используются версии React (* React.js; библиотека  JavaScript для создания пользовательских интерфейсов) с CDN (* content delivery network – сеть доставки (распространения) контента), а вторая располагается на GitHub, и в ней для подключения React используется диспетчер пакетов.  В данном руководстве я использую «легкий» вариант последней версии.  Мы пройдемся по процессу создания приложения, используя все фишки: npm, webpack, Babel (* компилятор для JavaScript, а точнее транcпилятор) для JSX (* расширение синтаксиса для JavaScript) и  ES6!

Предварительная подготовка

Для этого руководства вам будут необходимы:

  • базовое понимание React
  • практические знания менеджера пакетов npm (* диспетчер пакетов Node) для загрузки, установки и управления зависимостями
  • практические знания сборщика пакетов webpack (* сборщик пакетов для JavaScript с открытым исходным кодом), за счет которого осуществляется укомплектование ресурсов JavaScript и других ресурсов для браузера (он работает подобно grunt или gulp)
  • установленные на вашем компьютере Node и npm

В данном руководстве не даются начальные знания по React. . Однако, вы можете узнать о React больше из других замечательных руководств на Envato Tuts+

Что мы собираемся создавать

Сейчас мы собираемся создать простое веб-приложение при помощи PubNub.  PubNub – это сеть потока данных (DSN – Data Stream Network), которая предоставляет глобальную инфраструктуру (* основополагающая совокупность компонентов, объединенная в систему), с помощью которой можно довольно просто создавать и масштабировать приложения, работающие в режиме реального времени, и устройства IoT. В этом руководстве мы создадим «стикеры для заметок» совместного использования.  Вот как выглядит последовательность взаимодействия пользователя с приложением:

  1.  Пользователь входит в приложение.
  2. Как только пользователь вводит имя, приложение получает последние 50 заметок, если они есть.
  3. Пользователь набирает сообщение на стикере и нажимает клавишу ввода для отправки.
  4. Новая заметка появляется вместе с остальными на странице вашего браузера, а также на страницах остальных браузеров всех пользователей, которые находятся в тот момент онлайн.

Теперь давайте приступим!

Установка пакетов

В папке вашего приложения віполните npm init для настройки вашего файла package.json и затем установите эти модули.

Установите сборщик пакетов webpack, который компилирует, объединяет, проводит минификацию и сжатие статических ресурсов для клиентской части приложения:

$ npm install webpack --save-dev

Установите webpack-dev-server для запуска локального сервера:
$ npm install webpack-dev-server --save-dev

Установите React, React DOM и расширения CSS для реализации анимации: 
$ npm install react react-dom react-addons-css-transition-group --save

Установите Babel для использования JSX и ES6.  Мы собираемся писать код ES6 (ES 2015) при помощи Babel:
$ sudo npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save

Установите PubNub для обеспечения коммуникации в режиме реального времени: 
$ npm install pubnub --save

Настраиваем структуру приложения и веб-сервер

Сделайте структуру приложения подобной следующей:

И настройте webpack.config.js:

Взгляните на весь конфигурационный файл в репозитории GitHub.

Собственно, мы определяем точку входа приложения (файл высшего уровня) и расположение для файла выходных данных, где все ваши файлы js (и .jsx)  будут объединены в один после выполнения команды webpack.  Также при помощи задания watch: true вы гарантируете, что webpack будет отслеживать изменения ваших файлов и воссоздаст результирующий файл автоматически.

Создание файла index.html

Подключите скрипт bundle.js в ваш файл index.html:

Также обратите внимание на элемент с id=”container” в теле.  Именно тут будет располагаться ваше приложение React.

Запуск Webpack Dev Server

Вы можете запустить ваш сервер для разработки при помощи команды:
$ ./node_modules/.bin/webpack-dev-server

Или вы можете настроить его запуск в вашем package.json при помощи строки: 

таким образом, что вы сможете запустить сервер при помощи команды npm start 

Перейдите в вашем браузере на страницу http://localhost:8080/webpack-dev-server/, и вы должны будете там увидеть ваше запущенное приложение (пока что только пустая страница HTML).

Создание компонентов React при помощи ES6

Откройте новый файл app.jsx в папке app, который вы указали в качестве точки входа приложения в вашем webpack.config.js.  Как вы могли заметить по расширению имени файла, мы собираемся использовать JSX.

Для начала импортируйте модули и файлы, необходимые для app.jsx: 

Оператор import, появившийся в ES6, используется для импорта функций, объектов или примитивов, которые были экспортированы из внешнего модуля или скрипта.

Далее определяем класс CollabStickies, который расширяет класс React.Component при помощи объявления класса по ES6.  Это – эквивалент для React.createClass по ES5:

В конструкторе вы устанавливаете начальное состояние этих изменчивых данных – массива stickieList.  Мы будем обновлять массив каждый раз при получении новой заметки при помощи this.setState().

В функции render используем JSX для определения шаблонообразных элементов виртуального DOM.  В нашем случае подключаются компоненты StickieWritable и StickieList. . Вы можете передавать изменчивые props (* реквизиты) и  states (* состояния) компонентам для использования.  Мы определим их позже.

При создании приложения Babel проведет транспиляцию всего кода на ES6 и кода на JSX в ES5, который браузеры хорошо могут выполнить.

Рендеринг узла DOM вместе с привязанными данными

При помощи ReactDOM.render(),  который поставляется вместе с пакетом react-dom, выполните воспроизведение компонента CollabStickies в узле DOM в вашем HTML

Здесь вы заметили props username и color.  Эти данные используются для компонента CollabStickies и передаются его дочерним компонентам.

Значения должны быть получены после входа пользователя; однако, для упрощения приложения для нашего примера давайте использовать просто window.prompt() для получения username и затем зададим случайный цвет заметок, когда приложение загружено. 

The localhost Server asking for your name

Хотя я использую встроенное в браузер окно подсказки, в действительности я рекомендую создать другой компонент UI для реализации возможности входа или использовать сторонние компоненты окна диалога.  Есть множество готовых компонентов, например: Elemental UI’s Modal и Material UI’s Dialog.

Использование PubNub для реализации возможности сотрудничества

Теперь мы собираемся использовать PubNub для реализации возможности совместного использования.

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

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

How PubNub Works

Для использования PubNub в вашем приложении убедитесь, что модуль pubnub установлен и импортирован в верхней части вашего приложения.

Инициализация PubNub

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

Здесь вы присваиваете username, полученный после процесса «входа» как uuid (уникальный идентификатор). (В нашем примере мы используем в качестве uuid любую строку, введенную пользователем, но в реальности вам необходима будет профессиональная система для «входа», чтобы каждый uuid был в действительности уникальным, без повторов!)

Также заметьте, что я использую объявление констант в стиле ES6 при помощи const вместо var для этих глобальных значений констант. В ES6 const действует как переменная только для чтения и представляет собой постоянную ссылку на значение. Далее вы увидите также недавно представленную let – локальную переменную с блочной областью видимости.

Подписка на сообщения

Для создания приложения для обмена заметками мы собираемся использовать метод publish() PubNub для отправки ваших сообщений кому угодно, тогда как subscribe() позволяет другим пользователям получать все заметки. Метод subscribe() вызывается автоматически каждый раз, когда кто-либо публикует новую заметку.

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

Метод subscribe работает асинхронно, и когда каждая операция успешно завершена, происходит вызов функции обратного вызова message. В ней давайте обновим список заметок, задав состояние массива stickieList, которое было определено в конструкторе в начале.

В React при изменении ваших данных при помощи setState автоматически происходит обновление представления.

Мы создадим предоставление (компонент UI ) позже.

В функциях обратного вызова вы, вероятно, заметили выглядящий довольно смешно синтаксис со стрелками – =>. Это стрелочные функции, синтаксис которых короче, чем выражения для функций ES5. Также это выражение лексически связывает значение this. Снова-таки, при помощи Babel мы можем использовать все возможности ES6!

Также мы используем необязательную функцию обратного вызова connect для метода subscribe для получения “history” (* истории). Благодаря ей будут получены предыдущие данные, когда соединение с PubNub устанавливается в первый раз.

history() – это часть предоставляемой PubNub возможности Storage and Playback (* хранилище и воспроизведение), и в нашем случае происходит получение последних 50 сообщений из PubNub. В функции обратного вызова success обновите представление, задав состояние массива stickieList тут тоже.

Публикация сообщений

Давайте создадим класс StickieWritable. Это – компонент стикеров для заметок, в который вводятся пользовательские данные.

Его рендеринг происходит следующим образом:

В текстовом поле прослушиваем событие onKeyUp и каждый раз при его возникновении вызываем функцию handleTextChange для проверки, была ли нажата клавиша return/enter (* клавиша возврата каретки/клавиша ввода). Обратите внимание, что я привязываю this при вызове функции. В отличие от React.createClass(), который является методом React стандарта ES5 для создания класса, класс по ES6 не добавляет автоматически методы в образец объекта, так что вам необходимо привязать их самостоятельно. (Существует несколько разных способов осуществить одно и то же)

В функции handleTextChange опубликуйте текст и данные пользователя в PubNub:

Теперь при наборе пользователем какого-либо текста на стикере и нажатии return сообщение будет отослано в PubNub, и все остальные пользователи получат сообщение одновременно (в течение ¼ секунды!).

Создание компонентов UI

UI приложения состоит из нескольких компонентов UI, которые выглядят следующим образом:

PubNub Stickie Components in React App

1. CollabStickies (* стикеры для совместного пользования)
2. StickieWritable (* стикер для создания новой заметки)
3. Stickie (* стикер)
4. StickieList (* список стикеров)

C компонентами 1 и 2 мы уже позаботились, так что давайте создадим 3-й компонент – индивидуальный стикер.

Создайте новый файл stickie.jsx для рендеринга UI при помощи JSX. В отличие от компонента StickieWritable, это – компонент UI только для чтения без функциональности UX (* опыт взаимодействия). У него имеется только функция render() для прорисовки стикера вместе с текстом, используя данные prop.

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

Далее мы будем создавать другой компонент UI – stickieList.jsx, который является контейнером для 3-го компонента и содержит группу стикеров.

Анимирование компонентов

Импортируйте Stickie.jsx и все зависимости в StickieList.jsx. Тут я использую дополнение ReactCSSTransitionGroup и пользовательский шрифт для веб.

Вы можете установить загрузчик шрифта для Веб при помощи npm:
$ npm install webfontloader

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

В render() используем стрелочную функцию ES6 и map() для итерации по массиву и используем stickieList для рендеринга каждого компонента Stickie, что только создали:

Создать анимацию определенных компонентов можно при помощи <ReactCSSTransitionGroup>. Устанавливаем transitionName, который вам необходимо использовать в вашем CSS для опредения стиля анимирования. Также обратите внимание на атрибут key в <li>. Вам необходимо использовать уникальный ключ для анимирования каждого компонента, когда вы используете <ReactCSSTransitionGroup>.

React добавляет дополнительные имена классов. Например, когда transitionName имеет значение ‘animation’, то у вас также будут ‘animation-enter’, ‘animation-enter-active’, ‘animation-leave’ и ‘animation-leave-active’.

Ниже представлен код для /css/style.css:

Вот вы и создали веб-приложение для совместного использования, работающее в режиме реального времени, при помощи React.js и PubNub! Надеюсь, вам понравилось руководство!

PubNub Stickie app gif animation

Вы можете ознакомиться со всем кодом, включая CSS, в данном репозитории GitHub. Хотя я использовала в данном руководстве «легкую» версию – app-lite.jsx, вы можете взглянуть на app.jsx, где представлено больше возможностей.

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

Хотите познакомиться с React получше?

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

Вы начнете с простейшей архитектуры и постепенно создадите веб-приложение, добавляя возможность за возможностью. Вы изучите базовые концепции, такие как  tooling, reducers и routing. Также вы выучите некоторые более продвинутые  техники: smart и dumb components, pure components и asynchronous actions. К концу вы создадите полноценное приложение, где будут карточки с текстом и картинками для изучения при помощи повторения с интервалами.

Интересно? Зацените!

Ссылки

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.