InfinitySeeker

Привет, Пикабу!
Меня зовут Пикабуба Бровастиковна. У меня 49,5 много друзей, и я надеюсь, что и ты станешь моим другом!
Удачи, девчонки! Пусть победит лучшая из нас!

Я вас категорически приветствую. Сегодня я вам расскажу о том, как мне удалось написать наиуникальнейший домашний проект без пап, мам, кредитов, а также без различного рода курсов (юзал только официальные доки, Stackoverflow, Quora, Reddit и мёртвые форумы 2007 года) - Список Дел (он же ToDo List). Казалось бы, что может быть более банальным? С одной стороны, читатель, ты абсолютно прав, но с другой - не всё так однозначно. Но обо всём по порядку...


О себе
Мальчик, 34 годика. В 2010 году окончил ДВАГС по специальности менеджмент, после ВУЗа относительно непродолжительное время работал торговым представителем, чуть позже, в 2011 я решил попробовать себя в веб-разработке, и меня позвали на работу в маленькую, но очень гордую дальневосточную IT-контору, которая как раз и специализировалась на Web (jQuery, Backbone, ExtJS, C#, MSSQL). Для меня на тот момент доступна была лишь базовая вёрстка, ибо знаний и опыта в этой области в те времена у меня особо не было, однако за пару лет я кое-чего поднабрался, хоть в программировании и не преуспел, - отсутствие технического бэкграунда и жизненного опыта мне тогда недоставало, но писать "лапшу" на jQuery, приправленную небольшим количеством логики, мне-таки удавалось (с переменным успехом). Дальшейшее отсутствие, прежде всего, денежных перспектив, а также карьерного роста с учётом моей врождённой тупизны вкупе породили мысль покинуть несостоявшегося IT-гиганта (который, как мне позже стало известно, в скором времени распался) и привели меня на госслужбу - в министерство информационных технологий и связи Х. края в отдел развития систем электронного документооборота, где я работал следующие пару лет, устанавливая ЭЦП и помогая тётенькам исправить то, что "само" ломалось. В то же время со мной случилась секта, йога, ретриты, путешествия... Короче, я уволилися с госслужбы и переехал вместе с родителями на юг нашей необъятной. Потом опять были путешествия, автостоп по забугорью, попутно попадались мелкие проекты по вёрстке на удалёнке. Менялись города, страны, а мозгов так и не прибавилось. Затем по до сих пор мне самому непонятной причине я захотел пойти в море матросом. Сказано - сделано. Учёба на морских курсах, практика и первая жуткая работа на местном флоте за 500 долларов, где вокруг вода, чайки и беспробудные алкаши - влажные мечты весьма значительно расходились с отягощающей реальностью. Чуть позже я переквалифицировался в буфетчики (помощник повара), о чём я уже писал на Пикабу, и пошёл в "большие моря" и на "большие пароходы", денег стало тоже чуть больше. Кстати говоря, работа в море мне нравится до сих пор, но в ней есть одно "НО": если ты стал моряком, то другой жизни у тебя больше не будет, как ни старайся, ну, кроме разве что, если ты капитан (да и то, не всё там так радужно), но это не мой случай, и, как выяснилось, это мне не совсем подходит. Последний контракт я пробыл в море 8 месяцев, совершил, практически кругосветное путешествие (Владивосток, Китай, Корея, Новая Зеландия, Австралия, Таити, Новая Каледония, Ямайка, Панама, США, Англия, Франция, Нидерланды), но выйти на берег мне так ни разу и не удалось из-за запрета портовых властей в связи с пандемией, т.е., я побывал везде и одновременно нигде - какая ирония... Зато я видел все оттенки воды. Ха-ха.
На сегодняшний день на берегу я нахожусь уже год, живу в Калиниграде с девушкой, занимаюсь всякими мелочами и одновременно постигаю ремесло web-разработчика, и для себя я твёрдо решил, что море обойдётся без меня (хотя мне до сих пор звонят с предложениями о работе время от времени), и что я-таки хочу жить и работать на берегу и найти удалённую работу, очень желательно в IT в связи с тем, что айтишка - это хорошо, интересно, при основательном подходе вполне денежно, да и какое-никакое представление об этом у меня уже имеется, хоть актуальных знаний мне сейчас явно недостаёт, но это не проблема - терпение и труд, как говорится... А путешествий и относительно острых ощущений мне уже хватило, и пора бы уже подумать о семье, карьере и других "земных" вещах. Лирики, пожалуй, достаточно, перейдём к делу.


Суть проекта
Проект - список дел, имеющий различный функционал для гостя и зарегистрированного пользователя.

Гостю доступен только один список, который хранится локально в браузере (в Local Storage) и, соотвественно, недоступен на других устройствах. Возможности в этом случае ограничены добавлением, редактированием, ранжированием (перемещением) и удалением пунктов списка.

Зарегистрированному пользователю доступно создание неограниченного количества списков, включая сохранение списка гостя, если таковой имелся, а также сохранение всех иных данных в БД. Для каждого списка в данном случае доступен всё тот же функционал (создание, редактирование, ранжирование и удаление пунктов списка), однако есть супер-пупер-друпер-мега-киллер-фича - это шаринг списков между пользователями и возможность одновременного их редактирования в режиме реального времени (посредством WebSocket). "Зачем это нужно?" - спросите вы. А я вам отвечу словами бессмертного лидера культовой группы Bredor Эскобара: "Ну да хер его знает." Хотел поработать с веб-сокетами в рамках учебного проекта и всего делов. Также добавлен стандартный административный раздел, чтобы не править данные напрямую ручками в базе.


Код и демо
Frontend: todo-client
Backend: todo-server
За код сильно прошу не пинать - я не профи. И да, я знаю, что есть кое-какой технический долг, но до этого руки пока не дошли (и никогда не дойдут, естественно).

Demo: https://infseeker-todo.(tk) - надобно скобки убрать. Т.к., к сожалению, Пикабу запрещает публикацию адресов с доменом tk (Tokelau), но я взял этот домен, т.к. он бесплатный и для публикации домашнего проекта вполне подходит.

Тестовые пользователи для тех, кто не хочется регистрироваться:
Пользователь 1:
Имя: TestUserOne
Пароль: TestUserOne123

Пользователь 2:
Имя: TestUserTwo
Пароль: TestUserTwo123


Технологический стек
Backend:
Web-Фреймворк (API): Flask (Python)
База данных: PostgreSQL
Веб-сервер: Gunicort + Nginx
ORM: Flask SQLAlchemy + Flask Marshmallow
Аутентификация: Flask Login
Авторизация: Flask Principal
SMTP-интерфейс: Flask Mail
Планировщик заданий: Flask APScheduler
Защита от ботов: Google reCaptcha v3
Админка: Flask Admin
WebSocket: Flask SocketIO

Frontend:
JS-Фреймворк: Vue 3
Сборщик проекта: Vite
Роутинг: Vue Router
Защита от ботов: Google reCaptcha v3
Валидация форм: Vuelidate
Локализация интерфейса: Vue i18n
Всплывающие уведомления: Vue Toastification
Drag'n'Drop: Vue Draggable Next
Редактор изображений: Vue Advanced Cropper
CSS-фреймворк: Bootstrap 5
CSS-тема: Sneat
WebSocket: SocketIO

Demo VDS:
Дата-центр: Россия, Королёв (Rucloud)
ОС: Ubuntu 18.04
Процессор: 1x2.2ГГц
Память: 0.5Гб
HDD: 10Gb


Процесс разработки
Постараюсь кратенько обозначить основные моменты в процессе планирования, разработки и тестирования проекта.
Общий срок, начиная от идеи составил 3,5 календарных месяца (с середины мая 2022 до начала сентября 2022), однако реальный срок непосредственной разработки составил чуть больше 2-х месяцев.

Общий процесс разработки проекта строился примерно следующим образом:
- Первичное планирование - наброски идеи проекта (Confluence)
- Прототипирование (основные экраны и элементы интерфейса) (Figma)
- Разработка пользовательских сценариев (User Stories) (Confluence)
- Текстовое описание базового функционала (Confluence)
- Постановка и выполнение задач по разработке, тестирование (Jira)

Методологией разработки был выбран недо-Scrum (1-недельные спринты, в спринт задачи в основном попадали напрямую из головы, а не из беклога, оценка сроков выполнения задач была номинальной, а тестирование происходило обычно сразу в продакшене), т.е., по сути, это был обыкновенный Waterfall, приправленный самообманом.
Однако, несмотря на все недочёты, разработка была спланирована, начата, закончена, и проект запущен в условный продакшн на демо-сервере. В планах было уложиться в 2 месяца, но, как это обычно бывает, согласно первому закону Паркинсона, сроки были чуть расширены.

Стоит отметить, что планированием тестовых мероприятий, ведением тестовой документации (Jira Xray) и непосредственным тестированием (полуавтоматизированное тестирование API в Postman, ручное тестирование интерфейса) занималась моя девушка, которая в относительно ближайшее время планирует также внедриться в IT, но, насколько мы адекватно можем оценивать сегодняшний рынок и её возможности, то вкатиться ручным тестировщиком вариантов практически нет ввиду пресыщенности рынка и отстуствия у неё опыта работы в реальных командах на реальных проектах. Поэтому, скорее всего, первоначально она пойдёт в техподдержку или что-то похожее, а там, быть может, и до разработки доберёмся, благо, девочка она умная и относительно быстро схватывает основы веб-разработки. Но время, как говорится, покажет.

Хотелось было отметить ещё множество различных интересных аспектов разработки проекта, однако, дабы не превращать пост в нечитаемую портянку, делать я этого не буду (на самом деле, мне просто лень). Кому интересно, то зайдёт на Демо-сервер и заглянет ко мне на уютненький Github.


Что я вспомнил и чему научился
Frontend:
- HTML 5 (структура, семантика)
- CSS 3 (Flex, Grid, Animation и пр.) + Bootstrap 5
- Основы JS, включая фичи ES6+
- Основы Vue 3, построения SPA-приложений, компонентный подход
- Работа с роутами (Vue Router)
- Работа с Local Storage
- Работа с асинхронными запросами и данными
- Реализация взаимодействия клиентов в реальном времени посредством WebSocket (SocketIO)

Backend:
- Основы Python 3
- Flask (REST API + Admin)
- Регистрация пользователей и работа с правами доступа (Flask Login)
- Работа с данными и ORM (Flask SQLAlchemy + Flask Marshmallow)
- Основы SQL, PostgreSQL
- Работа с WebSocket (Flask SocketIO)

Другое:
- Работа с Git, Github, Github Actions (автоматический деплой в продакшн по SSH на пуш)
- Конфигурирование Nginx и Gunicorn (настройка служб, воркеров, редиректа, HTTPS и пр.)
- Работа с Linux, командной строкой
- Работа с инструментами разработки (VSCode + плагины, pgAdmin, Postman, Chrome DevTools)


Что дальше?
Если вопрос касается данного проекта, то его разработка завершена окончательно и бесповоротно, т.е., всё, что я планировал сделать, я сделал. Теперь остаётся подтянуть и собрать воедино все накопленные знания и усиленно искать работу. Понятно, что в наше время это непросто, плюс возраст, плюс отсутствие соответствующего образования делают из меня не самого желанного кандидата даже на позицию джуниора, но, я думаю, как-нибудь прорвёмся, да и проект мой, я считаю, вполне себе годная демка моих знаний и скиллов, пускай это слишком сильно сказано, но, тем не менее. Будем верить в лучшее и двигаться вперёд. Мир!

Благодарю за внимание.

Если я где-то ошибся, пусть юристы и иные знающие люди меня поправят.

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

К сожалению, дистанционно расторгнуть договор у меня не вышло, но, я думаю, это вполне возможно, однако в моём случае в связи со скорейшим отъездом вопрос о расторжении договора и возврате оборудования нужно было решить одним днём.
Идём в офис (захватив оборудование), занимаем очередь и сразу берём бланк заявления на расторжение договора. Пишем заявление с указанием номера лицевого счёта, ФИО, адреса подключения услуги и желаемой даты расторжения (ближайшей возможной датой является день, следующий за днём принятия заявления), а также модель и серийный номер оборудования, если таковое имеется. Можно добавить пункт о перерасчёте абонентской платы за услуги и оборудование и пункт о требовании отправить официальное уведомление о расторжении договора на указанный электронный адрес. В конце заявления можно написать что-то в духе: "...В случае неисполнения требований настоящего заявления мною будет направлена досудебная претензия в адрес компании Ростелеком, а также составлены заявления о неисполнении обязательств компании в Роспотребнадзор и в прокуратуру" - для эффекта. Когда очередь подошла, отдаём заявление специалисту, просим его проставить все реквизиты (подпись, печать, номер), обязательно сделать копию заявления и торжественно вам её вручить.
Если нужно вернуть оборудование, то, вероятно, специалист скажет, что нельзя вернуть оборудование до того, как договор будет расторгнут. Нет такого нормативного акта, который бы обязывал вас соблюдать это условие. Если всё же оборудование у вас принять отказываются, ссылаясь на какие-либо причины, то просим специалиста выдать документ с официальным отказом в принятии оборудования, а также предоставить бланк претензии, где описываем проблему, берём копию. Обычно специалист начинает давать заднюю уже на стадии требования предоставить письменный отказ. Дальше возвращаем оборудование с требованием предоставить акт-приёма передачи, где обязательно должны быть следующие пункты: ваше ФИО, модель и серийный номер оборудования, дата составления акта и пометка о том, что РТ не имеет претензий. Проверяем, убеждаемся, что всё верно, берём копию. Итого у нас на руках: копия заявления о расторжении и акт приёма-передачи оборудования.
Теперь дожидаемся конца расчётного периода и обычно в начале следующего календарного месяца вам должна прийти квитанция на оплату оставшейся задолженности, если таковая имеется. Оплачиваем указанную сумму. Через несколько дней звоним на горячую линию, предварительно включив запись телефонного разговора, уведомляем об этом оператора и задаём вопросы о действительности расторжения договора, возврате оборудования и закрытия лицевого счёта. Сохраняем запись разговора. Если через какое-то время Ростелеком напоминает о себе какими-то заявлениями, взысканиями и прочим, то сразу пишем досудебную претензию на электронную почту Ростелекома с вложениями заявления на расторжение договора, акта приёма-передачи, а также записью телефонного разговора. И сразу отправляем жалобы в Роспотребнадзор и прокуратуру по электронке или через форму на сайте с тем же самым содержимым. Через несколько дней РТ звонят с извинениями. тысяча извинений.jpg.