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

Thunkable X и Framework7

15.10.2019

Framework7 – это инструмент для создания функциональных web-интерфейсов, которые выглядят как родные на устройствах Adroid и iOS. Применительно к Thunkable X данный фреймворк позволяет частично или полностью обойти целый ряд проблем:

  • Скромный набор родных компонентов, особенно UI
  • Медленный выпуск новых компонентов
  • Крайне ограниченная функциональность ядра платформы
  • Крайне низкая скорость программного создания компонентов
  • Отсутствие возможности использовать расширения
  • Большое количество багов
  • Отсутствие возможности получить исходный код проектов
  • Невозможность копирования проектов и блоков между проектами
Framework7 работает в Web Viewer, и для обмена данными с App придётся использовать Firebase-мост, пример которого был рассмотрен в статье Thunkable X: обмен данными с Web Viewer. Для пользователей всё это выглядело слишком сложным, поэтому идея была доработана до простого практического решения

Пример взаимодействия Framework7 c Thunkable X можно посмотреть в демонстрационном проекте на экране scrFramework7.

Как и следовало ожидать, данное решение имеет целый ряд особенностей, о которых желательно знать.

Для обмена данными между Web Viewer и App используется Firebase-мост, по причине чего потребуется регистрация пользователей в базе данных. Это первый момент. Второй момент касается зависимости отзывчивости интерфейса от качества интернет-соединения. Если оно невысокое, то будет наблюдаться задержка в передаче данных между App и Web Viewer. Например, пользователь выбрал элемент списка в Web Viewer, а его значение отобразится в Label через 1 секунду. Третий момент состоит в том, что на стороне web используется Firebase Javascript API с открытой конфигурационной записью,  в которой содержатся данные для доступа к аккаунту и базе данных Firebase. По этой причине разработчики Firebase не рекомендуют использовать этот способ в общедоступных проектах.  Но мы воспользуемся им, потому что, во-первых, это единственный способ более или менее надёжного обмена данными между App и Web Viewer, во-вторых, в нашем случае Firebase используется не как база данных, а как буфер обмена. Даже если кто-то сможет получить эту конфигурационную запись и залезть в базу,  то он увидит html-разметку и код Framework7, который и так находится в общем доступе. По этим причинам предложенное решение не подходит для коммерческого и общедоступного применения, но для персонального использования или в образовательных целях оно выглядит весьма интересно.Для динамической генерации HTML-кода в Web Viewer можно использовать data URI, но для нашего случая этот вариант не подойдёт по следующим причинам:

  • Cуществует ограничение на объём данных при передаче их через data: в Web Viewer, а библиотеки Framework7 достаточно тяжелые
  • Протокол data: не работает в установленных на iOS приложениях и разработчики Thunkable X не собираются это исправлять
  • Для надёжной работы код Framework7 требует запуска с сервера

Можно сохранить код в файле, который затем импортировать в проект, но более удобным и гибким решением будет создание скрипта, загружаемого с web-сервера, как это и сделано в примере выше.

Общий алгоритм работы выглядит просто: после успешного входа в базу данных Firebase создаётся учётная запись с двумя узлами для отправки данных из App и получения данных от WebViewer, а также подключение php-скрипта с доступом к Firebase из html-документа. При помощи метода setHTML в WebViewer можно переслать разметку HTML, а при помощи метода setScript – код скрипта для обработки событий, возникающих на странице web. Web-интерфейс создаётся динамически.

Thunkable X не имеет удобных средств для работы с HTML и скриптами. Область ввода комментария для блока является многострочной, но удобнее отлаживать код при помощи web-редактора и браузера, а затем копировать его в проект.

Функциональность Web Viewer  и системного браузера на мобильном устройстве имеет некоторое отличия. Если какие-то методы компонентов Framework7 не работают в Web Viewer, то придётся немного доработать код, как это сделано в примере при работе с компоненом календаря.

© 2016-2024 
actech