#Desenvolvendo Aplicações Multiplataforma com o XDK

Transcrição

1 1

2 Sumário Introdução Apresentação do XDK. Construindo Apps multiplataforma com o HTML5. Cordova. Explorando a Ferramenta Apresentação do XDK e seus recursos. Licença Entendendo a licença do XDK. Explorando os Demos Explorando os Demos do XDK. Aba PROJECTS Explorando a aba PROJECTS. Criando, gerenciando e importando projetos. Adicionando e gerenciando plugins. Projetos Cordova. Aba DEVELOP Explorando a aba DEVELOP. Conhecendo o editor de código. Desenvolvendo a App de forma visual. Usando Templates. Depurando e Testando Explorando a aba EMULATE. Utilizando o emulador. Usando o Intel App Preview. Explorando as abas TEST e DEBUG. Debugando uma App. Testando a App em dispositivos reais. Construindo e Publicando a App Informações para construir e publicar a App nas lojas da Apple, Google e Microsoft. Publicando a App na loja do Chrome. Aplicações com Dados Locais Criando aplicações com acesso a dados locais. Aplicações Consumindo Web Services Criando aplicações que consumam os serviços de um web service. Desenvolvimento de Jogos Introdução ao desenvolvimento de jogos com o XDK. 2

3 Diga não à pirataria O leitor que adquiriu o e-book legalmente no site AlbertEije.COM poderá imprimir o conteúdo para seu uso pessoal. A cópia do conteúdo do livro sem autorização configura crime. Além de contribuir para a criminalidade, a cópia ilegal desestimula o autor de realizar novos trabalhos. Todos saem perdendo com a pirataria. 3

4 Introdução A Ferramenta XDK O XDK é uma IDE da Intel. Ele foi desenvolvido com o objetivo de ajudar o desenvolvedor a criar Apps que possam ser publicadas nas principais lojas de aplicações e que possam rodar na grande maioria dos dispositivos existentes. As aplicações feitas com o XDK são híbridas, ou seja, são aplicações feitas em HTML5 que possuem a capacidade de acessar os recursos nativos do dispositivo. Para isso será utilizada uma ponte entre a aplicação HTML5 e os recursos do dispositivo. Essa ponte é um conjunto de componentes que podemos chamar de framework. O problema é que não teremos acesso aos recursos do dispositivo, por questões de segurança. Para isso utilizaremos a tal ponte. Pensando nisso a comunidade criou o PhoneGAP, um projeto 100% open source. Esse framework foi desenvolvido pela Nitobi, que foi comprada pela Adobe. Posteriormente foi doado para a Apache e chamado de Apache Callback. Como o nome era muito genérico, foi renomeado para Apache Cordova. O PhoneGap agora é uma distribuição Cordova. É com ele que poderemos acessar os recursos do dispositivo tais como a câmera, contatos, notificações, etc. Imagine uma página feita em HTML5 com algum código em JavaScript. Para melhorar a aparência da página, utilizaríamos CSS. Basicamente é isso que faremos para que nossa App rode em todos os dispositivos móveis. 4

5 Introdução A Ferramenta XDK O XDK é a ferramenta que vai possibilitar o desenvolvimento das Apps híbridas. Mas não apenas isso, ele permite que você desenvolva de forma visual, realize testes utilizando uma ferramenta instalada no dispositivo, debugue a aplicação diretamente no dispositivo, crie seu pacote para publicação nas lojas e muito mais. O webview tem menos recursos que um browser. A vantagem é a capacidade de ser estendido através dos plugins de código nativo do Cordova (PhoneGap). Além das aplicações híbidas, é possível criar Apps HTML5 nativas e até mesmo importar projetos HTML5 desenvolvidos anteriormente. É possível instalar o XDK no Windows, Linux e OSX. O XDK cumpre a promessa: escreva uma vez, rode em qualquer lugar, em inglês writeonce, run-anywhere. As Apps construídas no XDK rodam num webview (navegador embutido) e estão limitadas aos recursos do webview mais a combinação dos plugins utilizados. 5

6 Introdução Construindo Apps Multiplataforma com HTML5 O que é um aplicativo multiplataforma? É aquele que chega ao usuário através de qualquer dispositivo que ele possa utilizar, onde quer que se encontre. OK. E porque usar o HTML5? Bom, existem vários dispositivos no mercado, com suas respectivas plataformas. Para resumir, vamos citar as principais: Android, ios e Windows Phone. Isso significa três linguagens de programação para aprender, cada uma com seus recursos: Android Java ios Objective C Windows Phone C# ou Visual Basic Imagine então criar uma App para as três plataformas! Existem alternativas que se apresentam para criar as Apps utilizando uma só IDE. Uma delas é o Delphi / RAD Studio / AppMethod da Embarcadero. Com essa IDE é possível criar Apps para Android e ios, além de aplicações desktop para Windows e OSX. No entanto, ele não tem suporte para o Windows Phone e tem o preço alto. Sem falar das constantes atualizações, que forçam o desenvolvedor a pagar pelos upgrades. Outra alternativa é o Xamarin. Se o desenvolvedor instalar o Xamarin no Visual Studio, conseguirá criar Apps para as três plataformas. Para isso criará um projeto e compartilhará parte do código. Para que as Apps sejam fieis aos recursos visuais de cada plataforma, o desenvolvedor deverá criar projetos distintos para desenhar as telas. Existe uma alternativa para isso, que é usar o Xamarin.Forms. Dessa forma, o desenvolvedor consegue desenhar a tela apenas uma vez, mas existem limitações. Existe ainda a questão do preço, que é cobrado por plataforma utilizada e por período. 6

7 Introdução Construindo Apps Multiplataforma com HTML5 Existem ainda outras opções, mas as que mencionamos anteriormente são as mais promissoras para quem deseja construir aplicações para as três plataformas principais. Como tudo na vida, utilizar cada uma das opções tem seus prós e contras. A opção que vamos apresentar nesse livro é criar as Apps usando HTML5 com os plugins do Cordova. Para facilitar nossa vida, vamos utilizar o XDK, a IDE feita pela Intel. Uma vantagem de usar o HTML5 é que você não se preocupará em aprender as linguagens utilizada por cada plataforma. Além disso, não precisará conhecer detalhes das APIs de cada plataforma. Outra vantagem interessante é que sua App vai funcionar nos dispositivos novos que chegam ao mercado. Um dos grandes desafios de criar aplicações multiplataforma é o tamanho das telas. Quando a Apple cria um dispositivo novo, ela pensa nas Apps que serão criadas para esse dispositivo e como tais Apps serão feitas utilizando a sua IDE, o XCode. É provável que pense também na compatibilidade com seus demais dispositivos. No entanto, a Apple não vai se preocupar com a compatibilidade dos dispositivos feitos para Android ou para o Windows Phone. Cabe ao desenvolvedor que cria Apps para todas as plataformas se preocupar com isso. O tamanho da tela é apenas uma das várias preocupações que um desenvolvedor terá quando for criar uma App multiplataforma. Existem ainda os demais recursos: câmera, acelerômetro, etc. 7

8 Introdução Construindo Apps Multiplataforma com HTML5 Uma App multiplataforma deve tirar proveito desses recursos e ainda se preocupar com a experiência do usuário. O usuário espera que uma App feita para Android se comporte como uma App feita para Android. Como assim? Existem alguns padrões em cada plataforma. Por exemplo, as abas de uma App para ios aparecem na parte inferior da tela, ao passo que numa App feita para Android aparece na parte superior da tela. Se o desenvolvedor fizer uma App multiplataforma e deixar as abas na parte inferior da tela, os usuários do ios não vão estranhar, mas os usuário do Android verão algo diferente, fora do padrão. Dessa forma, o usuário não estaria tendo uma boa experiência ao utilizar essa App. É possível empacotar o código HTML5 e disponibilizar a App para implantação, como se fosse uma App nativa. Dessa forma, será possível utilizar os mesmos canais de distribuição e monetização das Apps nativas. Além disso, pode-se utilizar os mesmos recursos de lançamento e instalação. A App não vai rodar numa janela do browser do dispositivo. Em vez disso, rodará em um webview de tela cheia (fullscreen), com controle total sobre o estado real da tela e sobre as capacidades do dispositivo. As Apps feitas em HTML5 não estão limitadas a serem exibidas dentro de um browser. 8

