Monday, March 18, 2013

Raspberry Pi: build a home web server (BETTER WAY)!

Raspberry Pi: build a home web server (BETTER WAY)!

Long time no see people!!! Depois de praticamente 2 meses sem postar nada estou eu aqui novamente!
Como podem perceber o nome da postagem (BETTER WAY) quer dizer que eu aprendi muito nestes últimos 2 meses! Foram bem corridos, com o fim do ano e viagens. Enfim, vamos la!!

Bom, como vocês devem se lembrar do meu último post estava criando um servidor web local (intranet)  usando o raspberry pi. Não vou repassar toda a parte introdutória do post passado nesse, aqui vou direto ao ponto!

Minha stack final até o momento:
  1. Raspberry Pi (claro!!);
  2. Arch Linux Arm (2013-01-22);
  3. dnsmasq (i trully love this one!!!);
  4. nginx;
  5. supervisor;
  6. gunicorn;
  7. python2;
    1. flask;
Beleza, tudo só isso... vou mostrar os passos para instalar esses caras e deixa-los funcionando. Lembrando que, eu não me responsabilizo por quaisquer dados causados pela instalação e posterior uso de seus equipamentos.
Não estou levando em consideração precauções de segurança, no meu caso o acesso a esses dispositivos passa por um router, o qual fornece o DNS e outras implementações como firewall.

Instalação

Bom, o primeiro passo é instalar a versão do Arch Linux Arm no cartão de memória que será inserido no pi. Este passo já fora explicado no tutorial anterior (la eu usei o Arch Linux Arm), então não irei me alongar aqui.
Depois de instalar a imagem conecte o SD no pi e ligue-o na energia elétrica, se a tela do monitor ficar pequena (cortando o shell), bom nesse caso você precisa alterar o arquivo de configuração do pi. A melhor opção é desligar o pi, tirar o SD dele e conectar no pc novamente.
Altere o arquivo config.txt que estará em /boot/config.txt. Eu apenas habilitei e fui mudando os valores de framebuffer e overscan até ficarem legal no meu monitor. O problema de se alterar essas informações desta maneira é que cada outro terminal pode precisar de novas configs.

Feito isso o próximo passo é atualizar todo o sistema. Para logar no Arch Linux pela primeira vez o usuário e senha são root e root.
Após o login execute:
pacman -Syyu

Isso irá atualizar todo o sistema e os repositórios cadastrados.

Agora vamos instalar todos os packages que iremos utilizar! Todos mesmo!!! One line to rule them all!!! HAHAHAHAAHA

pacman -S sudo base-devel openssl pcre zlib libxml2 udev-automount dnsmasq nginx supervisor mongodb python2 python-pip2

Legal neh?? Mas o que fizemos/instalamos???

O principais são o base-devel que irá instalar mais um tonelada de packages e libs incluindo o compilador gcc.
O udev-automount que irá automagicamente montar as unidades que forem conectadas a porta usb do pi, facilitando nossa vida ao inserir um stick usb como unidade de armazenamento.
E claro todo o resto da stack. Se você não quiser instalar algum dos packages é só não coloca-lo na linha listada acima.

Ainda é necessário instalar o flask!! Para isso execute:
pip2 install flask Flask-Assets gunicorn pymongo mongoengine

Acabamos de instalar o flask, Flask-Assets (que junta todos os arquivos .js em um único javascript e css tb), gunicorn (nosso servidor WSGI local que executa código python) e os binds python para o servidor mongodb.

O próximo passo é definir para nosso raspberry pi um endereço de ip fixo, o motivo disso é que queremos que o dnsmasq consiga redirecionar algo do tipo mypi.lan.internal.server para o ip do nosso pi e chamar consequentemente nosso site web!
Como eu estou usando um route, entrei na configuração do mesmo e adicionei um endereço fixo para meu raspberry pi (192.168.1.48).
Agora é preciso alterar 2 arquivos de sistemas, ambos estão em /etc/ e são:

  • hosts
  • resolv.conf.head
No hosts (não hosts.conf hein!) basta acrescentar:
192.168.1.48       mypi        localhost

Note que o endereço é mypi, o restante do nome o dnsmasq irá colocar para nós (iremos configurar isso la).

No resolv.conf.head (crie ele se não existir!) devemos acrescentar:
nameserver 192.168.1.48

