DroidScript

Разработка приложений под iOS на Thunkable: среда разработки

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

Разработка приложений под iOS на Thunkable: среда разработки

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

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

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

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

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

Рис. 1. Интерфейс Thunkable X.

В левом верхнем углу находится логотип thunkable, который используется для перехода на страницу проектов Projects, где можно выполнить следующие операции:

  • создать новый проект
  • изменить название проекта
  • удалить проект
  • узнать некоторую информацию о проекте - дату создания и количество внешних ссылок на проект, который был отдан в общий доступ

В верхней части области разработки расположены ссылки:

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

Для организации интерактивного просмотра приложения на устройстве, из магазина приложений App Store установите приложение Thunkable Live. После этого откройте его и выполните вход при помощи своего Google-аккаунта. После появления запроса на соединение нажмите кнопку Live Test в IDE.

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

На панели проекта расположены:

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

В центральной части окна находится область вкладок - компоненты Components (видна по умолчанию) и при выборе горизонтальной вкладки Components, свойств Properties и блоков Blocks. Последние две вкладки появляются при выборе компонента (имеющего свойства и блоки) в древовиднои списке или поле дизайнера.

Вкладка компонентов Components

Здесь расположена палитра компонентов:

  • User Interface (пользовательский интерфейс) - элементы управления:
    • Button - кнопка
    • Label - область текста
    • TextInput - текстовое поле ввода
    • List Viewer - область для отображения текстового списка
    • Web Viewer - область для отображения web-данных
    • Switch - кнопка-переключатель
  • 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 - компонент для работы с картой
  • Sensor (датчик):
    • Timer - таймер
  • Social (социальное)
    • Share - компонент для обмена сообщениями с использованием коммуникационных приложений Slack, Facebook, iMessage, WhatsApp и др.
  • Authentication (проверка подлинности)
    • Sing In - компонент для работы с учётной записью Firebase - регистрация, вход, выход, сброс пароля
  • Monetization (монетизация)
    • Payment - компонент для работы с платёжной системой Stripe

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

Вкладка свойств Properties

Щёлкните по компоненту проекта Screen1 для её открытия. На вкладке расположены элементы управления для задания начальных значений свойств выбранного компонента.

Вкладка блоков Blocks (редактор блоков)

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

Блоки распределены по категориям:

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

Под этим списком будут располагаться блоки компонентов приложения.

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

На следующем занятии будут рассмотрены основы работы в Thunkable X.

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