Как я провел лето (история стартапа GeekyFriends.com)

Об авторе: Черников Вячеслав, 26 лет. Живу в Воронеже (Россия). Люблю Linux и коммуникаторы. Работал на сайтах Ladoshki.com, iPAQChoice.com и Handster.com. В настоящее время я участвую в создании стартап-проекта GeekyFriends.com. Email: slava.chernikoff@gmail.com.



Аннотация: небольшой рассказ о том, как мы создаем компанию GeekyFriends.com. Этот проект стартовал чуть меньше года назад из желания разрабатывать приложения для Maemo (сейчас — Meego). В статье описаны технические и творческие решения, найденные во время работы над нашим первым продуктом Geeky Avatar, который позволяет создавать забавные аватарки для контактов из адресной книги.


Введение



Meego, Moblin, Maemo, мотыга, мармелад, мама — есть что-то неуловимое и мелодично-приятное в словах на букву «м» (как, впрочем, и в словах с другими замечательными буквами). Уже более 10 лет я активно слежу за новостями рынка высоких технологий [раньше читал журналы, сейчас погружаюсь в интернет] и за это время успел выбрать себе любимые направления, среди которых наиболее приоритетным всегда оставались мобильные устройства. Помню анонс компании Intel на одной из конференций своих чудесных прототипов планшетных Moblin-компьютеров с QWERTY-клавиатурой и небольших поворотным дисплеем. К сожалению, эти устройства так и не дошли до рынка. С другой стороны компания Nokia несколько лет аккуратно подступалась к рынку интернет-планшетов, шаг за шагом вытачивая горячо любимую мной операционную систему Linux в продукт с именем Maemo. И на сегодняшний день мы получили очень интересный и быстро эволюционирующий проект под названием Meego, сочетающий лучшее из Moblin и Maemo. За сим предлагаю завершить хвалебную присказку и перейти к рассказу о том, как я провел это невыносимо жаркое лето.



Почти год назад, точнее в декабре 2009 года, гражданин Ч. (то есть я), твердо принял решение заняться программированием под мобильную платформу Maemo, а также стать независимым и самостоятельным юридическим лицом. Для этого было необходимо решить ряд непростых задач — выбрать удобные инструменты для разработки и определиться с идеей для первого коммерческого продукта.



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


Инструментарий



Начнем с инструментария. За те несколько лет, пока Linux у меня активно использовался на домашних компьютерах/ноутбуках/Nokia N810, мне ни разу не приходилось под него программировать, поэтому я занялся не только поиском удобной среды разработки, но и активно вспоминал благополучно забытые языки программирования. Так как предстояло писать под Linux, то никакой достойной альтернативы для С\C++ мне найти не удалось, поэтому мой выбор пал сначала на Gtk \Hildon, а потом, к счастью, я открыл для себя Qt. Почему к счастью? Тут есть несколько ключевых моментов: Qt-приложения отлично работают на множестве платформ; библиотеки Qt реализует практически все необходимые современному программисту классы и функции. К тому же Nokia сделала отличную и удобную интегрированную среду разработки Qt Creator, которая на мой неискушенный взгляд представляется чуть ли не идеалом для проектов небольшой и средней сложности.


Идея?



С выбором идеи тоже не было особых проблем, так как я считаю, что практически любая красиво реализованная идея может превратиться в успешный программный продукт. Сразу оговорюсь, наш первый коммерческий проект под названием Geeky Avatar сейчас находится на стадии пред-финальной отладки, поэтому в успешности проекта мы сможем убедиться только через 1-2 месяца, когда приложение попадет в магазины Intel AppUp и Nokia Ovi Store.



Часто приходится слышать от знакомых, что они хотят начать свой бизнес, но у них нет идей для продуктов. Глупости! Идей имеется бесконечное количество, нужно только отобрать среди них те, которые были бы в первую очередь близки и интересны вам, и могли бы быть близки и интересны другим людям. Как это сделать? Для начала мы составляли списки идей 10-15 штук, и потом отбирали из них наиболее интересные.



Существует множество способов находить идеи. Сам я часто использую следующие простые упражнения, которые могут расшевелить творческий генератор даже у воющих с растениями зомби. Прежде чем приступить к творческому процессу мы задаем контекст — например, «Придумать идею программы для коммуникатора» и дальше уже выполняем простые алгоритмы (на выбор):


  • Берем случайное слово (можно тыкать пальцем в книгу на случайной странице) и придумываем к нему 10 нестандартных на ваш взгляд применений. Если идеи не появилось, повторяем еще раз. Обычно нескольких циклов бывает достаточно, чтобы наткнуться на интересное решение.
  • Берем 2 случайных слова (можно опять тыкать пальцами в книгу) и стараемся связать их в одном продукте или решении. Повторять на свое усмотрение.



Главное на первом этапе — убрать у себя внутреннего критика и принимать все возникшие идеи как полезные. Критик включается после того, как сформируется список из 10-15 идей.



Это маленькие техники, которыми пользуюсь я сам, и которые на мне показывают достаточно хорошие результаты. Наверняка у вас есть свои способы креативить. Для себя я открыл доступ к творчеству через использовании метафор. «На что похож данный объект?», «что он мне напоминает?» — ответив на эти вопросы можно легко выйти на новую идею.



