Cвежее дополнение к Visual Studio для создания кроссплатформенных приложений на HTML и JavaScript

Я хочу поделиться с вами еще одним дополнением, позволяющим разрабатывать кроссплатформенные мобильные приложения для Windows, Windows Phone, iOS и Android, используя Visual Studio 2013. В отличие от многих известных вам фреймворков – это дополнение абсолютно бесплатно и легко в освоении для веб-разработчика. Речь пойдет про дополнение, интегрирующее проект Apache Cordova в Visual Studio 2013.

Что такое Cordova?

Apache Cordova (PhoneGap) представляет собой набор JavaScript API для доступа к функциям различных устройств. Его можно использовать в сочетании с JQuery Mobile,  Dojo Mobile или Sencha Touch. Это позволяет создавать мобильные приложения полностью на HTML, CSS и JavaScript.

С помощью Cordova можно не только разрабатывать приложения, но и отлаживать их и публиковать в магазины. Сразу скажу, что дополнение поддерживает разработку для следующихверсий ОS:

• Android 4+;
• iOS 6 & 7;
• Windows 8+;
• Windows Phone 8+.

Начало работы

Чтобы начать разработку вам понадобится следующее ПО:

• OS Windows 8.1;
• Visual Studio 2013 Update 2 – Professional, Ultimate или Premium со следующими фичами: Tools for Maintaining Store apps for Windows 8, Windows Phone 8.0 SDK;
• Multi-Device Hybrid Apps for Visual Studio.

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

После установки дополнения, в меню File – New – Project вам будет доступен новый тип проекта Blank App (Apache Cordova).

Увеличить

Структура проекта

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

Папки:

• Css – содержит базовые стили для приложения;
• images – папка для изображений, которые вы будете использовать в приложении;
• res – используется для платформозависимых файлов, например, сертификатов или изображений;
• res/cert – сертификаты;
• res/icons – платформозависимые иконки;
• res/screens – платформозависимые изображения для заставки (splash screen).

Файлы:

• Index.html – стартовая страница приложения. Может быть изменена.
• Config.html – конфигурационные настройки приложения. При открытии этого файла – откроется визуальный дизайнер.

Разработка

Чтобы начать работу, вы можете воспользоваться готовым примером кода для WinJs. Вы можете использовать не только WinJs, но и другие библиотеки. При этом, вы разрабатываете в одном проекте приложение сразу для всех необходимых платформ. Это несколько иной подход чем в Xamarin и многих других дополнениях. Конечно, единый интерфейс — это не всегда возможно, но когда это возможно, это очень экономит трудозатраты команды и облегчает поддержку приложения.

Увеличить

Подключение плагинов

Если вы планируете использовать какие-то аппаратные возможности устройств или облачные сервисы, вам могут понадобиться дополнительные плагины. Подключить их вы сможете в файле config.xml, на закладке Plugins.

Увеличить

Так же, вы можете поискать нужные вам плагины или обновления для них в репозитории Apache Cordovа или на GitHub, установить и использовать их.

Использование Microsoft Azure Mobile Services

Подключить и использовать мобильные сервисы тоже не сложно. Для этого надо нажать Add – Connected service, указать Microsoft Аzure Аccount и создать сервис.

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

Увеличить

Запуск и отладка

Visual Studio предоставляет возможности запуска и отладки приложения в режиме эмуляции, симуляции и непосредственно на устройствах. Выбор режима запуска и отладки осуществляется в настройках Solution Platform. Для запуска и отладки приложения на платформах отличных от Microsoft, вам понадобится использовать эмуляторы, часть из которых установятся вместе с дополнением, или подключить непосредственно сами устройства.

Увеличить

Увеличить

Заключение

Multi-Device Hybrid Apps for Visual Studio в данный момент еще не является релизом, но это отличный вариант для тех, кто хочет делать кроссплатформенные приложения, знает и любит веб-технологии.

Полезные ссылки

• OS Windows 8.1
• Visual Studio 2013 Update 2
• Multi-Device Hybrid Apps for Visual Studio CTP1.1
• Пример кода для WinJs
• Плагины Apache Cordova
• Документация