Левая панель

Документация сервиса QiWeal

Предисловие

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

Мониторинг веб-сайтов/серверов, анализ поисковых метрик, обработка форм обратной связи, задачник, календарь, статистика, работа с базой данных через REST API, все это и не только уже собрано для Вас. Сервис поможет Вам в контроле качества Ваших проектов. API, веб-интерфейс, регулярные отчеты, уведомления о различных событиях(возникшие ошибки или сбои) помогут Вам иметь полное представление о том, как именно работает Ваш сервис. Не нужно никаких дополнительных установок, просто укажите URL Вашего проекта и мы сделаем свою работу.

Начало работы

Панель управления

Страница содержит в себе пользовательскую статистику и органайзер, который отображает список задач, которые были созданы в разделе "TODO".

TODO (Задачник)

Список задач, который после создания отображается в органайзере. Есть возможность установки приоритета и даты окончания по каждой задаче. Внизу страницы отображается список из актуальных и выполненых задач.

Покупки

Страница с персональными реквизитами, которые добавятся после первой успешной оплаты любого тарифного плана. Информационная часть страницы включает в себя: историю покупок (активацию тарифных планов), а также возможность установки автоплатежа по каждому плану; отображение информации по каждому плану: состояние, даты активации и окончания, количество доступных API запросов на текущий аккаунт. API запросы — количество доступных запросов конкретного пользователя к API нашего сервиса (сюда не включаются запросы к API по проектам).

Google Аналитика и Yandex Метрика

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

Сервера

Страница мониторинга Ваших серверов (IP + порт). По каждому серверу снимаются показатели: время соеденения с сервером и время задержки (latency). Считается время работы (uptime) сервера и фиксируется последнее время ошибки (недоступности сервера). Визуализация с помощью графиков дает возможность детального изучения каждого периода времени работы сервера. Эта информация доступна посредством веб-интерфейса и через API (смотрите ниже в разделе "API"). Включить/Выключить уведомления на E-mail/Telegram по активности сервера можно через контекстное меню "ред.".

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

Страница мониторинга Ваших API-сервисов. HTTP-статус, дата последней ошибки, время работы (uptime), размер/время ответа, информация о соединении с сервером (время соеденения с сервером и время задержки сети (latency)), время DNS, а также тело ответа, заголовки HTTP-сессии и ассерты (asserts) помогут Вам в контроле над работой API-сервисов. Визуализация с помощью графика HTTP-статуса ответов показывает наглядно были ли перебои в работе. Эта информация доступна посредством веб-интерфейса и через API (смотрите ниже в разделе "API"). Включить/Выключить уведомления на E-mail/Telegram по активности Ваших API можно через контекстное меню "ред.".

URL'ы

Страница мониторинга Ваших URL'ов. По каждому веб-сервису фиксируется: код ответа (HTTP), время работы (uptime), размер страницы, время преобразования DNS имени в IP-адрес, количество запросов к серверу для получения всех ресурсов страницы, время загрузки страницы, время соединения с сервером и время задержки (latency). По каждой временной метке выводится минимальный, средний, максимальный показатель, который был зафиксирован. Декоративные графики показывают суточную нагрузку по каждому URL'у. Включить/Выключить уведомления на E-mail/Telegram по активности сервиса можно из контексного меню.

На странице деталей по каждому URL'у доступна дополнительная информация по каждому скаченному ресурсу страницы, а также страница включает графики по всем необходимым показателям с учетом балансировки нагрузки (отображение показателей с фильтром по IP-адресу).

QWMP

Страница профессионального мониторинга сайтов, сервисов или заданных показателей. Данный функционал доступен только для тарифного плана "Продвинутый". Сервис позволяет создавать рабочие области и наполнять их компонентами для мониторинга. Каждый компонент включает в себя: название, тип (блок, график, диаграмма и т.д.), URL (для получения JSON/XML данных), интервал запроса, HTTP-заголовки запроса, ассерты (валидация JSON/XML данных) и метрики (название свойств в JSON/XML данных для отображения в компоненте). Согласно интервалу времени компонента будет производиться запрос на указанный URL, чтобы получить и сохранить JSON/XML данные. После сохранения, значения указанных метрик будут представлены в компоненте. Таким образом, Вы можете захватывать необходимые показатели и выводить их в графики, диаграммы или блоки (компоненты). Формируя компоненты и области Вы создаете панели (дэшборды) для отслеживания необходимых Вам показателей (метрик), а система ассертов поможет валидировать данные и будет оповещать Вас в случае несоблюдения условий ассерта(ов). Включить/Выключить уведомления на E-mail/Telegram по активности Ваших компонентов можно через контекстное меню "ред." и при создании. Данный сервис поможет Вам не только выстроить рабочие области для мониторинга нужных Вам инфраструктурных объектов или компонентов, но и позволит производить валидацию полученных данных, а значит и получать уведомления на E-mail или Telegram в случае некорректных данных или значений, которые могут выходить за допустимый диапазон. Полное описание работы сервиса представлено ниже в соответствующем разделе.

