Primeiro dia com o Python

20 de julho de 2010

Hoje iniciei meu desenvolvimento com Python, tomei essa iniciativa após o oosjam

Aqui será uma espécie de passos que eu segui.

Acessei o site http://www.python.org e fiz o download da versão 2.7 para Windows e comecei a leitura desse link http://docs.python.org/tutorial/index.html, li somente a primeira página enquanto rodava o executável MSI, mandei instalar na pasta padrão C:\PYTHON27\

Como gosto da parte prática tentei ir direto para o “Hello World” :D

Primeiro Problema, como configurar o windows para entender o Python :(

No tutorial do site do Python, o segui. Abri o prompt de comando e digitei python

||    ‘python’ não é um comando reconhecido

Tive que adicionar o caminho de instalação ao path do windows

||    set path=%path%;C:\python27

Depois disso, digitei python no prompt e deu certo :) . Abriu uma interface no prompt e eu fiz o meu primeiro “Hello World” foi até que simples, veja:

||    print ‘hello world’
||    print “hello world”

Ainda não aprendi o suficiente, mas funcionou com aspas duplas e com aspas simples, algo interessante do Python é que não precisa de ; no final da linha, basta pular de linha que ele entende que é uma nova instrução.

Como eu já sabia, arquivos Python tem a extensão .py

Então, pensei, vou salvar um arquivo e tentar executá-lo. Criei um arquivo em uma pasta qualquer e quando salvei como .py no notepadd++ e fechei o arquivo e fui na pasta vê-lo. Para minha surpresa, o arquivo já alterou o icone, informando que era um arquivo executável e que o windows reconhecia o seu tipo. Clique duas vezes no arquivo e rapidamente, o prompt de comando abriu e fechou. Pensei comigo mesmo, deve ter algo de errado com o arquivo né? Ai fiz a seguinte “burrada”, coloquei 2000 linhas com a seguinte instrução
||     print “hello”
||     print “hello”
||     print “hello”
||     print “hello”
||     …

Cliquei duas vezes novamente e percebi que ele estava imprimindo várias vezes. Acima disse que fiz a “burrada”, porque eu bem que poderia ter criado um for, que é muito mais elegante do que um CTRL+C e CTRL+V. Problema!!!!

Segundo problema, como se cria variavel em Python??
Bem mais simples do que pensei basta escrever a variavel e usar o sinal de ‘=’ para atribuir o valor
||    i = 0

Maravilha, e agora vamos ao for, ops! mais um problema

Terceiro problema, como se cria um for
Fiquei feliz, descobri rapidinho, um amigo me indicou o livro “Beggining Python – From Novice To Professional (Magnus Lie Hetland)”, algo interessante de ser mencionado é que no Python não tem abre e fecha chaves, tudo é na base da identação :)   Acredito que dessa forma seja até melhor para se programar, afinal tem gente que abre as chaves na mesma linha e outros abrem na linha de baixo do método, mas isso é outra história.
||     for numero in range(1,20000):
||         print numero

Resultado:
||       1
||       2
||       3
||     ….

Mas agora eu queria fazer algo para melhorar um pouco e deixar mais próximo da “vergonha” do CTRL+C e CTRL+V que fiz acima, então resolvi concatenar variavel com a String, ops!!! outro problema

Quarto problema, como concatenar variavel em Python
Com o livro essa foi facinho, basta utilizar a virgula, isso mesmo ‘,’ a virgula.
Como agora estou com o livro, acho que os problemas vão diminuir :) “Tomara!”
||    for numero in range(1,20000):
print “hello”,numero

Resultado:
||     hello 1
||     hello 2
||     hello 3
||     ….

Além da virgula ‘,’ concatenar ela serve para dar um espaço em branco, mas como que se concatena sem espaço??

