PHP ( DOM + PDO ) + Javascript ( Jquery + Jquery Mobile ) Uma ideia para aplicações web para dispositivos móveis

Fala pessoal!

Estou desenvolvendo um servidor PHP para a engine Unity3d. A ideia é ter serviços básicos como login, registro de acessos, highscores dentre outras coisas. Mas o conceito se expande no momento em que teremos uma aplicação web para análise e manutenção dos registros gerados pela Unity.

Em função dessa situação toda me motivei a criar de uma vez um serviço web que tenha um suporte alto a dispositivos móveis. Na verdade isto está muito relacionado com o fato de que meus futuros jogos rodarem em dispositivos móveis, graças a Unity3d.

Por fim, após alguns estudos, defini que não precisaria de algo muito complexo, mas que gostaria de utilizar orientação a objetos e dentro do possível utilizaria bibliotecas prontas.

Optei por não utilizar um framework 100% pronto para manter uma independência do código, pois servidores de jogos tem uma tendência muito alta a sofrerem ataques hackers, nesse caso, quanto mais “pessoal” o código, mas difícil de quebrar. Obviamente, desde que observe algumas técnicas básicas de segurança.

Em função destes objetivos fiz algumas escolhas.

• PHP: é a linguagem que trabalho normalmente e conheço a fundo, 100% relacionada com aplicações webs.
• DOM: bibliotecas padrão do php que tem objetivo principal de criar conteúdo html utilizando orientação a objetos.
• PDO: Camada de abstração de conexão a base de dados.
• Jquery e JqueryMobile : biblioteca javascript que garante o ótimo funcionando em diversos dispositivos móveis.

Obs.: A questão da implementação direta com a Unity3D ficará para outro artigo.

DOM – Document Object Model:

Dom é uma forma definida de acessar/criar elementos HTML. A estrutura DOM foi criada e é mantida pela W3C. Basicamente é uma forma orientadas a objetos de manipulação de elementos html/xml.

Caso você queira saber um pouco mais sobre dom, ficadica http://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos.

Diversas linguagens e frameworks implementam a especificação DOM, no caso o PHP também implementa.

A implementação do PHP é bultin, ou seja, não é necessário instalar nada para que seu código funcione.

A documentação pode ser encontrada em: http://php.net/dom.

Vamos a um exemplo prático:

$doc = new DOMDocument("1.0"); //cria o documento
$div = $doc->createElement("div"); //cria uma Div
$div->setAttribute('style', 'padding: 10px; background-color: red'); //adiciona um fundo vermelho a div
$div->appendChild( $doc->createTextNode('conteúdo da div'));  //colocamos um texto dentro da div
$span = $doc->createElement("span"); //criamos um span
$span->appendChild( $doc->createTextNode( 'conteúdo do span' ) ); //adicionamos um conteúdo ao span
$span->setAttribute('style', 'padding: 10px; background-color: blue'); //definimos o span com fundo azul
$div->appendChild($span); //adicionamos o span dentro da div
$doc->appendChild($div); //adicionamos a div ao elemento
echo $doc->saveHTML(); //efetuamos o output do html

O exemplo acima é bem simples, conforme comentado no código, nele criamos um documento Dom, criamos uma div e um span e atribuímos alguns estilos a ele. É obvio que esse não é um html válido, pois faltou toda a estrutura padrão do documento html, head, body e etc, mas é um exemplo válido.

Isto tudo é bem lega, mas na prática do dia a dia existe a tendência disso se tornar mais lento do que criar html direto.

É nesse ponto que entra a orientação a objetos.

class Div extends DomElement
{
    public function __construct($id, $element= NULL, $class = NULL )
    {
        parent::__construct('div');
        global $doc;
        $doc->appendChild($this);
        $this->setAttribute('id', $id );
        $this->appendChild($element);
        $this->setAttribute('class', $class );
    }
}

