Оценка стоимости разработки flash-приложения.

На прошедшем вчера в Ростове-на-Дону джем-сейшене web-разработчиков, я спьяну по-обещал собравшимся выложить свой принцип оценки стоимости разработки flash-приложения. Принцип этот относительно прост, абсолютно не нов и достаточно универсален.Не я придумал, что задачу любой сложности можно резбить на ряд под-задач, и не я придумал, что работа программиста состоит на 80% из рутинной работы по применению часто повторяющихся элементов. Остается только определиться с тем какие элементы будут применяться в проекте и оценить стоимость их внедрения в руб/час, или $/час по-жадности.Итак, вот что у меня получилось исходя из того, что я flash-разработчик и свою жадность я оцениваю в 15$ в час:

Цены на разработку флэш-элементов

стандартный набор работ:

Виды работ	Время разработки	Стоимость работ
Рекламный баннер. 1 сцена	1 час	15$.
Разработка шапки сайта. Со статической шириной. 1 сцена (без учета использования внешних данных)	1 час	15$.
Разработка шапки сайта. С динамически изменяемой шириной. 1 сцена (без учета использования внешних данных)	2 часа	30$
Использование внешних данных. Переменные окружения.	1 час	15$.
Использование внешних данных. Внешний файл (XML,.txt)	1 часа	15$.
Использование внешних данных. Получение/Отправка текстовых данных 1 метод	2 часа	15$
Использование внешних данных. Получение/Отправка изображений 1 метод	2 часа	15$
Использование внешних данных. Получение/Отправка видео-поток 1 метод	4 часа	60$
Использование внешних данных. Получение/Отправка аудио-поток 1 метод	2 часа	30$
Использование внешних данных. Получение/Отправка DOM (XML/JSON) 1 метод	2 часа	30$
Шифрование.Дешифрование MD5 1 метод	3 часа	45$.
Разработка галереи изображений 1 уровень(без учета взаимодействия с внешними данными)	10 часов	150$
Разработка галереи изображений многоуровневая(без учета взаимодействия с внешними данными)	16 часов	240$
Разработка флэш-сайта . 1 раздел(без учета взаимодействия с внешними данными)	8 часов	120$
Разработка меню сайта (без учета взаимодействия с внешними данными) 1 уровень	8 часов	120$
Настройка приложения с учетом политики безопасности FlashPlayer 1 домен	2 часа	30$
Установка оригинального предзагрузчика элемента	1 час	15$

Организация модульных приложений

Виды работ	Время разработки	Стоимость работ
Организация загрузчика модулей приложения (организация загрузки, позиционирования, обработки событий)	2 часа	30$
Разработка схемы модульности приложения(разделение функционала на модули)	3-4 часа	45 - 60$
Создание модуля, организация взаимодействия с основным приложением(1 модуль)	2 часа	30$
Оптимизация компиляции модульного приложения (на 1 модуль)	1 час	15$

Организация взаимодействия с внешними API

Наименование	Время разработки	Стоимость разработки
API vkontakte.ru	20 часов	300$
API flickr.com	30 часов	300$
API YouTube	40 часов	600$
API GoogleMap	10 часов	150$
SmartFoxServer(без учета установки и настройки сервера)	20 часов	300$
Создание серверного расширения на AS Для серверов SFS и FMS 1 метод	2 часа	30$
Soap/WSDL создание 1 метода обработчика	2 часа	30$
Поиск в Google на основе Google API	3 часа	45$

Обработка изображений средствами Flash

Виды работ	Время разработки	Стоимость разработки
Подключение компонента пользовательского интерфейса Drag/Resize/Rotete	12 часов	180$
Подключение компонента пользовательского интерфейса Crop	8 часов	120$
Загрузка медиа-файла с локальной системы пользователя	4 часа	60$
Выгрузка медиафайла в локальную систему пользователя	4 часа	60$
Добавление 1 стандартного фильтра	1 час	15$
Искажение изображения. 1 алгоритм	2 часа	30$
Ресайз изображения средствами флэш-клиента	2 часа	30$
Наложение изображений	4 часа	60$
Создание контролов на основе Flex-framework 1 шт	1 час	15$
Создание собственного контрола	2-4 часа	30-60$