Телеграмм уведомления

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

Настроить получение уведомлений в Телеграмм очень просто. Вы должны пройти по ссылке выше и запустить Телеграмм бота, после чего он попросит Вас ввести API-токен и даст ссылку, где его можно скопировать.

API-токен API-токен

Как видно на скриншотах выше, нажимая на кнопку 1, перед Вами будет открыто окно с токеном, где есть кнопка 2, для того, чтобы скопировать API-токен в буфер обмена. Если Ваш браузер не поддерживает данную функцию, в таком случае API-токен нужно скопировать вручную.

Телеграмм бот

После вставки API-токена в Телеграмм чат [3], Вы активируете возможность своего аакаунта на получение уведомлений в Телеграмм, что Вы и видите на картинке выше. После такого сообщения все уведомления будут отправляться Вам на электронную почту и в данный Телеграмм чат.

База данных через REST API

Проекты

Проекты — страница, которая показывает все Ваши проекты. Вы можете создавать проекты или быть приглашенным в проект. Проект — оболочка, которая включает в себя: таблицы, участников с разными правами доступа. Каждая таблица ассоциируется с таблицей в базе данных. Подключив наш скрипт на свою страницу Вы с легкостью сможете обрабатывать любые формы без каких-либо дополнений или кода, при этом все данные будут передаваться к нам на сервер и фиксироваться в базе данных. Достаточно добавить код из настроек проекта на свою страницу и Вы автоматически будете сохранять все отправленные данные с формы в базу данных. Данные будут сразу же доступны в веб-интерфейсе и через API. Вы также сможете получать уведомления о добавлении данных по каждой таблице или общие сводки по всему проекту (настройка уведомлений на E-mail/Telegram). Права участников проекта могут быть следующими:

Пример работы раздела "Проекты":

Создаем свой проект и если нужно приглашаем всех участников (функция приглашения доступна в настройках проекта).

Создаем таблицу в проекте, описание полей и пример приведен ниже на изображении.

Создание таблицы проекта

Вот мы и настроили сервис для работы Вашей веб-страницы с базой данных. Приведем пример кода HTML страницы:

      <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test HTML page</title>
</head>
<body>
<form name="users" method="post">
    <label for="name">Имя</label>
    <input id="name" name="name" type="text"/>
    <br>
    <label for="email">E-mail</label>
    <input id="email" name="email" type="email"/>
    <br>
    <label for="textarea">Отзыв:</label>
    <br>
    <textarea id="textarea" name="feedback"></textarea>
    <br>
    <input type="submit" value='Отправка формы'>
    <input type="reset" value='Сброс'>
</form>
<script src="https://qiweal.com/js/form-handler.min.js"></script>
<script>qiwealOptions['prj-hash']='MTA3IDFkNWIxZjBiODM1MThlZDcyNDE1YmVkODJkYzM3MzQ0OTJiZWRiZWU1ZTcyMjk4OGFkNWNiNGMzN2E2MGE4ZTI=';</script>
<script>
  // Optional functions
  function myValidator() {
    // Any validation code ...

    // In case when data is correct, you need to return 'true', otherwise
    // false
    return true;
  }
  setValidationFunction(myValidator);
</script>
</body>
</html>
    

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

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

После первой отправки формы, количество и название полей (аттрибут "name") меняться не могут! В противном случае их просто откинет валидатор на стороне сервера.

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

Код подключения скрипта и параметры для инициализации (qiwealOptions) последнего Вы можете скопировать в настройках проекта. Код актуален для всех страниц (таблиц) одного проекта.

Внимание: Если в запросе передан недействительный токен(qiwealOptions['prj-hash']) или аттрибут формы "name" не соответствует созданым в проекте таблицам сервер возвращает HTTP-статус 401 Unauthorized.

В скрипте также есть собственная валидация данных, если форма пуста — данные НЕ БУДУТ отправлены на сервер! На стадии разработки всегда проверяйте консоль, любая ошибка будет выводиться именно туда.

Результат можно проверить через веб-интерфейс:

Результат работы скрипта QiWeal

Дата каждой отправки формы фиксируется автоматически и выводится вместе с данными.

Обратная связь

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

