Почему нативные приложения лучше гибридных? Разработка гибридных приложений

Во второй части тяжкого выбора первого языка программирования мы затронем тему разработки мобильных приложений. Данное направление ещё не достигло пика своего популярности, да и вообразить тот момент, когда все мы станем менее зависимы от подручных гаджетов, пока представить невозможно.

Поэтому давайте сразу перейдем к делу и кратко ответим на самый простой вопрос по теме: «Какие бывают виды мобильных приложений?»:

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

Нативные приложения. Здесь речь идет о приложениях, разработанных под «родную» платформу, то есть Android, iOS или Windows. Они загружаются напрямую из местного магазина, оптимизированы с точки зрения взаимодействия с системой, расхода батареи и полноценного использования возможностей устройства.

Гибридные приложения. В данном пункте есть некоторое расхождение во мнениях: кто-то считает гибридные приложения веб-сайтами, разрабатываемыми по универсальной схеме для десктопов и мобильных устройств. Яркими примерами являются страницы Google или Amazon . Но в данном тексте будем придерживаться несколько другой версии, при этом не исключающей первую: гибридные приложения - это некий компромисс между веб-приложениями и нативными, то есть загружаемые из магазина, имеющие оболочку, написанную на платформенном языке, но имеющие в той или иной степени веб-функционал.

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

Приняв это деление за основу, перейдём непосредственно к языкам.

Веб-приложения

Откровенно говоря, если вы только начинаете свой путь в мобильную разработку, то веб-приложения - прекрасный выбор. Во-первых, с точки зрения языков, вам здесь вполне хватит «больших» HTML5 и JavaScript. Выучить их придётся на хорошем уровне, чтобы пробелы в образовании не приводили к серьёзным багам. Но в остальном даже с точки зрения литературы вполне хватит прочтения двух книг: «Основы разработки веб-приложений » или «HTML5. Разработка приложений для мобильных устройств ».

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

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

Нативные приложения

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

Базовые языки для iOS - ObjectiveC и Swift. Если вы никогда не сталкивались с первым, то я просто не вижу доводов для его изучения в качестве первого языка. Всё дело в том, что Swift создавался с целью закрыть все недостатки ObjectiveC и не отвергнуть уже состоявшихся разработчиков. В итоге, на сегодняшний день это один из самых прогрессирующих языков, как с точки зрения популярности, так и качественного развития. Для изучения предмета с нуля прекрасно подойдёт книга «Swift. Основы разработки приложений под iOS » или интенсив « ».

В Android-е вам придётся поработать с Java. Сколько бы там не прошло судов , призывающих Android признать нелегальное использование этого языка, сколько бы не было угроз о принципиальной смене курса, стоит признать, что сотрудничество с Java не утратило своей актуальности. В качестве литературы советую «Android 4. Программирование приложений для планшетных компьютеров и смартфонов ». Книга не самая свежая, но новичку больше информации и не надо. Про бесплатный курс « » от GeekBrains тоже не забывайте.

Ну а платформа Windows проповедует язык С#. С точки зрения разработки именно нативных приложений для WP, ценность изучения C# сомнительна, так как рынок необычайно мал. Но во-первых, C#, как любой популярный язык, всё же помогает создавать достойные кроссплатформенные приложения, например на Xamarin , а во-вторых перспективы роста от мобильных устройств к десктопным - тоже неплохая мотивация. Для вводного начала хватит курса « ».

Кстати, о кроссплатформенности. Большинство по-настоящему крутых нативных приложений не создаётся с использованием только одного языка программирования. В простейшем случае имеет место быть компилирование исходного кода в требуемый, а уже на месте «допиливаются» возможности родной платформы. Но в этом есть определённые сложности, связанные с избыточностью выходного кода и появлением плавающих ошибок, да и с точки зрения вхождения в профессию такого рода рассуждения пользы не принесут.

Уровень знания языков напрямую зависит от сложности желаемого приложения. Помимо указанных в тексте курсов GeekBrains по некоторым языкам, вы можете посетить и другие, например, по созданию . А дальше, если подобное направление завлечёт, уже сами подберёте удобный только для вас путь развития.

Гибридные приложения

