Configurando o Ambiente de Desenvolvimento – Tutorial Android 1

Padrão

Desde o último post que explicava a configuração do ambiente de desenvolvimento para Android, tivemos pelo menos uma mudança bem drástica. Se antes utilizávamos o Eclipse, hoje utilizamos o Android Studio, uma versão da poderosa IDE IntelliJ IDEA, desenvolvida pela JetBrains.

Configuração no Windows

O primeiro passo para a instalação do ambiente no Windows, é o download da JDK (Java Development Kit). Ela nos fornecerá a base de ferramentas para o desenvolvimento Java, que será utilizada também para o desenvolvimento dos apps Android também. Você pode baixar a JDK no site da Oracle. A instalação deve ocorrer sem problemas.

O próximo passo consiste em baixarmos o Android Studio. Após baixar o .exe bundle (que já contém os itens básicos de SDK e emulador), basta seguir o procedimento de instalação normalmente como qualquer outro aplicativo.

O último passo é exportarmos as variáveis de ambiente JAVA_HOME ANDROID_HOME, para que possamos, quando necessário, também executar builds e comandos a partir do console. Primeiramente vamos exportar a ANDROID_HOME. Caso você não tenha alterado o local durante a instalação do Android Studio, o valor deve ser:

%LOCALAPPDATA%\Android\sdk

Em seguida, vamos exportar a JAVA_HOME. Novamente, se você não alterou o local da instalação do Java, o valor deve ser:

%ProgramFiles%\Java\jdk1.8.0_111

No momento que escrevo este post, a última versão do Java é a 8, revisão 111. Caso a versão que você instale seja outra, ajuste o caminho de acordo.

Por fim, vamos adicionar os binários ao Path do sistema, para que sejam acessíveis através do console. Adicione ao Path as entradas %ANDROID_HOME%\tools%ANDROID_HOME%\platform-tools%JAVA_HOME%\bin.

Para testar, valide que os comandos adbjavac são acessíveis no console.

Durante a instalação do Android Studio, também deve ter sido instalado o HAXM (caso o seu processador seja compatível). O HAXM permitirá que vocẽ execute o emulador do Android com excelente desempenho. Outra boa opção de emulador é o Genymotion, porém para usos gerais, o emulador que acompanha a SDK do Android é suficiente.

Por fim, opcional mas recomendado, instale o Git, que é hoje a ferramenta de versão mais utilizada.

Configuração no Linux

No Linux, por possuirmos um gerenciador de pacotes, a coisa fica um pouco mais fácil. Caso você esteja utilizando o Ubuntu / Linux Mint, para preparar nosso ambiente, basta instalar os seguintes pacotes:

sudo apt-get install lib32z1 lib32ncurses5 lib32stdc++6 openjdk-8-jdk qemu-kvm libvirt-bin ubuntu-vm-builder bridge-utils

Caso esteja utilizando o Fedora, os pacotes são:

sudo dnf install glibc.i686 glibc-devel.i686 libstdc++.i686 zlib-devel.i686 ncurses-devel.i686 libX11-devel.i686 libXrender.i686 libXrandr.i686 java-1.8.0-openjdk-devel qemu-kvm

Outras distribuições podem ter estes pacotes com outros nomes, mas uma rápida busca pode trazer os correspondentes. O Linux não utiliza o HAXM para aceleração dos emuladores x86 – para isso, temos o KVM, um mecanismo de virtualização ligado ao kernel (caso o seu processador suporte).

Em seguida, vamos baixar o Android Studio. Para Linux, o arquivo tem extensão .tar.gz e deve ser extraído para alguma pasta (como por exemplo, ~/Android). Feito isso, basta executar o arquivo studio.sh que encontra-se dentro da pasta bin. Na primeira execução, serão baixados os pacotes necessários para a SDK. Para encerrar, selecione no menu Configure a opção Create Desktop Entry para facilitar a execução do Android Studio a partir do seu menu de aplicativos (seja UnityGnomeKDE, etc.)