9 Introdução Construindo Apps Multiplataforma com HTML5 A App feita em HTML só será multiplataforma se as plataformas de destino suportarem todas as APIs utilizadas. Dessa forma, é preciso ter atenção a alguns detalhes, como a utilização de código JavaScript. Não é porque um código é escrito em JavaScript que ele vai rodar em qualquer plataforma. Se um código feito em JavaScript fizer uso de uma API específica, a App não será multiplataforma. Ou seja, o código feito em HTML é portátil, o pacote não. O pacote é feito para cada plataforma. E é aí que entra o XDK. Com ele é possível desenvolver a aplicação e também criar os pacotes para cada plataforma facilmente. Uma API importante e multiplataforma é o Apache Cordova. Ele habilita o acesso aos recursos do dispositivo câmera, acelerômetro, geolocalização, etc de forma consistente em várias plataformas e dispositivos. O Cordova fornece acesso para implementações nativas em cada plataforma. As Apps feitas com o Cordova devem ser empacotadas como uma App híbrida. 9

10 Introdução Construindo Apps Multiplataforma com HTML5 E como ajustar a aplicação para as telas de vários dispositivos usando HTML? Existem vária formas de fazer isso. Usando Escala Dimensionamento Uma forma simples de controle é dimensionar os componentes e fontes de acordo com o tamanho da tela e, opcionalmente, ajustar o preenchimento em torno dos componentes. Para trabalhar dessa forma, o leitor pode usar unidades relativas do CSS ou utilizar um framework responsivo como o jquery Mobile ou o Sencha Touch para fazer o trabalho pesado. Imagens Responsivas As imagens podem exigir mais do que um simples dimensionamento. Às vezes é desejável cortar uma imagem de maneira diferente ou mesmo carregar uma imagem com resolução maior ou menor. Layout Responsivo Se a App é formada por várias seções, talvez seja interessante pensar num layout fluido em que você rearranja (e as vezes esconde) alguns elementos. Existem alguns padrões (patterns) de layout e de navegação que podem ser estudados e implementados para esse fim. 10

11 Introdução Web App ou WebView App? Quando você mencionar que está criando uma aplicação web para celular, alguns desenvolvedores vão pensar no Chrome ou no Safari rodando a aplicação e logo vão imaginar que isso não vai dar certo. O fato é que uma Web App realmente roda num browser, mas uma WebView App não. Como assim? Uma aplicação web (Web App) é um software que roda num browser e é criada numa linguagem de programação suportada pelo browser, como a combinação HTML + CSS + JavaScript. É necessário um browser para renderizar a aplicação. Geralmente são aplicações interativas que não dependem de um servidor para atualizar a view. Pode ser uma calculadora, um jogo, etc. Uma WebView seria uma Web App HTML5 híbrida, feita para rodar um dispositivo móvel. Ela será executada dentro de um controle WebView e não num browser. O termo WebView tem origem na biblioteca incorporada nos sistemas operacionais para dispositivos móveis. O nome dessa biblioteca no ios é UIWebView. No Android e no Windows Phone é conhecida como WebView. As características e capacidades do WebView podem variar dependendo da plataforma, da versão do sistema operacional e até mesmo do fabricante do dispositivo. Por exemplo, o WebView de um dispositivo Android da Samsung pode se comportar de forma diferente em um dispositivo Android da HTC. Podemos fazer uma analogia com o que ocorre entre Firefox, Chrome e Internet Explorer. 11

12 Introdução Web App ou WebView App? Portanto, para ficar claro, sua App HTML5 vai rodar dentro de um WebView nativo e não dentro de um browser do dispositivo. Não se trata de uma App compilada. Trata-se de uma aplicação HTML5 que será interpretada e processada pelo WebView nativo do dispositivo. Na imagem abaixo observamos o funcionamento de uma Web App rodando dentro de um browser no dispositivo. O acesso às bibliotecas do dispositivo é feito pelo browser. 12

13 Introdução Web App ou WebView App? Na imagem abaixo podemos observar funcionamento de uma App Híbrida. o Existem duas diferenças principais entre o browser e o webview: 1 - Localização do motor de renderização. 2 - Capacidade de estender a API JavaScript. E o que isso significa? 13

14 Introdução Web App ou WebView App? O Motor de Renderização (o intérprete do HTML, JavaScript e CSS) está contido dentro do browser e está embutido dentro do firmware do dispositivo móvel. Assim sendo, é possível atualizar esse intérprete quando o browser do dispositivo é atualizado, pois ele virá junto com o browser. Isso pode ser útil para uma Web App, mas não fará diferença para uma WebView App, que utiliza o intérprete do firmware. A capacidade de estender a API JavaScript de uma WebView App (via plugins Cordova) significa que as Apps terão acesso a dados e sensores do dispositivo. Isso não é permitido numa Web App que roda num browser. Existem alguns problemas relacionados ao WebView do Android. Na verdade, essa plataforma é a que apresenta maiores desafios. A natureza aberta e flexível do Android é ao mesmo tempo uma bênção e uma maldição, pois ela permite muitas variações. Existem algumas soluções para resolver os problemas do WebView do Android. Uma delas é o Crosswalk, que é um WebView customizado. O objetivo dele é normalizar o comportamento e as características dos dispositivos Android 4.x. Portanto, para construir uma aplicação HTML que rode num dispositivo e possa ser publicada nas lojas, você deverá criar uma WebView App. 14

15 Explorando a Ferramenta Visão Geral O XDK possui uma série de abas, conforme observado na imagem abaixo. Aba PROJECTS Essa aba deve ser utilizada para criar um novo projeto, alterar o projeto atual ou importar uma aplicação HTML5 já existente. Essa aba lista todos os projetos criados ou importados pelo XDK. O projeto ativo ficará realçado e será nele que as demais abas realização suas operações. Aba DEVELOP Essa aba suporta várias visões (views). Isto é, você pode visualizar o editor de textos e trabalhar diretamente nele ou então desenhar a tela de forma visual. Nessa aba também é possível trabalhar com o desenvolvimento de jogos utilizando o painel Game Asset Manager. Além disso, existe a seção Web Services, que fornece acesso rápido e fácil a uma coleção de APIs de Web Services disponíveis na nuvem. Aba EMULATE Nessa aba será possível checar o layout e as funcionalidades de sua aplicação numa coleção de dispositivos virtuais. O simulador é baseado no emulador Apache Ripple. É possível ainda clicar no botão Debug (o que tem o ícone de um inseto) para abrir o CDT (Google Chrome Developer Tools). Com isso será possível debugar o código JavaScript, as regras CSS e os elementos DOM. 15

16 Explorando a Ferramenta Visão Geral Aba TEST Aba DEBUG É possível copiar o aplicativo para um dispositivo real através da rede, sem plugar o cabo USB. Com isso será possível realizar uma inspeção remota na aplicação. Para facilitar a inspeção remota você deverá baixar e instalar uma aplicação no dispositivo. O nome dessa aplicação é Intel App Preview. Ela está disponível para as três plataformas: Android, ios e Windows Phone. Com essa aba será possível depurar a aplicação sem precisar construir e instalar a mesma. Provavelmente seria melhor chamar essa aba de PREVIEW, pois ela permite uma visão da App no dispositivo real, mas possui funções limitadas de depuração e testes. A vantagem dessa aba em relação a aba TEST é que, com ela, é possível usar o CDT (Google Chrome Developer Tools) para depuração remota. Assim é possível debugar o código JavaScript completo com pontos de interrupção (break points). Essa aba só funciona com os dispositivos Android 4+ e Apple ios O dispositivo precisa estar conectado via USB. Para os dispositivos Windows, essa aba é a melhor opção. Para os dispositivos Android e ios, temos a aba DEBUG. 16