Отличие от работы с обычной таблицей лишь в том, что аттрибут формы "name" должен указываться как "qiweal-feedback" и должны быть поля (аттрибуты "name"): "name", "email", "category" (необязательный параметр), "title", "text".

Пример кода:

      <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test HTML page</title>
</head>
<body>
<form name="qiweal-feedback" method="post">
  <label for="name">Имя</label>
  <input id="name" name="name" type="text"/>
  <br>
  <label for="email">E-mail</label>
  <input id="email" name="email" type="email"/>
  <br>
  <label for="category">Категория</label>
  <input id="category" name="category" type="text"/>
  <br>
  <label for="title">Заголовок</label>
  <input id="title" name="title" type="text"/>
  <br>
  <label for="text">Отзыв:</label>
  <br>
  <textarea id="text" name="text"></textarea>
  <br>
  <input type="submit" value='Отправка формы'>
  <input type="reset" value='Сброс'>
</form>
<script src="https://qiweal.com/js/form-handler.min.js"></script>
<script>qiwealOptions['prj-hash']='MTA3IDFkNWIxZjBiODM1MThlZDcyNDE1YmVkODJkYzM3MzQ0OTJiZWRiZWU1ZTcyMjk4OGFkNWNiNGMzN2E2MGE4ZTI=';</script>
</body>
</html>
    

Все, что описано выше для таблиц действительно и здесь. Разница только в заполнении, нужно учитывать заготовленный шаблон.

Результат:

Результат работы Обратной связи Вид страницы Обратная связь

QWMP

Описание

QWMP — страница, которая показывает все Ваши рабочие области и набор компонентов в каждой такой области. Рабочая область — страница, которая включает в себя: панель управления и область для работы с компонентами. Каждый компонент ассоциируется с периодическим HTTP-запросом. Для примера, давайте создадим первую рабочую область и перейдем в нее. На данный момент, мы видим только панель управления и пустую рабочую область. Для того, чтобы добавить первый компонент необходимо в панели инструментов нажать на кнопку "Добавить" и выбрать тип компонента из представленных ниже. После этих действий Вы увидите следующее:

Добавление компонента QWMP

Необходимо заполнить представленную Выше форму:

После того, как Вы введете всю необходимую информацию, нажмите кнопку "Добавить" и компонент будет создан. Далее предлагаю рассмотреть функциональные возможности ассертов и метрик, а после перейдем к панели инструментов и работе с компонентами.

Система ассертов позволяет Вам проверять (валидировать) HTTP-ответ, если он является JSON или XML сущностью. Как мы видим выше, нужно заполнить два, а в некоторых случаях три поля:

Если возникает ошибка или несоответствие на любом из этапов — Вы получите уведомление на электронную почту и Телеграмм чат (если он настроен).

Регулярные выражения — своего рода шаблон, шаблон строки, согласно которому Вы сможете проверять строки на совпадения или вхождения.

Если Вам нужно ограничить варианты для проверки, например, строка должна содержать только цифры, Вы можете сделать это так: [0-9]. Квадратные скобки обозначают разрешение диапазона, а внутри скобок следуют разрешаемые диапазоны ввода. В случае, если необходимо указать все варианты кроме определенного, можно использовать отрицание ^, например, [^0-9]. В таком случае, все символы кроме указанных будут подходить под данное выражение. Давайте рассмотрим еще конструкции, которые мы можем задействовать:

Спецсимволы определяющие количество совпадений:

Примеры:

Метрики — это указание свойств (аттрибутов) объекта JSON или XML для захвата. Давайте рассмотрим пример HTTP-ответа, который содержит в себе JSON тело метрики которого мы хотим вывести в компонент:

      {
  "latency":1,
  "latencyMin":1,
  "latencyAvg":14,
  "latencyMax":28,
  "tcpHandshakeTime":1,
  "tcpHandshakeTimeMin":1,
  "tcpHandshakeTimeMax":86,
  "httpStatus":200,
  "requests":50,
  "pageLoadTime":591,
  "pageLoadTimeMin":324,
  "tcpHandshakeTimeAvg":43,
  "pageLoadTimeMax":3812,
  "pageSize":1702714,
  "urlLastDownTime":"2020-06-12 03:30:28.0",
  "uptime":"97.76%"
}
    

Если Вы хотите вывести в компонент (диаграмму, график или блок) значение любого из этих JSON свойств — Вам нужно добавить при создании компонента или его редактировании название данного свойства, например, если мы хотим выводить "latency", нужно скопировать название данного свойства из ответа и добавить метрику в компонент.

