Вступ

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

Отже, поїхали…

Працюєте ви WebUI девелопером і вам пропонують проект розробки мобільного застосунку на гібридній технології Ionic. Очі горять – mobile! Це ж так просто, це те саме, що й розробка під веб – ті самі інструменти, налагодження в браузері. На перший погляд виглядає просто. Зануримось в деталі.

Що таке Ionic/Cordova

Cordova-додатки зазвичай імплементуються за допомогою WebView на основі браузера в рідну мобільну платформу. А Ionic – це SDK для створення гібридних мобільних застосунків: набір CSS та JS компонентів, створений на основі AngularJS, SASS і Apache Cordova.

Грубо кажучи, гібридний додаток – це браузер на весь екран мобільного пристрою. Доступ до ресурсів пристрою здійснюється за допомогою cordova-плагінів, а власне Ionic – це інтеграція Cordova та AngularJS з bootstrap-схожою розміткою і набір стандартних ionic-компонентів (HTML, CSS(SASS), JS). Стандартні ionic-компоненти дозволяє створювати додатки з елементами: заголовками, табами, кнопками.

Налаштування середовища

Скажу одразу, що для створення iOS-аплікацій (1), необхідна mac-машина. На ньому можна збирати Android-проекти, а от навпаки – ні. Також необхідно встановити Xсode та Apple Development акаунт ($99 на рік) для розповсюдження додатків.

(1) Надалі вважаємо, що ми розробляємо застосунок для iOS і Android

Установка середовища стандартна для сучасної веб-розробки – node, npm-пакети. Зазвичай, це не викликає ніяких труднощів і вже за кілька хвилин ви запустите перший стандартний додаток в браузері. Деталі на офіційному сайті Ionic framework.

Варіанти запуску аплікації

Можна запустити додаток в браузері, на емуляторі та на реальному пристрої. Для запуску на емуляторі необхідно встановити AndroidSDK для Android і Xcode для iOS з Apple Development акаунт ($99 на рік).

Плагіни

Оскільки Ionic використовує WebView для рендерингу контенту, що, грубо кажучи, є веб-сторінкою в застосунку, то логічно що ми не маємо доступу до системних ресурсів девайсу, таких як камера, геолокація, клавіатура, вібрація, статус-бар і так далі. Для вирішення цих проблем використовуються cordova-плагіни

Тут і починаються перші незручності та відмінності від вебу. Річ у тому, що протестувати функціонал з використанням плагіна неможливо у вебі. Це можливо зробити тільки на емуляторі, а для деяких речей виключно на реальному девайсі (наприклад для Push-нотифікацій).

Слід зазначити, що навіть якщо не потрібно мати доступу до специфічних ресурсів девайсу, наприклад таких як камера, все одно рекомендується для роботи мати поставлений хоча б плагін клавіатури.

До практики…

UI відмінності

iOS Статус-бар

Скажімо, на демо ви показуєте замовнику перший варіант застосунку. Замовник всім задоволений і простить маленькі UI-зміни – поміняти розмір шрифту і колір тексту в заголовку сторінки. 5 хвилин. Зміни зроблені, перевірені в браузері. Білдите і запускаєте на iPhone-емуляторі і опа! Статус-бар перекривається шапкою додатка

Річ у тому, що статус-бар виглядає по-різному для iOS і Andoid. Для Android статус-бар не є частиною додатка, а от для iOS версії 7+ статус бар є частиною вікна, тому розробник повинен це враховувати, щоб не вийшло ситуації як на зображенні вище.

Одразу зазначу, якщо використовувати стандартну розмітку яку пропонує Ionic і не змінювати стилів, то проблем з накладанням не буде.

Як бути з кольором тексту на статус-барі? Чорний на сірому якось не дуже дивиться. Для цього необхідно встановити відповідний плагін (наприклад cordova-plugin-statusbar) і змінити стиль статус-бару на світлий, або задати колір тексту.

Стандартна розмітка для різних ОС

Замовник просить вас встановити додаток на його телефон, щоб показати його потенційним клієнтам. Через деякий час присилає знімок екрану. Аплікація виглядає зовсім не так, як у вас.

Річ у тому, що в замовника Android, а у вас iPhone. Ionic використовує специфічне розташування елементів, прийняте для платформи. Саме тому ми й отримали такий результат. Але замовник просить, щоб все виглядало однаково на всіх пристроях.

Порада: не поспішайте одразу виправляти все стилями, типу position і т.д. Для більшості ситуацій достатньо змінити відповідну властивість. Наприклад, в даному випадку достатньо tabs.position('bottom'). Детальніше про конфігурацію на офіційному сайті

Щодо висоти елементів, наприклад заголовку, то правильним варіантом буде перевизначення відповідних ionic-констант: $bar-height: 53px;. Перевизначення висоти власне елемента заголовку – погане рішення, оскільки ionic вираховує позицію основного контенту – top i bottom, базуючись на розмірах інших компонентів та висоти екрану пристрою. Щось на зразок:

tabs.position('top')

• contentTop = barHeight + tabsHeight
• contentBottom = deviceHeight

tabs.position('bottom')

• contentTop = barHeight
• contentBottom = deviceHeight – tabsHeight

Transition

Ionic забезпечує плавний, схожий на нативний, перехід між екранами аплікації. Правда, робить він це тільки за певних умов. Наприклад, абстрактні state в $stateProvider не допускаються. Вертикальні transition не передбачені Ionic. Можете спробувати додаткові плагіни, типу native-transition, але мої спроби виявились неуспішними.

Також врахуйте, що переходи реалізовані за допомого CSS/JS – це не стандартна фіча ОС. Тому вони можуть підгальмовувати на слабких пристроях.

Кнопка назад (Android)

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

Swipe-back (iOS)

В iOS навігація назад працює свайпом контенту в браузері зліва направо.

Підсвітка синтаксису

iOS може виділяти в тексті додатка слова схожі на номери телефонів, url-адреси, тощо. Слід врахувати і дезактивувати цю функцію.

Замість епілогу

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

• Push-нотифікації
• Кешування
• Розповсюдження для iOS (AdHock, Enterprise)