Instalando a Allegro 5 no Mac OS (OSX Mavericks)

Olá pessoal!

Essa semana precisei instalar a Allegro 5 no Mac devido a um treinamento que estou ministrando e, putz, suei um pouco para fazer tudo funcionar da forma correta! Então vou aqui passar o caminho das pedras pro pessoal que precisa ou quer fazer o mesmo :)

O primeiro passo é instalar algum gerenciador de pacotes, como o Homebrew ou o MacPorts. Após instalados, vamos baixar as dependências para a compilação da biblioteca.

sudo port install cmake zlib freetype jpeg libogg physfs libpng flac libtheora +universal

ou

brew install cmake zlib freetype jpeg libogg physfs libpng flac libtheora

Após a obtenção dos pacotes, entra um ajustezinho para que, durante a compilação, o cmake encontre corretamente a biblioteca FreeType (que, por algum motivo é instalada em um local não-padrão). Precisei rodar um comando para criar um link no diretório padrão para ela:

sudo ln -s /usr/local/opt/freetype/include/freetype2 /usr/local/include/freetype

Depois disso, é só baixarmos o código-fonte da Allegro (pode ser a versão 5.0 ou 5.1) e descompactar. Abra o terminal, navegue até a pasta onde ele foi descompactado e digite os seguintes comandos:

mkdir build

cd build

cmake ..

make

sudo make install

E pronto! Ah, uma dica a mais é que, no Mac, precisei sempre adicionar a opção de linker -lallegro_main. Caso contrário, ocorre um erro parecido com o seguinte:

Undefined symbols for architecture x86_64:
  "_main", referenced from:
     implicit entry/start for main executable
ld: symbol(s) not found for architecture x86_64

Valeu pessoal, até a próxima :)

Captura de tela 2014-08-21 23.51.09

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

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! :D

Utilizando o Maps v2 no Android

Olá pessoal! Nesse post vamos ver rapidamente como é simples adicionar a (nem tão nova assim) API de mapas da Google no seu aplicativo Android. A princípio vamos simplesmente adicionar um mapa na tela (futuramente, pretendo fazer outros posts mostrando como realizar outras “façanhas” como adicionar marcadores, traçar rotas e outras coisas).

Bom, como já é de praxe, vamos criar um novo projeto no Android Studio. Para esse tutorial, estou utilizando a versão 0.8.1 da IDE, já em sua fase beta. Com o projeto criado, o primeiro passo é adicionar a biblioteca Google Play Services ao projeto. Nesse passo, é bom verificar se ela está instalada. Para isso, abra o seu SDK Manager, e verifique na categoria Extras se o Google Repository está instalado. Caso hajam atualizações, é sempre recomendado baixá-las.

Captura de tela 2014-06-30 21.56.47

Após certificar-se de que está instalado, temos duas possibilidades para adicioná-la ao projeto. Primeiramente, você pode ir até o menu File -> Project Structure…, selecionar o módulo que corresponde ao seu app (no meu caso, app mesmo), selecionar a aba Dependencies e adicionar o Google Play Services clicando no botão + e selecionando Library dependency. Procure por Google Play Services na lista que surgir.

Captura de tela 2014-06-30 22.00.33

Captura de tela 2014-06-30 22.00.55

Outra forma, é simplesmente adicionar a dependência no arquivo build.gradle do módulo do seu app, ficando assim:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.google.android.gms:play-services:+'
}

Nesse caso, a IDE te oferecerá para sincronizar o projeto para que as dependências sejam atualizadas.

O próximo passo é autorizarmos o nosso app a receber o maps. Acesse este link para ir até o console de APIs do Google. Faça login com a sua conta Google e, então, clique sobre o botão Create Project. Preencha o nome do projeto e escolha um ID (ou deixe como está) para que seja criado um projeto. Com o projeto criado, ele deverá aparecer na sua lista de projetos.

Captura de tela 2014-06-30 22.06.52

Clique sobre ele e selecione a opção Enable an API.

Captura de tela 2014-06-30 22.07.04

Procure na lista pela opção Google Maps Android API v2 e habilite-a.

Captura de tela 2014-06-30 22.07.32

