22 de setembro de 2011

Montando o ambiente de desenvolvimento Titanium

Neste artigo/tutorial apresentarei um roteiro passo-a-passo para a instalação e configuração de todo o ferramental necessário para desenvolver apps para Android e iOS usando Titanium no Mac OS X. Se você usa Windows ou Linux, veja os links que sugeri nos comentários desse artigo.

Primeiramente, é importante lembrar que o Titanium gera código nativo a partir do código JavaScript criado pelo programador. Esse código nativo precisa ser compilado e empacotado usando as ferramentas oficiais de cada plataforma. Por isso, é pré-requisito que você tenha instalado o SDK (Software Development Kit) de pelo menos uma das plataformas suportadas. As que abordarei aqui são Android e iOS, ambas disponíveis para Mac OS X. O SDK do BlackBerry, infelizmente, só está disponível para Windows. Se você já tem instalados os SDK's das plataformas em que pretende trabalhar, recomendo que leia cada item deste roteiro e certifique-se de que não deixou de fazer nada do que é necessário para trabalhar com o Titanium.

Instalando o SDK do Android

  1. Comece baixando o SDK starter package, que contêm as ferramentas básicas que te permitirão baixar os SDK's de cada versão do Android.

  2. Descompacte o arquivo .zip e mova seu conteúdo para /android-sdk (você pode usar outro local, mas lembre-se de substituir todas as ocorrências de /android-sdk presentes neste artigo pelo local escolhido).

  3. Adicione /android-sdk ao seu PATH. Isso pode ser feito adicionando a seguinte linha ao seu ~/.bash_profile:

    PATH=/android-sdk/tools:"${PATH}"

    PS: Para exibir arquivos ocultos no Finder, execute o seguinte comando no Terminal:

    defaults write com.apple.finder AppleShowAllFiles TRUE

    Você precisará encerrar o Finder (não basta fechar a janela) e abrí-lo novamente para essa alteração surtir efeito. Você pode encerrá-lo com:

    killall Finder

    Para voltar a não exibir os arquivos ocultos, use:

    defaults write com.apple.finder AppleShowAllFiles FALSE

  4. Execute /android-sdk/tools/android pelo Finder ou simplesmente android pelo Terminal.

  5. Vá em "Available packages" e expanda "Android Repository". Você deve marcar o "SDK Platform Android 2.1-update1, version3", pois o Titanium depende dessa versão do Android para compilar as apps. Você pode selecionar também packages mais novos. Apenas esteja ciente de que as versões até 2.x são para smartphones e as 3.x são específicas para tablets (um dia esses SDK's serão unificados). Não mande instalar, ainda.

  6. Ainda em "Available packages", expanda "Third party Add-ons" e marque as mesmas API's que você marcou no item anterior. Isso é necessário porque as API's que interagem com os serviços da Google (Maps, por exemplo) não fazem parte do SO Android. Por isso, elas precisam ser instaladas como Add-ons.

  7. Se você estiver trabalhando atrás de um proxy, vá em "Settings" e forneça os dados do proxy;

  8. Clique em "Install Selected".

    PS: Você pode prosseguir com o roteiro e fazer os demais downloads em paralelo. Mas, se preferir aguardar, recomendo ir tomar um café ou água.

  9. Após o término da instalação, é recomendável reiniciar o sistema.

Instalando o SDK do iOS

  1. Abra o aplicativo App Store e pesquise "Xcode";

  2. O "Xcode" provavelmente será o primeiro item. Mande instalar.

    PS: Você pode prosseguir com o roteiro e fazer os demais downloads em paralelo. Mas, se preferir aguardar, recomendo aproveitar e tirar um cochilo.

  3. Após o término da instalação, é recomendável reiniciar o sistema.

Habilitando o debug

Se você pretende depurar seu código JavaScript, é preciso ter o Firefox instalado, pois o Titanium Studio usa o Firebug (um add-on que vem no FireFox). Para instalar o FireFox, vá no site da Mozilla e escolha sua versão preferida.

Instalando o Titanium Studio

O TiStudio (como chamaremos o Titanium Studio a partir daqui) é a IDE padrão para o desenvolvimento de apps mobile e desktop com o Titanium. Ele é uma evolução do Aptana, que tem como base a Plataforma Eclipse. Se você gosta do Eclipse, gostará do TiStudio. Se, por outro lado, prefere editores leves ao invés de IDE's, é possível utilizá-los, mas não cobrirei esse caso neste tutorial. Para instalar e configurar o TiStudio, siga os passos a seguir:

  1. Vá no site da Appcelerator e clique em "Download Titanium". Após preencher um pequeno cadastro, o download será iniciado.

  2. Após a instalação, abra o TiStudio, faça login com os dados informados no cadastro e aguarde-o fazer o download dos SDK's mobile e desktop mais recentes.

  3. Se você vai desenvolver para Android (e se o download dos SDK's já terminou), vá em Titanium Studio/Preferences, expanda o item "Titanium Studio", selecione "Ttitanium" e informe em "Android SDK" o local onde foi instalado o SDK starter package (se você seguiu esse roteiro, o local é /android-sdk). Em "Default Android SDK", selecione o SDK que você deseja usar por padrão e clique em OK.

A partir daqui, você já pode criar sua primeira app, mas caso vá desenvolver para Android, recomendo o passo adicional que descreverei a seguir.

Instalando o Android Development Tools (ADT) para Eclipse

Através do ADT, vários recursos são facilitados ao desenvolvedor Titanium/Android. Entre esses recursos estão a consulta aos logs gerados pelas suas apps e a transferência de arquivos de/para o emulador/dispositivo. Além disso, se você pretende estender o Titanium criando módulos para Android (usando Java), precisará do ADT. Se você não vai criar módulos ou se não liga para ter os recursos do ADT integrados ao TiStudio, não precisa do ADT. Mas se for instalá-lo, siga cuidadosamente os passos a seguir:

  1. Primeiro, vamos descobrir em que versão da Plataforma Eclipse o TitStudio que você instalou é baseado. Vá em Titanium Studio/About Titanium Studio e clique no ícone com o logo do Eclipse. Localize a linha que tem na coluna "Feature Name" o valor "Eclipse Platform". Veja qual o conteúdo correspondente à coluna "Version". Olhe a figura a seguir para ver um exemplo.

    Note que a minha versão é a 3.6, chamada de Eclipse Helios. Se sua versão for 3.7, a plataforma é o Eclipse Indigo. Identificar essa versão (Helios ou Indigo) é necessário para o próximo passo.

  2. Vá em Help/Install new software e clique em "Available Software Sites". Cole "http://download.eclipse.org/releases/helios" ou "http://download.eclipse.org/releases/indigo" na caixa de busca, dependendo a versão identificada na passo anterior. Provavelmente o site correspondente aparecerá na lista. Certifique-se de que o checkbox correspondente a esse site esteja marcado e clique em OK. Note a figura a seguir:

    Se esse item não aparecer na lista, clique em "Add" e forneça a URL apropriada para a sua versão de Eclipse.

  3. Ao retornar à tela precedente, selecione no campo "Work with" o item marcado no passo anterior. Aguarde o carregamento da lista.

  4. Expanda "Programming Languages", marque "Eclipse Java Development Tools" e avance até o fim do wizard de instalação. Após o término, reinicie o TiStudio.

  5. Vamos novamente em Help/Install new software. Clique em "Add". Cole nos campos Name e Location os valores "ADT Plugin" e "https://dl-ssl.google.com/android/eclipse/", respectivamente.

  6. Marque "Developer tools" e avance até o fim do wizard. Reinicie o TiStudio quando solicitado.

  7. Vá em Titanium Studio/Preferences, expanda Android e informe /android-sdk no campo "SDK Location". Clique em "Apply" para validar a localização do SDK informada e em seguida, em "OK".

    Agora, ao desenvovler para Android, você pode selecionar a perspectiva (Window/Open perspective) DDMS ou diversas Views (Window/Show View) como LogCat e File Explorer. Em artigos futuros, provavelmente as mencionarei.

O primeiro projeto

Para criar o primeiro projeto, vá em File/New/Titanium Mobile Project. Forneça os dados da app e informe para quais plataformas você deseja compilá-la. Clique em "Finish".

O ponto de partida da app é o arquivo /Resources/app.js, que contêm um template de app com um TabGroup e duas abas. Para fazer build da app, selecione o nome do projeto na view à esquerda, vá em Run/"Run as" e escolha a plataforma destino. O simulador do iPhone/iPad é bem rápido, mas o Emulador do Android é extremamente lento, portanto não se espante se demorar alguns minutos para o primeiro build no Android ser concluído.

Gaste algum tempo em entender o app.js criado por padrão. Altere-o para mudar a aprência e posicionamento dos controles de interface. Crie uma nova aba, novos controle etc. Se você está num Mac e instalou os SDKs do Android e iOS, note as diferenças entre as apps em cada plataforma.

Duas apps que você deve conhecer são o KitchenSink, que demonstra o uso de praticamente toda a API do Titanium Mobile e o Tweetanium, um cliente Twitter que segue as práticas de organização de projeto e código recomendadas pela Appcelerator.

Aguarde os próximos artigos, onde abordarei muito mais sobre o desenvolvimento de apps nativas como Titanium. Se você tiver algum problema seguindo o roteiro que apresentei aqui ou tiver dúvidas, deixe-me saber.

23 comentários:

Ernesto disse...

Gostei do tutorial, parabéns Dirlei!

Dirlei Dionísio disse...

Obrigado Ernesto!

Dirlei Dionísio disse...

Atenção usuários de Windows e Linux, vejam esses tutoriais:

- Instalando o Titanium Studio no Windows

- Instalando o Titanium Studio no Linux Ubuntu

Jônatan Fróes disse...

Cara, li este tutorial no dia em q vc postou e coloquei nos favoritos. Nesta semana comprei meu mac mini, acessei esta página e algumas horas o titanium já estava rodando 100%.

Valeu e continue postando em 2012.

Abs.

Dirlei Dionísio disse...

Muito bom saber disso Jônatan, obrigado pelo feedback. []'s

Fabricio disse...

Pessoal, fiz o procedimento correto, descrito no tuto. Para o SDK do Android rolou bem depois que fiz a instalacao pelo DashBoard do Titanium. Fiz o mesmo procedimento para o SDK do IOS, pelo DashBoard. Baixei e instalei o Xcode, mas o TiStudio nao reconhece ainda o IOS. Alguem ja passou por esse problema?

Dirlei Dionísio disse...

Oi Fabricio,

Talvez as versões do seu Xcode e SDK Titanium não sejam compatíveis. As versões 1.7.x e 1.8.x do Titanium funcionam com o Xcode 4.2[1]. Como você acabou de montar seu ambiente, talvez tenha pego o Xcode 4.3, ainda não suportado[2].

Quando tiver novidades sobre sua tentativa, apreciaremos seu feedback.

Abraço!

[1] Titanium Compatibility Matrix
[2] Xcode 4.3 and Titanium

Unknown disse...

oi tudo bem. Muito legal o post!!!
comecei a usar o titanium por causa dele.
Vc sabe me informar como alterar o install dos aplicativos para desktop. Vem cheio das imagens do titanium.... como colocar meu logo e minhas menssagems??? desde já agradeço

Dirlei Dionísio disse...

Opa, não entendi bem o que vc quis dizer com "install dos aplicativos para desktop". Se estiver se referindo às imagens usadas para splash e ícone das apps, você pode trocá-las no diretório /Resources/images, /Resources/iphone e /Resources/android dentro do diretório do seu projeto.

[]s

Gregory Fontenele disse...

Como mudo a cor de fundo do TIStudio? Acabei de instalar e ele veio com a cor de background preta, como faço para ficar igual ao eclipse padrão?

Dirlei Dionísio disse...

Gregory, fica em Preferences/Titanim Studio/Themes. Um dos temas é "Eclipse".

Fernando Lima disse...

Opa,

cara muito interessante postar sobre titanium já que tem pouca documentação em português.

Parabéns!

Estou com um "problema" que não sei como resolver, estou desenvolvendo para android e após compilado o app algumas imagens não aparecem no app, porém isso só ocorre no emulador, no celular com android todas as imagens aparecem corretamente, se puder ajudar, agradeço...

Flw

Dirlei Dionísio disse...

Oi Fernando, nunca tive esse problema, mas experimente postar isso no Grupo de Titanium[1], muito provavelmente alguém por lá saiba te ajudar.

Um abraço!

[1] http://groups.google.com/group/titanium-mobile-br

Breno Leonardo disse...

Dois tutoriais iniciais para desenvolvimento com Titanium:

Instalando Titanium Studio no Windows:
http://blog.brenoleonardo.com.br/2012/08/instalando-titanium-studio-no-windows/

Hello World! com Titanium Mobile:
http://blog.brenoleonardo.com.br/2012/08/hello-world-com-titanium-mobile/

Anônimo disse...

Gostaria de saber se posso instalar o titanium no windows para desenvolver para ios?


Obrigado,
Silas Ferreira
email: silasfereira@gmail.com

Dirlei Dionísio disse...

Infelizmente não. Embora o Titanium Studio possa ser instalado no Windows para desenvolvimento Android, não há como desenvovler para iOS porque a Apple não disponibiliza suas ferramentas de desenvolvimento para Windows e o Titanium usa essas ferramentas.

Nidelson Gimenes disse...

Dirlei, você usa o jake para compilar alguns testes de Alloy, não é?
O meu parou de compilar.
Toda vez que executo, por exemplo:
sudo jake app:run dir=ui/popover

... ele compila, mas só chama o 'basics/simple' no simulador.
Já passou por isso alguma vez?
Já confirmei a instalação de meu Alloy e tal, mas nada ainda.

Abraço.
Nidelson Gimenes

Dirlei Dionísio disse...

Oi Nidelson, lamento, mas não uso o jake. Boa sorte por aí! []s

Leandro Coutinho disse...

Olá amigos... gostaria de saber se alguém pode me ajudar, estou tentando instalar no iPad um app que fiz no titanium studio e não estou conseguindo, ele fica como se estivesse sempre a instalar e nunca instala. A instalação no iPhone deu certinha e estou com esse problema no iPad. Alguém tem alguma dica? Desde já agradeço.

Leandro Coutinho

Dirlei Dionísio disse...

Oi Leandro, para esse tipo de ajuda, use o grupo de discussão: groups.google.com/group/titanium-mobile-br

Abraço!

Fabio Artuso disse...

Dirlei, a página "Instalando o Titanium Studio no Windows" não está disponível.
Segui seu tutorial na primeira vez que instalei o Titanium e deu tudo certo. Formatei a máquina e não consegui mais executar o emulador.
Por favor, poderia verificar o link?
Abraço!

Dirlei Dionisio disse...

Oi Fabio,

Muita coisa mudou desde que este artigo foi publicado. O Titanium Studio foi descontinuado em favor do Appcelerator Studio, que você baixa a partir de appcelerator.com. Para usar apenas as ferramentas open source e gratuitas, o link é appcelerator.org.

Abraço!

Alessandro Nogueira Porto disse...

Pessoal estou com uma vaga em aberto para um profissional que conheça bem o framework Titanium. Se alguém souber entrar em contato comigo através do email alessandro.n.porto@gmail.com. Obrigado.