Начало работы по созданию приложения Cordova

В этом документе описывается создание проекта HTML5 в среде IDE, который упакован в виде мобильного приложения и запускается в симуляторе мобильного устройства. При создании приложения HTML5 можно воспользоваться шаблоном сайта Apache Cordova. Apache Cordova предоставляет группу методов API, которые позволяют разрабатывать приложение с HTML, CSS и JavaScript, для которого создается пакет в виде оригинального мобильного приложения. Приложение запускается на мобильном устройстве и может получать доступ к оригинальным функциям устройства, таким как GPS или камера. С помощью методов API Cordova разработчик может создать мобильное приложение без необходимости написания оригинального кода.

В этом документе описана установка обязательного программного обеспечения и разработка приложения с помощью Cordova. После установки Cordova можно в мастере 'Новый проект' использовать шаблон Cordova для создания приложения Cordova. Затем необходимо добавить код и запустить приложение в симуляторе мобильного устройства. В этом учебном руководстве используется симулятор iOS. Если вы собираетесь использовать эмулятор устройства под управлением Android, выполните аналогичные действия.

Демонстрация развертывания приложения Cordova в эмуляторе Android: Видеоролик 'Основы разработки на Cordova'.

Содержание

Содержимое на этой странице применимо к IDE NetBeans 8.0

Для выполнения этого учебного курса потребуются следующие материалы.

Программное обеспечение или ресурс Требуемая версия
IDE NetBeans, Java 8.0
Комплект для разработчика на языке Java (JDK) версия 7
Apache Cordova --
NodeJS --
Git --
SDK для мобильных платформ
Android или
iOS

Примечания.

  • Предполагается, что совместимый комплект SDK для целевой мобильной платформы и эмулятор устройства уже установлены.
  • Предполагается, что читатель обладает базовыми знаниями или опытом программирования на HTML, CSS и JavaScript. Для получения дополнительных сведений о поддержке HTML5 в среде NetBeans IDE см. раздел Начало работы с приложениями HTML5

Установка Cordova

Вам необходимо установить Cordova в локальной системе для упаковки приложения HTML5 в виде оригинального мобильного приложения с помощью среды IDE NetBeans. Используйте npm, диспетчер пакетов NodeJS, для установки и обновления Cordova. Кроме того, убедитесь, что в локальной системе выполнена установка и корректная настройка Git. Cordova использует Git для извлечения из репозитория необходимых исходных файлов Cordova при упаковке приложения в виде внутреннего мобильного приложения.

Большинство следующих действий этого упражнения будут выполнены в окне терминала.

  1. Загрузите и установите Node.js, если не сделали этого раньше.

    Программу установки можно загрузить с сайта Node.js.

  2. Откройте окно терминала.
  3. Чтобы убедиться в наличии Node.js, выполните следующую команду.
    $ node -v

    Если установка node.js выполнена, в окне терминала отобразится номер версии.

    Примечания.

    • При использовании прокси-сервера необходимо настроить node.js на использование данного прокси-сервера для доступа к сети. Для настройки прокси-сервера можно выполнить следующие команды, заменив http://proxy:8080 на нужный прокси-сервер.
      $ sudo npm config set proxy http://proxy:8080
      $ sudo npm config set https-proxy http://proxy:8080

      Для просмотра текущих параметров конфигурации выполните следующие команды.

      $ npm config list
    • Для получения дополнительных сведений о настройке node.js см. https://npmjs.org/doc/config.html.
  4. Для установки Cordova выполните следующую команду.
    $ npm install -g cordova

    Примечания.

    • Если при выполнении команды установки в окне терминала появляется сообщение об ошибке, убедитесь, что конфигурация прокси-сервера выполнена правильно.
    • Для обновления Cordova до самой последней версии выполните следующую команду.
      $ npm update -g cordova
  5. Чтобы убедиться в успешной установке Cordova и просмотр информацию об используемой версии, выполните следующую команду.
    $ cordova --version

    Если установка Cordova выполнена, в окне терминала отобразится номер версии.

  6. Загрузите и установите систему контроля версий Git, если не сделали этого раньше.

    Программу установки можно загрузить с сайта Git.

    Примечание. В среду Path требуется добавить Git.

  7. Для проверки успешной установки Git выполните следующую команду.
    $ git --version

    Если установка Git выполнена, в окне терминала отобразится номер версии.

    Примечания.

    • При использовании прокси-сервера необходимо настроить Git на использование данного прокси-сервера для доступа к сети. Для настройки прокси-сервера можно выполнить следующие команды, заменив http://proxy:8080 на нужный прокси-сервер.
      $ git config --global http.proxy http://proxy:8080
      $ git config --global https.proxy http://proxy:8080

      Для просмотра текущих параметров конфигурации выполните следующие команды.

      $ git config --list
    • Для получения дополнительных сведений о настройке Git см. инструкции по установке http://git-scm.com/book/en/Getting-Started-First-Time-Git-Setup.

