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

    image

    Сегодня я хочу поделиться с вами еще одним дополнением, позволяющим разрабатывать кроссплатформенные мобильные приложения для 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+.

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


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



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


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

    image

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


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



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

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

    Разработка


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

    image

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


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

    image

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

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


    Подключить и использовать мобильные сервисы тоже не сложно. Для этого надо нажать AddConnected service, указать Microsoft Аzure Аccount и создать сервис.
    В проект добавится папка и файл сервиса, в который вы сможете написать необходимый код так же используя JavaScript.

    image

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


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

    image

    image

    Заключение


    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
    Документация
    Microsoft
    120.50
    Microsoft — мировой лидер в области ПО и ИТ-услуг
    Share post

    Comments 11

      –1
      а для VS 2012 есть?
        +1
        Нет, доступно начиная с VS2013 Update 2
          0
          Там можно подключить собственно саму Cordova/PhoneGap и разрабатывать вы будете под WP7.5/8 и W8
          0
          Вы меня простите, но почему в «зависимостях» можно подключить WebSQL Polyfill (Windows, Windows Phone), когда IndexedDB — стандарт, а WebSQL — Deprecated?

          Обиженный на iOS веб-разработчик.
            0
            Кто затестил, отзовитесь)
              0
              Кто то может рассказать о производительности таких приложений?
                +2
                iPhone 5+ / производительные Android 4+ работают нормально.
                Лично я бы рекомендовал Cordova для текстовых приложений (заказ пиццы, новости, etc.), нехитрых игр. Использовать можно.
                Но мы пилим графический редактор с использованием Canvas — производительности хватает, но хочется чтобы работало быстрее. На старых или очень бюджетных аппаратах — пользователями пришлось пренебречь. :(
                Для Android используем Crosswalk — для того чтобы у приложения была схожая среда на разных версиях операционки.
                  +2
                  Производительность зависит напрямую от дизайна и используемых JS-фреймворков. Сам браузер в приложении отрабатывает нормально (даже на Android 2.2), а вот если попытаться воспроизвести нативный дизайн и эффекты, тут все сразу становится не очень хорошо. Но опять же на IPhone и Galaxy, например, все отлично работает (иногда заметны чуть-чуть тормоза). Тут нужно понимать, что например Android свои Activity кеширует, а HTML+JS будет отрабатывать каждый раз заново. Не знаю как WP или IOS, но наверное тоже.
                  Еще нюансы:
                  1. Все ОС рекомендуют определенный стиль разработки интерфейса, так что для хорошего приложения все равно нужно несколько дизайнов под каждую ОС.
                  2. Не под все есть плагины (например, под Push-уведомления только сторонние и не всегда работающие). Решается написанием собственного плагина (что достаточно просто, но уже требует знаний и Android, и Objective-C, и C#). Intent-схемы (для вызовов приложения из других) опять же реализовывать нужно нативно.
                  3. Бесплатно построить приложение под IOS без самой IOS и Mac у меня не получилось (пришлось ставить Mac на виртуалку). Но это бы понадобилось все равно из-за пункта 2.

                  В общем, как приложение-визитка (по аналогии с сайтом-визиткой) или для простенькой игры, отлично пойдет, а для функционального приложения смысла особого нет — все равно придется писать код на соответствующих языках и там все не настолько сложно, выгоды нет.
                    0
                    Эх, понял что лучше всё таки native. Спасибо.
                      0
                      Плагины для Push, камеры, файловой системы есть, но да — иногда приходится лезть в Java/ObjC код для правки. Скажу за себя: до этого я не работал ни с Java ни с ObjC, но доделать или изменить что то приходилось. Работа с native занимает примерно 10-15% от общего времени работы по коду приложения.
                      Смысл делать Cordova приложения определенно есть, если приложение не хитрое, хочешь стартануть сразу на нескольких платформах и нужен прототип.
                    0
                    А как подключить bower? Хочется чтобы автоматом выкачивались новые версии, ну например ratchet и angularjs
                    (VS 2015 Preview)
                    (аналочичный вопрос висит без ответа stackoverflow.com/questions/27088973/visual-studio-2015-preview-grunt-and-bower-integration)

                    Only users with full accounts can post comments. Log in, please.