DroidScript
DroidScript
разработка мобильных приложений

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

Thunkable X  
11.11.2019

Для разработки приложений на платформе 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.

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

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

Рис. 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.

Thunkable X  
© 2016-2020  Александр Страшко