O último passo é exportarmos a variável ANDROID_HOME e colocar os binários no Path. Para isso abra o arquivo ~/.bashrc ou, caso esteja utilizando o zshell, ~/.zshrc, e adicione as seguintes linhas. Caso tenha modificado o local da instalação da SDK do Android, ajuste o caminho:

export ANDROID_HOME="$HOME/Android/Sdk"
export PATH="$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools"

Por fim, é opcional porém recomendada, a instalação do Git para controle de versão dos nossos projetos.

Configuração no OSX

No OSX (Mac), a instalação é semelhante a que fizemos para o Windows. Primeiramente, baixe a JDK do site da Oracle. A instalação deve ocorrer sem maiores problemas, bastando seguir o wizard com o passo a passo da instalação.

Em seguida, baixe o Android Studio. A partir do arquivo .dmg, a instalação é tranquila, seguindo o padrão para outros aplicativos do Mac. Ao executar pela primeira vez, as ferramentas serão baixadas e o HAXM será instalado.

O último passo é a configuração das variáveis de ambiente. Contando que os caminhos padrão tanto do Java quanto da SDK do Android não foram alterados durante a instalação, adicione o seguinte conteúdo ao arquivo ~/.bash_profile (caso o arquivo não exista, crie-o).

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$JAVA_HOME/bin:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

Por último, opcionalmente mas fortemente recomendado, instale o Git (opte por utilizar o Homebrew, para instalar a versão mais recente).


E é isso! Aguardem os próximos posts, pois começaremos a colocar a mão na massa 🙂

Exportando Assets de um PSD para Apps (para não-designers como eu)

Padrão

E aí pessoal, beleza?

Bom, hoje fugindo um pouco de programação, vamos para um assunto de muitíssima utilidade: você pegou aquele PSD maneiro com o design do seu app, mas o designer esqueceu ou não pode te gerar os assets no momento… e agora José? Foi esse o meu caso recentemente e, como um ser rústico em se tratando de arte gráfica digital, cuja maior proeza é redimensionar uma imagem usando o Paint (sim, todas as imagens do blog são editadas no PAINT!), bate aquele desespero.

Bom, no meu caso, precisei pesquisar um bocado e, no final, até que o Photoshop faz algumas mágicas pra gente. Aqui estou usando a versão CC 14.2 do Photoshop… se não me engano, essa funcionalidade que vou mostrar apareceu na versão 14.1 (não faço ideia de como funciona em outras versões… se um designer leitor souber, fique a vontade pra entrar em contato que atualizamos o post :)).

Tendo em mãos o seu PSD, você vai abrir e, antes de mexer qualquer coisa, vai em Arquivo -> Gerar -> Recursos de imagem e certifique-se que a opção está marcada!

Captura de tela 2014-08-06 20.18.47

Feito isso, é só alegria. Agora, você pode ir até as suas camadas (ou layers) e renomeá-las, por exemplo, para imagem.png ou imagem.jpg. Existem uns padrões aí nessa nomenclatura para gerar assets de diferentes tamanhos automaticamente (por exemplo retina e normal, no caso do iOS). Um post mais detalhado sobre o assunto pode ser encontrado aqui.

Uma dica que eu, totalmente leigo não sabia, era como mesclar duas camadas pra exportá-las numa mesma imagem. É só segurar o Ctrl para selecionar as camadas que você deseja agrupar, clicar com o botão direito e selecionar a opção Grupo a partir de camadas. Depois, é só dar o nome do recurso a esse grupo que ele criou.

Complementando aqui a dica, recentemente eu descobri um conversor de resources de iOS para Android. Não sei vocês, mas a maioria dos designers que já trabalhei estão acostumados a gerar os resources para iOS, com a nomenclatura @2x para imagens retina e uma outra versão da imagem (por exemplo menu@2x.png menu.png). Para simplificar o nosso trabalho e o trabalho dos designers, achei no Github um projeto chamado ios2android, que nada mais é um script que, usando o ImageMagick, converte esses recursos para Android, redimensionando-os na proporção correta e criando as pastas drawable-hdpidrawable-mdpidrawable-ldpi, etc. Se tiver a versão pra iPad da imagem, ele converte pras dimensões de tablets Android também. Uma maravilha. O link do projeto é este.