No exemplo cima criamos uma classe Div que extende um elemento DOM ( DomElement). Na prática fazer uma chamada de $doc->createElement(‘div’) ou efetuar um new DomElement(‘div’) da na mesma.

A única diferença é que no caso do new DomElement precisamos adicionar ele a um DomDocument, o que não é necessário no outro caso.

Com essa classe criada podemos criar uma div diretamente.

global $doc;
$doc = new DOMDocument("1.0");
$div2 = new Div('myDiv', $doc->createTextNode('conteúdo interno'), 'algumaClasse');
$div2->setAttribute('style', 'background-color: green');
echo $doc->saveHTML();

Isso torna a criação bem mais simples.

Nesse ponto poderíamos criar uma classe para cada tag html e após isso criar classes que agrupam funcionalidades. Como por exemplo uma classe Page que poderia fazer toda a criação de head, body, form criando toda a estrutura básica necessária para uma página.

Aqui começamos a ganhar produtividade.

PDO – PHP Data Object

PDO é uma camada de abstração de acesso a base de dados. Você pode fazer conexões com Mysql, Postgres, MSQL, SqLite e mais uma grande série de bancos.

http://net.tutsplus.com/tutorials/php/why-you-should-be-using-phps-pdo-for-database-access/

O artigo acima  ( em inglês) demonstra com clareza os motivos técnicos para usar PDO, com certeza vale a leitura, mas vou listar alguns aqui:

• Compatibilidade com diversos bancos
• Características contra sql injection.
• Integração total com PHP ( bultin)
• Tipos de retornos variados, inclusive classes próprias.

Brincando com PDO em 4 linhas:

$pdo = new Pdo('mysql:host=localhost;dbname=dbname', 'user', 'password'); //conecta no banco
$ret = $pdo->prepare( 'SELECT * from access LIMIT 1' ); //prepara o sql
$ret->execute( $args ); //executa
$dbData = $ret->fetchObject(); //retorna o sql como um objeto stdClass

Muito simples e efetivo.

Juntando tudo:

<?php
 
class Div extends DomElement
{
    public function __construct($id, $element= NULL, $class = NULL )
    {
        parent::__construct('div');
        global $doc;
        $doc->appendChild($this);
        $this->setAttribute('id', $id );
        $this->appendChild($element);
        $this->setAttribute('class', $class );
    }
}
 
//parte do pdo
$pdo = new Pdo('mysql:host=localhost;dbname=nome_do_banco', 'root', 'senha');
$ret = $pdo->prepare( 'SELECT * from access LIMIT 1' );
$ret->execute( $args );
$dbData = $ret->fetchObject();
 
global $doc;
//parte do dom
$doc = new DOMDocument("1.0");
$div = $doc->createElement("div");
$div->setAttribute('style', 'padding: 10px; background-color: red');
$div->appendChild( $doc->createTextNode('conteúdo da div'));
$span = $doc->createElement("span");
$span->appendChild( $doc->createTextNode( $dbData->useragent ) );
$span->setAttribute('style', 'padding: 10px; background-color: blue');
$div->appendChild($span);
 
$doc->appendChild($div);
 
$div2 = new Div('myDiv', $doc->createTextNode('conteúdo interno'), 'algumaClasse');
$div2->setAttribute('style', 'background-color: green');
 
echo $doc->saveHTML();
 
?>

O código acima é 100% válido, desde que você configure uma base com uma tabela chamada access.

Jquery Mobile

Como terceira ferramenta nesse projeto utilizaríamos a poderosa biblioteca Jquery Mobile.

http://jquerymobile.com/demos/1.2.0/

Com poucas linhas montamos uma bela interface web.

<div <strong>data-role="page"</strong>>
<div <strong>data-role="header"</strong>>
<h1>My Title</h1> </div>
<div <strong>data-role="content"</strong>>
<p>Hello world</p>
</div>
</div>

