Гибридные приложения на MIT App Inventor

27.05.2017

Гибридные мобильные приложения - это мобильные приложения, в которых при оформлении интерфейса и/или контента используются web-технологии, что позволяет реализовать кроссплатформенный подход. Для чего нужно гибридное приложение на App Inventor? Например, для создания на основе уже имеющегося сайта версии под Android или дополнение родного интерфейса виджетами или функциональностью, которой в нём нет. Базовые web-технологии не могут в полной мере работать с системными возможностями Android, а App Inventor может. Вопрос, создавать новое приложение на App Inventor или к уже имеющейся web-функциональности добавить нужные возможность для доступа к системе? App Inventor, как говорилось на предыдущем занятие, не слишком подходит для этого, но, думаю, кому-томатериал покажется интересным.

Предположим, у нас есть html-файл со скриптом, в котором реализован интерфейс приложения и необходимая функциональность. Назовём этот файл web-модулем. Как в приложении отслеживать события, происходящие в нём? В App Inventor нет механизма вызова процедур приложения из web-модулей, но возможен обмен данными через свойство WebViewString компонента WebView. Значит, в приложении можно использовать таймер, в котором будет отслеживаться содержимое этого свойства, изменяющееся при возникновении событий в web-модуле.

Обмен данными между web-модулем и приложением может происходить в обоих направлениях, но не одновременно, а в так называемом полудуплексном режиме. Формат строки обмена может быть таким:

Тип команды, параметры (имя вызываемой функции, идентификатор источника события, данные и др.)

В процедуре таймера приложения необходимо проверять содержимое строки обмена и, если тип команды в ней указывает на то, что это ответ от web-модуля (а не пустое значение или запрос web-модулю), произвести нужные действия (рис.1).

Обработка событий web-модуля

Рис. 1. Обработка событий web-модуля.

После обработки полученного сообщения производится загрузка скрипты через HomeUrl, но вместо этого можно непосредственно обратиться к web-модулю через выражение, указав javascript: вместо пути к файлу.

Код web-модуля.

<!doctype html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <button id="btn1" onmousedown="btnDown(this)">Кнопка 1</button>
  <button id="btn2" onmousedown="btnDown(this)">Кнопка 2</button>
  <script>
    var comm = window.AppInventor.getWebViewString().split(',');

  	 if( comm[0] == 'request'){
 	    alert(comm[1]);
  	 }
  
    function btnDown(p_object){
    
     window.AppInventor.setWebViewString('response,'+p_object.id);
    }
  </script>
</body>
</html>

Пример демонстрирует обработку событий web-модуля и обмен данными между ним и приложением. Строка, полученная от web-модуля, в первом параметре содержит слово response, а отправленная web-модулю - request.

Для улучшения отзывчивости можно уменьшить величину интервала таймера в поле TimerInterval.

actech