Ligação do Flex a um backend LAMP

usando AMFPHP

1st Portugal Adobe Flex Camp

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

O apresentador Por outras “palavras”:

w

ww

.cas

tin

go

ffic

e.n

et

u

ser:

osf

lash

pas

s: t

est

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

A aplicação (sem os dados)

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

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

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

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?

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 deinterpretação do lado do cliente

Simplicidade de implementação

Standart / Compatibilidade

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.

Implementações Open-Source de Flash Remoting

JAVA

openAMF

GraniteDS

BlazeDS

Red5

NET

Fluorine

AMF.NET

Perl

AMF::Perl

Ruby

Rubyamf

WebOrb

Python

PyAMF

PHP

SabreAMF

CakePHP

WebOrb

AMFPHP

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

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!

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>

</destination>

</service>

</services>

<channels>

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

Colocar aqui o endereço para o gateway.php

Pode ser usado um caminho relativo :)

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

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

Questões ?