Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,551 views

Published on

Published in: Technology

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 ?

×