Предмет Web-программирования. Современные технологии разработки Web-приложений
презентация к уроку

Слайд 1

Предмет Web- программирования. Современные технологии разработки Web -приложений

Слайд 2

Динамические и интерактивные приложения, которые используются непосредственно из поиска в браузере, называются веб-приложениями . Эти приложения не занимают места во внутренней памяти устройства, а хранятся на серверах и доступны при наличии подключения к сети Интернет. Разработка веб-приложений - это процесс создания веб-приложений, который начинается с определения цели, проектирования решения, создания прототипа, выбора структуры и, наконец, разработки и тестирования приложения. Веб-программирование — раздел программирования, ориентированный на разработку веб-приложений (программ, обеспечивающих функционирование динамических сайтов Всемирной паутины).

Слайд 3

Выделяют 3 типа приложений:

Слайд 4

Десктопные приложения предполагают установку клиента на стороне пользователя. В зависимости от типа операционной системы, процессора, видеокарты и других параметров могут потребоваться разные версии программы. Это создает определенные неудобства как разработчикам (им требуется постоянно выискивать баги в разных средах, расширять объем кода для учета всех возможных комбинаций железа клиента), так и пользователям (необходимо скачивание постоянных обновлений, новое железо с той операционной системой, которую поддерживает приложение). Мобильные приложения заточены исключительно для смартфонов и планшетов с учетом установленной там системы ( Android , iOS и др.). Это также добавляет боли разработчикам софта. Важно отметить, что многие мобильные приложения фактически являются web -приложениями (о чем подозревают не все пользователи), так как возможности «движков» браузеров это позволяют. Наиболее динамично на сегодня развиваются web -приложения , так как они для своей работы требуют только установленный браузер на клиентской стороне. Они: Могут работать как на смартфоне, так и персональном компьютере, Практически независимы от железа По функционалу скоро перестанут уступать десктопным аналогам.

Слайд 5

Взаимодействие внутри web- приложения

Слайд 6

Пятиуровневая структура сети Представленные слои демонстрируют уровни сетевых взаимодействий (от радио или световых сигналов до процесса передачи сообщения между двумя приложениями через HTTP-протокол ).

Слайд 7

1. Физический уровень Физический уровень является самым низким. Он связан непосредственно с законами физики. Например, через оптоволоконный кабель передаются пучки света, которые интерпретируются машиной как нули или единицы. Любое ваше действие в Интернете в конце концов становится набором сигналов, которые через кабель или радиоволны транслируются между устройствами. На физическом слое применяется ряд протоколов: 1000BASE-SX , 802.15 и др. Протоколы необходимы для того, чтобы сетевые устройства могли понимать друг друга, коммуницировать между собой на одном языке. Каждый уровень имеет свои протоколы.

Слайд 8

2. Канальный уровень Канальный уровень отвечает за соединение устройств одной сети (локальной). Здесь используется два популярных протокола: - Ethernet (когда компьютеры соединяются кабелем) - WiFi (беспроводное соединение). Чтобы разные устройства могли различаться, они имеют MAC-адреса , которые представляют собой уникальные идентификаторы. В мире практически нет двух гаджетов с одинаковыми MAC-адресами . Пример MAC-адреса : 12:FA:A9:11:BC:DE (шесть 16-ричных однобайтных чисел, разделенных двоеточием).

Слайд 9

3. Сетевой уровень Сетевой уровень – необходимость функционирования Интернета, дает возможность общения устройствам из разных сетей. Использование IP-протокола позволяет присваивать сетевым устройствам определенные адреса и определять их принадлежность к конкретной сети. IP-адрес состоит из четырех однобайтных чисел, которые записываются в десятичной системе. Типичный пример: 192.16.0.1 . На основании адресов устройств сети мы можем подключаться к сайтам, серверам, почтовым клиентам и получать требуемую информацию. Существует 2 протокола IP : 4-ой и 6-ой версий. В ближайшем будущем произойдет полный переход на последнюю версию, так как версия IPv4 уже не справляется с растущим количеством компьютеров и гаджетов с доступом к сети (более того, в 2020 году в мире закончились свободные IP-адреса ).

Слайд 10

4. Транспортный уровень Транспортный уровень позволяет идентифицировать адресатов и не смешивать потоки данных. На любом ПК или мобильном устройстве может одновременно работать несколько приложений, которым требуется сетевое подключение. Чтобы трафики не смешивались, каждая программа использует для сетевого общения определенный порт. Например, браузер для открытия сайта использует порт 80 , а для соединения с базой данных может открываться порт 8080 . Наиболее популярны на транспортном уровне 2 протокола: TCP и UDP . TCP гарантирует получение всей передаваемой информации (иначе возникнет ошибка), а UDP такой гарантии не дает. Так, когда вы скачиваете книгу с сайта, применяется протокол TCP (разве нужна кому-то книга кусками?), а когда смотрите стрим на ютубе , то достаточно UDP протокола (если потеряется несколько кадров, вы этого не заметите, зато качество трансляции будет высоким).

