05/08/2014

E se...



Já imaginou o mapa mundi com denominações diferentes?
E se os nomes dos continentes, países, ilhas e oceanos fossem nomes de distribuições GNU/Linux, empresas ou projetos de software livre, como seria? 
Já pensou nessa possibilidade ? 
O mapa deveria ser bem mais atraente se fosse dessa maneira, concordam ?



Acho que seria uma boa aventura navegar nas águas do Oceano GNU, ou passar um final de semana na Ilha Firefox OS. 

08/07/2014

Phonegap Workflow

Venho utilizando Phonegap a algum tempo fazendo alguns projetos pessoais e alguns protótipos comerciais e gostaria de dividir uma maneira bem prática para se trabalhar com essa tecnologia.

Node.js

Antes de tudo a instalação do node junto do npm é algo essencial. O npm, que  significa Node Package Manager, uma espécie de apt-get para pacotes node foi a  ferramenta escolhida para ser usada atualmente como instalador do phonegap.

Site oficial Node.js e NPM.

Após instalar node e npm instale o phonegap/cordova. Para isso em um terminal faça:

npm install -g phonegap cordova

A partir daí para criar um projeto phonegap basta executar algo como:
 
phonegap create --name AppName --id com.yourcompany.app-name app-name
cd app-name

Obs.:

Caso tenha instalado o node como root adicione um sudo antes do comando.

Obs. 2:

Para garantir que a instalação de alguns pacotes ocorra com sucesso não esqueça de instalar o pacote build-essential no linux. Para isso execute o comando:

sudo apt-get install build-essential

Grunt.js

Uma ferramenta bastante utilizada internamente pela maioria das ferramentas que serão apresentadas a seguir utiliza o Grunt.js. No site o grunt é definido em uma palavra: automação. Ou seja, minificação dos arquivos, compilação, teste unitário, linting. Enfim, qualquer tarefa que possa ser colocada em forma de script.

A instalação é feita através do comando:

npm install -g grunt

Yeoman

Yeoman te ajuda a iniciar novos projeto, receitando boas práticas e ferramentas para te ajudar a se manter produtivo. Criada por muitos dos melhores nomes do mundo Javascript como Addy Osmani, Sindre Sorhus, Paul Irish, Eric Bidelman, dentre outros, vai ser uma ferramenta essencial para automatizar a criação dos componentes, no nosso caso, do Angular.js.

npm install -g yo

Angular.js

Como o Phonegap não provê MVC ou similar, é necessário alguma ferramenta para trabalhar mais organizadamente com Javascript. Para isso eu uso Angular.js.
A equipe do yeoman criou um pacote npm (generator-angular) para fazer o scaffold (esqueleto) de um projeto Angular.js, além de criar Controllers, Routes, Services, etc. Para usar basta instalar através do comando:

npm install -g generator-angular

Em seguida execute o comando dentro do diretório do seu projeto:

yo angular [app-name]

Esse comando irá criar o diretório app que irá conter os arquivos do seu aplicativo, separado do diretório www, o qual é originalmente usado pelo phonegap.

Para usar o live preview, onde sua página é recarregada sempre que houverem alterações no código-fonte, execute o comando:

grunt serve

Para compilarmos o conteúdo de app para www e depois gerar por exemplo um arquivo apk para usar no Android precisamos instalar o grunt-angular-phonegap. Para isso basta executar:

npm install grunt-angular-phonegap --save-dev

Para adicionar a plataforma de desenvolvimento utilize o comando:

cordova platform add [platform]

Onde plataforma pode ser android, ios, wp7 or wp8.

A lista completa de comandos pode ser encontrada em grunt-angular-phonegap.

Bower

Com a mesma ideia do npm, mas para pacotes da web, como Twitter Bootstrap, jQuery, FontAwesome, Backbone, enfim quase todos os pacotes de ferramentas da web já podem ser encontradas nas repositórios do Bower. A instalação é feita através do comando:

npm install -g bower

 

Ionic

Uma boa opção quando se quer uma bonita e eficiente interface gráfica, unindo forças com Angular.js de forma integrada. Isso é o Ionic, uma ferramenta livre para o desenvolvimento de aplicativos híbridos em HTML5.
Para instalar o ionic no nosso projeto faça:

bower install ionic

Ripple

Para um desenvolvimento mais otimisado uso um emulador chamado Ripple, desenvolvido nos laboratórios da Apache (a mesma que criou o Cordova), que cria um ambiente simulando um smartphone no browser. Você pode simular as várias telas para verificar a responsividade, simular rede 3G, 4G, Wi-Fi; simular geolocalização, uso de banco de dados Sqlite, entre outras coisas. Dito isso não perca tempo desenvolvendo em emuladores como do Android, que leva bastante tempo para subir as alterações, possui um console limitado para esse tipo de aplicação, entre outras dores de cabeça. Sendo assim utilize o emulador somente para testes mais definitivos.


A instalação é feita no Navegador Chrome através da url https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

HTML5 Mobile Apps: PhoneGap GeoLocation

https://www.youtube.com/watch?feature=player_embedded&v=V97j188X8Wg

Conclusão

É certo que é um número grande de ferramentas para construir um simples app, mas ao mesmo tempo se for um aplicativo muito grande e complexo vale a pena usar todas as ferramentas para tornar o desenvolvimento mais eficaz.

