Как создать приложение для видеочата

Буквально на днях я наткнулся на этот потрясающий учебник по Twilio от Фила Нэша, объясняющий, как сделать видеочат с помощью React Hooks, и я решил запустить его в Back4app, потому что он бесплатный, потрясающий и может быть интегрирован с Parse, так что я могу иметь бесплатный веб-хостинг (бесплатный поддомен back4app включен), разместить свое приложение и использовать доставку данных в реальном времени, чтобы включить функции чата в будущем.
В этом посте я рассказываю о том, что я сделал, чтобы заставить его работать.

Первым делом

Я настоятельно рекомендую прочитать статью Фила и разобраться с тем, как это работает на вашей машине, прежде чем работать в Интернете.

Чтобы приступить к работе, вам понадобятся минимальные знания NodeJS, React и Express. Я объясню, какие шаги я предпринял и почему, но если вы не знакомы с этими технологиями, вы можете не понять, зачем именно они нужны.

Первый шаг – что вам понадобится

В статье Фила говорится, что вам понадобятся установленные и работающие Node.js и NPM. У меня в системе это уже было, поэтому убедитесь, что у вас это тоже есть.

Кроме того, вам понадобится учетная запись Twilio, поэтому создайте ее бесплатно, и все готово.

Второй шаг – начало работы

Самый первый шаг, клонирование репозитория, у меня не сработал. Команда Фила гласит:

git clone -b twilio [email protected]:philnash/react-express-starter.git twilio-video-react-hooks

дало мне несколько ошибок, и в конце концов мне помогло вот это:

git clone https://github.com/philnash/twilio-video-react-hooks.git

После этого остальные команды были выполнены хорошо:

cd twilio-video-react-hooks
npm install

Результат:

Если вы работаете локально, вы должны настроить свой env-файл, как описано в статье Фила, но так как здесь речь идет о работе в Back4app, я пока пропущу этот момент.
Нам по-прежнему понадобятся значения TWILIO_API_KEY, TWILIO_API_SECRET и TWILIO_ACCOUNT_SID из вашей учетной записи Twilio, но мы будем использовать их в другом месте.

Немного измените код

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

Самый первый – это модули NPM. Команда npm install, приведенная выше, установит модули на ваш компьютер, но в Back4app вам нужно сказать Parse, чтобы он установил их за вас.

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

В итоге мой файл package.json выглядит следующим образом:

{ 
   "dependencies": {
           "express-pino-logger": "*",
           "twilio": "*"  
   } 
}

Обратите внимание, что я устанавливаю модуль Twilio в его последней версии (“*” означает последнюю версию). В этот момент вы можете спросить, зачем я это делаю, ведь в стеке Parse уже есть встроенный модуль Twilio:

И причина этого – версионность. Для совместимости каждая версия Parse имеет стек модулей с определенными версиями, которые могут работать или не работать в вашем конкретном случае. Чтобы использовать любую версию, которая не указана в стеке, мы можем убедиться, что Parse устанавливает правильную версию, указав ее в файле package.json.

Давайте построим его

Для развертывания мы должны создать оптимизированную для выполнения версию нашего кода. В статье Фила говорится, что мы должны выполнить:

npm run dev

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

npm run build

в результате чего будет создана новая папка build, содержащая все наши активы:

Затем мы загрузим все содержимое папки сборки в папку Public в разделе Cloud Code.

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

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

Настройка App.js

Есть один файл, который вам придется изменить вручную: файл index.js в каталоге сервера проекта.

Разбор жестко настроен на запуск файла с именем app.js, а не index.js, поэтому давайте переименуем этот файл.

Вы можете создать копию с именем app.js, переименовать оригинал в app.js, но в конечном итоге он должен называться app.js:

Нам также нужно будет внести несколько изменений в этот файл.

В строке 7, где говорится

const app = express();

В Parse уже загружен и инстанцирован Express, так что это приведет к конфликту. Давайте закомментируем эту строку:

Кроме того, строки 41-43, где говорится:

app.listen(3001, () =>
  console.log('Экспресс-сервер работает на localhost:3001')
);

Parse не сможет открыть этот порт по соображениям безопасности, поэтому давайте закомментируем и его:

Другое дело, что в итоге мы так и не использовали модуль express-pino-logger, поэтому давайте закомментируем строки 4 и 10, где говорится:

const pino = require('express-pino-logger')();
...
app.use(pino);

Так это будет выглядеть:

Теперь, в самом верху файла, вы заметите, что этот файл вызывает два других локальных файла: config и tokens:

const config = require('./config');
...
const { videoToken } = require('./tokens');

Нам нужно, чтобы эти локальные файлы были загружены вместе с файлом app.js, поэтому давайте загрузим все три файла в папку Cloud.

Конечная структура будет выглядеть следующим образом:

Часть кодирования выполнена

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

Помните, Фил говорил, что мы должны задать файл .env с учетными данными от Twilio?
В Parse для этого есть раздел в панели Server Settings.
Откройте панель “Переменные среды”:

И настройте его так же, как в файле .env:

Помните, что вы можете получить эти значения из своего аккаунта Twilio:

Настройка веб-хостинга

Теперь в панели “Настройки сервера” перейдите в раздел “Веб-хостинг” и “Живые запросы”:

Включите веб-хостинг и установите поддомен back4app.io для вашего приложения:

Сохраните его, и все готово.

Тестирование

Теперь пришло время протестировать наше приложение.

Перейдите по URL-адресу, заданному в веб-хостинге, через браузер. Только не забудьте использовать протокол HTTPS.
Поскольку мы будем запрашивать доступ к вашей камере, использование HTTPS обязательно, иначе вы получите ошибку. Поэтому перейдите по адресу:

https://Your_Domain_Name.back4app.io

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

Заключение

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

Мы также получили все преимущества Parse и Back4app: они безопасны, масштабируемы, устойчивы к сбоям и уже настроены для резервного копирования.

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

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