Слайд 11

5. Уровень приложений Уровень приложений – это, по факту, то, с чем непосредственно работает программист большую часть времени. Главная задача данного слоя – предоставить клиенту удобный интерфейс для взаимодействия с сетью и устройствами. Здесь используется огромное количество разнообразных протоколов, среди которых: 1. HTTP (применяется браузером для получения данных с Интернета), 2. SMTP (для почтовых сервисов), 3. FTP (загрузка файлов), 4. BitTorrent (пиринговый протокол), 5. SSH (защищенное соединение).

Слайд 12

Сетевые сервисы Сетевые сервисы позволяют упростить взаимодействие компьютеров в сети с точки зрения человека. Это связано как с оптимизацией настройки сетей, так и безопасностью работы в Интернете. Рассмотрим основные из них, так как они важны для понимания работы Всемирной паутины и локальных сетей. 1 – DNS ( Domain Name System , система доменных имен) Любой сайт в сети имеет определенный адрес. Так, когда в браузере вы набираете строку google.com , то попадаете на вполне конкретный сайт. Однако как мы выяснили ранее, IP-адреса – это числа, и никаких человекоудобных форм представления у них нет. Так, главная страница Гугл на самом деле имеет адрес 173.194.222.101. Так каким же образом веб-браузер понимает написанные нами буквы google.com ? За это стоит благодарить DNS-сервера . Они хранят все имена сайтов и соответствующие им IP-адреса .

Слайд 13

2 – NAT ( Network Address Translation , преобразование сетевых адресов) Одна из главных проблем в Интернете – безопасность. Никто не хочет, чтобы к его компьютеру или смартфону получил доступ злоумышленник. А ведь зная ваш адрес, сделать это достаточно просто. К чему это может привести, объяснять не требуется (кража паролей, кредитных карточек, платежных данных, личной информации). Когда вы запрашиваете адрес какой-то страницы в Интернете, то передаете, в том числе, свой адрес. Как же защититься? Разработчики сервиса NAT это предусмотрели. На самом деле запрос к удаленному серверу идет не от имени вашего ПК. Ваш реальный адрес маскируется роутером или файрволом и передается в скрытом виде. Особенно это удобно для крупных компаний, где компьютеры объединены в сеть (запрос будет отправляться не от отдельного ПК, а от общего роутера, поэтому узнать адрес конкретной машины практически невозможно).

Слайд 14

3 – DHCP ( Dynamic Host Configuration Protocol , протокол динамической настройки узла) Любой компьютер в сети обязан иметь уникальный IP-адрес . В разных сетях адреса могут пересекаться, но в локальной или корпоративной – никак. Представим ситуацию, когда у предприятия имеется большое количество ПК, которые имеют выход в сеть. Перед администратором сети стоит непосильная задача: настроить каждую машину, постоянно следить за тем, чтобы не было повторяющихся адресов, так как начнется коллизия данных. Компания Microsoft разработала технологию DHCP , которая позволяет динамически присваивать IP-адрес из диапазона доступных. Задача существенно упрощается: администратору требуется лишь один раз задать диапазон значений, а они сами будут подставляться по мере обращения компьютера к сети. К слову, даже ваш ПК не имеет постоянного IP-адреса , если он не является статическим. Другими словами, если вы не задавали вручную IP-адрес , то ПК получает динамический адрес от DHCP-сервера . При перезагрузке роутера он может меняться.

Слайд 15

Этапы взаимодействия пользователя с функционалом веб-приложения

Слайд 16

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

Слайд 17

1. Серверные web -приложения Серверные web -приложения работают на удаленных компьютерах. Для их написания используют такие языки программирования: PHP , Python , Java , Ruby , C# и др. Они практически не требуют пользовательского вмешательства. Переход между страницами вызывает генерацию нового контента, который отображается у клиента. Пример чисто серверного приложения – push -уведомления (от почтовых сервисов, мессенджеров, операторов связи) в смарфонах . Клиент получает информацию, что появилось новое сообщение, письмо, изменения в тарифе, не предпринимая для этого никаких действий.

Слайд 18

2. Клиентские web -приложения Клиентские приложения в чистом виде не требуют серверной части и обходятся возможностями JavaScript , используя в качестве оболочки браузер пользователя. Они не сохраняют результат своей работы дольше одной сессии. Типичные примеры таких приложений: простые игры, браузерный фоторедактор.

Слайд 19

