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

2.355 visualizações

Publicada em

Publicada em: Tecnologia
1 comentário
1 gostou
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
2.355
No SlideShare
0
A partir de incorporações
0
Número de incorporações
20
Ações
Compartilhamentos
0
Downloads
51
Comentários
1
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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 ?

×