От переводчика. Итак, дорогие друзья, нам с вами всё-таки удалось совершить маленькое чудо — перевести на русский язык и сделать доступным для широкого круга русскоговорящих любителей электроники, микроконтроллеров и IT технологий, можно сказать, культовый курс по построению веб-серверов на Arduino.
Это стартовая площадка, которая даёт базовое понимание ключевых технологий: микроконтроллеры, сетевое взаимодействие, структура веб-страниц, HTML, CSS, JavaScript, Ajax, Wiring, C++ и т. д. и т. п. и позволяет в дальнейшем проектировать и создавать ваши собственные IoT системы.
В заключительной статье автор подводит итоги, обобщает данную на курсе информацию и даёт рекомендации по дальнейшему изучению этой темы.
Заключительная часть руководства по веб-серверам на Arduino состоит из нескольких частей в которых мы суммируем информацию о технологиях, рассматриваемых на этом курсе, и даём некоторые дополнительные сведения. Мы также даём ссылки на ресурсы с дополнительной информацией по теме и указываем направление дальнейшего движения.
❯ HTTP
Первой технологией, с которой следует ознакомиться при написании кода веб-сервера на котором размещаются HTML страницы, является протокол Hypertext Transfer Protocol (HTTP). Его работа обычно незаметна для пользователей, за исключением надписи http:// в адресной строке браузера. Работа протокола HTTP происходит как бы за кулисами системы.
Но поскольку мы создаём код веб-сервера, нам необходимо понимать как работает протокол HTTP. Когда пользователь вводит IP-адрес сервера в адресную строку браузера, браузер подключается к серверу Arduino, для чего отправляет HTTP запрос страницы по умолчанию («главной» или «домашней страницы»).
Веб-сервер Arduino должен ответить на этот HTTP запрос стандартным образом, в соответствии с протоколом, а затем отправить браузеру саму запрашиваемую страницу.
В первой части этого руководства объясняется как в скетче сервера Arduino обрабатывается такой HTTP запрос.
❯ HTML и XHTML
Каждая веб-страница представляет собой текстовый файл, написанный на языке Hypertext Markup Language (HTML). HTML структурирует веб-страницу, помечая, какая часть текста является абзацами, заголовками, кнопками и т. д.
Существует несколько версий HTML, а также несколько схожих языков разметки текста XHTML. XHTML также используется для создания веб-страниц, но имеет более строгий синтаксис, чем HTML. Например, все (X)HTML теги должны использовать строчные буквы, а HTML может использовать и прописные и строчные буквы.
Веб-страница может быть написана в любом из стандартов разметки текста и может быть как HTML, так и XHTML — пользователь, просматривающий веб-сайт не знает какой стандарт используется, если только он не посмотрит исходный код страницы.
HTML 5
В этом руководстве использовали код и примеры на HTML версии 5. Версия HTML или XHTML, используемая на веб-странице, указывается в самой первой строке её разметки. Во всех примерах этого руководства в верхней части HTML кода страницы использовалась следующая строка:
<!DOCTYPE html>
Это даёт браузеру узнать, что загружаемая веб-страница написана с использованием HTML 5.
XHTML 1.0
Другие стандарты HTML и XHTML используют другую разметку для первой строки веб-страницы. Например, strict (строгий) и transitional (переходный) варианты XHTML используют следующие строки соответственно (здесь они показаны в виде двух строк, обычно они пишутся одной строкой и разделяются пробелом):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 4.01
Далее показаны первые строки разметки для двух стандартов HTML для HTML 4.01 (strict и transitional):
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
❯ CSS
Каскадные таблицы стилей (CSS) используются для стилизации HTML элементов на веб-странице. Например, CSS можно использовать для изменения стиля, размера и цвета шрифтов. Также CSS можно использовать для изменения положения, размера и цвета прочих HTML элементов на странице.
В примерах этого руководства CSS код включался в HTML файлы и размещался между открывающими и закрывающими тегами style.
Обычно веб-сайты используют отдельный файл таблицы стилей (например, style.css), в котором содержится весь CSS код. Это позволяет использовать одну и ту же таблицу стилей для применения стилей сразу ко всем страницам веб-сайта.
Поскольку в примерах этого руководства мы в основном использовали отдельные страницы на сервере Arduino, то было проще включить описание стилей в сами эти страницы. Если требуется работа с более, чем одной веб-страницей, то при использовании этого метода необходимо будет скопировать описание стилей в начало каждой страницы. Преимущество использования отдельного файла описания стилей заключается в том, что его можно подключать к любой странице одной всего строкой.
В относительно медленном Arduino сервере более быстрый ответ можно получить, включив CSS стили в само тело страницы. Это связано с тем, что для получения страницы и CSS кода потребуется только один HTTP запрос.
❯ JavaScript и Ajax
Мы использовали JavaScript для реализации (скрытого) Ajax взаимодействия между с веб-страницей и Arduino сервером и обмена данными между ними.
Ajax позволяет обновлять только часть веб-страницы. Это уменьшает объем данных, которыми обмениваются браузер с Arduino сервером и ускоряет их обновление на странице, поскольку не требуется перезагрузка всей страницы.
Еще одним преимуществом использования Ajax является то, что веб-страница не «мерцает» при обновлении данных, как это происходит при обновлении всей страницы.
❯ HTML 5 Canvas
В HTML 5 появился тег Canvas. Этот HTML элемент позволяет JavaScript «рисовать» в соответствующей области веб-страницы.
Мы использовали HTML элемент Canvas с связке с JavaScript в компоненте Gauge (датчик) в 13 части этого руководства.
❯ Заключение
Большинство технологий, используемых для создания веб-страниц, представляют собой довольно обширные темы, каждой из которых посвящены целые книги.
Мы использовали только небольшую часть каждой из этих технологий, которые, надеемся, дали вам хороший старт и начальное понимание по созданию собственного веб-сервера на Arduino.
Насколько глубоко вы хотите изучить каждую из этих тем зависит от того, что вы хотите реализовать в своем веб-сервере и насколько хорошо вы хотите освоить каждую из этих технологий.
Существует множество ресурсов по созданию веб-страниц, описывающих тонкости использования HTML, CSS, JavaScript и Ajax, а также книг и специализированных учебников — просто поищите их в интернете или в книжных магазинах, чтобы найти более подробные руководства для дальнейшего изучения.
❯ От переводчика о заключительной части
Итак, курс закончен. Что же дальше? На самом деле этот курс можно сравнить с начальной школой, где даются базовые знания, например алфавита или таблицы умножения. Сама тема построения серверов на микроконтроллерах и вообще сетевого взаимодействия IoT систем, конечно же, гораздо обширнее и сложнее.
Но полученные знания уже сейчас позволяют вам создавать собственные веб-интерфейсы для ваших устройств и проектировать функциональные IoT системы. Я бы порекомендовал применять на практике полученные знания, создавать реальные DIY устройства и проекты и параллельно дальше изучать IT технологии, благо с таким фундаментом это уже не будет так сложно.
Часть 1, часть 2, часть 3, часть 4, часть 5, часть 6, часть 7, часть 8, часть 9, часть 10, часть 11, часть 12, часть 13, часть 14, часть 15, часть 16.
