Ligação do Flex a um backend LAMP usando AMFPHP

1st Portugal Adobe Flex Camp

Ligação do Flex a um backend LAMP
usando AMFPHP

João Saleiro – joao.saleiro@webfuel.pt

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

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...)

 www.castingoffice.net
 user: osflash pass: test
 Por outras “palavras”:
O apresentador

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

O apresentador
 Onde fazemos coisas deste género:

Objectivo desta apresentação

Aprender a ligar uma aplicação Flex a um
backend em PHP

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

Tecnologias de backend

 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

Métodos de comunicação

 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

Flash Remoting?
 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?

Flash Remoting vs Outros métodos

http://www.jamesward.org/census/

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


Flash Remoting vs Web Services
 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

 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.

Implementações Open-Source de Flash
Remoting
 JAVA  Perl  PHP
 openAMF  AMF::Perl  SabreAMF
 GraniteDS  CakePHP
 BlazeDS  WebOrb
 Ruby
 Red5  AMFPHP
 Rubyamf
 WebOrb
 NET
 Fluorine
 Python
 AMF.NET
 PyAMF

 Mais em http://osflash.org/projects

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

AMFPHP

 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!

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/

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

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

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

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>

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:

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');

Ok, o cenário está montado.
Chegou a altura de criarmos o
código

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');
}

}
?>

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

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");
}

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/ )

Testar o método que devolve os
produtos - Service Browser

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()"/>

Ligar o frontend ao backend

 E obtemos isto:

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();
}

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();
}

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;
}

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)

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/

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

Ligação do Flex a um backend LAMP usando AMFPHP

Mais conteúdo relacionado

Mais procurados (19)

Destaque (20)

Semelhante a Ligação do Flex a um backend LAMP usando AMFPHP (20)

Mais de elliando dias (20)

Último (7)

Ligação do Flex a um backend LAMP usando AMFPHP