3. SPA приложения Single page application ( SPA , одностраничные веб-приложения) реализуют сложный функционал в рамках одного окна браузера без перезагрузки. Динамическое обновление содержимого страницы достигается технологией AJAX ( Asynchronous JavaScript and XML , асинхронный JavaScript и XML ). В ответ на действия пользователя (прокрутка страницы, нажатие кнопок, заполнение формы, движение ползунка и т.п.) содержание страницы будет меняться. Неопытный пользователь может даже посчитать, что столкнулся с десктопным приложением, так как все изменения происходят практически моментально. К слову, многие мобильные приложения используют такой подход. В сочетании с фреймворками JavaScript ( Angular , React , Vue ) работа таких программ становится максимально плавной. Практически все почтовые сервисы являются SPA .

Слайд 20

4. MPA приложения Multi Page Application ( MPA , многостраничные web -приложения) применяются для построения сложных систем. В данном случае любые изменения в данных приводят к полной перезагрузке страницы. Когда имеется большой массив данных и контента, разнообразие представляемых сведений, MPA подходят лучше всего. Несмотря на то, что они требуют больших объемов ресурсов для реализации и существенно дороже, другие виды web -приложений их заменить не могут. Однако тенденции показывают, что общая доля MPA постепенно снижается. Стандартный пример такого приложения – интернет магазины с большим массивом товаров ( Amazon , Citilink и т.п.).

Слайд 21

5. PWA приложения Progressive Web Application ( PWA , прогрессивные web -приложения) – новый способ «подачи» web -сервисов, который максимально сближает их с обычным, привычным десктопным приложением, но на качественно более высоком уровне. Представим ситуацию: человек посещает некоторый сайт, который предлагает ему установить его на другие устройства. Теперь и на ПК, и в телефоне вы сможете получать уведомления, работать оффлайн, независимо от модели устройств и их мощностей. Главная область применения таких приложений – мобильные устройства. Пользователю больше не нужно входить на AppStore или PlayMarket , чтобы скачать программу – все сделает браузер автоматически (а еще создаст ярлык на рабочем столе, позволит работать с собой без доступа к сети и т.д.). Фактически, мы получаем аналог обычного приложения с тем же функционалом и множеством плюсов (для PWA не требуется лишняя память смартфона, ради которой приходится удалять фото и видео, они весят менее 1 Мб). При появлении нового контента PWA отправляет пользователю push -уведомление. Следует признать, что в скором времени эти приложения смогут заменить практически все мобильные аналоги. Хоть технология и появилась в 2007 году в компании Apple , изначально она «не зашла» в силу слабой « прогретости » публики, зато ко второй половине 2016 года Google развил ее и сделал популярной. PWA-версии приложений встречаются у многих компаний (тот же Aliexpress почти в 2 раза повысил конверсию от новых посетителей благодаря этому).

Слайд 22

Принцип работы web -приложений Для понимания функционирования web -приложения следует рассмотреть его основные структурные компоненты. В сети устройства, имеющие выход в Интернет, принято называть узлами. Ими могут быть: - Компьютеры, - Мобильные аппараты - Роутеры. Чтобы описать работу сетевых приложений следует разделить узлы на серверы и клиенты. За серверную часть отвечает backend -разработка , а за клиентскую – frontend .

Слайд 23

Клиентская часть ( Frontend ) Frontend подразумевает создание визуальной части приложения, которая выполняет функции на стороне пользователя. Это все то, что посетитель сайта видит своими глазами, с чем он может напрямую взаимодействовать (от дизайна до отдельных элементов, на которые можно нажать, ввести текст, подвигать и т.д.). Чтобы прочувствовать, что собой представляет frontend -разработка, достаточно в браузере открыть любой сайт. Так как мы в рамках курса будем использовать Google Chrome , то на открытом вами сайте нажмите правую кнопку мыши и выберите пункт «Посмотреть код» ( Inspect ). Откроются "Инструменты разработчика", где можно увидеть HTML-разметку сайта, а во вкладке Sources находятся таблицы стилей ( CSS ) и JavaScript сценарии. Обо всех этих элементах мы будем говорить в последующих уроках курса. Здесь описываются цвета, картинки, таблицы и другие составляющие страницы, поведение при взаимодействии с ними.

Слайд 24

