Разработка веб-приложения для автоматического составления расписаний

Содержание:

• Какие процессы можно оптимизировать с помощью автоматизации?
• Процесс автоматизации: шаги к эффективному решению
• Визуальный облик нашего приложения: что ожидать
• Реализация

Подготовка эфиров может быть весьма сложной и изнурительной задачей, поэтому за кулисами должно находиться надежное сообщество помощников наряду с ведущими. Не имеет значения, идет ли речь о телевидении или платформах, таких как YouTube, Rutube, VK и прочих: ключевыми фигурами за сценой являются продюсеры. Они занимаются поиском экспертов, ведут переговоры с потенциальными гостями, предлагают обсуждаемые темы и координируют все детали, формируя расписание для всех участников процесса.

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

Какие процессы можно оптимизировать с помощью автоматизации?

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

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

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

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

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

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

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

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

В итоге, существует ряд переменных, которые могут изменяться в течение весьма короткого времени. Тем не менее, это те же самые переменные, и процесс сбора данных можно немного автоматизировать. Именно это мы и намерены осуществить.

Процесс автоматизации: шаги к эффективному решению

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

• удобным дизайном;
• вариантом выбора параметров эфира;
• небольшая база данных специалистов с опцией добавления новых участников;
• автоматизированным созданием расписания;
• пересылкой готового сообщения в командный Telegram-чат, посвящённый стриму.

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

Какие технологии мы планируем применить:

• HTML и CSS для создания привлекательного дизайна.
• JavaScript используется для создания пользовательских интерфейсов.
• API IndexedDB предоставляет возможность создания локальной базы данных непосредственно в браузере, и эта функция поддерживается современными браузерами.
• API бота Telegram позволяет отправлять расписания пользователям.

Мы загрузили завершенный код на pastebin.com:

• HTML-код;
• JavaScript-код.

Визуальный облик нашего приложения: что ожидать

Предположим, что мы разработаем приложение для продюсеров вымышленной YouTube-программы Skillbox FM, в которой будут участвовать настоящие ведущие и гости, основываясь на уже выпущенных выпусках подкаста «Люди и код».

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

Рассмотрим данную ситуацию с точки зрения программистов:

• В основном, необходимо создать набор чекбоксов, которые администратор сможет установить в требуемой последовательности.
• Определение времени подключения зависит от раздела «Вид эфира» и устанавливается в момент, когда выбирается утренний или вечерний период.
• Чтобы разместить экспертов в расписании на определённое время, нужно последовательно кликнуть на время подключения, а затем выбрать имя гостя. После этого они займут отведённые им позиции.
• Все варианты сосредоточены на достижении необходимого результата, то есть текста поста. Исходя из этого, раздел «Предпросмотр поста» следует разместить в центральной части.

Вот каким образом программа отреагирует в случае, если мы выберем произвольные варианты.

При нажатии на синюю кнопку в верхней части экрана, мы опубликуем в Telegram-чате следующий пост.

Давайте рассмотрим, как можно создать подобную программу.

Реализация

Проект будет состоять из двух файлов: Air Constructor.html и speakersDB.js. Первый файл представляет собой веб-страницу, содержащую HTML, CSS и немного JavaScript. Второй файл включает в себя все аспекты, связанные с базой данных специалистов, и содержит JavaScript-код, который мы интегрируем на веб-страницу.

Давайте рассмотрим, как можно использовать перечисленные инструменты.

Интерфейс должен сочетать в себе не только эстетику, но и удобство для продюсера, поэтому оформление должно соответствовать корпоративному стилю медиа. В данном контексте основным цветом будет синий (код #3D3BFF).

С вёрсткой будем обходиться просто:

• Простая структура из трёх
  элементов, предназначенная для деления страницы на три вертикальные секции:

  ,

  ,

  .
• На первом уровне, как видно на скриншоте, расположен заголовок «Расписание эфира» и кнопка отправки, выполненная на синем фоне.
• Второй уровень включает в себя разделы, такие как «Дата эфира», «Вид эфира» и «Ведущие».
• третья категория включает разделы «Время подключения», «Предпросмотр публикации» и «Спикеры».
• Поскольку количество CSS-правил невелико, мы разместим их непосредственно на странице, используя элемент