Теперь у вас есть все инструменты, необходимые для разработки и упаковки оригинального мобильного приложения в среде IDE. В следующем упражнении для создания приложения используется мастер создания проектов.

Создание приложения Cordova

В этом упражнении мы используем мастер создания проектов в среде IDE, чтобы создать новое приложение Cordova. Приложение Cordova создается путем выбора шаблона Cordova Hello World в качестве шаблона сайта в мастере создания проекта. Приложение Cordova представляет собой приложение HTML5 с дополнительными библиотеками и файлами конфигурации. Если у вас уже есть приложение HTML5, вы можете использовать окно 'Свойства проекта' в среде IDE для добавления источников Cordova и других файлов, необходимых для упаковки приложения в виде приложения Cordova.

В этом учебном курсе создается очень простой проект HTML5, который содержит файл index.html и несколько файлов JavaScript и CSS. При создании проекта в мастере мы выберем несколько библиотек jQuery JavaScript.

  1. Выберите 'Файл' > 'Новый проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac) в главном меню, чтобы открыть мастер создания проектов.
  2. Выберите категорию HTML5, затем выберите Приложение Cordova. Нажмите кнопку "Далее".
    снимок экрана шаблона приложения Cordova в мастере создания проектов
  3. Введите CordovaMapApp в качестве имени проекта и укажите каталог на компьютере, где следует сохранить проект. Нажмите 'Далее'.
  4. В шаге 3. "Шаблон сайта", убедитесь, что шаблоны Download Online и Cordova Hello World выбраны в списке. Нажмите кнопку "Далее".
    снимок экрана панели шаблонов сайта в мастере создания приложений HTML5

    Примечание. Вы должны быть подключены к сети, чтобы создать проект, который основан на одном из интернет-шаблонов в списке.

  5. В шаге 4. "Файлы JavaScript" выберите библиотеки JavaScript jquery и jquery на панели 'Доступные' и щелкните кнопку со стрелкой вправо ( > ), чтобы переместить выбранные библиотеки на панель мастера 'Выбранное'. По умолчанию библиотеки создаются в папке проекта js/libraries. В этом учебном курсе будут использоваться "уменьшенные" версии библиотек JavaScript.

    Можно использовать текстовое поле на панели, чтобы отфильтровать список библиотек JavaScript. Например, введите jq в поле, чтобы найти библиотеки jquery. Вы можете удерживать нажатой клавишу Ctrl и щелкнуть левой кнопкой мыши имена библиотек для выбора нескольких библиотек.

    снимок экрана панели 'Библиотеки JavaScript' в мастере создания приложений HTML5

    Примечания.

    • Можно нажать номер версии библиотеки в столбце 'Версия', чтобы открыть всплывающее окно, в котором можно выбрать предыдущие версии библиотек. По умолчанию в мастере отображается самая последняя версия.
    • Минимизированные версии библиотек JavaScript - это сжатые версии, и при просмотре в редакторе код не является доступным для понимания.
  6. В шаге 5. "Служба поддержки Cordova", используйте значения по умолчанию. Для завершения мастера нажмите кнопку Готово.

    После нажатия кнопки 'Готово' в IDE создается проект, отображается узел проекта в окне 'Проекты' и открывается файл index.html в редакторе.

    снимок окна 'Проекты'

    Если развернуть папку js/libs в окне 'Проекты', будет видно, что библиотеки JavaScript, которые были указаны в мастере создания проектов, были автоматически добавлены к проекту. Можно удалить библиотеку JavaScript из проекта, щелкнув правой кнопкой мыши файл JavaScript и выбрав 'Удалить' во всплывающем меню.

    Чтобы добавить библиотеку JavaScript к проекту, щелкните правой кнопкой мыши узел проекта и выберите 'Свойства', чтобы открыть окно 'Свойства проекта'. Можно добавлять библиотеки к панели 'Библиотеки JavaScript' в окне 'Cвойства проекта'. Кроме того, можно скопировать файл JavaScript, который находится в локальной системе, напрямую в папку js.

    Теперь вы можете выполнить проверку выполнения и развертывания проекта в эмуляторе для целевого мобильного устройства.

  7. Щелкните значок выбора браузера на панели инструментов и убедитесь, что в столбце Cordova таблицы выбран эмулятор целевого мобильного устройства. В столбце Cordova можно выбрать эмулятор Android или симулятор iOS (потребуется OS X и XCode).
    снимок экрана раскрывающегося списка на панели инструментов
  8. Нажмите значок 'Выполнить' на панели инструментов.

