[Перевод] Мобильные приложения для веб-разработчиков
Путь разработчика мобильного приложения часто начинается с выбора: разрабатывать под iOS, Android или Windows? Этот выбор мгновенно уменьшает размер вашей потенциальной аудитории, но разработчики вынуждены принимать подобные решения. Те, кто хочет присутствовать по всех трех магазинах приложений, приходят к необходимости переписывать приложение под каждую платформу.
Visual Studio позволяет поддерживать максимальный охват пользователей, достигая при этом значительного повторного использования кода. С помощью Xamarin C#-разработчики могут поддерживать общую бизнес-логику между iOS, Android и Windows-приложениями. С помощью Apache Cordova веб-разработчики могут достичь максимального повторного использования кода, создавая кросс-платформенные приложения на HTML, CSS и JavaScript.
В этой статьей мы посмотрим в деталях, как вы можете использовать расширение «Multi-Device Hybrid Apps» для Visual Studio, для второго сценария — создания кросс-платформенных приложений с использованием веб-стандартов. Чтобы следовать за статьей:
После того, как вы установили все необходимые инструменты, создайте новый проект для «Multi-Device Hybrid Apps.»
Доступ к возможностям устройства на любой платформе, используя один и тот же JS APIПрежде, чем мы начнем изучение инструментов, давайте сделаем паузу и посмотрим на архитектуру Cordova-приложения. Само приложение реализовано как HTML-приложение (например, как одностраничное приложение), хостящееся внутри элемента управления WebView (или как WWA, Windows Web Application, на Windows), что дает вашему приложению доступ к нативным API устройства. Большинство разработчиков предпочитает синхронизировать данные с сервером через RESTful веб-сервисы (например, Мобильные сервисы Azure), но все файлы, например, HTML, CSS, JS и медиа-файлы упаковывается в приложение так, чтобы пользователь мог продолжать использовать приложение в offline-режиме.Для доступа к нативным возможностям устройства (например, камере, контрактам, файловой системе, акселерометру) из JavaScript Cordova использует конструкцию плагинов. Плагины обычно скрывают два компонента: нативный код для вызова возможностей каждой из трех платформ (например, на Objective-C, Java и C#) и нормализированный API на JavaScript, доступный для использования в вашем приложении.
Для использования API вы делаете асинхронные запросы внутри вашего JS-кода. Нативный код возвращает ответ в функцию обратного вызова. В примере ниже плагин камеры возвращает URI фотографии, указывающий на файловую систему на мобильном устройстве.
// Запросить расположение файла изображения из фото-библиотеки мобильного устройства
function getPhotoURI () {
navigator.camera.getPhoto (onPhotoSuccess, onPhotoFail, {
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: pictureSource.PHOTOLIBRARY
});
}
// Функция обратного вызова в случае успешного собрытия от фото-библиотеки
function onPhotoSuccess (imageURI) {
// Добавить img в div#album
var img = document.createElement ('img');
img.setAttribute ('src', imageURL);
document.getElementById ('album').appendChild (img);
}
Спроектирован, опираясь на веб-стандарты
Cordova-плагины, как правило, спроектированы так, чтобы выставлять такие JavaScript API, которые будут в будущем сходиться с веб-стандартами. Цель в том, чтобы плагины в конечном итоге опирались на реализацию стандартов W3C там, где они есть. Например, Web API для вибрирования устройства, navigator.vibrate (time), уже реализован в Cordova, Chrome и Firefox. Со временем все мобильные устройства и браузеры будут использовать одни и те же API, делая тем самым плагины устаревшими и необходимым в виде прослоек для старых платформ (как polyfill). Конечная цель Cordava в том, чтобы служить как временный мост до тех пор, пока веб-платформа не начнет поддерживать возможности устройств.JavaScript или TypeScript: выбирать вам
Как только вы начнете что-то делать, значительная часть вашего времени будет посвящена написанию кода. Будб это HTML, CSS, JavaScript или TypeScript, мы хотим предоставлять нашим разработчикам контекстную помощь для их текущих задач. Например, многие разработчики испольщуют IntelliSense (умные подскащки), чтобы избежать типичные синтаксические ошибки и быстро использовать новые API. Хотели бы вы знать, какие нативные возможности устройства доступны для вашего приложения. Инструменты Visual Studio для Apache Cordova включают поддержку IntelliSense для основных плагинов Cordova при использовании как JavaScript, так и TypeScript.
Если вы создаете собственный плагин, вы, возможно, хотите добавить поддержку IntelliSense и для ваших компонетов. Чтобы поддержать API основных плагинов Cordova, мы используем расширение JavaScript IntellliSense для редактора JavaScript. Для TypeScript мы просто написали d.ts-файлы на TypeScript для описания каждого API. Вы можете найти d.ts-файлы на публичной странице для открытых d.ts файлов: DefinitelyTyped. Каждый d.ts файл предоставляет мета-данные, необходимые для организации целостного и аккуратного IntelliSense для Cordova-плагинов без необходимости выполнения JavaScript-кода в фоне.
Три способа для предпросмотра вашего приложения Чтобы достичь наибольшей продуктивности, большинство разработчиков решают использовать один и тот же код, — 95% или более, — на всех целевых платформах: iOS, Android и Windows.Так как большинство разработчиков выбирают распространять единый код на HTML/CSS/JS на всех платформах, очень важно убедиться, что ваши приложения выглядят и ведут себя ожидаемым образом на всех платформах. Мы позаботились о том, чтобы предпросмотр приложений был как можно менее болезненным и как можно более эффективным (насколько это возможно), предоставив вам три варианта для тестирования приложения: 1) симулятор Ripple на базе Chrome, 2) нативные эмуляторы, предоставленные производителями платформ, и 3) развертывание на реальных устройствах.
Если только вы не волшебный разработчик, способный заставить приложение идеально работать, даже не запуская его, вы периодически будете нуждаться в том, чтобы развернуть приложение и протестировать его на устройстве или эмуляторе для каждой платформы. Однако совсем не обязательно начинать именно с этого. Наша общая рекомендация такова:
Для базовой настройки внешнего вида и отладки на ранних стадиях, используйте Ripple. Ripple — это симулятор с открытым исходным кодом, который работает внутри Chrome. Visual Studio автоматически скачивает и устанавливает Ripple и Chrome, когда вы устанавливаете инструменты для разработки. Так как Ripple использует движок V8 от Google и рендеринг на базе blink, он идеально подходит для симуляции поведения на iOS или Android-устройстве. Более того, сегодня между рендерингом Chrome и IE11 если лишь небольшое количество существенных различий, так что это также неплохой прокси для Windows-платформы. Вообще говоря, это классно, что на ранних стадиях разработки можно использовать Ripple, потому что он достаточно быстр и знаком веб-разработчикам. Ripple опирается на многие современные возможности CPU вашего компьютера и тысячи маленьких оптимизаций, сделанных в десктопном браузере. Для финальной валидации и полноценной отладки используйте устройство. Как бы мы ни любили отладку в десктопном браузере, все же есть небольшие, но важные различия между ним и мобильными браузерами. К сожалению, мелкие различия в CSS-рендеринге или интерпретации JavaScript могут иметь значительные последствия, так что важно протестировать ваше приложение на чем-то реальном. Настоящим источником правды всегда будет устройство. Используя нативные системы сборки (например, Xcode, SDK для Android и Windows), Visual Studio может собрать и развернуть приложения на устройствах, подключенных к вашей машине по USB. Если устройство не доступно, используйте эмулятор. Учитывая разнообразие устройств и версий платформ, существующих в природе, — особенно версий Android, — не всегда возможно поддерживать полный набор устройств для тестирования. В нашем офисе мы поддерживаем небольшую коллекцию устройств, включающую: iPod с iOS7–8, Samsung Galxy с Android 4.0, Nexus 7 с Android 4.4, Nokia 1520 с Windows Phone 8.1 и наши машины для разработке с Windows 8.1. Для всего остального мы используем эмуляторы. Для дополнительной информации по доступным вариантам предпросмотра и их уровня поддержки для Android, iOS и Windows обратитесь к нашей документации.
Ищите и исправляйте ошибки до того, как это сделают ваши пользователи
Наконец, в некоторых случаях вы будете сталкиваться со сложными и трудно отслеживаемыми ошибками в вашем коде на JavaScript или TypeScript. В такие моменты на помощь вам придет ваш верный друг — отладчик.
Вам доступны все инструменты отладки, уже знакомые разработчикам приложений для Windows Store, включая исследователь DOM, консоль JavaScript, точки останова, контрольные значения (watch), локальные (local), «только мой код» (Just My Code) и другие возможности. Другие диагностические инструменты пока не доступны.
В нашем начальном релизе мы сфокусировались на поддержке отладки для Android 4.4 и Windows Store. Но после отзывов от разработчиков этим летом мы также добавили поддержку для Android 2.3.3 и выше. Поддержка отладки для версий ниже Android 4.4 потребует от вас использования прокси для отладки, наиболее популярный — это jsHybugger.
Теперь попробуйте инструменты! Если вы еще этого не сделали, пожалуйста, скачайте и поставьте себе инструменты или попробуйте одну из наших виртуальных машин в Azure.Примеры приложений, использующих наиболее популярные сегодня библиотеки: AngularJS, Backbone и WinJS + TypeScript.
Как только вы попробуйте, не стесняйтесь:
До новых встреч, удачного программирования! Ryan J. Salva
Полезные ссылки
