Google App Engine

Pessoal,

Neste post eu vou falar rapidamente sobre o google app engine, que já vem configurado para uso junto com o plugin do google para o eclipse.

Bom, primeiramente (e antes mesmo ate de falar sobre real praticidade de usar o app engine como servidor) vem o fato de um usuário google ter direito a até 8 aplicativos dentro do appengine.

Para criar um aplicativo que utiliza o app engine, primeiro é preciso acessar http://appengine.google.com e criar fazer o login pela primeira vez. Logo após já é possível criar a primeira aplicação no site mesmo.

Cada aplicação do app engine tem um ID próprio, que deve ser escolhido durante a criação da aplicação e vai ser a url de acesso para ela (id-da-aplicacao.appspot.com).

Com esse ID, abra o eclipse, clique com o botão direito sobre o projeto, selecione propriedades->Google->App engine.

Coloque o ID de sua aplicação e pronto.

Para publicá-la, clique no logo do app engine (aquela turbina com asas) que fica no topo esquerdo da tela (ao lado do desenho do google e do gwt), que o site sera enviado para o appengine.

Alem disso, é possível especificar (na tela onde coloca o id da aplicação) qual a versão atual da mesma, e assim, manter um histórico no servidor de versões.

Caso você opte por definir uma nova versão para a aplicação, quando você publica-la ela não vai atualizar para a nova versão automaticamente. Será preciso acessar o site appengine.google.com, selecionar a sua aplicação, selecionar a aba lateral "Versions" escolher qual versão do site deixar disponivel e selecionar a opção make default.

Agora que já sabemos como enviar uma aplicação para a nuvem, vamos falar das vantagens e usos do app engine.

• Uso para hospedar sites estaticos (apenas html). Como possui um limite de 500mb de armazenamento, o app engine é uma opção rápida e barata para colocar no ar um hotsite, site institucional e afins
• Computação nas nuvens. Uma aplicação no app engine tem acesso a toda a infraestrutura do google de servidores, o que permite uma resposta mais rápida e escalonável da aplicação ao usuário final. Outro ponto interessante é que não precisamos nos preocupar com a infraestrutura por tras do site.
• BigTables. Acesso a mesma estrutura de armazenamento de dados que o google usa. Isso se traduz num banco de dados rápido e simples de ser utilizado.

Nem tudo são flores porém.

O App Engine é um serviço semi-free. Ele possui uma cota diária de utilização:

• Tempo de processamento
• Requests
• Entrada e saída de dados
• Pedidos de segurança
• entre outras...

Porém essas cotas são mais que suficientes para sites médios, e mesmo para sites com muitos acessos, é possível habilitar a opção de pagamento. Onde você paga se exceder uma das cotas. Os valores são relativamente baixos... algo como R$0,20 por hora adicional de processamento e por ai vai...

Realmente vale mais a pena, pois em um dia que o trafego não exceda a cota você nao paga a mais.

Bom, esses são os motivos pelos quais o The Way better está sendo implementado utilizando o App Engine.

Como funciona o GWT

Agora que temos o nosso primeiro projeto com GWT vale a pena falar sobre como ele está estruturado e como ele funciona.

O GWT funciona através de módulos, que podem ser adicionados a qualquer página HTML, basta incluir a referencia para o javascript do módulo.

O módulo é composto por um arquivo XML (que fica na pasta raiz do módulo) e que contém registros sobre quais classes devem ser importadas para o módulo.

Uma dica importante aqui é que o gwt cria toda a estrutura do javascript do módulo utilizando o caminho do pacote do módulo, o que pode levar a arquivos com nomes muito grandes. Uma boa prática neste caso é utilizar o atributo rename-to da tag module como no exemplo:

assim as pastas/arquivos vão ter um nome menor e mais fácil de identificar.

Dentro de cada módulo são criados 2 pacotes principais: o pacote client e o pacote server. Eu vou abordar o pacote server em outro post.

Vamos falar principalmente sobre o pacote client agora:

Todas as classes que estiverem dentro desse pacote (e sub-pacotes também) serão compiladas para javascript. Um erro muito comum é não se atentar para as classes que ficam dentro desse pacote, que (por serem transformadas em javascript) são restritas a uma lista de classes permitidas. Isso me causou uma certa dor de cabeça no início, porque eu não tinha me atentado para esta lista.

Dentro do pacote client ficam os EntryPoints que são pontos de entrada do módulo. Para uma classe ser considera uma EntryPoint ela deve implementar a interface com.google.gwt.core.client.EntryPoint, que define o método onModuleLoad() que é executado quando o módulo é carregado na página. Além disso ele também deve estar especificado no arquivo XML do modúlo através da tag <entry-point class="path.to.the.class" />.

Bom, com essas informações acho que já estamos começando a entender como funciona o GWT. No próximo post eu vou falar um pouco sobre o App Engine, que pode ser utilizado como servidor para o gwt (e que já vem configurado com o plugin do eclipse).

Para tirar quaisquer dúvidas comentem este post, ou então vocês podem me encontrar no twitter: @bgondim

Até lá pessoal!

Criando um projeto GWT

