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

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

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

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

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

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

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

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

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

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

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

Выполнить в DS

<!DOCTYPE html>
<html>
  	<head>
  	<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title></title>
	</head>
	<body>
		<div id="idText" contenteditable="true"></div>
		<input type="button" value="Сохранить" onclick="save()">
		<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
		<script>
			var email = "";
			var password = "";
			
			//+++ инициализация 
			var config = {
				apiKey: "",
				authDomain: "",
				databaseURL: "",
				projectId: "",
				storageBucket: "",
				messagingSenderId: ""
			};
			firebase.initializeApp(config);
			//--- инициализация
		  
			var db = firebase.database();
			var auth = firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
				console.log(error.code) ;
				console.log(error.message) ;
			});
			
			db.ref("text").on("value", function(snapshot) {
				document.getElementById("idText").innerHTML = snapshot.val()["content"];
			});
			
			function save(){
				var msg = document.getElementById("idText").innerHTML;
				db.ref("text").update({"content": msg});
			}
		</script>
	</body>
</html>

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

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

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