Thunkable X: среда разработки

Для разработки приложений на платформе Thunkable X используется браузерная среда разработки Thunkable IDE и клиентское приложение для тестирования Thunkable Live, которое необходимо установить на устройство iOS или Android из магазина приложений.

Для входа в среду разработки Thunkable IDE выполните следующие шаги:

1. Откройте официальную страницу thunkable.com. Нажмите ссылку Sign Up для создания нового аккаунта или Log In для входа в существующий аккаунт.
2. После создания аккаунта отобразится страница, на которой нужно выбрать платформу - нажать кнопку Cross Platform X.
3. В случае успешного входа вы увидите галерею проектов (рис. 1) с вкладками:
• My Projects - мои проекты
• Top Community Projects - лучшие проекты сообщества
• Public Gallery - галерея общедоступных проектов (с возможностью отбора проектов по фильтру)
• My Screens - страница общедоступных экранов для обмена между проектами
4. На вкладке My Projects расположены ссылки на ранее созданные проекты и кнопка для создания нового проекта Create New App.

Рис. 1. Страница проектов.

Область ссылки на проект в галерее включает в себя:

• Пиктограмму проекта (по умолчанию или пользовательская)
• Название проекта (Image to Base64)
• Пиктограмму карандаша для входа в режим редактирования названия проекта
• Дату и время изменения проекта
• Статус доступности проекта:
  • Public - доступнен для сообщества в публичной галерее Public Gallery
  • Private - закрытый и недоступный (доступно только для платного PRO-аккаунта)
• Пиктограмму с количеством ссылок на проект, если кто-то его скопировал в свой аккаунт (11)
• Пиктограмму в виде круга статуса Legacy projects - проект, который был создан до появления версии Thunkable PRO (актуально для давних пользователей платформы). Такие проекты можно продолжать редактировать в режиме private (если он включен)
• был создан до появления аккаунта
• Короткое описание (если было заполнено поле Description на панеле свойств проекта)
• Ссылку на окно диалога для запуска проекта
• Ссылка . . . для отображения контексного меню команд:
  • Delete - удалить проект
  • Duplicate - создать копию проекта
  • Project detail page - открыть окно с подробной информацией о проекте и просмотре его в режиме web-тестирования

Для создания нового проекта нажмите кнопку Create New App. Появится диалог, в котором нужно дать название проекту. После этого откроется среда разработки thunkable в режиме редактирования вида с единственным компонентом Screen1.

Ниже показан пример проекта в режиме редактирования вида (интерфейса).

Рис. 2. Интерфейс среды разработки thunkable в режиме редактора вида.

Логотип thunkable в левом верхнем углу используется для перехода на страницу галереи проектов. Если справа от логотипа отображается надпись PRO, то это означает использование PRO-аккаунта с некоторыми дополнительными возможностями.

В верхней части окна находится панель управления.

Рис. 3. Панель управления.

• Live Test - вызывает диалог для синхронизации текущего проекта с приложением в Thunkable Live
• Share - поделиться ссылкой на проект. Переход пользователя по этой ссылке даст ему возможность получить копию проекта с ресурсами, данными, ключами API и паролями (если они прописаны в блоках). Если в проекте не используются компоненты, в полях которых прописаны пароли и ключи API, то делиться таким проектом безопасно
• Make Copy - сделать копию проекта. Крайне важная функция, которой стоит пользоваться регулярно. Копии проекта помогут избежать его потери и необходимости всё начинать с самого начала
• Download - отправка на указанный почтовый адрес ссылки для загрузки и установки приложения (для iOS) или отображение диалога для сохранения apk-файла (для Android)
• Publish - публикация приложения в магазине приложений App Store, Google Play или как Web-приложение
• Help - выпадающее меню помощи с ссылками на документацию (Documentation), пошаговое руководство для начинающих (Tutorial)
• Community - ссылка на официальный форум сообщества
• Account - выпадающее меню учётной записи с ссылками для входа на страницу настроек аккаунта Settings, оплаты членства Membership PRO и выходом из среды разработки (Sign out)

Под логотипом находится область вкладок с названиями двух основных режимов рабоы Design и Block, рабочее область, включающая в себя рабочее поле с имитацией изображения мобильного телефона, и панель свойств. Кнопка ">" на левой стороне окна предназаначена для управления выдвижной панелью Tutorials для перехода к пошаговому руководству.

Среда разработки имеет два режима работы - редактирование вида (Design) и редактирование блоков (Blocks), переключение между которыми осуществляется при помощи вкладок с соответствующими надписями.

