terça-feira, 22 de outubro de 2013

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


Bem vindo ao curso de Criação de apps móveis com PhoneGap e jQuery Mobile. Se ainda não o fez, leia atentamente o SETUP do curso.

Baixe os arquivos correspondentes a esta aula. A pasta completa está em: 




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.

Plataformas móveis

Hoje, no mercado de Sistemas operacionais para dispositivos móveis, temos os seguintes “players”:
  • Android (Google): Sistema operacional open-source, controlado pela “Open Handset Alliance”, que é liderada pela Google. Ele foi baseado no Kernel do Linux, e depois sofreu uma evolução separada. Última versão: 4.4.2 (Kit Kat), próxima versão: Android L; Pode ser executado em várias plataformas, como ARM, Intel e até mesmo X86;
  • iOS (Apple): Sistema operacional proprietário, controlado pela Apple. Foi baseado no Sistema Operacional Open Source “Darwin”, criado pela Apple a partir do NeXTSTEP e do Free BSD. Última versão: iOS 7.x, próxima versão: iOS 8. Só pode ser executado em dispositivos móveis fabricados pela Apple;
  • Windows Phone (Microsoft): Sistema operacional para dispositivos móveis criado pela Microsoft. Última versão: 8.1. Pode ser executado em dispositivos ARM e Intel. Atualmente, os seguintes fabricantes disponibilizam produtos com Windows Phone: Nokia (controlada pela Microsoft), HTC e Samsung (ATIV);
  • Blackberry (Blackberry): Sistema operacional para dispositivos Blackberry. Última versão: BlackBerry 10;


Outras plataformas para sistemas móveis menos populares:
  • Firefox OS (Mozilla): Sistema operacional baseado em HTML 5, multiplataforma. Fabricantes que o adotam: Alcatel (One touch fire), LG (Fireweb), ZTE (Open) e Intel (Cloud Fx);
  • Tizen (Samsung): Não é muito popular no Brasil;
  • Ubuntu Phone (Canonical): Promete, e pode ser instalado até em dispositivos Android;

Estatísticas

Porém, qual é a plataforma mais popular? Vamos ver algumas estatísticas para analisar essa questão.