Работа с данными

Виды работ	Время разработки	Стоимость разработки
Разработка общей информационной схемы приложения на основе микро-архитектуры PureMVC	2 часа	30$
Расширение информационной схемы взависимости от сложности приложения (аналог создания 1 таблицы БД)	2 часа	30$
Создание обработчика 1 удаленного объекта(получение/отправка данных)	2 часа	30$
Валидация данных введенных пользователем с сообщением ошибок заполнения на стороне клиента 1 поле	1 час	15$
Организация формы авторизации/ регистрации пользователя на стороне клиента с отправкой данных и обработкой результата	6 часов	90$
Организация локального сохранения данных в SharedObject(аналог cookes) 1 объект	1час	15$
Связь с внешним интерфейсом (вызов.обработка JS метода)1 метод	1 час	15$
Организация SEO пригодной внутренней индексации разделов (страниц)	2 часа	30$
Организация внутреннего поиска по подстроке 1 метод	1 час	15$
Организация обработки RSS/Atom	2 часа	30$

Работа с мультимедиа

Виды работ	Время разработки	Стоимость разработки
Организация демонстрации видео-потока flv/rtmp(без учета контролов. Подключение контролов см. выше)	4 часа	60$
Организация трансляции видео-потока с камеры локальной системы пользователя (конечная точка — любой медиа-сервер) без учета установки и настройки медиасервера.	6 часов	90$
Организация приема потокового-звука (радио). Без контроллов (Подключение контролов см. выше)	2 часа	30$
Организация непрерывного вещания плейлиста(аудио/видео). Без контроллов (Подключение контролов см. выше)	2 часа	30$
Установка стандартного медиаплеера (JW Player)	2 часа	30$
Доработка функциональности стандартного меда-плеера JWPlayer 1 новый элемент	4 часа	60$

Разработка AIR(Настольных приложений)

Вцелом все точно тоже самое, что и в предыдущих разделах, плюс:

Виды работ	Время разработки	Стоимость разработки
Получение списка элементов локальной системы пользователя	4 часа	60$
Получение доступа к файлу в локальной системе пользователя	2 часа	30$
Сохранение данных в файл в локальной системе пользователя	3 часа	45$
Создание локальной базы данных в системе пользователя (Sql Light )1 таблица	1-3 часа	15- 45$
Взаимодействие с базой данных в локальной системе пользователя (Sql Light )1 метод(запись/ удаление/ редактирование)	2 часа	30$

Естественно, список пополняется и изменяется в процессе творческой работы (на что программист тратит остальные 20% своего времени).Надеюсь приведенный прейскурант, а так же сам принцип формализации творческого процесса поможет давать правильную оценку времени и денег, что несомненно является самой трудной и ответственной задачей разработчика.

Townhouse

Я прошу прощения, за то, что не закончил в срок материал по теме "Flex+drupal=", хотя обещал, что он выйдет на прошедшей неделе. Работы по его изданию ведутся, но помешало событие, которое я задумал несколько месяцев назад. А я задумал следующее: Переехать из душной квартиры в частный дом, вернее в townhouse. В моем случае это половина двухэтажного дома на окраине г.Аксая, в котором я живу, при этом, я съезжаюсь со своими родителями (я - это я+ моя жена + двое детей). Суть процесса заключается в том, что мы продаем 3 пренадлежащие нам хрущебы и за эти денги покупаем очень хороший, сделанный творческими людьми, до мелочей продуманный дом с небольшим участком земли. Ребята которые его построили - коллектив профессионалов с Большой Буквы, которые мало того, что построили для нас это чудо, но и еще помогли провернуть такую сложную операцию, причем сделали это на доверии и максимально комфортно для покупателя. Спасибо им огромное. Правда, в связи с этим я на некоторое время впал из привычной мне жизни. Прошу меня простить. Скоро буду...

Flex+Drupal=...

