Conceitos Básicos sobre Criação de uma Aplicação Cordova

Este documento demonstra como criar um projeto HTML5 no IDE que seja encapsulado como uma aplicação móvel e executado em um simulador de dispositivo móvel. Ao criar uma aplicação HTML5, você tem a opção de criá-la usando um modelo de site Apache Cordova. O Apache Cordova oferece um grupo de APIs que permitem desenvolver uma aplicação com HTML, CSS e JavaScript encapsulada como aplicação móvel nativa. A aplicação é executada no dispositivo móvel e pode acessar as funções nativas do dispositivo, como GPS ou câmera. Usando as APIs Cordova, um desenvolvedor consegue criar uma aplicação móvel sem escrever qualquer código nativo.

Esse documento demonstra como instalar o software necessário para instalar e desenvolver uma aplicação com Cordova. Após a instalação do Cordova, você usará o modelo Cordova no assistente de Novo Projeto para criar uma aplicação Cordova. Em seguida, adicionará um código e executará a aplicação no simulador de dispositivo móvel. Este tutorial usará o simulador do iOS, mas as etapas serão semelhantes se você desejar usar um simulador de dispositivo Android.

Para ver um screencast que demonstre a implantação de uma aplicação Cordova no emulador do Android, assista ao Vídeo de Conceitos Básicos sobre Desenvolvimento Cordova.

Conteúdo

O conteúdo desta página se aplica ao NetBeans IDE 8.0

Para concluir este tutorial, você precisará dos recursos a seguir:

Software ou Recurso Versão Necessária
NetBeans IDE, Java 8.0
JDK (Java Development Kit) versão 7
Apache Cordova --
NodeJS --
Git --
SDK de Plataforma Móvel
Android ou
iOS

Observações:

  • Este documento presume que já estejam instalados um SDK de plataforma móvel de destino e um emulador de dispositivo compatíveis.
  • Este tutorial pressupõe que você tenha alguma experiência com programação ou algum conhecimento básico de HTML, CSS e JavaScript. Para obter mais detalhes sobre suporte a HTML5 no NetBeans IDE, consulte Conceitos Básicos sobre Aplicações HTML5

Instalando o Cordova

Instale o Cordova em seu sistema local para encapsular uma aplicação HTML5 como aplicação móvel nativa com o NetBeans IDE. Você usará npm, o gerenciador de pacote NodeJS, para instalar e atualizar o Cordova. Confirme também se o Git está instalado em seu sistema local e configurado corretamente. O Cordova usa o Git para recuperar em um repositório qualquer arquivo de código-fonte Cordova quando você encapsula a aplicação como móvel nativa.

A maioria das etapas a seguir deste exercício serão executadas na janela do terminal.

  1. Faça download e instale o Node.js, se não estiver instalado.

    Você pode fazer o download do instalador no site do Node.js.

  2. Abra uma janela de terminal.
  3. Execute o comando a seguir para confirmar se o Node.js está instalado.
    $ node -v

    Se o node.js estiver instalado, você verá uma versão impressa na janela do terminal.

    Observações.

    • Se estiver protegido por proxy, você precisará configurar o node.js para usar o proxy no acessar à rede. Execute os comandos a seguir para configurar o proxy, substituindo http://proxy:8080 pelo seu proxy.
      $ sudo npm config set proxy http://proxy:8080
      $ sudo npm config set https-proxy http://proxy:8080

      Execute o seguinte comando para exibir as definições de configuração atuais.

      $ npm config list
    • Para obter informações adicionais sobre a configuração do node.js, consulte https://npmjs.org/doc/config.html.
  4. Execute o comando a seguir para instalar o Cordova.
    $ npm install -g cordova

    Observações.

    • Confirme se a configuração do proxy está correta, caso veja uma mensagem de erro na janela do terminal quando executar o comando de instalação.
    • Você pode executar o seguinte comando que atualiza o Cordova para a versão mais recente.
      $ npm update -g cordova
  5. Execute o seguinte comando para confirmar se o Cordova está instalado e exibir a versão.
    $ cordova --version

    Se o Cordova estiver instalado, você verá uma versão impressa na janela do terminal.

  6. Faça o download e instale o sistema de controle de versão Git se não estiver instalado.

    Você pode fazer o download do instalador no site do Git.

    Observação. Adicione o Git à variável de ambiente Path.

  7. Execute o comando a seguir para confirmar se o Git foi instalado.
    $ git --version

    Se o Git estiver instalado, você verá uma versão impressa na janela do terminal.

    Observações.

    • Se estiver protegido por proxy, você precisará configurar o Git para usar o proxy no acessar à rede. Execute os comandos a seguir para configurar o proxy, substituindo http://proxy:8080 pelo seu proxy.
      $ git config --global http.proxy http://proxy:8080
      $ git config --global https.proxy http://proxy:8080

      Execute o seguinte comando para exibir as definições de configuração atuais.

      $ git config --list
    • Para obter informações adicionais sobre a configuração do Git, consulte as instruções de configuração em http://git-scm.com/book/en/Getting-Started-First-Time-Git-Setup.

