Акция «Читайте с любовью»

Sun, 09 Apr 2017 18:37:57 +0300

14 февраля 2017 в школе № 509 впервые прошла акция «Читайте с любовью», приуроченная ко Дню книгодарения и Дню всех влюблённых.

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

Участники акции получали на память сувенир — значок с символикой акции.

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

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

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

Была свёрстана веб-страница, на которой отображается счётчик подаренных книг. Раз в 5 секунд страница отправляет AJAX-запрос на сервер и запрашивает значение счётчика. Если в ответ приходит значение, отличное от текущего, счётчик обновляется с анимацией.

Как же обновляется значение на сервере? Был свёрстан второй интерфейс — для управления счётчиком. Он адаптирован для мобильных устройств. Управляющий интерфейс содержит две кнопки: «−» и «+» — а также текущее значение счётчика. Нажатие каждой из кнопок вызывает AJAX-запрос на сервер, содержащий один параметр — запрошенное действие. Соответственно, происходит либо декремент, либо инкремент счётчика.

Специально обученный волонтёр, принимая книжку, выдаёт значок и нажимает кнопку в своём мобильном интерфейсе. На сервер уходит запрос, обновляется значение, примерно в течение 5 секунд счётчик обновляется на экране — как раз за это время волонтёр успевает помочь прикрепить значок :) Участник акции счастлив — видит свой вклад визуализированно: «вот я принёс книжку и меня посчитали!»

Что интересно — в ходе подобной акции ссылка на страницу со счётчиком в принципе без опаски может быть размещена в публичном пространстве (в соцсетях и/или на сайте школы). Тогда следить за прогрессом акции смогут не только ученики внутри школы, но и, например, их родители. Но мы в этот раз не размещали. :)

Одноразовая ли это история? Думаю, что нет. Очень легко адаптировать этот счётчик к любым другим акциям — считать количество отжиманий в ходе спортивных праздников, количество сданных использованных батареек (спасённых ёжиков) в рамках экологических акций и т. п. :)

Чуть-чуть сугубо технических деталей

Использованные технологии, библиотеки, фреймворки:

PHP
jQuery
CSS-фреймворк Bootstrap 3 для ускорения и упрощения вёрстки
key-value хранилище Redis и php-библиотека Predis для работы с ним
JS-библиотека FlipClock для создания анимированного счётчика в виде «циферблата»

Значение на сервере хранится в key-value хранилище Redis в виде одного целого числа. На уровне хранилища поддерживаются атомарные операции инкремента/декремента.

Почему делается pull-запрос с клиентской стороны раз в 5 секунд, а не push с сервера или long-polling? Потому что браузер телевизора иногда ведёт себя странно при, казалось бы, самых банальных операциях. Например, вылетает при просмотре YouTube-роликов (через браузер, а не спец. приложение). Поэтому принято решение, во избежание лишних крэшей, максимально упростить клиентский код.

Блог Дмитрия Серженко: заметки с тегом инфопанель

Акция «Читайте с любовью»

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

Чуть-чуть сугубо технических деталей