Итак задача. Построить flash-сайт, причем на CMS.
Что такое CMS и зачем это надо - читать тут.
Для реализации этой задачи можно использовать два подхода:
1. Писать свою CMS -задача не простая, а главное долго. Отметаем этот вариант, хотя бы потому, что CMS уже написано великое множество, плодить свою, и не факт, что лучшую, мне кажется задачей неблагодарной.
2. Выбрать из готового. Есть варианты:
http://fuzzle-cms.ru но за деньги Цена основной версии Fuzzle CMS 12900 руб для физлиц (для юр.лиц - 19500)
http://www.flashloaded.com/ здесь слегка дешевле, но на английском Price: $149.95 (per website) , правда и функциональность ограничивается в основном неплохим текстовым процессором на flash.
http://fcmspro.com/ - 299$ и тоже на буржуйском
http://qubix-cms.org/ на русском бесплатно и очень грамотно.

В общем вариантов достаточно много, и если в Ваши задачи входит создания простенького функционально, но броского анимированного flash-сайта и в Вашем бюджете есть немного лишних денег, то дальше можете не читать.
Мы же откажемся от готовых решений по ряду причин. Ну, во-первых это не спортивно, а во-вторых, примем во внимание функциональную ограниченность вышеописанных систем, а так-же проблематичную расширяемость...
Как Вы понимаете, переходим к варианту №3, который будет некой золотой серединой, между вышеизложенными.
Берем традиционную, опробованную на тысячах web-сайтов, бесплатную CMS, поддерживаемую огромным многоязычным комьюнити разработчиков (в том числе и на русском языке), имеющую вполне развитую русскую локализацию. Такой системой, в нашем случае, будет CMS Drupal, хотя бы потому, что в наших экспериментах мы не единственные и работы в этом направлении уже велись, и , что самое главное, в состав подключаемых к системе модулей входят модули специально разработанные для взаимодействия системы с flash-клиентом. Но о них чуть позже. Итак начнем.

1.Flex+Drupal=... Строим сервер.

Нам потребуется:
Дистрибутив Drupal - берем здесь Drupal 6.13 (последнее обновление 2.07.2009 1.05Mb);
Для версий Drupal 6.x: русский перевод интерфейса (в формате PO, всё в одном файле)
AMFPHP 1.9 Beta 2 совершенно чудесная библиотека на PHP, наверняка пригодится вам для организации взаимодействия flash-клиент-сервер и за рамками данного проекта.
AMFPHP модуль Drupal - модуль для реализации работы библиотеки AMFPHP в контексте CMS Drupal
Services модуль Drupal - модуль для организации работы web-сервисов в контексте CMS Drupal
Views - чудесный модуль, только за него можно полюбить Drupal
не скупимся - берем самые последние стабильные версии, все равно бесплатно.

Устанавливаем Drupal - инструкция тут читаем от "Шаг1" до "Установка модулей", с учетом того, что все необходимые модули у нас есть.
В инструкции описана установка русского варианта Drupal, если с этим возникли трудности(мы взяли англ. версию), то ставьте англ..
Затем идите в Administer->Modules включаем модуль Locale -> сохраняемся. Идем в SiteConfiguration->Languages делаем Add Language -> выбираем в Language name(выпадающий список) "Русский", нажимаем на кнопку "Add Language"-> в списке языков отмечаем русский, как default -> сохраняемся -> идем по ссылке "import page"
жмем на кнопку "Выбрать файл" и вспоминаем куда мы сохранили файл перевода http://www.drupal.ru/files/drupal-6.6-ru.po выбираем -> сохраняемся. Вуаля. Наш Drupal теперь "Друпал" и говорит по-русски, как на своем.
Ага. На чем мы там остановились? Установка модулей. Ну, там все по инструкции. Распаковываем в sites/all/modules/ (если папки modules там нет, то создадим ее), да чуть не забыл. В папку sites/all/modules/amfphp (это модуль amfphp из архива amfphp-6.x-1.0-beta1.tar.gz) распаковываем содержимое архива amfphp-1.9.beta.20070513.zip(т.е у нас получается примерно такя конструкция sites/all/modules/amfphp/amfphp) -> идем в Управление -> Модули и все включаем.

