Técnicas Mobile em Laravel 2

Já notei a falta de material a respeito de Mobile em Laravel e então resolvi escrever esse Post para quem deseja tornar sua aplicação responsiva.

A primeira etapa desse tutorial tem como objetivo instalar a Vendor responsável pela verificação Mobile, explicação de alguns métodos e criação dos filtros.

Primeiramente baixe o Laravel Agent:

A instalação é simples bastar executar o comando de Require:

  • composer require jenssegers/agent

Em seguida indique o Service Provider no arquivo (app/config/app.php) e insira o laravel-agent:

  • ‘Jenssegers\Agent\AgentServiceProvider’,

Agora você ira criar uma alias, ainda no arquivo (app/config/app.php) insira:

  • ‘Agent’ => ‘Jenssegers\Agent\Facades\Agent’,

O Laravel Agent possui na minha opinião três métodos que serão bastante utilizados por nós:

  • Agent::isMobile();
  • Agent::isTablet();
  • Agent::isDesktop();

Ele possui mais métodos como: versão, browser utilizado, robô, plataforma e etc.

Em nosso caso nós queremos redirecionar ou renderizar uma View para Mobile então faremos uso de três métodos.

Todos eles retornam um (boolean) para cada contexto de lógica, por exemplo:

  • isMobile – Irá verificar se a aplicação esta sendo acessada por um celular.
  • IsTablet – Irá verificar se a aplicação esta sendo acessada por um tablet.
  • IsDesktop – Irá verificar se a aplicação esta sendo acessada por um PC.

Nós iremos utilizar a verificação de celular e tablet, criaremos um filtro que irá solucionar a questão de quem esta acessando nossa aplicação.

Uma forma de fazer isso e no filtro (before) no arquivo (app/filter.php) redirecionar qualquer requisição Mobile para uma rota preparada para celulares ou tablets.

O filtro em questão ficará da seguinte forma:

App::before(function($request) {
if((Agent::isMobile() || Agent::isTablet()) === true){
        if(Request::server('HTTP_HOST') != Config::get('app.mobile')){
            return Redirect::to(Config::get('app.mobile'));
        }
    }
});

Explicação do filtro:

Na primeira linha foi verificado se quem acessou a aplicação foi um celular ou tablet.

Na segunda linha é verificado se já ocorreu um redirecionamento para a nossa rota de Mobile, isso é feito para que não caia em loop.

O (return) irá redirecionar para a nossa rota caso não tenha atendido a condição anterior.

Observação: Não sei se vocês notaram que eu utilizei uma config na condição de obter qual é a URL de mobile isso foi feito para que seja possível configurar a rota ou URL de Mobile.

Caso você tenha acesso ao servidor podemos criar um sub-domínio para Mobile, por exemplo:

  • m.seusite.com.br

Caso não tenha acesso, não tem problema podemos criar um grupo que se encarregará de responder as rotas Mobile:

  • seusite.com.br/mobile

Outra técnica que pode ser adotada é a criação de um filtro Mobile que só será utilizado caso alguma rota o solicite.

código do filtro mobile:

Route::filter('mobile', function() {
    if ((Agent::isMobile() || Agent::isTablet()) === true) {
        if (Request::server('HTTP_HOST') != Config::get('app.mobile')) {
            return Redirect::to(Config::get('app.mobile'));
        }
    }
});

Você pode chamar o seu filtro em grupos, rotas GET, POST e etc.

Segue um exemplo de utilização do filtro Mobile em um grupo:

Route::group(array('prefix' => 'suarota', 'before' => 'mobile'), function(){
});

Exemplo de chamada do filtro em uma rota GET:

Route::get('suarota', array('uses' => '[email protected]', 'before' => 'mobile'));

E por último podemos utilizar nosso filtro Mobile em um controlador central como por exemplo o BaseController.

Caso seus controladores utilizem como extensão o controlador base, você poderá colocar uma chamada do filtro Mobile no construtor da classe (BaseController):

public function __construct()
    {
        $this->filter('before','mobile');
    }

Observação: Esse último caso não é tão válido que seja colocado no construtor da classe e sim em algum outro método.

Mas caso você queira chamar globalmente e sempre na instância do controlador principal, isso se torna uma forma válida de utilização.

Para não tornar esse POST extenso eu irei deixar algumas explicações para um segundo Post e nele irei abordar: lógica Mobile em seus controladores, trabalhando com Mobile em Laravel e separação de uma camada Mobile.

  • mlops

    segunda parte por favor.. desta maneira pode-se mudar o conteúdo que vem de um BD, para cada dispositivo. Difrerente de MediaQuerys, css3. Certo?

  • quinhone

    Cadê a segunda parte?