От веб-сервиса к андроид-приложению в два счета

|

Мы живем в эру мобильных устройств. Однажды нам в голову приходит идея создать супер-мега приложение для мобильных устройств и разместить его в магазине приложений. Однако, тут возникает одна небольшая проблема: мы всего лишь веб-разработчики. Мы не разбираемся в языках Java и Objective-C, и не располагаем лишним временем для их изучения.
Сегодня у нас появилась возможность воплотить свои мечты в реальность и улучшить мир, в котором мы живем, с помощью наших супер-мега приложений.

В этой статье мы опишем процесс создания гибридного приложения для операционной системы Андроид.

Гибридное приложение сочетает в себе свойства как нативных, так и веб-приложений. Как нативное приложение, оно может распространяться среди пользователей через магазин приложений, а также пользоваться преимуществами многочисленных функций мобильных устройств. Как веб-приложение, оно состоит из HTML, CSS и Javascript файлов.

Преимущества данного типа приложений заключаются в следующем:

  • почти все приложения могут быть написаны на языке JavaScript для всех мобильных платформ;
  • они могут использовать такие функции мобильного устройства, как камера, акселерометр, и др.;
  • все HTML, CSS и JavaScript файлы можно обновить, не ожидая утверждения новой версии приложения.

Однако, гибридное приложение все же работает медленнее нативного. Но это не такая большая проблема, потому что самую медленную часть приложения можно написать на Java или Objective-C и добавить при следующем обновлении.

Давайте приступим к созданию приложения, а заодно и к изменению мира к лучшему!

android-prilozhenija

Шаг первый. Готовимся захватить мир

Итак, давайте приступим к воплощению нашей идеи и создадим наше первое приложение для андроид. Прежде всего, необходимо скачать Android SDK и другие инструменты для эмуляции различных Android-устройств либо драйверы для тестирования приложения на реальном устройстве. Это совсем несложно: просто загрузите пакет . Здесь вы найдете IDE Eclipse с уже встроенным расширением ADT, Android SDK, SDK Manager и другие.

Теперь, когда у вас есть все эти файлы, запустите файл SDK Manager.exe (для ОС Mac или Linux откройте в командной строке директорию «tools/», которая находится в скачанном пакете Android SDK, затем выполните команду android sdk) и установите следующие инструменты:

 андроид sdk инструменты

  1. SDK Tools. Этот пакет уже должен быть установлен, если же нет, то вы знаете, что делать;
  2. SDK Platform-tools;
  3. SDK для одной из версий Android. Ваше новое Android-приложение должно быть скомпилировано под какую-либо версию ОС Android. Мы использовали самую последнюю версию Android на момент написания статьи, чтобы иметь возможность использовать новые функции;
  4. Драйверы. Если вы хотите протестировать свое приложение на андроид-устройстве, необходимо установить Web и USB-драйверы (если у вас возникают проблемы с отладкой приложений на реальных устройствах, можете поискать подсказки в этой статье или задать нам вопрос в комментариях).

usb и web драйверы

Отлично! Мы закончили с самой скучной частью создания приложений для андроид. Давайте запустим Eclipse IDE, загруженную вместе с SDK, и начнем изменять мир. Кроме того, если хотите, можете загрузить Android Studio (IDE на базе IntelliJ IDEA). Должны вас предупредить, что она все еще работает в бета-версии и может доставить дополнительные неудобства.

Шаг второй. Создаем приложение

Основой всех гибридных приложений является элемент WebView. Данный элемент отображает веб-страницы с помощью WebKit-движка. Это значит, что вы можете создать обычный HTML-файл, содержащий <style> или <link> теги для подключения CSS,  и <script> теги для добавления JS-кода, а затем передать его в элемент WebView. В результате получится практически такое же изображение, как если бы вы открыли данную страницу в браузере (сравните изображения ниже).

Как вы уже догадались, самый простой способ создать гибридное приложение для андроид — просто открыть существующий веб-сайт в элементе WebView. Нам просто нужно его создать, развернуть на весь экран, и передать ему URL веб-сайта. Давайте так и сделаем.

Для начала, откройте уже загруженный Eclipse и создайте новый Android Application Project. Задайте ему имя и выберите версию Android, для которой хотите скомпилировать свое приложение. Кроме того, вы можете создать иконку для своего нового приложения, а также activity. В данном случае под activity понимается набор элементов пользовательского интерфейса, занимающих весь экран и необходимых для выполнения какого-либо действия (но, для этого примера вам не нужно что-либо здесь менять). Когда вы кликните на кнопку Finish, ваше первое приложение для Android будет создано.

