ITMO_ICT_WebDevelopment_2021-2022

Репозиторий для реализации дистанционного обучения по дисциплине "Web-программирование".

Учебный журнал по дисциплине. Тут доступна информация о сроках сдачи работ, о текущей успеваемости студентов и описаны все материалы необходимые для реализации курса.

Составляющие финальной оценки:

• 60 баллов - лабы.
• 10 баллов - тесты.
• 10 баллов - дисскусии на практиках (1+ доклад за семестр (оценка складывается из доклада 50% + активности на занятиях 50%)).
• 20 - экзамен. При выполнении всех лаб по дисциплине в срок - экзамен-автомат.

Инструкции к использованию полезных материалов

Дополнительные материалы делятся на 3 категории:

1. Для тех, кто считает, что имеет недостаточно базовых знаний об информатике, веб-разработке и сетях (обзначается (+)).
2. Для тех, кто считает, что имеет базовые знания (обзначается (++)).
3. Для тех, кто хочет поглубже изучить материал (обзначается (+++)).

Лекция 1.1 - Концепции разработки веб сервисов.

Презентация с лекции тут (будет изменена 04.01.2021).

Допонительные материалы:

1. Иерархия компьютерных информационных систем для разработки сайта (+)
2. Топ-5 наиболее популярных CMS: какую выбрать? (++)
3. Веб-фреймворки: введение для новичков (классификация фреймворков) (++)
4. Чем отличаются фронтенд- и бэкенд-разработка (+)
5. Что такое MVC: базовые концепции и пример приложения (++)

Лабораторная работа 1. Работа с сокетами.

Лекция с практики
Текст работы

Срок сдачи: 25.09.2020 (включительно). Вес работы в баллах – 10. Выполнение пунктов 1-3 и 4 (однопользовательский чат без потоков) – 8. Выполнение пунктов 1-3 и 4 (многопользовательский чат с потоками) – 10. После срока сдачи максимальный бал 6.

Полезные материалы:

• Большой мануал про сокеты, http, wsgi(+++)

Дополнение по пункту 3 от 23.09.2021

срок сдачи пункта: 8 октября

Необходимо написать простой web-сервер для обработки GET и POST http запросов средствами Python и библиотеки socket.

Базовый класс для простейшей реализации web-сервера доступен тут

Подробный мануал по работе доступен тут

Задание: сделать сервер, который может:

• Принять и записать информацию о дисциплине и оценке по дисциплине.
• Отдать информацию обо всех оценах по дсициплине в виде html-страницы.

Сдача работы №1

Полученную модель, код и отчет залить в папку репозитория students/группа/laboratory_works/фамилия_имя/laboratory_work_1. Инструкция о загрузке работы ниже. Не забывайте о файле gitignor.

На git должен быть загружен pdf-файл с отчетом, код программамы, где каждая папка соотвествует части работы (task_1, task_2...).

Шаблон имени файла отчета: Фамилия_Имя_группа_№лабы. Отчет должен содержать титульный лист, листинг кода по каждому пункту с комментариями, скрины работы программ.

Как делать пул-реквест описано в разделе Сдача работ

Дополнительный контент к первой лабе

Те студенты, которые хотят получить более обширное представление о работе с конструкторами сайтов, могут пройти этот курс.

Лабораторная работа 2. Реализация простого сайта на django.

Практическая работа №2.1

Цель работы: дать краткое представление о работе Django WEB фреймворка.

Необходимо выполнить все задания с пометкой практическая работа из практической работы №1.
Полученную программу загрузить в папку этого репозитория sutdents/группа/practical_works/фамилия_имя/simple_django_web_project. Инструкция о загрузке работы ниже. Не забывайте о файле gitignore.

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

Практическая работа №2.2

Цель работы: дать подробное представление о реализации CRUD(Create, read, update and delete) интерфейсов средствами Django WEB фреймворка.
Необходимо выполнить все задлания с пометкой практическая работа из практической работы №2.
Полученную программу залить в папку этого репозитория sutdents/группа/practical_works/фамилия_имя/simple_django_web_project. Инструкция о загрузке работы ниже. Не забывайте о файле gitignore.

Практическая работа №2.3

