Первый фриланс проект - школа паралимпийского резерва
В этом посте я расскажу о своём первом фриланс проекте.
Реклама
Всем привет!
Вчера закончилась работа по проекту для Хабаровской краевой спортивно-адаптивной школы паралимпийского и сурдлимпийского резерва. Проект длился почти год - с июня 2023 г. по конец мая 2024 г.
Задача заключалась в создании новостного сайта школы для замены устаревшего.
О том, почему так долго и как всё проходило расскажу в этом посте.
Сайт школы: https://kski.ru
Старый сайт школы: https://old.kski.ru
С чего всё началось?
Шёл 2023-й год, я ещё учился в GeekBrains, только начал думать о канале в Telegram. В один из дней, в разговоре с одногруппником Юрием, он сообщает, что, возможно, будет заказ на новый сайт для школы. Начали обсуждать на чём его можно сделать и дошли до разработки с нуля на Django. К слову, Django я в то время знал весьма посредственно, хотя мой дипломный проект уже был готов, а у Юры другой стек, он больше по ботам в Telegram, автоматизации, парсерам и сайтам на CMS-движках.
Несколько дней спустя он мне написал с предложением заняться проектом вместе. Честно сказать, я сперва подумал, что это шутка, т.к. знал и умел тогда не-то, чтобы много. Ещё учиться и учиться, а тут, бац, "давай делать проект!". Да ещё и денег заплатят! Не то, что бы много, конечно, но "дарёному коню в зубы не смотрят". Это была возможность. Та самая возможность получить практический опыт, а не все те лабораторные задачки в GB. Я согласился.
На следующее утро я всё ещё думая, что это он просто ошибся, переспросил у него, на что получил положительный ответ. И началась работа.
Начало работы.
Было составлено первоначальное ТЗ:
- Фреймворк - Django.
- БД - MySQL.
- Менеджер БД - PHPMyAdmin.
- Веб-сервер - Nginx.
- Фронтенд должен работать на CSS-фреймворке - Bootstrap.
- В админке должен быть визуальный редактор для удобного добавления статей с возможностью добавления медиафайлов.
- На сайте должен быть поиск по материалам.
- Необходимы группы пользователей с разными уровнями прав.
- Необходимо логирование действий пользователей в админке.
- На сайте должны быть категории и материалы.
- Должна быть пагинация.
- Должна быть форма обратной связи с отправкой сообщения пользователя администратору по email.
- Должен быть раздел "Фотогалерея" с удобным управлением в админке.
Задача поставлена, также были обозначены первые сроки - до конца года, но хотят пораньше. Понял, принял и взялся за работу.
Создал первоначальный проект в Django и сделал приватный репозиторий для всего этого дела.
Было решено сразу всё делать используя Docker-контейнеры и Docker Compose, поэтому были созданы необходимые Dockerfile и docker-compose.yml. Прописаны сервисы БД, PHPMyAdmin, Nginx. Юра предоставил для разработки технический домен и VPS-сервер.
При прописывании БД, порты MySQL были прописаны наружу сервера, для того, чтобы можно было вести разработку используя БД сервера, без необходимости потом делать миграции и перенос содержимого.
Довольно быстро был выполнен начальный пласт работ - созданы необходимые модели, добавлен визуальный редактор CKeditor 4, подключен Bootstrap, созданы технические шаблоны с примерами вывода информации из БД.
В это же время Юрий занялся шаблоном сайта, разбираясь с шаблонизатором Django.
Позже были добавлены "хлебные крошки" на страницы сайта, превьюшки для статей, дополнительные кастомизации админки, теги к статьям и поиск.
Архитектура, а скорее структура менялась в процессе. Сперва было две модели - для категории статей и для статей. Затем понадобились контентные страницы (для разного рода документов школы), а затем и страницы с видео. Дабы не перегружать две модели вешая на них с указанием разных типов, для каждого были написаны свои модели. Это позволило разделить функционал и более удобно настраивать необходимые разделы.
Первые сложности.
Первая сложность возникла с реализацией галереи. Я тогда не представлял, как можно реализовать галерею с альбомами, да и сейчас бы, наверное, задумался о реализации. Выбор пал на готовую библиотеку django-photologue. Удобная библиотека, позволяющая загружать изображения не только по одному, но и в zip-архиве, создавать альбомы и управлять ими.
Пришлось немного править шаблоны библиотеки под макет сайта, но в целом трудность решена. Хотя, с этой библиотекой позже возникла ещё одна проблема, но об этом в конце поста.
Вторая большая сложность возникла при использовании библиотеки django-mptt. Она позволяет создавать древовидные категории. Сложностей было несколько:
- Первая была связана с отображением древовидных категорий в админке. Эта сложность возникла не сразу, а после того, как мы сменили шаблон админки со стандартного на django-jazzmin. Пришлось немного править файлы шаблона.
- Вторая была связана с отображением выпадающего списка категорий на страницах сайта. Изначально была мысль делать выпадающий список, в котором будут свои выпадашки следующего уровня и это доставило много проблем, но какая-никакая, первая реализация была сделана.
В процессе Юра то и дело подкидывал задачи, например, нужно было связать фотогалерею со статьёй. Задача оказалась не трудной, достаточно было в модели статьи прописать внешний ключ на модель альбома. Это позволило при написании статьи выбирать связанную с ней галерею.
Ещё одной задачей было реализовать видеоархив. Необходимо было вставлять только ссылку на YouTube, при этом на странице выводить встраиваемый плеер, а в качестве обложки страницы брать превьюшку видео. Поскольку получать каждый раз превьюшку видео с YouTube чревато баном, для получения превьюшки была написана функция, получающая изображение и сохраняющая её на диске. Вызывается функция при сохранении новой страницы с видео в админке, там же и происходит формирование плеера.
На всё это ушёл месяц. Проект в большей степени был выполнен. И началось затишье...
Провал на пол года.
Юрий показал текущий на тот момент вариант руководству и мы начали ждать следующих распоряжений по сайту. Они пришли в феврале вместе с многостраничным документом от министерства образования. В документе описывались требования, которым должен соответствовать сайт бюджетной организации.
Изучив документ, в целом практически не нашли ничего нового. Небольшие правки шаблона, но был и один пункт - версия для слабовидящих. Работу по её внедрению взял на себя Юра. В интернете есть несколько сайтов предоставляющих скрипт для этого и почти все платно. Был найден бесплатный вариант, доработан и установлен на сайт.
Юрий занялся переносом данных со старого сайта на новый.
Legacy наше всё.
Руководство школы решило сохранить старый сайт как архив. И раз у нас куплен сервер под новый сайт, зачем платить за хостинг для старого? Давайте перенесём старый сайт на сервер.
Что может пойти не так? А вот, что - старый сайт был написан в 2011-м году. С тех пор он не обновлялся, а следовательно, базируется на очень старых технологиях:
- Apache 2.2
- PHP 5.2
- MySQL 5.7
Отойдя от ностальгических воспоминаний, я принялся за работу. Первой идеей было установить LAMP, но в нём самая старая версия PHP - 7.2. Далее были эксперименты с панелями Vesta и Hestia, но и там PHP был относительно свежий. Но, видимо не мне одному понадобился PHP 5.2, поскольку был найден docker-образ с установленным PHP и Apache. Установить MySQL версии 5.7 не составило труда, он доступен в репозитории Docker Hub.
Однако, сайт не заработал. Жаловался на базу данных, мол не может подключиться.
После ряда попыток "подружить" современные технологии со старыми, перезагрузок, правок файлов - в общем действий "методом тыка", старый сайт удалось завести.
Чтобы не мешать старый сайт и новый, для старого сайта был создан второй Docker compose файл, содержащий php, mysql и phpmyadmin.
Последний месяц работы.
Когда работа по переносу данных была закончена и и сайт был почти готов, начали доводить его до ума.
Реализовали форму обратной связи с применением celery для отправки почты администратору в фоновом режиме. Поскольку в форме присутствует возможность к сообщению прикрепить файл, был написан валидатор для прикрепляемых файлов.
Были сделаны мелкие правки для передачи нужных данных в шаблоны.
Я писал выше о проблеме реализации выпадающих списков в меню на страницах сайта, для её решения было решено сделать отдельную модель для меню сайта. Также с использованием mptt, но без дополнительных выпадающих списков. Теперь в меню указаны только нужные разделы, а не все существующие.
У нас возникла проблема с библиотекой фотогалереи, а именно - при загрузке архива с изображениями должен создаваться новый альбом со своим slug'ом на основе указанного названия альбома, но он не создавался. Причина была в том, что при создании альбома непосредственно в админке, поле slug заполняется одновременно с названием альбома силами JavaScript, а при создании альбома путём загрузки архива оно создаётся используя функцию slugify из Django. С этой функцией я уже сталкивался ранее и даже писал об этом в одном из постов по Django.
Проблема в том, что стандартная функция не преобразует кириллицу. Взять и изменить код в файлах библиотеки не так то просто, но это же Django, а значит можно подключить библиотеку как приложение. Это и было сделано. Удалил библиотеку из зависимостей и поместил директорию с файлами приложения в проект, поправил импорты и всё заработало. Далее оставалось дело за малым, в одном файлике изменить используемую библиотеку для слагификации названия альбома.
Оставался последний шаг - сменить технический домен на основной с поддержкой https.
С бесплатными сертификатами есть одна проблема, их нужно обновлять каждые три месяца. Это можно обойти написав скрипт, но мало ли, что пойдёт не так у владельцев сайта. Было решено заменить nginx на caddy. Caddy это современный вебсервер, напоминающий nginx структурой файла конфигурации, но в нём есть один важный плюс - он автоматически получает сертификат для сайта и сам его продлевает по истечении срока действия.
После того, как убедились, что всё работает как надо перенесли домен со старого хостинга на сервер. С переносом тоже были проблемы - регистратор R01 никак не хотел менять NS-сервера у домена. Очень странное поведение, но после обращения в поддержку NS-ы сменили.
Оставалось только заменить домен в конфигурационных файлах. Всё!
У нас получилось в итоге два Docker Compose файла - для нового и старого сайта. По сути у нас два сайта, две версии MySQL и два связанных с ними PHPMyAdmin. Благодаря докеру это не вызывает никаких проблем с версионностью и позволяет управлять контейнерами без вреда для остального.
Заключение.
На всё про всё ушёл год. Хотя работы по сути было на 2-3 месяца. Однако, работа над этим проектом позволила заняться реальным, а не PET-проектом. Дала толчок к существованию канала.
Не бойтесь браться за то, что кажется сложным. Пусть это проект для кого-то или личный. Всё это опыт, навыки и повод гордиться собой.
Все статьи