Agora você tem todas as ferramentas de que precisa para desenvolver e encapsular uma aplicação móvel nativa no IDE. No próximo exercício, você usará o assistente de Novo Projeto para criar a aplicação.

Criando uma Aplicação Cordova

Neste exercício, você usará o assistente de Novo Projeto no IDE para criar uma nova aplicação Cordova. Crie uma aplicação Cordova selecionando o modelo Hello World do Cordova como modelo de site no assistente de Novo Projeto. O Cordova é uma aplicação HTML5 com algumas bibliotecas e arquivos de configuração adicionais. Se você tiver uma aplicação HTML5 existente, poderá usar a janela Propriedades do Projeto no IDE para adicionar os códigos-fonte do Cordova e outros arquivos exigidos para encapsular a aplicação como Cordova.

Neste tutorial, você criará um projeto HTML5 bem básico que tem um arquivo index.html e alguns arquivos JavaScript e CSS. Você selecionará algumas bibliotecas jQuery JavaScript quando criar o projeto no assistente.

  1. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac) no menu principal para abrir o assistente Novo Projeto.
  2. Selecione a categoria HTML5 e, em seguida, selecione Aplicação Cordova. Clique em Próximo.
    captura de tela do modelo de Aplicação Cordova no assistente de Novo Projeto
  3. Digite CordovaMapApp como Nome do Projeto e especifique o diretório no seu computador onde você quer salvar o projeto. Clique em Próximo.
  4. Na Etapa 3. Modelo de Site, confirme se Fazer Download do Modelo On-line está selecionado e se o modelo Cordova Hello World está selecionado na lista. Clique em Próximo.
    tela do painel Modelos de Site no assistente da Nova Aplicação em HTML5

    Observação: Você deve estar on-line para criar um projeto baseado em um dos modelos on-line da lista.

  5. Na Etapa 4. Arquivos JavaScript, selecione as bibliotecas JavaScript jquery e jquery-mobile no painel Disponível e clique no botão de seta para a direita ( > ) para mover as bibliotecas selecionadas para o painel Selecionado do assistente. Por default, as bibliotecas são criadas na pasta js/libraries do projeto. Para este tutorial, você utilizará as versões "minimizadas" das bibliotecas JavaScript.

    Você pode usar o campo de texto no painel para filtrar a lista de bibliotecas JavaScript. Por exemplo, digite jq no campo para ajudá-lo a encontrar as bibliotecas jquery. Você pode usar Ctrl-clique nos nomes das bibliotecas para selecionar várias bibliotecas.

    tela do painel Bibliotecas de JavaScript no assistente da Nova Aplicação em HTML5

    Observações.

    • Você pode clicar no número de versão da biblioteca na coluna Versão para abrir uma janela pop-up que permite selecionar a ordem das versões de biblioteca. Por default, o assistente exibe a versão mais recente.
    • As versões minimizadas das bibliotecas JavaScript são versões compactadas e o código não é abrangente quando exibido em um editor.
  6. Na Etapa 5. Suporte a Cordova, use os valores padrão. Clique em Finalizar para concluir o assistente.

    Quando você clicar em Finalizar, o IDE criará o projeto e exibirá um nó para o projeto na janela Projetos,e abrirá o arquivo index.html no editor.

    tela da janela Projetos

    Se você expandir a pasta js/libs na janela Projetos, poderá ver que as bibliotecas JavaScript que você especificou no assistente do Novo Projeto foram automaticamente adicionadas ao projeto. Você pode remover uma Biblioteca JavaScript de um projeto clicando com o botão direito do mouse no arquivo JavaScript e escolhendo Deletar no menu pop-up.

    Para adicionar uma biblioteca JavaScript a um projeto, clique com o botão direito do mouse no nó do projeto e escolha Propriedades para abrir a janela Propriedades do Projeto. Você pode adicionar bibliotecas no painel Bibliotecas JavaScript da janela Propriedades do Projeto. Como alternativa, é possível copiar um arquivo JavaScript que está no sistema local diretamente na pasta js.

    Agora você pode testar a execução do projeto e ver se ele foi implantado no emulador do seu dispositivo móvel de destino.

  7. Clique no ícone de seleção do browser na barra de ferramentas e confirme se o seu emulador de dispositivo móvel de destino está selecionado na coluna Cordova da tabela. Na coluna Cordova, você pode selecionar o Emulador do Android ou do iOS (exige OS X e XCode).
    tela da lista drop-down na barra de ferramentas
  8. Clique no ícone Executar na barra de ferramentas.

