Картошка с укропом

Рассказы о разном

InstaMagnet. Домашний проект.

| Comments

В начале лета у меня уже была небольшая коллекция фотографий в моём Instagram профиле. Фотографии были разнообразные: Минск, Львов, путешествие в Италию. Появилось желание материлизовать всё, что было сфотографировано. Где-то на просторах интернета нашел сервисы, которые за вменяемую плату печатали магниты с Instagram и присылали их почтой. Цена всего этого была $15 за 9 магнитов. Магниты красивые, на сайте было много примеров, как они выглядят на холодильниках. Эта мысль не отпускала меня, и я решился. Уже оплачивая заказ, я понял, что не суждено мне воспользоваться хоть каким-либо из найденных забугорных решений - все они использовали PayPal, которого в Беларуси нет ни в каком виде.

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

Прошло 3 месяца, и со мной вышел на контакт этот парень и предложил сотрудничество. За две недели до отпуска я начал работу над проектом, который назвал InstaMagnet.

Технологии

Так как я был PHP программистом, то и выбрал PHP. Не начинать же ради домашнего проекта, который хочется запустить в кратчайшие сроки, учить новый язык. Фреймворк - Symfony2, как тот, что мне больше всего нравится, который знаю и умею.

База данных - MySQL. Сейчас думаю о переходе на MongoDB, чтобы поучиться чему-то новому и тут эта база данных подходит очень хорошо.

Для взаимодействий в браузере, конечно же, jQuery. Так как javascript изучен мной на уровне “запилить, чтобы работало”, то получилась у меня портянка кода, выполняющая то, что нужно было при помощи разных data-property, которыми помечалось очень много html элементов. Нужны они были, чтобы помечать состояние фотографии: выбрана ли она, сколько раз и прочее.

Процессы

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

Сроки

Первый коммит в репозиторий - 30-го августа, сразу после отпуска. 18-го ноября мы написали в социальных сетях, что новый сайт для заказа магнитов из Instagram запущен. Без малого, два с половиной месяца. Долго и можно было сделать быстрее, если не отвлекаться на путешествия, отдых и другие активности. В этом-то и есть плохая сторона “домашних” проектов - вечерами нет желания программировать, потому что за день на работе выматываешься, а на выходных не всегда есть возможность. Тем более когда есть полугодовая шенгенская виза и Прибалтика со своими красивыми городами в нескольких часах езды.

В последнюю неделю мы договорились сделать финальный рывок и запуститься, чтобы не оттягивать. Получилось. Теперь InstaMagnet up and running!

Результат

В результате получилось вполне неплохое и удобное (по моему мнению) решение для тех, кто хочет свои фотографии из Instagram повесить на холодильник или подарить друзьям/родным. Да, необходимо ещё поработать над дизайном, поэксперементировать с конверсиями (когда траффика будет побольше). Возможно, как-нибудь заказать более продуманный дизайн. Тот, что есть сейчас, куплен за $8 долларов в одном из магазинов тем для Twitter Bootstrap.

Развитие после релиза

В самых ближайших планах была динамическая подгрузка фотографий - по 20 штук. Так API Инстаграма выдаёт фотографии изначально. Но я для упрощения сделал это при помощи конструкции do-while в PHP и показывал сразу все фотографии из профиля. Назвать это “элегантным решением” нельзя и это нужно было менять в первую очередь, потому что было непонятно, как поведёт себя система, если у человека в профиле будет очень много (тысячи) фотографий.

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

Из функциональных плюшек - это были главные. Но ещё было желание поковырять и какие-то новые технологические вещи. Первым в очереди был AngularJS. В самом начале не хватило смелость использовать его, так как jQuery я худо-бедно знал, а вот AngularJS надо было штудировать с нуля.

Из всего перечисленного первой я взял именно задачу по интеграции библиотеки AngularJS в проект. И не прогадал. За несколько часов я повторил уже сделанное на jQuery и добавил динамическую подгрузку.

Ещё за пару часов я добавил возможность выбирать фотографии из ленты и понравившиеся фото.

AngularJS произвёл на меня большое впечатление. Он предоставляет возможность реализовать отображение для модели и отслеживает изменения, которые происходят у объекта. Не исключаю, что в будущем это может вылиться в проблемы с производительностью, но сейчас всё работает хорошо и гладко.

Планы на будущее

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

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

Comments