Что ж, дизайн нарисовали, теперь пора и запрограммировать наше первое приложение. Да! Не пугайтесь, вам не придется вспоминать школьный курс информатики. Достаточно немного логики. И любви к собиранию пазлов .
Напомню, App Inventor хорош тем, что есть возможность контролировать разработку приложения прямо на имеющемся у вас устройстве на Android.
Замечу наперёд, само программирование блоков приложения займёт буквально 2 минуты и несколько движений мышью.
Итак, в чём будет заключаться функционал нашего приложения? Очень просто — при нажатии на кнопку «Время» в соответствующих полях должны появляться часы, минуты и секунды. Эти данные будут браться с системных часов вашего андроидного устройства.
Для того, чтобы начать программирование, необходимо перейти в редактор блоков — жмем «Blocks».
Всё, что нам нужно, это придать нужные функции кнопке «Время».
В редакторе блоков, в меню «Blocks», выделяем мышью «Время» и видим появившееся меню с обработчиками и свойствами этого компонента. Коричневый цвет — это событие, то есть элемент, которое инициирует действие для компонента. Зеленый — свойства компонента.
Первым мы настроим действие, которое будет происходить при нажатии и удержании кнопки, а именно — должно быть показано текущее время. Хватаем мышью событие
и перетаскиваем на поле редактора.
Надпись «when Время .TouchDown do» означает «когда Время нажата делать». И сюда мы будем пристраивать те действия, которые необходимо сделать приложению при нажатии и удерживании кнопки «Время».
Займемся настройкой действий с текстовыми полями. Выделяем мышью компонент «Часы» и находим в выпавшем меню
Этот инструмент позволяет назначить желаемый текст для соответствующего компонента. Прилаживаем его к событию
Заметили, что по внешнему виду очень напоминает пазлы? Один элемент вставляется в другой.
Идём дальше — отправляемся к компоненту «Clock1». Там нам понадобится команда (обработчик)
Это ничто иное, как вызов компонента «Clock1» для учета текущего часа. Перевод текста свойства — «Вызвать Clock1 Час текущий».
И пристраиваем этот элемент в продолжение нашего пазла к свойству текстового поля.
Теперь необходимо указать, откуда же необходимо брать текущий час. Для этого снова идем в «Clock1» и выбираем
и тоже пристраиваем его в общий пазл. Получаем вот такую штуку:
Этот кусочек программы, уже работающий, указывает приложению, что при нажатии и удержании кнопки «Время» необходимо взять текущий час с таймера устройства и подставить его в текстовое поле «Часы».
Можем прямо сейчас проверить, что получилось на экране имеющегося устройства под управлением Android. Для этого подключаем наше устройство к Интернет и запускаем приложение MIT AI2 Companion. Приложение выглядит следующим образом:
И, уже на компьютере, в самом верхнем меню выбираем «Connect», а там «AI Companion» — кликаем. App Inventor выдает QR-код, или, так называемый трехмерный штрих-код. Дальше жмём в приложении телефона «scan QR code» и, наведя камеру устройства на код, щелкаем по экрану — устройство получило ссылку для подключению к нашему проекту. Через 10-15 секунд устройство и сервер App Inventor соединятся и вы увидите то, что уже наваяли. Можете нажать на кнопку «Показать время» и насладиться видом «часа».
Вот только не хватает минут и секунд. И в поле «Часы» замирает последний показанный час. Обе беды исправить несложно.
Первая беда — нехватка минут и секунд: добавляем необходимые пазлы для минут и секунд по аналогии с часами. Получаем следующий вид блока:
Можете полюбопытствовать, как это выглядит на вашем устройстве.
Теперь вернемся ко второй «беде» — возврату надписей «часы : минуты : секунды» при отпущенной кнопке. Впрочем, можно оставить и так: будете знать, когда последний раз интересовались временем. Но, для науки, все же сделаем необходимые доработки.
Выберем для нашей кнопки событие
Как вы, наверное, уже поняли это событие указывает действия при отпускании кнопки. Аналогично предыдущим шагам, наберем элементы для изменения текста «часов», «минут» и «секунд»
Пока похоже на предыдущий блок, но теперь будет попроще. Нужно всего лишь установить статический текст для каждого поля: находим в «Blocks» элемент «Text» и выделяем. В выпавшем наборе свойств выбираем
Этот элемент позволяет назначать желаемый текст. Набираем внутри слово «Часы» и присоединяем к «set Часы . Text to». То же самое делаем для «минут» и «секунд».
В результате, мы получаем блоки вот такого вида:
На этом наше приложения можно считать готовым. Вы можете в полной мере получить наслаждение, тестируя ваше приложение в AI2 Companion.
Однако мы создавали приложение не только для того ,чтобы подключаться к нему через AI2 Companion. Нам оно нужно в полноценном виде на нашем устройстве. А значит, его туда нужно загрузить.
А подробней о блоках App Inventor вот в этой статье.