Agora que sabemos um pouco mais sobre o GWT vamos começar a por a mão na massa.
A maneira mais rápida e fácil de começar a desenvolver com GWT é através do plugin do eclipse do Google. Esse plugin facilita bastante a criação de um projeto que utilize o GWT.
Esse plugin atualmente suporta as versões 3.3 e 3.4 do eclipse. Para instalá-lo siga os procedimentos no site do projeto.

Com o plugin instalado, vá em Arquivo -> Novo -> Other e procure por Web Application Project.

Defina o nome do projeto, o pacote padrão e se você quer usar o GWT e o App Engine.

Ao criar o projeto você ja terá um módulo criado de exemplo. Para ve-lo clique com o botão direito sobre o projeto e depois em Run as -> Web Application

Pronto com isso temos a nossa primeira aplicação com GWT!

No próximo post vamos alterar esse exemplo e criar uma estrutura de pastas e pacotes para melhor organizar o projeto.

Iniciando na programação com GWT

Bom pessoal, eu vou começar agora com uma série de artigos explicando como programar utilizando o GWT - Google Web Toolkit.

Bom antes de começar vale a pena ressaltar algumas coisas sobre o GWT.

O GWT é um framework voltado principalmente para a criação da interface do site com o usuário, apesar de ser programado utilizando a linguagem JAVA. Outro ponto que confundem muitas pessoas é o fato dele ser programado em java, mas rodar no cliente. O fato é que o GWT "compila" o codigo escrito em java para javascript, para que ai sim ele possa rodar no navegador do cliente.

Certo, mas porque usar o gwt? Quais beneficios reais ele realmente traz?

Bom respondo essa pergunta utilizando por base os projetos que ja realizei na carreira (codificando diretamente o javascript) e o meu projeto caseiro atual. Com isso levanto alguns pontos:

• Velocidade e complexidade de codificação: É muito mais simples e rápido criar uma interface utilizando GWT do que programar diretamente utilizando javascript. Interações dinâmicas com o servidor e com o cliente foram criadas de maneira fácil e transparente.
• Manutenção do código: o código ficou muito mais organizado e fácil de manter, além de não ter nenhum bug.
• Orientação a objetos: É muito mais simples manter e reusar o codigo, utilizando a orientação a objetos do java.
• Gerenciamento do CSS: Pode-se deixar a cargo do próprio gwt fazer o carregamento dos arquivos CSS, acelerando ainda mais o carregamento da página.
  
• Velocidade de carregamento da página: O GWT cria um codigo obfuscado, que alem de carregar apenas a parte do codigo realmente importante(faz o carregamento do javascript por blocos), aumenta em muito o carregamento da página. Outra vantagem do gwt é a criação de sprites de imagens automáticos, diminuindo o tempo de carregamento das imagens também.
• Segurança e estabilidade: O código javascript gerado pelo GWT é obfuscado, o que já gera uma dificuldade maior de estranhos entenderem o que esta codificado. Por gerar uma versão otimizada para cada navegador o gwt também melhora a velocidade de processamento da página, e possibilita que até mesmo navegadores com recursos mínimos de javascript (como o opera mini para celulares com java) consigam navegar no site e ate mesmo interagir com ele, sem que o programador precise codificar especificamente para isso.
• Integração com outros frameworks: o GWT permite ainda q se crie métodos nativos do javscript (que inclusive podem chamar outros métodos java). Com isso fica fácil integrar o gwt com outros frameworks, como jquery. Inclusive o extjs já criou uma biblioteca para o gwt, denominada gxt.
• Integração com as APIs do próprio Google: o gwt possui uma ótima integração com as outras APIs do google. O próprio plugin do eclipse já cria um projeto com GWT + google app Engine. Diversos gráficos da visualization API também já foram portados para o gwt e também outras APIs, como a friend connect, google accounts, translation, maps e outras.
  

Bom, essas foram as minhas primeiras impressões sobre o GWT.
Nos próximos posts, eu vou começar a falar sobre o desenvolvimento em si da aplicação the waybetter.

Até lá

Versão 3 no ar!

Pessoal, versão 3 no ar!

Algumas mudanças no design da página e um pouco mais de conteudo.

Preparando para trabalhar melhor com a ideia sobre "ideia".

Get it Smart v2

Esta no ar a segunda versão do getitsmarter.

Nessa versão ja há um esboço de layout e também algumas melhorias sugeridas pelo pessoal.

A idéia do site também está avançando.

Uma coisa importante a observar é que o código gerado pelo GWT também funciona no Opera Mini 4.2, iPhone e Palm Pre.

Get it smarter (The way better)

Esta no ar a versao alpha 1 (prova de conceito) do getitsmarter!

http://getitsmarter.appspot.com

Este site vai evoluir para uma rede social sobre o meio ambiente, com um espaço onde poderemos discutir melhores maneiras de aproveitar os nossos recursos, assim como tambem denunciar abusos de empresas e pessoas.

A meta é que o site tenha pelo menos uma atualização diaria, então não se assustem se caso você voltar ao site no dia seguinte e ele esteja ja bem diferente!

Quem quiser colaborar pode acessar a página do projeto e entrar em contato diretamente comigo.