Skip to content

Como fazer um simples Widget javascript usando Jquery

Esse artigo mostra como fazer um simples widget javascript usando jquery para mostrar o ip do usuário.

Ele pega o IP buscando os dados via JSON com uma consulta Ajax ao site http://ip.jsontest.com/.

Depois ele irá gerar um simples HTML com a informação requisitada e substituirá na página web.

1-Estrutura básica

No seu HTML, insira um

onde irá seu widget:

<html>
...
<div id="meuwidget"></div>
...
</html>

No seu JS, crie a estrutura básica do seu Widget:

IPWidget = {
url: 'http://ip.jsontest.com/',
init: function () {
//Inicia o Widget
return this;
},
render: function () {
//Cria HTML do widget
},
refresh: function () {
//Pega os dados com Jquery
}
};

Ainda no seu JS, crie seu Widget com:

var MeuIPWidget = Object.create(IPWidget).init({});

Debugando esse código no console JS, teremos um objeto chamado MeuIPWidget, que tem os métodos init(), render() e refresh().

1
Esses métodos não fazem nada agora, vamos reve-los depois, agora é interessante ver a estrutura do seu objeto JS.

2- Init()

Nosso widget tem uma propriedade fixa chamada url, ou seja, todos os filhos desse widget levarão essa informação na sua estrutura.
Mas é interessante customizar o widget, passar parâmetros específicos para cada um, iremos fazer isso no método init().