Quando você escolhe Executar, o IDE implanta a aplicação Cordova no emulador.

captura de tela da aplicação no Simulador do iOS

Observação. Se você estiver implantando no Simulador do iOS, o simulador deverá ser aberto automaticamente. Se estiver implantando a aplicação em um emulador do Android, você precisará configurar e iniciar o emulador antes de executar a aplicação. Para ver um screencast que demonstre a implantação de uma aplicação Cordova no emulador do Android, assista ao Vídeo de Conceitos Básicos sobre Desenvolvimento Cordova.

Modificando a Aplicação

Neste exercício, você editará os arquivos index.html e index.js. Você substituirá o código gerado pelo modelo Cordova Hello World pelo código de exibição de um mapa do local atual na aplicação. Além disso, modificará a configuração padrão do Cordova para remover os plug-ins do Cordova que não são necessários na aplicação.

Editando o Arquivo HTML

Neste exercício, edite o arquivo HTML no editor de código-fonte para adicionar referências a bibliotecas e arquivos CSS e para adicionar os elementos da página.

  1. Abra index.html no editor (se ainda não estiver aberto).

    No editor, você pode ver que o IDE gerou um código baseado no modelo Cordova Hello World.

  2. No editor, adicione referências a bibliotecas JavaScript e arquivos CSS do jQuery que foram adicionados quando você criou o projeto. Adicione o seguinte código (em negrito) entre as tags de abertura e fechamento <head>.
    <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, height=device-height, target-densitydpi=device-dpi">
            <link rel="stylesheet" type="text/css" href="css/index.css" />
            
            <link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.min.css"/>
            <script type="text/javascript" src="js/libs/jquery/jquery.min.js"></script>
            <script type="text/javascript" src="js/libs/jquery-mobile/jquery.mobile.min.js"></script>
            <title>Hello World</title>
        </head>
        <body>
        ...
    </html>

    Você vê o caminho para os arquivos na janela Projetos e, como ajuda, pode usar o preenchimento de código do editor.

    tela do recurso autocompletar código no editor
  3. Adicione o link a seguir à API JavaScript do Google Maps entre as tags <head>.
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    Observação. Este é um link para a v2 obsoleta da API JavaScript. Este JavaScript funcionará para fins de demonstração neste tutorial, mas você deve usar a versão mais nova em uma aplicação real.

  4. Remova todo o código entre as tags <body>, exceto os seguintes links para os arquivos JavaScript index.js e cordova.js.
       <body>
            
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            
        </body> 
    </html>

    O arquivo index.js foi gerado automaticamente quando você criou o projeto. O arquivo pode ser visto sob o nó js na janela Projetos. Você modificará o código em index.js posteriormente no tutorial.

    O cordova.js não é visto na janela Projetos porque é gerado na criação da aplicação Cordova.

  5. Adicione o seguinte código (em negrito) entre as tags body.
       <body>
            <div data-dom-cache="false" data-role="page" id="mylocation">
                <div data-role="header" data-theme="b">
                    <h1 id="header">Searching for GPS</h1>
                    <a data-role="button" class="ui-btn-right" onclick="showAbout()">About</a>
                </div>
                
                <div data-role="content" style="padding:0;">
                    <div id="map" style="width:100%;height:100%; z-index:50">
                    </div>
    
                </div>
                <div data-role="footer" data-theme="b" data-position="fixed" >
                    <h4>Google Maps</h4>
                </div>
            </div>
            <div data-dom-cache="false" data-role="page" id="about">
                <div data-role="header" data-theme="b">
                    <a data-role="button" data-rel="back" href="#mylocation" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">Back</a>
                    <h1>About</h1></div>
                <div data-role="content" id="aboutContent">
                </div> 
                <div data-role="footer" data-theme="b" data-position="fixed" >
                    <h4>Created with NetBeans IDE</h4>
                </div>
            </div>
            
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
        </body>
    </html>