Необходимо выполнить все задлания с пометкой практическая работа из практической работы №3.
Полученную программу залить в папку этого репозитория sutdents/группа/practical_works/фамилия_имя/simple_django_web_project. Инструкция о загрузке работы ниже. Не забывайте о файле gitignore.

Лабораторная часть

Реализовать веб сервис, в соответствии с вариантом из задания (студент с порядковым номером 6 в списке группы делает 6 вариант, седьмой - вариант номер 1).
Текст лабораторной работы тут.
Срок сдачи: 20.10.2020 (включительно)

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

Полезные материалы

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

Базово - плейлист, который позволит быстро понять, как и что работает и сделать лабу.

Продление срока сдачи до 22.11.2021

Чтобы продлить срок, необходимо:

• Реализовать меню (меню с бутсрап - https://www.youtube.com/watch?v=HEPTgggsRgY)
• Реализвать пагинацию страниц (так себе вариант - https://evileg.com/ru/post/10/ , отличный вариант - https://evileg.com/ru/post/237/)
• Внедрить поиск по объектам, с которыми настроена пагинация (https://evileg.com/ru/post/21/)

Сдача работы №2

Все файлы загрузить в папку students/группа/laboratory_works/фамилия_имя/laboratory_work_2. Инструкция о загрузке работы ниже. Не забывайте о файле gitignor.

На git должен быть загружен pdf-файл с отчетом, код программамы.

Шаблон имени файла отчета: Фамилия_Имя_группа_№лабы. Отчет должен содержать титульный лист, описание модели данных, описание контроллеров в файле views, описание роутеров файла urls, скрины работы программы.

Как делать пул-реквест описано в разделе Сдача работ

Лабораторная работа 3. Реализация серверной части на django rest. Документирование API.

Цель работы: овладеть практическими навыками реализации серверной части (backend) приложений средствами Django REST framework.

Лекция 1

Содержание:

• REST и альтернативы. (Лекция 06.11.2020 / Время 00:00 - 00:35)
  
• Django rest framework. (Лекция 06.11.2020 / Время 00:35 - 02:20)
  
• Подробно о формате json. (Лекция 06.11.2020 / Время 02:20 - 03:15)
  
• Сериализация. (Видео по сериализации от Давида)
  

Лекция 2

• Документирование апи
• Виды авторизации (сессии, токены)
• JWT + Использование JWT в Django
• Djoser (DRF + Djoser часть 1. Регистрация, авторизация по токенам, получение и изменение данных пользователя)

Дополнительный контент для тех, кто хочет лучше изучить DRF и работать с ним в будущем::

1. простой курс - плейлист уроков по джанго для тех, кто хочет быстро изучить, как работает работает Django rest framework в связке с vue.js. (Примечание. В уроке 4 изменился путь для получения токена авторизации (см. официальную докумекнтацию Djoser https://djoser.readthedocs.io/en/latest/getting_started.html))
2. более подробный курс, чем в пункте 1

Практическая работа №3.1

Цель работы: получить представление о работе с запросами в Django ORM. Необходимо выполнить все задания с пометкой "Практическое задание [из практической работы №3.1] (https://docs.google.com/document/d/1jB8EYOWk-bbjB6sLr1s7dOmLYRC9Z5jIV6xIpnigdvY/edit?usp=sharing). Полученную программу залить в папку этого репозитория sutdents/группа/practical_works/фамилия_имя/simple_drf_project. Инструкция о загрузке работы ниже. Не забывайте о файле gitignore.

Сдача практический работы №3.1: Оформить, как часть документации все задания с пометкой "практическая работа" и сдать Сергею.

Практическая работа №3.2

Цель работы: получить представление об использовании возмжностей работы контроллеров и серриализаторов в Django Rest Framework. Необходимо выполнить все задания с пометкой "Практическое задание [из практической работы №3.2] (https://docs.google.com/document/d/1PkpwxCUYQ2_Pi8Fpcgno6te3oCQHZfkh03Zxt6DhHSw/edit?usp=sharing). Полученную программу залить в папку этого репозитория sutdents/группа/practical_works/фамилия_имя/simple_drf_project. Инструкция о загрузке работы ниже. Не забывайте о файле gitignore.

Практическая работа №3.3

Цель работы: овладеть навыками написания документации к API.
Необходимо выполнить все задания с пометкой "Практическое задание" из практической работы №3.2.
Результаты практики загружаются в репозиторий вместе с лабораторной работой.

Лабораторная часть

Срок сдачи 03.12.2021

Реализация серверной части приложения средствами django и djangorestframework в соответствии с заданием из текста работы.

Порядок выполнения работы:

1. Выполнить практическую работу 3.1
   
   
2. Выбрать вариант или предложить свой, есть 4 способа:
   2.1. Предложить свой вариант.
   2.2. Использовать вариант из дисциплины «Адаптивный веб-дизайн».
   2.3. Выбрать вариант из вариантов по курсу «Основы баз данных» (https://drive.google.com/file/d/174gPjJ7AOHfzteYcobPY0x7sFBTkN1Xx/view?usp=sharing).
   2.4. Выбрать бонусный вариант от Давида или Максима Валерьевича Хлопотова (см. пункт Бонусные варинты тут).
   2.5. Использовать вариант из курса Давида по фронтент-разработке. По любому из способов функционал нужно согласовать с преподавателем или ментором. В лабораторной работе №4 необходимо будет реализовать клиентскую часть(фронтенд) по этому же варианту.
   
   
3. Реализовать модель базы данных средствами DjangoORM (согласовать с преподавателем на консультации).
   При необходимости, студент может согласовать модель базы данных с преподавателем и только потом приступить к описанию модели средствами Django ORM
   Полезные материалы:
   
   • Создание модели данных в Django ORM (Видео)
     
     
4. Реализовать логику работу API средствами Django REST Framework (используя методы сериализации).
   Полезные материалы:
   
   • Пункты 4, 5, 6 в Практической работе 3.1
     
   • DJANGO API VIEWS, GENERICS, FILTER (Видео)
     
   • JSON. Сериализация данных. Пишем свой сериализатор. Разбираем Django REST Framework Serializers (Видео)
     
   • Работа с Django ORM (Видео)
     
     
5. Подключить регистрацию / авторизацию по токенам / вывод информации о текущем пользователе средствами Djoser.
   Полезные материалы:
   
   • Djoser (DRF + Djoser часть 1. Регистрация, авторизация по токенам, получение и изменение данных пользователя) (Видео)
     
     
6. Выполнить практическую работу 3.2 по оформлению документации (в процессе разработки)
   
   
7. Реализовать документацию, описывающую работу всех используемых endpoint-ов из пункта 3 и 4 средствами Read the Docs или MkDocs.
   
   Полезные материалы:
   • Пункт 3 из практической работы №3.2

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

Сдача работы №3

Работа выполняется индивидуально.

Этап 1

Полученную программу залить в папку этого репозитория sutdents/группа/laboratory_works/фамилия_имя/laboratiry_work_3. Инструкция о загрузке работы ниже. Не забывайте о файле gitignore.

Этап 2

Работу необходимо защитить лично или прислать видео с описанием проделанной работы.

Лабораторная работа 4. Реализация клиентской части средствами Vue.js.

Лекция 4.1 (Основы создания клиентских web-приложений)

• Отличие многостраничного приложения от SPA Презентация с лекции(.ppt) | Лекция 20.11.2020 / Время 00:00 - 00:16 (Видео)
  
• Angular vs. Vue vs. React Презентация с лекции(.ppt) | Лекция 20.11.2020 / Время 00:16 - 00:58 (Видео)
  
• Компонентный подход + как работает роутинг на фронтенде Лекция 20.11.2020 / Время 00:58 - 01:45 (Видео)
  

Лекция 4.2 (Основы работы с JS)

1. Типы данных (number, infinity, NaN, undefinded, bigint, string, bool, null, object) + Переменные (var, let, const) + Функции (анонимнные, lambda) + Циклы (foreach, for, while) + Работа с массивами (filter, sort, map, forEach) Лекция 04.12.2020 / Время 00:00 - 00:44 (Видео)
   
2. Работа с событиями (load, DOMContentLoaded, click, change, submit, reset), работа с DOM-деревом (кнопки, формы), работа с DOM-хранилищами (localStorage, sessionStorage) Лекция 04.12.2020 / Время 00:44 - 02:04 (Видео)
   

Лекция 4.2 (Основы работы с Vue.js)

https://youtu.be/ckzWDhn8ScQ

Практическая работа №4.1

Цель работы: Ознакомится с базорвыми конструкциями JavaScript. Текст "Практической работы №4.1.

Практическая работа №4.2

Цель работы: получить представление о работе Vue.js. Текст "Практической работы №4.2.

Практическая работа №4.3

Цель работы: получить практические навыки настройки CORS (Cross-origin resource sharing). Текст "Практической работы №4.3.

Лабораторная часть

Срок сдачи День консультации перед экзаменом

Реализация клиентской части приложения средствами vue.js, в соответствии с текстом работы.

Порядок выполнения работы:

1. Выполнить практическую работу 4.1 Базовые конструкции языка JavaScript). (https://docs.google.com/document/d/1lurVq_ddbKQ-rORvxF3T9PlPPy-sOgHwFazCI0yEqYY/edit?usp=sharing)
2. Выполнить практическую работу 4.2. Работа с Vue.JS. (https://docs.google.com/document/d/1ZURAlewVuJFSX4YjjB-BvVsVwfF5IbXFH8zj2g8CgPY/edit?usp=sharing)
3. Настроить для серверной части, реализованной в лабораторной работе №3 CORS (Cross-origin resource sharing) в соответствии с Практической работой 4.3 (будет выложена 19.12.2020)
4. Утвердить с одним из преподавателей список интерфейсов для взаимодействия с серверной частью.
5. Реализовать интерфейсы авторизации, регистрации и изменения учётных данных и настроить взаимодействие с серверной частью. Полезные материалы:
   
   • Настройка авторизации средствмаи Vue.js и Django REST framework (DjangoSchool) (ссылка)
     
6. Реализовать клиентские интерфейсы и настроить взаимодействие с серверной частью. Полезные материалы:
   
   • Пункты 4.2, 4.3, 4.5 в Практической работе 4.2
     
   • Уроки 6, 7 и 10-13 из данного плейтиста (DjangoSchool) (ссылка)
7. Подключить vuetify. Полезные материалы:
   
   • Пункт 3.1 в Практической работе 4.2
     
8. Реализовать документацию, описывающую работу разработанных интерфейсов средствами MkDocs.

Сдача работы №4

Работа выполняется индивидуально.

Этап 1

Полученную программу залить в папку этого репозитория sutdents/группа/laboratory_works/фамилия_имя/laboratiry_work_4. Инструкция о загрузке работы ниже. Не забывайте о файле gitignore.

Этап 2

Работу необходимо защитить лично или прислать видео с описанием проделанной работы.

Сдача работ

Для сдачи работы в связи с переходом на дистанционную форму обучения введены дополднительные правила игры.

Все отчеты сохраняются в pdf (документы и презентации).

Все студенческие работы хранятся в папке Students Для сдачи работы необходимо:

1. Зарегистрироваться на Git.
2. Сделать форк репозитория с заданиями в свой аккаунт (на странице https://github.com/TonikX/ITMO_ICT_DataBases_2020 кнопка fork справа, сверху).
3. Установить Git на компьютер.
4. Открыть папку, где хранятся Ваши проекты. В контекстом меню нажать "Open Git Bash here". Склонировать форкнутый репозиторий на комьютер (git clone https://github.com/ваш аккаунт/ITMO_ICT_DataBases_2020).
5. В файловой системе Вашего компрьютера в склонированном репозитории создать в папке students/группа Вашу личную папку в формате Фамилия_Имя латиницей (Пример students/k3340/Petrov_Vasya).
6. В личной папке сделать подпапку с текущей работой в формате lr_номер (Пример students/k3340/Petrov_Vasya/Lr1).
7. Записать в папку отчетные материалы.
8. Сделать коммит, описать его адекватно (Пример "был добавлен файл перезентация_петров.pdf"). Набрать команлы git add и git commit -m "название комита".
9. Сделать push в Ваш форкнутый репозиторий (git push).
10. Сделать пул-реквест в репозиторий преподавателя из вашего форкнутого, описать его. Структура заголовка пулреквеста: Фамилия_Имя-Работа_Номер (Пример: Петров_Василий-Лабораторная_работа_1).

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

Еще один мануал о том, как сделать Pull Request описано тут.