DroidScript

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

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

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

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

На практике достаточно часто возникает ситуация, когда что-то не работает или вместо экрана с компонентами отображается белый экран. Порядок действий в таких случаях может быть таким:

  1. Осуществить пошаговую проверку работы. Если раньше работало, а сейчас нет, то, возможно, проблема во вновь добавленных блоках или обновлении ThunkableLive.
  2. Изменить логику в редакторе блоков. Белый экран часто возникает при возникновении внутренней ошибки. При этом никаких сообщений не отображается, а ThunkableLive зависает и перестаёт реагировать даже на правильный код.
  3. Закрыть ThunkableLive и переподключиться к нему заново
  4. Если не работают алгоритмы, которые по логике должны железно работать, например, из документации, то переустановить ThunkableLive
  5. Если ничего не помогло - обратиться за помощью к сообществу. Не могу сказать, что ответы на форуме даются на все вопросы, но в некоторых случаях разработчики мне помогли решить проблемы. Чем детальнее будет информация (на какой операционной системе проблема, рисунок с блоками, которые не работают, последовательность действий и др.), тем быстрее помогут разобраться.

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

Для начала приведу несколько обнаруженных нами особенностей работы версии Thunkable под iOS на нварь 2018 года:

  1. Компоненты можно перетаскивать как на рабочее поле редактора вида, так и в области списков видимых или невидимых компонентов приложения Visible Components или Invisible Components. Некоторые компоненты не добавляются в проект при их перемещении на рабочее поле и второй способ является единственно возможным для осуществления этого.
  2. Если компонент может содержать в себе другие компоненты, то он относится к контейнерным компонентам. При перемещении компонента в области списка проекта появляется вспомогательная линия, показывающая место его вставки после отпускания клавиши мыши. Если линия вертикальная, то это означает вставку компонента в компонент-контейнер. К контейнерным компонентам относится экран Screen, все компоненты навигации Navigator и компоновщики Row и Column.
  3. Имена компонентов изменить невозможно.
  4. Созданные в редакторе блоков переменные Variables имеют глобальную область видимости в пределах содержащего их экрана. Имя переменной можно изменить по команде Rename variable..., находящейся в выпадающем списке блока.
  5. Для обмена данными между экранами используются компоненты локального и облачного хранилища - Local Storage и Realtime DB.
  6. Web Viewer не поддерживает выражения Javascript в свойстве url.
  7. При наличии в области просмотра списка List Viewer пустой опции наблюдается короткое зависание при его отображении.
  8. Повторная генерация события при выборе опции в области отображения списка. Для устранения двойного нажатия опции можно использовать защёлку по первому нажатию, но из-за отсутствия событий перехода на экран это не защитит от тройного и более числа быстрых нажатий.
  9. Невозможно получить объект JSON из строки - арлучаем строку из CSV.
  10. Иногда не срабатывают блоки, находящиеся в блоке функции. В этом случае их можно вынести в блок инициализации экрана Screen Starts.
  11. Не отображается фоновое изображений для области списка ListView.
  12. Вложенные блоки удаляются без предупреждения при удалении родительского блока
  13. Рабочее поле в редакторе блоков нельзя увеличить путём уменьшения масштаба окна браузера
  14. Перерисовка содержимого областей Image и WebView при использовании таймера
  15. Самопроизвольная генерация блоков в рабочем поле редактора при невыясненных обстоятельствах.
  16. Обновление содержимого WebView при переходе на содержащий его экран с других экранов. Если в контенте, например, находися вызов диалога alert(), то припереходе на экран с WebView в IDE будет происходить отображение этого диалога.
  17. Копирование блоков между экранами невозможно
  18. Создать можно больше двух экранов, но иногда получается так, что в редакторе блоков не происходит переключение на рабочую область для него, например, при выборе третьего экрана в рабочей области отображается часть блоков с экрана 2. Ничего страшного. Добавляем блоки с экрана 3 в эту гибридную рабочую область, либо создаём ещё один экран с чистой рабочей областью.
  19. Самопроизвольное переключение рабочей области редактора блока на экран 1 в момент выбора на экране 2 категории на палитре блоков. Для исключения этого нужно нажать и перетащить блок категории на рабочее поле.

Как видно, проблем хватает, но и с этим можно работать.

