Baixe o app para aproveitar ainda mais
Prévia do material em texto
DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 1 Desenvolvimento Multiplataforma Mobile DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 2 Desenvolvimento Multiplataforma Mobile 1. Introdução ao Desenvolvimento Multiplataforma 1.1 Introdução Com o passar dos anos, o desenvolvimento de aplicativos mobile está crescendo consideravelmente. Esse aumento é devido ao progressivo aumento nas vendas de smartphones e aos investimentos que as grandes empresas têm realizado nesse setor. Essa notícia também é importante para o mercado de trabalho na área de desenvolvimento de aplicativos móveis, que vem oferecendo cada vez mais oportunidades para os desenvolvedores independentes. No entanto, se formos analisar de uma forma mais abrangente, construir aplicativos móveis requer uma decisão muito importante, que é: Qual plataforma escolher para começar o desenvolvimento da aplicação? Atualmente existem diversas plataformas de desenvolvimento para o ambiente mobile, são elas: O Android, uma das plataformas mais utilizadas em smartphones no mundo, desenvolvida e mantida pela Google. Para desenvolver aplicativos nativos para ela, é necessário que o desenvolvedor possua experiência na linguagem Java e utilize a sua SDK (Standart Development Kit), ou Android SDK, para auxiliar no desenvolvimento das aplicações. O iOS, muito utilizado, principalmente nas classes sociais mais altas, desenvolvida e mantida pela Apple. Para desenvolver aplicativos nativos para essa plataforma, o desenvolvedor precisa de uma experiência com as linguagens Objective-C ou Swift e com o ambiente de desenvolvimento do Xcode, para auxiliar na construção das aplicações. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 3 O Windows Phone, uma plataforma em fase de crescimento que vem ganhando adeptos a cada dia. Para desenvolver aplicativos nativos para essa plataforma é necessário conhecimento da linguagem C# e do ambinete de desenvolvimento do windows e visual studio, para auxiliar na implementação das aplicações. É importante destacar que existem outras plataformas no mercado, como a Blackberry, o Firefox OS e o Ubuntu, mas possuem uma faixa bem menor do mercado de aplicações mobile. Outra coisa que precisamos enfatizar é que cada plataforma possui a sua suíte de desenvolvimento, onde estão integradas as linguagens e ferramentas de implementação. No próximo tópico da seção, iremos compreender como construir aplicações híbridas, ou seja, construir aplicativos móveis com uma linguagem em comum para todas as plataformas e depois compilar esse código, gerando um aplicativo para cada plataforma a partir do mesmo código-fonte. 1.2 Aplicações Híbridas Como foi explanado, para o desenvolvimento de um aplicativo móvel nativo nos dias de hoje, é necessário um conhecimento em várias linguagens de programação e ferramentas de desenvolvimento. Mas, com isso, surgem alguns questionamentos importantes: e se não tivermos uma equipe de desenvolvimento multidiciplinar? se quisermos construir o nosso aplicativo para todas as plataformas, será necessário desenvolver um aplicativo para cada uma delas? Para responder esses questionamentos, entra a ideia de Aplicações Híbridas. Com esse tipo de aplicações é possível criar aplicativos multiplataformas. Nos dias de hoje, existem dois frameworks que ajudam bastante nesse tipo de desenvolvimento, são eles: o Cordova/Phonegap e o Xamarim. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 4 Com o Cordova/Phonegap é possível criar aplicativos com a linguagem HTML 5/ CSS e Javascript e torná-lo nativo de qualquer plataforma citada anteriormente. Já com o Xamarim, o desenvolvimento se dá a partir da linguagem C#, mas o aplicativo também se torna nativo a qualquer plataforma. Nesta disciplina será estudado o Cordova/Phonegap. Esse framework open-source de desenvolvimento móvel, encapsula o código escrito em HTML 5/ CSS e Javascript em uma casca nativa que executa um navegador e a partir de uma API javascript tem acesso aos recursos nativos do dispositivo. Essa janela de navegador nativo que irá executar o código HTML é chamada de WebView. Uma WebView pode ser facilmente criada pelos códigos nativos Android, iOS e Windows Phone como um componente. Esse tipo de aplicativo é chamado de híbrido, por ser desenvolvido em linguagem Web e compilado para qualquer plataforma. É importante destacar que o papel mais importante no momento da compilação do aplicativo, é do Phonegap/Cordova, pois a aplicação executada sobre a WebView do dispositivo e o acesso aos recursos nativos estão limitados ao poder da API. Para alguns sistemas como Android e iOS, a API consegue acessar quase todos os recursos nativos, mas para outros, como Windows Phone e Symbian, o acesso ainda é limitado. No proximo tópico da seção, iremos entender qual a diferença entre o Phonegap e o Cordova e por que vamos utilizar mais o cordova durante as nossas aulas. 1.3 O Cordova e o Phonegap O framework Cordova e o Phonegap são essencialmente a mesma coisa. Basicamente, o Phonegap é uma distribuição proprietária do Cordova. Para tentar melhorar e facilitar o desenvolvimento de aplicações mobile, em 2009 a empresa Nitobi criou o Phonegap, um framework open source que utiliza padrões web para criar aplicações móveis. Com ele é possível desenvolver um aplicativo utilizando DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 5 os padrões web e, depois de finalizado, compilar o código para a plataforma mobile de preferência. Isso revolucionou a maneira de desenvolver aplicativos móveis. Observando isso, a Adobe comprou a empresa Nitobi em 2011. Nessa época a adobe estava investindo pesado para tentar lançar a velha tecnologia Flash como ambiente de desenvolvimento multiplataforma mobile, mas o projeto depois de compilado ficava muito pesado e eles não conseguiram ganhar mercado, vendo no Phonegap uma grande oportunidade de alavancar essa parte de desenvolvimento mobile da empresa. Mesmo comprando a Nitobi, a Adobe doou todo o código do projeto do Phonegap para a Apache Fondation, mantendo dessa forma o código do framework em uma comunidade de desenvolvimento ativa e facilitando, assim, o processo de melhoria do produto, deixando que outras empresas pudessem contribuir para o projeto. Por motivo de direitos autorais e interesse da Adobe pelo nome comercial que o Phonegap já havia ganho, o projeto ganhou o nome de Apache Cordova. Com tudo isso, o Phonegap passou a ser apenas uma distribuição do projeto Apache Cordova. E o principal produto referente ao Phonegap passou a ser o Adobe build e o Adobe App que abordaremos nas próximas aulas. Durante o nosso curso iremos abordar o Apache Cordova diretamente, pois como o Phonegap é uma distribuição do Cordova, as novidades, como novos plug-ins e funcionalidades tendem a ser inseridas primeiro no Apache Cordova. No próximo tópico, iremos abordar um pouco mais as diferenças entre aplicativo nativo e aplicativo híbrido. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 6 1.4 Entendendo Aplicativo Nativo e Aplicativo Híbrido Começaremos esse tópico com um questionamento: É melhor criar aplicativos nativos ou híbridoos com Cordova? A resposta é: depende do aplicativo que se deseja desenvolver. Por exemplo, um aplicativo híbrido bem construído se integra à plataforma da mesma forma que um nativo. Então, do ponto de vista do usuário, não há muita diferença. No entanto, algumas coisas devem ser observadas e uma delas é a performance. Se o aplicativorealmente exigir bastante processamento do dispositivo, como Jogos 3D, aplicações que precisem de multithreading, aplicativos que executem serviços em background, é importante escrever todo o código em linguagem e ferramentas nativas para cada plataforma. Entretanto, boa parte dos aplicativos não se encaixa nessas categorias, então híbrido é o suficiente. Outra coisa que precisamos considerar quando formos construir um aplicativo é o custo de desenvolvimento. Com Cordova, um único código serve todas as plataformas e não é necessário ter equipes específicas desenvolvendo com a linguagem Java no Android, a linguagem Objective-C ou Swift no iOS e C# no Windows Phone. Mas se você estiver em uma empresa grande e possuir recursos para ter uma equipe de desenvolvimento para cada plataforma, com certeza é melhor manter dessa forma, pois a API do Cordova nos dá acesso a muitos recursos nativos; no entanto, a API nativa é que possui todas as possibilidades à disposição. Então, antes de começar a implementar, é importante planejar e decidir qual será o aplicativo criado: se ele for utilizar muito processamento do dispositivo ou recursos nativos exclusivos de cada plataforma, é melhor desenvolver em linguagem nativa; no entanto, se o aplicativo não for usar essas características e você quiser disponibilizá- DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 7 lo para todas as plataformas de forma rápida e barata é melhor utilizar o Phonegap Cordova. Na próxima seção iremos revisar um pouco das tecnologias Web, como HTML 5/ CSS e Javascript, além das bibliotecas JQuery e JQuery Mobile, afim de facilitar o entendimento das demais aulas. 2. Revisão – Linguagens da Web As três principais tecnologias que utilizaremos para desenvolver aplicativos web são HTML, CSS e Javascript. Nesta seção revisaremos essas tecnologias para garantir que não pairem dúvidas quando avançarmos no material. 2.1 Introdução ao HTML As páginas visualizadas na Web são apenas documentos de texto. Esses textos são encapsulados em tags HTML ou linguagem de marcação, que informam ao seu navegador sobre a estrutura do documento. Com essas informações, o navegador pode formatar e exibir as informações da sua página web. Pode ser observado no trecho da página web mostrado no exemplo 1, a seguir, que na primeira linha, a tag <h1> encapsula o texto “Olá usuário”. É importante observar que existe uma tag de abertura e uma tag de fechamento. A tag de fechamento possui uma barra (/) como segundo caractere, enquanto a de abertura não tem. Abertura: <nome_tag> Fechamento: </nome_tag> <h1>Olá Usuário</h1> <p>Obrigado por visitar a minha página Web.</p> <p>Espero que goste.</p> Exemplo 1 – Trecho documento HTML DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 8 As tags podem ser classificadas como simples ou compostas. As tags simples não possuem uma tag para fechamento, já a tag composta necessita de uma tag de abertura e fechamento. Exemplo tag simples: <hr/> (cria uma linha horizontal) Exemplo tag composta: <p></p> Também é possível colocar tags HTML dentro de outras tags HTML. É possível observar a seguir, no exemplo 2, a tag de lista não ordenada <ul> que contém três itens de lista <li>. No navegador, essa composição cria uma lista não ordenada com cada item na sua própria linha. Quando uma tag está dentro de outra, as internas são chamadas de elementos filhos da tag mãe, que é quem encapsula essa tag. Com isso, as tags <li> são filhas de <ul>. <ul> <li>Maçã</li> <li>Laranja</li> <li>Kiwi</li> </ul> Exemplo 2 – Lista não ordenada em HTML Um documento HTML possui duas seções: o cabeçalho e o corpo. O corpo é onde se coloca todo o conteúdo que será exibido ao usuário; já o cabeçalho possui informações de configuração da página, invisíveis para o usuário. O corpo e o cabeçalho da página web são encapsulados em uma tag <html>. É possível observar no seguinte exemplo 3 que os exemplos mostrados anteriormente agora estão no contexto apropriado de um documento HTML. Na parte do cabeçalho <head>, apenas tem a tag <title>, que define o título da página. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 9 <html> <head> <title>Minha Página</title> </head> <body> <h1>Olá Usuário</h1> <p>Obrigado por visitar a minha página Web.</p> <p>Espero que goste.</p> <ul> <li>Maçã</li> <li>Laranja</li> <li>Kiwi</li> </ul> </body> </html> Exemplo 3 – Documento HTML Também é importante destacar que as tags podem possuir atributos. Esses atributos podem ser definidos como as propriedades de uma tag (elemento). O HTML possui diversas tags, e cada uma delas possui o seu significado e a sua funcionalidade para a inserção de um novo elemento na página web. É possível visualizar na lista abaixo algumas dessas tags e as suas funcionalidades. Cabeçalhos: servem para iniciar seções dentro de um documento HTML, distintos do restante do texto, identificando o início de um tópico. Existem seis tamanhos a serem utilizados <h1>, <h2>, <h3>, <h4>, <h5>, <h6> e todos eles devem ser fechados por suas tags de fechamento, </h1>, ..., </h6>. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 10 Parágrafos (<p></p>): Demarca o início e o fim de um parágrafo. Pode-se também utilizar o alinhamento de textos através do atributo align (atributo que alinha o elemento à esquerda, à direita, no centro ou justificado). Pula Linha (<br/>): Essa tag quebra uma linha, porém não encerra o parágrafo. Essa é uma tag simples, ou seja, não existe tag de fechamento </br>. Tags para criar efeitos no texto: Negrito (<b></b>) Itálico (<i></i>) Sublinhado (<u></u>) Tachado (<s></s>) Aumentar a fonte (<big></big>) Diminuir fonte (<small></small>) Criação de Listas Listas Ordenadas (<ol></ol>) Listas Não Ordenadas (<ul></ul>) Itens das listas (<li></li>) Criação de formulários: Os elementos que compõem um formulário são encapsulados dentro das tag composta <form></form> Esses elementos podem ser: caixa de texto, botões, radio buttons, check box. Todos eles podem ser criados a partir da tag simples <input/>. O que define cada elemento é o atributo type. <input type=”nome_elemento”/> Ex. <input type=”button”/>, <input type=”text”/> DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 11 Inserção de Imagens Para inserir imagens no documento HTML, utiliza-se a tag simples <img/> e os atributos: src define o local onde a imagem se encontra, width determina a largura da imagem em pixels, height determina a altura da imagem em pixels. Ex. <img src=”nome_imagem.jpg”/> Inserção de links Os links em páginas HTML servem para ligar conteúdos, para que sua página seja dinamizada, possibilitando a navegação. A tag utilizada para a criação de links é <a></a> com o atributo href: serve para indicar a página a ser carregada. Conforme explanado, no HTML existem várias tags para definição de conteúdo. Além das tags citadas, existem várias outras que iremos estudar durante o nosso curso para que possamos criar aplicativos com mais funcionalidades. No próximo tópico vamos revisar um pouco do CSS (Cascading Style Sheet), também conhecido como folha de estilo. Com ele é possível estilizar os elementos do documento HTML. 2.2 Introdução ao CSS Conforme foi revisado no tópico de Introdução ao HTML, os navegadores apresentam determinados elementos com estilos distintos (por exemplo,os Cabeçalhos são grandes e em negrito, parágrafos são seguidos por uma linha em branco, as imagens inseridas sempre são centralizadas ao atributo align, e assim por diante). Para atribuir estilos mais avançados nos elementos da página HTML, é necessário utilizar o CSS, ou folha de estilo em cascata. O CSS é uma linguagem de folhas de estilo usada para definir a apresentação visual de um documento HTML. Pode-se usá- lo para definir propriedades simples como a cor de um texto, seu tamanho e estilo DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 12 (negrito, itálico etc.), ou propriedade complexas, como layout da página, sua opacidade e muito mais. Pode ser observada no exemplo 4, a seguir, uma regra CSS que informa ao navegador para exibir qualquer texto encapsulado no elemento body a ser da cor vermelha. Neste exemplo, é importante destacar que body é o seletor (especifica o que foi afetado pela regra). A declaração possui um conjunto de propriedade e seus valores. Sendo neste exemplo color a propriedade e red o valor da propriedade color. body {color : red} Exemplo 4 - Uma regra CSS As propriedades em CSS são predefinidas, o que significa que você não pode simplesmente inventá-las. Cada propriedade espera receber um valor apropriado e podem existir diversos valores para uma determinada propriedade. No exemplo 5 que veremos a seguir podem ser observadas algumas das propriedades mais comuns do CSS. As propriedades que armazenam cores podem receber esses valores pré-definidos, como red, green, gray, ou usando uma notação de código hexadecimal do HTML, que usa uma (#) cerquilha no início e três pares de dígitos hexadecimais (0-F), representando da esquerda para direita os valores vermelho, verde e azul (cor verde #00FF00). Para propriedades que recebem medidas, os valores atribuídos são 10px, 75% ou 1em. body{ color:red; background-color: #808080; //cinza font-size: 12px; font-style: italic; font-weight: bold; font-family: Arial; DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 13 Exemplo 5 – Exemplo declaração CSS No CSS os seletores mais comuns são: o seletor universal representado por um (*), o seletor de classe representado por um (.), o seletor de id representado por (#) e o seletor de tag representado pelo (nome_tag). No Exemplo 6 pode ser visualizados todos eles. *{color: red} li {font-style: italic} .classe1{font-style: italic; font-size: 10px} #idP{background-color: yellow} <h1 class=”classe1”>Olá Usuário</h1> <p id=”idP”>Obrigado por visitar a minha página Web.</p> <p>Espero que goste.</p> <ul> <li class=”classe1”>Maçã</li> <li>Laranja</li> <li>Kiwi</li> </ul> Exemplo 6 – Exemplo de seletores CSS No exemplo 6 acima, podemos verificar que o seletor (*) irá alterar toda a estética dos elementos da página HTML, modificando as cores para vermelho. O seletor (li) irá alterar apenas os elementos <li> da lista não-ordenada, para o estilo de fonte italic. O seletor (.) irá alterar a estética do elemento que estiver com o atributo class para o estilo de fonte italic e tamanho de fonte 10 pixels. Por fim, a estética da tag que estiver com o atributo idP será alterada pelo seletor (#) para uma cor de fundo amarela. Observando todos esses seletores é possível pensar no seguinte questionamento: e se tivermos mais de um seletor para um mesmo elemento? DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 14 Essa pergunta pode ser respondida através do conceito de hierarquia de seletores. O seletor com mais importância para o CSS é o id, depois vem o de classe, o de elemento e por fim, e não menos importante, o seletor universal. Para aplicar as regras CSS, é necessário criar uma folha de estilo e referenciá-la dentro do documento HTML. No exemplo 7, a seguir, é possível observar o encapsulamento da tag link com o atributo href, que irá referenciar o arquivo do documento CSS, que neste caso é efeitosVisuais.css. <html> <head> <title>Minha Página</title> <link rel=”stylesheet” href=”efeitosVisuais.css” type=”text/css”/> </head> <body> <h1 class=”classe1”>Olá Usuário</h1> <p id=”idP”>Obrigado por visitar a minha página Web.</p> <p>Espero que goste.</p> <ul> <li class=”classe1”>Maçã</li> <li>Laranja</li> <li>Kiwi</li> </ul> </body> 16. </html> Exemplo 7 – Inserindo folha de estilo no documento HTML O exemplo 8 mostra o conteúdo de efeitosVisuais.css. Este arquivo deve ser salvo no mesmo local/pasta do arquivo HTML. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 15 *{color: red} li {font-style: italic} .classe1{font-style: italic; font-size: 10px} #idP{background-color: yellow} Exemplo 8 – Uma folha de estilo simples Vimos nesta seção alguns dos principais fundamentos do CSS. É importante que você pesquise mais um pouco e se aprofunde mais no assunto. Na próxima seção, vamos estudar um pouco da linguagem Javascript e observar como ela fornece um pouco de dinâmica para sites estáticos que apenas possuem o código HTML. 2.3 Introdução ao Javascript Até este ponto do nosso estudo, sabemos estruturar documentos HTML e modificar a estrutura visual com CSS. Agora vamos aprender a realizar tarefas na web, deixando a interação com o usuário de forma mais dinâmica. O Javascript é uma linguagem de script que pode ser adicionada a uma página HTML. Uma página com essa linguagem se torna mais interativa para o usuário, pois é possível verificar os valores digitados em formulários web para garantir a sua validação, verificar o clique do botão, criar animações de elementos nos navegadores, esconder ou mostrar informações ao usuário de acordo com o que ele clica, enviar mensagens para um servidor web para executar alterações no banco de dados sem atualizar a página atual e muito mais. Como qualquer linguagem, o Javascript possui varáveis, arrays (arranjo), objetos, operadores e todas as estruturas de controle, como estruturas condicionais simples e compostas e estruturas de repetição. No exemplo 9 é possível visualizar alguns conceitos básicos da linguagem. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 16 var comidas = [“arroz”, “feijão”, “macarrão”]; for(var i = 0; i < comidas.length; i++){ if(comidas[i] == “macarrão”) { alert(comidas[i] + “ é massa”); }else{ alert(comidas[i] + “ não é massa”); } } Exemplo 9 – Sintaxe básica javascript Observando o exemplo 9 é possível visualizar alguns detalhes da programação em javascript: Na linha 1, pode-se visualizar a declaração de array (arranjo) de objetos do tipo string. O javascript é uma linguagem fracamente tipada, ou seja, para declarar uma variável você não precisa definir o seu tipo. É importante também lembrar que o uso de ponto e vírgula “;” no javascript é opcional. Veja abaixo o exemplo de declaração de variáveis. [var] nome [= valor]; : o que estiver entre colchetes é opcional no momento da declaração. Exemplo de declarações var nome, var idade = 20, peso = 80.5; Na linha 2, observamos um laço for que inicializa uma variável com identificador i com o valor 0; a saída do laço ocorre quando i chegar ao valor do tamanho do array, ou seja, a quantidade de elementos do vetor. Na linha 3, é verificado a cada interação do for se o elemento atual do array é igual a string “macarrão”. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 17 Na linha 4, é exibida, através da função alert, uma mensagem ao usuário se oelemento atual do array for igual a “macarrão”. Na linha 6, é exibida, através da função alert, uma mensagem ao usuário se o elemento atual do array não for igual a “macarrão”. É importante destacar alguns pontos da sintaxe javascript: A palavra var é opcional na declaração de variáveis; O ponto e vírgula (;) é opcional no final de cada instrução; Blocos de códigos ficam entre chaves ({}); O array começa do índice 0; Para concatenar duas strings, utiliza-se o operador “+”. Para criar uma maior dinâmica com o usuário, precisamos manipular o DOM (Document Object Model) do HTML através do javascript. O HTML DOM é um padrão para recuperação, alteração, adição ou remoção de elementos HTML e suas propriedades. Sobre o DOM: Todos os elementos são representados como uma estrutura de árvore na memória; O documento inteiro é um nó; Cada elemento HTML é um nó; O texto dos elementos HTML são nós; Cada atributo do HTML é um atributo de um nó; Comentários são nós de comentário. O exemplo 10 exibe um pequeno trecho de código Javascript, no qual o mesmo altera um texto da página quando o usuário clica no botão. <html> DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 18 <head> <title>Minha Página</title> <script type=”text/javascript” charset=”utf-8”> function helloWorld(){ document.getElementById(“idElemento”).innerHTML = “Hello World”; } </script> </head> <body> <h1 id=”idElemento”></h1><br/> <input type=”button” onClick=”helloWorld()”/> </body> </html> Exemplo 10 – Manipulando onClick simples Observando o exemplo 10, é possível visualizar: Linha 4, criação de um bloco de script no cabeçalho do documento; Linha 5, definição de uma função javascript helloWorld() dentro do bloco de script; Linha 6, uma instrução javascript que acessa o DOM do HTML a partir do comando document, e com a função getElementById(“id”) tem acesso ao elemento do Id que está sendo passado como parâmetro. O comando innerHTML atribui ao texto do elemento pego o valor da string “Hello World”; Linha 9, final do bloco script; Linha 13, criação de um botão no HTML a partir da tag <input/> e definição do evento onClick, que executará a função helloWorld quando o botão for clicado. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 19 Com uma breve explicação do funcionamento da linguagem javascript terminamos esse tópico de seção e no próximo falaremos sobre uma biblioteca que usa a linguagem javascript facilitando o desenvolvimento, chamada JQuery. 2.4 Introdução ao JQuery Antigamente o desenvolvimento de websites não possuía muitas bibliotecas que facilitassem o desenvolvimento da aplicação. Toda a dinâmica e interação com usuário tinha que ser feita usando a linguagem javascript pura. No entanto, hoje em dia temos muitas bibliotecas que facilitam o desenvolvimento web. Entre elas estão JQuery, Angular JS, Prototype, o Mootools e muito mais. Nesse tópico de seção, e durante nossos projetos de aplicações de aplicativos, será apresentada a biblioteca JQuery. Então, vamos abordar um pouco alguns conceitos dessa biblioteca. Usar JQuery durante o desenvolvimento web possui algumas vantagens, entre elas estão: diminuição da quantidade de códigos gerados pela linguagem javascript, tornando o código mais compacto e fácil de ler; compatibilidade e portabilidade do seu código entre diversos navegadores, pois antigamente diferentes navegadores tinham diferentes suportes a javascript, o que poderia gerar vários erros na execução de código entre vários navegadores (Internet Explorer 6, Safari, Firefox). O JQuery já tem funções prontas que tratam essa compatibilidade para você. Para exemplificar o funcionamento do JQuery, vamos replicar a lógica do código do exemplo 10, para criarmos o exemplo 11 com a biblioteca JQuery. <html> <head> <title>Minha Página</title> DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 20 <script type=”text/javascript” src=”jquery.js”></script> <script type=”text/javascript” charset=”utf-8”> function helloWorld(){ $(“#idElemento”).text(“Hello World”); } </script> </head> <body> <h1 id=”idElemento”></h1><br/> <input type=”button” onClick=”helloWorld()”/> </body> </html> Exemplo 11 – Manipulando com JQuery A linha 4 inclui a biblioteca jquery.js. Usando o atributo src da tag <script>, ela usa o caminho relativo, o que significa que o arquivo fica na mesma pasta (diretório) da página que a está usando. No entanto, vários domínios deixam-na disponível para você acessá-la a partir de url, um deles é o da google. Na linha 7, pode ser visualizado que a quantidade de código para acessar o elemento no DOM diminui bastante. A partir de agora, usamos o cifrão ($) seguido de parênteses $() para definir qual elemento acessar a partir do id passado por parâmetro. E ao invés de usarmos o innerHTML, usamos a função text() para atribuir o texto ao elemento. Com essa pequena descrição do funcionamento da biblioteca JQuery, encerramos a segunda seção, na qual revisamos algumas das principais tecnologias usadas no desenvolvimento web. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 21 No próximo tópico de seção, iremos criar a tela principal de um aplicativo para um diário eletrônico. 2.5 Criando Tela Principal de um Aplicativo – Diário Como explicado anteriormente, o Phonegap/Cordova utiliza linguagem HTML, CSS e Javscript para desenvolvimento de aplicativos multiplataformas. Como pode ser visto no exemplo 12, a seguir, a cor de background do aplicativo é um ciano e um texto com o nome “Diário” está no centro da tela. Se o usuário clicar no nome, uma mensagem é exibida informando que o aplicativo está em construção. O código da aplicação está dividido em três arquivos e pode ser visualizado nos exemplos 12, 13 e 14; o primeiro é o código HTML, com nome de arquivo index.html; o segundo é o código em CSS, com nome de arquivo index.css; e o último, o arquivo javascript chamado de index.js. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>Hello World</title> </head> <body> <div id="idDiario"> <h1 onClick="mensagem()">Diário</h1> </div> <script type="text/javascript" src="js/index.js"></script> DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 22 </body> </html> Exemplo 12 – Arquivo index.html Informações importantes do código do exemplo 12: Nas linhas 5 e 6 podemos visualizar algumas configurações na tag meta do Phonegap. Algumas configurações são colocadas no head do HTML e outras são colocadas em um arquivo XML que será explicado depois. Na linha 8, é possível observar o código de inclusão de um arquivo CSS, chamado index.css. Na linha 15, observamos o include de um arquivo javascript, chamado index.js; nesse arquivo está a tarefa que será executada quando o usuário clicar na string “Diário”, já que esta possui o evento onClick. #idDiario { font-family: Arial;font-size: 16; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -23px; } body{ background-color: #00ffff; } DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 23 Exemplo 13 – Arquivo index.css Informações importantes do exemplo 13: Na linha 1 podemos observar a definição de uma regra CSS que possui o seletor de id, no qual o id chamado é “idDiario”, que se refere a string “Diário” que está contida na tag <h1>. Entre as linhas 2 e 10 está toda a configuração estética da string “Diário” no HTML. Na linha 12 podemos observar a definição de uma regra CSS que possui o seletor de elemento, no qual o elemento escolhido é o body. Na linha 13, atribuímos a cor ciano na cor de background da página HTML. function mensagem(){ alert("O Aplicativo está em construção"); } Exemplo 14 – Arquivo index.js Informações importantes do exemplo 14: Na linha 1 está a definição da função mensagem que será chamada quando a string “Diário” for clicada. Na linha 2 está a definição da função alert(), que exibirá a mensagem “O Aplicativo está em construção”, quando a função for ativada. Na próxima seção, iremos entender como funcionam alguns serviços do Phonegap criados pela adobe. São eles: Phonegap build e Phonegap App. 3. Phonegap DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 24 Nesta seção, será estudada a tecnologia Phonegap e como ela pode facilitar o desenvolvimento de aplicativos mobile multiplataforma. Iremos compreender o funcionamento de alguns de seus serviços, como o Phonegap build e o Phonegap App. Nesta apostila vamos estudar o Apache Cordova para criar nossos aplicativos. Já foi explicado que o Phonegap é uma distribuição do Cordova. O Cordova possui uma comunidade ativa de desenvolvedores; com isso, as novidades tendem a sair primeiramente para esse framework. Como nesta seção será estudado o Phonegap, precisamos conhecer alguns dos seus serviços, que ajudam no desenvolvimento da aplicação, principalmente na sua fase inicial. Esses serviços são: Phonegap Desktop: Aplicativo Desktop básico para criar e servir aplicativos Phonegap. Phonegap Developer App: Aplicativo mobile que possibilita o teste de aplicativos no celular sem precisar instalar a aplicação. Phonegap Build: Serviço remoto, que permite a criação de aplicativos remotamente (nuvem), sem precisar da infraestrutura na máquina. Agora vamos estudar cada um deles. 3.1 Phonegap Build Quando começarmos a desenvolver nosso aplicativo em Cordova, você irá perceber que uma das grandes dificuldades é configurar o ambiente de desenvolvimento, pois cada plataforma possui as suas particularidades. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 25 A aplicação pode ser desenvolvida em qualquer plataforma, pois utilizaremos HTML5, CSS e Javascript para implementação do aplicativo, mas para compilá-la é necessário seguir as regras de cada plataforma. As três principais plataformas de desenvolvimento são: Android, iOS e Windows Phone. Quando a aplicação for compilada, é necessário gerar um aplicativo nativo para cada uma delas. Por exemplo, se o aplicativo for para o Android, precisamos gerar um instalável (.apk), para isso será necessário o Android SDK. Para o iOS é necessário ter uma Mac baseado no chip Intel Xcode. Para o Windows Phone é necessário o Windows 7, 8 ou 10 e o Visual Studio. Assim, os requisitos variam para cada plataforma. Nesse contexto entra o Phonegap Build. Este é um serviço da Adobe na nuvem, que converte uma aplicação criada em HTML, CSS e Javascript em um aplicativo nativo, ou seja, ele é um compilador na nuvem. O serviço possui toda a infraestrutura de Android, iOS, e Windows Phone instalada para você. Essa explicação pode ser visualizada na figura 1, onde as aplicações criadas em HTML5, CSS e Javascript passam pelo Phonegap build e sai a aplicação nativa da plataforma. Figura 1 – Processo de compilação do Phonegap Build Como pode ser visualizado na Figura 2, o Phonegap build pode ser acessado no site https://build.phonegp.com. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 26 Figura 2 – Página Principal Adobe Phonegap Build 3.2 Adobe Phonegap Build É um serviço pago. Mas possui um acesso gratuito com algumas restrições. Se você já possuir a assinatura creative cloud da Adobe, terá acesso ao plano máximo do build; senão, é necessário pagar uma quantia de 10 dólares por mês. No plano gratuito, possuímos quase todas as vantagens do plano pago, no entanto, só podemos criar um aplicativo privado e todos os aplicativos têm um tamanho máximo. Na figura 3, podemos visualizar o plano mensal e as vantagens e desvantagens entre os planos pago e gratuito. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 27 Figura 3 – Tabela de preços e vantagens do adobe Phonegap Build Podemos observar, na figura 3, que a diferença maior entre o plano gratuito e os outros é que neste plano só podemos possuir um aplicativo privado, criar aplicativos com no máximo 50mb de tamanho e não podemos fazer o upload de plug-ins no Phonegap Build. Iremos estudar os plug-ins no Phonegap mais adiante. Na figura 4, pode ser visualizado o ambiente de aplicativos privados do Phonegap Build. A diferença entre aplicativo público e privado é que no público é necessário que o código da sua aplicação esteja no github (um sistema de compartilhamento de código), com isso sua aplicação será de código aberto e todos poderão partilhar desse código. Já na aplicação privada, você pode fazer o upload de uma aplicação criada em DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 28 HTML, CSS e Javascript a partir de um arquivo compactado (.zip), que esteja na sua máquina, dessa forma não é necessário compartilhar o código. Figura 4 – Ambiente principal Adobe Phonegap Depois de realizar o upload, clique para fazer o build, ele lhe direcionará para uma tela de configurações do aplicativo; nessa janela coloque o nome a descrição do aplicativo e clique em gerar aplicativo, ele irá demorar um pouco e irá lhe direcionar para uma janela para realizar o download da aplicação recém-criada. Na figura 5, pode ser observada a janela após o build ser criado. Nela podemos observar no canto inferior esquerdo as plataformas em que podemos realizar o download. Também é possível fazer o download do aplicativo a partir do QRCode. Figura 5 – Ambiente após o build da aplicação. 1. 2. 3. 4. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 29 Informações importantes da página, referentes a cada número de vermelho: Está disponível o download dos aplicativos gerados para cada plataforma. Está o QRCode para realização do download do aplicativo. Selecione a plataforma e leia o QRCode. Estão algumas informações sobre a configuração do aplicativo. É possível atualizar o código e passar o xml de configuração do aplicativo. É importante destacar que a plataforma mais amigável para realizarmos nossos testes é o Android, pois podemos gerar seu código de forma simples e instalar em qualquer dispositivo, sem burocracia. 3.3 Configurando o Phonegap Build Podemos realizar algumas configurações no nosso aplicativo, a partir de um código xml. Nessas configurações podemos alterar o nome, o ícone, a descrição e o autor do aplicativo. Esse código pode ser visualizado no exemplo 15. <?xml version="1.0" encoding="UTF-8"?> <widget xmlns="http://www.w3.org/ns/widgets"xmlns:gap="http://phonegap.com/ns/1.0" id="org.thiagocomputer.diario" version="1.0.0"> <name> Diário </name> <description> Meu Diário. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 30 </description> <author href="http://thiagocomputer.com.br" email="email@email.com "> Thiago Computer </author> </widget> Exemplo 15 – Arquivo config.xml Informações importantes do exemplo 15: Da linha 2 à 4, são definidos o id e as configurações de xmlns do arquivo xml, lembrando que o id deve ser único e será criado a partir de uma url que não precisa ser real (não estar em funcionamento). Na linha 7 definimos o nome da aplicação entre as tags name. Na linha 10 definimos a descrição da aplicação entre as tags description. Na linha 12 definimos os dados do desenvolvedor do aplicativo, na tag author. Para testarmos, vamos criar dentro da pasta onde estão os códigos de HTML, CSS e Javascript do nosso projeto, e criamos o arquivo xml config.xml, colando todo o código do exemplo acima dentro dele. Com o arquivo XML criado dentro da pasta do projeto, basta recriar o arquivo ZIP da aplicação e realizar o update da build no Adobe Phonegap Build. Na figura 6, pode ser visualizado onde podemos realizar o update no serviço da Adobe. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 31 Figura 6 – Update build do aplicativo Para trocar o ícone e a tela de splash do aplicativo, é necessário colocar no config.xml as tags <icon/> e <gap:splash/>. A tag <icon/> irá adicionar um ícone na aplicação. O ícone deve ser um arquivo PNG, com o tamanho dependendo do dispositivo. Exemplo: <icon src=”icon.png”/>, o atributo src define o caminho relativo no arquivo PNG. A tag <gap:splash/> irá adicionar uma tela de splash na aplicação. A tela de splash é também um PNG e pode possuir vários tamanhos, dependendo da resolução do aparelho. Se a plataforma for Android podemos usar um arquivo de 720x1280. Exemplo: <gap:splash src=”splash.png”/> Neste tópico de seção, compreendemos que o serviço Adobe Phonegap Build é importante para criarmos nossa aplicação e compilá-la para qualquer plataforma. Na DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 32 próxima seção iremos entender como instalar o Adobe Phonegap APP e o Adobe Phonegap Desktop para testar a aplicação antes de compilá-la para o código nativo do dispositivo destino. 3.4 Phonegap APP Na fase inicial do projeto, é muito grande a quantidade de testes realizados com o aplicativo. Pensando nesses testes, o Adobe criou um serviço chamado Adobe Phonegap APP. Imagine como seria inviável se toda vez que fosse necessário atualizar um aplicativo e testá-lo, uma nova compilação (build) fosse preciso. O Phonegap APP você instala no aparelho e faz o link através da rede com o projeto em sua máquina. Ele puxa a versão mais recente do código e abre no aplicativo, como se fosse o App final. Com isso, você instala o App uma vez no aparelho e sempre que atualizar na máquina, realiza acesso ao código de forma remota. 3.5 Phonegap Desktop APP O Phonegap Desktop APP é uma aplicação desktop que permite a criação de um projeto Phonegap. Ela é bem simples e cria toda a estrutura de um projeto Phonegap. Para fazer o download da aplicação acesse o link: http://phonegap.com/getstarted/ Depois de instalar a aplicação, execute-a e clique no botão “+” para criar um novo projeto, informe o local onde o projeto será salvo, o nome do projeto e seu id. O passo a passo da criação do projeto pode ser visualizado na figura 7. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 33 Figura 7 – Tela de criação de projetos Phonegap Desktop De acordo com a figura 7 e os números em vermelho: Botão para criar um novo projeto Local (Pasta) onde o projeto será criado Nome do Projeto ID do projeto Depois que o projeto for criado, ele gera um endereço que aparece embaixo da janela – um IP na porta 3000. Esse endereço deve ser anotado, pois vamos usá-lo no Adobe Phonegap App, no aparelho para executar o aplicativo remotamente. Na figura 8, pode ser visualizada a tela do projeto criado e com o endereço dele criado na rede. 1. 2. 3. 4. 5. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 34 Figura 8 – Tela de manutenção dos projetos criados 3.6 Organização de um projeto Phonegap Abra a pasta onde você mandou criar o projeto e veja o seu conteúdo. Você verá que possui várias subpastas: cordova, hooks, platforms, plug-ins, www e um arquivo config.xml. Mais adiante no nosso estudo, estas pastas serão estudadas com mais detalhe. No momento precisamos saber que todo o nosso código está na pasta www. Todo o nosso código HTML, CSS e Javascript criado deve ser colocado dentro dessa pasta. Veja que dentro dela já tem um arquivo index.html e subpastas contendo o código javascript e css. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 35 Pegue todos os arquivos criados no nosso diário e jogue dentro dessa pasta. 3.7 Adobe Phonegap App Developer Depois de ter criado o projeto no Phonegap Desktop é necessário instalar o aplicativo do Phonegap App Developer. Ele está disponível para qualquer plataforma Android, iOS e Windows Phone e pode ser encontrado nas lojas oficiais de cada sistema. Depois de ter feito o download e realizado a instalação do aplicativo, é só apertar o botão Conect, passando o IP e a porta fornecida pelo Adobe Phonegap Desktop. Ele vai realizar o download do código e carregar no browser do aparelho. Ótimo para testar rapidamente. Esse passo a passo pode ser visualizado na figura 9. Figura 9 – Tela de conexão e aplicação executando DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 36 Podem ser observadas na figura 9 duas imagens: a imagem 1 retrata o aplicativo e como você deve se conectar com a aplicação que está no computador. É importante ressaltar que a aplicação do celular e o computador devem estar na mesma rede. Já na imagem 2, pode ser visualizada a aplicação executando no browser do celular. Nesta seção, foi compreendido como funcionam os serviços da Adobe que auxiliam no desenvolvimento de um aplicativo Phonegap. Foi estudado o Adobe Phonegap Build, o Adobe Phonegap Desktop e o Adobe Phonegap App. Mesmo estudando todos esses serviços, pode ser visualizado que não temos ainda um ambiente de desenvolvimento na nossa máquina e se quisermos realmente desenvolver aplicativos profissionais, precisaremos de alguns recursos que esses serviços não nos proporcionam, como acesso a uma depuração mais detalhada do código e os plug-ins que nos vão dar acesso a elementos nativos do dispositivo, como câmera e microfone. 3.8 Criando Ambiente de Desenvolvimento no PC Nesta seção, iremos configurar o nosso ambiente de desenvolvimento local. Durante nosso curso vamos trabalhar com o framework Cordova e a plataforma Android. O código do aplicativo pode ser implementado em um bloco de notas. No entanto, sua compilação deve ser realizada para a plataforma final do desenvolvimento. Para compilar o projeto em nossa máquina iremos precisar das ferramentas listadas abaixo: Plataforma Java Development Kit (JDK) Android SDK Apache Ant NodeJs Apache Cordova DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 37 3.9 Instalação da Plataforma Java Como vamos utilizar a JDK do Android para ativar o seu emulador e testar as nossas aplicações, precisamos instalar a JDK no nosso computador. Para baixá-la é necessárioacessar o site da Oracle http://www.oracle.com/technetwork/java/javase/downloads/index.html e clicar em Java Plataform, como pode ser visualizado na figura 10 a seguir. Figura 10 – Página de download do Java Platform Como pode ser observado na figura 11, depois de ter clicado em Java Platform, aceite os termos e baixe a versão que corresponda ao seu sistema operacional. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 38 Figura 11 – Página de escolha do Java Platform Realize o download e instale a JDK no seu computador. 3.10 Criando e configurando as variáveis de ambiente Após a instalação da JDK, é preciso configurar as variáveis de ambiente do computador. Acesse a janela de configuração do sistema. Vá até o menu iniciar, clique com o botão direito do mouse sobre Computador->Propriedades para exibir a janela de configurações do sistema. Como observado na figura 12, quando a janela abrir, clique na opção Configurações avançadas do sistema para abrir a janela de propriedades do sistema. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 39 Figura 12 – Janela configurações do sistema Assim que a janela de propriedades do sistema abrir, clique no botão Variáveis do Ambiente, figura 13. Figura 13 – Janela Propriedades do sistema Na janela de variáveis de ambiente, clique no primeiro botão novo, do módulo Variáveis de usuário para %Username% (nome usuário), figura 14. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 40 Figura 14 – Configurando variáveis de Ambiente Depois de clicar no botão novo, irá abrir a caixa de diálogo Nova Variável de Usuário. Nessa caixa de diálogo adicione a variável JAVA_PATH, figura 15. Nome da variável: JAVA_PATH Valor da Variável: C:\Program Files\Java\jdk1.8.0_92 (Esse valor pode variar de acordo com a versão do JDK) Figura 15 – Configurando variável JAVA_PATH DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 41 Depois de adicionar as informações em Nome da variável e Valor da variável, clique em Ok. Da mesma forma que criamos a variável JAVA_PATH, crie as demais variáveis. Variável PATH Nome da Variável: PATH Valor da Variável: C:\Program Files\Java\jdk1.8.0_92\bin;C:\Users\Thiago\AppData\Roaming\npm Variável CLASSPATH Nome da Variável: CLASSPATH Valor da Variável: .;JAVA_PATH Variável JAVA_HOME Nome da Variável: JAVA_HOME Valor da Variável: C:\Program Files\Java\jdk1.8.0_92 Variável ANT_HOME Nome da Variável: ANT_HOME Valor da Variável: C:\Android\apache-ant Variável ANDROID_HOME Nome da Variável: ANDROID_HOME Valor da Variável: C:\Android\sdk Agora é necessário editar a variável Path do segundo botão novo, do módulo de Variáveis do sistema, figura 16. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 42 Figura 16 – Editando variável Path Procure pela variável Path, selecione e clique o botão editar. É importante perceber que essa variável já possui conteúdo. Não apague o conteúdo já existente, apenas posicione o cursor na última posição do texto e adicione a seguinte informação: ;C:\Android\sdk\platform tools;C:\Android\sdk\tools;C:\Android\apache-ant\bin Clique em Ok para salvar as configurações. 3.11 Instalando o Android SDK Para realizar o download do Android SDK, acesse o link: https://developer.android.com/studio/index.html e selecione a opção download options, figura 17. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 43 Figura 17 – Página inicial android studio Você será direcionado para as opções de download. Baixe a versão Zip do Command Line tools, figura 18. Figura 18 – Opção de download Android sdk tools Depois de realizar o download, extraia o conteúdo do arquivo baixado dentro da pasta C:\Android\sdk, como pode ser visualizado na figura 19. É importante que o conteúdo seja extraído nessa pasta, pois fizemos referência a ela nas variáveis de ambiente como ANDROID_HOME. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 44 Figura 19 – Local extrair arquivos baixados 3.12 Configurando o Android SDK Manager Próximo passo que devemos realizar é configurar o Android SDK Manager. Depois de extrair os arquivos, clique duas vezes no SDK Manager.exe para executá-lo. Ele permite gerenciar as várias versões disponíveis no SDK do Android e nele estão listadas todas as versões disponíveis, como pode ser visualizado na figura 20 DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 45 Figura 20 – Janela Android SDK Manager Como pode ser observado na figura 21, primeiro é necessário selecionar os pacotes de ferramentas básicas. Figura 21 – Pacote de ferramentas básicas do Android Para compilar o projeto, o Cordova utiliza a versão do Android 5.1.1 (API 22) do SDK. Então, é de extrema importância que o emulador seja criado nessa versão. Com isso, selecione a versão 5.1.1 (API 22) e os pacotes, SDK Platform, ARM EABI v7a System Image, Intel x86 Atom System Image, como pode ser observado na figura 22. Figura 22 – Seleção da versão do Android e pacotes DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 46 Na parte de Extras, selecione as opções de Android Suport Repository, Google USB Driver e Intel x86 Emulator Accelerator (HAXM installer), como pode ser visualizado na figura 23. Figura 23 – Seleção dos pacotes extras Como pode ser observado na figura 24, clique em Install x Packages, para instalar todos os pacotes selecionados. Figura 24 – Botão de instalação de pacotes. Por fim, aceite as licenças clicando em Accept Licence e depois em Install, como pode ser visualizado na figura 25. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 47 Figura 25 – Aceitando licenças e Instalando os pacotes 3.13 Criando um Virtual Device Depois que a instalação dos pacotes terminar, selecione o menu e escolha a opção TOOL->AVD Manager, para exibir a janela Android Virtual Device Manager. Depois clique em create, para criar o emulador, como pode ser observado na figura 26. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 48 Figura 26 – criação do emulador Configuração do Emulador: AVD Name: AVD Device: Nexus 4 (4.7”, 768 x 1280:xhdpi) Target: Android 5.1.1 – API Level 22 CPU ABI: ARM (armeabi-v7a) Para tornar a emulação mais rápida você pode verificar se o seu processador possui suporte à tecnologia HAXM, para isso é só realizar o download e instalar o utilitário da intel https://downloadcenter.intel.com/download/7838 e verificar se as opções Intel(R) Virtualization Technology e Intel VT-x with Extended Page Tables estão marcadas com yes, na aba CPU Technologies. Se tiver suporte a esta tecnologia, realize o download HAXM for Windows nesse link: https://software.intel.com/en-us/android/articles/intel-hardware-accelerated- execution-manager-end-user-license-agreement e instale na sua máquina. Depois selecione a opção: CPU ABI: Intel Atom x86 Keyboard: checkbox selecionado. 500 DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 49 Back Câmera: Emulated. Depois de configurar o emulador, clique em ok e selecione o emulador recém-criado na lista de AVD e clique no botão start, como pode ser visualizado na figura 27. Figura 27 – Lista de AVD Aguarde um momento para o emulador ser carregado; se não apresentar nenhum erro, a instalação ocorreu de forma correta. 3.14 Instalando o Apache Ant Paracriar projetos com o Phonegap/Cordova, é necessário realizar o download do Apache-ant; para isso, acesse o link: http://ant.apache.org/bindownload.cgi e faça o download do arquivo apache ant zip, como pode ser visualizado na figura 28. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 50 Figura 28 – Download Apache Ant Depois de realizar o download, extraia o conteúdo do arquivo para a pasta C:\Android e renomeie a pasta para apache-ant, pois a variável de sistema Path e HOME_ANT foram configuradas para esse caminho. A configuração final da pasta Android pode ser observada na figura 29. Figura 29 – Configuração final pasta Android. 3.15 Instalando o NodeJs As versões mais recentes do Phonegap/Cordova, mais especificamente depois da terceira, devem ser instaladas a partir do gerenciador de pacotes npm do NodeJs. Para realizar o download do NodeJs, acesse o link: https://nodejs.org/en/, como pode ser visualizado na figura 30. Durante a criação dessa apostila, estamos usando a versão v4.4.5 LTS. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 51 Figura 30 – Download NodeJs Após o download, realize a instalação com as configurações padrão. 3.16 Instalando o Cordova A instalação do Phonegap/Cordova é feita através do gerenciador de pacotes NodeJs. Acesse o Prompt de comando do Windows (através do atalho tecla Windows + r e digite cmd). No prompt execute o comando abaixo: npm install –g cordova Assim que a instalação terminar, o Prompt ficará de acordo com a figura 31 abaixo: DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 52 Figura 31 – Fim da instalação do Cordova Dessa forma terminamos toda a instalação do nosso ambiente de desenvolvimento. Na próxima seção vamos criar nossa primeira aplicação. Criando uma Aplicação com Cordova e Configuração nas Demais Plataformas Nesta seção iremos começar a desenvolver nossos aplicativos. 3.17 Criando um Projeto Android com Cordova Primeiramente, precisamos criar uma estrutura de pastas para salvar os nossos projetos. Crie a seguinte estrutura C:\Phonegap\Projetos. Ou seja, crie no disco rígido C:\ a pasta Phonegap e dentro dela crie a pasta Projetos. Agora execute novamente o Prompt de comando. Ele pode ser executado a partir do atalho (tecla Windows + r e digitar cmd) ou o menu iniciar no Windows 8.1, pesquisar por cmd, como pode ser visualizado na figura 32. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 53 Figura 32 – Atalho Windows r e Pesquisar Windows 8.1 Depois de executar o Prompt de comando, digite: cd C:\Phonegap\Projetos Assim que você digitar esse comando no Prompt, aperte Enter. Se tudo der certo, o caminho do Prompt estará como a imagem da figura 33. Figura 33 – Acessando pasta dos projetos Phonegap Para criar um projeto Phonegap/Cordova, esteja na pasta C:\Phonegap\Projetos que acabamos de criar e digite o comando abaixo: cordova create [nome_do_projeto] DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 54 Para exemplificar, vamos criar o projeto hello_world. cordova create hello_world Se tudo estiver correto, a mensagem que pode ser visualizada na figura 34 será exibida. Figura 34 – criando projeto cordova Entre na pasta do projeto com o comando abaixo: cd hello_world Adicione a plataforma de desenvolvimento ao projeto com o comando abaixo, no nosso caso será o Android: cordova platform add android No momento que a plataforma for adicionada ao projeto, o cordova realiza o download do código-fonte da plataforma para o computador e depois copia para pasta platform do projeto, como pode ser observado na figura 35. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 55 Figura 35 – Adicionando plataforma Android ao projeto Para compilar o projeto e ver sua execução no Emulador Android, execute o comando abaixo: cordova run android No momento em que o comando for executado, o projeto começa a ser compilado. Se for a primeira vez que o projeto está sendo executado, o processo é um pouco demorado, pois o cordova precisa baixar uma série de arquivos. Espere o emulador carregar e, se tudo der certo, você verá a página padrão do projeto Apache Cordova, como pode ser visualizado na figura 36. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 56 Figura 36 – Tela padrão do projeto Apache Cordova Depois que criamos o nosso primeiro projeto, é importante verificar a organização de pastas do projeto criado. Ele está localizado na pasta Projeto que criamos anteriormente. Como pode ser visualizado na figura 37, é criada a mesma arquitetura de pasta que foi criada quando criamos nosso projeto Phonegap com o Adobe Phonegap Desktop. Só que agora podemos manipular toda a arquitetura de uma maneira mais independente. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 57 Figura 37 – Arquitetura de pastas do projeto hello_world cordova. Você pode testar o projeto com o Adobe Phonegap Desktop e o Adobe Phonegap App, como pode ser observado na figura 38. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 58 Figura 38 – Executando projeto hello_world no Adobe Phonegap Desktop Como explanado anteriormente nosso código pode ser criado em um editor de texto. No entanto, é melhor criá-lo utilizado uma ferramenta que forneça recursos que ajudem no desenvolvimento. Com isso, podemos utilizar o Editor Sublime. Seu download pode ser encontrado no link: http://www.sublimetext.com/2. Depois de realizar o download do arquivo, instale no computador com as configurações padrão. 3.18 Configurações do Cordova nas demais plataformas No desenvolvimento com o framework Cordova, cada plataforma terá as suas exigências. Basicamente precisamos configurá-lo para as seguintes tarefas: desenvolver, emular, testar no aparelho e publicar. A plataforma Android é a mais genérica e amigável de todas, está disponível para Windows, Mac e Linux. Podemos dividir as quatro tarefas no Android, com a lista abaixo: Desenvolvimento: Android SDK; Emuladores: Seu emulador já está no SDK do Android; Teste em aparelho: pode ser testado em qualquer aparelho com essa plataforma; Publicar: é necessária uma conta de desenvolvedor, 25 dólares uma vez, para criá-la; Para desenvolver na plataforma Windows Phone é necessário o Windows 8.1 ou o 10, na versão Pro 64bits. Suas etapas são divididas na lista abaixo: Desenvolvimento: Visual Studio ou Visual Studio Express; DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 59 Emuladores: Seu emulador já está no Visual Studio, e são necessários processadores modernos para executar; Teste em aparelho: É necessário registrar o aparelho no SDK e instalar o aplicativo pelo desktop; Publicar: é necessária uma conta de desenvolvedor, 19 dólares o ano, para criá-la e mantê-la. Para desenvolver na plataforma iOS, é necessário ter um Mac. Suas etapas são divididas na lista abaixo: Desenvolvimento: Xcode; Emuladores: Seu emulador já está integrado no Xcode; Teste em aparelho: a partir do Xcode 7, já pode testar direto no aparelho; Publicar: exige Xcode e uma conta de desenvolvedor que custa 99 dólares anuais; Durante nossas aulas vamos testar nossas aplicações no Android. Mas é importante destacar que, como estamos criando aplicativos multiplataforma, qualquer ambiente pode desenvolvê-los. 3.19 Plug-ins CordovaNessa seção, estudaremos alguns dos plug-ins que o Cordova fornece para dar acesso a alguns recursos nativos dos dispositivos. Antes de estudar como os plug-ins funcionam no Cordova, vamos revisar como é a estrutura básica do arquivo index.html, criado pelo projeto do Cordova. Se você for na DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 60 pasta do projeto hello_world que foi criada anteriormente e entrar na pasta www, verá que lá está o arquivo index.html. Abra-o e deixe igual ao exemplo 16 a seguir: <!DOCTYPE html> <html> <head> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="user-scalable=no, initial- scale=1, maximum-scale=1, minimum-scale=1, width=device- width"> <title>Hello World</title> </head> <body> <script type="text/javascript" src="js/index.js"></script> </body> </html> Exemplo 16 – Configuração inicial index.html A partir do código do exemplo 16, serão criados todos os nossos exemplos de aplicações. O que fizemos foi tirar o que não é necessário no momento, deixando assim o código mais limpo e fácil de entender. Para testar a aplicação com alguma funcionalidade, siga os passos da lista abaixo: Crie dentro da tag body um botão com o código abaixo: <input type=”button” onClick=”mensagem()” value=”Clique Aqui”/> Apague todo o código do arquivo index.js, que está na pasta js dentro da pasta www, e adicione o código javascript abaixo: function mensagem(){alert(‘Hello World!’)} DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 61 O código do arquivo index.html deve ficar como o exemplo 17. <!DOCTYPE html> <html> <head> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="user-scalable=no, initial- scale=1, maximum-scale=1, minimum-scale=1, width=device- width"> <title>Hello World</title> </head> <body> <input type=”button” onClick=”mensagem()” value=”Clique Aqui”/><br/> <script type="text/javascript" src="js/index.js"></script> </body> </html> Exemplo 17 – Arquivo index.html alterado O código do arquivo javascript.js deve ficar como o exemplo 18: function mensagem(){ alert(‘Hello World!’); } Exemplo 18 – Arquivo javascript.js alterado Como pode ser observado na figura 39, assim que o projeto for executado, você visualizará a tela da aplicação com um botão; se você clicar no botão, irá aparecer a mensagem, “Hello World!”. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 62 Figura 39 – Projeto exibindo mensagem 3.20 Cordova Plug-in O Cordova plug-in é um recurso do framework que gerencia os plug-ins que serão usados no projeto. Um plug-in fornece o acesso a um recurso nativo do dispositivo, seja esse recurso uma câmera, a lista de contatos, o microfone, o acelerômetro, o gravador, o controle de mídia e muito mais. A sintaxe para adicionar um plug-in é: cordova plugin add [nome_do_plugin] DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 63 Por exemplo, o plug-in para dar acesso ao recurso de câmera a um projeto é: cordova plugin add codova-plugin-camera Como visualizado na figura 40, esse comando irá adicionar o recurso de câmera ao projeto. É de extrema importância que você esteja dentro da pasta do projeto para adicionar os plug-ins. Figura 40 – Adicionando plug-in de câmera ao projeto Com o comando a seguir, é possível listar todos os plug-ins instalados no projeto. Também é importante estar dentro da pasta do projeto para listá-los. cordova plugin ls Para desinstalar um plug-in do projeto, temos a sintaxe: cordova plugin rm [nome-do-plugin] Depois de entender o que é um plug-in e como é o seu funcionamento básico, vamos estudar alguns plug-ins do Cordova. O primeiro plug-in estudado será o cordova-plugin-dialogs. Com esse plug-in é possível criar caixas de diálogo para que o aplicativo interaja com o usuário. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 64 Existem cinco tipos de notificação: notification.alert notification.confirm notification.prompt notification.beep notification.vibrate 3.21 Alert A notificação Alert exibe uma caixa de diálogo simples, sua sintaxe é: navigator.notification.alert(message, alertCallBack, [title], [buttonName]); message: a mensagem a ser exibida ao usuário; alertCallBack: A função executada quando o usuário clica no botão da caixa de diálogo; title: Título da caixa de diálogo, essa opção é opcional, sendo o padrão o texto “Alert”; buttonName: nome para exibir no botão, essa opção é opcional, o padrão é “Ok”. Vamos criar um exemplo. Para isso, crie um novo projeto na pasta C:\Phonegap\Projetos. A partir do Prompt de comando acesse esse local e execute na pasta Projetos o comando abaixo: cordova create notificaoTeste Entre na pasta com o comando: cd notificacaoTeste E adicione o plug-in, com o comando: DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 65 cordova plugin add cordova-plugin-dialogs Depois de criar o projeto e adicionar o plug-in, abra o arquivo index.html na pasta www do projeto notificacaoTeste que está localizado em C:\Phonegap\Projetos\, no sublime e apague o conteúdo e escreva o que está no exemplo 19. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <title>Hello World</title> </head> <body> <input type="button" value="Clique Aqui" onClick="mensagem()"/> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> Exemplo 19 – Exemplo com plugin dialogs index.html Também é necessário acessar o arquivo index.js, que está dentro da pasta js, que se localiza dentro da pasta www do projeto; apague todo o conteúdo e escreva o que está no exemplo 20. function mensagem(){ navigator.notification.alert( 'Bem Vindos', DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 66 function(){}, 'Primeiro Programa', 'Fechar'); } Exemplo 20 – Exemplo do arquivo index.js do projeto notificacaoTeste Depois de alterar o index.html e o index.js, é necessário, a partir do Prompt de comando, adicionar a plataforma Android ao projeto. Execute o comando abaixo: cordova platform add android Por fim, execute o comando abaixo para ver a execução da aplicação no simulador: cordova run android Na figura 41, pode ser observado o projeto depois de executado, aperte o botão e verifique o resultado. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 67 Figura 41 – Projeto em execução 3.22 Confirm A janela de diálogo confirm se assemelha muito com o Alert; entretanto, o usuário agora poderá dar um feedback se aceita ou não a mensagem que a janela está exibindo. Esse feedback pode ser passado a partir de um ou mais botões. Sua sintaxe é: navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels]); message: a mensagem a ser exibida ao usuário; confirmCallback: A função executada quando o usuário clica em algum botão da caixa de diálogo. O método receberá como parâmetro o índice do botão selecionado; title: Título da caixa dediálogo, essa opção é opcional, sendo o padrão Confirm; buttonName: os nomes para exibir nos botões a serem exibidos, separados por vírgula, essa opção é opcional, o padrão é “Ok, Cancel”. Vamos criar um exemplo. No código do exemplo 19, referente ao arquivo index.html do projeto notificacaoTeste, adicione mais um botão. O código deverá ficar de acordo com o exemplo 21, a seguir: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 68 <title>Hello World</title> </head> <body> <input type="button" value="Alerta" onClick="mensagem()"/><br/> <input type=”button” value=”Confirmacão” onClick=”confirmacao()”/> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> Exemplo 21 – Exemplo da janela de diálogo confirmação Também é necessário adicionar mais uma função no exemplo 20, esse código é referente ao arquivo index.js, do projeto notificaoTeste. Adicione mais duas funções, confirmação() e respostaSim(numBotao). O código deverá ficar de acordo com o exemplo 22, seguinte: function mensagem(){ navigator.notification.alert( 'Bem Vindos', function(){}, 'Primeiro Programa', 'Fechar'); } function confirmacao(){ navigator.notification.confirm( 'Deseja exibir uma mensagem?', simResposta, 'Mensagem', ['Sim','Não','Talvez']); } DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 69 function simResposta(numBotao){ if(numBotao==1){ navigator.notification.alert( 'Mensagem Exibida', function(){}, 'Teste Mensagem', 'Fechar'); } } Exemplo 22 – Exemplo do arquivo index.js com a função confirmação Ao executarmos novamente o projeto, será visualizada a imagem da figura 42. Figura 42 – Adicionando botão confirmação no projeto Se o botão Confirmação for clicado, aparecerá uma caixa de diálogo; e se o botão Sim for clicado, aparecerá outra caixa de diálogo, como pode ser visualizado na figura 43. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 70 Figura 43 – Projeto com o botão confirm em execução 3.23 Prompt A janela de diálogo Prompt, possui uma caixa de texto, permitindo que o usuário insira uma string. Sua sintaxe é: navigator.notification.prompt(message, promptCallBack, [title], [buttonLabels], [defaultText]); message: a mensagem a ser exibida ao usuário; confirmCallback: A função executada quando o usuário clica no botão; title: Título da caixa de diálogo, essa opção é opcional, sendo o padrão Prompt; buttonName: os nomes para exibir nos botões a serem exibidos, separados por vírgula, essa opção é opcional, o padrão é “Ok, Cancel”; DefaultText: Texto padrão para ser exibido na caixa de texto quando ela estiver vazia. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 71 Vamos criar um exemplo. No código do exemplo 21, referente ao arquivo index.html do projeto notificacaoTeste, adicione mais um botão. O código deverá ficar de acordo com o exemplo 23, a seguir: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <title>Hello World</title> </head> <body> <input type="button" value="Alerta" onClick="mensagem()"/><br/> <input type=”button” value=”Confirmacão” onClick=”confirmacao()”/><br/> <input type=”button” value=”Prompt” onClick=”prompt()”/> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> Exemplo 23 – Exemplo da janela de diálogo prompt Também é necessário adicionar mais uma função no exemplo 22; esse código é referente ao arquivo index.js, do projeto notificaoTeste. Adicione mais duas funções prompt() e promptPressionado(resultado), o código deverá ficar de acordo com o exemplo 24, a seguir: DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 72 function mensagem(){ navigator.notification.alert( 'Bem Vindos', function(){}, 'Primeiro Programa', 'Fechar'); } function confirmacao(){ navigator.notification.confirm( 'Deseja exibir uma mensagem?', simResposta, 'Mensagem', ['Sim','Não','Talvez']); } function simResposta(numBotao){ if(numBotao==1){ navigator.notification.alert( 'Mensagem Exibida', function(){}, 'Teste Mensagem', 'Fechar'); } } function prompt(){ navigator.notification.prompt( 'Digite o seu nome', promptPressionado, 'Nome', ['Ok', 'Cancelar'], 'Nome'); DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 73 } function promptPressionado(resultado){ navigator.notification.alert( "Você digitou o texto: " + resultado.input1, function(){}, 'Mensagem', 'Fechar'); } Exemplo 24 – Exemplo do arquivo index.js com a função prompt Ao executarmos novamente o projeto, será visualizada a imagem da figura 44. Figura 44 – Adicionando botão prompt no projeto Se o botão Prompt for clicado, aparecerá uma caixa de diálogo, e se a string “Nome” for digitada no campo de texto e o botão Ok for clicado, aparecerá outra caixa de diálogo. Como pode ser visualizado na figura 45. DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 74 Figura 45 – Projeto com o botão prompt em execução 3.24 Câmera Para ter acesso nativo à câmera do dispositivo, o Cordova disponibiliza o plug-in cordova-plugin-camera. Com ele, é possível capturar imagens através da classe Camera e do método getPicture. Sua sintaxe é: navigator.camera.getPicture(cameraSuccess, cameraError, [cameraOptions]); cameraSuccess: função a ser executada se a captura de imagem ocorrer com sucesso; cameraError: função a ser executada se ocorre um erro com a câmera; cameraOptions: é um parâmetro opcional que pode ser passado para customizar a captura da imagem; quality: qualidade da imagem; destinationType: o tipo de retorno da imagem, que pode ser DATA_URL para retornar uma imagem encodada em base64, e FILE_URL que retorna o caminho da imagem; DESENVOLVIMENTO MULTIPLATAFORMA MOBILE 75 sourceType: fonte da imagem; PHOTOLIBRARY: para biblioteca de imagens CAMERA: para a câmera SAVEDPHOTOALBUM: para ser de algum álbum. Vamos criar um exemplo. Para isso, crie um novo projeto na pasta C:\Phonegap\Projetos. A partir do Prompt de comando, acesse esse local e execute na pasta Projetos o comando: cordova create cameraTeste Entre na pasta com o comando: cd cameraTeste E adicione o plug-in, com o comando: cordova plugin add cordova-plugin-camera Depois de criar o projeto e adicionar o plug-in, abra o arquivo index.html na pasta www do projeto cameraTeste, que está localizado em C:\Phonegap\Projetos\, no sublime;
Compartilhar