O documento apresenta um resumo de uma palestra sobre a ligação de uma aplicação Flex a um backend PHP usando AMFPHP. A palestra aborda os principais tópicos: 1) métodos de comunicação entre o frontend e backend; 2) explicação detalhada do Flash Remoting; 3) implementações open-source de Flash Remoting incluindo AMFPHP. A apresentação inclui um exemplo prático de como utilizar o AMFPHP para criar e recuperar dados de uma base de dados MySQL numa aplicação Flex.
Multi-core Parallelization in Clojure - a Case Study
Ligação do Flex a um backend LAMP usando AMFPHP
1. 1st Portugal Adobe Flex Camp
Ligação do Flex a um backend LAMP
usando AMFPHP
João Saleiro – joao.saleiro@webfuel.pt
2. Programa
1. Tecnologias de backend que podem interligar
com o Flex
2. Métodos de comunicação possíveis
3. Flash Remoting em detalhe
4. Flash Remoting vs Web Services
5. Implementações open-source de Flash
Remoting
6. AMFPHP em detalhe
7. Exemplo: utilizar o AMFPHP para ligar um
frontend em Flex a um backend em PHP
3. O apresentador
João Saleiro – joao.saleiro@webfuel.pt
Licenciado em Engenharia de Telecomunicações
e Informática no ISCTE
PFC consistiu no desenvolvimento de uma Rich
Internet Application recorrendo a best-practices de
Engenharia da Programação e ferramentas open-
source de desenvolvimento na plataforma Flash
(tentem dizer isto de seguida num só fôlego...)
5. O apresentador
Co-fundador da Comunidade Portuguesa de Rich
Internet Application (www.riapt.org)
Formador na área da programação de aplicações
Web na etic_
Responsável pela Webfuel, empresa dedicada ao
desenvolvimento de Rich Internet Applications
9. Carregar dados de uma base de dados
Pergunta Frequente:
P: “Posso ligar o Flex directamente a uma base de
dados?”
R: Não. (mas o Air pode)
O Flex é apenas responsável pela camada de
interface com o utilizador
Os dados devem ser carregados da camada de
backend sendo esta responsável pela interacção
com a base de dados
10. Tecnologias de backend
Pergunta Frequente:
P: “Vou precisar de aprender uma tecnologia de
backend nova?”
R: Não. É possível ligar o Flex a quase qualquer
tecnologia de backend existente
JAVA, .NET, PHP, RoR, CF, Python...
O que importa não é a tecnologia, mas sim o
método de comunicação
11. Métodos de comunicação
Pergunta Frequente:
P: “A minha empresa possui uma aplicação distribuída
sustentada em Web-Services, mas queria mudar o
frontend para Flex. Tenho que refazer o backend?”
R: Não. As aplicações Flex consomem facilmente os
Web-Services existentes sem ser necessário mudar o
backend
Métodos de comunicação mais usuais:
Plain text
Web Services
Flash Remoting
12. Flash Remoting?
Pergunta Frequente:
P: “O que é o Flash Remoting?”
R: É um eficiente método de comunicação RPC com
serialização automática de dados sustentada num
formato binário (AMF – Actionscript Message Format)
Hein? Agora em Português!
RPC - Remote Procedure Call?
Consiste em chamar um método remoto (no backend) de uma
forma simples e transparente como se este existisse do lado do
cliente. É tão “complicado” como chamar uma função...
Serialização de dados?
Formato binário?
14. Flash Remoting vs Web Services
Flash Remoting Web Services
Velocidade de serialização
do lado do servidor
Tamanho do pacote /
Velocidade de comunicação
Velocidade de
interpretação do lado do
cliente
Simplicidade de
implementação
Standart / Compatibilidade
15. Flash Remoting vs Web Services
Pergunta Frequente:
P: “Quer dizer que se usar Flash Remoting não posso
usar Web-Services e vice-versa?”
R: Podem ser usados ambos ao mesmo tempo! Basta
expôr duas versões para cada serviço, uma usando
Flash Remoting, e outra usando Web-Services
Pergunta Frequente:
P: “Tenho que comprar esse «Flash Remoting»?”
R: Não. Existem diversas implementações de Flash
Remoting open-source ou gratuítas para as mais
variadas tecnologias de backend.
17. AMFPHP
A mais antiga implementação de Flash Remoting
para PHP
URL: www.amfphp.org
Iniciado pelo Wolfgang Hamman, guiado pelo
Patrick Mineault, sendo actualmente o Wade
Arnold o responsável pelo projecto
Projecto apoiado oficialmente pela Adobe
18. AMFPHP
Pergunta Frequente:
P: “Preciso de algum servidor especial para usar
AMFPHP? De instalar alguma ferramenta,
tecnologia, alguma coisa?”
R: Não. Basta fazer upload do source code do
AMFPHP para um servidor LAMP e usar!
Ok, então vamos ver o quão difícil é usar o
AMFPHP!
19. Os ingredientes
Apache, PHP, MySQL - XAMPP
http://www.apachefriends.org/en/xampp-windows.html
Um cliente de MySQL – o XAMPP traz o phpMyAdmin
O AMFPHP
http://www.amfphp.org
O Flex 2/3 SDK
Vem com o Flex Builder 2/3
O Flex Builder 2/3 (opcional)
Está disponível uma versão do FB2 trial de 30 dias no site da Adobe:
http://www.adobe.com/products/flex/flexbuilder/
Está disponível uma versão do FB3 RC1 trial de 90 dias no Adobe Labs:
http://labs.adobe.com/technologies/flex/
20. Montar o cenário
Em vez de instalarmos o Apache, PHP e MySQL em
separado, podemos usar o XAMPP. Basta fazer o
download, descomprimir e correr os serviços.
Certificar-se do endereço do pasta htdocs do Apache,
ou alterá-lo para um mais confortável
A pasta htdocs é onde deveremos colocar os projectos que
serão servidos pelo Apache
Para mudá-la, é preciso editar o ficheiro httpd.conf na
directoria conf do Apache
Criar na pasta htdocs uma pasta para o nosso projecto,
e descomprimir lá para dentro o zip do AMFPHP
21. Montar o cenário
Vamos obter a seguinte estrutura de
directorias:
browser – permite inspeccionar e testar os
serviços que criamos
core – não mexer
services – a pasta onde devermos colocar o
código para os nossos serviços
22. Montar o cenário
Criar o projecto no Flex, e mudar as directorias
bin-debug e bin-release para directorias servidas
pelo Apache
Criar um ficheiro services-config.xml
Nas opções do compilador, adicionar o
argumento: –services services-config.xml
O services-config.xml serve para indicar à
aplicação o endereço para a gateway que permite
comunicar com o backend
23. O ficheiro 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> Colocar aqui o endereço
</destination> para o gateway.php
</service>
</services> Pode ser usado um
<channels> caminho relativo :)
<channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://localhost/riapt/backend/amfphp/gateway.php"
class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>
24. Criar a base de dados
Utilizar o phpMyAdmin ou outro cliente de
MySQL para criar a base de dados.
No nosso caso vamos criar a seguinte
tabela:
25. Criar a base de dados
Cujo código DDL:
CREATE TABLE `produtos` ( `id` int(6) NOT NULL auto_increment,
`designacao` varchar(255) NOT NULL, `quantidade` int(4) default
NULL, `descricao` longtext, `categoria` varchar(255) default
NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT
CHARSET=latin1;
-- ----------------------------
-- Records
-- ----------------------------
INSERT INTO `produtos` VALUES ('1', 'Portátil A6JC', '5', 'É o meu
:)', 'Informática');
INSERT INTO `produtos` VALUES ('2', 'Frigorifico Zippy', '15',
'Frigorifico ecológico ', 'Electrodomésticos');
INSERT INTO `produtos` VALUES ('3', 'Telemóvel 8G', '1', 'Um telemóvel
3G que engana os clientes', 'Telecomunicações');
26. Ok, o cenário está montado.
Chegou a altura de criarmos o
código
27. Criar no backend o serviço de
gestão de produtos
Na pasta “services” do AMFPHP criar o ficheiro
GestorDeProdutosService.php e com o seguinte código:
<?
class GestorDeProdutosService
{
function GestorDeProdutosService ()
{
$this->conn = mysql_pconnect('localhost', 'root', '');
mysql_select_db ('riapt');
}
}
?>
28. Criar o método que devolve os
produtos
Quantas linhas serão necessárias para criar
o método que devolve os produtos na base
de dados?
a) 45
b) 10
c) 28
29. Criar o método que devolve os
produtos
Na realidade só são precisas duas! (sem
contar com as chavetas) :
function getProdutos()
{
return mysql_query("SELECT * FROM produtos");
}
30. Testar o método que devolve os
produtos – Service Browser
Podemos utilizar o “Service Browser” do
AMFPHP para ver se o nosso método
funciona.
Basta apontar para a directoria ”browser”
do AMFPHP (ex.:
http://localhost/riapt/backend/amfphp/bro
wser/ )
32. Ligar o frontend ao backend
Adicionar o código do RemoteObject:
<mx:RemoteObject id="produtosService" destination="amfphp" source="GestorDeProdutosService">
<mx:method name="getProdutos" result="getProdutosHandler(event)"/>
</mx:RemoteObject>
Criar a função getProdutosHandler:
private function getProdutosHandler(event:ResultEvent):void
{
listaDeProdutos=event.result as ArrayCollection;
}
Mudar o evento click do botão refrescar de forma a chamar o método remoto:
<mx:Button label="Refrescar” click="produtosService.getProdutos()"/>
34. E criar um método que envia dados para o
backend? Por exemplo, inserir produto?
No backend adicionar:
function addProduto($produto)
{
mysql_query("INSERT INTO produtos(designacao,
quantidade, descricao, categoria) VALUES (
'".$produto['designacao']."',
'".$produto['quantidade']."',
'".$produto['descricao']."',
'".$produto['categoria']."')");
return mysql_insert_id();
}
35. E criar um método que envia dados?
Por exemplo, inserir produto?
No frontend adicionar ao RemoteObject:
<mx:method name="addProduto"
result="addProdutoHandler(event)"/>
Criar a função addProdutoHandler:
private function
addProdutoHandler(event:ResultEvent):void
{
produtosService.getProdutos();
}
36. E criar um método que envia dados?
Por exemplo, inserir produto?
Criar a função associada ao evento click do botão Gravar:
private function
gravarBtnClickHandler(ev:MouseEvent):void
{
var produto:Object=new Object();
produto["designacao"]=designacaoTxt.text;
produto["quantidade"]=quantidadeNS.value;
produto["descricao"]=descricaoTa.text;
produto["categoria"]=categoriaCmb.selectedItem;
produtosService.addProduto(produto);
adicionarProdutoPanel.visible=false;
}
37. Resultado
E com isto, já temos uma aplicação que
permite inserir e listar produtos.
A partir daqui o processo seria sempre o
mesmo para editar, apagar, etc.
O passo seguinte seria recorrer a Value Objects
para definir explicitamente o formato dos
objectos trocados entre o cliente e o servidor
... Mas isso fica para outro dia :o)
38. Mais info
Exemplo de Flex com AMFPHP:
http://www.riapt.org/2007/07/16/exemplo-em-flex-2-operacoes-crud-
usando-flash-remoting-via-amfphp-19b2/
Utilização de Value Objects:
http://www.riapt.org/2007/07/16/exemplo-em-flex-2-utilizacao-de-value-
objects-com-flash-remoting/
Aprender Cairngorm:
http://www.riapt.org/2007/12/07/onde-aprender-cairngorm-a-framework-
mvc-da-adobe/
Flex com AMFPHP passo a passo (inglês):
http://www.sephiroth.it/tutorials/flashPHP/flex_remoteobject/
39. Mais info
Sniffing de AMF (ver os dados trocados):
http://kevinlangdon.com/serviceCapture/
Aumentar (ainda mais!) a velocidade do
AMFPHP:
http://www.5etdemi.com/blog/archives/2007/01/amfphp-19-beta-2-
ridiculously-faster/
Questões (em português):
http://www.riapt.org/mailing-list/
Questões (em inglês):
http://groups.yahoo.com/group/flexcoders