Создание своего первого приложения с использованием средств Visual Studio Tools для Apache Cordova

  • Статья

В Visual Studio 2013 инструменты Cordova выпущены в виде предварительной (CTP) версии. Инструменты Cordova будут выпущены как часть Visual Studio 2015, и рекомендуется использовать Visual Studio 2015 RTM для разработки приложений с помощью инструментов Visual Studio для Apache Cordova. Visual Studio можно скачать из Центра загрузки Майкрософт.

Приложение, созданное с помощью Visual Studio Tools для Apache Cordova, использует Cordova для получения доступа к встроенным API с помощью таких веб-технологий, как HTML и CSS. Приложения работают на нескольких устройствах благодаря уменьшению или устранению необходимости в машинном коде.

Некоторые задачи являются общими для большинства приложений Cordova. К ним относятся следующие методы.

  • Создание проекта Cordova

  • Построение и запуск приложения по умолчанию Hello

  • Выбор сторонней платформы JavaScript

  • Создание пользовательского интерфейса

  • Добавление встроенных функций (подключаемых модулей)

  • Добавление подключенных служб

  • Добавление ресурсов, определяемых платформой

  • Тестирование, упаковка и публикация

Создание проекта Cordova

Перед тем как вы сможете создать новый проект, убедитесь, что выполнены все требования к системе и установлено расширение инструментов Visual Studio для Apache Cordova для Visual Studio. Дополнительные сведения см. в разделе Установка Visual Studio Tools для Apache Cordova.

Создание нового проекта

  1. Запустите Visual Studio. В строке меню выберите Файл, Создать, Проект.

  2. В диалоговом окне Новый проект в разделе Шаблоны выберите JavaScript, Приложения Apache Cordova, а затем шаблон Пустое приложение.

    Примечание

    Шаблон пустого приложения для TypeScript находится в папке TypeScript, Apache Cordova (чтобы выполнить полное руководство по созданию приложения ToDoList, выберите JavaScript).

  3. Для выбора папки для проекта выберите Обзор.

  4. Назначьте приложению имя, а затем нажмите кнопку ОК.

    Примечание

    Чтобы пройти весь учебник, присвойте приложению имя AngularJSToDo.

    Создание нового проекта гибридного приложения для нескольких устройств

  5. Выберите для проекта вариант системы управления версиями или выберите Отменить, чтобы пропустить ее выбор на данном этапе.

    Visual Studio создает новый проект и открывает обозреватель решений на правой панели.

    Структура проекта в приложении Apache Cordova в VS

Структура проекта в Visual Studio 2015 обновляется, чтобы обеспечить поддержку сторонних CLI и соответствие структуре проекта Cordova. В Visual Studio 2013 используется устаревшая структура проекта. Рекомендуется создавать приложения Cordova с помощью Visual Studio 2015.

Предупреждение

При переносе проекта из более ранней версии Visual Studio см. эти сведения о миграции.

Новый проект Cordova включает четыре папки верхнего уровня.

  • merges используется для добавления специфического для платформы кода. Дополнительные сведения см. в разделе Настройка приложения, созданного с помощью Visual Studio Tools для Apache Cordova.

    • По умолчанию, шаблон пустого приложения содержит часто применяемый, специфический для платформы код для Windows и Android в папке merges. (platformOverrides.js применяется для указания файла платформы.)

    • Для устройств Android имеется JS-файл, позволяющий поддерживать функции JavaScript Function.prototype.bind() на устройствах Android 2.3.

    • В Windows 8, Windows 8.1 и Windows Phone 8.1 файл winstore-jscompat.js помещен в папку merges\windows, чтобы обеспечить поддержку разнообразных библиотек JavaScript. Дополнительные сведения см. в разделе Оболочка динамического контента JavaScript для сайта с проектом приложений в Магазине Windows.

  • Папка plugins используется для подключаемых модулей Apache Cordova, которые обеспечивают доступ к собственным функциям устройства.

  • Папка res используется для визуальных активов, определяемых платформой (значков и экранов-заставок), сертификатов подписи и (при необходимости) файлов конфигурации, определяемых платформой. Дополнительные сведения см. в разделе Настройка приложения, созданного с помощью Visual Studio Tools для Apache Cordova.

  • Папка www, которая используется для кода вашего приложения.

    Папка www включает еще несколько папок.

    • css содержит основные таблицы стилей CSS, включенные в пустой шаблон.

    • images — предлагаемая папка для изображений для вашего приложения.

    • script — это папка по умолчанию для всех файлов JavaScript или TypeScript.

Помимо файлов CSS и JavaScript новый проект также содержит следующие файлы.

  • config.xml содержит параметры конфигурации для вашего приложения. Этот файл можно открыть в обозревателе решений в конструкторе конфигурации (интерфейсе для файла config.xml) или непосредственно изменить его, если выбрать пункт Просмотр кода в контекстном меню для файла.

  • В файле taco.json хранятся метаданные проекта, что позволяет Visual Studio выполнять сборку в отличных от Windows ОС, например Mac.

  • www\index.html — это начальный экран по умолчанию для вашего приложения.

  • Project_Readme.html содержит ссылки на полезную информацию.

Подробные сведения о процессе создания Cordova в Visual Studio и в структуре проекта Visual Studio, см. в разделе Развертывание и запуск приложения.

Построение и запуск приложения по умолчанию Hello

После создания проекта с помощью шаблона по умолчанию «Пустое приложение», выполните небольшой тест, чтобы проверить правильность установки и настройки. Для этого начального теста выполните приложение «Hello» по умолчанию (не изменяя шаблон пустого приложения) на эмуляторе Windows или одном из эмуляторов Apache Ripple, который отличаются минимальными требованиями к установке. Если вы предпочитаете тестировать приложение на другой платформе, см. следующие разделы: Запуск приложения Apache Cordova в Android, Настройка средств Visual Studio Tools для Apache Cordova и Запуск приложения Apache Cordova в Windows Phone.

Построение и запуск приложения по умолчанию Hello

  1. Выберите Windows-x64, Windows-x86 или Android в списке Платформы решения.

    На рисунке ниже показана платформа Android.

    Выбор Android в качестве цели развертывания

    Если список Платформы решения не отображается, выберите Платформы решения в списке Добавить или удалить кнопки, а затем саму платформу (Windows-x64, Windows-x86 или Android).

    Выбор платформы для развертывания

  2. Если выбрана платформа Android и установлен браузер Chrome, выберите один из эмуляторов Apache Ripple, как показано ниже.

    Выбор эмулятора Ripple

    Примечание

    Chrome по умолчанию не установлен.

    Если используется Visual Studio 2015 и Hyper-V включен на компьютере, можно запустить приложение в эмуляторе Visual Studio для Android (выберите параметр Эмулятор VS для телефона Android, например).

    Если выбрана платформа Windows, приложение можно запустить на целевом объекте развертывания по умолчанию — на локальном компьютере.

  3. Нажмите клавишу F5 для запуска процесса отладки или Shift + F5 для запуска без отладки.

    Вот как выглядит приложение по умолчанию в одном из эмуляторов Ripple.

    Запуск приложения по умолчанию Hello в эмуляторе Ripple

    Совет

    Если вы запускаете приложение на имитаторе Ripple и появляется сообщение об ошибке с информацией о том, что необходимо установить новую версию Android SDK, используйте для ее установки диспетчер Android SDK Manager.В Windows откройте диспетчер пакета SDK Manager из командной строки, введя следующую команду: android sdk

    Если появится сообщение об ошибке Cannot find module [modulename] или произойдет сбой приложения, см. инструкции в разделе Переустановка vs-tac. Если очистка кэша Cordova (или переустановка vs-tac) не помогает устранить проблему, см. раздел Известные проблемы.

  4. Для останова процесса отладки нажмите Shift + F5.

Следующие шаги

Выбор сторонней платформы JavaScript

Как правило, при создании приложения Cordova вам также требуется включить в него стороннюю платформу JavaScript в целях упрощения разработки приложений или выполнения рекомендаций по их проектированию. Однако платформа может быть не единственной. (При этом добавление платформ также необязательно. Такие платформы не являются частью Cordova.)

Сторонние платформы JavaScript могут включать различные функции и характеристики проекта, такие как перечисленные ниже.

  • Шаблоны проектирования MVC («модель-представление-контроллер»), разделяющие проблемы приложения. Наиболее популярные из них — AngularJS и Backbone.

  • Элементы управления и стили пользовательского интерфейса. Платформа пользовательского интерфейса (или библиотека), как правило, включающая определенные элементы управления, такие как элемент управления «сетка», и иногда таблицы стилей CSS. Дополнительные сведения см. в разделе Создание пользовательского интерфейса.

  • Модель навигации. Такие платформы, как AngularJS и WinJS с открытым исходным кодом, а также другие платформы, обеспечивают модель одностраничной навигации, поддерживающую поведение, аналогичное приложению.

Создание пользовательского интерфейса