Несмотря на все кажущиеся преимущества данного вида приложений, подводных камней здесь тоже немало. Но касательно сегодняшней темы расскажем о приятном. Языки вы можете использовать любые, в зависимости от того, что у вас за приложение. В простейшем случае, для создания интерфейсной части вы используете нативную часть (Swift, Java, C# и т. д.), а внутренности создаются на HTML5, JS, да и вообще на чем угодно. То есть для того, чтобы перейти на другую платформу, вам придётся потратить куда меньше времени, чем при создании стандартного нативного приложения. В помощь вам специальные фреймворки. вроде PhoneGap или Eclipse . Опять-таки компиляция из любого другого места, в случае чего, поможет.

С точки зрения адаптации под требования платформ тоже никаких проблем. Сделаете кнопку «назад» для iOS, будет она и на Android, пусть даже там она никому не нужна. Просто стандарты здесь совсем другие. Создание гибридного приложения делает акцент именно на идее, остальное - вторично.

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

Впрочем, к выбору языка это не имеет никакого отношения, а кажется именно за этим мы здесь собрались.

Настало время поговорить об эволюции мобильных приложений. Для того чтобы понять как работает большинство приложений, необязательно иметь глубоких знаний в этой области. Достаточно понимать, как работает HTML, CSS и JavaScript. С помощью веб-технологий создаются приложения, которые работают на различных платформах, в отличие от родных приложений.

Сегодня существуют различные инструменты и структуры (фреймворки), которые помогают нам создать мобильные приложения без особого труда.

В этой статье мы разберем топ-7 таких фреймворков.

IONIC - одна из самых многообещающих фреймворков для мобильных приложений на основе HTML 5. Построен с использованием SASS, что обеспечивает большое количество компонентов UI, позволяющие создавать интерактивные приложения. Для запуска приложений используется фреймворк JavaScript MVVM и AngularJS. Двустороннее закрепление данных, взаимодействие с серверными службами и API делает AngularJS самым популярным среди разработчиков приложений. Нет сомнений, что он станет еще более популярным, после выхода новой версии AngularJS 2.0, ориентированный на мобильные устройства.

Команда работников IONIC скоро представят новый помощник в создании IONIC приложений под названием «IONIC creator». Он будет анонсирован совсем скоро и будет поддерживать перетаскивание, что намного ускорит создание приложений.

Для того чтобы поближе познакомиться с IONIC, вы можете почитать статьи о начале работы с мобильными приложениями и о разработке игр на основе ОС Firefox.

Mobile Angular UI - фреймворк на основе HTML 5, который использует bootstrap 3 и AngularJS для создания интерактивных мобильных приложений.

Основные особенности Mobile AngularUI включают в себя:

• Bootstrap 3
• AngularJS
• Bootstrap 3 мобильные компоненты, такие как ветвление, оверлейные программы и боковые панели, которых не было в обычном bootstrap.
• AngularJS модули, такие как angular-route, angular-touch и angular-animate.

Ответные медиа запросы отделены от программы начальной загрузки и вам остается только выбрать то, что необходимо. Мобильный Angular UI независим от jQuery, поэтому все, что вам нужно для создания мобильного приложения, это некоторые AngularJS директивы.

Для того чтобы посмотреть Mobile Angular UI в действии, обратите внимание на демо страницу. Также мы рекомендуем вам ознакомиться с инструкцией о том, с чего начинать работу с Mobile Angular UI.

Intel XDK - это мульти платформная разработка Intel. Работать с ней достаточно легко, вам нужно лишь скачать бесплатные приложения, которые совместимы с Linux, Windows и Mac. Она содержит множество шаблонов для начала работы и поддерживает UI фреймворки, такие как Twitter bootstrap, jQuery Mobile и Topcoat.

Intel XDK обеспечивает предварительный просмотр в реальном времени на подключенном устройстве, в то время как вы можете изучать другие интересные инструменты.

На наш взгляд, Intel XDK является самым простым в использовании. Он использует перетаскивание, что позволяет избежать много рутинной работы.

Во введении в работу с Intel XDK вы найдете большое количество обучающего материала по работе с платформой.

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

Titanium - это отличная разработка, в которой вы найдете все, что нужно для создания гибридных мобильных приложений. Для работы с Titanium скачайте Titanium studio. Titanium SDK содержит несколько API платформ и Cloud сервис, работающий как хранилище. Он идет с независимой платформой API, которая упрощает доступ к мобильному устройству.

Titanium использует Alloy, фреймворк MVC для ускорения работы с мобильными приложениями. Созданные с помощью Alloy модули легко повторно использовать для различных приложений, следовательно, значительно уменьшается время работы и линия кода.

Titanium studio содержит некоторые примеры кода, а также мы надеемся, что скоро появятся обучающие видео на SitePoint.

Sencha Touch - это HTML 5 фреймворк для создания приложений для таких платформ как iOS, Android и Blackberry и не только. Он существует уже несколько лет, но относительно недавно стал популярным среди разработчиков гибридных мобильных приложений.

Sencha Touch более продвинутый, чем его оппоненты в вопросе создания родных приложений для различных платформ.

Работать с ним также не сложно, но для того чтобы выжать из него лучшее, придется потратить достаточно большое количество времени.

Для того чтобы полностью оценить достоинства Sencha Touch, взгляните на примерные коды на официальном сайте.

Telerik’s Kendo UI - HTML 5 фреймворк для создания мульти-платформных мобильных приложений. Kendo UI сильно зависит от jQuery и содержит некоторое количество виджетов, основанных на jQuery.

Работать с ним не сложно. Разработчики знакомые с jQuery оценят легкость работы с Kendo UI. У Kendo UI есть открытый ресурс инструментов и JavaScript фреймворков.

Однако, большинство используемых виджетов все еще доступны лишь в соответствии с коммерческой лицензией.

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

PhoneGap немного выбивается из нашего списка, поскольку этот фреймворк не для создания приложения, а для его упаковки и выпуска. Платная программа PhoneGap находится на открытом источнике Cordova и принадлежит Adobe. Популярен среди многих разработчиков мобильных приложений.

Для работы с PhoneGap вы можете выбрать между фраймфорками JavaScript или UI. Хороши комбинации jQuery Mobile и KnockOut.js или AngularJS. Как только вы закончите работу с кодом, PhoneGap завершает всю оставшуюся работу на платформе, с которой вы работаете. Приложения, созданные с помощью PhoneGap используют веб представление для передачи контента. PhoneGap содержит минимальный набор веб API для доступа к возможностям мобильного устройства и позволяет писать запрашиваемые плагины.

Инструкцию по работе с PhoneGap вы найдете .

Бонус

App.js - библиотека JavaScript для создания мобильных приложений. Этот, не похожий на других фреймворк, не использует AngularJS. Он предоставляет несколько базовых тем и виджетов. Вы можете написать приложение, используя zepto или jQuery.

Вывод

В этой статье мы рассмотрели одни из лучших фреймворков мобильных приложений HTML 5. Мобильный HTML 5 хорошо развивается и с каждым днем предлагает все новые опции. А каким фреймворкам отдаете предпочтение вы? Поделитесь в комментариях.

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

Движемся далее. Возможность использования веб-страниц в приложениях — не новость. Она была доступна и ранее, благодаря компоненту WebView. Начало развитию гибридных приложений положили сайты, подготовленные для отображения в браузерах мобильных устройств. За ними подтянулись более сложные приложения и игры. Вроде бы все хорошо, но этого оказалось мало. Время диктовало требования еще большего взаимодействия с операционной системой мобильных устройств. Так появилась библиотека Cordova (Apache Cordova) и подобные ей проекты.

Apache Cordova представляет собой набор APIs устройств, позволяющий разработчикам мобильных приложений получать доступ к нативным функциям устройства. Таким как камера, акселерометр из JavaScript кода и т.д. В комбинации с UI фреймворками — jQuery Mobile, Dojo Mobile или Sencha Touch — мы получаем возможность разработки полнофункционального мобильного приложения с использованием только лишь HTML, CSS и JavaScript.

Ionic framework - один из наиболее обсуждаемых и широко используемых фреймворков. Как гласит официальный сайт платформы, Ionic - это SDK для создания гибридных мобильных приложений, набор CSS и JS компонент, созданный на основе AngularJS, SASS и Apache Cordova.

Мы видим следующие преимущества в использовании Ionic фреймворка:

• Отличная документация. А также масса полезной информации от сообщества на stackoverflow и на форуме фреймворка.
• Большое количество готовых инструментов.
• Большое сообщество, обеспечивающее активное развитие фреймворка.

К числу недостатков можно отнести следующие моменты:

• Ionic несколько медлителен — существуют фреймворки-конкуренты, которые работают намного быстрее. Например famo.us .
• AngularJS. Мы считаем его использование скорее недостатком, чем достоинством.

Согласитесь, слабых мест совсем немного. Что же касается преимуществ, то именно они выступили в роли так называемой серебряной пули. Иными словами — склонили наш выбор в пользу Ionic. Причем, еще на этапе выбора архитектуры проекта.

Теперь о проекте. Он представляет собой многофункциональное, корпоративное приложение, в состав которого входят чат, новостная лента, лента сообщений и еще масса различного функционала. В перспективе его количество еще увеличится. Как говорится: не счесть алмазов в каменных долинах.

Следующим интересным инструментом в нашей “лаборатории” стал Parse. Parse.com — один из самых популярных провайдеров backend-as-a-service (BaaS). Он предоставляет все необходимые компоненты инфраструктуры для работы с веб-приложением в одном флаконе. База данных, push-уведомления, файловое хранилище и серверный код. Недурно, скажете вы и будете правы. Потому что кроме вышеперечисленных плюшек есть еще и бесплатный тариф, который предоставляет 30 запросов в секунду, одну фоновую задачу, 20 Гб файлового хранилища, 20 Гб под хранение базы данных, 2 Тб трафика и 1 000 000 push-уведомлений в месяц. Круто — скажите вы и вновь окажетесь правы.

Hello Word, он же TODO

Не будем отступать от общепринятых канонов и соберем свой велосипед с помощью вышеперечисленных инструментов. Мы решили реализовать классический TODO, который будет хранить данные в облаке (в базе на Parse.com). Реализация UI будет происходить на базе Ionic. В итоге мы должны получить кроссплатформенное мобильное приложение, адаптированное, как минимум, под iOS и Android.

Итак, что нам потребуется:

• девайс с MacOS на борту (само собой, для сборки под iOS);
• Node.js + Npm + Gulp;

Шаг первый. Установка Ionic фреймворка и создание приложения

Устанавливаем Apache Cordova:

Устанавливаем Ionic:

Создаем новый проект:

Переходим в папку проекта и запускаем веб сервер:

В результате проведенных манипуляций мы должны получить открытую веб-браузером страницу, в шапке которой красуется надпись: Ionic Blank Starter. На данном этапе не будем рассматривать структуру проекта полностью. Все, что нам нужно на текущий момент — это приложение.

Шаг 2. Регистрация и создание приложение в Parse.com

Процедура регистрации и создания приложения весьма тривиальна. Мы вводим собственное имя, емэйл и пароль, далее выбираем тип компании “Individual Developer” и вводим имя приложения. Вот и все. Parse приложение готово к работе.

Следующая операция — создание базы данных. Нам необходимо где-то хранить свои записи. Для этого создаем таблицу

На снимке экрана прекрасно видно, что в Parse есть несколько таблиц по умолчанию. Они необходимы для хранения данных о пользователях, ролях и инсталляциях. Как проходят авторизация и регистрация мы опишем в следующей статье. Здесь же ограничимся созданием таблицы для хранения TODO записи. Для этого нам нужен класс Task. Заметьте — именно класс, а не таблица.

Итак, задача выполнена. Класс Task создан. В результате мы получили пустую таблицу со следующими полями:

• objectId — идентификатор объекта, строка.
• createdAt — дата создания.
• updatedAt — дата редактирования.
• acl — управление доступом к записи (подробности управления доступом к записи будут рассмотрены в следующих статьях).

Наша текущая цель — быстрый прототип. По этой причине можно забыть о безопасности. Никакой авторизации в приложении. Только хардкор:)