Caso você tenha sentido falta de exemplos devo dizer que seria bem complicado fazer um resumo de todos os exemplos, isso porque cada ferramenta descrita acima possui uma documentação extensiva e bem prática, onde são explorados vários cenários.

Dê ênfase no estudo do Phonegap, Angular.js e Ionic. Essas são as ferramentas que você necessariamente deve conhecer. As outras apenas auxiliam no desenvolvimento e são opcionais.

04/07/2014

Editor de Texto Atom

Recentemente o Github lançou seu editor de texto Atom, um editor bastante poderoso escrito com tecnologias web (HTML, CSS, Javascript) mas que funciona como aplicativo desktop nativo. Se isso parece familiar e lembra o node-webkit você está enganado.
Ele segue o mesmo princípio mas o Github lançou também o atom-shell, o que permite a criação desse tipo de aplicativo.

Integração com Node.js

Tudo aquilo que você faz com node em linha de comando pode ser integrado, através do atom-shell, no seu Atom, ou seja, acesso ao sistema de arquivos, executar ferramentas externas, iniciar serviços, etc. Quer dizer qualquer módulo do Node.js.

Design modular

É fácil criar um módulo e integrar ao Atom. E mais, é possível enviar as alterações para que outras pessoas possam usufruir do seu módulo através do canal Packages.

Instalação

Inicialmente o Atom só podia ser instalado em máquinas com arquiterura 64bit, mas isso já foi contornado com a criação de relases que suportam 32bit.

Para instalar a partir do código-fonte siga as instruções aqui.

Caso você use Ubuntu a equipe do WebUpd8 criou um ppa. Para instalar siga os passos abaixo:

sudo add-apt-repository ppa:webupd8team/atom
sudo apt-get update
sudo apt-get install atom


<http://www.webupd8.org/2014/05/atom-text-editor-ubuntu-ppa-update.html>


Dicas de utilização

Ao instalar vá até as preferências e defina como você deseja que seu editor se
comporte, instale pacotes e temas. Ele fica em File → Preferences ou Ctrl + , (Control e vírgula).







Para ter acesso a um painel de comando onde é possível encontrar tudo que dá para fazer com o Atom acesse o menu Packages → Command Palette → Toggle ou simplesmente Ctrl + Shift + P. Digite o que procura na caixa de texto ou navegue para encontrar.




Caso você esteja escrevendo em Markdown e queira pré-visualizar seu texto basta ir no menu Packages → Markdown Preview → Toggle Preview ou apenas Ctrl + Shift + M.


Para abrir um arquivo rapidamente use o atalho Ctrl + T, em seguida digite o nome do arquivo que deseja abrir.


Pacotes

Um pacote que eu considero essencial é o linter. Ele junto com os pacotes lint
de cada linguagem dão dicas em tempo real de erros, warnings ou melhorias do seu código.

Para instalar vá até as Preferências (Ctrl + ,), clique em Packages no menu esquerdo e busque pode linter. Junto com ele instale os pacotes lint das linguagens que você utiliza (a lista pode ser encontrada no site do linter acima).

Temas

Fazendo uma busca rápida em Themes, encontrei um tema muito bom chamado Seti. Para o syntax highlight eu uso o Monokai.


12/05/2014

Configurando placas de vídeo Nvidia no Ubuntu 10.04

Uma das facilidades dos linux em geral é que quando se troca algum hardware, ele instala e configura automaticamente um drive para que a mesma possa funcionar adequadamente. Entretanto quando se coloca uma placa de video, normalmente o drive instalado não permite extrair máxima performance da mesma. Então é necessário instalar o drive do fabricante específico daquela placa para que a mesma funcione adequadamente.


1- Inicialmente devemos baixar o drive compatível com a placa que estamos usando, que pode ser encontrado aqui.

1.1- caso exista na máquina algum drive NVIDIA que tenha sido instalado automaticamente ou instalado anteriormente remova o mesmo usando:

sudo apt-get remove –purge nvidia-*

2- devemos ativar o modo terminal (ctrl+alt+N podendo N variar de 1 a 6), e desligar a interface gráfica, através de um dos seguintes comandos:

sudo /etc/init.d/gdm stop 
sudo /etc/init.d/lightdm stop

Perceba que não adianta mudar para uma das interfaces de console sem parar o serviço da interface gráfica, pois o drive não instalará enquanto a mesma estiver ativa.

3- entre na pasta onde está o drive, altere a permissão do arquivo para execução, e execute o instalador através dos comandos:

sudo chmod +x nomedoarquivo.run 
sudo sh ./nomedoarquivo.run

4- começa agora a execução do instalador em si, que se comporta como os instaladores padrão. Exibe termos de uso, opção de instalação completa ou personalizada e outras coisas. siga as instruções do instalador para instalação padrão.

 Agora é só aproveitar os recursos habilitados. Perceba que após a instalação você estará apto a usar todas as funcionalidades da placa de video, incluindo resolução de tela máxima, alguns programas como Compiz (Gerenciador de Janelas para Servidor X), e outras ferramentas de vídeo e da placa de vídeo, como por exemplo programação em GPU(CUDA) existente nas placas NVIDIA.


Esse tutorial foi enviado pelo leitor Macedo de Araújo, que fez experimentos em seu equipamento e resolveu compartilhar a solução com todos nós. Software Livre é conhecimento compartilhado.