Сервіс KeepSnap

https://keepsnap.com/

Метою проекту було створити затишну платформу для дистрибуції особистих фотографій до кінцевого користувача зі зручною оплатою.

Уявімо ситуацію: фотограф ходить містом і фотографує всіх охочих. Він роздає свої візитки, де крім основних його контактів крупно написана адреса його персональної сторінки. Люди, які зайшли туди, можуть знайти свої фотографії та купити їх. Одним із головних плюсів можна вважати, що фотографії зроблені на якісну фототехніку, досвідченою людиною, яка розуміє правила композиції з правильною експозицією. Фотоапарати і мобільні телефони є майже у всіх, але мало хто відмовиться від хороших знімків на пам'ять.

Наша команда розробників у тісній співпраці із замовником, створювала сервіс, де будь-який фотограф, від аматора до професіонала, міг би заробляти цілком простим і доступним способом. У розробці використовували Symfony2, Sphinx, Grunt і ще дюжину технологій. Проєкт живе і постійно розвивається. З'являються нові можливості для фотографів, поліпшується зручність використання інтерфейсу.

Дизайн логотипу

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

Серед варіантів реалізації була спроба обіграти смислові варіації назви. Таким чином у знак було вкладено гаманець, фотоапарат. Також у знаку можна побачити альбом для фотографій. Логотип говорить про те, що сервіс орієнтований на фотографів, що ми зберігаємо світлини і даємо змогу на цьому заробити.

Проектування

Сервіс можна умовно розділити на кілька окремих частин. Кожна частина задумана таким чином, щоб ефективно вирішувати завдання користувача. Така складна структура сайту вимагає уваги всієї команди, щоб залишатися зрозумілою кінцевому користувачеві.

Розробка починалася з ретельного проектування MySQL бази даних і загалом основної архітектури проекту. Обговорювалися технології, які будуть використовуватися для проєкту.

За основу для проєкту було обрано PHP framework Symfony2. Завдяки його гнучкості не складає труднощів як дописувати новий функціонал, так і вносити правки і зміни в уже наявний. Для забезпечення збереження користувацьких даних було ухвалено рішення для всього проєкту використовувати безпечне SSL-з'єднання.

Адаптивний дизайн галереї фотографа

Інтерфейс галереї виконує кілька важливих функцій: швидкий пошук своїх фотографій за датою і часом зйомки, зручний перегляд і додавання в кошик. Фільтр за часом зручний під час пошуку фотографій у активних фотографів, які зробили сотні знімків за день. Передбачена можливість для користувача поскаржитися на фотографію і запросити видалення її з галереї фотографа. Інтерфейс однаково добре працює і на екрані монітора, і на планшеті, і на телефоні.

Інтерфейс фотографа

Це "домашня" сторінка фотографа. Тут він завантажує зняті фотографії в максимально доступній якості, керує публікацією і редагує EXIF дані знімків. У користувача є можливість редагувати кілька фотографій одночасно. Зручний фільтр дає змогу вибрати фотографії за певну дату.

Знімки можна завантажувати просто перетягнувши файли з папки у вікно браузера. Вони проходять автоматичну перевірку на відповідність розміру та формату. Далі на сервері генеруються зменшені зображення для попереднього перегляду фотографій у галереї. Під час завантаження ми зберігаємо оригінальну EXIF інформацію, на основі якої розраховується дата і час зйомки.

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

Рейтинги користувачів

Рейтинг розраховується на основі проданих фотографій і є градацією, яка впливає на процентне співвідношення заробітку фотографа від продажу. Прості та зрозумілі іконки ілюструють поточний рейтинг фотографа.

На сайті фотограф може замовити особисті візитки з адресою своєї сторінки. За бажання він може вказати свої додаткові контакти, такі як ім'я, телефон, e-mail. Є можливість згенерувати pdf файл візитки щоб надрукувати візитку самостійно.

Серверна частина

Як уже згадувалося вище, проект розроблено на сучасному PHP framework Symfony2. Дані зберігаються в MySQL базі даних. Так само використовується Sphinx з RealTime Index для здійснення пошуку. Для поділу навантаження і вирішення деяких тривалих і ресурсномістких завдань було використано RabbitMQ.

Для обробки завантажуваних фотографій і створення прев'ю зображень для фотографій використовується ImageMagick®. Великі прев'ю створюються як Progressive JPEG, що дає змогу швидше завантажувати зображення на сторінці. Для зменшення ваги прев'ю фотографій з них видаляється вся EXIF інформація.

KeepSnap підтримує завантаження не тільки JPEG зображень, а також файли формату DNG. Щоб з DNG згенерувати прев'ю з урахуванням всіх виставлених параметрів і налаштувань фотографа було розроблено спеціальну утиліту-конвертер, яка рендерує JPG прев'ю з урахуванням всіх коригувань і налаштувань, зроблених фотографом у DNG файлі.

Для роботи з мобільними додатками проект має RESTful API. Також API використовується для завантаження зображень прямо з редактора Adobe Lightroom, для якого було розроблено спеціальний плагін.

Статистика

У кожного фотографа є доступ до корисної статистики свого профілю. Можна аналізувати свої продажі прямо з інтерфейсу сайту. Крім цього, до профілю фотографа можна підключити Google Analytics і отримувати ще більш розгорнуту статистику.

Для відображення графіків використовується JavaScript бібліотека Highcharts. Яка дає змогу виводити зрозумілі та зручні графіки зі статистикою з продажів і доходів. Статистику можливо отримувати за потрібний період дат, а також у розрізі дня, тижня або місяця.

Система оплати

Під час купівлі фотографій на сервісі користувачеві надається 2 варіанти оплати: PayPal і платіжні картки. Для опрацювання платежів з платіжних карток був інтегрований сервіс Payfirma.

Форма заповнення даних про платіж максимально проста і зручна. На сервері використовується захищене SSL-з'єднання для забезпечення безпеки користувацьких даних.

Також у студії зробили повноцінні мобільні додатки для користувачів сервісу. Розробка велася для платформ iOS і Android. iOS и Android.

Оскільки багато професійних фотографів використовують Adobe Lightroom під час опрацювання знімків, ми написали плагін, що дає змогу вивантажувати фотографії з програми прямо на сервіс.

KeepSnap Directory

У сервісу є відгалуження, що являє собою каталог фотографів, відкритий для перегляду всіма охочими. Фотограф, розміщуючись у каталозі, вказує своє місце розташування, стилі, в яких він працює, контактні дані та своє портфоліо.

Клієнти фотографів через зручний інтерфейс пошуку знаходять фотографів, які підходять під умови пошуку, і зв'язуються з ними. Максимально швидкий і простий спосіб знайти роботу для фотографа. Дизайн каталогу також продуманий з урахуванням різних екранів пристроїв.

Для відображення карти і маркерів фотографів на карті використовується Leaflet Javascript бібліотека з Google Maps. У каталозі можливий пошук фотографів з урахуванням дистанції від зазначеного місця розташування, що дає змогу точніше фільтрувати результати пошуку в каталозі. Після перегляду робіт з портфоліо фотографа можна зв'язатися з ним безпосередньо або додати його до списку вподобаних фотографів.

Над проектом працювали:

Артур Мкртичян
Керівник проєктів
Oleg
Дизайнер
Maksym
Дизайнер
Ігор Богдосаров
Верстальник
Ігор Хохлов
Розробник
Вадим Гуменний
Back-end розробник
Sasha Karataev
Розробник
Саша Ленський
Back-end розробник
Anatoliy Makarov
Frontend розробник
Євген
Системний адміністратор
Міша
QA менеджер
Володимир Сутовський
Керівник проєктів