DroidScript
DroidScript
инструменты для мобильной разработки

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

Thunkable X  
02.12.2018

Для разработки приложений на платформе 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 - галерея общедоступных проектов
  4. На вкладке My Projects расположены карточки ранее созданных проектов и кнопка для создания нового проекта Create New App.

Интерфейс Thunkable для iOS

Рис. 1. Браузер проектов.

На карточке проекта имеются следующие элементы:

  • Кнопка x в правом верхнем углу для удаления проекта (после подтверждения)
  • Пиктограмма проекта (по умолчанию или пользовательская)
  • Название проекта (Back)
  • Пиктограмма карандаша для входа в режим редактирования названия проекта
  • Дата и время изменения проекта
  • Надпись со статусом видимости проекта:
    • Public - доступный для сообщества в публичной галерее Public Gallery
    • Private - закрытый и недоступный для сообщества
  • Надпись с количеством ссылок на проект, если кто-то его копировал в свой аккаунт - 1
  • Ссылка Details для перехода на страницу дополнительной информации о проекте, где можно изменить видимость проекта, запустить его на устройстве или открыть в режиме редактирования
  • Ссылка Edit для перехода в режим редактирования проекта

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

Ниже показан пример проекта в режиме редактирования вида.

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

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

Логотип thunkable в левом верхнем углу используется для перехода в браузер проектов Projects. Надпись Pro означает возможность закрытых и недоступных сообществу проектов.

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

Панель управления

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

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

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

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

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

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

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

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

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

  • User Interface (пользовательский интерфейс) - элементы управления:
    • Button - кнопка
    • Label - область текста
    • TextInput - текстовое поле ввода
    • List Viewer - область для отображения текстового списка, состоящего из одной строки
    • Web Viewer - область для отображения web-данных
    • Switch - кнопка-переключатель
    • Slider - ползунок
    • Alert - диалог
  • Screen / Layout (экран / компоновки) - экраны и компоновщики:
    • Tab Tab Navigator - компонент для навигации при помощи верхних вкладок
    • Bottom Tab Navigator - компонент для навигации при помощи нижних вкладок
    • Stack Navigator - стандартный компонен навигации, в которой возврат на родительское окно из дочернего происходит по стрелке на панели навигации
    • Drawer Navogator - навигация при помощи боковой выдвижной панели с названиями экранов
    • Screen - экран
    • Row - компоновщик элементов по горизонтали (в строку)
    • Columns - компоновщик элементов по вертикали (в столбец)
  • Voice / Audio / Artificial Intelligence (голос / аудио / искуственный интеллект) - компоненты для работы со звуком:
    • Sound - проигрыватель звуков (mp3, wav)
    • Text To Speech - синтезатор речи
    • Speech Recognizer - распознаватель речи
    • Assistant - голосовой помощник (отвечает на голосовые вопросы пользователей)
    • Translator - Yandex-переводчик
  • Image / Video / Artificial Intelligence (изображения / видео / искуственный интеллект) - компоненты для работы с графикой:
    • Image - компонент для отображения графических изображений
    • Photo Libraty - компонент для создания галереи фотографий
    • Camera - компонент для работы с камерой устройства
    • Image Recognizer - компонент для работы со службой распознавания изображений Microsoft
    • Lottie - компонент для работы с json-анимациями Adobe After Effects
  • Data / Storage (данные / хранилища) - работа с данными:
    • Local Storage - локальное хранилище для сохранения информации на устройстве
    • Realtime DB - высокопроизводительное облачное хранилище Firebase
    • Spreadsheet - компонент для работы с таблицами AirTable
    • Web API - веб-сервис для работы с данными при помощи HTTP-запросов GET, POST, PUT и DELETE
    • Media DB - для работы с облачной базой данных мультимедиа CloudMan
  • Map / Location (карты / местоположение) - работа с картой
    • Map - компонент для работы с картой
    • Location Sensor - компонент для работы с датчиком местоположения
  • Sensor (датчик):
    • Timer - таймер
  • Social (социальное)
    • Share - компонент для обмена сообщениями с использованием коммуникационных приложений Slack, Facebook, iMessage, WhatsApp и др.
  • Authentication (проверка подлинности)
    • Sing In - компонент для работы с учётной записью Firebase - регистрация, вход, выход, сброс пароля
  • Monetization (монетизация)
    • Payment - компонент для работы с платёжной системой Stripe

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

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

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

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

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

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

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

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

Вкладка блоков

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

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

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

Под этим списком располагаются блоки компонентов приложения (Button1, Screen1).

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

  • Команды контекстного меню редактора:
    • Undo - отменить предыдущее действие (Ctrl+Z)
    • Redo - возвратить предыдущее действие (Ctrl+Shift+Z)
    • 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 'имя функции' - создать блок вызова функции, соответствующий данному блоку определения функции

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

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

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

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

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