Fonte: Net Market Share (http://www.netmarketshare.com/)

No mundo inteiro, temos iOS e Android dividindo quase meio a meio os usuários de dispositivos móveis. Mas, e no Brasil? É a mesma coisa? 

Fonte: Statista.com

Notamos que, no Brasil, a quantidade de dispositivos Android é muito maior que os outros, incluindo o iOS. Uma das razões é o preço, pois os dispositivos iOS são mais caros que os dispositivos Android.

Logo, vamos concentrar nossos estudos nessa plataforma, apesar de falarmos também um pouco sobre iOS.

Versões do Android

O Android possui várias versões, sendo que algumas são concorrentes:



Fonte: Android.com

No Brasil, acredita-se que a maioria dos dispositivos rodem Android Jelly Bean (4.1.x a 4.3), seguido pelo GingerBread (2.3.x).

Características de dispositivos móveis

Selecionamos alguns dispositivos móveis mais populares no Mercado, para lhe mostrar suas principais características: 
  • Tablet iPad Air: Processador dual-core (A7), com 1.3 Ghz; Resolução: 1536 x 2048 pixels, com 264 pixels por polegada; Memória: 1 GB RAM DDR3 e 16, 32 ou 64 GB flash; 2 Câmeras (uma de 5 Mega pixels); iOS 7.x;
  • Tablet Samsung Galaxy Note 10.1 (2014 Edition): Processador quad-core Krait 400 (2.3 Ghz); Resolução: 2560 x 1600 pixels com 299 pixels por polegada; 2 Câmeras: frontal com 8 Megapixels e trazeira com 2 Megapixels; Memória: 3 GB RAM; Android 4.3;
  • Smartphone iPhone 5S: Processador: dual-core A8 com 1.3 Ghz; Memória: 1 GB RAM; Resolução: 640 x 1136 pixels com 326 pixels por polegada; iOS 7.x;
  • Smartphone iPhone 6: Processador: dual-core A8 com 1.4 GHz; Memória: 1 GB RAM; Resolução: 750 x 1334 pixels com 326 pixels por polegada; iOS 8;
  • Smartphone LG Nexus 5: Processador Quad-core 2.3 GHz Krait 400; Memória: 2 GB RAM; Resolução: 1080 x 1920 pixels com 445 pixels por polegada; Android 4.4 (Kit Kat);
  • Smartphone Samsung Galaxy S5: Processador: Quad-core 2.5 GHz Krait 400; Memória: 2 GB RAM; Resolução: 1080 x 1920 pixels com 445 pixels por polegada; Android 4.4.2 (Kit Kat);
  • Smartphone Nokia Lumia 730 Dual SIM: Processador: Quad-core 1.2 GHz Cortex-A7; Memória: 1 GB RAM; Resolução: 720 x 1280 pixels com 316 pixels por polegada; Microsoft Windows Phone 8.1;

Arquitetura moderna de aplicações móveis

Durante muito tempo, pensou-se em criar aplicações móveis da mesma maneira que as aplicações “Desktop”, com as mesmas linguagens (“Java” para Android e “Objective C” para iOS). Porém, o mercado de aplicações móveis é muito volátil, com um ciclo curtíssimo de vida. Por exemplo, é comum vermos atualizações de apps móveis a cada semana.


E como manter múltiplas versões de uma aplicação (Android, iOS, Windows Phone), com esse ciclo de vida ultra rápido? O desenvolvimento em plataforma nativa se torna impraticável (“Java/Dalvik/ART” - para Android, “Objective C – Cocoa Touch” - para iOS, e “C# / .NET” - para Windows Phone).

A tendência moderna é utilizar aplicações “Webview”, que exibem páginas HTML 5 / Javascript, e consomem informações a partir de APIs REST ou SOAP. O armazenamento interno de Banco de Dados é minimizado, servindo apenas para cache temporário e preferências. É aí que entram frameworks como o PhoneGap / Cordova:




  • HTML 5 e Javascript: Plataforma de desenvolvimento de camada de Apresentação e de lógica de negócios;
  • jQuery, jQuery Mobile e Angular.js: Auxiliares para lidar com páginas dinâmicas;
  • PhoneGap: Executa a aplicação HTML 5 em uma Webview e se comunica com os recursos do aparelho e com plugins, feitos na plataforma nativa.
Vamos ver um pouco da arquitetura das principais plataformas móveis do Mercado.

Android

O Android utiliza dois tipos de máquinas virtuais para executar suas aplicações: Dalvik e, mais recentemente, ART – Android RunTime.


Vamos ver a arquitetura do Android:



O Android é divido em 5 camadas, conforme explicação a seguir:
  • Applications: Onde sua aplicação roda;
  • Application Framework;
  • Libraries;
  • Android Runtime;
  • Linux Kernel. 
Você desenvolve sua aplicação em Java, utilizando um conjunto de ferramentas para transformar seu Bytecode em formato Dalvik / Android Runtime, e empacotar em um arquivo "apk".

Geralmente, usamos o Eclipse para desenvolver aplicações Android, embora várias outras IDEs possam ser utilizadas.


Distribuição da aplicação Android

Uma aplicação Android (apk) pode ser distribuída das seguintes formas:
  1. Através do utilitário “adb”, plugando-se o dispositivo em um computador com o Android SDK instalado;
  2. Baixando o arquivo “apk” e instalando em um dispositivo;
  3. Baixando a partir de um repositório privado (Por exemplo: Aptoide);
  4. Baixando a partir da Google Play Store;
  5. Baixando a partir da Amazon AppStore;


A vantagem de usar um repositório como o Aptoide ou uma Store (Google Play ou Amazon) é a atualização automática das aplicações no dispositivo.


Para colocar uma aplicação na Google Play Store é necessário criar uma conta e pagar US$ 25,00 para se registrar como desenvolvedor Android (http://developer.android.com/distribute/googleplay/start.html)



iOS

iOS é derivado do Mac OS X, que é um sistema operacional proprietário baseado no kernel do Unix (Darwin - http://en.wikipedia.org/wiki/Darwin_(operating_system)).


Fonte: https://developer.apple.com/library/IOs/referencelibrary/GettingStarted/GS_Security_iPhone/Art/security-layers.jpg

No iOS, Existem quatro camadas de abstração:
  • Core OS;
  • Core Services;
  • Media Services;
  • Cocoa Touch.
Você desenvolve sua aplicação utilizando uma linguagem que compila em código nativo ARM, através de um processo de Cross-Compile. Atualmente, você pode criar aplicações usando: Objective C ou Swift

Você só pode criar aplicações iOS utilizando o Xcode, em um computador Apple, rodando o Mac OSX. Não existe outro meio LEGAL de fazer isso.


Uma alternativa é usar um serviço como o MacInCloud, que aluga computadores Mac para uso via rede: http://www.macincloud.com/

A principal diferença para as aplicações Android é que não existe uma VM, ou seja, sua aplicação é compilada em código nativo do dispositivo e executada como qualquer outro programa.

Uma aplicação iOS é um arquivo “ipa” que contém a aplicação e todos os seus recursos necessários.



A IDE Xcode inclui um Simulador iOS, que permite testar a aplicação.

Distribuição da aplicação

Ao contrário do Android, não é possível executar uma aplicação iOS em um dispositivo móvel real, sem ter um Certificado e um “Provisioning Profile” emitido pela Apple.


Mesmo que o aparelho seja de sua propriedade, você não conseguirá executar sua aplicação nele. Não adianta plugá-lo no seu Mac.


Você tem as seguintes opções para distribuir aplicações iOS:
  • AdHoc - Instalando manualmente em até 100 dispositivos – iOS Developer Program (US$ 99,00 por ano);
  • Através da AppStore – iOS Developer Program (US$ 99,00 por ano);
  • Corporativamente – Instalando a partir de uma rede interna, em dispositivos da sua Empresa – iOS Developer Enterprise Program (US$ 299,00 por ano);
Se você quiser distribuir suas aplicações para o público em geral, deve optar pelo iOS Developer Program (US$ 99,00 por ano) e submeter suas apps para publicação na AppStore.

Aplicações Android

Uma aplicação Android é um conjunto de componentes, que podem ser:
  • Activities
  • Services
  • Content Providers
  • Broadcast Receivers
Geralmente, uma aplicação Android possui uma ou mais "telas", que são chamadas de "Activities": 


Uma Activity é composta por elementos gráficos, como: Caixas de Texto e botões, por exemplo. Esses elementos gráficos são conhecidos como "Views", e o seu arranjo visual na Activity é comandado por um arquivo XML. Então, uma Activity é composta por:
  • Uma classe Java, que contém o tratamento de todos os eventos que podem acontecer (carga, clique de botão etc);
  • Um arquivo de layout XML, que determina quais Views estão disponíveis e como estão arrumadas.
Toda Activity tem um Ciclo de Vida, cujos Eventos podemos interceptar:



Quando ocorre uma transição de estado na Activity, um método "Callback" é invocado na classe Java. Se você quiser, poderá sobrescrever o método, respondendo, desta forma, ao Evento. Eis os principais métodos de "Callback" de eventos do ciclo de vida:
  • onCreate - quando a actitivy está para se tornar "Running";
  • onStart - a activity está para se tornar visível;
  • onRestart - a activity estava "Stopped" e foi ativada novamente;
  • onResume - a activity vai começar a interagir com o usuário, recebendo input e eventos;
  • onPause - a activity está parcialmente oculta. Neste método, você pode fazer "commit" de alterações ou parar animações, de modo a poupar recursos do sistema;
  • onStop - a activity está totalmente oculta por outra activity e esta função é chamada;
  • onDestroy - a activity está para ser eliminada da memória.

Analisando uma aplicação real

Vamos carregar uma aplicação Android, o “BioMago” e analisar como foi construída. Para isto, abra a View SVN - Repositories ("Window / Show View / SVN / Repositores") e adicione a URL: "http://biomago.googlecode.com/svn", conforme a figura:


Faça "checkout" do projeto "BioMago". Deve dar erro no Projeto, devido à versão antiga da plataforma Android. Para corrigir, abra o arquivo "project.properties", mudando a plataforma para "android-19" (ou então qualquer uma que você tenha instalada.

Para executar a aplicação, selecione o projeto e, no menu de contexto, selecione: "Run As / Android Application". Uma instância de Emulador será iniciada para você.


Se tudo der certo, você verá o emulador. Cadastre um novo nome e data de nascimento e comande a geração do gráfico de biorritmo.

Analise a aplicação com calma.

Mão na massa

Vamos criar uma aplicação móvel Android.

Você criará uma aplicação simples, que calcula o fatorial de um número informado e exibe o resultado como um alerta.  Eis a imagem da aplicação:


Você vai digitar um número inteiro, clicar no botão e o resultado da sua fatoração aparecerá como um alerta.

Nos arquivos do curso, dentro da sessão 1, tem uma classe Java: “FatoracaoBO.java”, que possui o método: “fatorar”. Este método recebe um número inteiro longo e retorna um String, com a multiplicação dos fatores primos.

Vocês usarão essa classe para criar a aplicação.

1) Crie um projeto de aplicação Android no Eclipse:
  1. Menu “File / new Project” e depois: “Android / Android Application project”;
  2. Preencha os campos:
  • Application name: “Fatorar”;
  • Project name: “FatorarProj”;
  • Package name: “org.thecodebakers.fatoracao”;
  • Minimum required SDK: Selecione API 10 – Android 2.3.3 – Gingerbread;
  • Target SDK: Selecione API 17 – Android 4.2 – Jelly bean;
  • Compile with: Deixe como está;
  • Theme: Selecione “none”;
  • Clique em “next”, depois “next”, depois “next” e por último: “finish”;


O projeto “appcompat_v7” foi criado pelo ADT e deve ser mantido aberto na Workspace!

2) Modifique o layout da Activity
Aumente o zoom da janela (botão lupa “+”, na barra da janela gráfica da activity;
a) Ceritifique-se de usar a API correta para renderizar o layout (19 no seu caso):


b) Delete a “TextView” que está com o texto “Hello world”.
c) Arraste uma nova TextView, da “Pallete” (Form widgets) para a tela e posicione:


d) Clique com o botão direito sobre a nova “TextView” e selecione “Edit text”;
e) Modifique o texto para “Digite o número:”;
f) Na “Pallete”, selecione a pasta “Form fields”. Arraste um campo numérico para debaixo da legenda. É o campo com um número (42) nele:


g) Está quase terminando... Na “Pallete”, abra novamente a pasta “Form widgets” e arraste um “Button” para a tela, posicionando-o abaixo do campo numérico:


f) Salve o arquivo.

3) Criar o “event handler” do clique do botãozinho

a) Vamos associar o evento “OnClick” do botão a um nome de método Java. Selecione o botão, com o botão direito do mouse, e escolha “Other properties” e depois “All by name”. Role para baixo até achar “OnClick” (tem uma pequena seta para baixo, no canto inferior esquerdo do menu);
b) Na janela que abriu, digite “calcular” e tecle “OK”;
c) Agora, precisamos criar o método “calcular()” na classe Java da Activity. Abra o arquivo “src/org.thecodebakers.fatoracao/MainActivity.java” e crie o seguinte método:

public void calcular(View view) {
}

d) Vai dar erro no tipo “View”, resolva com “Quick fix”, importanto a classe “android.view.View”;
e) Agora, precisamos referenciar o campo numérico no layout, de modo a pegar seu conteúdo:

EditText txtNumero = (EditText) this.findViewById(R.id.editText1);
  • Como foi que eu descobri o nome do campo no layout? Abra o layout, mude para “activity_main.xml”, na aba inferior da janela, e procure o tag <EditText>, pegando a propriedade “id”;