Перед началом создания приложения подумайте о том, будет оно состоять из одного или нескольких экранов. Компоненты не имеют свойств видимости, но и в одноэкранном приложении также можно реализовать отношение мастер-детализация путём разделения экрана на несколько частей. В одной части может находиться, например, область для отображения списка List Viever, а в другой - текстовое поле Label или область для отображения изображения Image. Если вместо текстовой области Label использовать поле ввода TextInput , то появится возможность не только редактировать текст, но и выделения его для копирования в другие приложения.

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

  1. Tab Navigator - переключение при помощи ярлыков и свайп-жеста (при включении опции SwipeEnabled в навигаторе).
  2. Stack Navigator - вариант стека, когда каждый новый экран добавляется в стопку поверх текущего. Стековые экраны имеют в заголовке стрелку влево для перехода на предыдущий экран.
  3. Drawer Navigator - навигация при помощи списка с названиями экранов, расположенном на боковой выдвигающейся (слева или справа) панели.
  4. Произвольная - вызов экрана при обработке какого-нибудь события - нажатие кнопки, по таймеру и др. Блок экрана для его вызова находится в категории Controls.

Компоненты навигации являются контейнерами, в которые нужно добавлять взаимодействующие с ними экраны.

Компоненты на экране могут располагаться по горизонтали или вертикали. Перед созданием интерфейса на рабочем поле редактора вида можно сделать предварительный набросок на листе бумаги или в графическом редакторе. Это поможет увидеть общую разметку и компоновку, которую нужно создать. Для упрощения всей дальнейшей работы компоненты желательно располагать в компоновщиках. Переместить или удалить один компоновщик проще, чем десятки компонентов по отдельности.

После добавления видимого компонента в проект можно уточнить его размеры, указав в его свойствах:

  • Относительный размер в процентах (Relative Size)
  • Абсолютный размер в пикселях (Absolute Size)
  • Заполнение по области контейнера, в котором они находятся (Fill container)
  • Расширение с учётом их содержимого (Fit contents)

Абсолютное значение пригодится для создания внешних отступов и распорок. Например, если требуется расположить надпись с некоторым отступом от левого края экрана, то вместо добавления пробелов перед текстом в ней можно добавить компонент в компоновщик Row, в который добавить также слева пустой компоновщик или Label с необходимым абсолютным значением ширины. Если необходимо сделать отступ для несколько элементов, то этот приём применяем к компоновщику.

Выравнивание компонентов по горизонтали и вертикали производится с использованием свойств гибкой компоновки Flex-box контейнеров родителей. Для расположения элемента по центру нужно вставить его в компоновщик со значением выравнивания center.

Если данными нужно обмениваться между экранами, то для этого можно обойтись одним блоком Local Storage без использования переменных. В качестве ключа для данного блока указывается имя переменной, а в качестве значения - её значение.

Локальное хранилище можно использовать и в качестве глобального межэкранного ассоциативного массива вместо создания большого количества переменных. Вместо создания 10 переменных создаём 10 пар ключ-значение. К преимуществу использования хранилища относится возможность программного создания переменных из строки (с разделителями или JSON). Вместо переменных можно использовать и JSON-объект, но имена свойств в его блоке задаётся вручную, тогда как в блоке хранилища их можно задать программно. К недостатку использования хранилища и JSON-объекта можно отнести необходимость самостоятельного отслеживания имён переменных, чтобы случайно не перезаписать ранее созданные.

Вместо создания большого количества коротких текстовых надписей Label для отображения детальной информации по выбранной опции можно использовать область списка List Viewer, что гораздо проще как в создании, так и в работе. Но, в отличие от опций списка, текстовые поля являются многострочными, что лучше подойдёт для отображения длинных надписей.

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

Текстовое поле ввода TextInput не имеет обработчиков событий, но при помощи таймера можно отслеживать изменение текста в нём и реализовать поиск с уточнением или AJAX-поиск.

Если в момент переключения экранов возникает мерцание (удаление компонентов с освобождением занимаемой ими области и последующим восстановлением на прежнем месте), то их помещаем в распорку - компоновщик с заданной абсолютной высотой или шириной. Это уменьшит неприятный эффект и сводит его к обновлению вида компонентов.

Из сказанного выше делаем такой вывод: если что-то не работает или работает не так, как ожидается, то с вероятностью 50% проблема в Thunkable и, возможно, большую часть функциональности приложения в настоящее время имеет смысл реализовать при помощи web-технологий с использованием компонентов Web Viewer и Web API.

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