Створення універсальних веб-додатків за допомогою Web App Template


Всім привіт!

Сьогодні ми з вами будемо знайомитися з інструментом для створення веб-додатків для Windows і Windows Phone, Web Application Template.

У цій статті ми з вами розберемося, що таке веб-додатки та навіщо вони потрібні, а також подивимося, як Web Application Template може допомогти вам при створенні веб-додатків.


Навіщо потрібні веб-додатки, якщо є веб-сайти
Якщо ви стежите за розвитком веб-технологій, то ви легко могли помітити, що межа між веб-сайтами і (нативними) додатками поступово стирається. Причому справа не тільки в технологічній можливості використовувати веб-стек для розробки рідних додатків (наприклад, під Windows 8.x і Windows Phone 8.1 або Firefox OS), але і в цілому з точки зору UX (наприклад, недавній анонс альфа-версії наступної версії Яндекс.Браузера рухається в цьому напрямку).



Спроби використовувати веб-стек для розробки додатків мають вже давню історію: згадати хоча б HTA для Windows. Аналогічно час від часу робляться і спроби перетворити» сайти в додатку, причому не тільки з точки зору внутрішнього наповнення (наприклад, outlook.com — це фактично поштове додаток, а веб-версія Microsoft Office дійсно дозволяє редагувати і переглядати офісні документи), але і з точки зору інтеграції таких сайтів в операційну систему під виглядом додатків (тут досить пригадати ідею закріплених сайтів в Internet Explorer, хоча це не єдиний захід до цієї ідеї в індустрії). З розвитком магазинів додатків ці ідеї набувають нові риси, як маркетингового характеру (а що, якщо ми будемо поширювати сайт через магазин додатків), так і технічного, особливо у разі платформ без нативної підтримки HTML/JS (зазвичай вирішується через WebView або аналоги і обв'язки над ними).

Сьогодні за прагненням перетворити веб-сайт (нативне) веб-додаток стоїть безліч можливостей по розширенню взаємодії з людьми по той бік сенсорних екранчиків:

  1. (Контрольований) доступ до різних функцій пристрою і операційної системи, які зазвичай заховані за песочницой браузера, ще не мають аналога у вигляді відповідного веб-стандарту або просто не підтримуються браузером відвідувача сайту. Наприклад, ви можете отримати доступ до адресної книги користувача або камері.

  2. Веб-сайту, як правило, потрібен постійний доступ до інтернету (зручність використання AppCache — це тема для окремої розмови). У разі додатки, розробника доступна гнучке налаштування роботи програми в оффлайн режимі — можна заздалегідь закешувати необхідні ресурси, в тому числі у тлі.

  3. Ви можете інтегрувати у веб-додаток елементи системи управління, під яку ви робите додаток, мімікруючи таким чином під звичне оточення.

  4. Ще один плюс в скарбничку веб-додатків — підтримка push-повідомлень. Push повідомлення є додатковою можливістю взаємодії з користувачем. Розкажіть їм про акції вашого інтернет-магазину або поновіть інформацію про нові повідомлення на плитці телефону!


І це лише перше, що приходить в голову, адже є ж ще механізми монетизації, інтеграція з зовнішніми пристроями і багато чого ще.

Таким чином, за допомогою веб-програми можна розширити можливості вашого веб-сайту, зробити його більш інтерактивним і інтегрувати в нього різні додаткові, раніше недоступні, функції.

В принципі, в тому, щоб самостійно обернути своєю веб-сайт в додаток, немає нічого складного. Берете Webview — і оборачиваете.

Диявол, однак, як завжди криється в деталях, тому ми зробили готовий движок для таких завдань. Движок називається WAT (хоча в назві є слово template, там реально цілий движок!). До речі, з відкритим кодом.

Шаблон для створення веб-додатків — Web App Template
Web Application Template (WAT) — шаблон для Visual Studio для створення універсальних додатків для Windows і Windows Phone на базі веб-сайту.



Для роботи вам знадобляться:

  1. Ваш сайт (в ідеалі, з адаптивною версткою)
  2. Windows 8.1
  3. Visual Studio 2013+
  4. Розширення WAT
Установка доповнення Web App Template

Для того, щоб встановити WAT, вам необхідна Windows 8.1 і Microsoft Visual Studio з останніми оновленнями. Завантажте інсталяційний VSIX файл з сайту wat.codeplex.com та виберіть шаблон.



Створення проекту Web Application Template
Створіть проект Web App Template, він буде перебувати по дорозі: File> New > Project > Templates > JavaScript > Web App Template for Universal Apps



Буде створено універсальне додаток для Windows і Windows Phone, що складається з п'яти проектів — проект Windows, проект Windows Phone, загальні файли для проектів Windows і Windows Phone, а також внутрішні C#-проекти.

Якщо зараз запустити проекти для Windows і Windows Phone, то запуститься додаток і завантажиться сторінка з документацією по шаблону Web App Template.



Давайте подивимося на структуру проектів Windows і Windows Phone і проекту з загальними файлами (Shared), а також розберемося з налаштуваннями шаблону.

Структура проектів Windows і Windows Phone і Shared
У проекті програми знаходиться велика кількість різних файлів. Ми розглянемо ті, в яких визначаються основні налаштування Web App Template.



Файли, що містяться в проекті Windows і Windows Phone, ідентичні, в основному вони відносяться до загальних налаштувань програми для конкретної платформи. Зверніть увагу на файл package.appxmanifest — файл маніфесту додатка, який потрібен при підготовці програми до публікації. У ньому вказуються основні налаштування вашої програми, інформація про необхідні для його роботи функції, пристроях, а також файли картинок (для іконок, бейджів, тайлів). Докладно про нього можна дізнатися в MVA курсі «Розміщення та просування додатків Windows Store.

Давайте перейдемо до проекту з загальними файлами. Перша папка в ньому — папку config, з файлами config.es.json, config.json, config.sample.json та files.json.

config.json — головний файл програми. Він використовується для додавання основних налаштувань програми — визначення веб-сайту програми (головної сторінки), додавання елементів керування панелей управління, навігації, кнопки назад), підтримки оффлайн режиму, повідомлень і т. д.