Agora, clique sobre a opção Credentials no menu esquerdo e clique sobre a opção Create new key, selecionando a opção Android key logo em seguida. Por fim, clique sobre o botão Create. Você pode, nessa tela, limitar essa sua chave a uma determinada combinação de assinatura + identificador (pacote) do seu app. Como a API é gratuita somente até certo ponto, é extremamente recomendável criar esse controle quando seu aplicativo for publicado / distribuído. Com a chave criada, copie o valor da API key gerada.

Voltando ao seu app, vamos configurar nosso arquivo AndroidManifest.xml. Primeiramente, precisamos adicionar algumas permissões:

<permission
    android:name="net.rafaeltoledo.exemplomapa.permission.MAPS_RECEIVE"
    android:protectionLevel="signature" />

<uses-permission android:name="net.rafaeltoledo.exemplomapa.permission.MAPS_RECEIVE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- Opcionais, caso necessitar da localização do usuário -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Vale ficar atento nesse ponto de que criamos uma permissão específica ali que deve começar com o pacote do seu app (no meu caso, net.rafaeltoledo.exemplomapa). Em seguida, vamos adicionar uma restrição ao AndroidManifest, já que a nova API de mapas requer OpenGL ES 2 ou superior. Adicione a seguinte tag logo antes do nó application:

<uses-feature
    android:glEsVersion="0x00020000"
    android:required="true" />

Por último, basta adicionar duas tags meta-data ao nó application (dentro dele):

<!-- Requerido pelo Google Maps -->
<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    android:value="SUA API KEY AQUI" />

<!-- Requerido pelo Google Play Services -->
<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />

E pronto. Agora, basta adicionar a tag com o mapa em seu XML de layout:

<fragment
    android:id="@+id/map"
    class="com.google.android.gms.maps.MapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Uma última dica: caso esteja suportando versões abaixo do Android 3.0, substitua MapFragment por SupportMapFragment. E é isso! Ao executar, já teremos nosso mapa na tela!

Captura de tela 2014-06-30 22.31.11

Por hoje é só pessoal!

Criando um Navigation Drawer customizado no Android

Olá pessoal! Voltando a postar aqui no blog, hoje vamos ver como criar um Navigation Drawer customizado no Android. Navigation Drawer, pra quem não sabe, é aquele menuzinho deslizante no Android que vem do lado esquerdo do app, sinalizado pelos três traços horizontais ao lado do ícone do aplicativo na Action Bar.

Captura de tela 2014-06-24 20.06.17

Nas últimas versões do Android Studio, nós já temos um modelo de Activity que cria um Navigation Drawer pra gente, um modelo simplezinho com uma lista de opções. Nesse post, vamos ver como criar um Navigation Drawer com uma View customizada e fazer aquele visual bacana pro seu app.

Pra início de conversa, crie um projeto no seu Android Studio (estou utilizando para esse post a versão 0.6.1) e utilize o modelo de Activity com o Navigation Drawer.

Captura de tela 2014-06-24 20.12.13

Ao criar uma Activity com esse modelo, uma porção de código é gerada (classes e XMLs de layout). Vamos analisar alguns pontos principais.

  • Activity: Simplificadamente, possui como layout um DrawerLayout (para o efeito de deslize do Navigation Drawer), tendo como filhos o Fragment do Navigation Drawer e um FrameLayout onde o conteúdo das telas será colocado. Já no código, o ponto mais importante é o método onNavigationDrawerItemSelected(), método de callback chamado toda vez que um elemento do drawer é selecionado.
  • NavigationDrawerFragment: a classe que representa o nosso drawer. No wizard é gerada uma tonelada de código, mas podemos destacar o método onCreateView() no qual criamos o layout do drawer e o método selectItem(), responsável por notificar o que foi selecionado nele.

Nesse código gerado, temos um fragment chamado PlaceholderFragment, utilizado apenas para criar o efeito de mudança nas opções. Além disso, o layout do drawer é simplesmente uma lista semi-transparente.

Captura de tela 2014-06-24 21.12.45

Para este exemplo, então, vamos criar um Navigation Drawer mais interessante, com um cabeçalho para um resumo de um perfil de usuário (fictício), vamos deixar essas três opções de navegação que já estão ali (ou mesmo podemos adicionar mais algumas) e um rodapé para créditos de desenvolvimento. Além disso, vamos fazer com que o Navigation Drawer mantenha destacada a página de navegação atual do usuário.