Теперь идем в Управление -> Конструкция сайта -> Servises-> Browse. Видим список подключенных нами сервисов. Из этого списка и будем выбирать необходимые нам. По клику на сервисе можно перейти на тестовую страницу сервиса и проверить его работоспособность. Например выбираем метод system.connect жмем call method и получаем результат - свои данные пользователя в формате JSON У меня это выглядит примерно так:

stdClass Object  (      
[sessid] => 889e2c9d58e0e22ee54328c37a9eacf7      
[user] => stdClass Object          
(              
[uid] => 1              
[name] => kohl              
[pass] => 731982a033a5cc815ac03c8504abb748              
[mail] => kohl@m-design.ru              
[mode] => 0              
[sort] => 0              
[threshold] => 0              
[theme] =>               
[signature] =>               
[signature_format] => 0              
[created] => 1247949692              
[access] => 1248293418              
[login] => 1248120025              
[status] => 1              
[timezone] =>               
[language] =>               
[picture] =>               
[init] => kohl@m-design.ru              
[data] => a:0:{}              
[sid] => 889e2c9d58e0e22ee54328c37a9eacf7              
[hostname] => 127.0.0.1              
[timestamp] => 1248293443              
[cache] => 0              
[session] =>               
[roles] => Array                  
(                      
[2] => authenticated user                  
)            
)    
)

Все работает.

2.Flex+Drupal=... Строим клиент.

Для этого нам понадобится:
FlexBuilder 3
Flex SDK 3,3
PureMVC