17 Explorando a Ferramenta Visão Geral Aba PROFILE Aba BUILD Nessa aba será possível monitorar os recursos da aplicação, identificar CPU e características da memória. Antes de implantar (deploy) a App é preciso construí-la (buid). Essa aba só funciona nos dispositivos Android 4+. Aqui será possível baixar o código HTML5 para o dispositivo Android conectado via USB, executar e pegar estatísticas relacionadas a como o código JavaScript está utilizando a CPU e a memória do dispositivo. Um módulo de debug especial será copiado para o dispositivo: App Preview Crosswalk. É nessa aba que o pacote da sua App será construído para posteriormente ser publicado em cada loja. O processo de construção é efetuado na nuvem, para que não seja preciso instalar e configurar o SDK para cada plataforma de destino. A publicação na loja ficará a cargo do desenvolvedor, que deverá seguir as regras impostas por cada empresa. Veremos mais detalhes sobre o processo de publicação nas lojas posteriormente. 17

18 Explorando a Ferramenta Primeiro Contato Para esse primeiro contato é esperado que o leitor tenha instalado o XDK em seu SO preferido. Além disso, o leitor precisa instalar o App Preview no seu dispositivo real. Aba BUILD Execute o XDK e realize o login na sua conta Intel. É nessa aba que o pacote da sua App será construído para posteriormente ser publicado em cada loja. Você poderá criar dois tipos de projeto: Standard HTML5: utiliza HTML5 e JavaScript. Poderá utilizar as APIs padrões do W3C. Não suporta o Cordova. Poderá ser implantada como uma App híbrida nas várias plataformas (Android, ios e Windows) ou como uma aplicação web (web app) em determinadas plataformas, como a Chrome Web Store. HTML5 + Cordova: utiliza HTML5 e JavaScript. Suporta os plugins do Cordova. Poderá ser implantada como uma App híbrida nas várias plataformas (Android, ios e Windows). Antes de implantar (deploy) a App é preciso construí-la (buid). O processo de construção é efetuado na nuvem, para que não seja preciso instalar e configurar o SDK para cada plataforma de destino. A publicação na loja ficará a cargo do desenvolvedor, que deverá seguir as regras impostas por cada empresa. Veremos mais detalhes sobre o processo de publicação nas lojas posteriormente. 18

19 Explorando a Ferramenta Primeiro Contato Novo Projeto Quando selecionar a opção para criar um novo projeto, o XDK fornecerá três opções: 19

20 Explorando a Ferramenta Primeiro Contato Novo Projeto Na janela anterior, selecione a opção Samples and Demos. Na opção General, selecione a guia HTML5 + Cordova. Agora clique na imagem Hello, Cordova para iniciar uma App a partir desse demo. Clique no botão Continue para iniciar o projeto. 20

21 Explorando a Ferramenta Primeiro Contato Novo Projeto O XDK vai solicitar que você informe o nome da App. Observe na imagem abaixo que eu chamei o projeto de App20. Na primeira vez que você criar uma App, o XDK vai exibir um Quick Tour, apresentando alguns aspectos da ferramenta. Após isso, você verá o código de sua aplicação na aba DEVELOP. 21

22 Explorando a Ferramenta Primeiro Contato Novo Projeto Aba DEVELOP 1 Essa aba será utilizada para editar e adicionar arquivos ao projeto. Você pode usar o editor de código embutido, que já vem com o XDK, ou usar o seu editor de código preferido, como o Notepad++, se desejar. 2 Na árvore de arquivos é possível visualizar os arquivos associados ao projeto ativo, incluindo os arquivos de imagem. Também é possível selecionar um arquivo para edição. 22

23 Explorando a Ferramenta Primeiro Contato Novo Projeto Aba DEVELOP 3 Utilize as opções de menu ou seus atalhos para acessar as opções do editor de código. 4 No editor de código será possível editar o arquivo. Utilize o menu de contexto se necessário. 5 Use os botões da barra de ferramentas (presentes em todas as abas) para acessar a ajuda, iniciar o Quick Tour, alterar as configurações do XDK, exibir e alterar as configurações de sua conta e acompanhar os tweets sobre o XDK. 23

24 Explorando a Ferramenta Primeiro Contato Novo Projeto Aba DEVELOP 6 A paleta LIVE DEVELOPMENT TASKS permite a prévisualização do código em um navegador ou em dispositivos reais e virtuais. 7 Com a paleta WEB SERVICES será possível explorar alguns serviços de terceiros que já vem embutidos no XDK. Além disso, será possível integrar outras APIs. 24

25 Explorando a Ferramenta Primeiro Contato Novo Projeto Aba DEVELOP O editor de códigos embutido no XDK é baseado no Brackets. Sendo assim, é fácil adicionar extensões através do menu File > Extension Manager. Com esse Demo não podemos trabalhar com o App Designer. Ou seja, não é possível desenhar as telas de forma visual. Veremos posteriormente como fazer isso. Num projeto que é criado para ser trabalhado de forma visual, é possível revesar entre os modos de visualização CODE e DESIGN. Quando iniciamos um projeto que usa o App Designer, teremos a capacidade de trabalhar de forma visual e também no código, sendo que alterações na tela repercutirão no código e vice-versa. Se você selecionar a opção Run My App Run in Emulator da paleta LIVE DEVELOPMENT TASKS será aberta uma janela flutuante com as opções do emulador. Essa janela tem as mesmas opções da aba EMULATE. 25

26 Explorando a Ferramenta Primeiro Contato Novo Projeto Aba EMULATE 1 A janela flutuante e a aba EMULATE devem ser utilizadas para corrigir alguns aspectos da App antes que ela seja publicada ou testada num dispositivo real. É possível realizar testes em vários dispositivos virtuais. 2 Use os botões da barra de ferramentas para recarregar os arquivos de código fonte e reiniciar a aplicação. É possível ainda iniciar o depurador embutido numa nova janela, exibir e alterar as configurações do emulador e parar de executar a App no emulador. 26

27 Explorando a Ferramenta Primeiro Contato Novo Projeto Aba EMULATE 3 Se você clicar no ícone Auto Zoom, a tela do dispositivo se encaixará totalmente na sua janela. É possível ainda aumentar e diminuir o zoom através do controle deslizante. 4 Use as paletas para configurar vários dispositivos virtuais que ajudam a determinar como sua aplicação vai funcionar em vários tamanhos e orientações de telas. É possível abrir e fechar cada paleta, ocultar e mostras as colunas, mover colunas e mover paletas dentro de uma coluna. 5 Utilize o dispositivo virtual para testar a App. 27

28 Explorando a Ferramenta Primeiro Contato Novo Projeto Aba TEST Antes de usar a aba TEST, não esqueça de instalar no dispositivo real a App Preview. Quando acessar a aba TEST pela primeira vez, uma mensagem vai surgir solicitando a sincronização com o servidor: Please sync with our testing server. 1 Utilize a aba TEST para avaliar através da rede como sua App funciona num dispositivo real sem precisar realizar uma instalação completa do mesmo. Nesse ponto você também verá como será a aparência da sua App no dispositivo real. 28

29 Explorando a Ferramenta Primeiro Contato Novo Projeto Aba TEST 2 Use o botão MOBILE para realizar testes num servidor na nuvem. Requer configuração mínima, evita problemas de firewall da rede, é possível baixar os arquivos do servidor a qualquer hora e em qualquer lugar. Use o botão WIFI para realizar testes numa rede Wi-Fi onde tanto a máquina de desenvolvimento quando o dispositivo real estejam conetados. 3 As instruções estão ali para lembrar como as coisas funcionam. 29

30 Explorando a Ferramenta Primeiro Contato Novo Projeto Aba TEST 4 Use o botão PUSH FILES para enviar os arquivos mais recentes do projeto de sua máquina para o servidor. 5 Use o leitor de QR Code do App Preview para executar o teste no dispositivo real. 6 É possível depurar remotamente a aplicação enquanto ela estiver sendo executada no dispositivo real. Nesse caso é utilizado o console de depuração weinre. 30

