DroidScript
DroidScript
учимся и разрабатываем

Совместное использование App Inventor и web-технологий

26.05.2017

Cуществует несколько способов расширить функциональность App Inventor и увеличить эффективность создания приложений в этой среде разработки: при помощи расширений, внешних приложений или использования web-технологий.

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

Использовать возможности сторонних приложений является неплохой идеей, но это чаще происходит на уровне каких-то общих сервисов, а хотелось бы увеличить функциональность на более низком уровне, например, компонентов. В таких случаях стоит обратить внимание на использование возможностей web-технологий, которые становятся доступными при использовании компонента WebView. В самом простом случае взаимодействие может быть таким: приложение передаёт скрипту, находящемуся в html-файле, данные для обработки, после которой они передаются обратно приложению.

Использование web-технологий выходит за рамки визуальной разработки без написания кода, но знаний работы с App Inventor будет вполне достаточно для написания простых скриптов. Если вы никогда не программировали на JavaScript, то рекомендую ради интереса познакомиться с этим простым, но универсальным языком программирования, который имеет огромную область применения в IT.

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

Рассмотрим пример сортировки списка строк.

Сортировка списка с возвращением результатов в приложение.

Рис. 1. Сортировка списка без возвращения результата приложению.

При помощи выражения "javascript:" включается режим выполнения кода скрипта, в адресной строке браузера. Проверить это легко. Откройте любой браузер и в адресную строку введите "javascript: var hello='Привет, мир!'; alert(hello);". Появится сообщение с приветствием.

В примере выше данные только передаются скрипту, чем и объясняется его простота. Если данные нужно получить из скрипта, то в таком случае необходимо использовать таймер для отслеживания возвращаемого скриптом значения (рис. 2).

Сортировка списка без возвращения результата приложению

Рис. 2. Сортировка списка с возвращением результатов в приложение.

Для выполнения скрипта требуется некоторое время. Если поставить блок свойства CurrentPageTitle сразу после вызова скрипта, то скрипт не успеет выполниться к этому моменту и свойство CurrentPageTitle вернёт своё начальное значение.

Обратите внимание на то, что данные в скрипт передаются в одном свойстве -  WebViewString, а возвращаются в другом - CurrentPageTitle. Это необходимо для развязки входных и выходных параметров, так как параметры в скрипт передаются по ссылке, а не по значению.

Скрипты можно поместить в отдельный html-файл и вызывать их из блоков (рис. 3).

Создание списка строк

Рис. 3. Использование внешнего html-файла, содержащего скрипт.

Код файла скрипта AppInventor.html.

<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body> <script> // получение параметра из приложения var comm = window.AppInventor.getWebViewString(); if( comm == 'show'){ // изменение заголовка окна для чтения его в приложении window.document.title = 'show'; } else if( comm == 'hide'){ // изменение заголовка окна для чтения его в приложении window.document.title = 'hide'; } </script>
</body>
</html>

В этом примере выполнение скрипта происходит однократно при загрузке страницы. Вызов функций в уже загруженном скрипте производится при помощи рассмотренного выше выражения "javascript:".

В показанных примерах приложение App Inventor являляется основным компонентом (при помощи него создаётся интерфейс и основная функциональность), а web-технологии - вспомогательным (используются для выполнения команд приложения). Но в программировании существует и противоположный подход, когда интерфейс и основная функциональность реализуются при помощи web-технологий (HTML, CSS и JavaScript), а доступ к системе - через вспомогательную библиотеку для работы с системными ресурсами. Может ли App Inventor 2 работать в таком режиме? Может, но практичнее для этого использовать PhoneGap, DroidScript и др.

На этом занятии мы познакомились с совместной работой App Inventor и JavaScript. Таким же образом можно работать и с другими web-технологиями - PHP, MySQL, Python, а также различными фреймворками.

© 2016-2024 
actech