Итак на первых порах, мы с компаньоном собирались раз в неделю и помимо изначально выбранной идеи обсуждали возможные альтернативы. В конце концов генератор смешных аватарок для адресной книги был утвержден как основной проект, а поиск новых идей был отложен. Здесь стоит заметить, что мы изначально решили не искать себе спонсоров и начинать стартап на свои собственные средства, работая над GeekyFriends.com в свободное (обычно вечернее) время. Пока нам потребовалось оплатить лишь покупку доменного имени, хостинг и регистрацию в Ovi Store. Так что затраты получились небольшими, и я бы назвал настоящий момент чуть ли не идеальным для начала собственного бизнеса вокруг Meego. Мы считаем, что если проект будет сделан качественно и интересно, то он будет приносить пусть не миллионы, то хотя бы достойное вознаграждение. Проверим это через пару месяцев.


Команда



Отдельно хочу рассказать о нашей команде:


  • замечательный художник/фотограф Лена, работает над созданием всех графических элементов программы, разработала стилистику аватарок (смотри скриншоты ниже);
  • Java-программист Юрий, параллельно разрабатывает версию для Android, является «техническим» мозгом проекта и вместе с ним мы обсуждаем код и функционал приложения;
  • ваш покорный слуга Вячеслав — работаю над Qt-версией приложения, создаю контекст для совместного творчества нашей команды.


Интерфейс



После выбора идеи, инструментария и составления примерного технического задания (для первых итерация проекта) мы приступили к программированию. На наш взгляд, один из самых важных этапов в разработке любой пользовательской программы — создание интуитивного и простого интерфейса, который по максимуму будет выглядеть «родным» для целевой платформы.







В своей программе мы старались придерживаться нескольких простых правил:


  • интерфейс должен быть ориентирован под управление с помощью пальцев;
  • желательно сделать интерфейс «растягивающимся» под разные размеры и положения экрана;
  • придерживаться концепции WYSIWYG;
  • функциональные элементы должны выделяться из общего графического оформления;
  • использовать ненавязчивые спец. эффекты/анимацию там, где это возможно и уместно (а не как в современных голливудских блокбастерах);
  • максимально упростить интерфейс, оставив только необходимые компоненты.



На поиски «золотой середины», удовлетворяющей всем этим критериям, у нас ушло довольно много времени. Приходилось все реализовывать и обсуждать, тестируя на различных устройствах. Некоторые идеи то подвергались жесткой критике, то снова находили поддержку. Для консультаций привлекались друзья, знакомые и не очень знакомые дизайнеры. По нашему опыту — на разработку концепции интерфейса и своего стиля, а также тестирование различных вариантов мы потратили примерно столько же времени, сколько и на написании функционального кода. А то и больше!



Проект Geeky Avatar является нашим первым опытом создания мобильного приложения, поэтому я постараюсь рассказать о том, через какие решения нам пришлось пройти.







Хочу похвастаться маленьким know-how, который мы использовали в анимированных панелях. Если слева или справа на панели прячутся иконки, то мы отображаем маленькую белую точечку в соответствующем углу. На первый взгляд эта точка незаметна, однако через какое-то время человек понимает зачем она нужна. Вначале вместо точки мы использовали стрелку и тени, но многие пользователи воспринимали стрелочку за управляющий элемент и очень долго старались тыкнуть пальцем с малюсенькую картинку. Это небольшое изменение отлично влилось в общую концепцию интерфейса.



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


  • пользователь видит, что именно поменялось;
  • пока старый элемент уезжает с экрана, мы начинаем подгружать с накопителя соответствующие картинки. Это создает эффект мгновенной реакции.



Следующий момент, про который я хочу рассказать — интеграция с системой. Там где это возможно, мы старались использовать стандартные компоненты: меню, кнопки и элементы ввода. Мимикрию под целевую платформу Qt взяло на себя. Потребовалось лишь слегка «подпилить» меню, и расставить специфические для каждой платформы параметры окон (максимизировать, располагать в стеке и прочее).



Отдельного разговора заслуживает тянучесть интерфейса. Это не проблема, когда программа написана под конкретное устройство. Однако что делать, если приложение должно отлично отображаться как на маленьких экранах с разрешением 240х320 пикселей, так и на FullHD-телевизоре (есть у нас и такое тестовое устройство). Тем более, что большинство современных телефонов поддерживают функцию автоматического вращения экрана. «Крути ни крути» — подумал я и написал свой «тянучий» обработчик изменения размеров всех окон и диалогов программы.



Все элементы «тянучего» интерфейса уложены в QVBoxLayout. В зависимости от размера окна я рассчитываю новую высоту панелей по заранее определенным соотношениям, найденным на моей любимой бумаге (без рисования и набросков от руки мой мыслительный процесс идет очень туго).


#define MAX_TOOLBAR_HEIGHT 120  
#define MIN_TOOLBAR_HEIGHT 20  
  
// ==== кусок кода из обработчика resizeEvent() =====  
// минимальная высота рамочки с аватаркой,  
// в зависимости от высоты самого родительского окна  
  