При нажатии кнопки 'Выполнить' среда IDE выполняет развертывание приложения Cordova в эмуляторе.

снимок экрана приложения в симуляторе iOS

Примечание. При развертывании симулятор iOS должен открываться автоматически. При развертывании приложения в эмуляторе Android требуется настроить и открыть симулятор перед выполнением приложения. Демонстрация развертывания приложения Cordova в эмуляторе Android: Видеоролик 'Основы разработки на Cordova'.

Изменение приложения

В этом упражнении редактируются файлы index.html и index.js. Код, созданный в шаблоне Cordova Hello World, заменяется кодом для отображения карты текущего местоположения в приложении. Кроме того, необходимо изменить конфигурацию Cordova, удалив подключаемые модули Cordova, необязательные для приложения.

Редактирование файла HTML

В этом упражнении файл HTML редактируется в исходном редакторе с целью добавления ссылок в библиотеки и файлы CSS, а также для добавления элементов страниц.

  1. Откройте в редакторе index.html (если он еще не открыт).

    В редакторе можно увидеть, что среда IDE создала код на основе шаблона Cordova Hello World.

  2. Добавьте в редакторе ссылки на библиотеки jQuery JavaScript и файлы CSS, которые добавлялись при создании проекта. Добавьте следующий код (полужирным шрифтом) между открывающим и закрывающим тегами <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>

    В окне 'Проекты' можно увидеть путь к файлам и использовать функцию автозавершения кода в редакторе.

    снимок экрана автозавершения кода в редакторе
  3. Добавьте следующую ссылку на Google Maps JavaScript API между тегами <head>.
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    Примечание. Это ссылка на исключенную версию v2 JavaScript API. Эта версия JavaScript используется в данной учебной программе в демонстрационных целях. При создании настоящего приложения рекомендуется использовать новую версию.

  4. Удалите код между тегами <body> за исключением следующих ссылок на файлы JavaScript index.js и cordova.js.
       <body>
            
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            
        </body> 
    </html>

    Файл index.js был автоматически сгенерирован при создании проекта. Он отображается в узле js в окне 'Проекты'. Далее во время учебного курса мы изменим код в index.js.

    Файл cordova.js не отображается в окне 'Проекты', так как он генерируется при сборке приложения Cordova.

  5. Добавьте следующий код (полужирным шрифтом) между тегами 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>

Изменение конфигурации Cordova

В этом упражнении выполняется изменение списка подключаемых модулей Cordova, установленных в приложении.

  1. Правой кнопкой мыши щелкните узел проекта в окне "Проекты" и выберите "Свойства" во всплывающем меню.
  2. Выберите Cordova в списке категорий.
    Снимок экрана. Вкладка 'Подключаемые модули Cordova' в окне 'Свойства проекта'

    Вкладка 'Приложение' может использоваться для просмотра и изменения данных конфигурации Cordova о приложении, указанных в файле config.xml.

  3. Щелкните вкладку 'Подключаемые модули' на панели Cordova.

    Вкладка 'Подключаемые модули' содержит две панели. На панели 'Доступно' отображается список подключаемых модулей Cordova, доступных в настоящее время.

    На панели 'Выбрано' отображается список подключаемых модулей Cordova, установленных в приложении. При использовании шаблона Cordova Hello World для создания приложения все подключаемые модули устанавливаются по умолчанию. Для большинства приложений не требуются все подключаемые модули. Вкладка 'Подключаемые модули' в окне 'Свойства проекта' используется для удаления подключаемых модулей, необязательных для вашего приложения.

    Примечание. Кроме того, список установленных подключаемых модулей можно изменить путем внесения изменений в файл nbproject/plugins.properties в редакторе.

  4. Удалите все подключаемые модули за исключением следующих: API устройства (Device API), Диалоги (Уведомления) ( Dialogs (Notifications)) и Геолокация (Geolocation). Нажмите кнопку "ОК".
    Снимок экрана. Вкладка 'Подключаемые модули Cordova' в окне 'Свойства проекта'

