Презентация - Создание приложения в среде thunkable.Com. Учим английский «Животные»

Создание приложения в среде Thunkable.com
Учим английский «Животные»

Thunkable.com – это
Облачная среда визуального программирования, которая позволяет создавать мобильные приложения для Android и IOS. Разработка приложений ведется в двух режимах: режим дизайнера, в котором к приложению добавляются все необходимые компоненты (как видимые пользователю, так и нет) режим блоков, в котором с помощью блоков настраивается работа всех добавленных компонентов и приложения в целом. Среда англоязычная (на данный момент), для работы в ней удобнее всего использовать Google-аккаунт. Одно из главных преимуществ данной среды перед аналогичными сервисами (например, MIT App Inventor) - очень удобный способ тестирования готовых проектов: нет необходимости загружать файл проекта на мобильное устройство и устанавливать все промежуточные версии проекта, чтобы проверить его работу. Достаточно лишь воспользоваться мобильным приложением Thunkable, которое можно установить через Google Play или App store. Мобильное приложение синхронизируется в web-версией сервиса и позволяет тестировать проекты сразу в процессе создания.

Интерфейс среды

Способы сохранения и использования приложения: 1. Приложение «Thunkable live» - выполняем вход с помощью аккаунта Google и получаем доступ к нашим, созданным проектам.; 2. Кнопкой «Download» получаем файл с расширением .ark (для ANDROID). Устанавливаем на смартфон и получаем готовое приложение (для IOS этот способ сложен, так как много степеней защиты системы), загрузить на смартфон в виде ссылки на скачивание; 3. «Publish» - публикация в App Store (Ios) или Google Play (Android) платный; 4.«Live test» - поделиться ссылкой для тестирования на IOS - копируем ссылку, отправляем по почте или любым другим способом на смартфон, скачиваем приложение TestFlight и тестируем.

1 – регистрируемся в сервисе Thunkable.com с помощью аккаунта Google.com; 2 – скачиваем приложение Thunkable Live, которое можно бесплатно установить через Play Market или App Store; 3 – в сервисе имеются две версии создания приложений «Кросс платформенная» и «Классическая», мы выбираем Кросс платформенную для ANDROID или IOS, далее откроется окно, в котором нужно выбрать «Студент или преподаватель», затем окно приветствия и ознакомление с галереей опубликованных приложений; 4 – нажимаем кнопку «Старт Билдинг», даем название проекту и выбираем категорию «Информация», перед нами открывается интерфейс сервиса;

5 – по центру у нас находится окно, похожее на смартфон, слева компоненты, которые мы будем добавлять, выше уже имеющиеся компоненты и, как в сервисе App Inventor, есть 2 режима работы: дизайнер – где мы меняем внешний вид приложения и режим блоков – где мы программируем работу, справа окно свойств компонента; 6 – создаем приложение по изучению английского языка на тему «Животные». Для этого нам понадобятся изображения животных с разрешением не больше 100 пикселей и одинаковым расширением (например: .png);

7– на первом экране разместим название приложения, добавим анимацию-указатель для перехода на следующий экран (Рис.2), на втором приветственное сообщение с помощью компонента Label в блоке User Interface, справа в строке Text напишем «Привет, давай изучать английские слова, для этого нажми на картинку!» (Рис.1), для того, чтобы текст открепить от краев, в свойствах Margin - top, left и right установим значение 10 px, Fontsize (размер шрифта) – 18, Color – black, фон для текста BackgroundColor – бирюзовый, полупрозрачность, прокручиваем свойства вниз, установим рамку Border width – 2, color - синий, style – dotted, border radius – 1, чтобы выровнять текст по центру, нажимаем на вкладку Advanced и выберем Text Align – center, слева выбираем компонент Screen1, выбираем в вертикальном положении Top.

8 – добавляем компоненты Button (кнопка) под надписью, в поле Text убираем слово «Button» и меняем размер кнопки, ниже устанавливаем свойство высоты и ширины Absolut size – 100, top – 30, в Background Picture загружаем изображения. То есть, когда нажимаем на кнопку с изображением котенка, то приложение произносит и показывает слово на английском языке. Добавляем компонент вывода для текста Label, абсолютную ширину и высоту – 40, для произношения слова добавляем компонент Text to speech.  9- приступаем к программированию, нажимаем на кнопку Blocks и выбираем компонент Button, чтобы при нажатии на кнопку, менялось изображение животного, появилось название животного и был произнесен текст на английском (Рис.3 ). 10 – запускаем приложение на смартфоне. 11 – все созданные проекты автоматически сохраняются и синхронизируются в личном кабинете Thunkable.

Пишем программный код

Добавление экрана с проверочным упражнением
Как всегда, прежде чем приступить к изменениям, не забудьте создать копию приложения и работайте уже с ней.     На этом экране в режиме дизайнера размещаем компоненты: label, Image, TextInput и button.     Настраиваем параметры всех компонентов по своему желанию, но таким образом, чтобы эти настройки соответствовали дизайну всего приложения.  Программируем работу всех компонентов.     Задаем проверку ввода и переключение на следующую картинку с помощью условной конструкции. Используем функции для того, что уменьшить объем "кода".     Данную задачу можно реализовать различными путями в видео представлен лишь один из вариантов. Вы же можете использовать и свои идеи :)

Начало

Конец

Проверка экрана. Смена изображений

Проверка экрана. Случайное появление изображений

Дублируем остальные блоки…до 14

Случайное появление картинок

Приложение готово! Проверяем на смартфоне с помощью приложения “Thunkable live”