На вкладке Design расположены:

• пиктограмма и ссылка с названием проекта, при щелчке на которой на панеле свойств отобразятся настройки:
  • проекта - App Settings
  • базы данных - Firebase Settings
  • платёжного сервиса - Stripe Settings
• древовидные списки компонентов UI и невидимых глобальных компонентов, добавленных в проект ( Invisible components).
• область для загрузки ресурсных файлов Files (фотографии, звуки, музыка, html и др.), в которую можно либо перетащить необходимые файлы, либо загрузить при помощи ссылки Choose a File
• палитра компонентов Add Components

Палитра компонентов Add Components

Используется для поиска и выбора компонентов для добавления в проект (подобно тому, как художник выбирает краски на палитре).

На текущий момент доступны следующие компоненты:

• User Interface (пользовательский интерфейс) - элементы управления:
  • Button - кнопка
  • Label - область текста
  • TextInput - текстовое поле ввода
  • List Viewer - область для отображения текстового списка, состоящего из одной строки
  • Web Viewer - область для отображения web-данных
  • Switch - кнопка-переключатель
  • Slider - ползунок
  • Alert - диалог
  • Canvas - компонент для создания спрайтовой анимации
  • Loading icon - анимированная пиктограмма для отображения хода загрузки
  • Date Input - компонент для отображения даты
  • Time Input - компонент для отображения времени
  • PDF Reader - компонент для чтения и отображения файлов PDF
    
• Layout (компоновка) - экраны и компоновщики:
  • Tab Tab Navigator - компонент для навигации при помощи верхних вкладок
  • Bottom Tab Navigator - компонент для навигации при помощи нижних вкладок
  • Stack Navigator - стандартный компонент навигации, в которой возврат на родительское окно из дочернего происходит по стрелке на панели навигации
  • Drawer Navogator - навигация при помощи боковой выдвижной панели с названиями экранов
  • Screen - экран
  • Row - компоновщик элементов по горизонтали (в строку)
  • Columns - компоновщик элементов по вертикали (в столбец)
• Voice (голос) - компоненты для работы со звуком:
  • Sound - проигрыватель звуков (mp3, wav)
  • Text To Speech - синтезатор речи
  • Speech Recognizer - распознаватель речи
  • Assistant - голосовой помощник сервиса Dialogflow (отвечает на голосовые вопросы пользователей)
  • Translator - Yandex-переводчик
• Image (изображение) - компоненты для работы с изображениями:
  • Image - компонент для отображения графических изображений
  • Photo Libraty - компонент для создания галереи фотографий
  • Camera - компонент для работы с камерой устройства
  • Barcode Scanner - компонент для чтения штрих-кодов и QR-кодов.
  • Image Recognizer - компонент для работы со службой распознавания изображений Microsoft
  • Animation - компонент для работы с json-анимациями Adobe After Effects
• Data (данные) - компоненты для работы с данными:
  • Local Storage - локальное хранилище для сохранения информации на устройстве
  • Local DB - локальная база данных на основе таблицы
  • Realtime DB - высокопроизводительное облачное хранилище Firebase
  • Spreadsheet - компонент для работы с таблицами AirTable
  • Web API - веб-сервис для работы с данными при помощи HTTP-запросов GET, POST, PUT и DELETE
  • Media DB - для работы с облачной базой данных мультимедиа CloudMan
  • Smart Contracts (только для PRO-аккаунта) - компонент для вызова метода смарт-контракта сервиса Oasis
  • Blockchain Wallet (только для PRO-аккаунта) - компонент для работы с учётной записью и транзакциями сервиса Oasis
• Location ( местоположение) - работа с картой
  • Map - компонент для работы с Google-картой
  • Location Sensor - компонент для работы с датчиком местоположения
• Sensors (датчики):
  • Timer - таймер
  • Accelerometr - датчик ускорения
  • Gyroscope - датчик наклона
  • Magnetometer - датчик магнитного поля
  • Bluetooth Low Energy - компонент для беспроводного соединение двух устройств друг с другом c низким энергопотреблением
• Social (социальное)
  • Share - компонент для обмена сообщениями с использованием коммуникационных приложений Slack, Facebook, iMessage, WhatsApp и др.
  • Push Notification (только для PRO-аккаунта) - работа с уведомлениями
• Authentication (проверка подлинности)
  • Sing In - компонент для работы с учётной записью Firebase - регистрация, вход, выход, сброс пароля