андроид приложение в хроме андроид приложение в веб
                     Opened in Chrome Browser                           Opened in WebView

 

IDE автоматически создает множество файлов. Давайте посмотрим на некоторые из них:

1) AndroidManifest.xml – этот файл содержит информацию о вашем приложении и обо всем, что оно умеет делать. ОС Android считывает этот файл при установке и запуске приложения. Необходимо добавить в этот файл всю информацию о функциях андроид-устройств, которые вы бы хотели использовать (камера, список контактов и т.д.). Кроме того, в данном манифесте также указываются все пользовательские (UI) темы, контроллеры, а также фоновые сервисы. Получить детальную информацию можно здесь;
2) res/layout{qualifier}/{name_of_your_activity}.xml — этот файл содержит описание всех UI-элементов, которые вы собираетесь использовать для того или иного activity. Для нашего гибридного приложения необходимо всего одно activity и один UI-элемент (WebView). Если вы хотите добавить какие-либо нативные кнопки Android, они должны быть описаны в данном файле;
3) src — в этой папке размещаются все ваши Java-файлы;
4) res/drawable{qualifier} — содержит все ваши графические файлы;
5) bin — здесь находятся все ваши скомпилированные файлы;
6) assets — содержит все типы файлов, к которым вы хотите иметь доступ. Это могут быть статичные HTML-файлы или какие-либо CSS или JS-файлы, которые будут добавлены в .apk вашего приложения.

Существуют некоторые сложности добавления всех файлов в папку assets. Одна из них состоит в том, что когда нужно внести какие либо-изменения или исправить ошибки, необходимо обновить свое приложение через магазин приложений, поскольку вам придется компилировать новый .apk файл. Это значит, что нужно будет ожидать подтверждения, и пр. Однако, если вы получаете все файлы со своего веб-сервера, все ресурсы (HTML,CSS, JS) можно изменить сразу же, если они протестированы должным образом.

Теперь мы знаем все, что нам нужно для создания простого гибридного приложения. Прежде всего, мы должны изменить файл лeйаута (res/layout/{name_of_your_activity}.xml). Давайте добавим WebView элемент и растянем его на весь экран:

Нам не нужен относительный лeйаут, потому что у нас есть только один элемент. Поэтому мы используем простой линейный лейаут. Как видите, мы объявили элемент WebView с id — “WebView”. Мы будем использовать этот id, чтобы иметь возможность обратиться к элементу WebView в дальнейшем. Символ “+” означает, что данный id будет задан в пространстве имен вашего приложения.

Следующий шаг — изменение файла AndroidManifest.xml. Нам необходим доступ в интернет для того, чтобы загрузить файлы с нашего веб-сервера.  Добавьте следующую строку в файл манифеста перед тегом “application“:

А теперь самая приятная часть: пишем код. Откройте Java-файл, который содержит класс вашего activity (путь должен быть указан как “src/com.example.your_project_name}/{your_main_activity_name}.java”) и внесите в код некоторые изменения. Он должен выглядеть так:

Будьте внимательны, копируя данный код! Имя пакета (“com.example.xbsoftware”) и имя класса (“MainActivity”) для вашего приложения могут отличаться.

Отлично! Работа завершена, и мы можем запустить наше первое приложение для ОС Android. Просто нажмите “Run”. Здорово, правда?

Улучшаем приложение. Классы WebViewClient и WebChromeClient

Существуют два класса, о которых вам нужно знать. Первый — это WebViewClient. Данный класс отвечает за все, что связано с отрисовкой страницы. У него есть методы для обработки ошибок, получения http-запросов, загрузки страницы и др. Все эти методы можно перегрузить. Это значит, что можно добавить какую-то логику на каждое из этих событий. Полный список поддерживаемых методов для данного класса вы можете найти здесь.

Как видите, если кликнуть на какую-либо внешнюю ссылку в вашем приложении, откроется браузер Google Chrome. Для того, чтобы это исправить, мы перегрузим два метода класса WebViewClient: метод shouldOverrideUrlLoading и метод onReceivedError. Первый метод будет вызываться при изменении URL. Второй — когда вместо контента страницы вы получите сообщение об ошибке. Нам нужно создать новый класс, который расширит WebViewClient, и пометить все перегруженные методы атрибутом ”@Override“.

Мы должны перезагрузить второй метод, поскольку нам может понадобиться показать нашу собственную страницу с сообщением об ошибке, если какие-то ресурсы невозможно загрузить. Поэтому, когда мы находим ошибку, то прекращаем дальнейшую загрузку, и открываем нашу страницу для обработки ошибок из папки “assets”.