As minhas impressões sobre esse script: como ele usa shell script, no Windows você precisa instalar o Cygwin (lembrando de adicionar o pacote do ImageMagick). No Mac, via Homebrew (conforme especificado na própria descrição do repositório), é bem simples (ele foi pensado pra rodar no Mac mesmo). Já no Linux, que tecnicamente seria de boa também, tive o problema de que as imagens ficaram com metade do tamanho que deveriam ficar. Eu não manjo quase nada de shell script… caso alguém saiba e consiga investigar o motivo disso acontecer no nosso amigo Linux, faça um pull request lá no projeto e contribua com o Open Source! 🙂

Bom pessoal, é isso! Fica a dica! 😀

Tutorial Android 4 #1 – Montando o Ambiente de Desenvolvimento

Padrão

Android é um sistema operacional móvel que roda sobre o núcleo Linux. Foi inicialmente desenvolvido pela Google e posteriormente pela Open Handset Alliance. O Android permite aos desenvolvedores escreverem software na linguagem de programação Java controlando o dispositivo via bibliotecas desenvolvidas pela Google. Hoje em dia, milhões de celulares e tablets utilizam o Android como sistema operacional.

Continue lendo

Diretrizes da Nova Interface Metro

Padrão

O novo Windows 8 trará consigo um novo conceito de interface, citado pelos designers da Microsoft como uma linguagem de design, conhecido como Metro. Esse novo conceito de interface já se apresentou, um pouco discreto convenhamos, no Windows Phone 7. Porém, a tendência é que com a chegada do novo sistema operacional da Microsoft, ele venha dominar os novos aplicativos tanto para desktops, quanto para tablets e smartphones.

Nesse post vamos conhecer os principais conceitos para desenvolver utilizando esse novo conceito de interface, que possivelmente venhamos a utilizar nos próximos posts da série sobre Windows Phone.

O desenvolvimento de interfaces Metro guia-se a partir de 5 pontos principais:

  • Leve e Simples. Ao desenvolver, concentre-se em tarefas primárias, utilizando a famosa metodologia do “mais com menos” (pouco esforço do usuário para ter acesso a vários recursos, com uma interface limpa). Procure utilizar itens espaçados, simplificando a interface e aproveitando mais o uso da tela.
  • Tipografia. Concentre-se em utilizar fontes não somente legíveis, como bonitas esteticamente, balanceando o uso de negritos e com os tamanhos da fonte, respeitando uma hierarquia de conteúdo.
  • Movimento. Interface ágil e rica em movimentos. A transição entre as telas de interface, segundo essa diretriz, é tão importante quanto o próprio design da interface. Crie o sistema com animações, e não somente transições simples.
  • Conteúdo. Reduza ao máximo itens na tela que não sejam conteúdo. A navegação deve ocorrer pelo próprio conteúdo em si.
  • Seja conciso. Projete a interface antes de começar a fazer. Seja autêntico. Sem firulas. Conteúdo de qualidade faz a interface ficar mais bonita.

Principalmente em se tratando de aplicativos móveis (tablets e smartphones), a Microsoft quer dizer a nós desenvolvedores que não devemos simplesmente converter um aplicativo de Android ou iOS para Windows Phone sem modificar a sua interface. Ela quer que nos adequemos ao seu padrão, para diferenciar o Windows Phone.

É um desafio. Será que vale a pena? Talvez. Eu estou seriamente disposto a gastar algumas fichas nisso. Aguardem os próximos posts 😉

Montando um Ambiente de Desenvolvimento PHP no Windows (AMP)

Padrão

Olá pessoal! Neste post veremos como montar um ambiente de desenvolvimento para PHP. Pra quem não conhece, o PHP é uma das linguagens mais utilizadas para o desenvolvimento de sites e sistemas para a web.

O ambiente básico de desenvolvimento para PHP é composto de um servidor (Apache HTTP), o interpretador da linguagem PHP e o banco de dados MySQL. Esse ambiente é conhecido como AMP. É este o pacote básico fornecido pela grande maioria dos serviços de hospedagem hoje. E é esse ambiente que veremos como montar e configurar, para que você possa começar a desenvolver seus aplicativos e sites usando PHP.

O Servidor HTTP Apache

O primeiro passo é instalar o servidor HTTP Apache. No momento em que este post é escrito, a última versão estável é a 2.2. Vamos até este endereço e vamos baixar a versão para Windows com suporte a criptografia (Win32 Binary Including OpenSSL 0.9.8r (MSI Installer)). O arquivo tem aproximadamente 5,5Mb. Após concluído o download, teremos o nosso instalador:

Vamos agora instalar o servidor. A instalação deve ocorrer sem maiores problemas, devendo apenas atentar para a tela com as configurações do domínio e porta. Como estamos instalando para uso local, estes parâmetros não são muito importantes (com exceção da porta). Aqui temos uma sugestão de preenchimento, com valores fictícios nos dados do servidor e utilizando a porta 80.

Na tela seguinte, selecione a opção Typical e avance. Na próxima tela é onde devemos selecionar o local onde o servidor será instalado. Se você está utilizando o Windows Vista ou 7, recomendo que instale em algum local fora da pasta padrão (Program Files) para evitar problemas de permissão e acesso como usuário administrador. Neste exemplo, instalarei o servidor em C:\apache.

Avance e clique em Install para iniciar a instalação. Caso sejam exibidas algumas mensagens de erro, ignore por enquanto. Após a instalação, você deverá ter um ícone ao lado do relógio, indicando que o servidor foi instalado corretamente.

Para verificar se a instalação ocorreu corretamente, verifique se o ícone ao lado do relógio está com um “play” de cor verde. Caso positivo, abra seu navegador e digite localhost/. Caso apareça uma mensagem indicando que não foi possível exibir a página, ou mesmo uma página em branco, é sinal que o serviço não está funcionando corretamente. Muito provavelmente isso ocorreu devido a porta 80 já estar em uso (o Skype, por exemplo, utiliza essa porta). Para modificar esta configuração, vá até a pasta onde o Apache foi instalado, entre na pasta conf e abra o arquivo httpd.conf. Faça uma busca pela linha que contém Listen 80. Este é o valor da porta configurado. Modifique este valor, por exemplo para 81. Salve o arquivo, vá até o ícone ao lado do relógio, clique sobre ele e selecione Apache 2.2 -> Restart. O ícone deverá indicar que o servidor está rodando (verde). Abra o navegador e digite localhost:81. A mensagem It works! deverá ser exibida. Lembrando que essa modificação só é necessária caso você tenha problemas ao executar na porta 80.

Colocando o PHP em Ação

O próximo passo é realizar a instalação do PHP e configurá-lo junto ao servidor Apache. Vá até o site do PHP aqui para acessar os downloads para Windows. No momento em que este post é escrito, temos a versão 5.2 compatível com o Apache. Assim, navegue até a área da página relativa a essa versão e baixe a versão VC6 x86 Thread Safe em formato Zip (o download tem aproximadamente 10Mb). Ao concluir, teremos o arquivo php-5.2.xx-Win32-VC6-x86.zip (com o xx representando a versão do PHP). Vamos extrair a pasta para C:\php5, ficando o seu diretório assim:

Bom, agora com o PHP descompactado, o primeiro passo é adicioná-lo ao path do sistema. No Windows XP, clique com o botão direito sobre Meu Computador e selecione Propriedades, selecionando a aba Avançado. No Windows Vista / 7, clique com o botão direito sobre Computador e selecione Propriedades. Na tela seguinte, selecione a opção Configurações avançadas do sistema. Agora, clique sobre o botão Variáveis de Ambiente. Na área Variáveis do sistema, procure pela variável Path e clique em Editar. Ao final do conteúdo, adicione um ; e o local onde está a pasta do PHP. Ficará assim:

Confirme as alterações. O próximo passo é criarmos o arquivo de configuração do PHP. Dentro da pasta do PHP, procure pelo arquivo php.ini-recommended. É através dele que teremos a base para o nosso arquivo de configuração. Faça uma cópia deste arquivo, renomeando-o para php.ini. Agora, edite-o no bloco de notas e procure pelas linhas ;extension=php_mysql.dll e ;extension=php_mysqli.dll. Retire os ponto e vírgulas antes de extension nessas duas linhas e salve o arquivo. Agora vamos configurar o Apache para trabalhar com o PHP. Vá até a pasta do Apache e abra o arquivo httpd.conf que está dentro da pasta conf. Procure pelo trecho

    DirectoryIndex index.html

e altere para

    DirectoryIndex index.html index.php

Ao final do arquivo, adicione ainda as linhas

LoadModule php5_module "c:/php5/php5apache2_2.dll"
AddType application/x-httpd-php .php
PHPIniDir "c:/php5"

Salve o arquivo e reinicie o Apache pelo ícone ao lado do relógio. O ícone deverá ficar verde novamente. Agora, vamos testar se o PHP está funcionando corretamente. Abra um editor qualquer e digite o seguinte código:

<!--?php phpinfo(); ?-->

E salve-o como index.php. Agora, copie-o para a pasta htdocs dentro do Apache e exclua o arquivo index.html que está lá. Vá ao seu navegador e digite localhost (ou localhost:<número da porta>, caso você tenha modificado). O resultado deverá ser o seguinte:

Se essa página com informações sobre o PHP aparecer, é sinal que ele está instalado corretamente.

Instalando o MySQL

Agora nos falta instalar o nosso banco de dados, que irá armazenará os dados de nossos aplicativos e páginas em PHP. Aqui no site do MySQL, vamos baixar a versão Community que neste momento se encontra na versão 5.5. Baixe o instalador (MSI Installer) de acordo com a arquitetura do seu Windows (32 ou 64 bits). Após a conclusão do download, execute o instalador.


Avance e selecione a instalação Típica e vá avançando. Ao final deixe marcada a opção para iniciar o assistente de configuração. Na tela de configuração, avance e marque a opção Standard Configuration.

Na tela seguinte, marque a opção para incluir o diretório bin do MySQL no Path do sistema e avance. Na tela seguinte será pedido a senha do usuário do administrador do MySQL. Coloque o que achar conveniente e avance ou desmarque a opção Modify Security Settings para deixar o usuário administrador sem senha (não recomendado). Avance e clique em Execute.

Clique em Finish para completar o processo. Agora é necessário realizar algumas configurações no PHP. Vá até a pasta e abra o arquivo php.ini. Procure pelos parâmetros mysql.default_usermysqli.default_user e coloque o valor root neles. Salve o arquivo e reinicie o Apache.

Se o processo foi completado sem erros, o seu ambiente já deve estar funcionando corretamente. Porém, vou incluir um passo extra opcional para gerenciar seu banco de dados.

Instalando o PHPMyAdmin (opcional)

O PHPMyAdmin é uma ferramenta web para o gerenciamento do banco de dados MySQL. No momento em que escrevo o post, a versão mais recente é a 3.4.8. Entre no site e baixe o arquivo phpMyAdmin-3.4.8-all-languages.zip. Após o download, descompacte o arquivo e remomeie a pasta para phpmyadmin. Após isso, mova-a para a pasta htdocs dentro da pasta de instalação do Apache.

Após isso, basta ir ao seu navegador e digitar localhost/phpmyadmin (ou colocando a porta, caso você tenha mudado).

