DroidScript

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

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

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

Оглавление  
Дата изменения 30.05.2018

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

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

  1. Откройте официальный сайт thunkable.com и для входа в систему нажмите кнопку Sign In, расположенную на главной странице.
  2. На появившейся странице выбора операционной системы (iOS или Android) выберите iOS.
  3. На следующей странице нужно осуществить вход в среду разработки при помощи своей учётной записи Google (Sign in with Google).
  4. В случае успешного входа на экране отобразится браузер проектов Projects, в области которого отображается ярлык для создания нового проекта "Create New App" и ярлыки всех ранее созданных проектов.

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

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

На ярлыке проекта отображается:

  • Пиктограмма проекта (по умолчанию или своя)
  • Название (Google MAP1)
  • Пиктограмма для входа в режим редактирования названия проекта
  • Количество внешних копий проекта shares (если он был открыт для общего доступа)
  • Дата и время изменения проекта

Для удаления проекта служит ссылка "x" в правом верхнем углу области. При щелчке по ней отображается диалог, в котором можно подтвердить удаление проекта или отменить эту операцию. Открытие проекта осуществляется при щелчке по его ярлыку.

Для создания нового проекта необходимо щёлкнуть по ярлыку "Create New App". Появится диалог, в котором нужно дать название проекту. После его ввода загрузится среда разработки Thunkable X в режиме редактора вида.

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

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

В левом верхнем углу находится логотип thunkable, который используется для перехода в браузер проектов Projects.

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

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

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

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

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

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

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

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

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

Используется для выбора необходимых компонентов. На текущий момент доступны следующие компоненты:

  • User Interface (пользовательский интерфейс) - элементы управления:
    • Button - кнопка
    • Label - область текста
    • TextInput - текстовое поле ввода
    • List Viewer - область для отображения текстового списка
    • Web Viewer - область для отображения web-данных
    • Switch - кнопка-переключатель
    • Slider - ползунок
  • Screen / Layout (экран / компоновки) - экраны и компоновщики:
    • 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 - компонент для работы с камерой iPhone или iPad
    • 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

В ценральной части расположено рабочее поле редактора вида, над которым располагаются ссылки для быстрого выбора экрана (Screen1) и создания нового "+"

Панель свойств 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 'имя функции' - создать блок вызова функции, соответствующий данному блоку определения функции

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

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

Перечни свойств, расположенные на вкладке Properties и Blocks, не идентичны. Блоки имеются далеко не для всех свойств.

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

Оглавление  
© 2016 droidscript.ru admin@droidscript.ru