- Узнайте о программировании, ориентированном на события
- Понимание различных типов блоков в платформе MIT App Inventor
Вот задания для этого урока:
СОБЫТИЯ
Мобильные приложения основаны на событийно-ориентированном программировании.
Событийно-ориентированное программирование Основано на событиях, а не на выполнении кода сверху вниз. Некоторые программы просто выполняют весь свой код сразу, но мобильные приложения работают в зависимости от того, как пользователь взаимодействует с ними.
Мобильные приложения работают на основе событияхЭто события, которые вызывают выполнение кода. Например, пользователь нажимает на кнопку. Событием является момент, когда пользователь нажимает на кнопку. Это событие запускает код на выполнение, который называется обработчик события.
ОСТАНОВИТЬСЯ И ОБСУДИТЬ
Можете ли вы вспомнить, как вы взаимодействуете со своим телефоном и что он делает? Вот несколько, чтобы начать:
- Когда вы нажимаете на значок приложения, оно открывается.
- Когда вы нажимаете кнопку "Отправить" для текстового сообщения, он отправляет его и издает звук.
- Когда вы пытаетесь войти в приложение, оно запрашивает пароль.
Для начала давайте рассмотрим различные части платформы App Inventor.
В App Inventor есть два окна, с помощью которых вы создаете свое приложение. Нажав на кнопку Designer (в правом верхнем углу экрана), вы перейдете в окно Designerгде вы разрабатываете пользовательский интерфейс. Сайт пользовательский интерфейс это все, с чем пользователь может взаимодействовать в вашем приложении. Это могут быть кнопки, панели навигации, текстовые поля, картинки и т. д.
ОКНО КОНСТРУКТОРА ИЗОБРЕТАТЕЛЯ ПРИЛОЖЕНИЙ
Палитра
Вы выбираете компоненты из палитры, чтобы добавить их в окно просмотра, которое находится в центре окна. Здесь есть несколько ящиков с компонентами, которые можно изучить и использовать.
Просмотрщик
Перетащите свои компоненты на Viewer. Компоненты добавляются сверху вниз, слева. Чтобы получить больший контроль над тем, где именно появляются компоненты, нужно использовать компоненты Layout и выравнивание.
Список компонентов
В этом списке представлен иерархический список элементов на экране. Вы можете выбирать их, щелкая по ним в окне просмотра или в этом списке.
Панель свойств
Панель "Свойства" позволяет задать свойства каждого компонента, такие как размер шрифта, выравнивание, цвет и т. д.
Невидимые компоненты
Невидимые компоненты не отображаются на экране, но все равно являются частью приложения. Они появляются под экраном, когда вы перетаскиваете их.
Когда кто-то использует ваше приложение, он взаимодействует с вашим пользовательским интерфейсом, нажимая на кнопки, вводя текст и т. д. Вам предстоит решить, что должно делать ваше приложение, и запрограммировать его на выполнение этих действий.
РЕДАКТОР БЛОКОВ
При нажатии на кнопку "Блоки" вы попадаете в Редактор блоков в окно "Редактор блоков", где и происходит весь процесс кодирования. Вы перетаскиваете блоки с панели слева в рабочую область в центре экрана.
Слева находятся блоки, которые вы можете перетащить в рабочую область. Они находятся в таких категориях/отделах, как Control и Logic.
Просмотрщик
Это ваша рабочая область, куда вы перетаскиваете все блоки. Вы можете перемещать их, привязывать друг к другу. Вы также можете удалить ненужные блоки.
Компонентные блоки
Каждый компонент в вашем приложении имеет свой собственный набор блоков. Вы нажмете на компоненте, чтобы отобразить блоки, которые затем можно перетащить в рабочую область.
УПРАВЛЯЮЩИЕ СОБЫТИЯМИ
Блоки обработчиков событий в App Inventor имеют золотистый цвет и форму открытого блока, поэтому вы можете закрепить блоки внутри него. Эти блоки запускаются только при наступлении данного события.
При нажатии на кнопку
Вы уже использовали эту функцию. Когда пользователь нажимает определенную кнопку, вы хотите, чтобы приложение что-то сделало, например открыло другой экран или отправило сообщение.
При изменении ориентации экрана
Если пользователь поворачивает телефон из портретной (вертикальной) ориентации в ландшафтную (горизонтальную), вам может понадобиться что-то сделать, например, изменить расположение экрана или размер компонентов.
При изменении положения слайдера
Слайдер позволяет пользователю перетаскивать его, чтобы выбрать какое-то значение. Это может вызвать изменение другого компонента. Например, с помощью ползунка можно увеличить размер пера в приложении для рисования.
ФУНКЦИИ
Функции Это блоки кода, которые что-то делают. Они могут быть запущены много раз в приложении. В App Inventor блоки функций окрашены в фиолетовый цвет. В некоторых языках функции называются методами или процедурами. На самом деле в App Inventor они обычно называются процедуры. Они что-то делают, поэтому их можно рассматривать как блоки действий.
TextToSpeech.Speak
Компонент TextToSpeech может произносить или говорить любой текст, который вы хотите, чтобы он произнес.
Camera.TakePicture
Компонент Camera позволяет сделать снимок с помощью телефона.
Sound.Play
Компонент Sound может воспроизводить звук.
СЕТТЕРЫ И ГЕТТЕРЫ
Зеленые блоки относятся к компонентам и их свойствам.
Светло-зеленые блоки, которые могут привязываться к другому блоку, называются геттерыпотому что вы получаете значение свойства.
Сеттеры Они имеют темно-зеленый цвет и могут быть привязаны к объекту с открытым слотом на конце. Это позволяет установить значение свойства.
Текст кнопки1
Текст кнопки Button1 будет получен и сохранен в переменной global greeting.
Текст кнопки1
Для параметра Text of Button1 установлено значение "I love coding". На кнопке появится надпись "I love coding".
Текст этикетки1
Текст Label1 установлен на Source of Sound1. Это означает, что в Label1 будет отображаться имя звукового файла.
Источник звука1
Источник звука Sound1 (имя звукового файла) получается и хранится в свойстве Text метки Label1. Установка текста метки по сути отображает значение в метке, поэтому имя звукового файла будет отображаться в Label1.
Текст Label1
TextToSpeech получает содержимое Label1's Text и произносит его. Какой бы текст ни отображался в Label1, он будет произнесен.
Совет для менторов
Лучшие практики: Напомните студентам, что это в точности похоже на реальное кодирование. Странная лексика (функции, геттеры, сеттеры), которую мы используем, - это именно то, что используют кодеры.
Наводящие вопросы для студентов: Можете ли вы вспомнить, какие повседневные функции вы выполняете? (Например: испечь пирог, почистить зубы - все, что имеет повторяющиеся шаги). Функции очень похожи на алгоритмы!
Советы для менторов предоставлены при поддержке AmeriCorps.
БЛОКИ ДАННЫХ
Когда вы используете блоки сеттеров, вы можете использовать другие встроенные блоки, которые представляют данные или информацию, которая может быть использована в вашем приложении. Некоторые примеры блоков данных, которые можно использовать, приведены ниже.
Числа
Числовые значения можно использовать в качестве данных в приложении. Эти блоки можно найти в ящике Math в палитре блоков.
Текст или строки
Текст, иногда называемый строками, можно использовать в качестве данных. Это буквы, слова и предложения, которые можно использовать в приложении. Блоки находятся в ящике "Текст" палитры "Блоки".
Boolean
Этот тип данных имеет только два возможных значения - true или false. Эти блоки могут задавать или проверять "состояние" чего-либо и будут использоваться в условных обозначениях, о которых вы узнаете больше.
ДЕЯТЕЛЬНОСТЬ: УЧЕБНИК ПО ЗВУКОЗАПИСИ
Следуйте видеоинструкции ниже
и следуйте инструкциям Дэйва в видео ниже.
Обратите внимание, что видео начинается с 1:11, чтобы пропустить инструкции по загрузке. Эти инструкции не нужны, если вы загрузили стартовый проект по ссылке выше.
ГЛАВНАЯ
В процессе деятельности вы использовали:
- Блоки обработчика событий
- Функциональные блоки
Давайте попробуем использовать некоторые блоки setter и getter, добавив их в приложение Soundboard.
Когда пользователь нажимает на любую картинку, чтобы воспроизвести связанную с ней речь, измените фоновый цвет экрана.
Вы можете изменить его на один определенный цвет, но затем вы не сможете легко вернуть его к исходному цвету, черному, поэтому вместо этого измените фон экрана на случайный цвет.
Подсказка: загляните в ящик "Цвет" и найдите там пункт создать цветовой блок. Затем найдите в ящике "Математика" блок " Случайное целое число ". Цвета состоят из 3 чисел, RGB - красный, зеленый, синий, которые варьируются в диапазоне 0-255.
РЕФЛЕКСИЯ
Теперь, когда вы узнали немного больше о различных блоках кода, подумайте о решении вашего приложения:
ОБЗОР ОСНОВНЫХ ТЕРМИНОВ
- Пользовательский интерфейс - все в вашем приложении, с чем пользователь может взаимодействовать
- Конструктор - Окно, в котором вы можете добавлять компоненты в приложение и разрабатывать их внешний вид
- Редактор блоков - окно, в котором вы создаете блоки для своего приложения
- Событие - то, что происходит и вызывает выполнение кода
- Обработчик событий- блоки кода, которые сообщают вашему приложению, что делать при наступлении того или иного события
- Событийно-ориентированное программирование - программирование на основе событий, а не выполнение всего кода сверху вниз
- Функции - Блок кода, который выполняется и может быть выполнен несколько раз
ДОПОЛНИТЕЛЬНЫЕ РЕСУРСЫ
Ознакомьтесь с другими учебными пособиями Дэйва Вулбера по App Inventor для начинающих на сайте appinventor.org