Файл config.es.json відповідає за локалізацію програми, в ньому прописані основні мовні налаштування (переклад фраз, підказок). В стандартному шаблоні в якості прикладу знаходиться файл для мовних налаштувань іспанської мови. Ви можете створювати файли локалізації для кожного підтримуваного мови, він буде застосовуватися в додатку автоматично. У файлі config.sample.json знаходяться приклади всіх налаштувань, які ви можете застосувати у вашому додатку.

Наступна папка, CSS — папка з файлами, які визначають стиль вашого додатка. Injected-styles.css відповідає за CSS стилі сайту, для якого ви робите додаток, а файл wrapper-styles.css використовується для стилізації таких об'єктів програми, як navbar і appbar і т. д.

В папці template знаходяться JavaScript файли реалізації WAT, наприклад, обробка геолокаціі, повідомлень, оффлайн режиму, пошуку і т.д.

Якщо вже використали WAT раніше, зверніть увагу на папки, які додалися до WAT версії 2.2:

  • Папка schema у проекті з загальними файлами. У ній міститься файл schema-manifest.json. Це файл схеми для файлу config.json. У ньому описується кожна функція, її тип, опис значення за замовчуванням.
  • Папка strings. Там знаходяться папки з доступними локалізаціями, тобто файли, в яких ми вказуємо переклад стандартних фраз в додатку.


Також зверніть увагу на можливість віддаленого редагування файлу config.json. Для того, щоб замінити файл, в панелі налаштувань виберіть «Change Config Host Address»



Потім введіть адресу нового файлу config:



В таблиці, розташованій нижче, представлено опис всіх основних файлів проекту. Ми ж перейдемо до знайомства з файлом config.json і подивимося доступні для нашого додатка налаштування.



Структура файлу config.json
Всі основні налаштування для нашого шаблону у файлі config.json. Формат config.js базується на стандарті W3C Application Manifest, додаючи в нього розширення, специфічні для WAT.

В ньому ви визначаєте головну сторінку вашого додатки, навігацію по сторінці, налаштування панелі програми і панелі навігації панелі диво-кнопок, а також підтримку оффлайн режиму і т. д.

Повну документацію по файлу config.json ви можете знайти тут — http://wat-docs.azurewebsites.net/, а нижче я наведу таблицю з частковим перекладом документації:

Розгорнути таблицю з документацією
Назва блоку налаштування Опис Приклад коду
start_url Головна сторінка вашого додатка
"wat_navigation": {
"hideOnPageBackButton": false,
"hideBackButtonOnMatch": [
"{baseURL}/Json#livetiles"
],
"pageLoadingPartial": "/template/partials/page-loading.html"
},
wat_errors Визначає сторінку з повідомленням про помилку
"wat_errors": {
"showAlertOnError": false,
"alertMessage": "помилка. Приносимо вибачення.",
"redirectToErrorPage": false,
"errorPageURL": "error-example.html"
},

wat_logging Задає параметри логів програми
"wat_logging": {
"enabled": true,
"level": "log",
"disableWithoutDebugger": false,
"hideTagDisplay": true,
"ignoreTags": [
"winjs"
],
"logErrorsForIgnoredTags": true,
"overrideConsoleMethods": true,
"disableConsoleLog": false,
"fileLog": {
"enabled": true,
"level": "info",
"filename": "logs\\wat-docs_%D. log",
"format": "%L on Line %l of %f\r\n%D %T: %M (%t)",
"maxLogFiles": 7
}
},