31 Explorando a Ferramenta Primeiro Contato Novo Projeto Aba BUILD 1 A aba BUILD fornece várias opções para construir o pacote da aplicação. Nessa aba será possível empacotar a App para que a mesma seja distribuída nas lojas. Se for uma App HTML5 poderá ser publicada em lojas de Apps HTML, como a Chrome Web Store. 2 Use a paleta PREVIOUS BUILDS para visualizar e atualizar uma lista de compilações (builds) anteriores. 31

32 Explorando a Ferramenta Primeiro Contato Novo Projeto Aba BUILD 3 Na seção CORDOVA HYBRID MOBILE APP PLATFORMS você conseguirá criar um pacote que poderá ser publicado nas lojas da Apple, Google e Microsoft. 4 A opção LEGACY HYBRID MOBILE APP PLATFORMS continua na ferramenta por conta de APIs antigas. Recomendase migrar as aplicações para as APIs atuais e utilizar a opção CORDOVA HYBRID MOBILE APP PLATFORMS. Veremos em detalhes como funciona cada uma das abas nos capítulos posteriores. 32

33 Licença Entendendo a Licença do XDK A utilização das ferramentas disponibilizadas no site da Intel são regidas pelo TOU Terms of Use. É possível ler os termos completos no seguinte link: Ao utilizar o site da Intel ou baixar qualquer material que esteja nele, o usuário estará aceitando os termos de uso descritos no link acima. É importante a leitura completa dos termos acima antes de usar o XDK. Vamos abordar aqui alguns aspectos importantes relacionados à licença da ferramenta. Antes de usar o XDK, é preciso se registrar no site da Intel. É preciso ser maior de 18 anos. O ID e senha criados no site não pode ser compartilhado com outro usuário. É possível usar as ferramentas da Intel sem precisar pagar royalties ou qualquer outro valor. É possível distribuir as aplicações desenvolvidas da forma que você desejar. Ou seja, o XDK é gratuito e você pode vender as Apps que fizer com ele sem nenhum problema. O que você não pode fazer é redistribuir ou vender os materiais da Intel. Ou seja, você não pode sair por aí vendendo o XDK. Provavelmente essa é a parte da licença que mais interessa, pelo menos para a maioria dos desenvolvedores. É importante frisar que a leitura dos termos e condições informados no link anterior é imprescindível. 33

34 Explorando os Demos Samples e Demos Uma das melhores formas de aprender uma ferramenta, um framework, uma linguagem, etc é estudando os demos. O XDK vem com vários deles. Já vimos que ao acessar a opção START A NEW PROJECT teremos acesso à seção Samples and Demos. Nessa seção nós temos o item General, que fornece acesso aos demos Standard HTML e HTML5 + Cordova. Temos ainda o item Games, que fornece acesso aos demos HTML5 + Cordova. É importante frisar que as Apps criadas com o XDK são feitas com HTML + JavaScript + CSS. Assim sendo, é preciso ter o mínimo de conhecimento dessas linguagens. Quanto maior for o seu conhecimento nessas linguagens, mais facilidade você terá para criar suas Apps com o XDK. Se você nunca teve contato com essas linguagens, pare agora a leitura do livro e aprenda sobre elas. Tenha pelo menos uma visão geral sobre elas, senão o estudo do XDK será frustrante. Veremos agora alguns desses demos e como o estudo deles pode ajudar a compreender como o XDK funciona e quais os passos para construir uma App com essa ferramenta. 34

35 Explorando os Demos Samples e Demos Buttons Vamos começar com o Sample Buttons. Selecione esse exemplo conforme imagem abaixo e clique no botão Continue. Esse é um exemplo básico que mostra como uma tela responsiva com botões. O projeto em si não tem muito segredo. Dois botões serão exibidos na tela e terão seu tamanho e posição adaptados de acordo com o tamanho e orientação da tela. Depois de criar o projeto, acesse a aba EMULATE e altere várias vezes o dispositivo. Observe como a tela vai se adequando ao tamanho da tela do dispositivo. Mude também a orientação da tela e observe como a aplicação se comporta. 35

36 Explorando os Demos Samples e Demos Buttons A aplicação foi salva com o nome App21. Dentro da pasta da aplicação estão os arquivos do projeto XDK, conforme observamos na imagem abaixo. O arquivo.xdke contém preferências específicas do desenvolvedor para o projeto. O arquivo.xkd define o projeto e é compartilhado por todos os membros que trabalham no mesmo projeto. Esses arquivos não devem ser alterados por fora do XDK. Depois de criar o projeto, acesse a aba EMULATE e altere várias vezes o dispositivo. Observe como a tela vai se adequando ao tamanho da tela do dispositivo. Mude também a orientação da tela e observe como a aplicação se comporta. 36

37 Explorando os Demos Samples e Demos Buttons Na imagem anterior podemos observar que existe uma pasta www dentro da pasta do projeto. Essa pasta contém o projeto HTML. Você pode clicar duas vezes no arquivo index.html e verá que ele será aberto no seu navegador padrão. Observe pelo ícone que o navegador padrão da máquina onde a imagem foi capturada é o chrome. O projeto será aberto e funcionará normalmente no browser. Lembrando que criamos um projeto Standard HTML. Explorando as demais pastas você terá acesso aos arquivos CSS, JavaScript e de imagens. A pasta xdk contém um arquivo JSON com algumas informações sobre o projeto. 37

38 Explorando os Demos Samples e Demos Buttons O que existe para estudar nesse Demo? Na verdade, não tem muita coisa. Trata-se HTML puro e simples. Se você domina HTML + JavaScript + CSS já possui conhecimento necessário relacionado ao exemplo! Sua preocupação no momento design e layout responsivo. O que é isso? Em suma, é adaptar a visualização da sua qualquer tipo de tela. de um projeto quase todo o deve ser com aplicação para Não vamos tratar desse assunto no livro, pois não é o nosso foco. Portanto, se você ainda não ouviu falar sobre responsividade ou como criar telas responsivas, chegou a hora de pesquisar sobre os seguintes temas antes de continuar a leitura do livro: Multi-Device Layout Patterns Responsice Patterns Design Responsivo Layout / Leiaute Responsivo Responsive Web Design Responsive Images Media Queries Leve o termpo que for necessário pesquisando sobre esse assunto até compreendê-lo e depois volte à leitura do livro. 38

39 Explorando os Demos Samples e Demos Geolocation Demonstration Uma das características mais utilizadas nas aplicações é acessar a localização geográfica do dispositivo. É útil em várias situações. O XDK possui um demo que trata exatamente disso. Não é um demo Standard HTML. Trata-se de um demo HTML5 + Cordova. Inicie uma nova aplicação conforme imagem a seguir. 39

40 Explorando os Demos Samples e Demos Geolocation Demonstration O objetivo desse demo é mostrar como criar uma App híbrida que aproveita os serviços de geolocalização da API JavaScript Bridge, bem como se conectar a web services gratuitos de mapeamento. Essa App vai acompanhar o progresso do usuário durante sua viagem e vai colocar um pin no mapa a cada 10 segundos. Existem duas funções importantes nessa App. Ambos estão no arquivo js/main.js. A primeira é a que detecta a latitude e a longitude do dispositivo a partir de seus serviços de geolocalização, conforme demostrado abaixo. 40

41 Explorando os Demos Samples e Demos Geolocation Demonstration A segunda é a que desenha o mapa na tela. O que você deve fazer nesse momento? Explorar os demais demos. Inicie um novo projeto para cada demo disponível, incluindo aí os que são apenas HTML, os híbridos e os games. Concentre-se em testar os demos para observar o que você pode fazer com esse tipo de aplicação. Se desejar, explore também o código. Quanto mais estudar o código, mais vai aprender. Nos capítulos seguintes vamos analisar a fundo as características do XDK. 41

