Skip to content

Latest commit

 

History

History
85 lines (75 loc) · 7.9 KB

practice_ru.md

File metadata and controls

85 lines (75 loc) · 7.9 KB
Raw

План практики по веб-разработке

Practice 1

Вспоминаем git и заводим репозитарий на Github:

  • Напоминание о том, что нужно следовать стилевым стандартам кодирования
  • Вступление про ветки git и напоминание о Git Flow
  • Форкаем себе https://github.com/ProfitwareWebDev/webdev-practice
  • В это время преподаватель добавляет всех форкнувших в развернутый хостинг
  • Также преподаватель добавляет форкнувших в команду https://github.com/ProfitwareWebDev
  • Клонируем свой форкнутый репозитарий на локальную машину
  • Добавляем себя (ссылку на профиль на Github) и наименование проекта локально
  • Отправляем изменения в свой репозитарий
  • Отправляем pull-request в оригинальный репозитарий (апстрим)
  • Преподаватель показывает, как разрешаются конфликты при мерджах
  • Заходим на развернутый хостинг и меняем пароль
  • Создаем в каталоге www файл index.html
  • Смотрим как это выглядит в броузере
  • Создаем отдельный репозитарий у себя в профиле на Github
  • Клонируем репозитарий в www

Practice 2

Ребейзимся, создаем репозитарий, въезжаем в Bootstrap

  • Делаем ребейз от апстрима: remote
  • Создаем свой репозитарий
  • Добавляем в него шаблон документа HTML5
  • Скачиваем Bootstrap (стабильный или, например, 4.0alpha): https://getbootstrap.com/
  • Создаем несложный файл с его использованием
  • Заливаем исходники себе в репозитарий
  • Разворачиваем репозитарий на хостинге
  • Усложняем файл: добавляем таблицу, картинки, кнопки, меню
  • Обновляем на хостинге через репозитарий

Practice 3

Разбираемся с jQuery, поднимаем бэкэнд

  • Создаем шаблон HTML5 с помощью Initializr (тип Bootstrap)
  • Разбираемся с подключением jQuery из CDN (например, убираем его, оставляя локальный)
  • Добавляем событие $(document).ready в main.js
  • Экспериментируем с alert и console.log при построении DOM-дерева
  • Вносим alert в новое событие нажатия на кнопку $('a.btn').click
  • Смотрим разницу между селекторами для выбора одной или нескольких кнопок
  • Меняем текста заголовок при нажатии на кнопку
  • Меняем заголовок соответствующей колонки при нажатии на кнопку (самостоятельно)
  • Добавляем счетчик нажатий на кнопки
  • По кругу меняем цвета кнопок при их нажатии
  • Клонируем https://github.com/ProfitwareWebDev/webdev-backend
  • Ставим Flask через pip и запускаем бэкэнд локально через python -m backend.main
  • Смотрим как это выглядит на хостинге
  • Форкаем бэкэнд к себе и начинаем свой проект с его помощью

Practice 4

Подключаем бэкэнд:

  • Форкаем себе репозитарий https://github.com/ProfitwareWebDev/webdev-backend
  • Клонируем на локальную машину, добавляем аргумент debug=True в app.run
  • Запускаем через python -m backend.main и открываем в броузере приложение (для Windows - localhost:5000)
  • Смотрим как можно передавать и принимать GET-аргументы
  • Осознаем декораторы route (ремарка: функции в рамках модуля должны называться по разному): http://flask.pocoo.org/docs/0.11/quickstart/#routing
  • Смотрим, на типы аргументов в запросах (int), смотрим, как работать с регулярными выражениями
  • Пробуем шаблоны сначала в коде через render_template_string, затем через render_template: http://jinja.pocoo.org/
  • Создаем таблицу с данными, передаваемыми с бэкэнда в шаблон
  • Учимся создавать базовый шаблон и наследоваться от него: http://jinja.pocoo.org/docs/dev/templates/#template-inheritance
  • Учимся отдавать статику через бэкэнд
  • Демонстрация, как подружить Flask и Bootstrap (шаблон через Initializr)

Practice 5

Изучаем AJAX и поднимаем Celery:

  • Поднимаем бэкэнд + Bootstrap (см. предыдущие практики)
  • Напоминание про url_for: http://flask.pocoo.org/docs/0.11/quickstart/#static-files
  • При нажатии на кнопку вызываем $.get с запросом роута с сервера: https://api.jquery.com/jQuery.get/
  • На бэкэнде используем jsonify, чтобы передавать JSON: http://flask.pocoo.org/docs/0.11/api/#flask.json.jsonify
  • Отправляем при нажатии на кнопку через AJAX запрос с количеством нажатий на кнопку
  • На бэкэнде возводим в степень и возвращаем на фронтэнд
  • На фронтэнде добавляем число нажатий и возведенное в степень в общую таблицу
  • Ставим RabbitMQ + Erlang OTP + Celery + MongoDB
  • Дружим Flask с Celery: http://flask.pocoo.org/docs/0.11/patterns/celery/
  • Учимся создавать задания Celery и вызывать их через .delay: http://docs.celeryproject.org/en/latest/userguide/calling.html#example
  • Добавляем задачу, делающую полезное действие - sleep(5) + вычисляющее третью степень числа аргумента
  • Вызываем ее асинхронно при вызове обработчика для AJAX
  • Добавляем еще один обработчик, возвращающий статус задачи через AsyncResult: http://docs.celeryproject.org/en/latest/reference/celery.result.html#celery.result.AsyncResult
  • Добавляем при нажатии на кнопку функцию, делающую поллинг статуса задачи и рекурсивно вызывающую себя через секунду
  • Заключительное слово и напутствие к экзамену