Создание веб-приложения для IoT. Урок 1.

Не так давно мы придумали конструктор «LS Monitoring» для «интернета вещей» и выпустили серию уроков, в которых показали, как работать с конструктором на примере создания системы мониторинга температуры через интернет. Для того, чтобы управлять системой мы сделали web-приложение LS Cloud.

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

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

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

Структура WEB-сервера

Вспомним схему взаимодействия передающего устройства и пользователя с сервером из предыдущих  уроков:

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

Основные компоненты, из которых состоит сервер показаны на схеме:

Говоря простым языком, веб-сервер — это компьютер, на котором установлено ПО с поддержкой протокола HTTP, с помощью которого он обменивается информацией со своими клиентами.

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

Серверные скрипты

Скрипты — это текстовые файлы, которые содержат программный код. Мы будем писать наши скрипты на языке php.

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

Результатом работы скрипта может быть изменение данных в БД или(и) HTML-код, который будет возвращён клиенту в ответе его на запрос. Именно этот код мы видим в своём браузере. Кроме HTML-кода, сервер может вернуть ещё CSS-код и JavaScript-код.

CSS — это таблицы стилей, они задают всю «красоту» на странице, которую видит пользователь.

JavaScript-код — это тоже программа, но она выполняется уже браузером. JavaScript наделяет страницу «динамикой». Всё что крутится, вертится или проявляет иные признаки интерактивности — это результат работы JavaScript.

CSS и JavaScript — мы пока рассматривать не будем, т.к. красота это, конечно, дело важное, но не первостепенное. Тем более, что даже на чистом HTML можно сделать вполне достойно выглядящий интерфейс веб-приложения.

Планировщик задач

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

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

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

База данных

База данных — это программный компонент, обеспечивающий хранение информации, с которой имеет дело сервер.

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

Данные в базе расположены в виде таблиц. При проектировании БД пользователь устанавливает зависимости между таблицами со связанными данными. База данных обеспечивает целостность и непротиворечивость данных.

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

Теперь, когда мы рассмотрели основные компоненты сервера и их взаимодействие, давайте ещё раз вспомним систему мониторинга температуры и посмотрим, как работает её сервер.

Взаимодействие передающего устройства с сервером

Устройство посылает на сервер http-запрос:

GET /device_status.php?LOG= 1111&PAS=2222&BT=127 HTTP/1.1
HOST: t.lazysmart.ru

,где

• GET- это метод запроса (поговорим о нём позже)
• device_status.php — скрипт, который будет выполнен на сервере
• t.lazysmart.ru — доменное имя сервера, на котором находится веб-приложение.

После знака «?» идут параметры, которые устройство передаёт на сервер:

• LOG и PAS — логин и пароль для идентификации устройства
• BT — это текущая температура

Сервер, получая такой запрос запускает скрипт «device_status.php».

Этот скрипт делает следующее:

• Берёт значения параметров LOG и PAS и делает запрос к базе данных в поисках устройства, зарегистрированного с такими логином и паролем.
• Если устройство прошло авторизацию, скрипт берёт значение параметра BT (текущая температура, переданная устройством) и заносит её в БД.
• Затем скрипт «достаёт» из БД команду реле для этого устройства и формирует ответ для устройства: «COMMAND 1 EOC», где 1 или 0 — текущая команда реле.

Взаимодействие пользователя с сервером

Пользователь открывает веб-приложение в браузере компьютера, чтобы узнать текущую температуру. Далее происходит следующее:

• Пользователь вбивает в браузер адрес приложения.
• Браузер автоматически формирует http-запрос на сервер
• Сервер, получив запрос от браузера, запускает соответствующий скрипт.
• Этот скрипт забирает из БД все данные, относящиеся к этому пользователю и его устройству, и на их основе формирует страницу веб-приложения с данными о температуре, состоянии связи с устройством и т.д. и отправляет её браузеру пользователя в виде HTML-кода.

Заключение

Итак, в этом уроке мы рассмотрели структуру веб-сервера и принципы его взаимодействия с клиентами. Конечно, мы сделали это по упрощенной схеме, опуская сложные детали и не углубляясь в дебри. Более детально разберёмся уже на примерах, в процессе создания веб-приложения. В следующем уроке перейдём от теории к практике. Следите за обновлениями на LAZY SMART!