42 Aba PROJECTS Visão Geral Essa aba lista os projetos que foram criados pelo XDK. 1 O nome do projeto ativo aparece à direita da ava PROJECTS. As demais abas realizarão suas operações em cima desse projeto. 2 Uma lista de projetos conhecidos aparecem no lado esquerdo da tela. 3 Veja informações sobre o projeto ativo na paleta a direita, na seção Project Info. 4 As configurações do projeto que aparecem nessa seção vão depender do tipo de projeto que está sendo trabalhado. 42

43 Aba PROJECTS Visão Geral Para exibir informações sobre um projeto, basta clicar no nome do projeto. Dentre as informações exibidas estão: o tipo de projeto, o caminho raiz e o diretório de origem. Seguem as funções dos botões disponíveis: 43

44 Aba PROJECTS Visão Geral Tipos de Projetos Existem dois tipos de projetos: Standard HTML5 e HTML5+Cordova. Existe um terceiro tipo de projeto numa versão específica do XDK: Internet of Things Embedded Applications. Não abordaremos esse tipo de projeto nesse livro. 44

45 Aba PROJECTS Visão Geral Tipos de Projetos Existem dois tipos de projetos: Standard HTML5 e HTML5+Cordova. Existe um terceiro tipo de projeto numa versão específica do XDK: Internet of Things Embedded Applications. Não abordaremos esse tipo de projeto nesse livro. 45

46 Aba PROJECTS Habilitando / Desabilitando Plataformas Alvo Através da aba PROJECTS é possível habilitar ou desabilitar certas plataformas alvo. Por exemplo, em um projeto HTML5+Cordova, se a App requer uma plataforma alvo Android Crosswalk, mas não precisa da plataforma alvo Android, você pode desabilitar a plataforma alvo Android. Para desabilitá-la, abra a aba PROJECTS e clique no ícone do Android. Com isso, essa plataforma será desabilitada e não vai mais aparecer a opção de construir o pacote pra ela na aba BUILD. Observe a imagem abaixo. 46

47 Aba PROJECTS Configurando a App Para os projetos HTML5+Cordova, você deve especificar as configurações na seção CORDOVA HYBRID MOBILE APP SETTINGS. Essas configurações são utilizadas pelo XDK para criar os arquivos de configuração específicos da plataforma que são enviados para o sistema de compilação do XDK. O XDK gera automaticamente esses arquivos de configuração com base nas configurações da aba PROJECTS. Os arquivos intelxdk.config.<platform>.xml se encontram na pasta do projeto. Você deve explorar a seção CORDOVA HYBRID MOBILE APP SETTINGS para compreender como configurar sua aplicação. Observe que existem três opções: Plugin Management, Build Settings e Launch Icons and Splash Screens. Ao clicar no botão [+] você terá acesso a todas as opções de configuração. Em Plugin Management você conseguirá: Explorar e adicionar novos plugins. Ver o ID, nome, versão, documentação, dependências e outros detalhes sobre o plugin. Remover plugins. Em Build Settings você vai configurar aspectos exigidos por cada plataforma. E na última opção você conseguirá selecionar as imagens que comporão a App. 47

48 Aba PROJECTS Configurando a App Plugin Management Através da aba PROJECTS é possível habilitar ou desabilitar certas plataformas alvo. Por exemplo, em um projeto HTML5+Cordova, se a App requer uma plataforma alvo Android Crosswalk, mas não precisa da plataforma alvo Android, você pode desabilitar a plataforma alvo Android. Para desabilitá-la, abra a aba PROJECTS e clique no ícone do Android. Com isso, essa plataforma será desabilitada e não vai mais aparecer a opção de construir o pacote pra ela na aba BUILD. Observe a imagem abaixo. 48

49 Aba PROJECTS Configurando a App Build Settings Através da aba PROJECTS é possível habilitar ou desabilitar certas plataformas alvo. Por exemplo, em um projeto HTML5+Cordova, se a App requer uma plataforma alvo Android Crosswalk, mas não precisa da plataforma alvo Android, você pode desabilitar a plataforma alvo Android. Para desabilitá-la, abra a aba PROJECTS e clique no ícone do Android. Com isso, essa plataforma será desabilitada e não vai mais aparecer a opção de construir o pacote pra ela na aba BUILD. Observe a imagem abaixo. 49

50 Aba PROJECTS Configurando a App Launch Icons and Splash Screens Através da aba PROJECTS é possível habilitar ou desabilitar certas plataformas alvo. Por exemplo, em um projeto HTML5+Cordova, se a App requer uma plataforma alvo Android Crosswalk, mas não precisa da plataforma alvo Android, você pode desabilitar a plataforma alvo Android. Para desabilitá-la, abra a aba PROJECTS e clique no ícone do Android. Com isso, essa plataforma será desabilitada e não vai mais aparecer a opção de construir o pacote pra ela na aba BUILD. Observe a imagem abaixo. 50

51 Aba PROJECTS Criando um Novo Projeto Abra a aba PROJECTS e clique na seta abaixo, conforme imagem, ou selecione a opção Start a New Project abaixo da lista de projetos. Após isso, as seguintes opções ficarão disponíveis: 51

52 Aba PROJECTS Criando um Novo Projeto Caso você opte por criar um novo projeto a partir de um Template, deverá escolher entre as categorias disponíveis: Blank, Layout and User Interface e Games. 52

53 Aba PROJECTS Criando um Novo Projeto Quando selecionar um dos templates, o XDK apresentará uma breve descrição do mesmo. Será possível nesse momento escolher o tipo do projeto e se o mesmo vai utilizar o App Designer, conforme imagem abaixo. Às vezes o template possui um artigo que poderá ser consultado clicando no respectivo link. 53

54 Aba PROJECTS Criando um Novo Projeto No caso dos jogos funciona de forma semelhante. Cada template apresentará uma breve descrição. No caso do Cocos2d, visto na imagem, será possível selecionar entre as versões 2.x e 3.x. O desenvolvedor também deverá selecionar o tipo de projeto (CODE BASE), de acordo com os tipos que vimos anteriormente. Nesse momento também será possível selecionar a orientação: Portrait ou Landscape. Se desejar, poderá localizar os fontes do Demo no GitHub através do botão abaixo. Depois que analisar e selecionar o projeto desejado, deverá clicar no botão Continue para que o projeto seja criado. 54

55 Aba PROJECTS Plugins para a Aplicação Cordova Os plugins do Apache Cordova são ferramentas muito importantes para melhorar os recursos e funcionalidades do seu aplicativo. Eles fornecem uma maneira de estender a API JavaScript do aplicativo, resultando numa maior integração entre o aplicativo e o software/hardware do dispositivo. Existem centenas de plugins Cordova (e Adobe PhoneGap) disponíveis para uso com o seu aplicativo. Eles podem ser encontrados no registro de plugins do Cordova (Apache Cordova Plugins Registry) e em outros registros semelhantes, assim como em muitos repositórios open source do GitHub. O XDK utiliza plugins Cordova durante todo o ciclo de desenvolvimento de uma App HTML5 Cordova. O uso mais evidente é feito nas abas PROJECTS e BUILD. Na aba DEVELOP, os plugins são usados no editor para apresentar o intelli-sense. A aba EMULATE toma nota dos plugins que foram adicionados na aba PROJECTS e disponibiliza para a App apenas as APIs dos plugins que foram adicionados. O emulador usará o conjunto completo de plugins disponíveis no XDK, mesmo que não tenham sido adicionados ao projeto. Um plugin é um pacote de código que permite que sua App HTML5 se comunique com a plataforma nativa em que é executada. O plugin fornece acesso a funcionalidades de plataforma que normalmente não estão disponíveis para Apps que rodam num navegador. As APIs Cordova e do XDK são implementadas como plugins. 55