wat_offline Визначає поведінку додатка в оффлайн режимі
"wat_offline": {
"enabled": true,
"message": "Відсутній інтернет з'єднання. Переподключитесь для подальшої роботи програми.",
"superCache": {
"enabled": false,
"baseDomainURL": "http://wat-docs.azurewebsites.net/",
"addIndexedDBSupport": true,
"imagesGuardBand": true,
"preCacheURLs": [],
"ignoreURLs": []
}
}, 

wat_geoLocation Вмикає/вимикає підтримку геолокації
"wat_geoLocation": {
"enabled": true
},

wat_customScript Масив скриптів, розташованих у пакеті програми, які містяться в DOM
"wat_customScript": {
"scriptFiles": [
"injection-script-example.js"
]
},

wat_appBar Елемент керування, що знаходиться внизу сторінки
"wat_appBar": {
"enabled": true,
"makeSticky": false,
"buttons": [
{
"label": "Settings",
"icon": "edit",
"action": "settings"
},
]
},

wat_navBar Елемент управління, який знаходиться зверху сторінки
"wat_navBar": {
"enabled": true,
"maxRows": 2,
"makeSticky": true,
"buttons": [
{
"label": "home",
"icon": "home",
"action": "home"
}]
},

wat_livetile Визначає повідомлення, що з'являються на плитках
"wat_livetile": {
"enabled": true,
"periodicUpdate": 1,
"enableQueue": true,
"tilePollFeed": "http://wat-docs.azurewebsites.net/feed"
},

wat_redirects Управляє зовнішніми URL
" wat_redirects": {
"enabled": true,
"enableCaptureWindowOpen": true,
"refreshOnModalClose": true,
"rules": [
{
"pattern": "http://getbootstrap.com?",
"action": "showMessage",
"message": "Sorry, but you can't access this feature in the native app, please visit us online at http://wat-docs.azurewebsites.net"
},
{
"pattern": "http://msdn.microsoft.com/*",
"action": "popout"
}]
},

wat_settings Визначає властивості диво-кнопки «налаштування»
"wat_settings": {
"enabled": true,
"privacyUrl": "http://wat-docs.azurewebsites.net/Privacy",
"items": [
{
"title": "Support",
"page": "http://wat-docs.azurewebsites.net/Support",
"loadInApp": true
},
{
"title": "Codeplex Site",
"page": "http://www.codeplex.com"
}
]
},

wat_share Задає параметри диво-кнопки «поділитися»
"wat_share": {
"enabled": true,
"showButton": true,
"buttonText": "Share",
"buttonSection": "global",
"title": "WAT Documentation",
"url": "{currentURL}",
"screenshot": true,
"message": "{url} shared with {appLink} for Windows Phone and Windows 8 apps Store."
},

wat_search Визначає властивості диво-кнопки «пошук»
"wat_search": {
"enabled": true,
"searchURL": "http://wat-docs.azurewebsites.net/search/?query=",
"useOnScreenSearchBox": true,
"onScreenSearchOptions": {
"chooseSuggestionOnEnter": true,
"focusOnKeyboardInput": true,
"placeholderText": "What are you looking for?",
"searchHistoryDisabled": true
}
},

wat_secondaryPin Задає параметри для плиток на робочому столі
"wat_secondaryPin": {
"enabled": true,
"buttonText": "Pin It!",
"tileTextTheme": "light", 
"buttonSection": "global",
"squareImage": "/images/logo.scale-100.png",
"wideImage": "/images/widelogo.scale-100.png"
},


В якості невеликого прикладу давайте стилізуємо блок header. Нагадаю, блок header визначає властивості верхній частині нашої сторінки. Ви можете налаштувати його колір, видимість заголовка сторінки і відображення header'a в цілому.

"wat_header": {
"enabled": true,
"backgroundColor": "#478EFF",
"navDrawerBackgroundColor": "#375569",
"logo": "/images/widelogo.scale-100.png",
"title": {
"enabled": true,
"displayOnHomePage": true
}
}




Як ви бачите header додався. Видно, що для Windows програми цього сайту він виглядає симпатично, а для Windows Phone програми header явно зайвий.

Зверніть увагу:

Найчастіше config.json знаходиться у проекті з загальними файлами (shared). Але іноді бувають випадки, коли ми поділяємо файл config.json на два проекти — окремо для проекту Windows і окремо для проекту Windows Phone. До поділу файлу за проектами ми прибігаємо, наприклад, у випадку, якщо у нас є спеціальна мобільна версія сайту, відповідно, стартові сторінки (startURL) для Windows і Windows Phone проекту будуть різними. Іноді також зручно розділити файли за проектами, коли в різних проектах нам необхідні різні елементи управління (наведений вище приклад з header).

Ми з вами розібралися з тим, що таке веб-додатки і як навчитися створювати їх за допомогою шаблону Web App Template. У наступній статті ми подивимося, як застосувати отримані знання та створити веб-сайту додаток Habrahabr.ru.

посилання



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

0 коментарів

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