Modificando a Configuração do Cordova

Neste exercício, você modificará a lista de plug-ins do Cordova que são instalados na aplicação.

  1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Propriedades no menu pop-up.
  2. Selecione Cordova na lista de categorias.
    captura de tela da guia Plug-ins do Cordova na janela Propriedades do Projeto

    Use a guia Aplicação para exibir e editar os detalhes de configuração do Cordova sobre a aplicação que são especificados em config.xml.

  3. Clique na guia Plug-ins do painel Cordova.

    A guia Plug-ins contém dois painéis. O painel Disponível exibe uma lista dos plug-ins do Cordova que estão disponíveis atualmente.

    O painel Selecionado exibe uma lista dos plug-ins que são instalados na aplicação. Por padrão, todos os plug-ins são instalados quando você usa o modelo Cordova Hello World para criar a aplicação. A maioria das aplicações não exige todos os plug-ins. Você pode usar a guia Plug-ins na janela Propriedades do Projeto para remover os plug-ins que não são exigidos pela aplicação.

    Observação. É possível também editar os plug-ins instalados editando o arquivo nbproject/plugins.properties no editor.

  4. Remova todos os plug-ins exceto API do Dispositivo, Caixas de Diálogo (Notificações) e Localização Geográfica. Clique em OK.
    captura de tela da guia Plug-ins do Cordova na janela Propriedades do Projeto

Editando o Arquivo JavaScript