56 Aba PROJECTS Plugins para a Aplicação Cordova Os plugins consistem de APIs JavaScript e módulos de código nativo (para cada plataforma suportada pelo plugin). Em essência, quando a App chama a API JavaScript do plugin, ela é redirecionada para o código nativo subjacente que implementa essa API no dispositivo. Por exemplo, a API JavaScript é redirecionada para código Java em um dispositivo Android ou para código Objective C em um dispositivo ios. Plugins podem ser simples ou complexos: tão complexo quanto o mecanismo de persistência do banco de dados ou tão simples como um método para ligar o flash da câmera LED. Você não vai precisar aprender Java, Objective C ou C#. Para usar o plugin você vai simplesmente adicioná-lo no seu projeto, sem se preocupar em aprender como o plugin funciona internamente. Você pode pensar em um plugin Cordova como uma biblioteca JavaScript que estende as características específicas do dispositivo que sua App pode acessar, características que normalmente não podem ser acessadas a partir de um navegador ou WebView padrão. 56

57 Aba PROJECTS Plugins para a Aplicação Cordova Observações Já que a maioria dos plugins são bibliotecas de terceiros, o XDK pode não ter conhecimento explícito de funcionalidades ou do código interno de um plugin específico. As ferramentas de depuração incluídas no XDK apenas fornecem suporte para os plugins do núcleo do Cordova e XDK. Nem todos os plugins são iguais. Muitos plugins estão disponíveis apenas para as plataformas Android e ios. Os plugins do núcleo do Cordova e XDK suportam uma ampla gama de plataformas. Certifique-se de confirmar que o plugin que você pretende usar suporta as plataformas em que você planeja implantar seu aplicativo, ou utilize técnicas de detecção de plataformas e de recursos para implementar uma solução alternativa para plataformas não suportadas. Nem todos os plugins se comportam de maneira igual em todas as plataformas. O funcionamento de um plugin pode variar em função da plataforma, geralmente devido a detalhes de plataforma e não porque o plugin está incompleto ou com problemas. As variações incluem propriedades que não existem em algumas plataformas ou métodos que não funcionam em outras plataformas. Consulte a documentação do plugin para observar esses detalhes. O XDK não possui um mecanismo para validar o funcionamento de um plugin. Busque suporte com o autor e pesquise na Internet sobre a qualidade do plugin antes de utilizá-lo. Os plugins de núcleo do XDK são escritos como plugins Cordova. Os plugins de núcleo (core) do Cordova são mantidos pela comunidade de desenvolvimento Cordova CLI. Já os plugins de núcleo do XDK são mantidos pela equipe de desenvolvimento da Intel. 57

58 Aba PROJECTS Plugins para a Aplicação Cordova Observações Se você estiver desenvolvendo seu próprio plugin Cordova, você pode precisar instalar e usar o sistema Cordova CLI. Você pode compartilhar o seu plugin com os outros sem exigir que eles também instalem o sistema Cordova CLI. O XDK fornece um mecanismo para depurar o código nativo em um plugin Cordova apenas para dispositivos Android 4.x e 5.x. Para outros dispositivos, você pode depurar utilizando o depurador weinre ou ferramentas de desenvolvimento de código nativas que são específicas para a plataforma nativa. A App Preview que você baixou a partir das respectivas lojas para depuração rápida de seus aplicativos HTML5 inclui suporte apenas para plugins de núcleo do Cordova e XDK. Para conseguir depurar os plugins de terceiro, será preciso construir a App, na aba BUILD, e então rodar e depurar num dispositivo real. Para ativar o uso do plugin Cordova, você deverá referenciar o arquivo cordova.js no seu arquivo index.html. <script type="text/javascript" src="cordova.js"> Se o seu projeto contiver mais do que um arquivo HTML que utilizará a API Cordova, você deverá incluir a linha acima em cada arquivo HTML. É uma boa prática adotar o estilo conhecido como SPA (Single Page Application). Você faz uma página e realiza todo o controle via Ajax. A App ficará mais eficiente, pois ao criar várias páginas, a App precisa recarregar os scripts, assets, etc. Mesmo que tais coisas estejam em cache, ainda assim haverá problemas de desempenho. 58

59 Aba PROJECTS Plugins para a Aplicação Cordova Single Page Application [SPA] As SPAs são aplicações completas, desenvolvidas em JavaScript, que funcionam quase como se estivessem sendo executadas nativamente no desktop. O Google foi pioneiro nesta tecnologia e o mundo o seguiu. Atualmente, a maior parte das aplicações web 2.0 usam este modelo: o Gmail, a busca do Google, o Google Drive, Facebook, o Twitter, o FourSquare, o Instagram, blogs, sites corporativos, dentre outros. Observe na imagem que numa aplicação web tradicional, as requisições ficam sendo feitas ao servidor, que devolve uma página HTML para o navegador a cada requisição. Já numa SPA, toda a página é carregadas de uma vez só. As requisições são feitas via Ajax e o servidor retorna os dados em JSON que serão exibidos na página sem que a mesma seja recarregada. 59

60 Aba PROJECTS Plugins para a Aplicação Cordova Já vimos anteriormente que a aba PROJECTS contém uma seção para o gerenciamento de plugins chamada Plugin Management. Os plugins adicionados no XDK serão armazenados como parte de seu projeto e copiados para a pasta plugins. Os plugins subirão para o servidor de compilação da Intel junto com o código fonte da App. Você deverá selecionar um dos plugins listados para adicionar ao projeto: plugins mantidos pela equipe do Apache Cordova, plugins mantidos pela equipe XDK, plugins Cordova mantidos por terceiros ou qualquer outro plugin de terceiro que sua App necessite. 60

61 Aba PROJECTS Plugins para a Aplicação Cordova Após selecionar um plugin, você pode expandi-lo para ver mais detalhes sobre ele: ID, versão está instalada no projeto, um link para a página de documentação principal e um ícone para modificar a versão do plugin. Dependendo do plugin que está utilizando poderá ainda observar de quais outros plugins ele depende, quais as versões do Cordova que são compatíveis com o plugin, as permissões Android que o plugin vai precisar e o nome do autor que criou o plugin. 61

62 Aba PROJECTS Plugins para a Aplicação Cordova O Plugin Manager armazena os plugins incluídos no projeto numa pasta chamada plugins dentro da pasta do projeto. Cada plugin é armazenado em uma subpasta dentro da pasta plugin. O nome da subpastas será de acordo com o ID do plugin. Por exemplo: plugin/org.apache.cordova.file-transfer. Incluir os fontes do plugin será útil para análise do código e também para depuração. 62

63 Aba PROJECTS Plugins para a Aplicação Cordova Whitelist Rules É através das Whitelist Rules que você poderá especificar quais recursos do dispositivo sua App terá acesso. Antes de publicar a aplicação é preciso determinar quais recursos específicos são exigidos por ela, a fim de maximizar a segurança do seu aplicativo e seus dados. 63

64 Aba PROJECTS Plugins para a Aplicação Cordova Whitelist Rules Quando não existem regras definidas, todos os acessos de rede ficarão bloqueados. Através das regras é possível definir se o acesso ao recurso será feito por meio de uma API (XMLHttpRequest, por exemplo) ou através de marcação (<iframe>, <script>, <img>). A opção "Block All" bloqueia os acessos externos. Esta é a configuração recomendada se o seu aplicativo não necessita de quaisquer recursos externos. Essas regras só se aplicam às aplicações que são construídas e publicadas. As abas EMULATE, TEST e DEBUG não tem conhecimento das regras definidas nas configurações do projeto. As ferramentas de depuração são configurados de forma permanente para permitir acesso externo irrestrito. Se você precisar testar suas regras, deverá utilizar um pacote publicado num dispositivo real. Em tempo de execução, quando uma requisição é feita para acessar um recurso de rede dentro do escopo de execução da App, o WebView compara a requisição com as regras definidas. Conceder acesso a um recurso externo, por conta de de uma regra, significa que o código em execução no WebView autoriza o acesso ao recurso externo. Em outras palavras, o WebView interpreta as regras para decidir quando autorizar e quando negar o acesso. 64

65 Aba PROJECTS Plugins para a Aplicação Cordova Lista de Plugins Você pode encontrar uma lista com os plugins Cordova no seguinte link: Caso o link não esteja ativo, basta procurar por cordova-plugin no site da Apache Software Foundation. Ao clicar no link de um dos plugins, você é direcionado para a página GitHub com o código fonte e a documentação do plugin. Existem alguns plugins XDK que estão depreciados. Tome cuidado para não utilizá-los na sua aplicação. Prefira sempre utilizar os plugins Cordova. Observe sempre a documentação do XDK para observar se o plugin está depreciado antes de utilizá-lo. 65

66 Aba PROJECTS Plugins para a Aplicação Cordova Configurando Os detalhes para construir a App no servidor da Intel são controlados por diretivas localizadas dentro de um arquivo comumente chamado config.xml. No caso do XDK será criado um arquivo intelxdk.config.xml. Um arquivo de configuração será criado automaticamente para cada plataforma. Por exemplo: intelxdk.config.android.xml. Já que esse arquivo é gerado automaticamente sempre que um build é realizado, você não pode alterá-lo. Se você precisar incluir alguma diretiva que não esteja disponível nas opções do XDK, deverá utilizar um arquivo de adições: Additions File. Tal arquivo receberá o nome intelxdk.config.additions.xml. Na maioria dos casos você não usará esse arquivo. Ele é opcional. 66

67 Aba PROJECTS Plugins para a Aplicação Cordova Configurando Arquivo de Adição Existem algumas opções que podem estar no arquivo de configuração e não tem como configurar via XDK. A maioria dessas opções são incomuns ou podem ser configuradas pelo valor padrão. Se você for forçado a trabalhar com uma dessas configurações, será o caso de criar o arquivo de adição que mencionamos anteriormente: intelxdk.config.additions.xml. Podemos ver um exemplo na imagem abaixo. A primeira diretiva adiciona uma opção de configuração que cria um aplicativo Cordova para Android que pode ser depurado remotamente usando o Google Chrome DevTools. 67

68 Aba PROJECTS Plugins para a Aplicação Cordova Configurando Arquivo de Adição As demais diretivas do exemplo acima controlam as opções do plugin Cordova Status Bar. Normalmente essas opções não seriam colocadas nesse arquivo. O fato de elas estarem aí mostram que o desenvolvedor sobrescreveu esses diretivas para alterar o comportamento padrão do plugin. As diretivas acima serão adicionadas intelxdk.config.<platform>.xml. em cada arquivo específico de plataforma: 68

69 Aba PROJECTS Plugins para a Aplicação Cordova Configurando Arquivo de Adição Observe as quatro linhas adicionadas no final do arquivo específico da plataforma android. 69

70 Aba PROJECTS Plugins para a Aplicação Cordova Configurando Arquivo de Adição A seguir veremos alguns exemplos de utilização do arquivo de adição. O primeiro adiciona uma preferência para todos os demais arquivos de construção: <preference name="fullscreen" value="true" /> Adiciona uma preferência apenas para o arquivo de construção do Android: <!-- +Android --><icon platform="android" src="assets/icon-l.png" density="ldpi" /> <!-- +Android --><preference name="fullscreen" value="true" /> Remove um plugin do arquivo de construção do ios: <!-- -ios --><intelxdk:plugin intelxdk:name="contacts" /> Remove todos os ícones do arquivo de construção do Windows 8: <!-- -Windows8 --><icon /> Adiciona um plugin de terceiro que precisa de parâmetros em todos os arquivos de construção: <intelxdk:plugin intelxdk:name="my Special Plugin" intelxdk:value=" <intelxdk:param intelxdk:name="plugin_parm_1" intelxdk:value=" " /> <intelxdk:param intelxdk:name="plugin_parm_2" intelxdk:value="mysecondparameter" /> </intelxdk:plugin> 70

71 Aba DEVELOPER Visão Geral A aba DEVELOPER fornece uma visão completa dos arquivos da pasta do projeto. Você pode editar os arquivos de projeto com o editor de código embutido do XDK ou com o seu editor de código favorito. Você também pode usar essa aba para explorar web services e visualizar ativos (assets) de jogos. O XDK detecta automaticamente se um os arquivos do projeto foram alterados (por um editor de código externo, por exemplo) e solicita ações adicionais por conta disso. Nessa aba o desenvolvedor tem duas opções de visão (view): CODE visualiza o editor de código embutido e DESIGN permite a criação da App de forma visual usando o App Designer. 71

72 Aba DEVELOPER Visão Geral Para alternar entre os modos CODE e DESIGN, utilize os botões com o mesmo nome vistos na imagem anterior. Na imagem anterior você observa o tipo de visão DESIGN. O painel Live Development Tasks se encontra do lado direito. Ele permite que a App seja prévisualizada rapidamente num navegador ou dispositivo, o que é muito útil para alterações no layout e CSS. 72

73 Aba DEVELOPER Editor de Código Na barra lateral do lado esquerdo é possível visualizar os arquivos que pertencem ao projeto. Se você selecionar um dos arquivos, verá o código respectivo no editor de código. Se estiver na visualização de Design, clique no botão CODE para visualizar o editor de código. 73

74 Aba DEVELOPER Editor de Código Na barra lateral do lado esquerdo é possível visualizar os arquivos que pertencem ao projeto. Se você selecionar um dos arquivos, verá o código respectivo no editor de código. Se estiver na visualização de Design, clique no botão CODE para visualizar o editor de código. 74

75 Aba DEVELOPER Editor de Código O editor de código embutido é totalmente integrado com a aba EMULATE. Ou seja, quando salvar um arquivo no editor, o mesmo será carregado automaticamente na aba EMULATE para ser utilizado no emulador. O mesmo não ocorre quando o arquivo é utilizado num editor externo. Nesse caso, será preciso atualizar a aba EMULATE. No entanto, um arquivo alterado num editor externo será atualizado automaticamente no editor embutido. Para adicionar um novo arquivo, clique com o botão direito na árvore de arquivos e selecione a opção New File, conforme imagem. Você deve então informar o nome do arquivo com a extensão. Após isso poderá trabalhar no arquivo em branco. Se desejar deletar o arquivo que criou, selecione o mesmo com o botão direito do mouse e escolha a opção Delete. É possível que após deletar o arquivo, ele ainda apareça na árvore. Se isso acontecer, clique novamente com o botão direito na árvore para ter acesso ao menu de contexto e selecione a opção Refresh File Tree. Como você pode observar, tanto a árvore de arquivos quanto o editor de textos possuem um menu de contexto, que aparece quando você pressiona o botão direito do mouse. Realize testes para observar as opções que estão disponíveis nesses menus. 75

76 Aba DEVELOPER Editor de Código Visão de Múltiplos Arquivos Para habilitar a visão para múltiplos arquivos: 1 Para criar uma visão side-by-side, clique View > Vertical Split. 2 Para criar uma visão above-and-below, clique View > Horizontal Split. 3 Para desativar a divisão da tela e fechar o painel que não está em foco, use View > No Split. Depois de habilitar uma visão de tela dividida (split screen view), as operações realizadas serão aplicadas ao painel que se encontra com o foco. Além disso, a seção Working Files será substituída pelas opções Left e Right numa divisão vertical (side-by-side), ou Top e Bottom numa divisão horizontal (above-and-below). 76

77 Aba DEVELOPER Editor de Código Ao explorar o editor você logo verá que ele se comporta como outros editores de código, como o Notepad++, e que tem suas próprias características, evidentemente. Por exemplo, pressione Control+F (Edit > Find) e digite a string de pesquisa <script. O editor realça as ocorrências de <script e sua barra de rolagem indica onde a sequência ocorre no arquivo: 77

78 Aba DEVELOPER Editor de Código Autocompletion Hints O editor exibe dicas (hints) enquanto você digita o código HTML, CSS ou JavaScript. O editor conhece a maioria dos objetos e métodos da API. No caso das tags HTML você pode precisar pressionar Control+Espaço ou clicar em Edit > Show Code Hint. Seguem algumas dicas relacionadas às tags HTML. 78

79 Aba DEVELOPER Editor de Código Autocompletion Hints O editor exibe dicas (hints) enquanto você digita o código HTML, CSS ou JavaScript. O editor conhece a maioria dos objetos e métodos da API. 79

80 Aba DEVELOPER Editor de Código Autocompletion Hints O editor exibe dicas (hints) enquanto você digita o código HTML, CSS ou JavaScript. O editor conhece a maioria dos objetos e métodos da API. 80

81 Aba DEVELOPER Editor de Código Quick Edit O Quick Edit exibe uma janela pop-up de edição para a definição selecionada dentro da janela atual. Ela aparece com um fundo cinzento e é limitada ao código JavaScript e CSS. Por exemplo, usando o arquivo index.html da App demo Towers of Hanoi, posicione o cursor do mouse na div mostrada abaixo: Depois de pressionar Control+E ou clicar em Navigate > Quick Edit, a definição correspondente do arquivo toh.css aparece num pop-up com um fundo cinza. 81

82 Aba DEVELOPER Editor de Código Quick Edit Após editar o arquivo pressione Control+S para salvá-lo. Para fechar o pop-up pressione ESC ou Control+E ou ainda clique em Navigate > Quick Edit. Para editar um JavaScript é semelhante: posiciona o cursor numa função e pressiona Control+E ou clica em Navigate > Quick Edit. Observe o exemplo abaixo no arquivo toh.js. Após chamar o Quick Edit aparecerá o pop-up correspondente. 82

83 Aba DEVELOPER Editor de Código Quick Open Use o Quick Open para navegar rapidamente por vários arquivos, números de linhas ou definições de funções. Para isso pressione Control+Shift+O ou clique em Navigate > Quick Open para abrir um pop-up no canto direito superior da janela de edição. 83

84 Aba DEVELOPER App Designer Visão Geral O XDK inclui uma ferramenta de layout GUI intuitiva chamada App Designer. Use esse editor para desenhar visualmente as páginas da App. O App Designer dá ênfase ao design responsivo através da utilização de um sistema de grid e media queries. Isso vai te ajudar a criar layouts de páginas que funcionam bem em diferentes tamanhos e orientações de tela. Esta ferramenta também reduz o trabalho duro e tedioso de desenhar telas HTML responsivas. O App Designer suporta múltiplos frameworks UI. Escolha um que atenda às necessidades de seu aplicativo: Twitter Bootstrap 3, Ionic, Framework7, jquery Mobile, Ratchet, App Framework ou Topcoat. Você deve usar o App Designer pelas seguintes razões: Se você está desconfortável para escrever na unha o código HTML ou CSS/LESS. Se você não é um especialista no framewok UI que escolheu, ou não quer se tornar um especialista. Se você prefere que o App Designer faça o trabalho pesado, que exige um monte de código manual, como as media queries. Quando você precisa fazer rapidamente um protótipo para fins de avaliação. 84

85 Aba DEVELOPER App Designer Visão Geral O XDK inclui uma ferramenta de layout GUI intuitiva chamada App Designer. Use esse editor para desenhar visualmente as páginas da App. O App Designer dá ênfase ao design responsivo através da utilização de um sistema de grid e media queries. Isso vai te ajudar a criar layouts de páginas que funcionam bem em diferentes tamanhos e orientações de tela. Esta ferramenta também reduz o trabalho duro e tedioso de desenhar telas HTML responsivas. O App Designer suporta múltiplos frameworks UI. Escolha um que atenda às necessidades de seu aplicativo: Twitter Bootstrap 3, Ionic, Framework7, jquery Mobile, Ratchet, App Framework ou Topcoat. Você deve usar o App Designer pelas seguintes razões: Se você está desconfortável para escrever na unha o código HTML ou CSS/LESS. Se você não é um especialista no framewok UI que escolheu, ou não quer se tornar um especialista. Se você prefere que o App Designer faça o trabalho pesado, que exige um monte de código manual, como as media queries. Quando você precisa fazer rapidamente um protótipo para fins de avaliação. 85

86 Aba DEVELOPER App Designer Visão Geral 1 Para um projeto criado com o App Designer, use os botões CODE e DESIGN para alternar entre a view do App Designer e do Editor de Código. 2 O botão Arrow exibe ou oculta a árvore de arquivos do projeto. 3 Coluna da esquerda onde é possível exibir e selecionar Controls, Pages, árvore DOM e outros elementos. Para exibir/esconder um dos grupos, clique no label vertical, por exemplo: Pages. A lista de controles disponíveis vai depender do framework UI selecionado para o projeto. 4 Através da barra de ferramentas do App Designer é possível recarregar seu aplicativo, excluir um controle ou elemento selecionado, desfazer ou refazer a última ação, ver o framework UI selecionado, redimensionar a área de trabalho (workspace canvas) e a orientação do dispositivo, exibir ou ocultar as guidelines. 5 Barra de ferramentas para selecionar ou excluir controles e outros elementos de documentos da área de trabalho. 6 Workspace canvas que mostra o look-and-feel da App numa representação WYSIWYG (What You See Is What You Get - O que você vê é o que você obtém). Arraste e solte os elementos da coluna da esquerda para a área de trabalho. 7 Coluna da direita para configurar as propriedades, criar estilos e media queries, atribuir estilos aos controles, definir interatividade e outros elementos. 86

87 Aba DEVELOPER App Designer Workspace Canvas Conforme você arrasta um controle da coluna da esquerda para a área de trabalho: Possíveis áreas de destino aparecem em um fundo azul claro. A área onde o controle é colocado fica com um fundo alaranjado. Para mover um controle existente na área de trabalho para um novo local, basta arrastá-lo. A Utilizado para inserir Wrap Points. B Barra dos wrap points. Nela você poderá mover, inserir e deletar os wrap points. C Alças da workspace. Observe que são três alças. Servem para redimensionar a tela (canvas) de acordo com a necessidade. D Workspace para ver os controles e elementos relacionados que você inseriu na página do aplicativo. Você pode inserir, mover e selecionar controles dentro dessa tela (canvas), ou excluir um elemento. E Abas que exibem o log de atividade, ajuda contextual, visualização do código LESS e HTML. É possível editar o código LESS e HTML. 87

88 Aba DEVELOPER App Designer LESS Abrimos aqui um parêntesis para explicar o que é o LESS. Segundo a Wikipédia: LESS é uma linguagem de folha de estilos dinâmica desenhada por Alexis Sellier. Ela foi influenciada por Sass e influenciou a nova sintaxe SCSS do Sass, que adaptou sua sintaxe de formação de blocos do tipo CSS. LESS é de código aberto. Sua primeira versão foi escrita em Ruby, no entanto em versões posteriores, o uso do Ruby foi depreciado e substituído por JavaScript. A sintaxe indentada do LESS é uma metalinguagem aninhada, uma vez que um código válido em CSS também é válido em LESS e tem a mesma semântica. LESS fornece os seguintes mecanismos: variáveis, aninhamento, mixins, operadores e funções; a principal diferença entre LESS e outros pré-compiladores de CSS é que LESS permite a compilação em tempo real pelo navegador por meio do LESS.js. LESS pode ser executado tanto no lado do cliente quanto no lado do servidor, ou pode ser compilado em CSS plano. 88

89 Aba DEVELOPER App Designer O App Designer só estará visível e disponível se você iniciar um projeto que o utilize. Se for um projeto em branco, marque a caixa Use App Designer. Os templates Layout and User Interface também contém essa caixa. Alguns Samples e Demos utilizam o App Designer, outros não. 89

90 Aba DEVELOPER App Designer Depois de informar o nome do projeto, o XDK vai solicitar que você escolha o framework UI. O lado direito da tela exibe alguns controles interativos do framework selecionado para ajudar na escolha. 90

91 Aba DEVELOPER App Designer Analise o arquivo de index.html e observe que a seção <body> contém múltiplas tags <div>. O <div> mais externo define o documento principal. Se você tem uma linha com duas colunas, a linha contém tags <div> e aninhadas dentro dela estão as <div> das colunas. Dentro de cada coluna <div> estão os controles que você inseriu aninhados com as tags <div> dessa coluna. 91