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

Привет, {{ хабраюзер }}!

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

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

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

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

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

Дизайн

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

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

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

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

Фронтенд

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

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

• yeoman это:
  
  
  
  
  • yo — инструмент для создания структуры фронтенда
  
  
  • bower для управления зависимостями
  
  
  • grunt собирает фронтенд, умеет сёрвить файлики
    
    тестовым сервером, дружит с livereload.
    
    Делает уйму чего ещё.
  
  
  
  


• angular клиентский js фреймворк


• bootstrap для грида


• sass вместо css

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

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

Сервер

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

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

Запуск

Через три дня приложение было готово. Выложил его на heroku, прикупил домен и настроил аналитику.

Пригласил друзей попробовать.

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

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

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

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

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

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

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

whatdoyouwantforchristmas.net

github

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

С наступающим!

Отдельное спасибо fealaer за помощь в работе над проектом!

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.