Сервис доступен по адресу: https://grademylook.com/
-
Авторизация пользователя в приложении.
- При помощи сервиса Яндекс. - 20 баллов;
-
Размещение изображений в приложении.
- Через API Яндекс.Диска. Изображения должны загружаться с зарегистрированного приложения в сервисе Яндекс – 40 баллов;
-
Сортировка изображений по названию и рейтингу в порядке возрастания и убывания – 5 баллов;
-
Адаптация под различные разрешения экрана
- Для веб-сайтов
- 4 из разрешений экранов (1200px, 1366px, 1440px, 1920px) – 5 баллов;
- Для веб-сайтов
-
Исходный код в одном из открытых репозиториев (GitHub, GitLab, Bitbucket) - 5 баллов.
Итого получается: 75 баллов.
https://github.com/nsmalimov/tula_web_cup_backend
Использовал:
- Go (основной сервер)
- PostgreSQL (таблицы с пользователями, урлами и тегами)
- Python3 (используется для актуализации урлов см. Подробное описание)
https://github.com/nsmalimov/tula_web_cup_front
Использовал:
- Angular 7
Внешний сервер - nginx. Заказал удалённый сервер, купил ssl сертификат для https, также купил домен. На сервере развернул с помощью supervisord node-сервер, на котором крутится ангуляр. Также развернул основной go-сервер, который принимает запросы от клиента. Установил базу данных для хранения таблиц с урлами, тегами и юзерами. Также запустил асинхронный python-код, который просыпается раз в 60 минут для актуализации урлов с картинками на яндекс-диске.
- Регистрация
С регистрацией не возникло проблем. Достаточно просто удалось сделать регистрацию через яндекс. При открытии страницы ангуляр проверяет стоит ли у пользователя кука, если стоит, то его токен берётся оттуда. Если нет, то у пользователя есть возможность пройти авторизацию. После которой будет выдан яндексом токен, затем клиент отправляет его на сервер, который сохранит его в базе данных, в конце ему будет проставлена кука с этим токеном. Таким образом пользователю не нужно проходить регистрацию каждый раз.
- Хранение картинок
С хранением картинок пришлось довольно таки-много повозиться. Дело в том, что по требованию задания необходимо было сделать так, чтобы пользователь мог смотреть как свои, так и чужие картинки. Но при этом одно из требований состоит в том, чтобы сами картинки находились в папке приложения яндекс-диска.
Так как доступ к папке приложения осуществляется по токену, выдаваемому каждому пользователю для доступа к своей папке приложения, то необходимо было найти решение, чтобы удовлетворить обоим требованиям. Придумал сделать так, чтобы при входе на сайт пользователь отправлял на сервер урлы на картинки, лежащие в его персональной папке приложения.
Пайплайн работы с картинками:
-
Авторизованный пользователь заходит на сайт. Клиент идёт с его токеном в яндекс-диск и получает все картинки из его персональной папки приложения. После чего отправляет их на сервер, который решает, какие нужно обновить, каке удалить, а какие добавить. Таким образом, если пользователь удалил, изменил или добавил картинки в своей папке приложения, то при его входе, они будут актуализированы.
-
Если неавторизованный пользователь заходит на сайт. То он видит чужие картинки. Клиентское приложение попросит сервер показать все картинки.
-
Особенность яндекс-диска в том, что примерно через 1 час ссылки на картинки становятся не актуальными, он перезатирает их новыми по некоторому expire, чтобы избежать того, что "чужие" картинки для пользователя, напомню, что его то картинки мы при каждом его входе актуализируем принудительно, отправляя запрос на сервер, могут стать недоступны из-за некорректных урлов, написал python-скрипт, который 1 раз в час отправляет запрос на сервер с требованием актуализировать ссылки на все картинки в базе данных. Сервер в свою очередь тянет для каждого пользователя по его токену все картинки из его папки приложения и апдейтит их в базе.
Именно этот трюк сделать было сложно и трудозатратно, учитывая требование не хранить картинки локально и в то же время поддерживая возможность смотреть чужие картинки и не имея "глобального" доступа ко всем папкам всех пользователей пришлось существенно усложить сервис.
Была возможность сделать по другому, а именно при каждом входе на сайт пользователя, получить с сервера все токены и сходить за картинками на клиенте. Но этот путь наложил бы нагрузку на клиентское приложение и являлся бы не безопасным, так как пришлось бы отказаться от инкапсуляции токенов на сервере, которые в текущем решении его не покидают и вытаскивать их наружу.
- Сортировка.
Сделал стандартными методами, клиент отправляет на сервер запрос с просьбой вернуть отсортированный список картинок, сервер в свою очередь выполняет select по полю, или desc или asc.
- https
Заказал ssl - сертификат. После чего организовал работу сайта и сервера через https. Так как апи яндекса требует того, чтобы урл перенаправления после прохождения регистрации работал через https.
-
Адаптивная вёрстка. Верстал изначально всё с учётом, того, что сайт должен корректно отображаться на всех устройствах, использовал flex, отображается на всех устройствах корректно, кроме смартфонов.
-
Рейтинг. Создал поле в таблице, готовы хендлеры на сервере, рейтинг приходит вместе с остальными полями. Не успел только доделать, чтобы можно было с фронта выставлять оценки картинкам.
-
Теги. Создал таблицу для тегов, организовал привязки с картинками. Написал хендлеры для создания, привязки и получения тегов. Немного не успел доделать на фронте.
-
Постраничная навигация с ajax загрузкой страницы. Все запросы на сервер с клиента осуществляются асинхронно. Необходимо было организовать только, чтобы можно было через offset загружать картинки пачками. Начал, но не успел доделать.
Тестовые картинки
Для тестов использовались картинки, которые были скачаны несколько лет назад, и использовались для обучения нейронных сетей в рамках студенческих проектов. Все они взяты из открытого доступа. Также были использованы картинки с фотостоков и других общедоступных хранилищ.
Очень хотелось бы попасть на 2 оффлайн этап :) Надеюсь, что набранных мной баллов будет достаточно.