SlideShare uma empresa Scribd logo
1 de 40
Baixar para ler offline
1st Portugal Adobe Flex Camp

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


                               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...)
 www.castingoffice.net
 user: osflash   pass: test
                                Por outras “palavras”:
                                                     O apresentador
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 de
interpretaçã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           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
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>          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>
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/bro
  wser/ )
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 ?

Mais conteúdo relacionado

Mais procurados

Curso de PHP Básico ao Avançado
Curso de PHP Básico ao AvançadoCurso de PHP Básico ao Avançado
Curso de PHP Básico ao AvançadoLuiz Junior
 
Comandos gerais do PHP
Comandos gerais do PHPComandos gerais do PHP
Comandos gerais do PHPPaulo Dayvson
 
Mini-curso RubyOnRails CESOL
Mini-curso RubyOnRails CESOLMini-curso RubyOnRails CESOL
Mini-curso RubyOnRails CESOLtarginosilveira
 
Minicurso PHP básico
Minicurso PHP básicoMinicurso PHP básico
Minicurso PHP básicoCezar Souza
 
PHP: Linguagem + Mysql + MVC + AJAX
PHP: Linguagem + Mysql + MVC + AJAX PHP: Linguagem + Mysql + MVC + AJAX
PHP: Linguagem + Mysql + MVC + AJAX Sérgio Souza Costa
 
Introdução ao zend framework
Introdução ao zend frameworkIntrodução ao zend framework
Introdução ao zend frameworkMarcos Oliveira
 
Iniciando com o_zend_framework
Iniciando com o_zend_frameworkIniciando com o_zend_framework
Iniciando com o_zend_frameworkMilton Rodrigues
 
Qconsp 2016 escalando uma plataforma de e-mail transacional- aprendizado da...
Qconsp 2016   escalando uma plataforma de e-mail transacional- aprendizado da...Qconsp 2016   escalando uma plataforma de e-mail transacional- aprendizado da...
Qconsp 2016 escalando uma plataforma de e-mail transacional- aprendizado da...fabio perrella
 
Datasnap avançado - Respostas para um sistema robusto - Embarcadero Conferenc...
Datasnap avançado - Respostas para um sistema robusto - Embarcadero Conferenc...Datasnap avançado - Respostas para um sistema robusto - Embarcadero Conferenc...
Datasnap avançado - Respostas para um sistema robusto - Embarcadero Conferenc...Kelver Merlotti
 
Seu framework é melhor pra quê?
Seu framework é melhor pra quê?Seu framework é melhor pra quê?
Seu framework é melhor pra quê?Jaime Neto
 
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPCakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPArlindo Santos
 
Artigo de php
Artigo de phpArtigo de php
Artigo de phprobson
 

Mais procurados (19)

WampServer
WampServerWampServer
WampServer
 
Linguagem PHP
Linguagem PHPLinguagem PHP
Linguagem PHP
 
Curso de PHP Básico ao Avançado
Curso de PHP Básico ao AvançadoCurso de PHP Básico ao Avançado
Curso de PHP Básico ao Avançado
 
Comandos gerais do PHP
Comandos gerais do PHPComandos gerais do PHP
Comandos gerais do PHP
 
PHP - Introdução
PHP - IntroduçãoPHP - Introdução
PHP - Introdução
 
Mini-curso RubyOnRails CESOL
Mini-curso RubyOnRails CESOLMini-curso RubyOnRails CESOL
Mini-curso RubyOnRails CESOL
 
Minicurso PHP básico
Minicurso PHP básicoMinicurso PHP básico
Minicurso PHP básico
 
PHP: Linguagem + Mysql + MVC + AJAX
PHP: Linguagem + Mysql + MVC + AJAX PHP: Linguagem + Mysql + MVC + AJAX
PHP: Linguagem + Mysql + MVC + AJAX
 
Introdução ao zend framework
Introdução ao zend frameworkIntrodução ao zend framework
Introdução ao zend framework
 
Iniciando com o_zend_framework
Iniciando com o_zend_frameworkIniciando com o_zend_framework
Iniciando com o_zend_framework
 
Qconsp 2016 escalando uma plataforma de e-mail transacional- aprendizado da...
Qconsp 2016   escalando uma plataforma de e-mail transacional- aprendizado da...Qconsp 2016   escalando uma plataforma de e-mail transacional- aprendizado da...
Qconsp 2016 escalando uma plataforma de e-mail transacional- aprendizado da...
 
Datasnap avançado - Respostas para um sistema robusto - Embarcadero Conferenc...
Datasnap avançado - Respostas para um sistema robusto - Embarcadero Conferenc...Datasnap avançado - Respostas para um sistema robusto - Embarcadero Conferenc...
Datasnap avançado - Respostas para um sistema robusto - Embarcadero Conferenc...
 
Mini Curso de PHP
Mini Curso de PHPMini Curso de PHP
Mini Curso de PHP
 
Seu framework é melhor pra quê?
Seu framework é melhor pra quê?Seu framework é melhor pra quê?
Seu framework é melhor pra quê?
 
Cakephp 2.0 - O que mudou
Cakephp 2.0 - O que mudouCakephp 2.0 - O que mudou
Cakephp 2.0 - O que mudou
 