minFrameHeight = height()/2;  
  
// максимальная высота рамочки с аватаркой,  
// в зависимости от высоты самого родительского окна  
  
maxFrameHeight = 3*height()/5;  
  
// ожидаемая высота панели с иконками  
  
estimateToolbarHeight = 2*height()/15;  
  
if (estimateToolbarHeight<=MIN_TOOLBAR_HEIGHT)  
    toolbarHeight = MIN_TOOLBAR_HEIGHT;  
else if (estimateToolbarHeight < MAX_TOOLBAR_HEIGHT)  
    toolbarHeight = estimateToolbarHeight;  
else  
    toolbarHeight = MAX_TOOLBAR_HEIGHT;  
  
// далее для всех панелей делаем setFixedHeight(toolbarHeight),  
// а оставшуюся область отдаем под рамочку с аватаркой, тоже через fixedHeight 




Оптимизация



Медленно, но верно мы подошли к оптимизации нашей программы. Глядя на характеристики современных коммуникаторов (не говоря уже о нетбуках и планшетах), мысли об оптимизации может и не возникнуть. Однако у меня в качестве тестового устройства был старенький Toshiba G900 под управлением Windows Mobile 6.5, поэтому оптимизации подверглось все вдоль и поперек.



Начнем с самого первого решения — использование QImage для хранения временных картинок и иконок. Это удобно тем, что QImage позволяет уменьшить объем занимаемой памяти за счет использования конвертации в различные форматы. Я выбрал 16-битный формат хранения изображений, что уменьшило потребление памяти на 3-7 МБ по сравнению с QPixmap (шутка ли, программа работает с несколькими сотнями сжатых PNG-картинок различного размера), на скорости работы это не отразилось.



Следующим этапом стало кеширование. Тут я тоже отошел от стандартного QPixmapCache ввиду прожорливости и неконтролируемости последнего. Вместо этого я использую свой массив фиксированного размера с иконками. Картинки само собой хранятся в 16-битном QImage и подгружаются сразу после выбора пола аватарки. Если вдруг иконок становится больше, чем массив может вместить, то я удаляю случайный элемент из этого хранилища, а на его место записываю новый. Таким образом мне удалось свести чтение с накопителя к минимуму и реализовать максимально быструю реакцию на действия пользователя. И это при заметном уменьшении объема занимаемой ОЗУ! Я не хвастаюсь, но проделанной работой вполне доволен. Интересны подробности — отправь SMS на номер… Ой. Кусочек кода приводится ниже.


QMap<int,qimage> iconCache; // храним иконки здесь  
//у каждой иконки есть свой уникальный id, который используется для поиска по кешу  
  
d->items[n].finalImage = d->iconCache.value(d->items[n].id,QImage());  
QImage &image=d->items[n].finalImage;  
  
if (!image.isNull()&&image.size()==QSize(sz,sz))  
return; //если нашли, то выходим из функции  
  
// ===== вырезано цензурой =======  
  
//здесь мы прочитали иконку с диска и добавили ее на панель  
  
// ===== вырезано цензурой =======  
  
// конвертируем в 16-битный формат, работает очень быстро  
  
image = image.convertToFormat(QImage::Format_ARGB4444_Premultiplied);  
  
// если лимит превышен - удаляем случайный объект из кеша  
  
if (d->iconCache.count()>=CACHED_ITEMS_COUNT){  
  
 int itemsToRemove=d->iconCache.count()-CACHED_ITEMS_COUNT+1;  
  
 // удаляем лишнее количество иконок  
  
 for (int i=0;i<itemstoremove;i++) d-="">iconCache.remove(d->iconCache.keys().value(qrand()%CACHED_ITEMS_COUNT));  
  
}  
  
d->iconCache.insert(d->items[n].id,image);  
  
</itemstoremove;i++)></int,qimage> 




Выводы



Вот ключевые моменты, на которые мы обращали внимание при разработке Geeky Avatar:


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



Использование Qt открывает отличные возможности для разработки красивых, удобных и быстрых приложений для Meego.



Сейчас самое благоприятное время начинать свой стартап при поддержке Intel и Nokia. Затраты минимальны — нужно только желание!


Заключение



Итак, что в сухом остатке. Проект Geeky Avatar вышел на финальную стадию и скоро будет доступен в магазине Ovi Store. Сразу после выхода устройств на Meego, мы планируем выложить наше приложение и в Intel AppUp. Мы не жадные, поэтому цена будет минимальной, и надеемся, что программа вам понравится. Параллельно с коммерческими продуктами, мы будем развивать и open source-проекты, первым из которых станет приложение Geeky Reader (чтение текстов с автопрокруткой и развитие навыков скорочтения; текущее название — G-Speed Reader, https://garage.maemo.org/projects/gspeedreader). О дальнейших планах развития Geeky Avatar много писать не буду, хотя идей очень много. В следующем году планируется вторая версия этого продукта с большим количеством вкусностей и нововведений.



Пишите комментарии, задавайте вопросы, оставайтесь на связи!



Перепечатано с разрешения автора с оригинальной статьи.