Редактирование файла JavaScript

В данном упражнении выполняется удаление кода JavaScript, сгенерированного шаблоном, а также добавление нескольких простых методов для отображения карты текущего местоположения.

  1. Откройте index.js в редакторе.

    При создании проекта в index.js был сгенерирован шаблон кода. Для данного приложения можно удалить весь сгенерированный код.

  2. Замените созданный код следующим: Сохраните изменения.
    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);
        }
    }

    Примечание. Для данного учебного курса вызов метода onDeviceReady добавлен только в виде комментария, так как метод является необязательным для развертывания приложения в эмуляторе мобильного устройства. При необходимости выполнения приложения в веб-браузере следует удалить символы комментария перед вызовом метода onDeviceReady.

  3. Выполните сброс эмулятора, перезапустив эмулятор или сбросив его настройки.
  4. Нажмите 'Выполнить' на панели инструментов для развертывания приложения в эмуляторе.

    В симуляторе iOS появится запрос на разрешение приложению использовать ваше текущее месторасположение.

    Снимок экрана. Диалоговое окно с запросом текущего местоположения

    Вы можете проверить смоделированное местоположение в симуляторе IOS, выбрав 'Отладка > Местоположение > Пользовательское местоположение' в главном меню симулятора IOS, чтобы открыть диалоговое окно 'Пользовательское местоположение'.

    Снимок экрана. Диалоговое окно 'Пользовательское местоположение' в симуляторе iOS

    Если для вашего текущего местоположения в поле 'Широта' ввести значение 48.8582, а в поле 'Долгота' - 2.2945, приложение отобразит на карте Эйфелеву башню.

    Снимок экрана. Приложение при использовании текущего местоположения в симуляторе iOS

Отладка приложения

В этом упражнении описывается установка точки останова в файле JavaScript и повторное выполнение приложения.

  1. Выполните сброс или перезапуск эмулятора.
  2. Откройте index.js в редакторе.
  3. Установите точку останова, щелкнув в левой части следующей строки метода gotPosition.
    var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  4. Нажмите 'Выполнить' на панели инструментов, чтобы повторно выполнить приложение.

    При выполнении приложения отладчик дойдет до точки останова, когда приложение попытается определить текущее местоположение.

    Снимок экрана. Отладчик остановился по достижении точки останова

    Если навести курсор на переменную, отобразится всплывающая подсказка со сведениями о данной переменной. Если навести курсор на переменную latitude, в подсказке отобразится значение переменной.

    Снимок экрана. Подсказка с переменными

    Если навести курсор на переменную position или coords появится стрелка, которую можно нажать, чтобы развернуть подсказку.

    Снимок экрана. Подсказка с переменными

    Развернутая подсказка позволяет просматривать значения более подробно.

    Снимок экрана. Подсказка с переменными

    В этом случае удобнее просматривать значения в окне 'Переменные'. В окне 'Переменные' отображается широта и долгота текущего местоположения.

    снимок экрана с окном 'Переменные'

    В окне 'Сетевой монитор' отображается список запросов приложения.

    снимок экрана с окном 'Переменные'

Заключение

В этом учебном курсе описывается, как установить и настроить программное обеспечение, необходимое для создания приложения Cordova в среде IDE. Кроме того, вы узнаете, как создать приложение Cordova и изменить некоторые параметры конфигурации Cordova.



См. также

Подробнее о поддержке приложений HTML5 в IDE см. в следующих материалах на сайте www.netbeans.org:

Дополнительные сведения о jQuery доступны в официальной документации:

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