Vamos lá. O primeiro passo é modificarmos o arquivo de layout do Navigation Drawer, no caso, o arquivo fragment_navigation_drawer.xml. Adicionei um RelativeLayout ao redor da lista e a configurei para ficar entre o TextView de topo (perfil do usuário) e rodapé (créditos). Ficou assim:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context="net.rafaeltoledo.hellospringapi.NavigationDrawerFragment">

    <TextView
        android:id="@+id/headerView"
        style="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"        
        android:drawableLeft="@drawable/photo"
        android:gravity="center_vertical"
        android:padding="25dp"
        android:text="Rafael Toledo" />

    <TextView
        android:id="@+id/footerView"
        style="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"        
        android:gravity="center"
        android:padding="20dp"
        android:text="Desenvolvido por Rafael Toledo"
        android:textStyle="bold" />

    <ListView
        android:id="@+id/navigationItems"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/footerView"
        android:layout_below="@+id/headerView"
        android:background="#cccc"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

</RelativeLayout>

O próximo passo é modificarmos a forma como o NavigationDrawerFragment lida com seu layout (já que anteriormente ele o tratava apenas como uma lista). Vamos fazer uma leve modificação no método onCreateView() para que ele busque a lista no layout. Fica assim:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(
            R.layout.fragment_navigation_drawer, container, false);

    mDrawerListView = (ListView) view.findViewById(R.id.navigationItems);
    mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }
    });
    mDrawerListView.setAdapter(new ArrayAdapter<String>(
            getActionBar().getThemedContext(),
            android.R.layout.simple_list_item_activated_1,
            android.R.id.text1,
            new String[]{
                    getString(R.string.title_section1),
                    getString(R.string.title_section2),
                    getString(R.string.title_section3),
            }));
    mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
    return view;
}

Veja que não modificamos muita coisa. Só fizemos alguns ajustes devido ao fato de que o elemento raiz do layout do drawer não é mais a lista e sim o RelativeLayout. Dessa forma, precisamos fazer o lookout nele pra buscar a lista. Se executarmos o app nesse ponto, teremos algo assim:

Captura de tela 2014-06-24 21.30.59

Percebam que o conteúdo está um pouco “espremido” no Navigation Drawer devido a sua largura. Segundo as boas práticas de design do Android, um Navigation Drawer pode ter entre 240dp 320dp. Vamos alterar a sua largura no arquivo values/dimens.xml para 300dp, alterando o valor de navigation_drawer_width.

Captura de tela 2014-06-24 21.35.23

Já ficou mais interessante, né? O negócio agora é fazermos as opções serem, de fato, selecionadas quando forem clicadas, ficando fácil pro usuário saber em qual tela ele está. Pra isso, basta fazermos uma pequena modificação no método onCreateView() do NavigationDrawerFragment, alterando o layout do adapter de simple_list_item_1 para simple_list_item_activated_1. Simples não?

Captura de tela 2014-06-24 22.06.59

E é isso minha gente! Ah, é bom ficar atento que esse último passo não funciona no Android 2.3! Se bem que, hoje, pra um app novo, já não compensa (na minha opinião) suportar o Gingerbread… Bola pra frente devs!

Até a próxima!

Criando um App Java com Google App Engine e Netbeans 8

Olá pessoal! No post de hoje vou mostrar como é simples configurar o seu Netbeans para desenvolver e fazer deploy de um app Java no Google App Engine (GAE). Particularmente, após a pesquisa, achei bem mais simples e menos problemático que a forma mais utilizada, com o Eclipse.

Para esse tutorial, estou levando em consideração que você já tenha o Netbeans para JavaEE instalado e funcionando. O primeiro passo é baixar o plugin para que o Netbeans suporte o GAE. Para isso, podemos baixar aqui o arquivo nbappengine-7.4.x-gae1.8.x-3.0.2.zip. Apesar de ser para o Netbeans 7.4 e para o GAE SDK 1.8, ele funciona muito bem com o Netbeans 8 e o GAE SDK 1.9. Após concluído o download, descompacte o arquivo em algum local.

Captura de tela 2014-06-23 00.50.48

Agora, abra seu Netbeans, vá até o menu Ferramentas -> Plug-ins e clique na aba Obtidos por Download. Clique então no botão Adicionar Plug-ins… e navegue até a pasta onde você descompactou o zip baixado anteriormente. Selecione todos os arquivos .nbm.

Captura de tela 2014-06-23 00.56.36

Confirme a seleção e clique, selecionados os arquivos, clique sobre o botão instalar.

Captura de tela 2014-06-23 00.56.57

Feito isso, vamos adicionar o GAE como opção de servidor. Clique no menu Ferramentas -> Servidores e selecione a opção Google App Engine.

Captura de tela 2014-06-23 00.58.49

Na tela seguinte, você deverá selecionar o local onde está a SDK do GAE (caso não tenha baixado ainda, basta clicar aqui para baixar).

Captura de tela 2014-06-23 00.43.35

Captura de tela 2014-06-23 01.00.36

Conclua a adição do servidor e crie um novo projeto selecionando-o como servidor. Agora, vamos criar o app lá no painel do GAE. Entre aqui e preencha os campos com o endereço da aplicação (que será seu identificador) e o nome.

Captura de tela 2014-06-23 00.41.58Agora, com o projeto criado, vá até o arquivo appengine-web.xml que encontra-se dentro da pasta WEB-INF e preencha com o id da sua aplicação.

<?xml version="1.0" encoding="UTF-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0"
xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
xsi:schemaLocation='http://kenai.com/projects/nbappengine/downloads/download/schema/appengine-web.xsd appengine-web.xsd'>
    <application>rafaeltoledoblog</application>
    <version>1</version>
    <!--    <ssl-enabled>false</ssl-enabled>
    <sessions-enabled>true</sessions-enabled>
    -->
    <threadsafe>false</threadsafe>
</appengine-web-app>

E pronto! Seu projeto já está configurado. Para fazer deploy para o GAE, basta clicar com o botão direito no projeto e selecionar a opção Deploy to Google App Engine. Nesse caso, será solicitado seu usuário e senha para que o deploy seja realizado com sucesso.

O app de exemplo desse post está rodando em rafaeltoledoblog.appspot.com (é apenas um Hello World ;)).

Quanto ao desenvolvimento em geral, vale salientar que o GAE não suporta todos os recursos do JavaEE. Para saber o que dá e o que não dá pra usar, você pode dar uma olhada aqui.

E é isso pessoal! Até a próxima :)

android-studio

Android Studio – Visão Geral

Olá pessoal!

Nos últimos tempos, temos várias novidades no que diz respeito ao mundo Android. Tivemos o KitKat (4.4), Nexus 5, SDK do Google Glass, etc. Além disso, tivemos uma novidade ainda em fase de cozimento desde o último evento Google I/O: o Android Studio.

android-studioBaseado na IDE IntelliJ (não tão popular assim no Brasil, mas muito forte lá fora), ela é bem mais leve que o nosso amigo Eclipse, mesmo estando ainda em versão experimental (enquanto escrevo esse post, ela o Android Studio encontra-se na versão 0.4).

O grande diferencial dela para o plugin ADT que tínhamos lá no Eclipse, é o uso do Gradle, um poderoso sistema de gestão de builds. Como pretendo mostrar em alguns posts daqui pra frente, com o Gradle, fica muito mais de boa fazer a gestão das versões do nosso app (por exemplo, uma versão gratuita, outra paga). Além disso, no Android Studio, as ferramentas se sentem muito mais em casa, com previews em tempo real dos layouts XML, integração com Git / Github, e mais um monte de coisa bacana. Tudo isso com um visual muito mais atraente que o nosso amigo Eclipse.

Pra instalar, não tem erro, basta ter a JDK instalada e baixar daqui o instalador do Android Studio, que já vem tudo no jeito. Ah, uma dica pro pessoal que usa Windows: evite instalar na pasta Arquivos de Programas pra não ter problemas de permissão (tive problemas nesse sentido que, só depois, fui descobrir o motivo).

Logo logo, farei alguns posts sobre como utilizar essa nova IDE. Por isso, fiquem de olho aqui no blog! Prometo não sumir esse ano! :)