Таким образом, каждый раз выполняя запрос на URL сервис QWMP сохраняет полученный JSON или XML. Далее в веб-интерфейсе сервиса каждый HTTP-ответ проходит этап отбора указанных метрик и на базе этих значений будут строиться графики, диаграммы или блоки.

Стоит также заметить, что JSON ответы могут быть более комплексными и не такими простыми, как это показано выше, например, если Вы хотите производить мониторинг метрик, которые Вы получаете не со своего API-сервиса. В более структурированном ответе также можно производить захват метрик. Ниже будут показаны примеры комплексных JSON ответов, чтобы разъяснить как в таких случаях указывать необходимые метрики.

      {
  "usd":{
    "ask":"21.17802000",
    "bid":"21.17802000"
  },
  "eur":{
    "ask":"23.74691400",
    "bid":"23.74691400"
  },
  "rub":{
    "ask":"0.39164000",
    "bid":"0.39164000"
  }
}
    

В таком случае, чтобы указать, что Вы хотите захватывать значение "ask" в "usd", при добавлении метрики в компоненте стоит указать "usd.ask" (без кавычек). Могут быть и массивы объектов, например:

      [
  {
    "ccy":"USD",
    "base_ccy":"UAH",
    "buy":"26.50000",
    "sale":"26.90000"
  },
  {
    "ccy":"EUR",
    "base_ccy":"UAH",
    "buy":"29.80000",
    "sale":"30.50000"
  },
  {
    "ccy":"RUR",
    "base_ccy":"UAH",
    "buy":"0.36000",
    "sale":"0.39000"
  },
  {
    "ccy":"BTC",
    "base_ccy":"USD",
    "buy":"9040.5568",
    "sale":"9992.1944"
  }
]
    

В таком случае, чтобы указать, что Вы хотите захватывать значение "buy" первого элемента (где "ccy" равен "USD"), при добавлении метрики в компонент стоит указать "{0}.buy" (без кавычек). Нумерация элементов начинается с нуля. Например, этот же пример для EUR будет таким: "{1}.buy" (без кавычек).

Рабочая область

Рабочая область — страница, которую условно можно разделить на две основные части, панель управления и область компонентов. Давайте рассмотрим панель управления более детально.

Панель инструментов QWMP

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

Интервал для графиков QWMP

Синхронизация графиков рабочей области позволяет Вам смотреть на значения на разных графиках в один и тот же момент времени.

Синхронизация графиков QWMP

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

Перезагрузка страницы QWMP

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

QiWeal сервис API

Проекты

Для доступа к API раздела "Проекты", Вам необходимо сделать GET запрос по указанным URL'ам ниже, при этом передав в заголовке параметр "Project" или "Project" и "Table" с хэш-идентификатором в зависимости от того, какую информацию Вы хотите получить. Примеры:

      curl -H "Project: {prj-hash}" https://qiweal.com/api/project/info
    
      curl -H "Project: {Project-hash}" -H "Table: {Table-hash}" https://qiweal.com/api/table/info
    
      curl -H "Project: {Project-hash}" -H "Table: {Table-hash}" https://qiweal.com/api/table/data
    

Варианты ответа:

      {
  "name":"QiWeal Test",
  "description":"Проект для тестов QiWeal",
  "members":1,
  "createdTime":"2020-02-10T08:40:49.000+0000",
  "lastUpdate":"2020-02-11T15:56:01.000+0000"
}
    
      {
  "name":"QiWeal Table",
  "description":"Тестовая таблица",
  "countRows":0,
  "createdTime":"2020-02-11T15:56:01.000+0000",
  "lastUpdate":"2020-02-11T15:56:01.000+0000"
}
    
      [
  {
    "data":"Example data ...",
    "createdTime":"2020-02-26T19:07:26.000+0000",
    "lastUpdate":"2020-02-26T19:20:33.000+0000"
  },
  {
    "data":"Example data ...",
    "createdTime":"2020-02-26T19:20:33.000+0000",
    "lastUpdate":"2020-02-26T19:20:33.000+0000"
  }
]
    

Хэш-идентификаторы Вы можете посмотреть на странице "Настройки проекта" или "Настройки таблицы".

В случае ошибки Вы получите 401/402 HTTP-статус в ответе.

Сервера

Для доступа к API раздела "Сервера", Вам необходимо сделать GET запрос по указанным URL'ам ниже, при этом передав в заголовке параметр "QAuth" с персональным хэш-идентификатором. Примеры:

      curl -H "QAuth: {user-hash}" https://qiweal.com/api/server/{ip}/{port}
    
      curl -H "QAuth: {user-hash}" https://qiweal.com/api/server/8.8.8.8/80
    

Варианты ответа:

      // Все сетевые метрики представлены в миллисекундах
{
  "ip":"xxx.xxx.xxx.xxx",
  "port":443,
  "latency":1,
  "latencyMin":1,
  "latencyMax":16,
  "tcpHandshakeTime":1,
  "tcpHandshakeTimeMin":1,
  "tcpHandshakeTimeMax":49,
  "createdTime":"2020-02-05T13:07:13.000+0000",
  "lastUpdate":"2020-02-26T17:24:20.000+0000",
  "serverUptime":"100%",
  "serverLastDownTime":"-",
  "tcpHandshakeTimeAvg":25,
  "latencyAvg":8
}
    

Хэш-идентификатор Вы можете посмотреть на странице "Сервера", "URL'ы" или "APIs".

Внимание: запрашиваемый сервер должен быть добавлен через веб-интерфейс, только в таком случае данные по серверу могут быть получены через API. В случае ошибки Вы получите 401/402 HTTP-статус в ответе.

URL'ы

Для доступа к API раздела "URLs", Вам необходимо сделать GET запрос по указанным URL'ам ниже, при этом передав в заголовке параметр "QAuth" с персональным хэш-идентификатором и параметр "QURL". Примеры:

      curl -H "QAuth: {user-hash}" -H "QURL: {url}" https://qiweal.com/api/url
    
      curl -H "QAuth: {user-hash}" -H "QURL: https://example.com" https://qiweal.com/api/url
    

Варианты ответа:

      // Все сетевые метрики представлены в миллисекундах, а размеры в байтах
{
  "url":"https://qiweal.com",
  "ip":"212.227.10.88",
  "dnsLookupTime":1,
  "latency":1,
  "latencyMin":1,
  "latencyMax":17,
  "tcpHandshakeTime":1,
  "tcpHandshakeTimeMin":1,
  "tcpHandshakeTimeMax":51,
  "httpCode":200,
  "pageTitleText":"Производительность и мониторинг веб-сайта/сервера | QIWEAL",
  "requests":50,
  "pageLoadTime":1325,
  "pageLoadTimeMin":500,
  "pageLoadTimeMax":2718,
  "pageSize":2784277,
  "createdTime":"2020-02-05T13:07:27.000+0000",
  "lastUpdate":"2020-02-26T17:44:19.000+0000",
  "latencyAvg":9,
  "tcpHandshakeTimeAvg":26,
  "urlUptime":"99.25%",
  "urlLastDownTime":"2020-02-17 14:26:23.0"
}
    

Хэш-идентификатор Вы можете посмотреть на странице "Сервера", "URL'ы" или "APIs".

Внимание: запрашиваемый URL должен быть добавлен через веб-интерфейс, только в таком случае данные по URL'у могут быть получены через API. В случае ошибки Вы получите 401/402 HTTP-статус в ответе.

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

Для доступа к API раздела "APIs", Вам необходимо сделать GET запрос по указанным URL'ам ниже, при этом передав в заголовке параметр "QAuth" с персональным хэш-идентификатором и параметры "QMethod" и "QURL". Примеры:

      curl -H "QAuth: {user-hash}" -H "QMethod: {http method}" -H "QURL: {url}" https://qiweal.com/api/test-api
    
      curl -H "QAuth: {user-hash}" -H "QMethod: {get/post/head}" -H "QURL: https://example.com" https://qiweal.com/api/test-api
    

Варианты ответа:

      // Все сетевые метрики представлены в миллисекундах, а размеры в байтах
{
  "url":"https://qiweal.com/api/url",
  "method":"GET",
  "ip":"212.227.10.88",
  "dnsLookupTime":7,
  "latency":1,
  "tcpHandshakeTime":1,
  "httpStatus":200,
  "pageLoadTime":175,
  "pageSize":606,
  "contentType":"application/json",
  "respBody":"{\"url\":\"https://qiweal.com\",\"ip\":\"212.227.10.88\",\"dnsLookupTime\":9 ... }",
  "createdTime":"2020-02-05T13:17:27.000+0000",
  "lastUpdate":"2020-02-26T18:35:35.000+0000",
  "apiLastDownTime":"2020-02-17 14:26:22.0",
  "apiUptime":"99.25%"
}
    

Хэш-идентификатор Вы можете посмотреть на странице "Сервера", "URL'ы" или "APIs".

Внимание: запрашиваемое API должно быть добавлено через веб-интерфейс, только в таком случае данные по тестируемому API могут быть получены через API нашего сервиса. В случае ошибки Вы получите 401/402 HTTP-статус в ответе.