Добавляем в таблицу два поля:

• body — сама TODO запись
• isDone — статус задачи

Не отходя от кассы, тут же — в Parse консоли, добавляем две тестовые записи.

Шаг 3. Parse и Ionic

Скачиваем Parse JavaScript SDK с официального сайта и удобно располагаем его в директории www/lib, далее подключаем в файле www/js/index.html следующим образом

Один момент отмечаем отдельно — директорию www считаем корневой и используем в приложении относительные адреса.

Так как у каждого разработчика могут быть свои настройки, да и вообще хранение настроек в репозитории — моветон, мы предлагаем использовать для этого конфигурационный файл создаваемого Ionic приложения. Добавляем config.xml в список игнорируемых файлов Git, чтобы токены приложения не попали в репозиторий. Открываем config.xml и добавляем туда следующие теги:

JS Key и App Id параметры можно получить в Parse, меню Panel > Settings > Keys.

При сборке приложения будет использоваться конфигурационный файл из корневой директории. Он нам понадобится для запуска приложения в браузере без предварительной сборки.

Parse.initialize(window.applicationConfig[‘ParseAppID’], window.applicationConfig[‘ParseJsKey’]);

GetConfigFromXML — функция, выполняющая запрос к файлу xml/config.xml файлу и считывающая все теги настроек (preference). Кроме того, она сохраняет глобальную переменную и затем инициализирует Parse SDK.