E finalmente vamos alterar o arquivo do dnsmasq para que ele funcione:
Linha 62:

local=/lan.internal.server/

Linha 99:
no-dhcp-interface=eth0
Linha 119:
expand-hosts
Linha 128:
domain=lan.internal.server


Feito essas alterações nos arquivos de configuração de rede e do dnsmasq devemos alterar as configurações do nginx. Para configurar um novo vhost procure pelo arquivo do nginx, ele vai estar em /etc/nginx/nginx.conf.
Embaixo esta a configuração que tenho utilizado juntamente com o gunicorn. Atenção apenas as pastas (você deve colocar o caminho para seus arquivos estáticos [/media/www/static], onde estão os arquivos do seu programa [/media/www/home] e claro o ip:port na qual o gunicorn será executado [no meu caso 192.168.0.25:8080]). O resto pode ser deixado como padrão... lembrando que aqui, não ainda não ativei compactação via gzip no nginx (e vai ficar para uma próxima).


server {
    listen       80;
    server_name  mypi.lan.internal.server;


    location ~ ^/(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|images|flash|media|static)/

    {
        root   /media/www/static/;
        expires 1d;
    }


    location / {

        #root   /media/www/home/;
        #index  index.html index.htm;
    try_files $uri @proxy_to_app;
    }


location @proxy_to_app {

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://192.168.0.25:8080;
}
}


Depois disso é hora de configurar o supervisor para executar nosso processo do gunicorn que irá carregar nossa app em flask!!!

O bacana do supervisor é que com o comando echo_supervisord_conf > /etc/supervisord.conf você gera um arquivo de conf padrão! ;) bem simple não?
Entretanto apenas isso não garante que o gunicorn seja executado, por conseguinte devemos alterar o arquivo de conf criado acrescentando as seguintes linhas acima da explicação de como subir um programa usando o supervisor. Procure por [program:theprogramname] no arquivo e acrescente acima ou abaixo:


[program:gunicorn]
command=gunicorn app:app -b 192.168.0.25:8080
directory=/media/www/home
autostart=true
autorestart=true
redirect_stderr=True


Atenção para colocar o mesmo ip:port que especificado la no nginx hein!! Outro detalhe importante é o de colocar o nome do arquivo python que representa o app do flask. No meu caso, eu deixei o mesmo padrão que é descrito nos docs do flask, ou seja arquivo app.py, class name app, por isso do gunicorn app:app.

Pronto! Agora só subir todos os serviços e torcer pra tudo estar configurado corretamente!
systemctl enable dnsmasq
systemctl start dnsmasq
systemctl enable nginx
systemctl start nginx

systemctl enable supervisord
systemctl start supervisord


Bom, acesse a sua url padrão no navegador e você perceberá que não é carrega, não se esqueça de configurar o dns primário e secundário em sua conexão com a internet. Essa parte é importante caso seu roteador (assim como o meu) não permita configurar um dns interno.


Referências:

Friday, March 15, 2013

OpenBadges by Mozilla

 
Esse post será um tanto quanto curto, o tempo me escapa esse ano, 2013 realmente começou com tudo e nem mesmo quando terei férias terei o tempo necessário para atualizar sempre o blog, mas não o abandonei e nem mesmo esqueci.

Hoje vou falar de uma iniciativa da mozilla, o OpenBadges. Pra quem é ligado a fundação mozilla ja ouviu falar e até mesmo ja ganhou alguns badges. O objetivo é bem interessante, você realiza alguns exercícios e em troca ganha um bagde (adesivo) dizendo que você sabe daquele assunto ou tarefa.
Parece simples não??? E é... o que é necessário para começar??