Pronto! No caso ele deu uma chiada pela ausência de uma extensão (mcrypt, para criptografia), mas deve funcionar normalmente.

Bom, espero que o tutorial tenha sido útil a vocês! Até a próxima! 🙂

Out-of-series #4 – Configurando a biblioteca Allegro no Code::Blocks (Windows)

Padrão

Depois de postar sobre a configuração da biblioteca Allegro no Ubuntu, comecei a receber muitas visitas procurando sobre a configuração da biblioteca Allegro no Code::Blocks, versão Windows. Então preparei esse post pra explicar, mostrando que é bem simples (até mais simples que no Ubuntu).

Bom, pra quem ainda não tem o Code::Blocks instalado, só dar um pulinho ali na seção downloads e baixá-lo. Para este tutorial, utilizarei a versão 10.05 que, no instante que escrevo este post, é a versão mais nova.

A instalação deve correr sem problemas. Em seguida, devemos baixar os arquivos da biblioteca Allegro aqui. Demonstrarei a instalação da versão 4.2.3, que no momento que escrevo o post, é a última versão estável. Após baixar, descompacte os arquivos em algum lugar seguro (por exemplo em C:). No meu caso, os arquivos estarão em C:Libs.

Clique para ampliar

Após ter instalado o Code::Blocks e descompactado os arquivos no local correto, vamos abrir o Code::Blocs, e ir até o menu Settings -> Compiler and debugger… e em seguida clicar na aba Search directories. Na su-aba Compiler, vamos clicar no botão Add e selecionar a pasta include, lá dentro do diretório onde descompactamos os arquivos. No meu caso, ficou C:Libsallegro-mingw-4.2.3include. Na sub-aba Linker, vamos adicionar o diretório lib da mesma pasta. No meu caso, ficou: C:Libsallegro-mingw-4.2.3lib.

 

Clique para ampliar

Após isso, vamos até a aba Linker settings. No campo Other linker options, vamos adicionar a linha:

-lalleg

Por último, vamos até aquela pasta que descompactamos. Dentro dela há um diretório chamado bin, que contém três arquivos .dll. Vamos copiar estes arquivos para C:Arquivos de ProgramasCodeBlocksMinGWbin. Isso deve ser feito para que consigamos rodar nossos programas de dentro do Code::Blocks. Para executar os programas de fora da IDE (diretamente do executável), estas DLLs devem estar, ou na pasta C:Windowssystem32 (ou 64) ou então no mesmo diretório do executável. Eu sempre prefiro colocá-las junto com o executável, pois assim posso passar meus jogos para pessoas que não tem a biblioteca Allegro instalada em seus computadores (fica a dica!).

Bom, após isso, já estamos preparados para criar nossas aplicações em Allegro.

Vamos criar um novo projeto para testar. Vamos até o menu File -> New -> Project… e selecionaremos Empty Project (Projeto Vazio). Configure a linguagem como C ou C++ o local onde deseja salvar e mantenha as configurações padrão do compilador. Após a confirmação, vamos adicionar um arquivo-fonte ao projeto. Menu File -> New -> File…, seleciona C/C++ source, selecione para salvar no diretório do projeto, com um nome qualquer, e marque para adicionar ao projeto, marcando as opções Debug e Release. Agora, vá ao menu Project -> Properties… e siga até a aba Build targets. Na caixa Type, selecione GUI application em vez de Console application. Clique em OK para confirmar.

Clique para ampliar

Agora, digite o seguinte código para testarmos:

#include <allegro.h>

int main(void)
{
    allegro_init();

    allegro_message("Teste");

    allegro_exit();

    return 0;
}
END_OF_MAIN()

Pressione F9 para compilar e executar o projeto. Se você seguiu os passos corretamente, verá uma janelinha pop-up como essa:

Bom, é isso aí. Espero ter mais uma vez ajudado vocês. Em caso de dúvidas, críticas, sugestões e cia., não hesitem em deixar um comentário! Será muito bem vindo!

Abraço a todos! 🙂