Quinto problema, concatenar um numero com uma string sem espaço em branco?
Esse foi mais complicado, porém aprendi diversas outras coisas, mas no final descobri com se faz, reparem na crase ‘`’
||    for numero in range(1,20000):
||        print ‘hello’+`numero`

Resultado:
||     hello1
||     hello2
||     hello3
||     ….

O que aprendi que comentei acima é que se eu quisesse repetir o campo “hello” varias vezes eu poderia simplesmente multiplicar pelo valor que eu quisesse, exemplo:
||    for numero in range(1,20000):
||        print ‘hello’*5

Resultado:
||     hellohellohellohellohello
||     hellohellohellohellohello
||     hellohellohellohellohello
||     ….

Outra coisa que aprendi no primeiro dia de Python foi como executar um script direto no console ( prompt de comando ), sem a necessidade de clicar duas vezes no arquivo
Vá até a pasta que o arquivo está instalado e digite
||    python hello.py
ou
||    hello.py

Esse foi o estudo que realizei com Python no primeiro dia. Espero amanha ter tempo para investir mais um tempo e testar outras coisas, como por exemplo, mais laçõs de repetição, condicionais e o que mais surgir de dúvida.

Peço que me ajudem a erros que cometi acima, e fatos que ainda não aprendi e quais podem ser meus próximos passos.

Até mais

Paulo Fernandes
@paulofernandesj

SCRUM em 2 minutos

10 de maio de 2010

O texto abaixo foi criado por Paulo Fernandes (eu) e Jefferson Lira como parte do artigo Como atender os requisitos arquiteturais de software usando métodos ágeis como SCRUM e XP.

O SCRUM é um processo iterativo e incremental para o desenvolvimento de qualquer produto e gerenciamento de qualquer projeto, a quem diga que esta mais para um framework que uma metodologia, ou até mesmo mais para atitude que um processo.

Para que o SCRUM seja utilizado com êxito, cada pessoa envolvida deve cumprir com seu papel, seguindo corretamente todos os processos, e a fim de viabilizar, utilizar como apoio algumas das ferramentas que lhe são oferecidas. Entretanto, para que seja possível seguir corretamente todos os processos, primordialmente é necessário que todos estejam de acordo com a cultura envolvida.

Segue abaixo uma breve descrição sobre os três papeis relacionados ao SCRUM:

Product Owner: responsável por garantir o retorno de investimento, este deve conhecer as necessidades do cliente;

Scrum Master: responsável por remover os impedimentos do time e garantir o uso do SCRUM;

Time (Equipe): equipe de desenvolvimento multidisciplinar e auto-gerenciável, responsável por produzir produto com qualidade e valor para o cliente.

As ferramentas como: Product Backlog, Sprint Backlog, Burndown Chart e Scrum Board são de grande utilidade durante o ciclo de vida do SCRUM. Para um melhor entendimento, segue abaixo uma breve descrição:

Product Backlog: uma lista com todos os requisitos que o Product Owner deseja, sem muitos detalhes técnicos, essa lista é ordenada por prioridade pelo Product Owner;

Sprint Backlog: contém uma lista com as tarefas decompostas sobre os itens extraídos do Product Backlog que foi definida no Sprint Planning Meeting e que deverá ser entregue ao Product Owner.  Estas atividades não devem durar mais de 2 dias ou 16 horas;

BurnDown Chart: gráfico que mostra o trabalho da equipe dia a dia, avaliando assim se o Sprint está atrasado ou não. Caso o gráfico demonstre que a equipe acabará o Sprint antes, o Product Owner é consultado e novas funcionalidades são incorporadas àquele Sprint;

Scrum Board: é um quadro onde deverá contemplar todas as tarefas que serão realizadas dentro de um Sprint e listadas de acordo com as prioridades de cada item.

Existem três tipos de cerimônias no SCRUM, Sprint Planning Meeting, Daily Scrum Meeting e Sprint Review Meeting, estes três tipos de evento caracterizam bem o ciclo de vida de cada Sprint: início, meio e fim. Segue abaixo uma breve descrição sobre as cerimônias:

Sprint Planning Meeting: encontro para planejar o que será feito no Sprint. A equipe acessa o Product Backlog e detalha de forma mais ampla as atividades que serão executadas no Sprint de acordo com suas prioridades, avaliando tempo e complexidade. Após definido o que será feito, o Sprint Backlog é gerado;

Daily Scrum Meeting: encontros diários, com duração em média de 15 minutos, a idéia de ser uma reunião em que cada membro da equipe deve responder 3 perguntas: O que fiz ontem? O que farei hoje? O que está impedindo de que alcance o objetivo? Essa reunião é liderada pelo ScrumMaster;

Sprint Review Meeting: encontro realizado quando o Sprint chega ao fim. Este encontro é dividido em duas partes, na primeira parte é demonstrado ao ProductOwner quais atividades definidas no Product Backlog foram realizadas, o Product Owner lidera esse encontro e pode chamar todos os interessados no projeto. Após a demonstração o Product Owner e os interessados no projeto atualizam e repriorizam o Product Backlog, definindo assim o próximo Sprint. Finalizada essa primeira parte o ScrumMaster toma a liderança e começa uma reunião com a equipe, onde a equipe avalia o que foi realizado positivamente e negativamente no Sprint, também avaliam o que poderia ser mudado para melhorar o próximo Sprint.

O Sprint é um conjunto de tarefas a serem executadas em um determinado tempo. A Figura 1 ilustra o ciclo de vida do SCRUM.

Ciclo de Vida do SCRUM

Ciclo de Vida do SCRUM

Arquitetura de Software em 2 minutos

10 de maio de 2010

O texto abaixo foi criado por Paulo Fernandes (eu) e Jefferson Lira como parte do artigo Como atender os requisitos arquiteturais de software usando métodos ágeis como SCRUM e XP.

A arquitetura do software é um ponto de extrema importância no desenvolvimento e deverá ter uma maior atenção quando sua existência é de grande complexidade para o sucesso do software, pois a definição desta poderá não ser a mais apropriada para o negócio. A má escolha de uma arquitetura de software fará com que o projeto possa ser um desastre, já a melhor escolha propicia uma maior chance para o sucesso do projeto. Abaixo evidenciamos definições sobre o que é a arquitetura de um software.

A arquitetura de software de um programa ou de um sistema é a estrutura ou estruturas do sistema, que incluem elementos de software, propriedades externas e as suas relações.

A arquitetura de software define a estrutura básica do sistema. A arquitetura é modulada em um alto nível de funcionalidades do sistema, gerenciamento e distribuição de dados, qual plataforma será usada, etc.

Arquitetura de software é a estrutura dos componentes do sistema/programa, seus relacionamentos, princípios e diretrizes para o projeto e sua evolução.

Devido as definições citadas acima, formalizamos que não existe uma definição mundial sobre o que é a arquitetura de software. As definições no geral enfatizam que a arquitetura é a descrição do sistema e a soma de pequenas partes dele, e como essas partes se relacionam e cooperam entre si para executar o trabalho do sistema. A qualidade e longevidade do software são determinadas pela sua arquitetura.

Não podemos confundir a arquitetura do software com o design. A arquitetura se preocupa com a seleção de elementos arquiteturais, suas iterações e restrições, já o design são as atividades que se preocupam com a modularização e detalhamento de interfaces, algoritmos, procedimentos e tipos de dados que darão suporte satisfatório a arquitetura.

Um software tipicamente contempla requisitos funcionais e não funcionais, sendo que muitas das vezes um deverá refletir o comportamento do outro. Os requisitos funcionais descrevem as funções que o software deve ser capaz de realizar. Já os requisitos não-funcionais descrevem as qualidades e restrições de como o sistema realiza suas funções. Um software, portanto, deve exibir atributos de qualidade que atendam aos seus requisitos.

O ideal é que os atributos de qualidade do software sejam identificados e qual a sua influência na arquitetura, por fim relacionar estes atributos as decisões arquiteturais que os proporcionam.

Com um modelo de apoio para definir e organizar os atributos do software importantes para a avaliação de sua qualidade existe a norma ISO 9126. Esta norma é um padrão internacional para avaliação da qualidade do software. Os atributos utilizados para avaliar a qualidade do software são os seguintes:

Funcionalidade: é a capacidade do software realizar as funções que foram especificadas;

Confiabilidade: é a capacidade do software ser seguro e tolerante a falhas;

Usabilidade: é a medida da facilidade do usuário executar alguma funcionalidade do sistema;

Eficiência: é a capacidade do sistema alcançar a resposta dentro do período de tempo especificado, está relacionado tanto ao desempenho quanto aos recursos usados;

Manutenibilidade: é a medida de quanto o software é fácil ser alterado;

Portabilidade: é a medida da facilidade do software ser portado para outro ambiente.

Tendo definido as decisões e informações arquiteturais, seja performance, escalabilidade, arquitetura de referência, segurança, ou outros itens, estas devem ser armazenadas em um documento. O documento mais comum que encontramos é o DAS (Documento de Arquitetura de Software). Este documento é de grande utilidade para guiar a equipe de desenvolvimento.

eXtreme Programming (XP) em 2 minutos

10 de maio de 2010

O texto abaixo foi criado por Paulo Fernandes (eu) e Jefferson Lira como parte do artigo Como atender os requisitos arquiteturais de software usando métodos ágeis como SCRUM e XP.

Extreme Programming ou XP como é chamado é um processo de desenvolvimento de software baseado em valores de simplicidade, comunicação, feedback e coragem. O objetivo do XP é assegurar que o cliente receba o máximo de valor a cada dia de trabalho da equipe de desenvolvimento. Ele é organizado em torno de valores e práticas que atuam de forma harmônica e coesa para assegurar que o cliente sempre receba um alto retorno do investimento em software.

Os quatro valores fundamentais em que o XP se baseia são:

Feedback: fazer com que o cliente conduza o desenvolvimento diariamente a fim de garantir que a equipe direcione toda a sua atenção para aquilo que de fato irá gerar mais valor;

Comunicação: evitar o gasto de um valioso esforço na tentativa de trocar informações por meios de extensos documentos escritos que freqüentemente são interpretados de forma incorreta ou incompleta;

Simplicidade: garantir que seja desenvolvido apenas o suficiente para atender as necessidades atuais do cliente, desprezando qualquer funcionalidade não essencial;

Coragem: devido ao XP ser uma metodologia de software que se baseia em diversas premissas que contrariam os processos tradicionais de desenvolvimento de software, é preciso que todos da equipe tenham coragem para adotá-las e acreditar que, utilizando as práticas e valores do XP, serão capazes de fazer com que o software evolua com segurança e agilidade.

O XP tem alguns pontos fortes que auxiliam no processo de desenvolvimento, a citar:

Cliente Presente: a presença objetiva viabilizar a simplicidade dos processos, facilitar a comunicação com os desenvolvedores e permitir um ciclo continuo e rápido de feedback;

Jogo do Planejamento: reunião com o cliente a cada nova release a fim de definir quais funcionalidades devem ser implementadas de acordo com suas priorizações;

Stand Up Meeting: reunir com a equipe de desenvolvimento a cada manhã para avaliar o trabalho que foi executado no dia anterior e priorizar aquilo que será implementado no dia que se inicia;

Refactoring: é utilizado para manter sempre o software o mais simples possível de ser manipulado sem que estas alterações no código possam afetar as funcionalidades que já estão implementadas;

Código Coletivo: a idéia é que o código seja comunitário a todos os desenvolvedores, permitindo assim que todos possam alterar o código quando necessário sem ter que pedir autorização de outra pessoa;

Código Padronizado: a fim de permitir que o sistema seja o mais homogêneo possível, a equipe deve estabelecer padrões de codificação, viabilizando assim a facilidade de qualquer manutenção futura;

Metáfora: técnica para transmitir idéias de formas simples, através de uma linguagem comum que é estabelecida entre a equipe e o cliente;

Ritmo Sustentável: é recomendável que os desenvolvedores trabalhem apenas 8 horas por dia a fim de garantir o máximo de rendimento e permitir a produção de software com a melhor qualidade possível;

Design Simples: optar sempre pela simplicidade do design, viabilizando a agilidade durante o desenvolvimento, dado que o feedback deve ser rápido ao cliente;

Integração Contínua: a equipe de desenvolvimento deve garantir a integração de seus códigos com o restante do sistema diversas vezes ao dia;

Releases Curtos: visa à disponibilidade de funcionalidades rapidamente ao cliente para que ele possa utilizar o software no dia-a-dia e se beneficiar dele.

Desenvolvimento Guiado pelos Testes: visa o desenvolvedor escrever testes para cada funcionalidade antes mesmos de começar a codificá-las, possibilitando eles aprofundar o entendimento das necessidades do cliente;

Abaixo a Figura demonstra as práticas e os principais ciclos do XP:

Práticas e princípios do XP

Práticas e princípios do XP

A idéia da utilização do XP é voltada para projetos cujos requisitos são vagos e mudam com freqüência, desenvolvimento de sistema orientado a objeto, equipes pequenas e de preferência até 12 desenvolvedores. Este desenvolvimento deverá atender o modo iterativo ou incremental, objetivando que o sistema comece a ser implementado logo no início do projeto e ao longo do tempo adquirindo novas funcionalidades.

Instalando DWR em sua aplicação Java para criar o efeito de onchange de um combobox para outro

2 de dezembro de 2009

Objetivo

Este artigo tem como objetivo principal ser rápido, direto e ilustrar como criar um combobox (elemento select do HTML) de estados e no evento de onchange criar a lista de cidades a partir do estado.

Como configurar

A primeira coisa que deve ser feita é acessar o site do framework DWR (http://directwebremoting.org/dwr/index.html) após isso, baixe à última versão estável do framework, no momento da escrita deste artigo a versão é 2.0.5.

No próprio site do DWR, existe um tutorial Get Started que ensina passa a passo como instalar, configurar e ainda alguns exemplos do que pode ser feito e de como fazê-los. Neste artigo será feito um passo a passo mais resumido que o encontrado no site, caso queira mais detalhes, entre no site do framework. Abaixo segue um passo a passo do que deve ser feito:

1. Adicione a lib do DWR (dwr.jar) ao classpath da aplicação (copie o arquivo dwr.jar para a pasta WEB-INF/lib, por exemplo);

2. Adicione o seguinte trecho de código ao arquivo web.xml, que está dentro da pasta WEB-INF;

<servlet>

<servlet-name>dwr-invoker</servlet-name>

<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

<servlet-mapping>

<servlet-name>dwr-invoker</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

3. Crie dentro da pasta WEB-INF um arquivo chamado dwr.xml, adicione o seguinte conteúdo dentro dele (Este arquivo será explicado mais tarde);

<!DOCTYPE dwr PUBLIC

“-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN”

“http://getahead.org/dwr/dwr20.dtd”>

<dwr>

<allow>

<create creator=“new” javascript=“AjaxDwr”>

<param name=“class” value=“br.com.phpaulo.dwr.exemplo.util.AjaxDwr”/>

</create>

<convert converter=“bean” match=” br.com.phpaulo.dwr.exemplo.bean.Fornecedor” />

<convert converter=“bean” match=” br.com.phpaulo.dwr.exemplo.bean.Municipio” />

</allow>

</dwr>

4. Pronto! Sua aplicação já está utilizando o framework DWR.

Código Java e JavaScript

Para atingir o objetivo do artigo que é ser simples e direto, assumimos que o código Java e a página JSP da aplicação estão prontas e somente necessitem de ajustes para o DWR, caso precise de mais algum suporte, deixe um comentário ou mande um e-mail para o autor. Vamos à parte visual para este exemplo. Adicione na sua página JSP a chamada das bibliotecas JavaScript necessárias:

<script type=‘text/javascript’ src=<%=request.getContextPath() %>/dwr/engine.js’></script>

<script type=‘text/javascript’ src=<%=request.getContextPath() %>/dwr/util.js’></script>

Quando o arquivo dwr.xml foi criado, adicionamos o seguinte bloco de código:

<create creator=“new” javascript=“AjaxDwr”>

<param name=“class” value=“br.com.phpaulo.dwr.exemplo.util.AjaxDwr”/>

</create>

Este bloco significa que um novo arquivo JavaScript será criado e o nome desse arquivo será AjaxDwr, veja as opções no bloco acima, bem intuitivo não. O conteúdo desse arquivo será o mesmo que a classe Java que está mapeada no parâmetro value dentro da tag create, com todos os métodos dessa classe com uma função de retorno (callback).

Adicione na página que você deseja ter o suporte ao DWR a seguinte linha:

<script type=‘text/javascript’ src=<%=request.getContextPath() %>/dwr/interface/AjaxDwr.js’></script>

Esta linha poderá ser alterada, tudo dependerá do nome que você der ao JavaScript da classe. O <%=request.getContextPath() %> é apenas para referenciar o contexto da aplicação. Com esse processo feito agora só precisamos criar a função JavaScript que será executada no evento onchange do combo de estados, essa função pode ser vista abaixo:

1.function atualizaCombo() {

2.      var uf = dwr.util.getValue(”uf”);

3.      AjaxDwr.getCidades(uf, montaCombo);

4.}

5.

6.function montaCombo(data){

7.    dwr.util.removeAllOptions(”cidade”);

8.    dwr.util.addOptions(”cidade”, data, “idMunicipio”, “nmMunicipio”);

9.}

Repare na função, usamos variáveis do DWR. Abaixo é explicado linha a linha o que é feito no código acima:

Linha 1. Declara a função atualizaCombo, sem parâmetro;

Linha 2. Armazena o valor selecionado no combo cujo id seja igual a uf;

Linha 3. Invoca a classe AjaxDwr, definida no arquivo dwr.xml e chama o método getCidades passando como parâmetro o id do estado, através da variável uf definida na Linha 2 e chama uma função no callback da getCidades, chamar no callback, quer dizer que ela será executada quando o método getCidades da classe Java for concluído, no caso essa função chama montaCombo e deverá ser passada sem parâmetros, pois está implícito que ele recebe o retorno da função getCidades;

Linha 6. Declara a função montaCombo, recebendo como parâmetro a o retorno do método getCidades;

Linha 7. Remove todos os elementos <option> que o combo de tiver, essa função recebe como parâmetro o id do elemento que queremos remover as opções;

Linha 8. Adiciona toda a lista de elementos que vir de retorno do método getCidades, no caso, essas opções são as cidades, a assinatura do método é dwr.util.addOptions(id_do_elemento, conteúdo_de_retorno, campo_que_representa_o_value, campo_que_representa_o_texto_do_valor); Onde:

id_do_elemento: representa o id do combo que deve receber os dados;

conteúdo_de_retorno: representa o conteúdo que deve ser retornado pelo método, qualquer nome válido pode ser usado;

campo_que_representa_o_value: nome do atributo que está definido no bean que representa o id;

campo_que_representa_o_texto_do_valor: nome do atributo que está definido no bean que representa o texto a ser exibido no option.

Para mais informações de possibilidades de adicionar opções, veja o seguinte link http://directwebremoting.org/dwr/browser/util/lists.html.

O método getCidades da classe Java, deve ser um método simples, deve retornar uma lista de cidades, como o método abaixo:

public List<Cidade> getCidades(int idEstado){

List<Cidade> listaCidades = new ArrayList<Cidade>();

if( idEstado > 0 ) {

try {

listaCidades = new CidadeDAO().getMunicipios(idEstado);

} catch(SQLException e){

e.printStackTrace();

}

}

return listaCidades;

}

Um detalhe importante para que isso funcione é que criemos um converter no DWR para que ele saiba qual bean pode converter, o por isso dessa linha no arquivo dwr.xml.

<convert converter=“bean” match=” br.com.phpaulo.dwr.exemplo.bean.Fornecedor” />

Para cada bean que for utilizar crie um converter para o DWR saber em quais classes ele pode converter e dessa forma realizar a conversão de forma correta.

Conclusão

Da forma que foi exibido acima, você poderá criar um combo com uma lista de opções de qualquer classe e no evento onchange filtrar opções para o próximo combo.

Caso o erro “data is null” for exibido, verifique se não esqueceu de configurar o converter, ou reveja as opções definidas no método addOptions.

A idéia foi mostrar de forma clara e objetiva como criar o clássico caso de selecionar um estado e gerar a lista de cidades. Espero que aproveitem e que este artigo faça com que o seu trabalho fique mais produtivo.

Links

http://directwebremoting.org/

http://directwebremoting.org/dwr/introduction/getting-started.html

http://directwebremoting.org/dwr/browser/util/lists.html

http://www.devmedia.com.br/articles/viewcomp.asp?comp=3733

A API do Yahoo! meme

15 de outubro de 2009

Em outubro de 2009 o Yahoo! liberou a versão beta do meme (http://meme.yahoo.com). Para quem não sabe o meme é um serviço de microblog semelhante ao Twitter (http://twitter.com), porém no meme podemos postar vídeos, fotos, links, textos, arquivos de música e não temos um limite de 140 caracteres nas mensagens.

Até a data da escrita desse artigo, o serviço não era popular e não tinham ferramentas para acesso ao serviço, tudo tinha que ser pelo próprio site do meme. Como o objetivo do artigo é ser técnico não entraremos em detalhes do serviço e sim falaremos da API.

Introdução

Para usar esta API, você precisa conhecer primeiramente um pouco sobre como o Yahoo! trabalha com suas APIs. O Yahoo! usa a linguagem YQL ( Yahoo Query Language), nada muito óbvio não? O YQL é uma linguagem baseada na mesma estrutura do SQL (Structure Query Language), para essa API do meme passamos os comandos via uma requisição HTTP, REST. O Yahoo! fornece suporte a alguns linguagens, entre elas Flash, Java, JavaScript, .NET, PHP, Python, Ruby e Silverlight, neste artigo não usaremos nenhuma linguagem, apenas mostraremos como chamar as querys e gerar as chamadas REST.

Abaixo temos um exemplo de como escrever uma query usando o YQL, está query é apenas um exemplo e não faz parte da API do meme. O resultado dela é um XML com todas as “tabelas” que podemos usar, podemos também fazer o retorno ser via JSON ao invés de XML. No artigo será trabalhado com XML.

Comando: show tables

Requisição REST gerada: https://query.yahooapis.com/v1/public/yql?q=show%20tables&format=xml

Para testar mais comandos do YQL, sugiro que acesse o console de demonstração do Yahoo! https://developer.yahoo.com/yql/console/. Apenas para comunicar que para muitas coisas, precisaremos estar autenticados com a nossa conta do Yahoo!

Agora que já sabemos um pouco como a API funciona, vamos colocar a mão na massa e trazer alguns resultados mais reais do meme. A conta usada para os exemplos de requisições do meme será esta: paulofernandesj.

Tela Console Yahoo!

Tela Console Yahoo!

O que posso fazer?

Não diferente de algumas APIs do Google, o Yahoo! também pede para que você obtenha uma chave para acesso a API. Para obter essa chave acesse a central dos desenvolvedores http://developer.yahoo.com/, isso caso queira criar um aplicativo. O objetivo deste artigo é mostrar as funcionalidades da API do meme através do console fornecido pelo próprio Yahoo!

Agora listaremos diversas querys que podem ser executadas para retornarem os resultados, acrescentaremos uma breve descrição sobre o resultado obtido. Uma coisa que precisamos deixar bem claro antes de iniciarmos o processo de explicação das querys é que nelas sempre constará o valor VNDIRCXTU6SOYRG2CTBU2D7SCY para o campo owner_guid, owner_guid é o campo pelo qual conseguimos trazer as informações de determinada conta do meme, deste que está conta não esteja privada no modo de visualização. Para trazer os resultados da sua conta, basta usar o primeiro comando abaixo e obterá o XML com os valores da sua conta, bastando apenas encontrar o campo owner_guid e começar a utilizar esta conta para as próximas consultas. Outra forma de obter os dados nas querys é colocar em owner_guid o valor me, sem aspas, porém este parâmetro trará somente as configurações da sua conta, veja os exemplos abaixo. O padrão para os itens abaixo será:

O que o comando faz

query YQL

Chamada REST

Explicação mais detalhada (Caso necessário)

Só mais um fato importante que será muito útil para seu aprendizado. O Yahoo! disponibiliza um comando chamado desc <tabela>, que nada mais é do que a descrição da tabela que queremos usar. Observe o comando abaixo e teste-o na sua página do console para ver exatamente o seu retorno. Para a informação abaixo eu executei o comando desc meme.info.

<?xml version=”1.0″ encoding=”UTF-8″?>

<query xmlns:yahoo=”http://www.yahooapis.com/v1/base.rng” yahoo:count=”1″ yahoo:created=”2009-10-13T08:36:40Z” yahoo:lang=”en-US” yahoo:updated=”2009-10-13T08:36:40Z” yahoo:uri=”https://query.yahooapis.com/v1/yql?q=desc+meme.info”>

<diagnostics>

<publiclyCallable>true</publiclyCallable>

<user-time>1</user-time>

<service-time>0</service-time>

<build-version>3431</build-version>

</diagnostics>

<results>

<table security=”ANY”>

<meta>

<author>Yahoo! Inc.</author>

<documentationURL/>

<sampleQuery>SELECT * FROM meme.info WHERE owner_guid=me</sampleQuery>

</meta>

<request>

<select>

<key name=”owner_guid”/>

<key name=”name”/>

</select>

</request>

</table>

</results>

</query>

O interessante nesse comando é que ele mostra muita coisa da estrutura da tabela, como por exemplo, o nível de segurança da tabela, exemplos de como podem ser feita as consultas com essa tabela, quais parâmetros podem ser passados no where.

Exemplos

Retornando as informações da sua conta através do owner_guid=me.

SELECT * FROM meme.info WHERE owner_guid=me

https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20meme.info%20WHERE%20owner_guid%3Dme&format=xml

Se reparar no retorno, poderá pegar a sua chave do Yahoo! Acesse a estrutura da árvore do XML da seguinte forma result>meme>guid, dentro desse campo estará a chave para começar a consultar, repare que para consultar usando me, não precisamos de aspas simples, porém para a próximas consultas, usaremos o guid e colocaremos as consultas usando aspas simples.

_________________________________________________________________

Retornando os followers de uma conta pública, através do owner_guid da conta

SELECT * FROM meme.followers

WHERE owner_guid=’VNDIRCXTU6SOYRG2CTBU2D7SCY’

https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20meme.followers%20WHERE%20owner_guid%3D’VNDIRCXTU6SOYRG2CTBU2D7SCY’&format=xml

O retorno dessa chamada REST retornará os dados dos meus followers, com essa informação eu consigo capturar outros dados desses follower, como por exemplo seus posts. Apenas para lembrar que o Yahoo! limita essa chamada a 10 followers para não retornar um XML muito extenso, dando trabalho para processar a requisição.

_________________________________________________________________

Retornando os following de uma conta pública, através do owner_guid da conta

SELECT * FROM meme.following

WHERE owner_guid=’VNDIRCXTU6SOYRG2CTBU2D7SCY’

https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20meme.following%20WHERE%20owner_guid%3D’VNDIRCXTU6SOYRG2CTBU2D7SCY’&format=xml

O retorno dessa chamada é bem parecido com o retorno dos followers a única diferença é que ele retorna os followings.

_________________________________________________________________

Retornando os post de uma conta pública, através do owner_guid da conta

SELECT * FROM meme.posts

WHERE owner_guid=’VNDIRCXTU6SOYRG2CTBU2D7SCY’;

https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20meme.posts%20WHERE%20owner_guid%3D’VNDIRCXTU6SOYRG2CTBU2D7SCY’%3B&format=xml

Esta chamada retorna os posts do usuário que foi passado como parâmetro, nesse retorno ele traz os comentários, data que foi postado, conteúdo e mais algumas informações.

_________________________________________________________________

Inserindo um novo post em uma conta autenticada

INSERT INTO meme.user.posts (type, content) VALUES (”text”, “testando a API do meme”)

https://query.yahooapis.com/v1/yql?q=INSERT%20INTO%20meme.user.posts%20(type%2C%20content)%20VALUES%20(%22text%22%2C%20%22testando%20a%20API%20do%20meme%22)&format=xml

Este é uma das chamadas mais interessantes, pois ela acessa a sua conta e publica um post. Após a chamada, no próprio retorno ele traz os dados o status da postagem e os dados das informações do post, seria como se postasse e já listasse aquele post.

_________________________________________________________________

Excluindo um post de uma conta autenticada

DELETE FROM meme.user.posts WHERE pubid = “1aR2FNB”

https://query.yahooapis.com/v1/yql?q=DELETE%20FROM%20meme.user.posts%20WHERE%20pubid%20%3D%20%221aR2FNB%22&format=xml

Com esta chamada você consegue apagar um post, para isso precisa estar autenticado na conta e saber o pubid (string única do post). Para saber o pubid, basta usar o comando que lista os posts. Semelhante ao método para postagem ele retorna o status da exclusão, caso tente excluir um post, a chamada REST retorna um erro (undefined).

_________________________________________________________________

Existem outras chamadas que podem ser feitas, como por exemplo, seguir algum usuário, deixar de seguir alguém, e algumas mais.

Sempre que estiver em dúvida utiliza o comando desc <tabela>. Ele é de grande utilidade no trabalho com a API do Yahoo!

Conclusão

Alguns dos comandos apresentados sozinhos não fazem muito sentido, mas a combinação deles pode gerar um resultado bem legal, como por exemplo, criar uma paginação dos followers, combinando a consulta das informações do usuário (tabela meme.info ) com a listagem dos followers.

O objetivo deste artigo foi divulgar o YQL e mostrar os comandos da API do meme. Este artigo é bem básico, e mostra somente como realizar as chamadas aos métodos, não especificamos nenhuma linguagem, pois as chamadas são iguais para todas que façam chamadas via REST.

Escolha a linguagem que tem mais facilidade e teste essas chamadas, veja o poder que as chamadas REST e o YQL proporcionam.

Colocando sua empresa no Google Maps

11 de outubro de 2009

O Google tem diversos serviços que muitos de nós desconhecemos. Neste artigo será explicado um pouco sobre o Google Local Business Center. Este serviço permite que sua empresa e o endereço dela apareçam no Google, tanto na página inicial quando no Google Maps, preferencialmente no Google Maps. Para testar o serviço acesse http://www.google.com.br/local

Como Fazer

A primeira coisa que deve ser feita é o login com sua conta Google. Após esse processo para facilitar a localização do serviço, digite na busca do Google “Local Business Center” ou se preferir acesse esse link: http://www.google.com/local/add.

A sua tela deverá ser bem parecida com a imagem abaixo.

Tela Inicial

Tela Inicial

Clique no botão “Adicionar Nova Empresa” no lado direito da página. Preencha todos os campos que são solicitados, ao lado você consegue ter uma prévia do endereço localizado e dos dados digitados. Selecione até 5 categorias que mais descrevem a área de atuação de sua empresa. Após preencher todos os campos clique em “Próximo”.

Dados a serem digitados

Dados a serem digitados

Neste momento especifique o horário de funcionamento, opções de pagamento, fotos, vídeos e informações adicionais, tais como: Estacionamento, Lanchonete e o que mais a empresa tiver para oferecer aos clientes. Você também pode corrigir a localização no mapa, caso não tenha ficado exatamente onde sua empresa esta localizada, clique em “Enviar” para salvar as informações.

Dados adicionais

Dados adicionais

Agora que os dados foram enviados para o Google, você precisa confirmar todas as informações solicitadas. Para isso, o Google disponibiliza três formas:

  1. Por telefone: o Google ligará na sua empresa para confirmar os dados inseridos;
  2. Por SMS: o Google enviará um SMS confirmando os dados;
  3. Por cartão postal: o Google enviará um cartão postal para sua empresa, esse processo é o mais demorado, de 3 a 4 semanas.
Opções de confirmação

Opções de confirmação

Clique em “Concluir” para verificar as informações, no exemplo usado, foi solicitado via cartão postal, devido aos dados inseridos no sistema, veja a imagem abaixo.

Opção selecionada

Opção selecionada

Caso sua empresa seja grande e tenha diversas unidades, você pode fazer o cadastro delas utilizando um serviço de upload dos dados. Acesse esse link http://www.google.com/local/add/uploadFeed?hl=pt-BR&gl=BR para saber como proceder para realizar esse processo. A imagem abaixo mostra o printscreen do link citado.

Opção de upload de arquivo

Opção de upload de arquivo

Concluindo

Agora que você já sabe como colocar o endereço da sua empresa no Google Maps, não perca tempo e coloque-a o mais rápido possível. Dessa forma você estará aumentando a sua chance de atrair novos clientes.

Para saber mais sobre os produtos do Google e como usá-los acesse o site do Grupo de Usuários de Tecnologia Google (GTUG-SP) http://groups.google.com.br/group/sp-gtug.

Entendendo um pouco a API Google Maps

15 de agosto de 2009

O Google dispensa comentários com todas as inovações que ele faz, hoje falaremos um pouco sobre a API do Google Maps. API (Application Programming Interface ou Interface de Programação de Aplicativos) é a forma que temos de nos comunicar com as funções pré-programadas definidas pelo fornecedor, no caso, Google.

Esta API permite a criação de mapas com locais definidos, controle de zoom, tipos de mapa, geração de rotas, pesquisa por estabelecimentos, e muitas coisas mais.

Como começar

A primeira coisa que devemos fazer é acessar o link da página inicial da API (http://code.google.com/intl/pt-BR/apis/maps/signup.html), ler e aceitar o contrato, digitar a url do site que deseja usar a API e clicar no botão “Gerar chave da API”. (veja a figura 1)

Figura 1: Aceitando o contrato

Figura 1: Aceitando o contrato

Após isso, caso ainda não esteja logado com a sua “Google Account”, o Google pedirá para efetuar o login, nesse passo você obterá a chave para usar a API somente na url que digitou o site. Caso queira usar a API em outro site, deverá repetir esse processo para cada site que quiser. (Veja a figura 2)

Figura 2: Chave Gerada

Figura 2: Chave Gerada

Agora que já temos a chave, podemos usar a API no site. O Google disponibiliza alguns exemplos, para trabalhar com JavaScript, Flash, Serviço, etc..

Neste artigo abordaremos o uso da API para JavaScript e para isso devemos adicionar o seguinte script dentro do bloco head do HTML, no local “SUA_CHAVE”, você deve colocar a chave que o Google gerou para o site, veja o campo Your key is na figura 2.

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=SUA_CHAVE“></script>

 O código de base para começar o aprendizado está abaixo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

                        <head>

                                               <title>Aprendendo a Usar a API Google Maps | Paulo Fernandes </title>

                                               <meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>

                                               <script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q”></script>

                                               <script>

                                                                       var map = null;

                                                                       var geocoder = null;

                                                                       function inicializa() {

                                                                                              if (GBrowserIsCompatible()) {

                                                                                                                      map = new GMap2(document.getElementById(”mapa_base”));

                                                                                                                      map.setCenter(new GLatLng(-22.9035393, -43.2095869), 13);

                                                                                                                      geocoder = new GClientGeocoder();

                                                                          }

                                                                       }

    </script>

                        </head>

                        <body>

                                               <div style=”width: 500px; height: 300px”></div>

                        </body>

</html>

Este código não está difícil de entender, explicaremos as partes mais importantes:

  • No onload(), a função inicializa() verifica se o navegador do usuário é compatível com a API Google Maps, caso positivo, o método captura uma div com id igual a mapa_base e defini o mapa centralizado. O local padrão que escolhi foi à cidade do Rio de Janeiro, que é representada pelas seguintes coordenadas de latitude e longitude -22.9035393, -43.2095869, respectivamente. O número seguinte, 13 representa o zoom no mapa, quando menor esse número, menor o zoom.
  • No onunload(), a função GUnload() serve para limpar as estruturas internas e liberar a memória.

Para mais informações sobre os métodos acesse a documentação em português, através do seguinte link: http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html. Essa documentação está interessante, e será a base para o artigo.

Exemplos Simples

No link a seguir podemos analisar diversos exemplos do poder desta API, http://code.google.com/intl/pt-BR/apis/maps/documentation/demogallery.html.

Para o artigo, colocaremos alguns exemplos interessantes para inserir um mapa personalizado no site.

  • Descobrir qual a latitude e longitude do endereço: Isso é útil quando se pretende definir algum local como default ao entrar no site. Para isso faremos um formulário onde você digita o endereço e o mapa é carregado no endereço e exibe o posicionamento de latitude e longitude. O código JavaScript é esse:

function mostraEndereco(){

                                                var endereco = document.getElementById(”endereco”).value;

                                                if ( geocoder ) {

                                                                        geocoder.getLatLng(endereco,

                                                                                               function(point){

                                                                                                                       if ( !point ) {

                                                                                                                                              alert(endereco + ” não encontrado”);

                                                                                                                       } else {

                                                                                                                                              map.setCenter(point, 13);

                                                                                                                                              var marca = new GMarker(point);

                                                                                                                                              map.addOverlay(marca);

                                                                                                                                               marca.openInfoWindowHtml( endereco + “<br />” + point.toString() );

                                                                                                                       }

                                                                                               }

                                                                        );

                                                } else {

                                                                        alert(”GeoCoder não identificado”);

                                                }

}

E no HTML:

<form action=”#” method=”get”>

                                                <input size=”50” value=”São Paulo” />

                                                <input value=”Mostrar Latitude/Longitude”/>

</form>

 

  • Definindo um evento: Para definir um evento precisamos utilizar o objeto GEvent. Seguindo a mesma linha do código, definiremos um evento, que será disparado toda vez que o marcador for clicado, fazendo com que a posição geográfica seja exibida, devemos colocar esse evento na função mostrarEndereco(), pois é nela que definimos o marcador.

GEvent.addListener(marca, “click”, function() {                                                                                                                                                                               marca.openInfoWindowHtml( endereco + “<br />” + point.toString() );                                                                        });

 

  • Adicionando zoom no mapa: Para adicionar o controle de zoom, devemos adicionar um controle ao mapa, através do método addControl() e a esse controle devemos adicionar o controle do mapa, o mais correto é adicionar isso na função de inicialização: inicializa(), a linha completa que deve ser inserida é está:

map.addControl( new GSmallMapControl() );

 

  • Adicionando forma de visualização: Podemos definir um controle para que o usuário possa ver o endereço na forma de mapa, hibrido ou satélite. Para isso devemos seguir a mesma linha de raciocínio para inserir o zoom, que seria adicionar um controle.

map.addControl( new GMapTypeControl() );

 

Exemplo Avançado

Para mostrar algo avançado que tal traçar a rota do ponto A ao ponto B? Para isso precisaremos que o usuário digite os valores dos pontos A e B. Para traçar a rota, vamos reescrever todo o exemplo, simplificando as configurações.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

                        <head>

                                               <title>Aprendendo a Usar a API Google Maps – Obter Rota | Paulo Fernandes </title>

                                               <meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>

                                               <script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q”></script>

                                               <script>

                                                                       var map = null;

                                                                       var geocoder = null;

                                                                       var from;

                                                                       var to;

                                                                       var directionsPanel = null;

                                                                       var directions = null;

                                                                      

                                                                       function inicializa() {

                                                                                              if (GBrowserIsCompatible()) {

                                                                                                                      map = new GMap2(document.getElementById(”mapa_base”));

                                                                                                                      map.setCenter(new GLatLng(-22.5489433, -46.6388182), 7);

                                                                                                                      geocoder = new GClientGeocoder();

                                                                                                                      map.addControl( new GSmallMapControl() );

                                                                                                                      map.addControl( new GMapTypeControl() );

                                                                                                                      directionsPanel = document.getElementById(”route”);

                                                                                                                      directions = new GDirections(map, directionsPanel);

                                                                                                                     

                                                                          }

                                                                       }

                       

                                                                       function gerarRota(){

                                                                                              from = document.getElementById(”partida”).value;

                                                                                              to = document.getElementById(”destino”).value;

                                                                                              if ( geocoder ) {

                                                                                                                      geocoder.getLatLng(from,

                                                                                                                                             function(point){

                                                                                                                                                                     if ( !point ) {

                                                                                                                                                                                            alert(from + ” não encontrado”);

                                                                                                                                                                     }

                                                                                                                                             }

                                                                                                                      );

                                                                                                                      geocoder.getLatLng(to,

                                                                                                                                             function(point){

                                                                                                                                                                     if ( !point ) {

                                                                                                                                                                                            alert(to + ” não encontrado”);

                                                                                                                                                                     }

                                                                                                                                             }

                                                                                                                      );

                                                                                                                     

                                                                                                                      var string = “from: ” + from + ” to: “+to;

                                                                                                                      directions.clear();

                                                                                                                      directions.load(string);

                                                                                                                      GEvent.addListener(directions, “error”, erroGetRoute);

                                                                                              } else {

                                                                                                                      alert(”GeoCoder não identificado”);

                                                                                              }

                                                                       }

                                                                      

                                                                       function erroGetRoute(){

                                                                                              alert(”Não foi possivel traçar a rota de: ” + from + ” para: ” + to );

                                                                       }

                                                                      

                                                                      

    </script>

                        </head>

                        <body>

                                               <form action=”#” method=”get”>

                                                                       <label for=”partida”>Partida</label>

                                                                       <input value=”São Paulo” size=”50″ />

                                                                       <br />

                                                                       <label for=”destino”>Destino</label>

                                                                       <input value=”Rio de Janeiro” size=”50″ />

                                                                       <br />

                                                                       <input value=”Obter Rota”/>

                                               </form>

                                               <div style=”width: 800px; height: 500px;”></div>

                                               <div style=”width: 300px; height: 500px; position: absolute; right: 0; top: 0;”></div>

                        </body>

</html>

Para mostrar a rota, tivemos que criar uma nova div com o id igual à “route”, é neste local que exibiremos o passo a passo da rota traçada. Essa captura do local foi feito nesta linha directionsPanel = document.getElementById(”route”); Para traçar a rota, devemos instanciar o objeto GDirections e informar para ele carregar a rota através do método directions.load(string);

No método load devemos passar os dois endereços escritos por extenso, antes o endereço de partida devemos atribuir from: e antes do endereço de destino to: , ficando a string completa from: São Paulo to: Rio de Janeiro , por exemplo.

Caso algum dos dois endereços não seja encontrado, o código exibirá um alert informando que a rota não pode ser traçada.

Conclusão

Com este artigo pudemos perceber o poder que a API nos dá, ela nos fornece outras diversas possibilidades que podem ser vistas na documentação oficial. O objetivo do artigo foi introduzir os principais conceitos e o que se pode utilizar no site de sua empresa, por exemplo.

Algo que devemos tomar cuidado é na declaração das variáveis, pois o local onde ela é declarada pode fazer com que a API se porte de forma indesejada. Por exemplo, quando declaramos uma marca, se tivemos declarado ela fora da função a cada novo endereço, a marca anterior seria perdida, mas repare que a informação de latitude e longitude é perdida, mantendo somente a ultima. Faça o teste, declare a variável fora do método, acredito que achará bem interessante.

Pode ser que exista outra forma de fazer o que demonstramos ou até que o que foi demonstrado esteja errado, mesmo que aparentemente funcionando.

Iniciando com o GWT

14 de agosto de 2009

Sabemos que deixar uma interface rica e que funcione nos principais navegadores é muito difícil devido à falta de padrões existentes entre os navegadores. O GWT foi criado para facilitar essa tarefa para os desenvolvedores, pois podem passar até 90% do tempo diário para contornar as peculiaridades de cada navegador.

O GWT (Google Web Toolkit) é um framework para desenvolvimento web que tem como objetivo facilitar a vida dos desenvolvedores, pois possui um conjunto de ferramentas, API e componentes visuais que facilitam a criação de modernas, ricas e dinâmicas interfaces.

A criação do código para geração da interface é escrita usando Java e não JavaScript, o que torna o desenvolvimento muito mais fácil, pois graças as IDEs (ferramentas que auxiliam o desenvolvimento, muita delas gratuitas e conhecidas), os erros podem ser descobertos em tempo de compilação, Java é fortemente tipada e é muito mais fácil encontrar desenvolvedores Java no mercado do que JavaScript.

No momento que a classe Java é compilada o GWT faz o papel de compilador JavaScript, fazendo com que o código Java seja convertido em JavaScript. O Hosted Mode é utilizado como debbuger do código facilitando a identificação dos erros devido ao seu console de administração.

Uma funcionalidade muito interessante é que com o GWT minimizamos ao máximo o tamanho do arquivo JavaScript, ao invés de fazer vários “IFs” no código para saber qual o navegador, qual o idioma, etc., ele gera um arquivo JavaScript para cada tipo de combinação de navegador e se por acaso sua aplicação for internacionalizada, o GWT gerará um arquivo JavaScript para cada tipo de idioma. O responsável por saber qual arquivo será utilizado na hora de exibição para o usuário é o servidor, tudo isso ocorre transparentemente para os usuários.

Começando

Para iniciarmos uma aplicação usando o GWT, precisamos fazer o download de suas bibliotecas que podem ser baixadas nesse link, http://code.google.com/intl/pt-BR/webtoolkit/. Além disso, precisaremos de uma IDE, usaremos o Eclipse IDE versão Ganymede que pode ser baixado neste link, http://www.eclipse.org/downloads/. Para facilitar ainda mais o desenvolvimento, devemos fazer o download do plugin do GWT para o Eclipse Ganymede, que pode ser encontrado neste link, http://code.google.com/intl/pt-BR/eclipse/docs/download.html.

Neste passo não vamos detalhar o processo de instalação, pois no site Google este passo está muito bem detalhado, veja este link, http://code.google.com/intl/pt-BR/eclipse/docs/install-eclipse-3.4.html

Para criar um novo projeto usando o Eclipse e o plugin, devemos clicar em File > New > Web Application Project. Preencha o campo Project name com o nome do projeto, no exemplo usaremos PucProjeto, o campo Package pode ser preenchido com o pacote que deseja que fique o raiz do projeto, no exemplo usaremos br.pucsp.pos.web. No campo Location definimos o workspace da aplicação, no campo Google SDKs definimos qual GWT devemos usar e qual a Engine devemos usar. Após isso clique em Finish.

 

Imagem 1 Artigo GWT

Imagem 1 Artigo GWT

Após clicar em Finish uma aplicação de exemplo será criada, para testá-la, clique com o botão do lado direito sobre o projeto e depois Run As > Web Application, um console do Google será aberto e você ver a aplicação de teste em funcionamento.

Todo o código que é renderizado e mostrado para o usuário está na classe br.pucsp.pos.web.client.PucProjeto, que usa uma implementação da classe com.google.gwt.core.client.EntryPoint. O código que será compilado deve ficar dentro do método onModuleLoad(), caso queira editar este projeto que o plugin criou, pode excluir todas as classes exceto a br.pucsp.pos.web.client.PucProjeto, fazendo isso não teremos nenhum problema, pois somente com ela o GWT consegue compilar.

Na criação do projeto usando o plugin uma pasta chamada war foi criada, dentro dessa pasta existem dois arquivos, um com as configurações do CSS (Cascading Style Sheet), que são as folhas de estilo. Podemos criar as nossas classes e nossos IDs e depois usá-los no código Java do GWT citando o id com o seguinte comando:

closeButton.getElement().setId(”closeButton”);

 

ou citando a classe com o seguinte comando:

 closeButton.getElement().setClassName(”sendButton”);

No outro arquivo encontramos o layout da página HTML, todos os elementos que forem absolutos devem ser inseridos nessa página. Podemos definir áreas nesse código HTML que serão inseridas via a classe Java que estamos criando com o uso do framework GWT. No exemplo criado pelo plugin, o GWT criou uma página com uma tabela com duas colunas e definiu as colunas como áreas, para o nosso exemplo, altere o nome dessas áreas para os seguintes nomes, nameFieldContainer, aboutButtonContainer.            Para que algo seja inserido nessas áreas, devemos criar um tipo de painel, no exemplo usamos o SimplePanel e o DialogBox que são referenciadas no código Java através da seguinte linha de código:

      RootPanel.get(”nameFieldContainer”).add(psugBox);

      RootPanel.get(”aboutButtonContainer”).add(aboutButton);

     

Abaixo está o código completo da classe br.pucsp.pos.web.client.PucProjeto 

package br.pucsp.pos.web.client;

 

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.dom.client.ClickEvent;

import com.google.gwt.event.dom.client.ClickHandler;

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.DialogBox;

import com.google.gwt.user.client.ui.HTML;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.MultiWordSuggestOracle;

import com.google.gwt.user.client.ui.RootPanel;

import com.google.gwt.user.client.ui.SimplePanel;

import com.google.gwt.user.client.ui.SuggestBox;

import com.google.gwt.user.client.ui.VerticalPanel;

 

public class PucProjeto implements EntryPoint {

 

       public void onModuleLoad() {

             final Button aboutButton = new Button(”Sobre”);

            

             final DialogBox about = new DialogBox();

             about.setText(”Sobre o Exemplo”);

             about.setAnimationEnabled(true);

             final Button closeButton = new Button(”Fechar”);

             closeButton.getElement().setId(”closeButton”);

             aboutButton.getElement().setClassName(”sendButton”);

            

             VerticalPanel dialogVPanel = new VerticalPanel();

             dialogVPanel.addStyleName(”dialogVPanel”);

             dialogVPanel.add(new HTML(”<b>Projeto Desenvolvido por:</b>”));

             dialogVPanel.add(new HTML(”<br><b>Paulo Fernandes [ paulofernandesjr@gmail.com ]</b>”));

             dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_RIGHT);

             dialogVPanel.add(closeButton);

             about.setWidget(dialogVPanel);

            

             /**

              * Essa é uma forma de fazer

              */

             class MyHandler implements ClickHandler {

                    public void onClick(ClickEvent event) {

                           aboutButton.setEnabled(false);

                           about.setText(”Sobre o Projeto”);

                           about.center();

                           closeButton.setFocus(true);

                    }

             }

             MyHandler handler = new MyHandler();

             aboutButton.addClickHandler(handler);

 

             /**

              * Essa é outra forma de fazer

              */

             closeButton.addClickHandler(new ClickHandler() {

                    public void onClick(ClickEvent event) {

                           about.hide();

                           aboutButton.setEnabled(true);

                           aboutButton.setFocus(true);

                    }

             });

 

             MultiWordSuggestOracle palavras = new MultiWordSuggestOracle();

             palavras.add(”abacate”);

             palavras.add(”abacaxi”);

             palavras.add(”acordar”);

             palavras.add(”aeromotor”);

              palavras.add(”agudo”);

             palavras.add(”alcool”);

             palavras.add(”algarismo”);

            

             SuggestBox suggestBox = new SuggestBox(palavras);

             suggestBox.setAnimationEnabled(true);

             suggestBox.setVisible(true);

 

             /**

              * painel para a caixa de sugestoes

              */

             VerticalPanel sugBox = new VerticalPanel();

             sugBox.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);

             sugBox.add(new Label(”Digite a letra A”));

             sugBox.add(suggestBox);

             SimplePanel psugBox = new SimplePanel();

             psugBox.setWidget(sugBox);

            

             RootPanel.get(”nameFieldContainer”).add(psugBox);

             RootPanel.get(”aboutButtonContainer”).add(aboutButton);

                          

       }

}

  

Imagem 2 Artigo GWT

Imagem 2 Artigo GWT

Concluindo

No seguinte link http://code.google.com/intl/pt-BR/webtoolkit/doc/1.6/DevGuide.html está o guia para os desenvolvedores que quiserem se aperfeiçoar mais com este excelente framework.  Neste outro link tem uma aplicação de exemplo que o pessoal do Google fez para vermos mais um pouco do poder do GWT http://gwt.google.com/samples/Mail/Mail.html.

Com este artigo descobrimos o quanto podemos melhorar nossas aplicações usando o GWT, para quem já desenvolve para web, sabe que para fazer o que fizemos neste exemplo, daria um trabalho um tanto quanto complexo, imagine só essa aplicação de e-mail que está no link acima.

 

Fontes

http://code.google.com/intl/pt-BR/webtoolkit/

http://www.gwt.com.br/

http://www.comp.ufscar.br/~bruno_abrahao/Trabalhos/Tutorial%20GWT.pdf

Trabalhando com arquivos Microsoft Word em Java

14 de agosto de 2009

Olá a todos. Meus artigos são diretos, não fico enchendo muito de conteúdo que eu não julgo necessário, por isso se sentiram carência em algum tema, por favor, me escreve que poderei fazer um artigo somente para aquele tema em especifico.

Introdução

Neste artigo explicarei como manipular documentos do Microsoft Word 97-2003, utilizando uma excelente API chamada Jakarta POI [http://poi.apache.org/]. Neste artigo falarei somente até a versão 2003 do Microsoft Word, pois na versão 2007 ele trabalha de uma forma diferente.

Problema

Vamos simular uma situação onde a esta aplicação poderia ser utilizada. Tenho um contrato que é padrão para todos os clientes, mas eu preciso inserir em cada contrato, o nome, o valor do contrato e o valor em porcentagem da multa e enviar para efeito de teste, salvar o contrato com o nome da empresa em formato pdf. Outra possibilidade do problema seria criar um e-mail marketing e enviar por e-mail para uma lista de usuários cadastrados.

A API Jakarta POI

Esta API é fantástica, tem diversas funções e não serve apenas para trabalhar com arquivos do Microsoft Word, serve também para arquivos do Microsoft Excel, Microsoft Visio, Microsoft PowerPoint, entre outros, a versão estável até o momento da escrita deste artigo era a versão 3.2. Os desenvolvedores estão trabalhando na versão 3.5 que suportará arquivos Microsoft Office 2007. No exemplo do projeto eu explicarei algumas das funções da API, pode até ser que eu fuja um pouco da solução do problema, porém creio que ficará fácil para entender como trabalhar com a API.

Solução

A solução para o problema não é tão complexa, basta você abrir o arquivo Microsoft Word desejado, encontrar os trechos onde deseja que sejam as palavras sejam substituídas, e substituí-las. Para isso eu colocarei no meio do meu arquivo contrato.doc umas “TAGS PERSONALIZADAS”, estas TAGS poderiam ser quaisquer palavras, eu adotei um padrão para não correr o risco de alterar algo que não quisesse que fosse alterado. O padrão utilizado foi o seguinte:

                  #NOME_DO_CAMPO#

As minhas variáveis ficaram da seguinte forma no arquivo contrato.doc

                  #NOME_EMPRESA#

                  #VALOR_CONTRATO#

                  #VALOR_MULTA#

Sobre o contrato, ele não é especifico para o que vou demonstrar, ele foi retirado do site http://www.sitecontabil.com.br/modelos_contrato.htm e o link para download do contrato de exemplo é esse aqui:  http://www.sitecontabil.com.br/modelos_contrato/0338.htm. Utilizei apenas alguns espaços que não são exatamente para o que deveria, mas como o objetivo deste artigo é mostrar a aplicação funcionando, não vi muita necessidade em ter um exemplo que se encaixe perfeitamente com o artigo.

Código

Como o objetivo é mostrar o funcionamento da API Jakarta POI, e não sobre SWING ou Desenvolvimento WEB, fiz um código, que em minha opinião está bem didático e comentado, facilitando o entendimento. O código do projeto pode ser baixado do link a seguir:

                  http://www.phpaulo.com.br/artigo/1/artigo1-word-to-java.zip

Para o desenvolvimento foi necessário o download da biblioteca Jakarta POI, que está no link download do site da API, também está no arquivo do projeto.

No exemplo mostro como extrair o texto de duas possibilidades:

1ª usando o WordExtractor: fará com que você pegue a o conteúdo e armazene em uma String, no exemplo eu usei, StringBuilder, por ela ser mais rápida que a String o que facilitará ainda mais a substituição.

2ª usando o Range: que tem um método, muito eficiente que faz a modificação do texto através do método replaceText(String parametroABuscar, String parametroASubstituir).

Apenas para efeito de demonstração da API, adicionarei um parágrafo no começo e no final do Arquivo contendo os meus dados. Com isso o exemplo não só mostrará como substituir, mas também como adicionar conteúdo.

Como o objetivo não é como mostrar a geração de PDF, a parte do PDF está muito simples, deveria ser melhorada, mas isso é para outro artigo.

O exemplo foi desenvolvido utilizando Java 6, Eclipse Ganymede e NetBeans 6.5.

 

Conclusão

Esta API não se restringe apenas a arquivos Microsoft Word, como mencionei acima pode ser usada com outros formatos também, para maiores informações acesse o site do projeto: http://poi.apache.org/

Com isso encerro aqui o meu artigo, caso tenham alguma dúvida, podem me enviar um e-mail, que na medida do possível estarei respondendo, estou aberto a sugestões para próximos artigos.

Até o próximo pessoal.