• Monetization (монетизация) - компоненты доступны только для PRO-аккаунта
  • Stripe - компонент для рабоы с платёжной системой
  • AdMob Interstitial - рекламное объявление
  • AdMob Rewarded Video - видеоприложение с вознаграждением
  • AdMob Banner - рекламный баннер

Рабочая область

В верхней части рабочей области находятся ссылки с названиями экранов для быстрого переключения между ними и кнопка "+" для создания нового экрана.

Основную часть рабочей области занимает рабочее поле в виде изображения мобильного телефона. Рабочее поле предназначено для компоновки на нём видимых компонентов интерфейса приложения. Компоненты, не имеющие визуального представления, будут располагаться в виде пиктограмм под рабочим полем.

Панель свойств

Предназначена для настройки внешнего вида и поведения выбранного компонента путём редактирования его свойств. Свойства компонентов могут располагаться на вкладке Simple (основные) и Advanced (расширенные). Данное разделение сделано с учётом уровня подготовки пользователей - начинающий или опытный.

В верхней части панели указано имя компонента. Справа от имени находятся пиктограммы кнопок для выполнения следующих действий:

• карандаш - изменение имени компонента
• листы - копирование компонента (но не связанных с ним блоков)
• корзина - удаления компонента

Редактор блоков Blocks

Предназначен для создания программной логики.

В левой части вкладки находится палитра блоков, а в правой - рабочее поле для создания программной логики путём объединения блоков друг с другом. При щелчке по названию категории блоков справа появляется палитра блоков данной категории.

Рис. 4. Редактор блоков.

Категории блоков:

• Control - управляющие (циклы и прочее)
• Logic - логические (опации сравнения, true, false, null)
• Math - математические
• Text - для работы с текстом
• Lists - для работы со списками
• Colors - для работы с цветом
• Device - для доступа к системе устройства
• Objects - для работы с объектами и форматом JSON
• Variables - переменные
• Functions - функции
  

Под этим списком располагаются блоки компонентов проекта (Button1, Screen1) и категория Any Component, блоки в которой предназначены для выполнения операций над компонентами как на этапе разработки, так и на этапе выполнения приложения.

В рабочем поле редактора блоков доступно контекстное меню по щелчку правой кнопкой мыши:

• Команды контекстного меню редактора:
  • Clean up Blocks - упорядочить все блоки по вертикали (расчистка блоков)
  • Collapse Blocks - свернуть все блоки
  • Expand Blocks - развернуть все блоки
  • Delete N Blocks - удалить N блоков
• Команды контекстного меню блока:
  • Duplicate - дублировать блок. Блок дублируется вместе со всеми присоединёнными к нему блоками (Ctrl+C - копировать блок, Ctrl+X - вырезать блок)
  • Add Comment - добавить комментарий
  • Remove Comment - удалить комментарий
  • Collapse Block - свернуть блок
  • Expand Block - развернуть блок
  • Delete N Blocks - удалить N блоков
  • Help - открыть страницу справки по данному блоку
  • Create 'get this' или 'set this' - создать парный блок. Если контекстное меню вызвано для для блока установки значения свойства (set), то будет создан блок получения значения свойства (get) и наоборот.
  • Inline Inputs - изменить форму блока на однострочную
  • External Inputs - изменить форму блока на многострочную
  • Highlight function definition - подсветить блок определения функции, относящейся к данному блоку её вызова
  • Create 'имя функции' - создать блок вызова функции, соответствующий данному блоку определения функции
    

В правой нижней части редактора блоков находятся элементы управления для выполнения команд:

• Центрировать рабочее поле
• Увеличтить масштаб
• Уменьшить масштаб
• Корзина для удаления блоков. Блоки можно также удалить путём перемещения их на панель выбора блоков категории, когда рядом с курсором отображается крестик

Редактировать свойства компонентов можно на панели свойств или в редакторе блоков. При этом в редакторе блоков можно работать только с небольшой частью имеющихся у компоненов свойств.

Редактор сцен

После добавления в проект компонента Canvas в среде разработки появляется новая вкладка Canvas с редактором сцен, а палитра компонентов заменяется на палитру спрайтов, где при помощи кнопки "Add Sprite Type" происходит добавление типа (класса) спрайта в проект. Для добавления спрайта необходимо из панели Sprite Type перетащить пиктограмму нужного типа на рабочее поле.

Рис. 5. Редактор сцен.

На следующем занятии мы создадим простое приложение и установим его на iPhone.