Результат можно проверить в консоли. Для этого попробуем получить тестовые записи из базы, которые мы создавали в панели управления Parse. Делать это будем следующим образом: объявим новый тип Task на основе класса Task и создадим запрос на выборку элементов, экземпляров класса. Не задаем никаких условий поиска, просто ищем все элементы. После этого сразу же вызываем функцию find, которая вернет нам Promise и говорим, что нам нужно вывести в консоль данные по готовности. Выходит больше текста с пояснениями, чем самого кода:)

В примерах из официальной документации обычно используют callback. Однако по нашему мнению текущая реализация гораздо проще. При отсутствии явного ограничения на количество записей Parse сам выставляет порог в 100 единиц.

Чтобы сразу получить все записи, можно установить заведомо большой лимит или получить их количество, а затем, используя рекурсивный метод — и все записи.

Шаг 4. Отображаем TODO записи при помощи AngularJS

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

Шаг 5. Маршрутизация

Прописываем пути и контроллеры в файле router.js

ion-nav-view — контейнер, который привязывается к контроллеру и шаблону

app — имя контейнера

соответственно код, представленный ниже

при переходе на ‘#/tasks/new’ отображает шаблон ‘templates/new-task.html’ в контейнер с именем “app” и передает управление контроллеру “NewTaskController”.

