Как я делал свое первое веб приложение⁠⁠

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

Ссылка: https://www.planskeeper.com/

Идея была такая: все задачи нужно разложить по важности и срочности, как в матрице эйзенхауэра. Далее, у каждой задачи, очевидно, есть 1 создатель и может быть несколько исполнителей. Эта идея легла в основу реляционной базы данных, где есть сущность задачи и сущность пользователя. База данных была создана на основе MYSQL.

Далее пришлось сделать серверную часть. Немного погуглив, я решил использовать Spring Boot, т.к. у этой платформы большое коммюнити и можно легко найти ответы на свои вопросы в сообществе.

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

Кто же шлет эти запросы ? Клиентская часть, для которой я выбрал Angular, т.к. надеялся сделать при помощи него красивый дизайн и анимацию.

Также была идея сделать максимально простой регистрацию в приложении и в то же время максимально безопасной. Без всякого дерьма, типа:

придумайте название организации, придумайте пароль (ой, он слишком короткий, попробуйте еще раз) , придумайте логин, напишите в службу поддержки, чтобы подключить всех своих участников команды

Работает это так: неавторизованный пользователь видит только заглавную страницу, с одним единственным полем - ввода email. После ввода email, сервер создает пользователя в базе данных, для которого генерирует длинный токен, который в отличие от пароля, придуманного человеком, трудно подобрать, легко сбросить и невозможно забыть (т.к. вы его и не знали).

Ссылка, содержащая пару email - токен, приходит пользователю на почту, при нажатии на которую, angular записывает в память устройства. В дальнейшем они используются для всех запросов на сервер. При этом, если кто-то решит подбирать токен , то устанавливается небольшой таймаут, превращающий перебор в бесконечно долгое занятие.

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

Для добавления исполнителя реализованы авто подсказки, которые предлагают выбрать исполнителя из числа тех, кто вам что либо поручал или получал задачи от вас. Забавно, что на этот функционал я потратил день, а ведь обычный пользователь, может этого и не заметит(

Для отправки писем я использовал обычный gmail ящик, а потом переделал на postfix, который к сожалению, работает не стабильно, поэтому пришлось возвращаться обратно на gmail.

Для работы всех этих компонентов я приобрел виртуальный сервер на базе ubuntu, на который установил все необходимое ПО, типа certbot, nginx, и кучу других приложений со сложно произносимыми названиями. Еще пришлось установить ssl сертификаты, чтобы сайт отображался по протоколу https, без него сайты не котируются среди миллениалов.

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

И наконец важный момент -сделать так чтобы все работало и оффлайн. Оказывается это можно сделать при помощи при помощи PWA библиотеки, все данные пришлось кэшировать при помощи IndexedDB.

В итоге приложение сохраняет функциональность без доступа к интернет, а при появлении сети можно синхронизировать изменения/новые задачи. Удобно же?

Говорят что за PWA приложениями - будущее, ведь не надо тратить время на разработку отдельно на андроид, и на яблоко.

На андроид PWA приложение работает сразу, а на яблоке придется самостоятельно вставить ссылку из письма в специальное поле. Это связано с "особой" политикой разработчиков браузера Safari с нетрадиционными ценностями .

Вот и все, заходим, тестируем. Кто мне подскажет, как лучше продвигать мое приложение или найти на него инвестора, тому большое спасибо!

Еще раз ссылка https://www.planskeeper.com/