Новогодние Подарки As A Service

Привет, {{ читатель }}!

Помнишь свои детские ощущения на Новый Год? Предвкушение чуда, приятное волнение перед чем-то новым, запах ёлки? Меня родители просили написать письмо Деду Морозу. Я подходил к этому занятию со всей серьёзностью. Маленький копирайтер во мне должен был решить, что он хочет получить (это простая часть). И убедить Деда Мороза в том, что он это действительно заслужил (это уже сложнее). Главное, мои старания никогда не были напрасны.

В канун Нового Года мне пришло в голову напомнить себе и друзьям, как круто это было! И заодно дать волю внутреннему гику :) Я решил запустить сайт для сбора новогодних пожеланий.

Спустя 3 дня марафона проект был запущен и появились первые пользователи. В этой статье я опишу процесс разработки и технологии, которые использовал.

Итак, вернёмся к моменту эврики. Случился он, когда я увидел эту картинку в ленте:

Спустя пятнадцать минут… или час идея оформилась. Она настолько увлекла меня, что я тут же приступил к реализации.

Дизайн

Начал с дизайна. Хотелось сделать что-то тёплое и ламповое. И быстро! До Нового Года оставалась всего пара недель!

Лезу на Creative Market ^[1], нахожу картинки, которые передают нужное настроение, покупаю:

Извлекаю основные цвета, делаю первые макеты в photoshop:

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

Фронтенд

Перехожу к фронтенду. Тут я использую yeoman ^[2] для создания и управления проектом. С помощью generator-angular создаю проект, заточенный под angular. Добавляю bootstrap ^[3], мне нравится их грид. Вместо css использую sass ^[4], потому что… ну много почему.

Итак, стек клиента:

• yeoman ^[2] это:
  • yo — инструмент для создания структуры фронтенда
  • bower ^[5] для управления зависимостями
  • grunt ^[6] собирает фронтенд, умеет сёрвить файлики
    тестовым сервером, дружит с livereload ^[7].
    Делает уйму чего ещё.
• angular ^[8] клиентский js фреймворк
• bootstrap ^[3] для грида
• sass ^[4] вместо css

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

Многим веб-приложениям сегодня вообще не нужен серверный код. Это крышесносно! Особенно когда вспоминаешь, что творилось в веб-разработке 3-5 лет назад! `Увидимся в аду, JSP!`

Сервер

Единственная причина, по которой я не стал использовать Apigee ^[9] или Parse ^[10], вместо того чтобы самому писать серверный код, в том что мне нужно было дополнительно обрабатывать данные до/после сохранения. Хотя Parse и это может, было некогда разбираться.

В этот раз я быстренько соорудил сервер на node.js ^[11] и express ^[12], с mongodb ^[13] хранилищем.

Запуск

Через три дня приложение было готово. Выложил его на heroku ^[14], прикупил домен и настроил аналитику.
Пригласил друзей попробовать.

За два дня на страничку зашли около 200 человек. Конечно, нашлись баги (и продолжают находится). Но фидбек, который я тут же начал получать вдохновляет! Баги фиксятся быстро, новые фичи пишутся легко.

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

Выводы и ссылки (наконец-то)

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

Фидбек на начальной стадии не только помог избежать ненужных фич, но и поднял мотивацию. А наблюдать за тем, как люди используют этот сервис отдельное удовольствие. Об этом будет следующая статья, “аналитическая”, после Нового Года.

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

А пока приглашаю всех заценить, так сказать:

whatdoyouwantforchristmas.net ^[15]
github ^[16]

Код открыт. Пул реквесты и баг репорты приветствуются! Также как критика идеи и предложения фич.

С наступающим!
Отдельное спасибо fealaer ^[17] за помощь в работе над проектом!

Автор: filipovskii_off

Источник ^[18]