Revista On-line
Revista On-lineRevista On-line
Revista On-line
 
Laravel 5
Laravel 5Laravel 5
Laravel 5
 
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPCakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHP
 
Artigo de php
Artigo de phpArtigo de php
Artigo de php
 

Semelhante a 2290494 integrando-flex-com-php

4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdf4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdfRubenManhia
 
php4android: desenvolva aplicações android em PHP
php4android: desenvolva aplicações android em PHPphp4android: desenvolva aplicações android em PHP
php4android: desenvolva aplicações android em PHPRamon Ribeiro Rabello
 
PHP, Presente e Futuro
PHP, Presente e FuturoPHP, Presente e Futuro
PHP, Presente e FuturoFreedom DayMS
 
Palestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPressPalestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPressRômulo Zoch
 
Pense no futuro: PHP com Zend Framework
Pense no futuro: PHP com Zend FrameworkPense no futuro: PHP com Zend Framework
Pense no futuro: PHP com Zend FrameworkFlávio Lisboa
 
Php Visao Geral Svs
Php Visao Geral SvsPhp Visao Geral Svs
Php Visao Geral Svscristhianobv
 
Webservices e Computação em Nuvem com PHP
Webservices e Computação em Nuvem com PHPWebservices e Computação em Nuvem com PHP
Webservices e Computação em Nuvem com PHPFlávio Lisboa
 
O que esperar do Zend Framework 3
O que esperar do Zend Framework 3O que esperar do Zend Framework 3
O que esperar do Zend Framework 3Flávio Lisboa
 
Symfony Live - São Paulo 2019 - Como construir uma API em um passo com API Pl...
Symfony Live - São Paulo 2019 - Como construir uma API em um passo com API Pl...Symfony Live - São Paulo 2019 - Como construir uma API em um passo com API Pl...
Symfony Live - São Paulo 2019 - Como construir uma API em um passo com API Pl...BrunoSouza617
 
Flex 2.0 com PHP e MySQL
Flex 2.0 com PHP e MySQLFlex 2.0 com PHP e MySQL
Flex 2.0 com PHP e MySQLelliando dias
 
PW01 - Introdução a programação em PHPv7
PW01 - Introdução a programação em PHPv7PW01 - Introdução a programação em PHPv7
PW01 - Introdução a programação em PHPv7Silvano Oliveira
 

Semelhante a 2290494 integrando-flex-com-php (20)

Python 08
Python 08Python 08
Python 08
 
Cake Php
Cake PhpCake Php
Cake Php
 
4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdf4. Introdução ao PHP.pdf
4. Introdução ao PHP.pdf
 
php4android: desenvolva aplicações android em PHP
php4android: desenvolva aplicações android em PHPphp4android: desenvolva aplicações android em PHP
php4android: desenvolva aplicações android em PHP
 
PHP Presente e Futuro
PHP Presente e FuturoPHP Presente e Futuro
PHP Presente e Futuro
 
PHP, Presente e Futuro
PHP, Presente e FuturoPHP, Presente e Futuro
PHP, Presente e Futuro
 
Debug de cabo a rabo
Debug de cabo a raboDebug de cabo a rabo
Debug de cabo a rabo
 
Palestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPressPalestra UFPR - Intro Ionic framework + WordPress
Palestra UFPR - Intro Ionic framework + WordPress
 
Novidades do PHP 5.3 e 6
Novidades do PHP 5.3 e 6Novidades do PHP 5.3 e 6
Novidades do PHP 5.3 e 6
 
Pense no futuro: PHP com Zend Framework
Pense no futuro: PHP com Zend FrameworkPense no futuro: PHP com Zend Framework
Pense no futuro: PHP com Zend Framework
 
Php Visao Geral Svs
Php Visao Geral SvsPhp Visao Geral Svs
Php Visao Geral Svs
 
Webservices e Computação em Nuvem com PHP
Webservices e Computação em Nuvem com PHPWebservices e Computação em Nuvem com PHP
Webservices e Computação em Nuvem com PHP
 
De 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuáriosDe 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuários
 
O que esperar do Zend Framework 3
O que esperar do Zend Framework 3O que esperar do Zend Framework 3
O que esperar do Zend Framework 3
 
Web Offline
Web OfflineWeb Offline
Web Offline
 
Symfony Live - São Paulo 2019 - Como construir uma API em um passo com API Pl...
Symfony Live - São Paulo 2019 - Como construir uma API em um passo com API Pl...Symfony Live - São Paulo 2019 - Como construir uma API em um passo com API Pl...
Symfony Live - São Paulo 2019 - Como construir uma API em um passo com API Pl...
 
Flex 2.0 com PHP e MySQL
Flex 2.0 com PHP e MySQLFlex 2.0 com PHP e MySQL
Flex 2.0 com PHP e MySQL
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
PW01 - Introdução a programação em PHPv7
PW01 - Introdução a programação em PHPv7PW01 - Introdução a programação em PHPv7
PW01 - Introdução a programação em PHPv7
 
CakePHP
CakePHPCakePHP
CakePHP
 

2290494 integrando-flex-com-php

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