Daily.co предоставляет разработчикам прекрасные возможности для добавления своего API видеоконференцсвязи в ваше веб-приложение. Они также предлагают Prebuilt UI, который обычно устанавливает все флажки, необходимые для создания отличного пользовательского интерфейса для видеоконференцсвязи.
Плагин Daily Prebuilt-UI для React Studio
Мы обернули фрагмент Prebuilt UI от Daily в плагин React Studio. Вы можете скачать плагин из магазина плагинов React Studio. Плагин чрезвычайно прост в использовании, вы просто добавляете и выравниваете элемент плагина на экране или компоненте проекта React Studio и связываете «url» со своим URL-адресом комнаты. Вы также можете использовать статическую настройку для URL-адреса, если комната всегда остается неизменной.
URL динамической комнаты
Фиксированный URL комнаты
Я предполагаю, что вы знаете все основы использования React Studio и подключения своего пользовательского интерфейса к бэкэнду Xano. Если вы новичок в Xano и React Studio, просмотрите эти видео.
Учитель админ; Демо-приложение My Yoga Studio
Теперь мы знаем, как настроить пользовательский интерфейс для приложения для видеоконференцсвязи, но как нам динамически создавать новые комнаты для ежедневных видеоконференций из приложения?
Ответ прост: мы создаем настраиваемую конечную точку API в Xano и настраиваем эту конечную точку для вызова API Daily и запроса новой комнаты для видеоконференций.
Вот пример моей пользовательской конечной точки в бэкэнд-компоновщике Xano без кода. Сначала это может показаться немного устрашающим, но это довольно просто. Далее я разобью шаги:
- Я создал специальную функцию под названием «Func_1», которая просто проверяет, является ли роль пользователя учителем или администратором.
2. Создайте переменную, которая принимает текущую метку времени. Эта переменная позже будет использоваться, когда мы вызовем API Daily для создания комнаты для видеоконференций, которая автоматически удаляется через час.
3. Добавьте час к отметке времени (3600) секунд.
4. Я создал переменную JSON на основе примера ответа API, который я получил от администратора Daily. Он содержит то, что API Daily вернет, когда мы его вызовем. По сути, нам нужен только URL комнаты, но я вернусь к нему на следующем этапе.
5. На этом этапе мы выполняем собственно POST-вызов API Daily. Вероятно, это самая важная часть. Я просто использовал API-документацию Daily для создания рабочего вызова POST с нашим ключом Daily API и вставил его в запрос внешнего API Xano.
6. Мы создаем переменную, которая выбирает URL-адрес комнаты из ответа JSON из API создания комнаты Daily. Этот URL-адрес будет ссылкой, которую мы используем для подключения плагина Pre Built UI к фактическому вызову.
7. Мы сохраним URL-адрес комнаты в таблице классов и установим для параметра class_active значение «true». Это значение затем используется в пользовательском интерфейсе приложения, чтобы показать «Присоединиться», когда класс активен и запущен.
Вот и все, теперь у нас есть конечная точка, которую мы можем вызывать из пользовательского интерфейса. Далее я покажу, как я это сделал, в своем демонстрационном приложении MyYogaStudio.
Снимок экрана административной страницы Учителя в приложении Yoga почти не требует пояснений. Когда учитель нажимает кнопку «Активировать класс», он просто вызывает конечную точку, которую мы только что создали в Xano. URL-адрес конечной точки установлен на / openclass / ‹значение слота данных›, что означает, что мы вводим значение слота данных (идентификатор класса) в путь конечной точки.
MyYogaStudio; экраны конечных пользователей
Само приложение действительно простое; он начинается с входа в систему, а главный экран представляет собой «просто» список занятий йогой. Каждый элемент класса в списке содержит компонент, который имеет два состояния: «Присоединиться к классу» и «Не запущен». В списке мы показываем состояние в зависимости от значения в столбце «class_active».
Когда пользователь нажимает кнопку «Присоединиться к классу», для взаимодействия с кнопкой устанавливается сохранение URL-адреса класса в слоте данных и последующее действие «Перейти к», которое указывает на экран класса. Экран класса - это просто экран с полноэкранным плагином Daily. Плагин Daily получает URL-адрес комнаты из слота данных «URL-адрес комнаты», который мы заполняем с помощью свойства url при первом взаимодействии.
Вот ссылка на демонстрационное приложение MyYogaClasses. Войдите в демо-аккаунт и попробуйте щелкнуть некоторые классы. На момент написания этого поста ежедневные комнаты активны, но, возможно, срок их действия уже истек, когда вы прочтете этот пост. Основная идея все еще видна, даже если видеозвонок больше не доступен.
Дайте нам знать, если у вас есть идеи относительно React Studio
Наш форум https://discuss.reactstudio.com/ или [email protected]
Загрузите React Studio с www.reactstudio.com
