domingo, 20 de outubro de 2013

Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Setup


Ok, você vai aprender a criar apps móveis multiplataforma, usando o PhoneGap / Cordova e o jQuery Mobile. Porém, antes de mais nada, precisa preparar a plataforma para acompanhar o curso. Veja agora como fazer isso...






O trabalho "Criação de aplicações Móveis com PhoneGap e jQuery Mobile" de Cleuton Sampaio de Melo Jr está licenciado com uma Licença Creative Commons - Atribuição-CompartilhaIgual 4.0 Internacional. Isso inclui: Textos, páginas, gráficos e código-fonte.

Material e exemplos

Apesar do curso ser multiplataforma, daremos maior ênfase à execução em plataforma Android. Todos os exemplos funcionam em iOS também.

Todo o material do curso está publicado no Bom Programador. Os arquivos de exemplo e os exercícios podem ser acessados no Link: 

https://www.dropbox.com/sh/urqed2csq7owiyx/AABjhknysUiFmvFNCSn_s3Tma?dl=0

Para cada lição, há alguns arquivos de exemplos e exercícios. Basta baixar e descompactar o arquivo relativo à lição.


Requisitos de hardware e software

Usando o PhoneGap / Cordova, você pode criar apps móveis para várias plataformas, entre elas: Android, iOS e Windows Phone. Neste curso, focaremos basicamente nas aplicações Android, dando uma "pincelada" rápida no iOS. 

Aplicações Android

  • CPU compatível com Intel i5, com 4 núcleos;
  • Pelo menos 2.4 GHz;
  • Memória RAM de 4 GB;
  • Espaço em Disco Livre: 5 GB;
  • Sistema Operacional:
    • Windows XP (32-bit), Vista (32- or 64-bit), or Windows 7 (32- or 64-bit)
    • Linux: (Ubuntu): GNU C Library (glibc) 2.7 ou superior; Ubuntu 10.04 ou superior;
    • Mac OSX: 10.5.8 ou mais recente;
  • Usuário tem que ser administrador local da máquina (“sudoer”, no caso de Linux);
  • Android SDK:
    • PhoneGap, jQuery, jQuery Mobile;
    • Eclipse + ADT plugin + AppLaud plugin;
    • Android SDK Tools;
    • Android Platform-tools;
    • Pelo menos uma versão da Android platform;
    • Pelo menos uma versão da Android System Image;
  • Software para criar servidores de notificação: Java 6 JDK + Apache Derby + Maven 3;
  • Dispositivos Android, com cabos USB, no mínimo Android 4.x;

Aplicações Apple iOS

  • iMac, MacMini ou MacBook Pro, no mínimo i5 com 4 GB RAM;
  • Conta no iOS Developer Program, com certificado em dia (pelo menos uma);
  • Xcode 5.1.1 + iOS SDK 7 (talvez o 8);
  • Software para criar servidores de notificação: Java 7 JDK + Apache Derby + Maven 3;
  • Dispositivos iOS (iPhone, iPad) com cabos;

Instalação Android

Eclipse

  • Instale a última versão do eclipse (Luna, no momento da preparação deste guia).
  • É possível usar uma versão mais antiga? Sim, mas no máximo a antepenúltima versão.
  • Não instale eclipse com outros frameworks, incluindo Demoiselle.

Java

Instale o Java JDK 6 da Oracle e o Apache ANT. Abra um terminal e veja se o comando “javac –version” está apontando para a versão correta.

No Ubuntu: certifique-se que o pacote openjdk-6-jdk esteja instalado!

Android SDK

Baixe a última versão do Android SDK e instale, de acordo com as instruções. Se usar Ubuntu, leia essas instruções e não se esqueça de colocar no PATH as pastas %android-adt%/sdk/tools e %android-adt%/sdk/platform-tools!



Após a instalação, é necessário instalar a plataforma Android e as System Images. Você precisará no mínimo de:
  1. Android SDK Tools
  2. Android SDK Platform-tools
  3. Android SDK Build-tools (highest version)
  4. Pelo menos uma SDK Platform;
  5. Pelo menos uma system image para o emulator, por exemplo: ARM EABI v7a System Image;


Abra o aplicativo “SDK Manager”:

  • Windows: Duplo-clique no arquivo “SDK Manager.exe”, na pasta raiz do Android SDK;
  • Mac/Linux: Abra um terminal, navegue para a pasta “tools/”, dentro da pasta do Android SDK, e execute: “./android sdk”;

