1st Portugal Adobe Flex CampLigação do Flex a um backend LAMPusando AMFPHP                               João Saleiro – jo...
Programa1. Tecnologias de backend que podem interligar     com o Flex2.   Métodos de comunicação possíveis3.   Flash Remot...
O apresentador João Saleiro – joao.saleiro@webfuel.pt Licenciado em Engenharia de Telecomunicações  e Informática no ISC...
 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 da pr...
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: Não....
Métodos de comunicação Pergunta Frequente:   P: “A minha empresa possui uma aplicação distribuída    sustentada em Web-S...
Flash Remoting? Pergunta Frequente:   P: “O que é o Flash Remoting?”   R: É um eficiente método de comunicação RPC com ...
Flash Remoting vs Outros métodos                  http://www.jamesward.org/census/
Flash Remoting vs Web Services                             Flash Remoting   Web ServicesVelocidade de serializaçãodo lado ...
Flash Remoting vs Web Services Pergunta Frequente:   P: “Quer dizer que se usar Flash Remoting não posso    usar Web-Ser...
Implementações Open-Source de FlashRemoting JAVA           Perl           PHP   openAMF        AMF::Perl      SabreA...
AMFPHP A mais antiga implementação de Flash Remoting  para PHP URL: www.amfphp.org Iniciado pelo Wolfgang Hamman, guiad...
AMFPHP Pergunta Frequente:   P: “Preciso de algum servidor especial para usar    AMFPHP? De instalar alguma ferramenta, ...
Os ingredientes   Apache, PHP, MySQL - XAMPP       http://www.apachefriends.org/en/xampp-windows.html   Um cliente de M...
Montar o cenário       Em vez de instalarmos o Apache, PHP e MySQL em        separado, podemos usar o XAMPP. Basta fazer ...
Montar o cenário Vamos obter a seguinte estrutura de  directorias:   browser – permite inspeccionar e testar os    servi...
Montar o cenário Criar o projecto no Flex, e mudar as directorias  bin-debug e bin-release para directorias servidas  pel...
O ficheiro services-config.xml<?xml version="1.0" encoding="UTF-8"?><services-config>     <services>            <service i...
Criar a base de dados Utilizar o phpMyAdmin ou outro cliente de  MySQL para criar a base de dados. No nosso caso vamos c...
Criar a base de dados   Cujo código DDL:CREATE TABLE `produtos` ( `id` int(6) NOT NULL auto_increment,   `designacao` var...
Ok, o cenário está montado.Chegou a altura de criarmos ocódigo
Criar no backend o serviço degestão de produtos    Na pasta “services” do AMFPHP criar o ficheiro     GestorDeProdutosSer...
Criar o método que devolve osprodutos Quantas linhas serão necessárias para criar  o método que devolve os produtos na ba...
Criar o método que devolve osprodutos Na realidade só são precisas duas! (sem    contar com as chavetas) :function getPro...
Testar o método que devolve osprodutos – Service Browser Podemos utilizar o “Service Browser” do  AMFPHP para ver se o no...
Testar o método que devolve osprodutos - Service Browser
Ligar o frontend ao backend   Adicionar o código do RemoteObject:<mx:RemoteObject id="produtosService" destination="amfph...
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...
E criar um método que envia dados?  Por exemplo, inserir produto? No frontend adicionar ao RemoteObject:  <mx:method name...
E criar um método que envia dados?    Por exemplo, inserir produto? Criar a função associada ao evento click do botão Gra...
Resultado E com isto, já temos uma aplicação que  permite inserir e listar produtos. A partir daqui o processo seria sem...
Mais info Exemplo de Flex com AMFPHP:     http://www.riapt.org/2007/07/16/exemplo-em-flex-2-operacoes-crud-      usando-...
Mais info Sniffing de AMF (ver os dados trocados):   http://kevinlangdon.com/serviceCapture/ Aumentar (ainda mais!) a v...
Questões ?
Próximos SlideShares
Carregando em…5
×

2290494 integrando-flex-com-php

205 visualizações

Publicada em

Integrando Flex com php

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
205
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

2290494 integrando-flex-com-php

  1. 1. 1st Portugal Adobe Flex CampLigação do Flex a um backend LAMPusando AMFPHP João Saleiro – joao.saleiro@webfuel.pt
  2. 2. Programa1. Tecnologias de backend que podem interligar com o Flex2. Métodos de comunicação possíveis3. Flash Remoting em detalhe4. Flash Remoting vs Web Services5. Implementações open-source de Flash Remoting6. AMFPHP em detalhe7. 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 ServicesVelocidade de serializaçãodo lado do servidor Tamanho do pacote /Velocidade de comunicação Velocidade deinterpretação do lado docliente Simplicidade deimplementaçã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 FlashRemoting 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 ocódigo
  27. 27. Criar no backend o serviço degestã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 osprodutos Quantas linhas serão necessárias para criar o método que devolve os produtos na base de dados?a) 45b) 10c) 28
  29. 29. Criar o método que devolve osprodutos 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 osprodutos – 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 osprodutos - 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 ?

×