Мы можем объявить еще один контейнер, например

Использование $scope не самая лучшая практика. По этой причине мы получаем доступ к контроллеру через его псевдоним. Однако мы объявляем его не в шаблонах, а в роутах.

Шаг 6. Контроллеры

Посмотрите как мы работаем с контроллерами на представленном учебном примере и больше никогда так не делайте. Не забывайте, что мы приняли решение терять качество за счет набора скорости. Если же делать все согласно лучшим практикам Angular, то необходимо учитывать HMVC архитектуру (Hierarchical model–view–controller).

Итак, совершаем кощунство и собираем все контроллеры в один файл controllers.js. Ниже представлен его листинг.

Пояснения к коду:

Контроллер TasksController — отвечает за вывод списка наших TODO записей.

Приведенный ниже фрагмент кода выполняет загрузку файлов из Parse и сообщает Angular об изменении данных, как бы намекая, что было бы неплохо их перерисовать.

Функции completeTask и uncompleteTask отвечают за изменение состояния/статуса записи TODO.

Контроллер NewTaskController отвечает за создание новой TODO записи.

Переменная this.newTask = {body: », isDone: false}; используется для привязки к input элементу.

Фрагмент кода для создания и сохранения новой TODO записи.

Фрагмент кода выполняющий следующие операции после сохранения данных: очистка переменной и переход на список TODO элементов.

Шаг 7. Шаблоны

Общее количество шаблонов всегда равняется двум: список и создание/редактирование записи.

Код шаблона списка TODO записей templates/tasks.html

Пояснения к коду шаблона списка TODO записей

view-title=»Tasks» — заголовок нашей навигационной панели.

ng-repeat=»task in tasksCtrl.tasks» — проходим все записи в цикле, вспоминаем что такое tasksCtrl — тот самый алиас, который был объявлен в роут файле.

Шаблон для создания/редактирования TODO записи new-task.html

Шаблон прост. Даже очень прост — один input и кнопка “сохранить”. Все. Краткость — сестра таланта.

Еще один важный момент, который ни в коем случае нельзя упустить. Сделаем небольшой флешбек к контроллерам

}); — после изменения статуса/состояния записи возвращаемся в TasksController. Однако именно из него мы и пришли. Логично предположить, что мы, по сути, вернулись обратно, и код контроллера не выполнился. Мы не успели разобраться баг это или фича, однако получил проблему и нашли решение в приведенном выше фрагменте кода.

Шаг 8. Сборка приложения

Код готов. Приложение прошло предварительное тестирование в браузере. Настала пора проверить приложение на реальных мобильных устройствах и эмуляторах. Для этого нужно собрать программу под целевые платформы. В нашем случае — это Android и iOS.