Bom, para começar que tal fazer uma visita a página principal do OpenBadges ( http://openbadges.org/ ). La tem tudo explicado do funcionamento, mas darei um geral aqui.
Você precisa criar um backpack (é o local onde estarão armazenados seus badges), para criar um backpack é só acessar o site e criar uma conta ( http://backpack.openbadges.org/ ). Pronto!!!
Agora é só sair por ae coletando badges!!!


A própria mozilla disponibiliza alguns como é o caso dos badges para quem gosta do Mozilla WebMaker ( https://badges.webmaker.org/ ) ... ;D


É válido citar também o site do P2PU ( https://p2pu.org/ ), la você poderá conseguir dezenas de badges... 

Olha que legal, além de postar sobre o OpenBadges, um dos desafios que estou fazendo pede para assim que terminar você crie um blog post falando sobre o que foi realizado... e consequentemente aqui estou eu!! hahahahahahahaha

O desafio é bem simples: 
"This task is going to introduce you to writing a basic html document. But you'll do it on paper, using a pen, for fifteen minutes."

Ok, esse desafio é bem simples, mas não deixa de ser trabalhoso, afinal você tem que escrever um blog post inteiro sobre sua façanha... e colocar uma foto! :O

Enfim, bom divertimento a vocês todos...

Monday, December 10, 2012

Raspberry Pi: UI + web server!

Raspberry Pi: UI + web server!


Boas pessoal, desculpem a demora em postar conteúdo, fiquei afastado esse mês todo... não só devido ao trabalho e vida pessoal, mas também a projetos que estive fazendo! :D

Bom em um destes meus projetos, resolvi que iria gastar um tempo comprando um raspberry pi (é eu sei, ja deveria ter feito isso antes), mas eu estava relutando em comprar um, visto que ja possuo uma Pandaboard ES ( http://pandaboard.org/ ).
Mas enfim, comprei um, e vou colocar a minha primeira experiência com ele... do momento que comprei até onde parei, ou seja, um servidor web em casa.

Após ouvir muita coisa sobre o raspberry pi, desde uma galera usando pra educação até pra produção resolvi testar!
Vi muita gente falando onde comprar, que é difícil, e realmente é, muita gente esta atrás dessa plaquinha, assim como do arduino. Mas pra facilitar minha vida, decidi que não iria comprar apenas a placa, afinal é preciso muito mais do que apenas ela para rodar.
Entrei no site da Adafruit e comprei o starter kit deles ( starter kit ). Realmente o preço não é dos mais baratos, mas nada que um cartão internacional e uma conta do paypal não possam lhe auxiliar no pagamento.
Comprei e fiquei esperando (detalhe que no momento que escrevo o post 10/12/12 eles não possuem em estoque, mas fique de olho), 2 semanas depois chegou em casa o pacote. Tudo certo, vieram todos os items, em suma o que vem:

  • Raspberry Pi model B (pra ver a diferença entre o modelo A e B - http://elinux.org/RPi_Hardware);
  • Cartão Micro SD + Adapter de 4GB;
  • Caixa de acrílico da Adafruit! :)
  • Raspberry Pi  Badge... :) (eu colei o mesmo em cima da caixa de acrílico! ficou show olha a foto!)
  • E outras coisas + ...
Legal neh, chegou abri e blz! Agora você se pergunta o que fazer? Bom, eu não tenho um monitor / televisor com entrada HDMI e não estava afim de usar a saída RCA também, então eu adiquiri um conversor hdmi to vga no dealextreme. Ok, eu não esperei o pi chegar pra fazer isso, na verdade ambas mercadorias chegaram praticamente juntas.




PS: além de usar no pi, eu tenho uma pandaboard, como falei no começo do post, então esse conversor é pra usar nos dois!

O próximo passo é ligar tudo... conectei todos os componentes, mas ainda falta uma coisa pra sair rodado o pi... instalar o SO que você deseja usar.
Como início, fui testar o Occidentalis v0.2 que é uma distro modificada pela Adafruit da Raspbian “wheezy”.
Fiz o download e instalei no cartão SD seguindo os passos do tutorial que esta no link acima da distro. Iniciei o pi e bing! Estava la a UI do Occidentalis, bem simples e rápido... mas eu não gostei.
Comecei a olhar na net as opções e vi que era possível instalar o Arch Linux ARM, uma distro derivada da Arch Linux que funciona em processadores ARM e pra minha surpresa a pandaboard também é suportada! FTW \o/

Para instalar no pi, bem simples! Simples até demais, faça o download da imagem e grave a mesma no SD card, eu usei o image writer que ja vem pré-instalado no Linux Mint para fazer isso e foi de boa... Reiniciei novamente o pi, agora com o cartão sd e a instalação do arch e depois de uns 10 segundos eu tinha um shell linux pronto para usar!!

Agora o primeiro passo é atualizar seu Arch Linux... faça o login usando root : root.
O shell será será liberado, para atualizar o Arch Linux utiliza-se do pacman, então realize um:

$ pacman -Syyu

Isso fará com que todos os repos sejam atualizados e fará em seguida um update no sistema... aguarde vários minutos! Não se esqueça de estar conectado em uma rede de dados para isso, claro...

Depois de atualizar o sistema, minha sugestão é alterar a senha do root e criar um novo usuário!

Use o comando abaixo para alterar a senha do root!

$ passwd

E em seguida faça:

$ adduser

E siga as instruções... quase tudo pode ser o padrão mesmo... só não esqueça da senha!
Feito isso, você, assim como eu pode desejar ter uma UI para interagir mais facilmente (ou instalar por diversão mesmo!).
Eu segui os tutoriais na wiki do Arch Linux para instalar o LXDM + XFCE4 e deixar o pi +/- com a cara do meu desktop (não que isso fosse necessário, ja que ele será um servidor, mas mesmo assim...).

Antes de mais nada para executar qualquer UI em linux deve-se instalar o X Windows System. Para isso basta você executar:

$ pacman -S xorg-server xorg-apps xorg-xinit xorg-twm xorg-xclock xterm xorg-drivers

Isso vai garantir que o x server todo será instalado, assim como qualquer outros drivers e widgets necessários.

Depois vamos instalar o lxdm e xfce4:

$ pacman -S lxdm xfce4 xfce4-goodies sudo gedit

No meu caso eu ja instalei o sudo e gedit também, apesar do gedit ser um pouco pesado para carregar... ainda não testei pra ver se o emacs funciona de boa.

Pronto!!

Para executar o lxdm e xfce4 ao iniciar o pi, ainda precisamos alterar o arquivo /etc/lxdm/lxdm.conf e mudar a linha session=/usr/bin/startlxde para session=/usr/bin/startxfce4 .

Para editar o arquivo: 

$ sudo nano /etc/lxdm/lxdm.conf

E em seguida executar o systemd para ativar o serviço do lxdm:

$ systemctl enable lxdm.service

Reinicie o pi, agora você deve ter uma interface gráfica aparecendo, faça o login com o usuário que você criou e pronto!

Eu enfrentei um problema bem chato, meu monitor não esta suportando 100% o hdmi do pi, para isso bastar alterar a propriedade disable_overscan do arquivo de configuração do Arch Linux.
Execute:

$ sudo nano /boot/config.txt

Desabilite a linha (tire o # da frente), disable_overscan=1 . Além disso altere as propriedades do overscan logo abaixo, é tentativa e erro mesmo, coloque um valor e reinicie o pi pra ver se deu certo.

Seu startup inicial esta pronto... entretanto...

Quando comprei meu raspberry pi que vem no starter kit da Adafruit, notei que ele não possui conexão wireless (uma pena não??), mas isso pode ser remediado comprar um wireless module, olhei no site e achei esse: Miniature WiFi (802.11b/g/n) Module: For Raspberry Pi and more, comprei junto.

Mas para você ter uma interface bacana para interagir com o modulo é preciso instalar umas coisas a mais:

$ pacman -S networkmanager network-manager-applet xfce4-notifyd 
$ systemctl enable NetworkManager.service
$ systemctl start NetworkManager.service

Isso vai instalar e inicializar uns widgets bacanas para você controlar seu usb wireless e conetar na sua rede wifi sem precisar digitar comandos no shell!! :D
Por padrão o driver desse dispositivos usb que comprei vem por default ativado, bastando apenas a reinicialização do pi pra tudo funcionar.

Pra finalizar vamos instalar o nginx, que é um web server muito bom e rápido.

$ pacman -S nginx
$ systemctl enable nginx
$ systemctl start nginx

Se você quiser um web browser para rodar no seu pi, instale o midori, pois o firefox e chrome não são suportados na arquitetura x86 (bom pelo menos eles não estão listados no repo do arch linux como disponíveis para arm).

$ pacman -S midori

E é isso ae, por enquanto é isso... no próximo post vou mostrar como instalar o python e uWSGI para fazer seu web site rodar no pi!

falowaer




Sunday, October 21, 2012

Procurando objetivos no Trabalho


Procurando objetivos no Trabalho

Nos últimos meses tenho me deparado com uma dúvida, qual o objetivo do meu traabalho? Sim, afinal, porque trabalho na área de TI? E porque sou programador?
Pode parecer uma pergunta muito simples para alguns, ou muito difícil de responder para outros, mas a questão fica, você sabe o motivo do seu trabalho?

Durante minha defesa de TCC da pós-graduação, eu li muitos livros sobre motivação e times de alto desempenho, mas uma coisa que me chamou muita atenção nessas obras foi a falta de direcionamento em como encontrar os objetivos dos integrantes (ou pessoas) dos times. Talvez seja polêmico demais o assunto, foi como discuti com um amigo do trabalho: “Como saber os objetivos das pessoas, se muitas vezes nem elas mesmas sabem o que desejam?” Ou ainda pior, devemos ajuda-las a encontrar seus objetivos... Parece simples, mas como ajudar alguém encontrar um objetivo para trabalhar?


Tenho pensando muito e por conseguinte tentarei criar uma luz no fim do túnel para isso. Acredito que o primeiro ponto a se questionar é se a pessoa gosta do seu trabalho, você como líder tem a obrigação de verificar se o integrante do seu time gosta daquilo que faz ou apenas quer ganhar o pagamento no fim do mês. Acredito que chegar para a pessoa e perguntar é algo totalmente inútil, nem todos irão categoricamente afirmar para o chefe que não gostam, ou mesmo odeiam o trabalho que fazem, mas como podemos tirar isso das pessoas? Mas porque devemos descobrir se as pessoas gostam de seu trabalho? Esse ponto é importante caso a empresa espera que seus funcionários melhorem os métodos e processos utilizados ou mesmo criem novas situações de ganhos para a organização. Gostar do que se faz abre um leque de possibilidades e buscas para melhoria. Isso não significa que quem não gosta do trabalho, não perseguirá isto com afinco, entretanto o indivíduo que possui prazer no que esta fazendo tenderá a se esforçar mais para essa melhoria.

Para descobrirmos quais são nossos objetivos, acredito que primeiro devemos ter uma noção de quem somos e quais nossas características, para isso existem dezenas (e talvez centenas) de técnicas para se descobrir isso. Por existirem tantas técnicas muitas acabarão por darem resultados parecidos, algumas que utilizei em mim mesmo (gratuitas ou não) são demonstradas abaixo:


Descobrindo seus Pontos Fortes (Strength Finder).

Tem um livro que achei bem interessante (o qual um amigo me apresentou) chamado StrenghtFinder 2.0. Este livro vai lhe ajudar a descobrir quais são os pontos fortes das pessoas que o cercam e seus próprios. A partir daí podemos começar a analisar se o que fazemos é realmente direcionado a nossos pontos fortes ou “apenas estamos dando soco em ponta de prego”.

Isso não significa que descobrindo quais são os pontos fortes eles irão nos direcionar a nossos objetivos, muito pelo contrário, isso vai apenas nos dizer se o que fazemos no trabalho é algo que nossa personalidade pode absorver como simples e prazeroso. É lógico afirmar que ao realizarmos tais tarefas estamos seguros, temos a facilidade de assimilar o assunto e executar a ação necessária para a resolução do problema.

O livro não coloca quais tarefas são mais simples para cada perfil, entretanto ele apresenta um panorama geral em como cada ponto define algumas das atividades que procuramos exercer. Somos puxados a atividades onde nossos pontos fortes brilham.

Isso pode nortear sua decisão sobre o que perseguir em sua vida e como direcionar estudos e esforços.

Conforme eu disse, realizei o teste, e realmente os pontos fortes colocados pelo programa são muito (se não 100%) correlacionados com minha personalidade. Para se ter uma idéia, eu sou um cara competitivo, isso pode ser um ponto forte, como fraco, tudo dependerá de como utilizo essa informação na execução das minhas tarefas e no dia dia. Um detalhamento maior sobre meus pontos fortes e como eles são apresentados a você pode ser conferido aqui.


Keirsey Temperament Sorter - II (Personality Instrument).

Outro teste interessante e viável de se realizar é o Keirsey Temperament Sorter. Aqui a idéia é receber uma visão geral de como você age e do seu possível temperamento diretamente relacionado ao seu trabalho e sua vida.

“According to Keirsey Temperament Theory, there are four basic temperament groups which describe human behavior. Keirsey’s four temperaments are referred to as Artisans™, Guardians™, Rationals™ and Idealists™. These four temperaments can be further subdivided, often referred to as “Character Types”. There are four types of Artisans, four types of Guardians, four types of Rationals, and four types of Idealists.”

Todos estes testes dão a você uma visão de si mesmo e como observar aspectos de nossa vida que muitas vezes não nos damos conta pela falta de percepção que temos de nós mesmos.
A possibilidade de ambos os teste revelarem aspectos intrínsecos da sua psique e que são parecidos é muito grande. Realmente em meu caso ambos os testes deram resultados parecidos, na verdade um é complementar ao outro, mas se você olhar em detalhes, mostra um perfil da minha pessoal.


Eu completo meus objetivos?

Ambos os testes podem nos mostrar nosso perfil mas não mostrará quais objetivos podemos possuir ou obter, mas eles nos darão um guia para descobrir objetivos que poderiam estar ocultos.
Apesar de tudo, existe algo muito importante nestes objetivos ou em como alcança-los. Uma pesquisadora americana (Angela Lee Duckworth) “descobriu uma característica” que pode nos dizer se possuímos ou não a atitude mental suficiente para finalizar objetivos a longo prazo. Isso poderá influenciar diretamente o cumprimento ou não daqueles objetivos que traçarmos ou dicidirmos como corretos para nossa vida e trabalho.
Bem, ela nomeou esta nova característica como GRIT (Perseverança e paixão por objetivos a longo prazo), e seu significado transcrevo abaixo:

“Definimos grit como perseverança e paixão por objetivos a longo prazo. Grit implica em trabalhar arduamente em desafios, manutenção do esforço e interesse ao longo dos anos, apesar do fracasso, adversidade e plateaus de progresso. O indivíduo com essa característica aborda as realizações como uma maratona; A vantagem dele ou dela é a stamina. Considerando que a desilusão ou tédio são sinais para outros que é hora de mudar a trajetória e cortar as perdas, o indivíduo com grit permanece no curso.”

Descobrindo se nossa característica GRIT é alta ou não pode nos indicar o motivo da não conclusão de determinados projetos e objetivos. Mas isso não indica que possuímos uma desculpa, mas sim um ponto de atenção todas as vezes que não terminamos um objetivo, e isso pode nos forçar a não desistir. Afinal devemos utilizar nossos pontos fortes, aceitar nossas fraquezas (mas lutar contra elas mesmo assim).

No site da própria pesquisadora existe um teste online para que você possa verificar se seu nível de GRIT é alto ou não (é uma escala de 1 - 5). Eu recebi um valor de 2.88 no teste de grit, e se observarmos em meu perfil, verifico que possuo um ponto forte chamado Ideation, que tem como característica “... Driven by your talents, you may dream up new tasks to do ...”. Ou seja, todos meus objetivos mesmo os a longo prazo, devem ter tarefas curtas que não demandem muito tempo, pois caso contrário poderei abandonar a tarefa ou objetivo para buscar outras mais interessantes.

E agora?

Toda essa análise de um perfil é importante para nós conseguirmos idealizar possíveis objetivos a serem seguidos. Devemos lembrar ainda, que essa tarefa apesar de poder contar com a ajuda externa (no caso, testes, documentários, biografias e muito mais) é um trabalho totalmente interno e intensivo, que cada indivíduo deve realizar. A organização pode facilitar essa descoberta dando oportunidades de crescimento e inovação para cada um de seus colaboradores.


“We have a strong sense of why we exist and why we do what we do. We believe that our legacy – as a company and as individuals – should be to make a difference in the world around us.” - Think with Google

Uma filosofia na qual se basear é um fato importante para se criar objetivos, assim como o google tem sua filosofia (conforme ja falado em outro post), minha sugestão é que você tente criar a sua filosofia (mesmo que para isso você utilize pedaços das filosofias de outras pessoas ou organizações).



falowaer

Monday, September 17, 2012

Melhorando a performance de sistemas web.


Melhorando a performance de sistemas web.

Com a grande migração de muitos sistemas para a internet após o ano 2000, muitas técnicas foram propostas para a melhoria no processo de carregamento de sistemas web. Essas melhorias visam, claro, uma melhor performance de acesso para os usuários dos sistemas.
Nesse post irei tratar de algumas técnicas que são principais, de fácil identificação e que podem ser implantadas rapidamente. Um detalhe importante é que todas as informações colocadas aqui são as mais simples possíveis, por conseguinte se forem implantadas em ambientes de produção pode vir a ser necessário algum tipo de análise de segurança (não que todas irão precisar claro!). Por onde começar?


Um start interessante é instalar estas duas ferramentas, as quais irão proporcionar uma visão de como nossa página é carregada e sugerir melhorias a serem feitas:


Após isso, comece realmente a melhorar sua performance!


Minify your files!!!

A primeira técnica e que considero a mais simples de todas, é minificar e agrupar seus arquivos estáticos. Mas o que são arquivos estáticos? Eles são como páginas estáticas (Static Web Pages[1]), ou seja seu conteúdo não muda de acordo com o acesso. Os exemplos mais comuns são arquivos javascript, css e imagens!
Normalmente esses arquivos não são tratados para contemplar esse tipo de situação, e isso pode vir a se tornar um problema de payload[2] conforme vamos adicionando mais e mais bibliotecas, classes e imagens sem otimiza-los.
Algumas soluções para esse problema se resumem em minimizar manualmente os arquivos usando ferramentas como (estes são os top 4 na minha busca do Google) e posteriormente agrupando todos em 1 (um) só arquivo:

Javascript


CSS:


Dentre os outros milhões de ferramentas online, eles podem nos ajudar a melhorar a performance de nossa aplicação no que concerne no carregamento da bibliotecas e códigos que utilizamos, mas não são nem um pouco produtivos, pois devemos fazer manualmente essa cópia e compressão e ainda precisamos manter 2 (dois) arquivos (o original e o minificado).
Como melhorar isso? E sermos mais produtivos?

Podemos utilizar ferramentas automáticas que façam isso, alternativas é o que não faltam também. Particularmente conheço muito poucas ferramentas desse tipo em PHP, mas uma me chamou ultimamente:


A idéia aqui é a mesma, otimizar e automatizar a minificação dos arquivos estáticos, lembrando que ele não serve para imagens, mas sim para javascript e css.
Em outras linguagens temos alternativas ja incorporadas nos frameworks (que não é necessariamente o caso do Zend Framework[3], mas o minify pode ser usado em conjunto[4]), por exemplo em Django[5] temos um app chamado django-compressor[6] que faz a minificação e agrupamento dos arquivos automaticamente, sendo necessário apenas ativar o package.

Para imagens, podemos utilizar de alguns programas para compressão, alguns exemplos bem interessantes, sugeridos pelo Google são [7]:




GZIP[8] on the fly!

Outra técnica bastante utilizada em sistema/sites da web é de comprimir seus arquivos, aqui vale a máxima de que 10% de redução pode diminuir em muito o payload de seu usuário!
Vou dar um exemplo bem simples e surpreendente, eu utilizo a biblioteca ExtJs[9] que tem um arquivo .js de 1Mb! Isso mesmo, e é 1Mb ja minificado! Usando gzip diminuímos esse payload para 400Kb, ainda é muito? Pode ser, mais é um ganho de 50%. Ou seja 50% menos de carga que um usuário terá de carregar em cada acesso ao sistema.
Devo dizer que o gzip não serve apenas para arquivos estáticos, podemos comprimir todos os arquivos e nossas respostas AJAX[10] também, ou seja, todo nosso site será mais leve para o usuário carregar. O lado ruim? nosso servidor deve aguentar a carga para comprimir todos os dados antes de enviar de volta para nosso usuário.

Para habilitar o gzip em nosso servidor apache devemos apenas habilitar o módulo mod_deflate! Simples não? Claro que tem-se muitas configurações, mas de modo simplista devemos apenas executar em shell:

$ a2enmod deflate

Fazendo isso estamos prontos, todo o conteúdo do nosso site será compresso para cada requisição realizada. Outros servidores podem possuir outras configurações.
Em Django podemos habilitar a compressão via gzip sem precisar interagir com o servidor, para isso basta habilitarmos o middleware GZipMiddleware[11], fazendo com que nosso sistema use script’s em python para a compressão!




Finalizando por aqui...
Seus usuários agradecem, mesmo não sabendo disso... :D!

Estas são duas regras muito simples que podemos habilitar em nossos sistemas, fazendo com que a performance de carregamento seja melhorada.
No próximo post vou tratar sobre o varnish cache e cache headers no apache!








falowaer

Thursday, August 9, 2012

Fazendo um app no Heroku

Fazendo um app no Heroku



Fala pessoal?


Fiquei de colocar aqui no blog os passos os quais utilizei para fazer um currículo digital, pois bem... chegou a hora!


Como eu havia mencionado em uma postagem passada eu utilizei de algumas tecnologias, citarei todas com respectivos links:

  • python
  • virtualenv
    • Permite você criar ambientes separados em python, você pode escolher quais libs instalar, sem tê-las por todo o sistema. Funciona como um container para seu projeto.
  • flask
    • Um micro framework em python, bem simples e rápido, com baterias não inclusas. Mas com muitas baterias a disposição.
  • flask-assets
    • Extensão do flask (uma dessas baterias não inclusas), que permite você agrupar e minificar arquivos estáticos do seu app.
  • mongoengine
    • "The object-document mapper to connect Python and MongoDB". Vai lhe ajudar a melhorar a sua interface de conexão entre o mongohq e seu app!
  • jQuery
    • Se você ainda não usa esta perdendo muito!
  • twitter bootstrap
    • Conjunto de classes css e plugins jquery que vão lhe ajudar a deixar seu app mais bonito e funcional. É esse micro framework jquery é do pessoal do twitter.
  • font awesome
    • Fontes com ícones dos mais diversos, se você olhar não vai mais largar! ahhahahhahaha :D
  • git
    • Ferramenta de versionamento.
  • heroku
    • Nosso fornecedor de IaaS.
  • mongohq
    • Rodar o mongodb nas nuvens! Uhu!


Você pode estar se perguntando, "poxa vida, tenho de aprender tudo isso para colocar algo no ar la no heroku?".
Claro que não, o negócio é que eu quis experimentar um pouco mais, resolvi que iria colocar algumas coisas em um banco de dados noSQL, o que não é necessário.
Enfim, primeiro passo, foi criar localmente um ambiente (ok, não precisa ser apache pra isso, mas eu usei mesmo assim). O legal do flask e outros frameworks em python é que você pode subir um "web server" na linha de comando sem precisar configurar um apache da vida. Isso é um ponto positivo!

Pra colocar um site la no heroku é bem simples, só seguir esse tuto na página deles: Getting Started with Python on Heroku.

Depois de seguir estes passos bem simples do heroku e claro ter feito sua aplicação/site/whatever você pode ativar o mongohq. Para isso é só entrar na interface do heroku e solicitar a ativação do mongohq para sua nova app.
O heroku vai lhe retornar as informações de conexão com o banco, então você os coloca na aplicação. Como eu estou usando flask e o mongoengine, para cadastrar o banco de dados foi simples:




app = Flask(__name__)
app.config["MONGODB_DB"] = "app5632158"
app.config["MONGODB_USERNAME"] = "rdenadai@gmail.com"
app.config["MONGODB_PASSWORD"] = "yhgb2398"
app.config["MONGODB_HOST"] = "staff.mongohq.com"
app.config["MONGODB_PORT"] = "10050"
db = MongoEngine(app)



Bem fácil não? Ainda estou usando o flask-assets que é uma extensão bem bacana que permite você juntar os arquivos css/js em um único só, melhorando assim a performance da sua app na hora de baixar os arquivos estáticos do servidor!

assets = Environment(app)
js = Bundle('jquery.js', 'default.js', 'twitter-bootstrap.js', filters='jsmin', output='gen/packed.js')
css = Bundle('default.css', 'normalize.css', 'font-awesome.css', 'twitter-bootstrap.css', filters='cssmin', output='gen/packed.css')
assets.register('js_all', js)
assets.register('css_all', css)

Feito isso no app.py do seu app, pra utilizar é só ir nos templates e colocar:



{% assets "css_all" %}
<link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
{% endassets %}



{% assets "js_all" %}
<script type="text/javascript" language="javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}

Fazendo estes passos, que achei bem simples (depois que você aprende são bem simples mesmo!), coloquei no ar um app no heroku!


Só não vá correndo contar isso pro seu chefe...

Falowaer