Создаем новый Flex проект скажем, под названием drupal_flex_client, Для тех, кто использует Denver отмечаем, что Application Server Type нашего проекта - PHP.-> Next. Устанавливаем Web root проекта (у меня это C:\WebServers\home\drupalflashsite.ru\www) и Root Url (у меня это http://drupalflashsite.ru), делаем Validate Configuration, и если все ОК --> Next .Я обычно переименовываю название базового mxml компонента в main.mxml, хотя это дело вкуса. В общем жмем финиш и идем в папку lib импорт и где там у нас лежит PureMVC, импортируем.
Жмем f11 и Упс, Видим Сообщение от Друпала, что страница, не найдена. Исправим это. Идем в корень нашего сайта и создаем папку backup на всякий случай, копируем туда файл .htaccess. Заходим в оригинал и слегка его правим:
Ищем строку DirectoryIndex index.php и вместо "index.php" пишем относительный путь к нашему "main.html", сохраняем файл. Теперь вместо индекса будет открываться наша флэшка, а по адресу http://Ваш сайт/admin мы будем попадать в панель управления сайтом, что и требовалось.
Далее. Заходим в http://Ваш сайт/admin/build/services/keys и создаем ключ разработчика API key(в данной статье он нам не пригодится, но впоследствии без него не обойтись) , в графе "Allowed domain" ставим "*" Жмем кнопку (create API key). Теперь самое главное (потерял 2 часа, пока допетрил), идем http://Ваш сайт/admin/user/permissions модуль services и ставим галку в колонке анонимный пользователь, что разрешает всем и каждому обращаться к web-сервисам Вашего сайта.
Возвращаемся к flex-клиенту. На данном этапе наша задача - приконнектиться к сереру и получить данные пользователя. Иными словами выполнить команду system.connect только уже не с тестовой страницы, а с реального флэш-клиента.
Для реализации этой задачи используем микро-архитектуру PureMVC. В данном контексте я не буду углубляться в объяснения связанные с PureMVC, тем более, что по этой теме написано достаточно много, в том числе и на родном языке:
"Архитектура и ключевые фигуры фреймворка PureMVC",
"Фасад (Façade) — ядро и лицо фреймворка PureMVC",
"Как устроены Модель, Вид и Управление во фреймворке PureMVC "
Переведена на русский и бестпрактика PureMVC на официальном сайте проекта http://puremvc.org,
Даже я приложился к этой теме в своей статейке Женим Flex и pure Flash средствами PureMVC с прилагающимся исходником.
Так, что, если Вы уже в теме, то двинемся дальше. Создадим папку services в src flex-проекта и поместим туда файл services-config.xml со следующим содержанием:

<?xml version="1.0" encoding="UTF-8"?>

   <services-config>

  <services>

  <service id="amfphp-flashremoting-service"

  class="flex.messaging.services.RemotingService"

  messageTypes="flex.messaging.messages.RemotingMessage">

  <destination id="amfphp">

  <channels>

  <channel ref="my-amfphp"/>

  </channels>

  <properties>

  <source>*</source>

  </properties>

  </destination>

  </service>

  </services>
 <channels>

  <channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">

  <endpoint uri="http://Ваш сайт/services/amfphp" class="flex.messaging.endpoints.AMFEndpoint"/>

  </channel-definition>

  </channels>

  </services-config>

где, endpoint uri="http://Ваш сайт/services/amfphp" - это адрес файла /sites/all/modules/amfphp/amfphp/gateway.php в системе координат Друпала. Получить этот адрес можно сделав тест на странице сервисов в админке http://Ваш сайт/admin/build/services жмем на ссылку AMFPHP - /services/amfphp и переходим на страничку с текстом:

amfphp and this gateway are installed correctly. You may now connect to this gateway from Flash.

  Note: If you're reading an old tutorial, it will tell you that you should see a download window instead of this message. This confused people so this is the new behaviour starting from amfphp 1.2.

  View the amfphp documentation

  Load the service browser

Это значит, что все у нас работает корректно и в адресной строке как раз адрес файла gateway.php.
Далее, открываем Свойства нашего flex-проекта (FlexBuilder ->FlexNavigator->drupal_flex_client(наш проект)->rightClick->Properties -> FlexCompiler) и через пробел, после того, что написано в поле ввода Additional Compiler Arguments вводим адрес нашего services-config.xml ( выглядит это так -locale en_US -services services/services-config.xml).Сохраняемся.
Далее создаем суб-команду в файле StartupCommand нашего flex-проекта. Эта команда будет вызываться в тот момент, когда создано приложение, созданы прокси и медиаторы приложения команда должна содержать следующее:

 

  import mx.rpc.events.FaultEvent;

  import mx.rpc.events.ResultEvent;

  import mx.rpc.remoting.RemoteObject;


 

  override public function execute(notification:INotification):void{

  var service:RemoteObject=new RemoteObject;

  service.source="system"

  service.destination="amfphp";

  service.addEventListener(FaultEvent.FAULT,faultHandler);

  service.addEventListener(ResultEvent.RESULT,resultHandler);

  service.connect();

  }
private function faultHandler(event:FaultEvent):void{

  trace("FAULT= "+event.fault)//Содержит сообщение об ошибке.

  }
private function resultHandler(event:ResultEvent):void{

  trace("resultHandler - "+event.result)

  /*

  Здесь мы должны получить тот же результат, что и при вызове метода system.connect с тестовой страницы сервисов админки друпала,

  с той лишь разницей, что объект user будет пуст, как барабан, т.к. с точки зрения Drupal мы зашли как неавторизованый пользователь.
*/
}

Напоследок немножко о теории PureMVC, в материале бестпрактика PureMVC очень авторитетные люди считают, что вызов методов удаленных объектов есть прерогатива модели, я же эту функциональность целиком перекладываю на контроллер, может быть я и не прав, кто не согласен - делайте по-своему, ведь PureMVC - не догма, а руководство к действию.
Исходник прилагается. Продолжение следует...

Баннер Альтернативы

Совершенно безвозмездно разместил баннер Альтернативщиков. Очень интересный проект! Наш проприетарный кукиш буржуазному Papervision3D (бесплатному) :)! Болею за наших! Так держать!

TemplateMonster

Вопрос:

VisioN пишет...

Здравствуйте. Что вы можете сказать о flash-шаблонах templatemonster? Недавно пришлось столкнуться с парой шаблонов, если честно я в ужасе...Классы, находящиеся там дополняют готовые классы флэша, например mx.controls.Button, mx.controls.RadioButtonGroup. Раньше всё задумывался почему эти сайты так тормозят на слабых компьютерах, теперь взглянув на код хочется повеситься

