web морда что это
Веб-интерфейс
Веб интерфейс – это среда взаимодействия пользователя и программы или приложения, запущенной на удаленном сервере. Чаще всего web interface применяется для работы с различными онлайн сервисами: начиная с электронной почти и заканчивая системами веб-аналитики. В некоторых случаях веб-интерфейс называется «Личным кабинетом» на каком-либо сайте, но не во все личные кабинеты – интерфейсы. Разберем понятие по частям. Приставка «веб» означает, что элемент работает удаленно от компьютера пользователя, на локальном или интернет-сервере. Взаимодействие с сервисом при этом происходит через «интерфейс» специальную графическую оболочку, состоящую из кнопок, окон, полей заполнения или любых других элементы. Разберем на примерах.
Веб-интерфейс электронной почты
Это самый распространенный случай применения web interface. Примерно 15-20 лет назад, электронная почта работала только через программу-клиент, которую пользователь устанавливал на свой компьютер. Со временем функции этих приложений перенесли в веб – теперь достаточно зайти на страницу сервиса электронной почти и зайти в свой кабинет. Веб-интерфейс электронной почты умеет все то же самое, что и программа-клиент: принимать, отправлять, обрабатывать, перенаправлять и сортировать письма. Сначала их стали использовать такие сервисы как Яндекс, Майл.ру и GMail, а затем их стали подключились и небольшие корпоративные серверы.
В веб-интерфейсе почты есть папки для разной почты: исходящей, входящей, удаленной и нежелательной. Для получения доступа к почтовому интерфейсу потребуется введение пароля, который был указан пользователем в момент регистрации почтового ящика.
WEB-интерфейс модема или роутера
Любое управляемое сетевое оборудование — это отдельный компьютер и обладает собственной операционной системой. Но она выполняет узко специализированные функции, и позволяет соединиться с сетью провайдера для подключения к интернету.
В самом начале в целях управления ею применялись: протокол и командная строка Telnet. Но в результате развития оборудования, чтобы пользователь мог осуществлять более простой процесс управления, на модеме или роутере был сделан отдельный сервер с полезной для потребителя командной web-оболочкой.
Здесь также присутствует и основное меню, из которого можно настроить устройство. В настоящий момент все современные сетевые устройства с наличием управляющей функции обладают собственным web-интерфейсом управления. В качестве хорошего примера выступают коммутаторы, видео-камеры, модемы, а также маршрутизаторы Zyxel, D-Link, TP-Link, Asus и др.
Веб-интерфейс хостинга
С ними обычно сталкиваются веб-мастера и пользователи, которые работают с сайтами: занимаются их созданием, продвижением, администрированием и др. Любой сайт в Интернете работает на конкретном www-сервере, который размещен на хостинге – специальной платформе, созданной под размещение сайтов. Эта платформа управляется с помощью веб-интерфейса, который называется “хостинг-панель”
Облачный веб-интерфейс
В последние 5-6 лет распространились облачные хранилища или просто «облака». После регистрации в сервисе пользователю бесплатно предоставляется место на удаленном жестком диске. Оно используется для хранения самой различной информации: документов, программ, фото, видео или музыкальных файлов. Она доступна из любой точки мира, где есть выход в Интернет. В том случае, когда бесплатно предоставляемого пространства становится недостаточно, то всегда можно докупить его дополнительный объем.
Облака становятся популярнее, потому что с ними удобно работать – нужные файлы доступны везде, где есть Wi-Fi, проводной интернет или покрытие мобильных сетей. В личном кабинете пользователя сервиса можно просматривать, создавать, удалять, копировать и редактировать файлы. Это и есть веб-интерфейс облака. В России чаще используются: Яндекс Диск, Google Drive, DropBox.
Устройства с управлением через веб-интерфейс
Автор: Николай Хабаров, IoT Google Developer Expert, эксперт по встраиваемым системам, DataArt.
В этой статье я расскажу, как создать собственное устройство с веб-интерфейсом, которое будет доступно в локальной сети. Веб-интерфейс будет показывать текущие данные с датчика Si7021: температуру и влажность.
Устройство работает на основе микроконтроллера ESP8266 (с Wi-Fi) и прошивки DeviceHive.
1. Установка и настройки прошивки
Прежде всего, необходимо залить прошивку DeviceHive в отладочную плату. Можно использовать любую плату ESP8266 с флэш-памятью объемом 4 Мбит (например, с модулем ESP-12E). Довольно популярные платы — NodeMCU Development Kit и Adafruit HUZZAH ESP8266 Breakout.
Можно использовать эти или любые другие платы с похожими характеристиками. Мы для примера взяли NodeMCU devkit, поскольку это — самый простой вариант использования чипа ESP8266.
Cледующий скриншот иллюстрирует успешную заливку прошивки:
После установки прошивки перезагрузите плату (для этого переподсоедините плату через USB-порт). Если прошивка заливается впервые, на модуле должен засветиться синий светодиод. Если прошивка уже устанавливалась раньше, три раза не спеша нажмите кнопку RESET на модуле, должен включиться синий светодиод.
Затем возьмите мобильный телефон или ноутбук (c Wi-Fi) и подключитесь к открытой беспроводной сети DeviceHive.
Диалог настроек микроконтроллера должен появиться на экране автоматически (в противном случае, воспользуйтесь этой ссылкой в браузере).
В диалоговом окне укажите имя Wi-Fi сети (SSID) и пароль. В поле DeviceID введите climate — это ID будет служить доменным адресом для веб-интерфейса устройства.
Оставьте пустыми поля: DeviceHipe API URL и Key.
Если ключ был введен (поле Key), потребуется авторизация в веб-интерфейсе (для простоты изложения и кода в статье этот случай мы не рассматриваем).
Пример диалога настроек приведен ниже:
После применения настроек (кнопка Apply), подсоедините какое-либо устройство с веб-браузером и поддержкой mDNS (для Windows OS поддержка mDNS может быть добавлена через стороннее приложение, например, можно использовать это приложение).
Если поддержка mDNS отсутствует, вместо локального URL используйте IP-адрес микроконтроллера.
Откройте веб-браузер по этой ссылке: http://climate.local. Веб-браузер должен показывать дефолтную страницу.
2. Подключение сенсора
Поскольку сенсор Si7021 использует интерфейс I2C, к плате его подключают по четырем проводам. Прошивка платы позволяет использовать любые разъемы GPIO (для I2C-линий SDA и SCL). Таким образом, сенсор можно подключить очень просто.
Подключите сенсор, как показано на фото:
Вы также можете использовать соединительные провода (для навесного монтажа) для подключения сенсора к плате (как показано на фото).
Примите во внимание, что выводы платы NodeMCU маркируются префиксом D. Например, маркировка D5 соответствует выводу GPIO14 микроконтроллера ESP8266, а D6 соответствует выводу GPIO12 микроконтроллера ESP8266.
3. Программное обеспечение
Теперь пришло время разработать кастомный веб-интерфейс для нашего устройства. Мы уже упоминали, что прошивка имеет веб-страницу (http://climate.local). Имеется очень простенький веб-сервер со страницей справки, демостраницами и RESTful API. У нас есть замечательная возможность загрузить кастомную веб-страницу во флэш-память и использовать наше устройство с собственным кастомным веб-интерфейсом.
Ниже мы приводим код, который позволит считывать и отображать данные сенсора.
Хотя код довольно простой, давайте все же разберем его построчно.
Строки 1–6:
Заголовки файлов, настройки viewport для мобильных устройств, подключение CSS и импорта JavaScript. Встроенные страницы микропроцессора содержат CSS и небольшую библиотеку JavaScript. В нашем примере используются эти ресурсы. Исходный код доступен здесь.
Строки 7–22:
Простой скрипт, который запускает метод send_command() из встроенной JavaScript-библиотеки (libs.js) в цикле (loop) с интервалом в секунду. Данный метод выполняет простой POST-запрос к следующему URL: http://climate.local/api/devices/si7021/read. Этот URL — часть локального RESTful API (микропроцессора).
Те же данные можно получить с помощью запроса GET в обычном браузере. Ответ дается в виде JSON, который содержит данные сенсора. Значения температуры и влажности отображаются на страницы с помощью JavaScript.
Строки 24–40:
Код самой HTML веб-страницы. Отдельные элементы страницы, такие как логотип DeviceHive, взяты из встроенных стилей.
Скопируйте код в буфер обмена и откройте редактор страницы: http://climate.local/editor.html.
Вставьте код в редакторе из буфера обмена.
Нажмите кнопку Flash — теперь наш код включен в прошивку микропроцессора.
Откройте в любом устройстве в сети Wi-Fi DeviceHive ссылку http://climate.local. Данные сенсора будут отображаться на странице.
Заключение
Прошивка DeviceHive позволяет создавать простые подключенные к облаку устройства. Дополнительно вы сможете легко добавить локальный веб-интерфейс, который можно использовать и отдельно, и вместе с подключением к облачному сервису. Содержание этой страницы может быть произвольным. Вы можете добавлять к странице сторонние компоненты (например, D3.js), как было сделано в этом примере, или отображать данные от нескольких сенсоров по локальной сети.
Подробная документация по прошивке DeviceHive доступна по этой ссылке.
Компьютерная грамотность с Надеждой
Заполняем пробелы — расширяем горизонты!
Что такое web интерфейс и как им воспользоваться
Старый добрый привычный способ работы с компьютером – это запустить на нем требуемую программу, и выполнить с ее помощью требуемую работу. Но теперь на смену этому подходу приходит другой – запустить сервис или приложение в сети Интернет, а не локально на своем компьютере.
Это работа с помощью так называемого «web-интерфейса», которая находит все более широкое распространение. Недалеко то время, когда работа с web-интерфейсом будет более распространена, чем пока еще привычная для многих локальная работа на компьютере.
Вы встречали такие выражения как «web интерфейс почты» или «зайти через веб интерфейс»? У многих пользователей возникает вопрос: что же это такое — веб интерфейс? И можно ли его «попробовать на зубок» простому человеку?
Web-интерфейс — это взаимодействие пользователя с нужным ему веб-сайтом через браузер.
В частности, web-интерфейс электронной почты представлен в виде обычного web-сайта (Яндекс, Гугл, Майл ру и т.п.), который предоставляет пользователю возможность работать с почтовым ящиком.
Конечно, при таком взаимодействии требуется, чтобы устройство пользователя (компьютер, планшет, смартфон) было подключено к Интернету.
В дальнейшем будем считать, что сайт — это то же самое, что веб-сайт.
Чтобы зайти через веб-интерфейс, нужно
Рассмотрим конкретные примеры. Как известно, с ними всегда все проще и понятнее.
Web интерфейс почты
Начнем с почты, ибо у всех есть электронная почта, и все периодически просматривают свой почтовый ящик.
Можно заходить в свой почтовый ящик двумя способами:
Начинающие пользователи обычно используют первый способ.
Рис. 1 Заходим в Яндекс.почту через веб-интерфейс
Чтобы зайти в web-интерфейс почты:
В этой специальной форме, как правило, есть кнопки
По кнопке «Регистрация» заходим только в случае, если Вам нужно завести новую почту. Если почта уже есть, а новый почтовый ящик не требуется, то тогда после ввода логина и пароля щелкаем по кнопке «Войти».
После этого в окне браузера загрузится основная Web-страница почтового ящика. На ней будут размещены ссылки на дополнительные веб-страницы, которые предназначены для просмотра входящей почты (цифра 1 на рис. 2), для проведения настроек почтового ящика (цифра 2 на рис. 2) и другие.
Рис. 2 Вид почтового ящика на Майл ру после входа через веб-интерфейс
Веб интерфейс в Облаках
Есть облачный Яндекс.Диск, о котором я писала ЗДЕСЬ. С ним можно работать через веб-интерфейс или, иначе говоря, в режиме онлайн, при подключенном Интернете.
Второй способ работы с Яндекс.Диском состоит в том, чтобы использовать специальное приложение, иначе говоря, специальную программу. Для этого приложение нужно скачать и установить на своем компьютере.
Не все любят без особой на то необходимости устанавливать дополнительные программы, к тому же, место на винчестере у пользователей ограничено. По этим причинам многие пользуются Яндекс.Диском через веб-интерфейс. Правда, при таком подходе «тяжелые» файлы не получится загрузить на Яндекс.Диск. Но в любом вопросе есть свои плюсы и минусы.
Все написанное выше в полной мере можно отнести к веб-интерфейсу Облака Майл ру.
Рис. 3 Заходим в Облако Майл ру через веб интерфейс
В Облаке также есть приложение, которое можно установить на своем компьютере. А можно работать с Облаком через веб-интерфейс. Для этого в браузере открываем сайт Облака (цифра 1 на рис. 3), а затем при первом посещении жмем на кнопку «Регистрация». Если уже есть логин и пароль на Майл ру, то нажимаем на кнопку «Войти» (цифра 2 на рис. 3).
Как зайти в веб интерфейс модема
Рис. 4 Примеры модема Yota и модема Мегафона
Речь пойдет о модемах, аналогичных представленным на рисунке 4. Это модемы Yota, Мегафона, Билайна, МТС и т.п. Другие варианты модемов здесь не рассматриваем.
Чтобы зайти в web интерфейса модема, выполняем все те же 3 шага:
Допустим, у меня модем Yota. В таком случае web интерфейс модема – это мой личный кабинет на сайте Yota (рис. 5).
после чего можно управлять своим модемом. Это оплата, выбор и регулировка скорости и продолжительности работы модема Yota и т.п.
Рис. 5 Заходим через web интерфейс модема Yota
Если у Вас модем Мегафона, то Вам следует зайти на сайт Мегафона. И там при первом входе надо пройти регистрацию, а при всех последующих заходах вводить свой логин и пароль от личного кабинета на сайте Мегафона. Подробнее о личном кабинете Мегафона смотрите ЗДЕСЬ.
Веб интерфейс роутера
Web-интерфейс применяется и для управления различными сетевыми устройствами, например, для управления роутерами. Роутер – это устройство, предназначенное для «размножения» Интернета, например, в пределах квартиры или офиса. При его первоначальном подключении требуется ввести специальные настройки, которые удобно делать с помощью web-интерфейса.
Делается это не так просто, чтобы это можно было описать в одной-двух фразах. Поэтому я предлагаю заинтересованному читателю посмотреть статью «Как провайдер заставил меня перенастроить роутер D-Link», где это более подробно описано. Для этого кликните по ЭТОЙ ссылке.
Сложно однозначно словами передать чувство успеха, которое приходит после удачной настройки подобного устройства, когда все заканчивается благополучно, и Интернет «раздается» для компьютеров.
P.S. Что есть еще полезного:
Нашли ошибку? Выделите фрагмент текста и нажмите Ctrl+Enter.
Что такое Веб-интерфейс и для чего он нужен?!
Сейчас при общении на форумах и в специализированных чатах часто можно услышать слово веб-интерфейс.
Например, наиболее часто употребимые варианты: веб-интерфейс роутера, модема, сайта, почты или облачного хранилища. Но вот что это такое — уверенно ответит не каждый. А ведь все не так уж сложно и заумно.
Мы с Вами отлично знаем что такое программа и даже начинающий более-менее внятно скажет что это — это определенный выполняемый на конкретном компьютере для получения определенного результата. Так вот сейчас прогресс дошел до того что многие программы, приложения и даже игры выполняются не на Вашем ПК, а на удаленном сервере. Чтобы увидеть результат — надо подключиться к серверу. это можно сделать с помощью программы-клиента или онлайн-сервиса. Вот как раз для того, чтобы человек мог пользоваться онлайн-сервисом и используется Веб-интерфейс (от англ. Web Interface). В народе его чаще принято называть «Личный кабинет», что не всегда правильно.
Как Вы могли заметить само название состоит из двух слов. Слово «Веб» подразумевает, это либо элемент глобальной сети Интернет, либо он работает с помощью специального веб-сервера в локальной сети. Слово Интерфейс означает дружественную человеку среду, оболочку или, простыми словами, внешность сервиса — окна, кнопки, поля, текстовая или графическая информация. Давайте рассмотрим самые часто встречающиеся примеры подробнее.
Веб-интерфейс роутера или модема
Каждое управляемое сетевое устройство — это фактически самостоятельный компьютер и он имеет свою операционную систему. Правда, не такую многофункциональную, как Windows, а узкоспециализированную, рассчитанную на соедтнение с сетью провайдера и раздачу Интернета подключенным клиентам. В начале, для управления ею использовалась командная строка и протокол Telnet. Но затем, по мере развития оборудования, для того, чтобы пользователю было проще ею управлять, на роутере или модеме сделали отдельный сервер на котором, в свою очередь, работает дружественная пользователю командная web-оболочка. Вот так выглядит вход в веб-интерфейс Вай-Фай роутера:
А вот так — статусная страница маршрутизатора или модема:
Здесь же будет и главное меню из которого есть доступ к настройке любой опции устройства.
На сегодняшний день у любого современного управляемого сетевого устройства есть свой web-интерфейс управления. Яркий тому пример — видео-камеры, коммутаторы, модемы и маршрутизаторы D-Link, Asus, Zyxel, TP-Link и т.п.
Веб-интерфейс электронной почты
На сегодняшний день электронная почта — это самый популярный онлайн-сервис в Интернете, который популярнее даже социальных сетей.
Лет 15-20 назад, без специальной программы-клиента работа с емайлом не представлялась возможным. Чтобы уйти от этого анахронизма были разработаны специальные станицы-оболочки из которых можно делать всё то же самое, что и из клиентского приложения: отправлять и принимать письма, обрабатывать их, сортировать и перенаправлять. Сначала на это перешли крупнейшие сервисы типа Майл.ру, Яндекс и GMail, а затем уже даже и мелкие корпоративные серверы. Вот так, к примеру, выглядит онлайн-оболочка одного из популярнейших почтовиков России:
Она то и называется «веб-интерфейс почты». Здесь есть папки для входящей, исходящей, нежелательной и удаленной корреспонденции. Отсюда Вы можете отправлять и принимать письма.
Вход в почтовый веб-интерфейс закрыт паролем, который Вы указали при регистрации ящика.
Если Вы не знаете как завести свою свою электронную почту — читайте подробную инструкцию.
Облачный веб-интерфейс
Последние несколько лет в глобальной паутине активно развиваются облачные хранилища данных, а проще говоря — облака. Каждый желающий при регистрации получает там определенный кусочек пространства бесплатно и хранить там информацию разного типа: программы, документы, видео, фото или музыку. Доступ к ней можнл получить из любого места в мире при условии что там есть выход в Интернет. Если предоставляемого бесплатного объёма мало — можно докупить еще. Это очень удобно и потому облака становятся всё популярнее и популярнее. Для работы с информацией у каждого пользователя есть личный кабинет с необходимым набором инструментов для манипуляций с файлами — создание, просмотр, редактирование, копирование и удаление. Это и есть веб-интерфейс облака. Вот наглядный пример — облако@mail.ru:
Так же, в числе популярных в России, можно выделить Google Drive, Яндекс Диск, DropBox.
Веб-интерфейс хостинга
Этот вид командной оболочки больше знаком веб-мастерам и все тем, кто работает с сайтами — создаёт, администрирует, продвигает и т.п.
Каждый сайт в Интернете работает на специальном www-сервере, который, в свою очередь, крутится на специализированной компьютерной платформе — хостинге, разработанную и настроеную под размещение сайтов. Управление этой платформой осуществляется через специальный веб-интерфейс, который ещё называют Хостинг-Панель. Вот пример такой системы — веб-интерфейса DirectAdmin:
У хостеров так же популярны такие оболочки, как CPanel, Plesk и ISPmanager. Некоторые крупные компании разрабатывают для этих целей свой отдельный программный комплекс.
С помощью такого веб-интерфейса можно управлять работой сервера, мониторить его состояние, смотреть логи и сохранять резервные копии.
Все вебморды в одной. virtualhost и proxy_pass в nginx для дома.
В этой статье я хотел бы поделиться опытом, как организовать доступ к Web-интерфейсам различных домашних качалок через один единственный проброшеный наружу порт. Делать будем под винду (на Win32 порту nginx), но точно также можно сделать под unix.
Где это может понадобиться? Очень простой пример, состоящий из двух условий:
— У меня дома стоит СТРИМ, который блокирует входящий 80 порт
— У меня на работе открыты наружу только порты 443, 80, 5190.
— Как итог: я могу достучаться домой только к 2 сервисам, один из которых у меня SSH, и один остается свободным. Задача сводится к тому, чтобы завернуть все WEB-морды в один сайт, ибо замучался я с SSH-туннелингом. Универсального интерфейса, конечно же, не получится, так что их надо логически разделить.
Ничего революционного я не скажу, лишь подскажу, как это сделать. Весь рассказ основывается на следующих вещах, но при желании вы с легкостью подключите любой другой веб-интерфейс:
— У вас есть динамический реальный IP
— DynDNS
— nginx для Win32
— µTorrent
— µTorrent WebUI
— eMule
DynDNS — принцип, регистрация и настройка
Принцип работы DynDNS очень прост: программа на компьютере, маршрутизаторе или модеме периодически обращается к сервису DynDNS. Сервис смотрит IP, с которого произошло обращение, и привязывает зарегистрированную вами бесплатную DNS-запись к IP, с которого произошло обращение. Таким образом, адрес вида myname.dyndns.org всегда указывает именно на ваш внешний IP-адрес, даже если у вас он динамический.
Включаем, вводим свой логин, пароль, и уже зарегистрированное на сайте DynDNS.org DNS-имя, которое мы хотим задействовать, и вуаля, теперь вы можете обращаться к своему домашнему роутеру по DNS-имени, например, vpedalkin.dyndns.org.
Настроить WEB-интерфейсы всех программ, которые вам нужны, предлагаю самостоятельно, благо, инструкций по этой теме очень много.
WebUI uTorrent нам следует настраивать на альтернативном порту и настраивать фильтрацию по IP. Так как сервер nginx мы будем ставить на той же машине, на которой стоит uTorrent, то делаем фильтрацию по 127.0.0.1 (т.е. только с этой машины). Альтернативный порт мы используем для того, чтобы у нас Web-морда не торчала наружу в двух экземплярах — через nginx и через проброшенный до uTorrent порт.
Подсказка для тех, кто не настраивал uTorrent WebUI никогда: Нужно положить скачанный с сайта uTorrent файл webui.zip, не распаковывая, в папку профиля. Чтобы ее открыть, нажмите Win + R и введите %USERPROFILE% (с процентиками) и нажмите ОК.
Вебморду eMule настраивать легче легкого: прописываем порт, пароль и все.
Я использовал порт 8081 для uTorrent и 8082 для eMule.
Переходим к настройке nginx
К моему большому сожалению, nginx под Win32 официально нет, но есть его сторонняя сборка на cygwin. Из основных недостатков можно отметить то, что nginx win32 ставится только в C:\nginx и никуда его оттуда не денешь.
Итак, устанавливаем nginx, открываем C:\nginx\conf\nginx.conf. Я Предпочитаю использовать редактор AkelPad — он очень похож на блокнот, но хорошо дружит с кодировками и мелкими рюшечками.
В моем случае HTTP-сервер у меня висит на порту 5190, ибо 443 занимать было жалко, да и неудобно это было мне — настраивать секурный сервер, так как uRemote, которой я пользуюсь, не поддерживает HTTPS-соединений.
Полный пример моего конфига здесь.
В общем случае мы добавляем директивы Server, например так:
server <
listen 5190;
server_name emule.vpedalkin.xxxxdns.org;
access_log logs/emule.log main;
location / <
#Аккуратно тут поправьте URL при копировании
proxy_pass h ttp://127.0.0.1:8082/;
proxy_buffer_size 8k;
proxy_buffering off;
proxy_connect_timeout 3;
proxy_ignore_client_abort off;
>
>
Обращаю ваше мнимание: для разделения мы используем Virtual Hosts. Таким образом сервер, в зависимости от того, как к нему обращаются (как к utorrent.vpedalkin.dyndns.org или emule.vpedalkin.dyndns.org), выполняет транспорт к определенному серверу (до uTorrent или eMule соответственно).
Не забываем поправить в конфиге все listen на тот порт, который вы собираетесь открыть наружу для веб-сервера. Также замените все vpedalkin.xxxdns.org на свои собственные реквизиты, зарегистрированные в DynDNS. Обращаю внимание что emule.vpedslkin.dyndns.org не надо регистрировать дополнительно — благодаря той галочке, которую мы поставили в свойствах записи на сайте DynDNS.org в самом начале, все это само будет перебрасываться туда же, куда и сам vpedalkin.dyndns.org
Проброс
Результат
Был рад, если кому-то эта информация покажется интересной.