f) Já temos uma referência para a EditText, ou seja, o campo numérico, agora, precisamos pegar seu conteúdo:

long numero = Long.valueOf(txtNumero.getText().toString());

g) Arraste o arquivo “FatoracaoBO.java” para dentro do pacote onde está o arquivo “MainActivity.java”. Ou então, selecione “import / file system” e selecione o arquivo “FatoracaoBO.java”;

h) E podemos invocar o método “fatorar()” da nossa classe “FatoracaoBO”:
String resultado = FatoracaoBO.fatorar(numero);

i) Agora, precisamos mostrar um alerta com esse String que recebemos:

new AlertDialog.Builder(this).setMessage("Resultado: " + resultado)
.setNeutralButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
} }).show();


Verifique se o seu método está assim:


public void calcular(View view) {
  EditText txtNumero = (EditText) this.findViewById(R.id.editText1);
  long numero = Long.valueOf(txtNumero.getText().toString());
  String resultado = FatoracaoBO.fatorar(numero);
  new AlertDialog.Builder(this).setMessage("Resultado: " + resultado)
    .setNeutralButton("OK", new DialogInterface.OnClickListener() {
      public void onClick(DialogInterface dialog, int which) {
    }}).show();
}


4) Execute o projeto

Você já deve ter um Emulador criado. Abra o executável “Android SDK Manager” (veja no guia de instalação do curso) e certifique-se que exista pelo menos um Emulador criado.

Selecione o projeto e, com o botão direito, selecione: “Run as / Android Application”. Ele poderá perguntar se deseja iniciar um Emulador, diga que sim.


PRONTO!

Doeu? Não? Pode parecer que você não entendeu nada, mas isso não é verdade! Você aprendeu rapidamente tudo o que precisa saber sobre plataformas móveis e, ainda por cima, criou uma aplicação do zero.