2 Июль 2009 г. 0:11

Ответ:

Добрый день. На самом деле шаблоны на монстре - неисчерпаемый источник вдохновения flash-технолога. Встречаются очень интересные решения. Мне, например очень нравятся шаблоны под маркой Di . Спасибо, кстати ему огромное!

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

Многие шаблоны существуют уже довольно давно, мне встречались программы, явно портированные с AS1-2, однако смотрятся, и наверняка продаются. Так что проще посмотреть как сделан понравившийся эффект, что-то позаимствовать оттуда и сделать по-своему.

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

Если говорить о ценах на шаблоны, то нужно отметить, что конечно-же глупо покупать эксклюзив за несколько тысяч долларов, за эти деньги Вам сделают лучше, а вот потратить 20-50$ за исходник бывает не грех, т.к. Графика и код(местами) стоят этих денег и вслучае модернизации избавят от большОй части рутинной работы. Можно и декомпилировать демки (защиты никакой), но это не красиво по отношению к авторам, ну и реально Вы теряете весь код, так-что, если позволяет бюджет проекта лучше раскрутить заказчика или манагера на лишние 50-100$ и сократить время разработки как раз на 2-3 дня.

Флэш-ликбез

Решил начать публично отвечать на вопросы интересующихся по технологии Flash/Flex (хотя " Flex", как торговая марка, начинает отмирать стараниями Adobe, новый Builder будет называться FlashBuilder, однако, как flex-конструктор я позволю себе еще употреблять это слово:))

Итак, господа начинающие и неочень, пишите свои вопросы в комментах к этому посту, а я по-мере сил и компетенции буду на них отвечать.

Убедительная просьба не задавать вопросы, типа:"А что такое Flash?" или "Хочешь ли ты удлиннить свой член на 10 см?":

На эти вопросы отвечу сразу: "Удлиннять член мне уже поздно..."

Что такое флэш - читайте тут:

http://help.adobe.com/ru_RU/Flash/10.0_Welcome/

http://wiki.flash-ripper.com/?title=Заглавная_страница

http://flasher.ru

Женим Flex и pure Flash средствами PureMVC

Очень часто приходится сталкиваться с такой задачей: 

Необходимо организовать взаимодействие flex-приложения и подгружаемого в него flash-ролика, изготовленного  без использования FlexFramework (так называемый pure Flash).

Решение подобной, на первый взгляд, простой задачи породило огромное количество извращений, предлагаю очередное.

Для решения задачки нам понадобится PureMVC. Я использую PureMVC Multicore. Взять здесь.

Для тех, кто не знает что ето такое читать:

на русском

В картинках (чудеса, скоро будет книжка раскраска PureMVC для самых маленьких :))

"Чисто MVC", 

"Архитектура и ключевые фигуры фреймворка PureMVC",

 "Фасад (Façade) — ядро и лицо фреймворка PureMVC", 

"Как устроены Модель, Вид и Управление во фреймворке PureMVC ",

Как создать простой FLV-плеер во Flex и Flash, используя PureMVC и на английском:

PureMVC MultiCore Modular Pipes Application - a better way in!

Dynamic Mortgage Demo (чудесный пример организации модульного приложения с помощью PureMVC, естественно - более сложная задача, чем предлагаю я)

Пример загрузки внешних ресурсов

Building a Flash site using PureMVC

Renju, The Game 

Начитавшись всего этого, осмелюсь предложить Вашему вниманию следующее решение:

Суть метода основывается на "кросскриптовости" фреймвопрка PureMVC и сводится к тому, что после загрузки внешний ролик прописывает свой медиатор в список объектов основного приложения и с его помощью может реагировать на нотификации основного приложения, а так же может сам быть источником этих нотификаций.

Предлагаю Вашему вниманию небольшой пример , ссылка на исходный код, как это обычно бывает, в контекстном меню (жмем правой кнопкой мыши)...

Удачи!