Для сборки приложения под Android у нас на борту должен быть установлен Android SDK

а в.bash_profile необходимо добавить следующие строки:

Для сборки приложения под iOS потребуется MacOS и установленный Xcode.

Добавляем необходимые платформы:

Приведенные выше команды представляют собой обертку над Cordova и равнозначны команде cordova platform add.

Вернемся к Android платформе и продолжим мучить командную строку.

Выполнение этих команд должно привести к запуску приложения в Android эмуляторе. Не будем останавливаться на достигнутом и попробуем запустить его на реальном устройстве. Для этого необходимо разрешить отладку приложения через USB:

Заходим в меню “Настройки”.

В меню “О телефоне” или в одном из разделов находим кнопку “Build Number” и нажимаем ее 7 раз подряд.

Появляется новый раздел настроек с Develop опциями.

Переходим в него и разрешаем отладку через USB.

Отладка приложения

Отладка Ionic приложения не так уж и сложна, так как мы можем получить доступ к консоли webview в процессе его выполнения. Для того чтобы сделать это на Android:

• Используем Chrome Remote Debugging .
• В результате наше приложение становится доступным по адресу chrome://inspect/#devices в браузере.

Для того чтобы сделать это на iOS:

На телефоне

• Включаем Safari Settings — Private Browsing.
• Включаем Safari Settings advanced — Web Inspector.

На компьютере

• Safari browser — Saferi — preferences — advanced.
• Включаем Show Develop menu in menu bar.
• В результате в меню Develop появляются подключенные к компьютеру устройства.

Существуют и подводные камни. Так как приложение для iPhone не работает в background, консоль показывает вывод ровно в тот момент, когда ее запустили. Чтобы сохранять консольные логи с самого начала, следует написать небольшой логгер

Итоги

Гибридные мобильные приложения — перспективная и активно развивающаяся технология. Ionic фреймворк — самое стабильное решение для их реализации. Его основные профиты — это производительность и кроссплатформенность. Недостатки — небольшая потеря в скорости и необходимость понимания того, как устроены нативные приложения (без этого никак). Проблема в том, что нужного Cordova плагина может не оказаться или он просто перестанет поддерживаться. Мы столкнулись с такой ситуацией на практике. Плагин не обновился после выхода iOS 8. В итоге пришлось искать и исправлять ошибку в Objective C коде самостоятельно. Продолжение .

Сегодня статья о гибридных Android-приложениях для малышей. Во всех смыслах этих слов. Мы поговорим о написании простейшего гибридного (Java+HTML+Javascript) Android приложения для опросов учеников начальных классов об их рюкзаках. Предполагается минимальное знание основ Java, HTML и JavaScript. Если Вы Android-разработчик, хоть с минимальным опытом – Вам эта статья вряд ли будет интересна, можно не открывать. Всех остальных, кто еще только начинает или думает начать разработку под Android, и кому интересны основы разработки под Android, прошу под кат.

Вводная. Дочке (2 класс) было поручено сделать исследовательскую работу на тему «Влияние веса рюкзака на здоровье ребенка». Естественно, в силу возраста, основная работа пришлась на родителей. Решили провести опрос в классе на предмет того, у кого сколько весит рюкзак, кто сам сколько весит (для вычисления нормы веса рюкзака, который не должен превышать 10% от массы ребенка), кто носит рюкзак в школу и так далее. Для того, чтобы разнообразить школьные будни, решил сделать приложение под телефон на Android, который есть у дочки, приложение для опроса. Изначально планировалось включить в опросник вес рюкзака и детеныша, но не успел, и по итогу эти параметры записали на листик, по старинке. Остались только те вопросы, на которые детеныши могли ответить самостоятельно.

Суть задачи: разработать приложение для опроса младшеклассников для создания презентации дочке о том, насколько вредно носить тяжелые рюкзаки. На картинке выше можно увидеть то, что у нас по итогу получится.
Сразу оговорюсь, обычно я разрабатываю нативные приложения для Android, HTML чисто для Web-приложений, но в этот раз было решено разработать гибридное приложение так как во-первых, быстрее для данной задачи, а сроки были предельно сжатые, во-вторых, это было удобней с точки зрения функционала приложения, в третьих, это был первый проект разрабатываемый в Android Studio, хотелось минимизировать возможные проблемы при использовании нового инструмента, чтобы закончить вовремя.

