Configuração do Apache Cordova Lab. 13. Prof. Bruno C. Vani

Transcrição

1 Configuração do Apache Cordova Lab. 13 Prof. Bruno C. Vani

2 Apache Cordova

3 Visão Geral [1/2] Permite acessar funcionalidades nativas dos dispositivos móveis (como câmera, GPS, etc.) através de JavaScript Permite o desenvolvimento de uma aplicação móvel apenas com HTML, CSS e JavaScript Aplicativo completo e de mesma complexidade pode ser desenvolvido sem nenhum código nativo (Java, Objective-C, etc.) Com pequenas alterações ou até mesmo sem nenhuma alteração, o aplicativo se torna portável a outras plataformas

4 Visão Geral [2/2] Cordova fornece um conjunto de bibliotecas JavaScript que podem ser invocadas Estas bibliotecas são baseadas em código nativo para os tipo de dispositivo específico disponíveis Plataformas suportadas: ios, Android, BlackBerry, Windows Phone, Palm WebOS, Bada e Symbian. Projeto sob a Apache Software Foundation Livre Código-fonte aberto (open source)

5 Quando usar Cordova? Desenvolver um aplicativo para mais de uma plataforma móvel (Android, Windows Phone, etc.) Implantar uma aplicação web em uma App Store Desenvolver aplicativos que funcionem por meio de uma WebView (janela especial de browser) e que possam acessar interfaces nativas do dispositivo Desenvolver plugins entre interfaces nativas e a WebView

6 Configuração do Ambiente de Desenvolvimento

7 Componentes - Ambiente Instalar o Java JDK (Oracle): Exemplo de tutorial: o-linux-ubuntu IDE - exemplos: Netbeans (pode ser a versão somente com PHP); Eclipse

8 Instalação do Cordova e Dependências [1/3] Passo 1: instalação do Node.js e do npm: Opção 1: baixar, extrair e configurar PATH: $ tar xf node v linux x64.tar.gz Colocar pasta "bin" no PATH do usuário Opção 2: via apt-get (recomendado): $ sudo apt get install npm $ npm v Instalação do Node: $ sudo apt get install nodejs nodejs legacy $ node v

9 Instalação do Cordova e Dependências [2/3] Passo 2: Instalação do git: $ sudo apt get install git Testar: $ git version

10 Instalação do Cordova e Dependências [3/3] Passo 3: instalação do Cordova pelo utilitário "npm" do Node.js: $ sudo npm install g cordova Testar: $ cordova v Exibir "help: $ cordova h

11 Específico para Android [1/3] Passo 1: instalação do utilitário "ant": Opção 1: baixar, extrair e configurar PATH: $ tar xf apache ant bin.tar.gz Colocar pasta bin no PATH do usuário Opção 2: via apt-get (recomendado): $ sudo apt get install ant Testar: $ ant h

12 Específico para Android [2/3] Passo 2: instalação do Android SDK para usar com o Cordova, pode ser a versão "Stand alone SDK tools"

13 Escolha a versão apropriada:

14 Específico para Android [3/3] Continuação do Passo 2: Baixar, extrair e configurar o PATH: Pode-se extrair no diretório /usr/local: $ tar xf android sdk_r linux.tgz Colocar pasta "tools" e "platforms" no PATH do usuário (adicionar as seguintes linhas no arquivo ~/.profile do usuário do Linux): # android sdk Sala 20 PATH="/home/aluno/Android/Sdk/tools:/home/ aluno/android/sdk/platform tools:$path" export ANDROID_HOME="/home/aluno/Android/Sdk"

15 Resumo e Testes: Reiniciar o PC Executar os seguintes comandos e verificar se houve algum erro: $ android help # help do Android $ javac help # help do java $ cordova help # help do Cordova Verificar as seguintes configurações do PATH do usuário: $ echo $ANDROID_HOME # path do Android

16 Gerenciando o SDK do Android (SDK Manager) O SDK contém arquivos básicos para construir as aplicações Diferentes "versões alvo" (target) do Android podem ser baixadas através do SDK Manager: $ android

17 Criando um AVD (Android Virtual Device) Utilitário gráfico para criação de emuladores Android (smartphones ou tablets virtuais): $ android avd

18 Prática Criação da aplicação pela linha de comando o Cordova cria uma pasta para o projeto com códigos-fonte de base para o app: $ cordova create helloworld app Codificação IDE Nebeans ou Eclipse Abrir pasta criada pelo Cordova como um novo projeto com códigos-fonte existentes na IDE de sua preferência

19 Continuação - Prática Adicionando a plataforma Android ao app criado: $ cd helloworld app # entre na pasta do proj. $ cordova platform add android Testes do aplicativo no Emulador: Antes de fazer isso, deixe um emulador aberto: $ cd helloworld app # entre na pasta do proj. $ cordova build android # apenas compila $ cordova emulate android # compila e emula