Если вы хотите открывать внутренние страницы в WebView, необходимо изменить параметр webSettings. Просто добавьте эту строку туда, где вы создали объект webSettings:

Теперь можно добавить файлы в папку “assets” и использовать их на своей странице. Мы создали простой файл для того, чтобы показать ошибки, и расположили его прямо в папке “assets”:

assets

А к уже существующему элементу WebView необходимо добавить новый объект WebViewClient, содержащий следующий код:

Обратимся к примеру:

error.html

Если вы замените URL в параметре loadUrl на неверный, откроется страница, сообщающая об ошибке.

Второй класс — WebChromeClient — отвечает за все, что связано с UI браузера. С его помощью можно управлять историей посещений, создавать новые окна, работать с сообщениями и иконками. Все методы данного класса, которые можно перезагрузить, описаны здесь.
Давайте для примера заменим все диалоговые окна, содержащие сообщения, нашими собственными. Нам необходимо расширить класс WebChromeClient и перезагрузить метод onJsAlert. Посмотрим на пример:

Так же, как и в случае с WebViewClient, вам нужно добавить объект MyWebChromeClient к существующему элементу WebView:

Шаг два с половиной. Связывание Java и JavaScript

Процесс разработки гибридных приложений не был бы таким увлекательным, если бы не могли вызывать Java-методы из JavaScript. Для связывания методов некоторых объектов Java с JavaScript нам необходимо использовать модуль JavascriptInterface. Чтобы показать его использование на примере, мы создадим класс “MyJavaScriptInterface”, у которого будет один метод под названием “make“. Кроме того, если версией андроид, для которой собирается проект, является версия SDK от 17 и выше, все методы, доступные через JavaScript, должны иметь примечание @JavaScriptInterface.

Посмотрим на пример:

Кроме того, вам нужно использовать следующий код, чтобы добавить данный метод в существующий элемент WebView:

Теперь метод “make” будет доступен через JavaScript:

Это достаточно простой пример использования такого многофункционального инструмента. Вы также можете сделать возможным взаимодействие JavaScript из WebView со всеми модулями мобильных устройств, такими как камера, список контактов, WiFi и другими.

Если вы запустите данный пример, то увидите, что метод “make” — это синхронный метод. Как вы знаете, JavaScript — однопоточный язык. Это значит, что если вы выполняете блок JS кода на странице, никакой другой JS код на данной странице в настоящий момент выполняться не будет. Для нашего примера это означает, что другой JS код не может быть вызван, пока не закончится выполнение функции “make” (он будет ожидать в течение десяти секунд, поскольку Java-поток, который выполняет код, связанный с данной функцией, будет находится в спящем режиме в течение этого времени). Чтобы решить эту проблему, вам нужно создать AsyncTask в Java, и выполнить там данный код. Когда все будет готово, вызовите какую-нибудь глобальную функцию в JavaScript, и передайте ей результаты. Но будьте внимательны: все методы WebView могут быть вызваны только в UI потоке! Это означает, что вы не можете вызвать метод loadUrl WebView в методе doInBackground, потому что это — другой поток.

Посмотрим на пример:

HTML файл для вызова метода из Java:

Как видите, для вызова каких-либо JS функций из Java не существует прямого метода. Поэтому, нам придется создать временную глобальную функцию для получения результатов. Нам нужно использовать метод webView.loadUrl(“javascript:{your js code here}”) для вызова некоторых JS функций.

Отладка

Как вы уже заметили, весь Java код можно легко отладить в IDE. Но как же поступить с JS кодом? Конечно, его можно отладить отдельно. Просто откройте страницу в браузере Chrome своего устройства, и включите удаленную отладку в том же браузере своего компьютера. Но иногда возникает необходимость отладить все эти части вместе.

Сейчас самое время сказать спасибо за новый Android 4.4 KitKat с его новым WebView. Если у вас он есть, все что нужно сделать, это добавить следующую строку кода:

После запуска вашего приложения (конечно, если вы тестируете его на реальном устройстве, оно должно быть подключено к компьютеру, на котором приложение разрабатывается с помощью USB-кабеля) вам нужно ввести в адресной строке следующий URL: chrome://inspect/#devices. Затем, выберите ваше устройство и кликните по ссылке “inspect”:inspect

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

Благодарим за внимание и ждем ваших комментариев.

The following two tabs change content below.
Владимир Дашукевич

Владимир Дашукевич

Разработчик XB Software c большим опытом в различных областях веб-программирования. Поклонник JavaScript и теории графов. Любит применять новые технологии и непростые алгоритмы в веб.