/ITMO_FSPO_PP_web_development_2020-2021

Репозиторий для реализации дистанционного обучения по дисциплине "УП.11.01"

Primary LanguagePython

ITMO_FSPO_PP_web_development_2020-2021

Репозиторий для реализации дистанционного обучения по дисциплине "УП.11.01"

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

Инструкции

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

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

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

Презентация с лекции тут.

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

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

Практическая часть 1.1

Погуглить и описать своими словами, что такое frontend и backend. Привести примеры frontend и backend фреймворков. Описать отличия.

Отчет о практической части содержит текстовый файл с вашим текстом работы и отправляется пул реквестом в этот репозиторий в папку lection_1_pr_1.1 (Пример students/Y2331/Petrov_Vasya/lection_1_pr_1.1 ). Шаблон названия пул реквеста "ИТМО ФСПО Номер_группы Практическая работа ФИО". Пример: "ИТМО ФСПО К3340 Практическая работа №1 Филимонов Филипп".

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

Дедлайн: 9.03.21 10:00

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

  1. Необходимо установить Django Web framework. Инструкция по установке. Если у Вас нет PyCharm Professional, пропустите пункт 8. Формат именований блоков проекта:
  • Формат имени Django-проекта: “django_project_фамилия”.
  • Формат имени Django-приложения: “project_first_app”.

П.С. Если Вы работаете на компьютерах ФСПО и у Вас появляется ошибка импорта модуля sqlite3, решение тут в первом ответе.

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

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

Image alt

Image alt

Лекция 1.2 - Компоненты клиент-серверного взаимодействия.

Презентация лекции тут.

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

  1. Сетевая модель OSI (+)
  2. Адресация в сетях (+)
  3. TCP vs UDP (+++)

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

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

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

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

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

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

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

Лабораторная работа

Есть два варианта сделать работу:
- Простой: Выполнить ЛР 1.1 - сделать простое веб-приложение без отдельного клентского приложения (Django WEB framework) (оценки 3-4-5(на 5 нужгно будет сделать ооочень крутую работу(5 получить почти невозможно)) (Дедлайн: иначально был 4.05.2021 -> продлен до 18.05.2021)
- Сложный: Выполнить ЛР 1.2 - 1.3 - сделать более сложное веб-приложение состоящее из серверной части django rest framework и клиентской части на vue.js (оценки 4-5(на 4 нужно сделать совсем просто, на 5 нормально и выше) + просроченный дедлайны по предыддущим работам будут сброщены) (Дедлайн: иначально был 4.05.2021 -> продлен до 01.06.2021)

Лабораторная работа №1.1. Реализация web-приложения средствами Django WEB framework (Будет дополняться)

Дедлайн: 11.05.21 10:00

Реализация веб-приложения на джанго в соответствии с вариантом из практики с Татьяной Николаевной. Вам нунжно не просто сделать CRUD(Create Read Update Delete) интерфейсы для БД, а сделать небольшой сервис, который решает какую-то проблему.

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

Этапы работы:

  1. Сделать новый проект. Шаблон названия проекта название системы_project. Шаблон названия приложения суть приложения_app.
  2. Реализовать модель данных. Не забыть про ограничения целосности и связи между таблицами. Использовать одного пользователя (расширить стандратного пользователя им).
  3. Описать ваш проект в техническом задании. Утвердить список интерфейсов в лабораторной работе с преподавателем. Список страниц в ТЗ:
    • Обзщее описание проекта.
    • Описание таблиц модели данных + модель данных в любой нотации.
    • Список интерфейсов с описанием входных и выходных данных. Реализовать ТЗ в Read the Docs или MkDocs (Инструкции по работе с mkdocs - пункт 3 из практической работы №3.2).
  4. Реализовать интерфейсы (описание будет дополненно). Минимальное функциональное наполнение интерфейсов:
  5. Реализовать документацию, описывающую работу всех используемых endpoint-ов из пункта 3 и 4 средствами Read the Docs или MkDocs.

    По пункту 3: Показать модель БД (изображение), код создания модели данных с комментариями.
    По пункту 4: Описать все url-адреса и функционал, который они реализуют.

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

Сдача работы

Сделать документацию в mkdokc, которая содержит:

  • Описание модели данных, которая содержит графическое представление модели и код создания.
  • Список url-адресов проекта и описание того, что происходит при их вызове, желательно со скриншотами.

Лабораторная работа 1.2 (Сложный путь для тех, кто хочет стать веб-разработчиком) (получаете 4 или 5 за курс - 100% (при выполнении всех предыдущих работ) + просроченный дедлайны по предыддущим работам будут сброщены). Реализация серверной части на django rest. Документирование API.

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

Практическая работа №1.2.1 (необязательно к выполнению)

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

Практическая работа №1.2.2 (необязательно к выполнению)

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

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

Срок сдачи ****

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

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

  1. Выполнить практическую работу 3.1

  2. Выбрать вариант или предложить свой, есть 4 способа:
    2.1. Предложить свой вариант.
    2.2. Использовать вариант из дисциплины из дисциплины Татьяны Николаева.
    По любому из способов функционал нужно согласовать с преподавателем или ментором. В лабораторной работе №4 необходимо будет реализовать клиентскую часть(фронтенд) по этому же варианту.

  3. Реализовать модель базы данных средствами DjangoORM (согласовать с преподавателем на консультации).
    При необходимости, студент может согласовать модель базы данных с преподавателем и только потом приступить к описанию модели средствами Django ORM
    Полезные материалы:
  4. Реализовать логику работу API средствами Django REST Framework (используя методы сериализации).
    Полезные материалы:
  5. Подключить регистрацию / авторизацию по токенам / вывод информации о текущем пользователе средствами Djoser.
    Полезные материалы:
  6. Выполнить практическую работу 3.2 по оформлению документации (в процессе разработки)

  7. Реализовать документацию, описывающую работу всех используемых endpoint-ов из пункта 3 и 4 средствами Read the Docs или MkDocs.

    По пункту 3: Показать модель БД (изображение), код создания модели данных с комментариями.
    По пункту 4: Описать все url-адреса и функционал, который они реализуют.

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

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

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

Лекция 1

Содержание:

Лекция 2

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

Лабораторная работа 1.3.(Сложный путь для тех, кто хочет стать веб-разработчиком) (получаете 5 за курс - 100%). Реализация клиентской части средствами Vue.js.

Практическая работа №1.3.1 (необязательно к выполнению)

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

Практическая работа №1.3.2 (необязательно к выполнению)

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

Практическая работа №1.3.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. Реализовать клиентские интерфейсы и настроить взаимодействие с серверной частью. Полезные материалы:
  7. Подключить vuetify. Полезные материалы:
  8. Реализовать документацию, описывающую работу разработанных интерфейсов средствами MkDocs.

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

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

Лекция 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

Сдача работы 1.2

Сделать документацию в mkdokc, которая содержит:

  • Описание модели данных, которая содержит графическое представление модели и код создания.
  • Список url-адресов бэкенда и описание того, что происходит при их вызове.
  • Список url-адресов фронтенда и описание того, что происходит на страницах, желательно со скриншотами.

Сдача работ

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

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

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

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

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

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