Marque:
  • Android SDK Tools (Se não estiver instalado);
  • Android Build Tools (Se não estiver instalado);
  • Android Platform-tools (Se não estiver instalado);


Escolha uma plataforma Android (4.4.2) e instale:
  • SDK Platform;
  • ARM EABI System Image;
  • Google API (ARM);


Atenção: Para o PhoneGap funcionar, a API 19 (Android 4.4.2) TEM QUE ESTAR INSTALADA!


Só para Windows: Marque também o “Google USB Driver”, no final de tudo (dentro de “Extras”)!


Eclipse ADT plugin

Se você pretende utilizar a IDE Eclipse, então tem que instalar o plugin para controle do Android, que é o ADT (Android Developer Tools).


Agora, é o momento de configurar o ambiente Eclipse baixando o plugin ADT. Abra a janela “help / install new software” e adicione o repositório:
  • https://dl-ssl.google.com/android/eclipse/”
Marque tudo e instale:



Depois, configure o Android SDK dentro do eclipse:
  • Abra o menu: “Window / Preferences /Android ” e configure o path do Android SDK;

Crie um AVD e rode o emulador Android

Podemos desenvolver e testar apps Android rodando em um Emulador, também chamado de: Android Virtual Device - AVD. Vamos criar uma configuração de AVD para podermos rodar.


Rode o “SDK Manager” e crie um AVD:
  • Selecione o menu “tools” e “Manage AVDs”. Clique no botão "Create" e configure seu AVD, como esse exemplo:

  • AVD name: muito importante. Escolha um nome significativo, sem espaços, nem caracteres especiais;
  • Device: escolha qualquer uma. Eu uso o Nexus 4 porque a tela não é muito grande;
  • Target: escolha Android 19 (4.4.2);
O resto, faça igual à imagem. 


Rode o emulador! Na tela do SDK Manager, selecione "tools" e "Manage AVDs". O Seu AVD recém criado deve aparecer lá. Selecione-o e clique no botão "Start". Vai demorar um pouco, mas o emulador vai abrir e carregar o Android. Isso demora bastante... Geralmente, entre 3 e 5 minutos, dependendo da quantidade de RAM disponível.


Instalação do PhoneGap e do Apache Cordova

O PhoneGap usa o Apache Cordova. Precisamos instalar ambos. Antes de instalar o PhoneGap, é necessário instalar o Node.js (e o NPM):

"node.js" e "npm" No Linux Ubuntu:

Não instale o nodejs do pacote do Ubuntu!!!!
  • sudo apt-get install --yes ant build-essential curl git
  • sudo apt-get install --yes python-software-properties python g++ make
  • sudo add-apt-repository --yes ppa:chris-lea/node.js
  • sudo apt-get update
  • sudo apt-get install --yes nodejs
Teste com os comandos: 
  • node --version (tem que ser pelo menos 0.10.x)
  • npm --version (tem que ser pelo menos 1.4.x)


"node.js" e "npm" No Mac OSX: 

Há um instalador (*.pkg) do Mac no link: http://nodejs.org/dist/v0.10.31/node-v0.10.31.pkg


É só baixar e instalar.

"node.js" e "npm" No Microsoft Windows:

Instale o Node.js a partir do site (baixe o msi):
É só baixar e instalar, e ele já inclui o "npm".

PhoneGap e Cordova, nas três plataformas:

Abra um Terminal ou Prompt de Comandos e digite:

  • npm install -g phonegap
  • npm install -g cordova

Crie duas variáveis de ambiente, para Linux:

Crie as variáveis “ANDROID_HOME” e “JAVA_HOME”, de preferência dentro do arquivo “/etc/bash.bashrc” (últimas duas linhas):
  • export ANDROID_HOME=/opt/android-sdk-linux
  • export JAVA_HOME=/usr/lib/jvm/java-1.6.0-openjdk-i386

Como testar se tudo funcionou

O Emulador Android funciona melhor em máquinas com SO de 64 bits. Ele pode dar problema com mensagem de erro se sua máquina for 32 bits.

Você deve ter pelo menos 1 emulador criado (AVD)!
  1. Abra um Terminal e vá para sua pasta home: “cd ~”, No MS Windows, basta abrir um prompt de comando que você já estará em sua pasta "home";
  2. Crie um projeto: “cordova create teste com.exemplo.teste teste”;
  3. Adicione a plataforma Android: “cd teste” e “cordova platform add android”;
  4. Rode o aplicativo: “cordova android run”;

Depois de algum tempo, você deverá ver o emulador com uma tela branca com o símbolo do PhoneGap no meio, escrito: "Device Ready".