Академический Документы
Профессиональный Документы
Культура Документы
EXPEDIENTE
Editor
Diogo Souza (diogosouzac@gmail.com)
Consultor Tcnico
Daniella Costa (daniella.devmedia@gmail.com)
Produo
Jornalista Responsvel Kaline Dolabella - JP24185
Capa e Diagramao Romulo Araujo
Atendimento ao leitor
A DevMedia possui uma Central de Atendimento on-line, onde voc
pode tirar suas dvidas sobre servios, enviar crticas e sugestes e
falar com um de nossos atendentes. Atravs da nossa central tambm
possvel alterar dados cadastrais, consultar o status de assinaturas
e conferir a data de envio de suas revistas. Acesse www.devmedia.
com.br/central, ou se preferir entre em contato conosco atravs do
telefone 21 3382-5038.
Publicidade
publicidade@devmedia.com.br 21 3382-5038
Anncios Anunciando nas publicaes e nos sites do Grupo DevMedia,
voc divulga sua marca ou produto para mais de 100 mil desenvolvedores
de todo o Brasil, em mais de 200 cidades. Solicite nossos Media Kits, com
detalhes sobre preos e formatos de anncios.
Diogo Souza
diogosouzac@gmail.com
Analista de Sistemas Java na Indra Company
e j trabalhou em empresas como Instituto
Atlntico e Ebix L.A. instrutor Android,
palestrante em eventos sobre Java e o mundo
mobile e consultor DevMedia. Conhecimentos
e experincias em diversas linguagens e ferramentas de programao e manipulao de
dados, bem como metodologias teis no desenvolvimento de Sistemas diversificados.
Sumrio
Primeiros grficos
O Google Chart fornece duas formas de gerao de grficos: via
URL e via cdigo JavaScript. O primeiro tipo fornece uma URL
universal que, via mtodo GET HTTP, retorna uma imagem esttica do grfico gerada em detrimento dos parmetros passados
pela mesma URL, que constituem a prpria fonte de dados. Essa
opo, por sua vez, permite somente a gerao de grficos simples,
que no envolvem tomadas de deciso ou estruturas condicionais.
J a segunda opo se d atravs da importao das bibliotecas
da API, sobrescrita das funes ncleo e fornecimento dos dados
via mocks ou servios remotos.
Vejamos a URL de exemplo representada a seguir, cujo grfico
gerado ilustrado pela Figura 1:
http://chart.apis.google.com/chart?cht=p3&chs=550x300&chd=t:5,4,3,6&chl=PCs|
Geladeiras|TVs|Outros&chtt=%C3%9AltimasVendas&chco=8cc53e
Note que os trs arquivos HTML, CSS e JS devem ser criados tambm para conter o cdigo que vamos desenvolver inicialmente.
Feito isso, existem trs passos bsicos para se configurar qualquer grfico com o Google Charts, a saber:
1. A API Google JSAPI: Essa API comporta todas as funes Ajax
e JavaScript necessrias para carregar os grficos, bem como a
lgica para montar, distribuir e dinamizar os dados. Para inclu-la
na sua aplicao basta inserir o trecho de importao de script a
seguir na sua pgina HTML:
<!-- Carrega a AJAX API -->
<script type=text/javascript src=https://www.google.com/jsapi > </script>
Nota
O leitor precisar ter obrigatoriamente uma conexo com a internet para testar os exemplos, visto
que os arquivos JavaScript, de CSS e imagens sero carregados diretamente dos servidores Google.
25
26
27
28
29
30
31
32
33
34
// desenha o nosso grfico de fato
35
chart.draw(dataTable, options);
36
}
37
</script>
38
39 </head>
40
41 <body>
42
<!-- Div para o nosso grafico -->
43
<div id=chart></div>
44 </body>
45 </html>
estrutura de cruzamento dos dados, neste caso dados representados pelos eixos x e y do plano cartesiano.
Alm de textos e nmeros, tambm possvel criar grficos
mltiplos, manipular outros tipos de dados como datas e valores
percentuais, definir posies diferentes para legendas e subttulos,
dentre outros. Suponha que, no mesmo exemplo, voc deseja criar
uma coluna ou barra dupla para representar as mdias mnima e
mxima de salrios. Esses grficos so chamados de Dual-Y charts,
justamente pela dualidade de colunas no eixo Y. Crie ento uma
nova pgina HTML e adicione o contedo da Listagem 3 mesma.
30
31
var options = {
32
width: 1000,
33
height: 500,
34
legend: {position: top, maxLines: 3},
35
title: Mdia de Salrios em TI/Aprovao,
36
hAxis: {
37
title: Profissional
38
},
39
vAxis: {
40
title: Salrios
41
},
42
bar: { groupWidth: 50% }
43
};
44
45
var chart = new google.visualization.ColumnChart(
46
document.getElementById(chart));
47
48
chart.draw(dataTable, options);
49
}
50
</script>
51
52 </head>
53
54 <body>
55
<!-- Div para o nosso grafico -->
56
<div id=chart></div>
57 </body>
58 </html>
- Os atributos hAxis e vAxis, servem para configurar propriedades especficas dos valores exibidos nos eixos horizontal e vertical, respectivamente, tais como formatao, ttulos,
valores mximos e mnimos, etc. Neles, definimos os ttulos
dos dois eixos: Salrios e Profissional, conforme observado no grfico final.
- O atributo bar da linha 42 exclusivo para grficos em
barras e serve para definir o tamanho mximo das barras,
atravs da propriedade groupWidth. Note como as barras
esto 50% menores em relao ao exemplo anterior.
27
]);
28
29
var options = {
30
width: 1000,
31
height: 500,
32
title: Balano de Atividades Entregues/Dia,
33
hAxis: {
34
title: Dia,
35
format: h:mm a,
36
viewWindow: {
37
min: [7, 30, 0],
38
max: [18, 0, 0]
39
}
40
},
41
vAxis: {
42
title: Atividades
43
}
44
};
45
46
var chart = new google.visualization.ColumnChart(
47
document.getElementById(chart));
48
49
chart.draw(dataTable, options);
50 }
51 </script>
Material Design
Em 2014, o Google anunciou orientaes destinadas a apoiar uma
aparncia comum em todas as suas propriedades e aplicativos
(como os apps Android) que so executados em plataformas do
10
11 11
Nota
O Material Design no ir funcionar em verses antigas do
Internet Explorer. Do IE8 para trs ele tambm no suporta o
SVG, que requerido pelo Google Charts.
Outros grficos
O Google Charts prov uma gama de
outros grficos que podem facilmente se
adaptar realidade dos nossos exemplos.
Vejamos alguns exemplos deles.
Grfico de Linhas
O grfico de linhas bem semelhante
ao de colunas no que confere o cruzamento das informaes, porm em vez
de barras ele usa linhas para marcar os
pontos. Suponha que no nosso exemplo
queremos criar um grfico cruzando o
desempenho dos profissionais da empresa em detrimento de um intervalo
de dias. O cdigo para isso se encontra
na Listagem 8.
Vejamos algumas observaes:
Na linha 2 temos a mudana do package
para o valor line. Veja que tambm estamos usando a verso 1.1, esta que caracteriza sempre o uso do Material Design.
Na linha 6 voltamos a criar o objeto
DataTable. Isso porque esse grfico exige
que as linhas sejam adicionadas em forma
de tabela, diferente de como fizemos com
o preenchimento do de barras.
Na linha 14 populamos o vetor de dados,
porm com o primeiro valor como string.
Se voc precisar usar o dado numrico
para manipular algo no JavaScript pode
usar as variveis v e f que vimos, ou concatenar os valores na mo mesmo.
Na linha 32 configuramos os ttulos. Veja
que estamos considerando os valores em
DPUs, que uma unidade muito comum
para medir atividades e desempenho.
Na linha 40 mudamos o tipo do objeto
instanciado para google.charts.Line().
O resultado da execuo pode ser visualizado na Figura 10.
Grficos geogrficos
12
23
[Dia 9 , 15.9, 42.9, 14.8, 55.5],
24
[Dia 10, 11.8, 10.9, 11.6, 55.5],
25
[Dia 11, 4.3, 7.9, 4.7, 55.5],
26
[Dia 12, 5.6, 8.4, 5.2, 55.5],
27
[Dia 13, 3.8, 6.3, 3.6, 55.5],
28
[Dia 14, 4.2, 6.2, 3.4, 55.5]
29 ]);
30
31 var options = {
32
chart: {
33
title: Desempenho profissionais/Dia,
34
subtitle: em DPUs
35
},
36
width: 800,
37
height: 450
38 };
39
40 var chart = new google.charts.Line(document.getElementById(chart));
41
42 chart.draw(data, options);
43 }
44 </script>
O modo region (regio): onde temos regies delimitadas por cores, como pases,
provncias, estados, etc.
O modo markers (marcadores): onde
usamos crculos para designar regies
que so dimensionados de acordo com um
valor que voc especificar.
O modo text (texto): onde rotulamos as
regies com identificadores em texto (por
exemplo, Brasil ou Amrica do Sul).
Suponha que agora voc precisa gerar
um grfico do Brasil cruzando a quantidade de profissionais por estado do pas. Veja
o cdigo da Listagem 9 para isso.
Vejamos os detalhes da listagem:
Na linha 2 fizemos a substituio do packaFigura 10. Grfico em linhas usando Material Design com linha selecionada
ge para geochart, e a verso para 1 (ainda no
temos geocharts com Material Design).
Na linha 7 convertemos o vetor para DataTable, passando
Na linha 21 temos a mudana para a instanciao do objeto de
como valores os nomes das cidades. Esses nomes precisam estar
tipo google.visualization.GeoChart().
corretos, pois o geochart ir checar na base de dados do Google
Maps se eles existem.
O resultado pode ser verificado na Figura 11.
Na linha 14, no objeto options, temos definidos dois novos
Note que a barra de propores exibida na parte inferior
atributos:
esquerda do grfico se auto ajustar medida que os valores
- region: dever sempre ser preenchido com a abreviao da
aumentarem ou diminurem.
regio ou o nmero referente s coordenadas geogrficas (Por
Essa no a nica forma de distribuir os estados. Tambm
podemos dividir o mapa por todos os estados e fazer a seleo
ex: BR para Brasil, US para Estados Unidos, 002 para frica.
Voc encontrar uma lista completa dos cdigos na pgina do
por fronteiras. A nica alterao necessria modificar o valor
Google Charts).
do displayMode para region e incluir o seguinte atributo ao
- displayMode: serve para definir um dos trs tipos de grfico
objeto options:
possvel. Os valores validos so: markers, text e region (este
ltimo o valor default caso nenhum seja informado).
resolution: provinces,
13 13
14
Grficos de timeline
O conceito de timeline ficou famoso aps o advento das redes
sociais. Aplicativos como Facebook, Instagram, etc. tem como
principal recurso a exibio das postagens, por exemplo, em
uma timeline. O conceito est totalmente relacionado ao tempo:
traa-se uma linha do tempo (em anos, meses, etc.) e os eventos
so impressos nela.
No nosso exemplo, imagine que queiramos rastrear o tempo que
os funcionrios de uma empresa esto trabalhando, desde a sua
contratao at as demisses. Vejamos o cdigo da Listagem 10.
Listagem 10. Cdigo para criar timeline de tempo de trabalho dos funcionrios.
01 <script type=text/javascript>
02 google.load(visualization, 1.1, {packages:[timeline]});
03 google.setOnLoadCallback(desenharGrafico);
04
05 function desenharGrafico () {
06 var container = document.getElementById(chart);
07 var chart = new google.visualization.Timeline(container);
08 var dataTable = new google.visualization.DataTable();
09
10 dataTable.addColumn({ type: string, id: Id });
11 dataTable.addColumn({ type: string, id: Nome });
12 dataTable.addColumn({ type: date, id: Incio });
13 dataTable.addColumn({ type: date, id: Fim });
14 dataTable.addRows([
15 [Perodo, Designer: Joo Pereira, new Date(2010, 1, 15),
new Date(2011, 3, 14) ],
16 [Perodo, Arquiteto: Maria Beltro, new Date(2011, 2, 3),
new Date(2013, 1, 23) ],
17 [Perodo, Gerente: Souza Rodrigues, new Date(2010, 5, 30),
new Date(2015, 2, 3) ]]);
18
19 var options = {
20
avoidOverlappingGridLines: false,
21
width: 1000,
22
height: 450
23 };
24
25 chart.draw(dataTable, options);
26 }
27 </script>
Vejamos os detalhes:
Na linha 2 configuramos o package para timeline e a verso
para 1.1 para o Material Design.
Para criar uma timeline precisaremos tanto do objeto DataTable
quanto de um objeto do tipo google.visualization.Timeline (linha 7),
no qual setaremos os dados e o objeto options.
Na linha 10 temos a adio das colunas. Note que a primeira o identificador do perodo que dever ser obrigatoriamente uma string.
Na linha 14 preenchemos as linhas da tabela. Observe que estamos passando agora como parmetro objetos Date do JavaScript,
com o ano, ms e dia passados por parmetro, respectivamente
(padro americano).
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42 chart.draw(data, options);
43 }
44 </script>
Grficos de rea
15 15
16
Autor
Jlio Sampaio
analista de sistema e entusiasta da rea de Tecnologia da
Informao. Atualmente consultor na empresa Visagio,
trabalhando em projetos de desenvolvimento de sistemas estratgicos, tambm instrutor JAVA. Possui conhecimentos e experincia
em reas como Engenharia de Software e Gerenciamento de Projetos,
tem tambm interesse por tecnologias relacionadas ao front-end web.
Links:
Pgina oficial do Google Charts.
http://chart.apis.google.com/
Pgina do Google Live Charts Playground.
https://developers.google.com/chart/image/docs/chart_playground
Meteor.js: Construindo
aplicaes web com
Node.js e MongoDB
Saiba como integrar um quiz com o servidor
O que o Meteor?
O conceito de Meteor vai alm de um simples framework, ele
funciona como uma plataforma completa que envolve tecnologias
como linguagem de programao, banco de dados e servios
web. Em comparao com o AngularJS, por exemplo, que um
framework amplamente usado para integrar servios e regras de
negcio no lado front-end da aplicao, o Meteor vai alm e consegue lidar com a mesma lgica tanto no lado cliente quando no
servidor do sistema. Veja na Figura 1 uma representao grfica de
como o framework dividido bem como os tipos de ferramentas
17 17
que ele suporta. Perceba que os itens marcados em negrito representam as tecnologias que o Meteor j traz consigo por padro, ao
passo que os demais tratam-se de itens tambm aceitos mas que
precisam ser baixados e instalados no ambiente.
Alm disso, o Meteor tambm lida com os conceitos de empacotamento dos binrios do projeto via atmosphere.js ou via npm
do Node.js. Voc tambm pode usar os pacotes do Cordova/
PhoneGap para realizar esse trabalho. No mais preciso, por
exemplo, configurar o Gulp para fluxos de controle e automao
diretamente no cdigo, o Meteor j tem o prprio recurso interno
para manter todas as dependncias alinhadas e sincronizadas.
E para conectar com servios e APIs externos voc pode fazer uso
do protocolo DDP que citamos, que funciona como um gerenciador
de updates: sempre que uma mudana acontecer no servidor sua
aplicao ser notificada automaticamente.
Meteor e o JavaScript
18
J em relao forma como devemos importar os arquivos JavaScript (e CSS) nas pginas HTML, no necessariamente precisamos
fazer isso dentro da tag head. O Meteor seleciona todos eles,
minifica-os e os coloca na sua aplicao sozinho. Funciona de forma
semelhante ao que o CoffeeScript e o Sass fazem com os arquivos JS
e CSS, respectivamente: o Meteor tem um gerenciador de pacotes
Ao digit-lo na interface de linha de comando voc ter habilitada a tela para digitar quaisquer comandos em CoffeeScript e eles
sero convertidos automaticamente para JavaScript e assimilados
s suas respectivas pginas HTML. Esse s um dos pacotes
dos mais de quatro mil disponveis que voc pode encontrar na
especificao do Meteor (vide seo Links para uma lista completa deles).
Sincronizao de Dados
O Meteor consegue manter todos os dados da aplicao sincronizados em ambos os lados da arquitetura, bem como as
estruturas que os guardam. Por exemplo, as colees (listas, filas,
mapas, etc.) no Meteor funcionam como encapsuladores de dados
sncronos, ou seja, se voc alterar qualquer dado no lado servidor
a mesma estrutura que o mantm no browser ser atualizada
automaticamente.
Em relao s estruturas de templates funciona da mesma forma.
O Meteor usa o sistema de templates Spacebars para isso, que
funciona de forma semelhante ao famoso Handlebars, porm
com menos manipulao do DOM para manter as coisas mais
rpidas (muito semelhante API React do Facebook que segue o
mesmo conceito). Da mesma forma que os arquivos JS e CSS, no
preciso se preocupar em compilar os templates ou sincroniz-los
manualmente, o Meteor faz tudo isso para voc.
Veja na Figura 2 uma representao grfica de como os dados
so sincronizados pelo Meteor.
Banco de Dados
No Meteor temos duas representaes de banco: O Mongo e
o Minimongo. O Mongo fica localizado no servidor e uma
representao verdadeira dos dados, onde de fato sero alocadas as informaes perenes. J o Minimongo uma biblioteca
JavaScript que existe no cliente com a inteno de simular um
banco de dados. Geralmente, ele s tem um subconjunto dos
dados do Mongo (a menos que voc decida publicar todos os
dados em um objeto coleo para o cliente), entretanto, independente dos dados que voc publique o Meteor ir mant-los
sempre sincronizados: tenham sido eles alterados no cliente
ou no servidor.
Veja na Figura 3 como essa sincronizao feita no Meteor.
Esse tipo de arquitetura se encaixa perfeitamente nas que
so usadas para chats. A resposta precisa ser rpida, os dados sincronizados entre cliente-servidor e nenhum HTML
trafegado.
19 19
Configurao do ambiente
A instalao do Meteor se d de duas formas, dependendo do
seu Sistema Operacional:
1. Se voc usa Linux ou algum dos Sistemas Operacionais baseados em OSX, basta executar a seguinte instruo no terminal
de comandos:
curl https://install.meteor.com/ | sh
20
01 if (Meteor.isClient) {
02 // counter starts at 0
03 Session.setDefault(counter, 0);
04
05 Template.hello.helpers({
06 counter: function () {
07 return Session.get(counter);
08 }
09 });
10
11 Template.hello.events({
12 click button: function () {
13 // increment the counter when button is clicked
14 Session.set(counter, Session.get(counter) + 1);
15 }
16 });
17 }
18
19 if (Meteor.isServer) {
20 Meteor.startup(function () {
21 // code to run on server at startup
22 });
23 }
Construo da aplicao
O Meteor tambm possibilita a construo da sua aplicao
diferenciando cdigo de cliente e de servidor via pastas. Ao criar
uma pasta \client e outra \server ele automaticamente direcionar
a execuo para os respectivos ambientes e no mais teremos de
usar os atributos isClient/isServer. Portanto, vamos estruturar os
nossos diretrios conforme demonstrado na Listagem 4.
Listagem 4. Estrutura de diretrios do projeto.
| .meteor
| client/
// todo o cdigo do cliente vem aqui
|----- components/
// pasta que conter cada componente do projeto
|--- quiz-devmedia-form.css
|--- quiz-devmedia-form.html
|--- quiz-devmedia-form.js
|--- quiz-devmedia.css
|--- quiz-devmedia.html
|--- quiz-devmedia.js
|----- app.body.html
// layout para a aplicao inteira
|----- app.head.html
// layout do cabealho das pginas
|----- app.js
// js global da app
|----- app.css
// css global da app
| collections/
// salvaremos os modelos do mongo
|----- quiz.js
// colees mongo
| server/
// cdigo para o servidor
|----- bootstrap.js
// datas de exemplo para iniciar a aplicao
21 21
22
Template da aplicao
Precisamos configurar os nossos templates que representaro o
cabealho e corpo das pginas para que no tenhamos que replicar
o cdigo em cada uma delas. Vamos comear pela pgina app.
body.html adicionando o contedo da Listagem 6 mesma.
A pgina tem uma composio simples onde, na linha 6, importamos o template do formulrio do quiz, que enxertar a HTML
dentro da referida div. Nessa linha, o Meteor ir procurar pelo
arquivo que tenha a tag <template name=formQuiz>. Note que
as classes que estamos criando so relativas ao Bootstrap: organizadas em colunas.
Na linha 12 criamos a div que ir iterar sobre todos os itens do quiz.
Veja o forEach que usamos na linha 13, at mesmo estruturas de repetio devem estar entre os sinais de dupla chave. E mais uma vez
importamos o template do quiz na linha 14. Toda importao deve
sempre comear com o sinal de maior >, e todo fim de bloco deve
finalizar com o nome do comando precedido de uma barra /.
Vamos editar agora o arquivo do cabealho (Listagem 7).
Trata-se de um cabealho comum a outras pginas HTML.
Se voc verificar o cdigo HTML
gerado da pgina carregada no
browser perceber que dentro da
tag head temos vrios arquivos
sendo importados (JS e CSS) que
guardam toda a lgica autogerada
pelo Meteor.
Uma vez com os templates de
cabealho e rodap prontos, ainda
no podemos execut-los pois precisamos antes criar as pginas de formulrio que os usaro por padro.
Abra o arquivo quiz-devmediaform.html e adicione o contedo da
Listagem 8.
23 23
01 Template.body.helpers({
02 quizes: function() {
03 return Quiz.find();
04 }
05 });
Esse trecho de cdigo se comunica diretamente com o atributo data-id que criamos antes: ele apenas cria uma espcie de
registro para cada ndice e todo o trabalho feito pela funo
registerHelper() interna API do Meteor. Dessa forma, agora
podemos visualizar as opes na tela recarregada mesmo que
sem estilo algum (Figura 9).
Eventos do Formulrio
Com toda a estrutura preparada, precisamos agora adicionar os
eventos e variveis aos templates. Cada arquivo de formulrios
HTML tem um arquivo JavaScript correspondente. Vamos comear pelo quiz-devmedia-form.js (Listagem 13).
A funo events (linha 1) deve ser usada sempre que se deseja
adicionar eventos a um template. Na linha 3 estamos mais uma
vez recuperando o objeto formulrio via seletores do Meteor. Na
linha 6 impedimos que o usurio efetue mais de um clique no
boto de submit.
Na linha 9 criamos uma nova instncia do vetor de perguntas recuperando cada um dos valores digitados nos campos do formulrio.
24
01 Template.formQuiz.events({
02 // lida com o submit do formulrio
03 submit form: function(event) {
04
05 // impede que o formulrio envie mais de uma vez
06 event.preventDefault();
07
08 // recupera os dados do form
09 var novoQuiz = {
10 pergunta: event.target.pergunta.value,
11 alternativas: [
12
{ text: event.target.opcao1.value, votos: 0 },
13
{ text: event.target.opcao2.value, votos: 0 },
14
{ text: event.target.opcao3.value, votos: 0 }
15 ]
16 };
17
18 // cria o novo quiz
19 Quiz.insert(novoQuiz);
20 }
21 });
Um dos pacotes que o Meteor disponibiliza dentro da sua especificao o pacote de autenticao do Facebook. Esse tipo de
recurso, conhecido como Open Authentication, muito comum nas
aplicaes web para facilitar o acesso dos usurios s mesmas sem
perder tempo criando um cadastro completo. Os mesmos passos
tambm podem ser seguidos para implementar usando a API do
Google Plus e Twitter, entre outras.
O primeiro passo criar uma aplicao na pgina de desenvolvedores do Facebook (vide seo Links). No menu Apps selecione a
opo Add a New App e escolha o tipo de aplicao a qual deseja
logar: Site. D um nome mesma: Meteor-Teste, e clique em Criar.
Quando estiver criada, v at a opo Test Apps no menu da
lateral esquerda e clique no boto Create a Test App. Voc ser
redirecionado para a popup demonstrada na Figura 12. Informe
um nome para o App de teste e clique em Create Test App. Voc
ser levado a uma nova popup para confirmar um captcha.
Aps isso, a aplicao de teste estar configurada. V at o menu
Settings e clique no boto + Add Platform, selecionando a opo
Site novamente. No campo Site URL informe o endereo que
estamos testando: http://localhost:3000 e clique em Save Changes
(para toda alterao sempre clique no boto de salvamento que fica
no fim da pgina, seno suas configuraes sero perdidas).
25 25
Eles criaro os pacotes do login via Facebook e das configuraes do mesmo servio, respectivamente. Aguarde at que eles
finalizem, v at o projeto e crie trs novos arquivos: login.html e
login.js no diretrio \client e social-config.js no diretrio \server.
Os dois primeiros sero responsveis por conter os cdigos HTML
e JavaScript para o login e o ltimo tratar das configuraes
de login, bem como guardar os dados da autenticao. Vamos
comear por este ento: abre o arquivo e adicione o contedo da
Listagem 15.
A classe ServiceConfiguration, que agora disponvel atravs dos
imports que fizemos, faz todo o trabalho de remover o servio
do Facebook (caso ele j exista) e adicionar novamente. Na insero que fazemos na linha 5 precisamos informar o nome do
servio de autenticao, o id da aplicao que criamos e a senha
(app secret).
E para exibir a pgina com o boto de login vamos criar um
novo template e adicionar ao arquivo login.html que criamos
(Listagem 16).
O template traz novas configuraes que envolvem o uso de
servios e de usurios. O objeto currentUser refere-se ao usurio
global logado no momento. Dentro dele podemos acessar o objeto
services que, por sua vez, ter o objeto facebook como dependncia. Os valores de nome, gnero, etc. devem ser acessados com as
26
Listagem 17. Cdigo de criao dos eventos de click para o template de login.
01 Template.login.events({
02 click #facebook-login: function(event) {
03
Meteor.loginWithFacebook({}, function(err){
04
if (err) {
05
throw new Meteor.Error(Login com Facebook falhou);
06
}
07
});
08 },
09
10 click #logout: function(event) {
11
Meteor.logout(function(err){
12
if (err) {
13
throw new Meteor.Error(Logout falhou);
14
}
15
})
16 }
17 });
Notas de Produo
Uma vez que estamos trabalhando em ambiente de desenvolvimento, todas as colees de dados so publicadas automaticamente no nosso servidor e assimiladas pelo cliente. No queremos esse
tipo de comportamento quando a aplicao estiver em produo.
O mais apropriado seria termos cada usurio subscrevendo somente os dados que ele est trabalhando naquele momento.
Dentro do diretrio .meteor/packages temos um pacote chamado
autopublish. Precisamos remov-lo para que essa funcionalidade
funcione como queremos. Execute ento o comando a seguir de
dentro do terminal:
meteor remove autopublish
27 27
Autor
Jorge Rodrigues
especialista em SEO e marketing na web, e freelancer no
universo mobile e front-end, tendo domnio sobre tecnologias
como CoffeeScript, JavaScript, HTML5 e Meteor.js. J trabalhou
em diversas empresas de TI tendo acumulado mais de dois anos de
experincia.
Links:
Pgina oficial de instalao do Meteor.
https://www.meteor.com/install
Pgina de desenvolvedores do Facebook.
https://developers.facebook.com/
Pgina oficial do MongoDB.
https://www.mongodb.com/
28
Configurao do ambiente
Para se trabalhar com a Dart a primeira coisa a se fazer efetuar
o download da linguagem, juntamente com o Dark Editor, a Dart
SDK e o web browser Chrommium que traz consigo uma VM
Dart pr-construda e disponibilizada gratuitamente. Para isso,
acesse o site oficial disponvel na seo Links e clique no boto
Get Started. Aps isso, voc ser redirecionado para a pgina de
definio da plataforma, conforme mostra a Figura 1.
Selecione o seu Sistema Operacional, depois clique na opo
Editor + SDK para selecionar o instalador completo e no final
os itens na seo Download Dart Editor iro aparecer para voc
identificar se o seu SO 32 ou 64 bits.
Posicione o zip baixado na pasta onde voc deseja criar os seus
projetos Dart, e descompacte-o l. Neste arquivo estar contido o
executvel do Dart Editor, basta execut-lo e voc ver uma IDE
semelhante da Figura 2 aparecer.
29 29
30
Na linha 4 declaramos o nome da biblioteca que estamos implementando (que tambm pode ser empacotada e importada
como um componente independente em outros projetos). Essa
biblioteca ser responsvel por gerenciar o menu de navegao
da nossa pgina.
Na linha 6 importamos a biblioteca html da Dart. Todos os imports
devem ser sempre feitos usando a sintaxe fabricante:biblioteca.
Da linha 9 linha 12 estamos recuperando os elementos
HTML referentes s divs de container, botes e barra de menu.
A funo querySelector() recebe o seletor do elemento a ser recuperado e varre a pgina buscando-o, caso exista mais de um, um
vetor ser criado e associado.
As funes closeMenu() e toggleMenu() (linhas 14 e 20) apenas
tratam de mudar as classes CSS dos mesmos elementos recuperados para que eles mudem de estilo quando um item de menu
for selecionado e desselecionado. A funo remove(), por sua vez,
remove a classe CSS passada por parmetro do elemento, enquanto toggle() testa se a classe j existe, seno ela insere a informada
como argumento. J a funo add() (linha 24) adiciona a classe
informada ao elemento HTML.
Nas linhas 27 a 29 definimos o ouvinte de click dos componentes
de menu para executar as funes de navegao de pgina. Na
Dart, sempre usamos os mesmos atributos dos eventos ouvintes
on para informar qual evento deve ser executado. J a funo
listen() da API da Dart recebe uma segunda funo como parmetro para ser executada sempre que o click for efetuado. Veja que a
Dart tambm nos permite criar funes annimas (linha 30) em
vez de defini-las sempre em funes separadas.
Agora abra o arquivo reverser.dart que conter o cdigo de reverso dos textos e adicione o contedo da Listagem 2.
Listagem 2. Contedo do arquivo reverser.dart.
01 // Copyright (c) 2015, DevMedia. All rights reserved. Use of this source code
02 // is governed by a BSD-style license that can be found in the LICENSE file.
03
04 library reverser;
05
06 import dart:html;
07
08 InputElement get _inputElement => querySelector(#nome);
09 Element get _outputElement => querySelector(#out);
10
11 // Exemplo de gancho no DOM e resposta s mudanas de campos de entrada.
12 initReverser() {
13 // Revete assim que o cdigo inicia.
14 _reverse();
15
16 // Reverte h cada soltura de tecla.
17 _inputElement.onKeyUp.listen((_) => _reverse());
18 }
19
20 _reverse() {
21 _outputElement.text = _inputElement.value.split().reversed.join();
22 }
31 31
32
<main>
<div id=home>
<p>
Nome:<br>
<input type=text id=nome placeholder=Digite o seu nome...>
</p>
<p>
Revertido:<br>
<output id=out></output>
</p>
</div>
33 33
Principais caractersticas
A Dart inaugurou uma lista de novos
conceitos no mundo da programao.
Vejamos alguns deles.
Modularidade e Namespace
34
Veja a Listagem 7. Nela, temos um exemplo de biblioteca implicitamente nomeada na qual todos os recursos da dart:html
esto disponveis atravs do escopo da nossa biblioteca com o
prefixo dom.
Listagem 6. Estrutura de diretrios padro do projeto.
01 name: AloMundoDart
02 version: 0.0.1
03 description: >
04 A mobile-friendly web app with routing, responsive CSS, and (optional) Sass
05 support.
06 #author: <your name> <email@example.com>
07 #homepage: https://www.example.com
08 environment:
09 sdk: >=1.0.0 <2.0.0
10 dependencies:
11 browser: >=0.10.0 <0.11.0
12 sass: >=0.4.0 <0.5.0
13 script_inliner: >=1.0.0 <2.0.0
14 route_hierarchical: >=0.5.0 <0.7.0
15 transformers:
16 - script_inliner
17 #- sass:
18 # style: compressed
Listagem 2. Exemplo de biblioteca implicitamente nomeada.
01 /**
02 * Biblioteca nomeada implicitamente.
03 * A lib dart:core automaticamente importada.
04 */
05 import dart:html as dom;
06 /**
07 * Recupera [Elemento] por [id].
08 */
09 dom.Element getById(String id) => dom.querySelector(#$id);
Obviamente, todas as marcaes e seletores s sero reconhecidos em um ambiente Dart. O browser no consegue interpretar
essa notao. Veja que na linha 5 fazemos uso da clusula as
para importar o recurso (biblioteca HTML da Dart) de forma
dinmica. Na linha 9 fazemos a recuperao do elemento id pelo
seu atributo id da HTML. Isso bem semelhante forma como
o jQuery faz a seleo de seus atributos, por exemplo. Contudo,
quando for compilado para JavaScript, todo esse cdigo perde as
informaes das bibliotecas e temos um arquivo bem diferente
sendo gerado.
A Dart implementa o conceito de encapsulamento atravs da
privacidade. Cada membro ou identificador de uma biblioteca
tem um dos dois nveis de acesso: pblico ou privado. Membros
privados so visveis apenas de dentro da biblioteca na qual eles
so declarados. Por outro lado, os membros com um acesso pblico
so visveis em todos os lugares. A diferena entre eles o prefixo
sublinhado (_), como mostrado no cdigo da Listagem 8.
O cdigo mostra uma biblioteca de animao com duas classes
e uma varivel. A classe de Animao e a varivel animationSpeed so pblicas e, portanto, visveis de fora da biblioteca.
A classe _AnimationLibrary privada e s pode ser utilizada
na biblioteca.
35 35
Funes e Closures
Na Dart possvel criar funes via varivel, isto , criamos
uma referncia a uma funo e a atribumos para uma varivel,
conforme pode ser observado na Listagem 9.
Listagem 9. Exemplo de funo com associao de variveis a funes.
01 library function_var;
02 // Returna a soma de [a] e [b]
03 soma(a, b) {
04
return a + b;
05 }
06 // Operao
07 var operacao;
08 void main() {
09
// Atribui a referncia funo [soma]
10
operacao = soma;
11
// Execute operacao
12
var resultado = operacao(2, 1);
13
print(Resultado ser ${resultado});
14 });
15 }
36
Classes
No mundo real, encontramos muitos objetos individuais, todos
do mesmo tipo. H muitos carros com a mesma marca e modelo.
Cada carro foi construdo a partir do mesmo conjunto de projetos.
Todos eles contm os mesmos componentes e cada um uma
instncia da classe de objetos conhecida como Carro.
O conceito de classe na orientao a objetos o mesmo na Dart.
Atributos, mtodos, classes internas e construtores se mantm na
Mixins
A Dart tem um sistema de herana baseado em mixins, que permitem que o corpo de certas classes possa ser reusado em classes
hierrquicas. Vejamos o cdigo da Listagem 12.
A classe Reboque independente da classe Carro, mas pode
aumentar a capacidade de carregar peso do carro. Para adicionar
um mixin de Reboque classe CarroPassageiro podemos usar a
palavra-chave with seguida pela classe mixin Reboque, como no
cdigo da Listagem 13.
Com a adio da clusula with na linha 5 temos agora assimilada a funcionalidade de adicionar mais peso ao reboque do
carro (linha 15). Para isso, no precisamos mudar nada na classe
CarroPassageiro, basta adicionar o mixin e os mtodos sero
automaticamente carregados sem a necessidade de uma herana
explcita (extends).
// N max de passageiros.
07
int maxPassageiros = 4;
08
/**
09
10
11
*/
12
13
14
15
16
carregar(pesoExtra);
}
17 }
Colees e Genricos
A Dart suporta o uso de vetores na forma de classes de List.
Digamos que precisamos usar uma lista para salvar informaes
temporrias. O dado que voc coloca na lista depende do contexto
do cdigo. A lista deve conter diferentes tipos de dados ao mesmo
tempo, conforme demostrado pela Listagem 14.
37 37
Neste exemplo adicionamos dados de diferentes tipos ao mesmo array. Quando o cdigo for executado vermos o resultado
[1, Letra, {test: errado}, 1.53] ser impresso no console. Esse tipo de
funcionalidade permitido em vrias linguagens de programao. Entretanto, no interessante ter dados conflitando em uma
estrutura que pode dar erros mais frente. Para evitar esse tipo de
comportamento podemos verificar qual tipo de dado est vindo
na lista atravs do operador is (Listagem 15).
Listagem 15. Exemplo de lista checada na Dart.
01 // Array de dados String
02 List parts = [roda, ignio, motor];
03
04 // Item qualquer
05 double item = 1.53;
06
07 void main() {
08 if (item is String) {
09
// Add o item ao array
10
parts.add(item);
11 }
12 print(parts);
13 }
Erros e Excees
Existe sempre uma confuso muito grande entre a diferena do
que um erro e uma exceo nas linguagens de programao.
Erros geralmente acontecem precedidos de falhas graves no fluxo
dos algoritmos que impedem a continuao do sistema, como por
exemplo o estouro de memria ou quando uma VM no consegue
encontrar o recurso (classes, arquivos, etc.) que foi solicitado. J
as excees so manipulveis via cdigo, o programador pode
captur-las, entender o que aconteceu e ento tomar uma deciso
programtica.
38
O mtodo fromUri() da linha 8 se encarrega de carregar o arquivo em memria para ser manipulado.
O mtodo existsSync() da linha 10 verifica se o arquivo de fato
existe. Esse o primeiro tratamento de erro que fazemos, isto ,
em vez de manipularmos uma exceo diretamente, fazemos um
teste para cada arquivo vendo se ele existe antes de us-lo.
Na linha 12 abrimos o arquivo para pegar seus bytes e na linha 16
lemos o seu contedo a fim de iterar sobre os dados do mesmo.
Na linha 22 imprimimos o contedo que foi concatenado, fechando o arquivo na linha 25.
interessante observar que, mesmo que o contedo seja impresso com sucesso e nenhuma exceo acontea pelas precaues que
tomamos, ainda assim na linha 25, ao fechar o arquivo, corremos
o risco de receber uma exceo por vrias razes: o arquivo foi
removido por outrem, falha na conexo de rede, etc.
Em vista disso, para se ter uma maior segurana nesse fluxo e
manter a organizao do cdigo, vamos evoluir o mesmo para o
que est contido na Listagem 19.
01 import dart:io;
02 main() {
03 // URI do arquivo
04 Uri uri = new Uri.file(teste.json);
05 // Checa a uri
06 if (uri != null) {
07
// Cria o arquivo
08
File file = new File.fromUri(uri);
09
// Checa se o arquivo existe
10
if (file.existsSync()) {
11
// Abra o arquivo
12
RandomAccessFile random = file.openSync();
13
// Checa se o arquivo foi aberto
14
if (random != null) {
15
// L o arquivo
16
List<int> conteudoNaoPronto = random.readSync(random.lengthSync());
17
// Checa o contedo no pronto
18
if (conteudoNaoPronto != null) {
19
// Converte para String
20
String conteudo = new String.fromCharCodes(conteudoNaoPronto);
21
// Imprime o resultado
22
print(contedo: ${conteudo});
23
}
24
// Fecha o arquivo
25
random.closeSync();
26
}
27
} else {
28
print (Arquivo no existe);
29
}
30 }
31 }
01 import dart:io;
02 main() {
03 RandomAccessFile random;
04 try {
05
Uri uri = new Uri.file(teste.json);
06
07
File file = new File.fromUri(uri);
08
09
random = file.openSync();
10
11
List<int> notReadyContent = random.readSync(random.lengthSync());
12
13
String conteudo = new String.fromCharCodes(notReadyContent);
14
15
print(conteudo: ${conteudo});
16 } on ArgumentError catch(ex) {
17
print(Erro de argumento invlido);
18 } on UnsupportedError catch(ex) {
19
print(URI no pode referenciar um arquivo);
20 } on FileSystemException catch(ex) {
21
print (Arquivo no existe ou est inacessvel);
22 } finally {
23
try {
24
random.closeSync();
25
} on FileSystemException catch(ex) {
26
print(Arquivo no pode ser fechado);
27
}
28 }
29 }
39 39
40
Autor
Jlio Sampaio
analista de sistema e entusiasta da rea de Tecnologia da
Informao. Atualmente consultor na empresa Visagio,
trabalhando em projetos de desenvolvimento de sistemas estratgicos, tambm instrutor JAVA. Possui conhecimentos e experincia
em reas como Engenharia de Software e Gerenciamento de Projetos,
tem tambm interesse por tecnologias relacionadas ao front-end web.
Links:
Pgina de download oficial da Dart.
https://www.dartlang.org/downloads
Pgina do repositrio de pacotes da Dart.
https://pub.dartlang.org/
Testes automatizados
com o framework
Selenium
Aprenda a automatizar os testes das suas
telas front-end e ganhe em produtividade e
escalabilidade
41 41
42
Configurao do ambiente
O primeiro requisito obrigatrio para
executar o Selenium no seu Sistema
Operacional ter uma verso recente do
JDK (Java Development Kit) instalada. Para
verificar se voc j tem alguma, basta
12
13
abrirFirefox();
}
14
15
16
17
driver.get(http://devmedia.com.br);
18
String i = driver.getCurrentUrl();
19
System.out.println(i);
20
21
driver.close();
}
22
23 }
43 43
44
Veja que no final da listagem temos a exibio do ttulo da pgina. Nas linhas anteriores temos alguns erros exibidos (dentre
outros que foram omitidos da listagem) que caracterizam o processo de validao do Selenium, ou seja, sempre que alguma tag
no for fechada ou faltar algum atributo obrigatrio ou tivermos
qualquer erro a nvel de HTML, essas linhas sero impressas. Mas
no precisa se preocupar com isso, esse um comportamento
padro do Selenium.
Em algumas situaes ser preciso tambm acessar propriedades
via JavaScript de dentro das pginas. Por exemplo, suponha que
em vez de acessarmos o ttulo da pgina via mtodo getTitle()
do driver, ns quisssemos executar um script JavaScript que
fizesse o mesmo procedimento. Para isso, precisaramos fazer
uso da classe JavaScriptExecutor da API do Selenium e passar
a string do nosso script como parmetro para o seu mtodo
executeScript().
Entretanto, como em todo browser, tambm precisamos habilitar
o seu suporte ao JavaScript. Os browsers comuns j vm com ele
habilitado, mas no o caso do HTMLUnitDriver do Selenium.
Vejamos o cdigo da Listagem 5 para isso. Vamos acessar agora
45 45
Essa clusula sempre deve vir precedida da palavra-chave return, j que precisamos que algo seja retornado;
Linha 28: Encerramos o driver.
Para verificar o resultado, reexecute a aplicao e voc dever
ver no console a mensagem impressa pela Listagem 6.
Listagem 6. Mensagem final de execuo do teste.
Cor de fundo: rgb(48, 47, 49)
Padding: 95px 0 45px 0
Classe CSS:container-fluid dm-busca
O ttulo da pgina : DevMedia - Tutoriais, Videos e Cursos de Programao
Estratgia
Sintaxe
Descrio
Por ID
driver.findElement(By.id(<ID do elemento>))
Por nome
driver.findElement(By.name(<Nome do elemento>))
driver.findElement(By.linkText(<Texto do Link>))
Por CSS
driver.findElement(By.cssSelector(<Seletor do elemento>))
Por XPath
46
Seletores jQuery
A biblioteca jQuery extremamente mais simples e produtiva
de usar em relao ao JavaScript puro. Voc pode optar por us-la
em conjunto com seus seletores para recuperar elementos, definir
eventos e funes de callback, bem como enviar submits em formulrios. Para criar um cenrio mais prximo da realidade dos
projetos, vamos criar uma pgina de cadastro de usurio simples
com suporte a jQuery para os scripts e Bootstrap para o estilo e
estrutura da mesma. Vejamos na Listagem 9 o cdigo para isso.
A listagem faz a importao no incio dos arquivos de script necessrios para carregar o jQuery e o estilo do Bootstrap (linhas 7 a 9).
Os imports foram feitos via CDN (Content Delivery Network) portanto,
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div class=form-group>
<div class=checkbox>
<label> <input type=checkbox> Ativo </label>
</div>
<p class=help-block>Lorem ipsum dolor sit amet</p>
</div>
<div class=form-group>
<label class=control-label>Opes</label>
<div class=checkbox>
<label> <input type=checkbox name=optionsRadios
id=optionsCheckbox1 value=option1 checked=> Opo 1 </label>
</div>
<div class=checkbox>
<label> <input type=checkbox name=optionsRadios
id=optionsCheckbox2 value=option2> Opo 2 </label> </div>
</div>
<div class=form-group>
<label class=control-label>Sexo</label>
<div class=radio>
<label> <input type=radio name=optionsRadios id=optionsRadios1
value=option1 checked=> Masculino </label>
</div>
<div class=radio>
<label> <input type=radio name=optionsRadios id=optionsRadios2
value=option2> Feminino </label>
</div>
</div>
53
54
55
56 <button type=submit class=btn btn-default>Criar Usurio</button>
57 </form>
58 </div>
59 </div></div></div></body></html>
47 47
22
23
@SuppressWarnings(unchecked)
List<WebElement> focusElements = (List<WebElement>)
js.executeScript(return jQuery.find(:focus));
24
25
if (checkedElements.size() == 2)
26
System.out.println(Duas checkboxes selecionadas);
27
28
if (focusElements.size() == 1)
29
System.out.println(Campo com foco: + focusElements.get(0).getAttribute(id));
30
31
for (WebElement element : checkedElements) {
32
if (checked.contains(element.getAttribute(id))) {
33
System.out.println(Elemento contm id);
34
}
35
}
36
37
js.executeScript(jQuery(#optionsRadios2).attr(checked, checked));
38
js.executeScript(jQuery(button[type=\submit\]).text(Texto Mudado));
39
40
// driver.close();
41 }
42 }
48
Boto
Descrio
Controlador de Velocidade
usado para controlar o quo rpidos seus casos de teste iro executar.
Botes Pause/Resume
Boto Step
Janela Table
Exibe os comandos gravados. Voc pode modificar e incluir novos comandos, que so divididos em trs partes:
Command: descreve o nome do comando;
Target: descreve o elemento alvo (id ou name) do Xpath;
Value: descreve o valor do elemento.
49 49
50
Quando se est construindo um caso de testes, algumas consideraes devem ser levadas em conta:
Para gravar aes do tipo submit, necessrio que o usurio
clique no boto em vez de dar um enter em algum dos campos do
formulrio. Isso porque o Selenium no consegue reconhecer esse
evento e associar a um envio de request, j que o usurio pode
dar vrios enters, ou ter um controle de navegao de campo para
campo via tecla Enter, em vez de Tab.
Quando clicamos em um link durante uma gravao, o Selenium
IDE grava o comando no tipo click. Porm, voc deve mudar
esse tipo para clickAndWait para garantir que o seu caso de
teste far uma pausa at que a pgina carregue por completo e
o fluxo possa prosseguir sem erros. Caso contrrio, nosso caso
de teste continuar executando os comandos antes que a pgina
tenha todos os elementos UI carregados na HTML.
Os seus casos de teste tambm tero que verificar as propriedades de uma pgina da web. Isso requer o uso dos comandos assert
verifyText: verifica se o texto esperado e sua tag HTML correspondente esto presentes na pgina;
verifyTable: verifica se contedo esperado de uma tabela est
presente;
waitForPageToLoad: finaliza a execuo at que uma nova
pgina seja carregada. Chamado automaticamente quando o
clickAndWait usado;
waitForElementPresent: finaliza a execuo at que um elemento da interface do usurio esperado, conforme definido pela
sua tag HTML, est presente na pgina.
Existem inmeras outras abordagens nas quais o leitor poder
usar o Selenium. Como vimos, a automao precisa estar obrigatoriamente vinculada a telas, estejam elas executando num PC,
smartphone, tablet, etc. O Selenium conta ainda com dois drivers
especficos para ambientes mveis: AndroidDriver, classe da API
do Selenium exclusiva para dispositivos Android; e iWebDriver,
para simular testes em ambiente iOS.
Tambm possvel integrar o Selenium com o JUnit, QUnit,
JTestDriver e outros inmeros frameworks de teste unitrio disponveis no mercado. Os arquivos que eles geram em conjunto so
leves e podem facilmente se adaptar a um controle de integrao
com o Jenkins, por exemplo, bem como ser manuseados por ferramentas de versionamento (Git, Mercurial, etc.).
Para os desenvolvedores PHP que querem fazer uso do Selenium,
o mesmo no prov suporte nativo linguagem, mas possvel
usar o PHPUnit: uma instncia do xUnit para testes unitrios que
traz consigo mdulos do Selenium que podem ser instalados via
linha de comando.
Autor
Sueila Sousa
tester e entusiasta de tecnologias front-end. Atualmente
trabalha como analista de testes na empresa Indra, com foco
em projetos de desenvolvimento de sistemas web, totalmente
baseados em JavaScript e afins. Possui conhecimentos e experincias
em reas como Gerenciamento de processos, banco de dados, alm do
interesse por tecnologias relacionadas ao desenvolvimento e teste client side.
Links:
Pgina oficial de download do JDK.
http://www.oracle.com/technetwork/java/javase/downloads/index.html
Pgina oficial de download do Eclipse.
https://eclipse.org/downloads/
Pgina de download do driver do Chrome para o Selenium.
http://chromedriver.storage.googleapis.com/index.html
51 51
52