четверг, 23 июля 2009 г.

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 - не догма, а руководство к действию.
Исходник прилагается. Продолжение следует...


Комментарии: 7:

В 23 июля 2009 г. в 20:55 , Blogger Rip The Spam сказал(а)...

Дорогой автор поста! Являясь фанатом Drupal, Flex и PureMVC, выражаю вам невыразимую благодарность за то удовольствие, что я получил от этой статьи! И за важные знания - благодарность еще большую.

Здесь же я хочу поделиться ссылками, которые, наверное, вам не пригодятся, но могут пригодиться читателям этого комментария.

Итак, в Июне 2009 года вышла книга "Flash with Drupal":
Автор о книге:
http://drupal.org/node/478200

Продажа книги:
http://www.packtpub.com/build-flash-applications-with-drupal-6/book

Короткая онлайн-презентация по книге:
http://www.slideshare.net/gdoteof/drupalcon-2009-flash-and-drupal?nocache=4673

Спасибо! И очень хочется продолжения статьи, и поставить на эту статью ссылку тоже хочу, и поставлю, да что там — уже поставил!

 
В 23 июля 2009 г. в 21:29 , Blogger Константин Kohl сказал(а)...

Спасибо, Ростислав. Высокая оценка придает мне сил, уже пишу следующий этап :)

 
В 24 июля 2009 г. в 02:00 , Blogger polovaikin сказал(а)...

Спасибо за статью! Сам я привык серверной части на Java, но появилось желание попробовать Flex+Drupal :)

 
В 27 июля 2009 г. в 11:00 , Blogger Unknown сказал(а)...

А вот такой вопрос. Тема AMF и в частности AMFPHP. Насколько их использование безопасно? Ктонть сталкивался с такими вопросами в приложении к AMF и вообще ремоутингу? Просто я на днях предложил нашему главному уму тему взаимодействия с флэшом с использованием ремоутинга, на что он скептически поставил мне вышеприведенный вопрос.

 
В 28 июля 2009 г. в 14:14 , Blogger Константин Kohl сказал(а)...

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

 
В 15 марта 2010 г. в 10:20 , Blogger Unknown сказал(а)...

Внимание! При очередной попытке установить свежую версию модуля amfphp-6.x-1.0-beta2 столкнулся с неожиданной ошибкой в файле amfphp.inc звучит примерно так:
Fatal error: Call to undefined method AmfphpGateway::disableStandalonePlayer() in /all/modules/amfphp/amfphp.inc on line 22. В гугле вразумительного решения я не нашел, поэтому просто закомментировал строку 22 этого файла и все заработало...

 
В 6 июля 2010 г. в 20:34 , Anonymous Анонимный сказал(а)...

Очередной островок любви и нежности - buy viagra ;)СоВ Мародере предсказаны мутации собак, типа они в огромных монстров выросли, мутировали за несколько жалких лет. Согласитесь, это же хуйня, как многое, да вообще подавляюще много, что в Мародере написано. Мутации идут гораздо дольше по времени, но Беркем же биологию и генетику вместе с этологией считает гавном. Он же в бога верит, а не в обезьяну. Да и кушать такие собачки (если не мутанты, а просто большие собаки, выброшенные хозяевами) что будут? Трупы за год уйдут, а потом мышки. А это значит, что собачки должны быть, как лисички. Большим кушать нечего будет.

 

Отправить комментарий

Подпишитесь на каналы Комментарии к сообщению [Atom]

<< Главная страница