Мобільні додатки для веб-розробників

Шлях розробника мобільного додатку часто починається з вибору: розробляти під 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.»

image

Доступ до можливостей пристрою на будь-якій платформі, використовуючи один і той же JS API
Перш, ніж ми почнемо вивчення інструментів, давайте зробимо паузу і подивимося на архітектуру Cordova-додатки. Сам додаток реалізовано як HTML-додаток (наприклад, одностраничное додаток), хостящееся всередині елемента управління WebView (або як WWA, Windows Web Application, на Windows), що дає вашому додатку доступ до нативним API пристрою. Більшість розробників воліє синхронізувати дані з сервером через RESTful веб-сервіси (наприклад, Мобільні сервіси Microsoft), але всі файли, наприклад, HTML, CSS, JS і медіа-файли упаковується в додаток так, щоб користувач міг продовжувати використовувати додаток в offline-режимі.

Для доступу до нативним можливостей пристрою (наприклад, камері, контрактами, файловій системі, акселерометру) з JavaScript Cordova використовує конструкцію плагінів. Плагіни зазвичай приховують два компоненти: нативний код для дзвінка можливостей кожної з трьох платформ (наприклад, на Objective-C, Java і C#) і нормализированный API на JavaScript, доступний для використання у вашому додатку.

image

Для використання 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.

image

Якщо ви створюєте власний плагін, ви, можливо, хочете додати підтримку 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) розгортання на реальних пристроях.

image

Якщо тільки ви не чарівний розробник, здатний змусити додаток ідеально працювати, навіть не відкриваючи його, ви періодично будете мати потребу в тому, щоб розгорнути додаток і протестувати його на пристрої або емулятор для кожної платформи. Однак зовсім не обов'язково починати саме з цього. Наша загальна рекомендація така:

  1. Для базового налаштування зовнішнього вигляду і налагодження на ранніх стадіях, використовуйте Ripple. Ripple — це симулятор з відкритим вихідним кодом, який працює всередині Chrome. Visual Studio автоматично завантажує і встановлює Ripple і Chrome, коли ви встановлюєте інструменти для розробки. Так як Ripple використовує движок V8 від Google і рендеринг на базі blink, він ідеально підходить для симуляції поведінки на iOS або Android-пристрої. Більше того, сьогодні між рендерингом Chrome і IE11 якщо лише невелика кількість суттєвих відмінностей, так що це також непоганий проксі для Windows-платформи. Взагалі кажучи, це класно, що на ранніх стадіях розробки можна використовувати Ripple, тому що він досить швидкий і знаком веб-розробникам. Ripple спирається на багато сучасні можливості CPU вашого комп'ютера і тисячі маленьких оптимізацій, зроблених в десктопном браузері.
  2. Для фінальної валідації та налагодження повноцінної використовуйте пристрій. Як би ми не любили налагодження в десктопном браузері, все ж є невеликі, але важливі відмінності між ним і мобільними браузерами. На жаль, дрібні відмінності в CSS-рендерінгу або інтерпретації JavaScript можуть мати значні наслідки, так що важливо протестувати ваш додаток на чомусь реальному. Справжнім джерелом правди завжди буде пристрій. Використовуючи нативні системи збирання (наприклад, Xcode, SDK для Android і Windows, Visual Studio може зібрати і розгорнути програми на пристроях, підключених до вашого комп'ютера по USB.
  3. Якщо пристрій не доступний, користуйтеся емулятор. Враховуючи різноманітність пристроїв і версій платформ, існуючих в природі, — особливо версій 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. В такі моменти на допомогу вам прийде ваш вірний друг — відладчик.

image

Вам доступні всі інструменти налагодження, вже знайомі розробникам додатків для 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.

Як тільки ви спробуйте, не соромтеся:


До нових зустрічей, вдалого програмування!
J. Ryan Salva

Корисні посилання

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.