Приложения Cordova выполняются в элементе управления WebView на всех платформах, за исключением Windows и Windows Phone 8.1, поэтому они больше похожи на веб-приложения. При планировании интерфейса для клиентов важно задать им несколько вопросов.

  • Требуется ли, чтобы приложение выглядело одинаково в разных платформах?

    Как правило, структура пользовательского интерфейса обеспечивает рабочую среду, характерную для данного разработчика, и выглядит одинаково на разных платформах. Некоторые из наиболее популярных платформ интерфейса включают Ionic и Bootstrap.

    Пример, в котором используется платформа Ionic, см. в разделе Шаблон начального уровня Ionic SideMenu.

  • Если требуется обеспечить внешний вид и поведение встроенного приложения, можете ли вы выделить более приоритетную платформу?

    Некоторые структуры пользовательского интерфейса могут напоминать оформление и поведение определенной платформы, например iOS. Если требуется обеспечить внешний вид и поведение в соответствии с каждой платформой, затраты на разработку могут быть выше, при том что такой результат труднодостижим.

Очень важно следовать указаниям по разработке для конкретных платформ, чтобы гарантировать, что приложение сможет пройти проверку. Приложения необязательно должны выглядеть как собственные компоненты платформы, чтобы получить утверждение магазина, однако их поведение должно соответствовать приложению, а не веб-странице. Дополнительные сведения См. раздел Утверждение своего приложения Apache Cordova в магазинах приложений.

Пример использования Ionic см. в шаблоне начального уровня Ionic SideMenu. Пример использования WinJS с открытым исходным кодом см. в шаблоне приложения навигации WinJS.

Если интерфейс приложения относительно прост или вы располагаете ресурсами разработки, можно создать собственный пользовательский интерфейс, основываясь на рекомендациях в отношении кросс-платформенных CSS, например, используя запросы CSS3 FlexBox и запросы @media. Подробные сведения можно найти на различных ресурсах в Интернете. Демонстрацию работы некоторых из этих методик см. в примере страницы «Основной/подробности» AngularJS.

При создании собственного интерфейса следует учесть некоторые аспекты.

  • Если целевая платформа — Android 4.4 или более поздней версии (браузеры на базе Chromium), Windows или Windows Phone, обеспечивается более эффективная поддержка стандартов CSS и других веб-технологий. Дополнительные сведения о поддерживаемых функциях см. на веб-сайте caniuse.com.

  • Если целевая платформа — iOS или версии Android, предшествующие 4.4, браузер основан на WebKit. (Поведение имитатора Ripple, использующего установленную версию Chrome, во многом напоминает Android 4.4.) Поведение некоторых браузеров WebKit отличается. Например, браузеры WebKit не обеспечивают согласованную поддержку модулей vw и vh, которые полезны при проектировании быстро реагирующего пользовательского интерфейса.

Совет

Используйте папку merges в проекте для обработки различий платформ, для которых нельзя создать более универсальный код.

Добавление встроенных функций (подключаемых модулей)

Одна из самых важных функций, обеспечиваемых Cordova, — поддержка подключаемых модулей, предоставляющих доступ к встроенным функциям, таким как геолокация и управление батареей. Используя подключаемый модуль, можно выполнить программирование в универсальном API JavaScript. Основные подключаемые модули, как правило, поддерживают все основные платформы, тогда как сторонние модули могут потребовать дополнительного изучения. Если поддержка подключаемого модуля недоступна, может потребоваться настроить существующий модуль или написать собственный, что подразумевает работу с машинным кодом.

Дополнительные сведения см. в разделе Управление подключаемыми модулями для приложений, созданных с помощью Visual Studio Tools для Apache Cordova.

Добавление подключенных служб

Если в приложении используются службы Azure или Office365, см. информацию в разделе Добавление подключенных служб в приложение, созданное с помощью Visual Studio Tools для Apache Cordova. Основной подключаемый модуль для мобильных служб Azure доступен в конструкторе конфигурации в Visual Studio.

Дополнительные сведения о добавлении служб Azure в пример приложения «Список задач» для Visual Studio Tools для Apache Cordova (версия AngularJS) см. в разделе Создание примера приложения ToDoList.

Инструкции по началу работы над созданием приложений с помощью служб Azure или Office 365 с Cordova см. в следующих статьях и сообщениях в блогах.

Azure

Office 365

Добавление ресурсов, определяемых платформой

Ресурсы, определяемые платформой, такие как экраны-заставки и значки магазинов, необходимы, чтобы приложение было утверждено для загрузки из магазинов приложений. Эти ресурсы содержатся в папке res проекта. Папку res также можно использовать для добавления настраиваемых файлов конфигурации. Дополнительные сведения см. в разделе Настройка приложения, созданного с помощью Visual Studio Tools для Apache Cordova.

Загрузка средств Получить средства Visual Studio Tools для Apache Cordova или узнать больше

См. также

Другие ресурсы

Пример AngularJS

Пример WinJS

Пример Backbone