Итак, приступим. Для начала, разумеется, Java-код (пояснения в комментариях), естественно не забываем добавить WebView в нашу Activity, присваиваем ему id webView:

Package com.probosoft.survey; import android.os.Build; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Window; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { // Перегружаем метод onCreate, в нем создаем необходимый нам WebView и устанавливаем ему возможность масштабирования @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Показываем нашему приложению, кто тут главный WebView wv = (WebView) findViewById(R.id.webView); // Создаем WebView – мини-браузер в приложении WebSettings settings = wv.getSettings(); // Получаем класс настроек нашего мини-браузера settings.setDisplayZoomControls(true); // Разрешаем показать настройки масштабирования для мини-браузера wv.loadUrl("file://android_asset/html/index.html"); // Загружаем страницу нашего приложения в мини-браузер } }
Помещаем тестовый index.html в папку assets/html. Пробуем запустить. Ничего не получается. Выясняем важный момент, что при обращении к внутренним ресурсам слешей после протокола должно быть не два, а три. Меняем:

Wv.loadUrl("file://android_asset/html/index.html");
на:

Wv.loadUrl("file:///android_asset/html/index.html");
Ура! Все загрузилось. Начинаем писать HTML и JS код.

Survey #menu { width: 100%; }



Спасибо за ответы!

var respondents; var adminMode = true; // function clearAll () { try { if(typeof(Storage) !== "undefined") { this.storage = localStorage; } } catch (e) { alert ("Local storage error: "+e); } this.storage.clear (); } function init () { $("#mainPane").show (); $("#resultsPane").hide (); if (adminMode) $("#showResults").show (); $("#title").html ("Выберите ученика"); var res = dataRespondents; res.forEach (function (element, i, arr) { element.id = i+1; }); respondents = new Respondents (res); respondents.renderRespondents ($("#menu")); $("#storeForm redirectURL").val (document.location.href); } init ();
Сначала я пробовал использовать AJAX для загрузки данных, но довольно быстро убедился, что внутри WebView, и на локальных ресурсах он попросту не работает. Поэтому, для загрузки контента пришлось использовать довольно противоречивый метод – сохранить все данные о респондентах в глобальный массив.
Пробуем запускать. Опять не работает. В чем же дело? Для нашего WebView мы не разрешили выполнение JavaScript. Исправим. Добавим к Java коду:
settings.setJavaScriptEnabled(true);
Теперь работает. Ура! Нам нужно было разрешить исполнение JavaScript в нашем WebView. Пишем классы функционала. Код приводить не буду. С ним можно познакомиться на GitHub проекта (в конце статьи). Здесь же описываю основные проблемы, с которыми может столкнуться начинающий разработчик гибридных приложений.

/** * Represents survey for particular respondent * @param integer id Id of respondent */ var Survey = function (in_respondentId, in_respondent) { var respondentId; // Id опрашиваемого ученика var respondent = null; // Объект, представляющий опрашиваемого ученика var questions = null; // Массив вопросов var parent = this; // Грязный хак, позволяющий получить контекст объекта внутри вложенных контекстов var storage = null; // Переменная содержжащая LocalStorage на случай если его придется повторно использовать this.answers = ; // Массив ответов на вопросы опросника /** * Begins survey for chosen respondent */ this.start = function () { var res = dataQuestions; // Инициализируем переменную с вопросами parent.questions = new Questions (res, parent.respondent); // Создаем первый вопрос parent.questions.start (); // Приступаем к опросу } /** * Stores all answers in storage */ this.collectAnswersAndStore = function () { this.storage.setItem (window.UNIQUE_STORAGE_ID+this.respondentId, JSON.stringify (this.answers)); // Сохраняем результат опроса window.init (); // Возвращаемся на главный экран } this.surveyOption = function (val) { this.answers.push (val); // Запоминаем ответ ученика //alert (this.answers); if (!this.questions.advanceQuestion ()) // Проверяем, есть ли еще вопросы { this.collectAnswersAndStore (); // Если нет больше вопросов, сохраняем ответы } } // Инициализация переменных this.respondentId = in_respondentId; this.respondent = in_respondent; // Пытаемся получить доступ к хранилищу try { if(typeof(Storage) !== "undefined") { this.storage = localStorage; } } catch (e) { alert ("Local storage error: "+e); } }
Все вроде как и работает, но ничего не сохраняется. Попутно узнаем забавную подробность – в последних версиях Android alert в WebView делает… ничего. Совсем ничего. Ни ошибки, ни какого-то сообщения в консоли. Просто как-будто его и нет. Выясняем, что для использования LocalStorage в WebView нам нужна установка дополнительных флагов для WebView. Сделаем это:

Settings.setDomStorageEnabled(true); settings.setDatabaseEnabled(true);
Ура! LocalStorage заработал. Долго ли коротко ли, за выходные что-то пригодное для использования было написано. Ребенок был отправлен в гимназию с телефоном, на котором было установлено данное поделие. Ребята (уж с помощью учительницы, или самостоятельно – это осталось за кадром) добросовестно прошли анкетирование, и не было данных только по четырем ученикам, которые по тем или иным причинам отсутствовали на занятиях.

Теперь передо мной встала проблема: нужно как-то извлечь данные (да-да, об этом нужно было думать изначально, но не забываем, что приложение разрабатывалось в жутком цейтноте, и предполагалось, что эта задача не из сложных и не из неотложных и ее вполне можно решить потом).

Основная проблема оказалась в том, что у дочки довольно старый и слабый телефон (выбирался с учетом фактора «чтобы не жалко было чуть что»). Пробовал вытащить данные через Bluetooth, отправкой AJAX-запроса на сервер, создавалась форма для отправки и т.д. – без вариантов. Текст в DIV’е не выбирается, по итогу DIV был переделан в TextArea (что можно наблюдать в финальном коде на GitHub). Оттуда удалось выделить и скопировать текст с результатами опроса и переслать его на мой E-mail. По итогу это оказался единственный рабочий вариант.

Пишем скрипт, чтобы данные оказались в Excel таблице. На данном этапе выявилась еще одна проблема изначальной архитектуры – те ученики, которые не проходили анкетирование помечались простой строкой «Анкета не заполнена». Естественно, regexp’ы, которые были рассчитаны на нормальные данные на этих строках «спотыкались». Благо таких строк было всего четыре. Вручную они были удалены из итоговых результатов и мы получили вполне адекватную выборку (реальные имена заменены на плейсхолдеры):

Ученик 1, имя: Когда как,Никогда,Мне все нравится в моем рюкзаке 2. Ученик 2, имя: Когда как,Иногда попадаются,Слишком тяжелый 4. Ученик 3, имя: Взрослые,Иногда попадаются,Просто неудобно, но объяснить не могу 5. Ученик 5, имя: Я,Никогда,Мне все нравится в моем рюкзаке 6. Ученик 6, имя: Я,Иногда попадаются,Мне все нравится в моем рюкзаке 7. Ученик 7, имя: Я,Иногда попадаются,Мне все нравится в моем рюкзаке 8. Ученик 8, имя: Я,Никогда,Мне все нравится в моем рюкзаке 9. Ученик 9, имя: Я,Иногда попадаются,Мне все нравится в моем рюкзаке 10. Ученик 10, имя: Я,Иногда попадаются,Мне все нравится в моем рюкзаке 11. Ученик 11, имя: Я,Иногда попадаются,Мне все нравится в моем рюкзаке 12. Ученик 12, имя: Я,Иногда попадаются,Мне все нравится в моем рюкзаке 14. Ученик 14, имя: Когда как,Никогда,Мне все нравится в моем рюкзаке 16. Ученик 16, имя: Я,Всегда что-нибудь есть,Мне все нравится в моем рюкзаке 17. Ученик 17, имя: Я,Иногда попадаются,Мне все нравится в моем рюкзаке 18. Ученик 18, имя: Я,Всегда что-нибудь есть,Мне все нравится в моем рюкзаке 19. Ученик 19, имя: Я,Иногда попадаются,Просто неудобно, но объяснить не могу 21. Ученик 21, имя: Когда как,Всегда что-нибудь есть,Мне все нравится в моем рюкзаке 22. Ученик 22, имя: Я,Никогда,Слишком тяжелый 23. Ученик 23, имя: Я,Иногда попадаются,Мне все нравится в моем рюкзаке 24. Ученик 24, имя: Я,Иногда попадаются,Слишком тяжелый
Можно было, конечно, преобразовать все это на телефоне, но так показалось проще. Это уже легко разбирается простым регулярным выражением. Пишем PHP-скрипт: