Thunkable под iOS: обмен данными с Web Viewer
DroidScript

Thunkable под iOS: обмен данными с Web Viewer

© 2016-2018 Автор материалов - Александр Страшко admin@starport.ru
DroidScript
инструменты для мобильной разработки

Thunkable под iOS: обмен данными с Web Viewer

© 2016-2018 Автор материалов - Александр Страшко admin@starport.ru
Оглавление  
Дата изменения 31.05.2018

Пока Thunkable X имеет небольшую функциональность, определённый интерес вызывает интеграция нативной части приложения с web-технологиями. Например, вместо создания громоздких блочных алгоритмов можно было бы использовать JavaScript для обработки данных. Проблема в том, что блока для получения данных из Web Viewer не существует, что делает невозможным такой обмен оффлайн, но организовать его онлайн возможно при помощи компонента RealtimeDB, взаимодействующего с базой данных Firebase.

Выбор базы данных Firebase очевиден. В Thunkable X есть компонент для работы с ней, существует простой JavaScript API, а работа с данными происходит в реальном времени на основе событий, а не запросов. Благодаря последнему у всех подключенных к базе клиентов будут автоматически обновляться данные при их изменении, и отпадает необходимость в использовании таймера для отправки запросов и отслеживания ответов.

Обмен данными через Firebase рассмотрим на простом примере обмена сообщениями между редактируемым блоком <div> и многострочным Text Input.

Создайте новый проект в Thunkable X, добавьте на экран пару кнопок Button, поле ввода Input Text, Sign и RealtimeDB. В редакторе блоков создайте блоки как показано ниже.

Обмен данными с Firebase

В данном примере аутентификация происходит с использованием email и пароля пользователя, для чего и нужен блок SignIn. При включенном режиме анонимного входа это не требуется.

Блок Realtime_DB1.DataChanged является слушателем поля данных, указанного в блоке Realtime_DB1.AddListener.

Создайте в Firebase новый проект. Для указанного способа аутентификации правила в конфигурации базы должны быть прописаны как на изображении ниже.

Правила аутентификации

В базе данных создайте узел text как показано ниже.

Узел данных в проекте Firebase

Для доступа к базе данных также нужно создать в базе учетную запись пользователя, указав для него email и пароль. Подробнее об этом можно посмотреть в документации по Thunkable X и Firebase.

Запустите проект. Если после нажатия на кнопку Button 3 в поле Label1 отобразится строка "Test 1", то связь с базой данных установлена успешно и можно перейти к настройке доступа из html.

Выполнить в DS

В переменных email и password укажите учётные данные пользователя. Блок кода между комментариями "инициализация" нужно заменить на код из раздела настроек вашего проекта Firebase. Далее идёт код обработки события изменения данных, при возникновении которого данные в поле обновляются, и функция для записи данных в базу при нажатии на кнопку. Для проверки работы откройте данный файл в браузере. При изменении данных в консоли базы данных информация должна моментально отобразиться в блоке <div> и наоборот, при сохранении данных из поля <div> она автоматически должна измениться и в базе данных.

После успешного тестирования загрузите данный html-файл в проект Thunkable и укажите его имя в поле URL компонента Web Viewer. Запустите проект и убедитесь в том, что данные автоматически обновляются в поле Web Viewer, TextInput1 и консоли базы данных при их изменении и сохранении в любом из этих клиентов.

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

Оглавление