Серверная часть ( Backend ) Backend связан с тем, что пользователь визуально никак оценить не может и к чему не имеет доступа. Это логика работы приложения, осуществляемая на удаленном сервере. Когда вы открываете страницу приложения, то от вас поступает запрос на сервер. Там он обрабатывается, а пользователю возвращается сгенерированная web -страница. Взаимодействия со страницей также ведут к формированию запросов на сервер (заполнение формы, просмотр увеличенной фотографии, поисковый запрос и т.д.). Разработка серверной части приложений связана с рядом языков программирования ( Java , Python , C# , C++ ), а упрощение такой разработки достигается использованием бэкэнд -фреймворков ( Django ) и веб-серверов ( Nginx , Node.js и др.). Немаловажной частью бэкэнда являются базы данных. Они нужны для хранения массивов данных, которые при запросе пользователя извлекаются и отображаются в веб-приложении. На практике могут использоваться разные базы данных, наиболее популярные из которых: MySQL , PostgreSQL , MongoDB . Следовательно, используя web -приложение мы имеем дело с клиентской и серверной частями, упрощенное взаимодействие которых показано на рисунке.

Слайд 26

От клиента через браузер поступает запрос на сервер (для этого используется HTTP-протокол ). Сервер получает этот запрос, обрабатывает его, достает из базы данных соответствующие сведения и отправляет обратно клиенту. На стороне клиента загружается страница, которая представляется в необходимом виде при помощи HTML , JS и CSS . Такая связь между клиентом и сервером способна устанавливаться многократно по мере изменения запросов, данных на сайте, обновлении серверной части и т.д. При этом может осуществляться перезагрузка страниц, происходить дозагрузка данных на лету без перезагрузки приложения. В некоторых случаях данные кешируются для ускорения обработки повторных запросов. Чтобы сервер и клиент понимали друг друга, применяется HTTP-протокол . В последнее время в целях безопасности используется расширение HTTPS , которое при помощи криптографических протоколов TLS шифрует данные. Это необходимо для исключения возможности перехвата сведений сторонними лицами или устройствами, которым они не адресованы.

Слайд 27

HTTP-протокол Уровень приложения является самым верхним в модели TCP/IP . Работа web -приложений связана с протоколом HTTP данного уровня. Для лучшего понимания функционирования сетевых приложений необходимо детально рассмотреть HTTP-протокол , его специфику, используемые запросы. HTTP ( HyperText Transfer Protocol , протокол передачи гипертекста) изначально предназначался для передачи данных в виде HTML-документов , а сегодня отвечает за передачу любых данных в клиент-серверном приложении. Программное обеспечение для работы с HTTP-протоколом делят на 3 категории: - серверы (обрабатывают запросы); - клиенты (отправляют запросы, потребляют информацию); - прокси (транспортные службы).

Слайд 28

Между клиентом и сервером передаются HTTP-сообщения ( HTTP-запросы и HTTP-ответы ). Их структура всегда одинакова (содержание может отличаться) и представлена в указанном на рисунке порядке.

Слайд 29

Чаще всего на практике используются методы GET , POST , HEAD . Рассмотрим подробнее типы запросов GET и POST , так как с ними мы сталкиваемся ежедневно как пользователи Интернета. GET-запрос Метод GET предназначен для получения данных целевого ресурса. Например, каждый раз при входе на сайт вы, в том числе, отправляете GET-запрос . Как правило, в GET запросе отсутствует тело запроса. Но зато помимо адреса ресурса в GET запросе могут передаваться уточняющие параметры. Они передаются URI целевого ресурса после символа ? . Параметры представляют собой пары <ключ>=<значение> . Сами параметры разделяются символом & . POST-запрос Метод POST позволяет отправлять на сервер существенно больше данных, чем предыдущий. Он более безопасен (никто не увидит в адресной строке отсылаемые параметры), может отправлять не только текст, но и файлы любых форматов. Типичные примеры использования такого запроса: заполнение форм, регистрация на сайтах, публикации на форумах и т.п. В отличие от GET в POST запросе данные передаются в теле. Тело, как правило, представлено в формате JSON или XML . Приведем пример POST-запроса .

Слайд 30

Языки веб-программирования — это языки, которые в основном предназначены для работы с веб-технологиями.

Слайд 31

Программы, составленные на клиентском языке обрабатываются на клиентском ПК. Примеры: HTML XHTML CSS JavaScript AJAX

Слайд 32

Серверные языки –это языки программирования, которые выполняют обработку функций на стороне сервера. Примеры: PHP ASP ASP.net Python Perl

Слайд 33

HTML HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») —стандарт, язык разметки документов во Всемирной паутине. Большинство web -страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами .

Слайд 34

CSS CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) —стандарт, технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления web -страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL. CSS используется создателями web -страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

Слайд 35

JAVASCRIPT JavaScript — объектно-ориентированный скриптовый язык программирования. Обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности web -страницам. JavaScript используется в клиентской части web -приложений: клиент-серверных программ, в котором клиентом выступает браузер, а сервером — web -сервер, имеющих распределённую между сервером и клиентом логику. Обмен информацией в web -приложениях происходит по сети.

Слайд 36

PHP PHP ( Hypertext Preprocessor — «PHP: препроцессор гипертекста») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки web -приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических web -сайтов.

Слайд 37

AJAX AJAX ( Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов web -приложений, заключающийся в «фоновом» обмене данными браузера с web -сервером. В результате, при обновлении данных, web -страница не перезагружается полностью и web -приложения становятся более быстрыми и удобными.