IPWidget = {
url: 'http://ip.jsontest.com/',
init: function (config) {
//Inicia o Widget
this.config = config; //Guarda config no objeto
return this;
},
...

init() agora recebe o hash ‘config’, que será o objeto que guardará as configurações individuais de cada widget.
Ao criar cada objeto chamando o init(), iremos guardar nesse novo objeto (this.config) o objeto que passaremos (config).

O init() servirá pra isso, guardar em cada objeto instanciado informações específicas daquele objeto.

2

3- render()

O método render() do nosso widget irá criar uma estrutura em HTML.

Criaremos um <div> com um <span> dentro dele para nosso widget, uma estrutura bem simples, mas que servirá ao propósito desse exemplo.
Logo em seguida, iremos jogar essa estrutura HTML lá no <div> que criamos no passo 1.
Para isso usaremos o Jquery para substituir o html do div(que no momento é vazio) pelo seu novo conteúdo.
Chamaremos o render() ainda no init() para renderizar o widget no mesmo momento que iniciarmos o objeto.

IPWidget = {
url: 'http://ip.jsontest.com/',
init: function (config) {
//Inicia o Widget
this.config = config; //Guarda config no objeto
this.render();
return this;
},
render: function () {
//Cria HTML do widget
var html = '<div id="ipwidget">Seu ip é: <span id="ipwidget-ip"></span></div>';
$("#" + this.config.id).html(html);
},
refresh: function () {
//Pega os dados com Jquery
}
};

Porém, para sabermos qual <div> iremos usar, precisaremos instanciar o nosso objeto passando o id desse <div>, no caso ficará assim:

var MeuIPWidget = Object.create(IPWidget).init({
id: "meuwidget"
});

4- refresh()

O método refresh() irá fazer a consulta ajax e irá atualizar a estrutura HTML do widget com as informações recebidas:

IPWidget = {
url: 'http://ip.jsontest.com/',
init: function (config) {
//Inicia o Widget
this.config = config; //Guarda config no objeto
this.render();
return this;
},
render: function () {
//Cria HTML do widget
var html = '<div id="ipwidget">Seu ip é: <span id="ipwidget-ip"></span></div>';
$("#" + this.config.id).html(html);
this.refresh();
},
refresh: function () {
//Pega os dados com Jquery
var obj = this;
$.ajax({
url: obj.url,
cache: false,
dataType: 'json',
success: function (data) {
$("#ipwidget-ip").text(data.ip);
}
});
}
};

Note que eu adicionei a chamada ao refresh() logo ao fim do render(), isso não é obrigatório, no caso do nosso widget, ele irá fazer a consulta e atualizar o widget logo que for criado.

5-Working!

Para ver esse código funcionando, acesse http://jsfiddle.net/a2vxX/

Adicionando um repositório GIT ao Redmine.

redmine-logo Quem usa o Redmine no dia a dia sabe como ele é bom, melhor ainda se você habilitar aquela aba que dá acesso ao repositório do seu projeto, então vamos lá. Esse tutorial tem por base a documentação do Redmine.

Cenário

Redmine rodando em 192.168.0.1

Repositório GIT em 192.168.0.100

Preparando a máquina Redmine

  • Instale o git na máquina.
  • Crie um diretório que será usado pelo Redmine para acessar o git:
sudo mkdir -p /var/redmine/git_repositories
  • Altere as permissões desse diretório para o usuário que está rodando o serviço do Redmine, na documentação ele diz para fazer com:
sudo chown rails:rails /var/redmine/git_repositories

Porém, no meu ambiente, o redmine roda no Apache, e no caso, o comando fica assim:

sudo chown www-data:www-data /var/redmine/git_repositories

Preparando o clone do repositório git

Agora, vamos usar o diretório criado acima para clonar nosso repositório git que está na máquina 0.100. No meu caso o GIT vai ser acessado por SSH, e para facilitar minha vida, eu deixei o login automático da máquina 0.1 para a 0.100. Nesse post eu explico como fazer isso.

cd /var/redmine/git_repositories/
git clone --bare ssh://user@192.168.0.100/home/user/git/projeto/
git config remote.origin.fetch +refs/heads/*:refs/heads/*
git config --add remote.origin.fetch +refs/tags/*:refs/tags/*

Repare na opção –bare, significa que esse clone do meu repositório é somente um backup do meu repositório e não tem um “working directory”.

Adicionando o repositório no Redmine

Para adicionar o novo repositório ao redmine, entre (com direitos de admin) nas preferências do projeto, clique em repositório, tipo git, e no caminho informe:

/var/redmine/git_repositories/projeto.git

Se tudo deu certo, você verá todo o histórico do repositório agora na aba repositório no Redmine.

Finalizando

Como devem ter pensando, o repositório não vai se atualizar sozinho, crie então uma entrada no cron para rodar um “update” de tempos em tempos.
Na minha máquina ficou assim:

##/etc/crontab
* * * * * root perl -we '`cd /var/redmine/git_repositories/projeto.git && git fetch`'

Até a próxima ;)

Edit (06/02/2013): Depois de alguns problemas usando essa config, eu fiz algumas modificações no tutorial, pois de acordo com esse post a documentação do Redmine não está totalmente correta.

Criando um Webcrawler simples em perl

Webcrawlers

Segundo a Wikipédia, um Webcrawler (ou WebSpider, WebRobot, etc) é um programa de computador que navega na internet de uma forma automatizada. Seja qual for o motivo que você tem para criar esses robôs coletores de dados, o ponto é que eles são bem úteis.

E em Perl é muito fácil criar um deles. Lembrando que há outras maneiras e módulos de fazer isso, não quero entrar no mérito de qual é o melhor, esse post é só uma maneira de abordar o assunto.

Instalação

O módulo que vou usar é o WWW::Mechanize. Para quem já conhece Perl, com um comando você instala esse módulo no seu sistema:

$ cpan WWW::Mechanize

Para quem não conhece Perl, CPAN, ou mesmo nunca programou na vida, esse site tem tutoriais de todos os passos para você começar a programar em Perl.

Meu primeiro crawler

Eu começo informando meu programa que vou usar alguns módulos, estou usando também o Data::Dumper para facilitar a saída dos dados, porém seu uso é opcional.

#!/usr/bin/perl -w
#Libs
use strict;
use warnings;
use WWW::Mechanize;
use Data::Dumper;

Definindo a url que vou acessar e inicializando a classe principal do meu robô:

my $url = "http://www.yahoo.com";
my $mech = WWW::Mechanize->new();

Chamando o método get() para coletar o conteúdo da página.

$mech->get($url);

Nesse momento o Mechanize já abriu o website do Yahoo, imagine que é como uma aba do seu navegador que está aberta.
A partir de agora eu posso fazer várias operações com essa “aba”, como por exemplo, ver seu conteúdo:

print Dumper($mech->content());

Baixe esse script aqui.

Melhorando

Além do content(), você pode usar outros métodos do Mechanize para seus próximos robôs, os mais usados são:

$mech->links(): Retorna os links da página.

$mech->find_link(): Procura um link na página.

$mech->set_fields(): Preenche um formulário.

$mech->click_button(): Simula um click do mouse num botão da página.

$mech->submit(): Envia o formulário.

Indo além

Bom, agora já sabemos abrir sites usando o método get() e ver o conteúdo do mesmo usando o content(), mas o Mechanize é muito mais que isso, ele preenche formulários, navega entre os links da página,  simula clicks em botões, e se você combiná-lo com outros módulos perl você pode exportar esses dados para vários formatos (csv, xml, json, etc), pode exportar a página para pdf, odt, ou o que sua imaginação mandar.

Uma das limitações do Mechanize é não poder disparar scripts JavaScript contidos na página, eu me deparei com esse problema quando fazia um robô para coletar dados de uma página que usava JavaScript no seu mecanismo de autenticação, mas há alternativas para isso, porém, é um assunto para outro post, té+ ;)

Secure Boot e o que eu tenho a ver com isso

A Free Software Foundation (FSF), uma associação sem fins lucrativos que defende o uso do Software Livre, publicou um artigo fazendo pesadas – e justificadas – críticas ao novo sistema de boot que virá na próxima geração de PCs.

Para entender melhor como isso funciona, você já deve ter comprado um computador com um adesivo do Windows, então, para receber esse adesivo as fabricantes precisam preencher certos requisitos para ter a aprovação da Microsoft. O problema é que para a próxima versão do Windows, o Windows8, a Microsoft decidiu que um desses requisitos é que na inicialização do computador (BIOS) deve ser habilitada a opção de Secure Boot, que faz com que o computador só permita a instalação de Sistemas Operacionais assinados digitalmente.

Há muitos detalhes técnicos que você pode ler nesse artigo, mas o essencial é que a Microsoft está cada vez mais dificultando a entrada do Linux de outros sistemas que não o Windows no seu hardware. Na versão x86 eles até estão mais flexíveis, permitindo depois de um procedimento a desabilitar o Secure Boot, mas na versão para arquitetura ARM a restrição é pesada e não deixa o usuário instalar outro sistema a não ser o da Microsoft.

Há de se ressaltar que a Microsoft não é a pioneira nisso, a Apple há tempos já tem esses mecanismos nos seus iPads, por exemplo.

Eu particularmente acho interessante o Secure Boot, porém, o fato da Microsoft controlar esses certificados não me agrada nem um pouco. Talvez você usuário do Windows pense que isso não te afete e que você não tá nem aí pra isso, mas vou te contar uma coisa, no meu carro eu posso usar só gasolina da Petrobrás por exemplo, mas eu não admito que a fabricante do veículo restrinja meu direito de poder abastecer em qualquer posto, pense nisso.

Veja a cotação do Euro e do Dólar no Ubuntu

Um applet bem legal do Gnome é o Invest, a maioria deve usá-lo para monitorar a cotação de ações na bolsa de valores, porém, o Invest também funciona para monitorar a cotação de moedas, pra isso, vamos aos seguintes passos: Leia mais…

Como colorizar seu código fonte e exportar para HTML

Uma das dificuldades de escrever esse blog foi a de colar códigos fontes aqui, depois de testar algumas coisas achei o Pygments, que é um módulo que faz isso escrito em python, mas que vem com um binário para ser utilizado na linha de comando, o que o torna massa bem prático e eficiente.

Se você é um feliz usuário do Sistema operacional Linux, procure no seu gerenciador de pacotes por Python-Pygments ou digite no seu terminal:

$ sudo apt-get install python-pygments

Eu uso o seguinte comando para exportar meus códigos para HTML:

$ pygmentize -f html -O noclasses -o result.html script.py

Onde result.html é a saída do comando e script.py é meu código.

Depois eu abro o arquivo .html e colo aqui no WordPress. Simples, não?

Para outras opções consulte a documentação da aplicação em http://pygments.org/

Threads simples com Python

Hoje pesquisando fiz um código para usar threads com python, ob objetivo era uma classe que eu pudesse jogar vários downloads e eles rodassem cada um numa thread. Outra coisa legal é que me desafiei a usar somente python3 de agora em diante.

Leia mais…

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.