9f561-dashing_sample.jpg

Что такое Dashboard и зачем он нужен

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

Во многих крупных компаниях, администраторы выводят различную статистическую информацию о нагрузках на сервера, up-time, количество обрабатываемых запросов и так делее.

Что необходимо для установки Dashboard?

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

1. Граббер – Сбор данных с установленным интервалом

2. Парсер – Обработка собранных данные в реальном времени

3. Фронтенд – Отображение полученных и обработанных данных

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

1. Показания нагрузки на сервера

2. Количество посещений, регистраций, комментариев на сайте

3. Получение данных с различных соц. сетей (количество фоллеверов в твиттере, последние сообщения в темах и т.д.)

4. Узнать погоду в любом регионе

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

Настройка Dashboard

Для настройки собственного Dashboard необходимо, что бы в системе был установлен Ruby 1.9+

Далее необходимо  установить соответствующий gem

$ gem install dashing

После чего генерируем новый проект:

$ dashing new sweet_dashboard_project

Далее переходим в только что созданную дирикторию sweet_dashboard_project и “бандлим” гемы:

$ bundle

Готово! Запускаем сервер.

$ dashing start

Если все прошло без каких либо ошибок, то на 3030-м порту должен запуститься веб-сервер. Открываем наш браузер и переходим по адресу localhost:3030

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

Структура Dashing

Пришло время ознакомиться со структурой самого Dashing приложения:

1. Assets – как ты уже догадался тут находятся изображения, шрифты, javascript

2. Dashboards – в каждом дэшбоарде присутствует свой erb – он нужен для описания расположения и параметров всех виджетов

3. Jobs – Скрипты для сбора данных, как пример вызовы внешних API сервисов

4. Lib – различные дополнительные Ruby файлы, которые могут понадобиться при работе с данными

5. Public – Файл шаблон для Deshboard

Widgets – Тут располагаются весь HTML/CSS/coffe для собственных виджетов

Небольшой пример для дэшбоарда который состоит из двух виджетов:

<% content_for(:title) {“Name dashboard”}%>
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="stat" data-view="Number" data-title="Stat" style="background-color: #96bf48;" ></div>
    </li>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="valuation" data-view="Number" data-title="Current Value" data-prefix="$"></div>
    </li>
  </ul>
</div>

Каждый виджет содержит два обязательных параметра:

1. data-id (Идентификатор виджета, который позволяет обновлять файлы)

2. data-view (Тип виджета, в данном примере оба виджета числовые)

Для построения виджетов используется сетка, которая описывается двумя атрибутами data-row и data-col, собираем наш дэшбоард идоступных по умолчанию виджетов (comments, clock, iframe, graph, list, image, namber, meter, text). Если чего то не хватает, то всегда можно написать свой виджет.

Как происходит обновление данных?

Процедура передачи данных в виджет довольна тривиально, надо всего на всего указать необходимый виджет (widget-id) после чего передать ему данные в формате JSON. Есть несколько путей как это можно сделать.

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

Что бы создать свой собственный job-файл, нужно воспользоваться generate job sample_job.

SHEDULER.every ‘1m’, :first_in =>0 do |job| send_event(‘stat’, {current: rand(1000)}) end

Созданная задача будет выполняться каждую минуту и отправлять случайное значение всем виджетам у которых widget-id = “stat”. Для передачи значений используется метод send_event(widget_id, json_formatted_data). Такие задачи бывают очень полезны когда необходимо забирать различные данные из базы данных или же использовать сторонние вызовы API

Второй вариант позволяет получать данные напрямую через HTTP:

Curl –d ’{“auth_token”: “YOUR_AUTH_TOKEN”, “current”:100}’ http://localhost:3030/widgets/stat

Для безопасности используется токен который прописан в config.ru

Планируем собственный дэшбоард

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

Список необходимых виджетов:

1. Количество посетителей – Google Analytics Репозитой на github

2. Узнать статус проекта в виде светофора Репозитой на github

3. Twitter – Twitter search Репозитой на github

Данного набора виджетов должно вполне хватит для задумки. После того как все будет готова останется определиться с площадкой на котором будет крутиться получившийся Deshboard.

Могу посоветовать воспользоваться Heroku http://heroku.com, довольно простая площадка как рас для таких целей. Все что необходимо сделать что бы разместить свой дэшин на heroku это:

1. Зайти на портал http://heroku.com

2. Зарегистрироваться

3. Перейти по ссылке в письме после регистрации

4. Скачать Heroku Tooblet – это утилита для работы с облаком (есть как для Ubuntu| debian так и для windows)

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

heroku login

Вводи свои аутентификационные данные email и password указанные тобой в процессе регистрации. Создавай папку для бедующего репозитория и переходи в неё

mkdir dashing
cd dashing

Склонируй гит репозиторий в Dashing:

git clone https://github.com/Shopify/dashing.git

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

Bundle install
git init
git add .
git commit –m “First commit”

Теперь создаем приложение в самом Heroku:

Heroku apps:create myfirstdashboard

Теперь твое прложение будет доступно по адресу myfirstdashboard.herokuapp.com, но пока по этому адресу ничего доступно не будет, утилита Heroku создала отдельную ветку репозитория под именем heroku. Копируй туда свое приложение

git push heroku master

Если в процессе пуша появится ошибка  в которой будет сообщение об отсутствие файла Gemfile.lock, несмотря на его наличие, открывай файл .gitignore и удаляй оттуда строку ./Gemfile.lock и попробуй сделать пуш еще раз.

Итог

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


Пожалуйста авторизируйтесь, что бы оставлять комментарии

Очень удобная штука!
у тебя код не отображается
Уже отображается :)