Utilizando atributos do tipo data  (data-role por exemplo) a biblioteca jQuery mobile identifica tudo que é necessário para a sua página, o legal é que caso o navegador mobile não suporte javascript tudo continua funcionando, de forma mais simples, mas continua.

Repare como os formulários e aplicações ficam  bonitos.

http://www.youtube.com/watch?v=fmytaHlxaOM

O video acima mostra um exemplo prático de um website feito com a tecnologia.

Conclusão:

No final utilizamos as nossas classe orientadas a objetos com DOM para gerar os nossos conteúdos html do jquery mobile.

Por fim temos segurança e abstração de banco de dados com PDO, temos html orientado a objetos com suporte a elementos complexos com DOM e temos conteúdo bonito e pronto para mobile com Jquery mobile.

Banco de dados, servidor e cliente. Tudo prontinho para por a mão na massa!

Valeu pessoal!

Unity3D – Game Engine

Unity logo

Falar sobre a Unity3D é um problema, isto é um fato, existem tantas qualidades e o seu potencial é tão grande que é complicado definir por onde começar.

 

Mas enfim, Unity3D é um motor de jogos 3D (também serve perfeitamente para 2D), não é uma engine que algumas pessoas fizeram em um fim de semana, existe uma equipe de mais de 200 profisionais trabalhando dirariamente nas suas funcionalidades.

Escreva uma vez, compile diversas

Unity Editor

A Unity é um engine multi propósitos, ela permite o desenvolvimento de qualquer tipo de jogos para praticamente qualquer plataforma, ele possui recursos completos de física ( Phyx da Nvidia), partículas, sombras pré-prontas ou em tempo real.

Enfim nem vale a pena insistir em destacar todas as funcionalidades bult-in que ela tem, sem contar que novas funcionalidades podem ser construídas por qualquer um através de scripts e plugins.

A Unity possui documentação super completa, uma seria enorme de tutoriais, videos, forum, site de perguntas e respostas, e uma comunidade bem disposta e bem humorada.

De mobiles a AAA

Unity Xbox

A Unity suporta compilação de seus jogos para PC, MAC, Linux, webplayer próprio, flash, Android, iPhone, PS3, Wii e XBOx, e possivelmente mais algumas plataformas que nem sei que ela suporta. Existem diversos jogos públicados para as mais diversas plataformas, tem gente fazendo dinheiro com ela, com certeza.

A respeito disso, a Unity permite que qualquer pessoa lance jogos para PC, MAC e Linux sem pagar um pila pra ela, desde que sua empresa fature menos de 100 mil dólares por ano. Se você quiser lançar jogos para outras plataformas terá que abrir a carteira, mas a versão Android por exemplo, custa somente 400 dólares, um valor acessível podemos dizer, se comparado a licenças de outros softwares.

Formatos e arquivos

Unity Scene

A Unity suporta uma gama “fenomenal” de formatos, tem compatibilidade a diversos formatos 3D, Max, Maya, Blender, Sketchup, a sua programação pode ser feita utilizando Javascript, C# ou Boo (um tipo de Python), suporta “todos” formatos de imagens conhecidos e também audios.

Enfim, a Unity é maravilhosa, uma ótima escolha para quem quer fazer jogos AAA, indies, móbile ou seja lá o que for, seja um jogo de corrida, luta, RPG, ação, adventure, com ou sem recursos de redes.

Fiquem com um videozinho da capacidade gráfica do bichinho:

Por fim, vale a pena dar uma atenção para esse motor.

Observações:

Algumas pessoas podem ter visto este post em http://beatnupproject.nostaljia.eng.br/unity3d-game-engine/.

Este é o meu blog sobre desenvolvimento de jogos. Como não estou conseguindo manter os dois blogs, estou planejando.

Isto irá gerar mais artigos sobre jogos, tanto programação como criação e também vou aplicar um leiate totalmente novo para o blog, nos próximos dias teremos novidades.