Neste exercício, você removerá o código JavaScript gerado pelo modelo e adicionará alguns métodos simples para exibir o mapa da sua localização atual.

  1. Abra o index.js no editor.

    O IDE gerou um código padronizado em index.js quando você criou o projeto. Nessa aplicação, você pode remover todo o código gerado.

  2. Substitua o código gerado pelo seguinte código. Salve as alterações.
    var map;
    var marker;
    var watchID;
    
    $(document).ready(function() {
        document.addEventListener("deviceready", onDeviceReady, false);
        //uncomment for testing in Chrome browser
    //    onDeviceReady();
    });
    
    function onDeviceReady() {
        $(window).unbind();
        $(window).bind('pageshow resize orientationchange', function(e) {
            max_height();
        });
        max_height();
        google.load("maps", "3.8", {"callback": map, other_params: "sensor=true&language=en"});
    }
    
    function max_height() {
        var h = $('div[data-role="header"]').outerHeight(true);
        var f = $('div[data-role="footer"]').outerHeight(true);
        var w = $(window).height();
        var c = $('div[data-role="content"]');
        var c_h = c.height();
        var c_oh = c.outerHeight(true);
        var c_new = w - h - f - c_oh + c_h;
        var total = h + f + c_oh;
        if (c_h < c.get(0).scrollHeight) {
            c.height(c.get(0).scrollHeight);
        } else {
            c.height(c_new);
        }
    }
    
    function map() {
        var latlng = new google.maps.LatLng(50.08, 14.42);
        var myOptions = {
            zoom: 15,
            center: latlng,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControl: true
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
    
        google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
            watchID = navigator.geolocation.watchPosition(gotPosition, null, {maximumAge: 5000, timeout: 60000, enableHighAccuracy: true});
        });
    }
    
    // Method to open the About dialog
    function showAbout() {
        showAlert("Google Maps", "Created with NetBeans 7.4");
    }
    ;
    
    function showAlert(message, title) {
        if (window.navigator.notification) {
            window.navigator.notification.alert(message, null, title, 'OK');
        } else {
            alert(title ? (title + ": " + message) : message);
        }
    }
    
    function gotPosition(position) {
        map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
    
        var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        if (!marker) {
            //create marker
            marker = new google.maps.Marker({
                position: point,
                map: map
            });
        } else {
            //move marker to new position
            marker.setPosition(point);
        }
    }

    Observação. Neste tutorial, a chamada para o método onDeviceReady é definida como comentário porque o método não é necessário quando você está implantando a aplicação em um emulador de dispositivo móvel. Para executar a aplicação em um web browser, desfaça o comentário da chamada para o método onDeviceReady.

  3. Redefina o emulador reiniciando-o ou redefinindo as definições.
  4. Clique em Executar na barra de ferramentas para implantar a aplicação no emulador.

    No Simulador do iOS, você é solicitado a permitir que a aplicação use sua localização atual.

    captura de tela da caixa de diálogo que solicita sua localização atual

    Você pode testar uma localização simulada no Simulador do iOS selecionando Depurar > Localização > Localização Personalizada no menu principal do Simulador do iOS para abrir a caixa de diálogo Localização Personalizada.

    captura de tela da caixa de diálogo Localização Personalizada no Simulador do iOS

    Se você digitar 48.8582 no campo Latitude e 2.2945 no campo Longitude como sua localização atual, a aplicação exibirá a Torre Eiffel no mapa.

    captura de tela da aplicação ao usar uma localização personalizada no Simulador do iOS

Depurando a Aplicação

Neste exercício, você definirá um ponto de interrupção no arquivo JavaScript e executará a aplicação novamente.

  1. Redefina ou reinicie o emulador.
  2. Abra o index.js no editor.
  3. Coloque um ponto de interrupção clicando na margem esquerda da seguinte linha no método gotPosition.
    var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  4. Clique em Executar na barra de ferramentas para executar a aplicação novamente.

    Quando você executar a aplicação, o depurador atingirá o ponto de interrupção quando a aplicação tentar determinar sua localização atual.

    captura de tela do depurador interrompido no ponto de interrupção

    Se passar o cursor do mouse sobre as variáveis, você poderá ver uma dica de ferramenta que exibe detalhes sobre a variável. Se o cursor estiver sobre a variável latitude, o valor da variável será exibido na dica de ferramenta.

    captura de tela da dica de ferramenta que exibe variáveis

    Se o cursor estiver sobre position ou coords, a dica de ferramenta terá uma seta na qual você pode clicar para expandir a dica.

    captura de tela da dica de ferramenta que exibe variáveis

    A dica de ferramenta expandida permite que você veja os valores com mais detalhes.

    captura de tela da dica de ferramenta que exibe variáveis

    Nesse caso, é mais fácil ver os valores na janela Variáveis. Na janela Variáveis, você vê a latitude e longitude da sua localização atual.

    captura de tela da janela Variáveis

    Na janela Monitor de Rede, você vê uma lista das solicitações da aplicação.

    captura de tela da janela Variáveis

Resumo

Neste tutorial, você aprendeu a instalar e configurar o software exigido para criar uma aplicação Cordova no IDE. Aprendeu também a criar uma aplicação Cordova e modificar algumas definições de configuração Cordova.



Consulte Também

Para obter mais informações sobre suporte para aplicações no HTML5 no IDE, consulte os seguintes recursos em netbeans.org:

Para obter mais informações sobre o jQuery, consulte a documentação oficial:

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2015, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo