Framework7 – это инструмент для создания функциональных web-интерфейсов, которые выглядят как родные на устройствах Adroid и iOS. Применительно к Thunkable X данный фреймворк позволяет частично или полностью обойти целый ряд проблем:
Пример взаимодействия 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, но для нашего случая этот вариант не подойдёт по следующим причинам:
Можно сохранить код в файле, который затем импортировать в проект, но более удобным и гибким решением будет создание скрипта, загружаемого с web-сервера, как это и сделано в примере выше.
Общий алгоритм работы выглядит просто: после успешного входа в базу данных Firebase создаётся учётная запись с двумя узлами для отправки данных из App и получения данных от WebViewer, а также подключение php-скрипта с доступом к Firebase из html-документа. При помощи метода setHTML в WebViewer можно переслать разметку HTML, а при помощи метода setScript – код скрипта для обработки событий, возникающих на странице web. Web-интерфейс создаётся динамически.
Thunkable X не имеет удобных средств для работы с HTML и скриптами. Область ввода комментария для блока является многострочной, но удобнее отлаживать код при помощи web-редактора и браузера, а затем копировать его в проект.
Функциональность Web Viewer и системного браузера на мобильном устройстве имеет некоторое отличия. Если какие-то методы компонентов Framework7 не работают в Web Viewer, то придётся немного доработать код, как это сделано в примере при работе с компоненом календаря.