1st Portugal Adobe Flex Camp

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


                               João Saleir...
Programa

1. Tecnologias de backend que podem interligar
     com o Flex
2.   Métodos de comunicação possíveis
3.   Flash ...
O apresentador
 João Saleiro – joao.saleiro@webfuel.pt

 Licenciado em Engenharia de Telecomunicações
  e Informática no...
 www.castingoffice.net
 user: osflash   pass: test
                                Por outras “palavras”:
             ...
O apresentador
 Co-fundador da Comunidade Portuguesa de Rich
  Internet Application (www.riapt.org)


 Formador na área ...
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...
Tecnologias de backend

 Pergunta Frequente:
   P: “Vou precisar de aprender uma tecnologia de
    backend nova?”
   R:...
Métodos de comunicação

 Pergunta Frequente:
   P: “A minha empresa possui uma aplicação distribuída
    sustentada em W...
Flash Remoting?
 Pergunta Frequente:
   P: “O que é o Flash Remoting?”
   R: É um eficiente método de comunicação RPC c...
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 l...
Flash Remoting vs Web Services
 Pergunta Frequente:
   P: “Quer dizer que se usar Flash Remoting não posso
    usar Web-...
Implementações Open-Source de Flash
Remoting
 JAVA           Perl           PHP
   openAMF        AMF::Perl      Sab...
AMFPHP

 A mais antiga implementação de Flash Remoting
  para PHP

 URL: www.amfphp.org

 Iniciado pelo Wolfgang Hamman...
AMFPHP

 Pergunta Frequente:
   P: “Preciso de algum servidor especial para usar
    AMFPHP? De instalar alguma ferramen...
Os ingredientes
   Apache, PHP, MySQL - XAMPP
       http://www.apachefriends.org/en/xampp-windows.html


   Um cliente...
Montar o cenário
       Em vez de instalarmos o Apache, PHP e MySQL em
        separado, podemos usar o XAMPP. Basta faze...
Montar o cenário

 Vamos obter a seguinte estrutura de
  directorias:

   browser – permite inspeccionar e testar os
   ...
Montar o cenário

 Criar o projecto no Flex, e mudar as directorias
  bin-debug e bin-release para directorias servidas
 ...
O ficheiro services-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
     <services>
            <servi...
Criar a base de dados
 Utilizar o phpMyAdmin ou outro cliente de
  MySQL para criar a base de dados.

 No nosso caso vam...
Criar a base de dados
   Cujo código DDL:


CREATE TABLE `produtos` ( `id` int(6) NOT NULL auto_increment,
   `designacao...
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
     GestorDeProdutos...
Criar o método que devolve os
produtos

 Quantas linhas serão necessárias para criar
  o método que devolve os produtos n...
Criar o método que devolve os
produtos

 Na realidade só são precisas duas! (sem
    contar com as chavetas) :

function ...
Testar o método que devolve os
produtos – Service Browser

 Podemos utilizar o “Service Browser” do
  AMFPHP para ver se ...
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="a...
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 addPr...
E criar um método que envia dados?
  Por exemplo, inserir produto?
 No frontend adicionar ao RemoteObject:

  <mx:method ...
E criar um método que envia dados?
    Por exemplo, inserir produto?

 Criar a função associada ao evento click do botão ...
Resultado

 E com isto, já temos uma aplicação que
  permite inserir e listar produtos.

 A partir daqui o processo seri...
Mais info

 Exemplo de Flex com AMFPHP:
     http://www.riapt.org/2007/07/16/exemplo-em-flex-2-operacoes-crud-
      usa...
Mais info

 Sniffing de AMF (ver os dados trocados):
   http://kevinlangdon.com/serviceCapture/


 Aumentar (ainda mais...
Questões ?
Upcoming SlideShare
Loading in …5
×

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

2,315 views

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,315
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
50
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 1st Portugal Adobe Flex Camp Ligação do Flex a um backend LAMP usando AMFPHP João Saleiro – joao.saleiro@webfuel.pt
  2. 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. 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...)
  4. 4.  www.castingoffice.net  user: osflash pass: test  Por outras “palavras”: O apresentador
  5. 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
  6. 6. O apresentador  Onde fazemos coisas deste género:
  7. 7. Objectivo desta apresentação Aprender a ligar uma aplicação Flex a um backend em PHP
  8. 8. A aplicação (sem os dados)
  9. 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. 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. 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. 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?
  13. 13. Flash Remoting vs Outros métodos http://www.jamesward.org/census/
  14. 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. 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.
  16. 16. 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
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. Ok, o cenário está montado. Chegou a altura de criarmos o código
  27. 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. 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. 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. 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/ )
  31. 31. Testar o método que devolve os produtos - Service Browser
  32. 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()"/>
  33. 33. Ligar o frontend ao backend  E obtemos isto:
  34. 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. 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. 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. 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. 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. 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
  40. 40. Questões ?

×