Курс “Создание мобильных приложений в App Inventor”

Автор: Ананьев Андрей

Урок 5. Знакомство с App Inventor

Основные понятия, рассматриваемые на уроке ● Интерфейс MIT App Inventor. ● Режимы “Дизайнер” и “Блоки”. ● Обработка событий. ● Тестирование и создание приложения.

Цели и ожидаемые результаты

Цели педагога Ожидаемые результаты учащихся

Познакомить учащихся с интерфейсом App Inventor

Понимать суть различных элементов интерфейса App Inventor, уметь настраивать внешний вид компонент приложения

Изучить возможности режимов “Дизайнер” и “Блоки”

уметь переключаться между режимами, понимать их взаимосвязь

Объяснить учащимся, как составляется программа в App Inventor

выполнять самостоятельные задания без помощи учителя

Научить тестировать приложение и компилировать apk-файл

проделают первый раз вместе с учителем и в дальнейшем смогут это делать самостоятельно

Структура и содержание урока. Формы и содержание учебной деятельности

Время (минуты)

Этапы урока*

Содержание занятий (по этапам)

ФОУД**

Деятельность педагога

Деятельность учащихся

1 мин (1-2)

Орг. момент

Вводная часть: приветствие и объявление темы

Ф Здоровается с детьми, озвучивает тему урока

Здороваются с учителем

4 мин (2-5)

Актул. знаний

Сравнение App Inventor и Scratch

Ф Объясняет материал

Слушают

5 мин (5-10)

Изуч. нового материала

Зачем нужно создавать мобильные приложения?

Ф Объясняет материал, задает вопросы

Отвечают на вопросы

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

5 мин (10-15)

Изуч. нового материала

Интерфейс App Inventor: запуск программы, подготовка к работе

Ф Показывает и объясняет

Слушают

5 мин (15-20)

Работа над проектом с учителем

Начинаем новый проект

Ф Показывает и объясняет

Слушают, делают по образцу

5 мин (20-25)

Изуч. нового материала

Интерфейс режима “Дизайнер”

Ф Показывает и объясняет

Слушают

5 мин (25-30)

Работа над проектом с учителем

Добавление компонентов в проект

Ф Показывает и объясняет

Слушают, делают по образцу

5 мин (30-35)

Работа над проектом с учителем

Добавление медиа-контента

Ф Показывает и объясняет

Слушают, делают по образцу

5 мин (35-40)

Самостоятельная работа над проектом

Добавление медиа-контента

И Формулирует задание

Самостоятельно выполняют задание

10 мин (40-50)

--- Физкультминутка или перерыв на чаепитие

--- --- ---

2 мин (50-52)

Работа над проектом с учителем

Настройка свойств компонента “Изображение”

Ф Показывает и объясняет

Слушают, делают по образцу

3 мин (52-55)

Самостоятельная работа над проектом

Настройка свойств компонента “Изображение”

И Формулирует задание

Самостоятельно выполняют задание

5 мин (55-60)

Изуч. нового материала

Интерфейс режима “Блоки”

Ф Показывает и объясняет

Слушают

5 мин (60-65)

Задание на

Scratch-аналоги И Формулирует задание

Самостоятельно выполняют задание

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

рабочих листках

5 мин (65-70)

Работа над проектом с учителем

Обработка события “Встряхнуть телефон”

Ф Показывает и объясняет, задает вопросы

Слушают, отвечают на вопросы

5 мин (70-75)

Самостоятельная работа над проектом

Обработка события “Встряхнуть телефон”

И Формулирует задание

Самостоятельно выполняют задание

5 мин (75-80)

Изуч. нового материала

Тестирование приложения на мобильном устройстве

Ф Показывает и объясняет

Слушают, делают по образцу

5 мин (80-85)

Изуч. нового материала

Создание apk-файла приложения

Ф Показывает и объясняет

Слушают, делают по образцу

Самостоятельная работа над проектом

Дополнительные задания по доработке проекта

И Формулирует задание

Самостоятельно выполняют задание

5 мин (85-90)

Рефлексия

Подведение итогов Ф Озвучивает обобщенные наблюдения за процессом выполнения заданий детьми

Делятся своими впечатлениями и затруднениями

* Этапы урока: Организационный момент; Актуализация знаний и субъективного опыта учащихся; Изучение нового материала; Закрепление изученного материала; Работа над проектом с учителем; Самостоятельная работа над проектом; Подведение итогов учебного занятия, рефлексия. ** ФОУД – форма организации учебной деятельности обучающихся (Ф – фронтальная, И – индивидуальная, П – парная, Г – групповая).

Материально-техническое и учебно-методическое обеспечение

Оборудование:

Для каждого ученика: Для педагога:

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

● Компьютер с подключенной мышкой.

● Установленный браузер.

● Компьютер с установленным браузером.

● Проектор и экран для проецирования.

● Маркерная доска или флип-чат.

Материалы ● Изображения сторон кубика (ссылка). ● Aia-файл проекта “Игральная кость” (ссылка). ● Apk-файл проекта “Игральная кость” (ссылка).

Электронные образовательные ресурсы ● для проведения урока не требуется ЭОР.

Литература, дополнительные интернет-ресурсы ● Краткий обзор MIT App Inventor от Академии Мобильных Приложений. ● Интернет тренды 2017 - статистика использования мобильных устройств.

Методические рекомендации

1. Вводная часть: приветствие и объявление темы Здравствуйте, ребята. Сегодня мы наконец-то начинаем знакомиться с

программой App Inventor. MIT App Inventor - это среда программирования, разработанная учеными из

Массачусетского Технологического Института (MIT). Предназначена она для разработки приложений для мобильных устройств (смартфонов и планшетных компьютеров), работающих на операционной системе Android.

Язык этой среды очень прост, поскольку он с самого начала создавался для школьников. Для программирования на этом языке, не нужно писать строчки кода, как это происходит во “взрослых” языках программирования. Для создания приложения в MIT App Inventor необходимо просто перетаскивать блоки, собирая их в программу, как пазлы. Собственно также, как вы это делали в Scratch.

Сравнение App Inventor и Scratch

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

Scratch App Inventor

Программирование Визуальное, блочное Визуальное, блочное

Создаваемая программа Выполняется в среде Scratch

Компилируется и загружается в android-устройство

Исполнитель Спрайт на сцене или подключенный робот

Любые элементы интерфейса приложения: изображения, кнопки, текст...

Можно рассказать учащимся об основных сходствах и различиях,

опираясь на эту таблицу.

2. Зачем нужно создавать мобильные приложения? Но прежде, чем мы откроем саму программу и начнем ее изучать, ответьте на

вопросы. Зачем нужно писать программы для мобильных устройств? Что это нам дает?

Учащиеся могут вслух высказывать свои ответы. Например, они могут сказать, что сами чаще пользуются приложениями и играми, созданными для мобильных устройств, чем для персонального компьютера. Да, сейчас мир становится все более “мобильным”. При помощи гаджетов люди

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

Вот некоторая статистика:

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

Использование мобильных платформ и компьютеров

В 2015 году во всем мире пользователей смартфонов стало больше, чем

пользователей компьютеров. Использование мобильных платформ постоянно растет. Это означает, что больше людей проводит время с мобильным устройством, а не за компьютером.

Время, проведенное за экраном телевизора, компьютера, телефона

На графиках видно, как стремительно растет доля времени, проведенного у

экрана телефона.

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

Можно не показывать детям сами графики, а рассказать им своими

словами.

Знаете, чем по статистике чаще всего пользуются владельцы мобильных телефонов?

● Больше половины (53%) используют скачанные приложения. ● Приблизительно столько же (52%) через мобильный телефон заходят на

сайты. ● Более трети людей (38%) используют социальные сети со своего

мобильного телефона. ● Чуть меньше людей играют в игры (34%). ● Примерно три четверти пользователей общаются через мобильные

телефоны (помимо звонков): это могут быть SMS, приложение социальной сети, мессенджер.

Более 50% пользователей смартфонов в нашей стране выбирают

операционную систему Android. Так что, созданные вами приложения могут быть полезны многим людям.

3. Интерфейс App Inventor Ну и наконец, приступим… Так как App Inventor - это облачная среда

программирования, т.е. располагается на сервере в интернете, то нам необходимо запустить браузер и набрать в адресной сроке: http://ai2.appinventor.mit.edu/?locale=ru

Чтобы учащиеся могли сразу начать новый проект и познакомиться с

интерфейсом программы, педагогу необходимо заранее зарегистрироваться в системе, введя имя google-аккаунта (подробнее см. Краткий обзор MIT App

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

Inventor от Академии Мобильных Приложений). Хотя возможно и другое решение, когда ребята сами себе создают аккаунты и логинятся через них.

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

Потом, после нажатия на кнопку “Продолжить использование” такое:

Здесь нужно нажать “Продолжить со множественными сессиями”. Все будет работать. Главное правило, которое необходимо соблюдать педагогу - не открывать один и тот же проект на разных компьютерах. Именно поэтому я рекомендую использовать уникальные имена проектов, состоящие из названия проекта и номера компьютера с которого происходит с ним работа (Кстати, может быть, удобнее будет, если в названии проекта указывать сначала номер, а потом название).

После входа в MIT App Inventor вы попадаете на страницу, где отображается

список наших проектов. Все созданные проекты сохраняются в папке Мои проекты.

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

1. Начинаем новый проект Давайте начнем новый проект, нажав на кнопку в левом верхнем углу экрана

“Начать новый проект…” Программа нас попросит ввести имя проекта. При наименовании проекта нужно соблюдать следующие правила:

● Имя должно быть в английской раскладке. ● Названия проектов не должны повторяться, так как мы все будем

работать над проектами из-под одного аккаунта.

Пусть проект называется “Cube”, напишите, пожалуйста, его название следующим образом “Cube_##”, где ## - номер компьютера, за которым вы работаете. Тогда имена всех выполняемых проектов не будут совпадать, и каждый из вас при желании сможет в дальнейшем продолжить с ним работу.

После успешного создания проекта, его название появится в списке проектов. Кликните по нему, пожалуйста, и откроется проект.

2. Интерфейс режима “Дизайнер” Разработка мобильного приложения в MIT App Inventor происходит в 2 этапа.

Первый этап - проектирование интерфейса пользователя “Как это будет выглядеть”, второй - программирование компонент приложения “Как они будут себя вести”.

Эти два процесса реализуются в отдельных окнах, по сути это два разных режима работы в среде с MIT App Inventor. Для переключения между ними используются кнопки “Дизайнер” и “Блоки” в правой верхней части экрана.

Уточним одно важное понятие, понимание которого необходимо для

дальнейшей работы. Это понятие “компоненты”. Может быть кто-то из вас может привести примеры компонентов? Или пояснить, что такое компоненты?

Учащиеся могут предложить различные варианты ответа на

вопросы. Вполне возможны верные примеры, иллюстрирующие сущность понятия. Педагогу необходимо обязательно обобщить ответы учащихся.

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

Компонентами называются функциональные элементы приложения, такие как

кнопки, изображения, текст, поля для ввода текста, дат, интерфейсы для подключения к разным датчикам вашего Android-устройства — акселерометр, GPS, базы данных и др. Некоторые компоненты являются частью графического дизайна, например, кнопки, а некоторые — невидимы на экране устройства, например, таймер, сенсоры или видеоплейер.

Режим “Дизайнер”

Режим “Дизайнер” - режим в котором создается интерфейс (“внешний вид”)

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

Интерфейс для разработки дизайна проекта состоит из следующих основных элементов:

● Палитра включает наборы (группы) компонентов будущего приложения. ● Просмотр — экран вашего приложения. Точнее один из экранов. В

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

● Компоненты — здесь расположен список компонентов, которые вы уже используете в своем проекте.

● Свойства — в этой части экрана устанавливаются свойства компонентов вашего приложения, например: цвет, размер шрифта, источники изображений и звуков, надписи, первоначальное значение и другие.

● Медиа — список используемых медиа файлов (изображений, видео-, аудио-роликов и т.п.)

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

3. Добавление компонентов в проект Давайте добавим в наш проект компонент “Изображение”. Для этого из группы

компонентов “Интерфейс пользователя” перетащите его на экран “Просмотра”. Также давайте добавим компонент “СенсорАкселерометра”. Он находится в группе “Сенсоры”. Вы заметили, наверное, что “изображение” появилось на экране просмотра, а “СесорАкселерометра1” в списке Невидимых компонентов под ним.

Названия наших компонентов появилось также и в столбике “Компоненты”. Давайте переименуем компонент “Изображение”. При именовании компонентов рекомендуется воспользоваться следующим правилом “Имя компонента” = “ Название компонента”+ “Действие/ Функция”, которое он выполняет в приложении: КнопкаНазад, КнопкаДалее, ИзображениеФон и пр. Такое именование компонентов позволяет легко ориентироваться при программировании для них действий или событий.

Мы с вами сегодня, изучая App Inventor, будем создавать программу, имитирующую подбрасывание игральной кости. Пусть имя компонента “Изображение” будет называться “СторонаКубика”.

4. Добавление медиа-контента В любой проект App Inventor можно добавить медиа файлы: изображения,

аудио или видео файлы. Нам для проекта понадобятся изображения разных сторон кубика. Давайте вместе добавим первую сторону, а затем вы самостоятельно добавите остальные 5.

У элемента интерфейса “Медиа” есть кнопка “Загрузить файл”. Нажмите ее. В появившемся окошке нажмите кнопку “Выбрать файл”, после выбора подтвердите свое действие, нажав кнопку “ОК”.

Задание. Загрузите, пожалуйста, таким образом все 6 файлов изображений - 6 сторон кубика.

5. Настройка свойств компонента “Изображение” Давайте теперь обратим внимание на правую часть интерфейса программы -

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

● Выберите компонент “СторонаКубика”. Укажите для него в свойствах “Изображение”, например, файл “1.png”.

● Выберите компонент “Screen1”. Установите его свойства “ВыровнятьПоВертикали” и “ВыровнятьПоГоризонтали” в “Центр”.

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

Задание. Поизучайте свойства экрана. Установите различные значения, например таких свойств, как: фон, заголовок, TitleVisible… У “СтороныКубика” можно поменять “ширину” и “высоту”.

6. Интерфейс режима “Блоки” Режим “Блоки” используется для программирования поведения вашего

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

В элементе “Блоки” используются три группы Блоков:

● Встроенные блоки. Данная группа блоков позволяет задавать определенные действия/функции созданным компонентам.

○ Управление — содержит общие для всех компонент блоки ветвления, цикла, работы с несколькими экранами и пр.

○ Логика — содержит блоки для использования логических функций в приложении

○ Математика - содержит набор математических блоков ○ Текст - включает набор текстовых блоков ○ Массивы - содержит блоки для работы с массивами/списками ○ Цвета - определяет блоки по работе с цветами ○ Переменные - блоки позволяющие определять и устанавливать

значение глобальных и локальных переменных ○ Процедуры - содержит блоки, позволяющие определять процедуры и

функции, с параметрами или без них, внутри приложения

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

● Блоки действий/событий для компонентов вашего приложения (Группа Screen1). Задает действия компонентам конкретного приложения. При выделении нужного компонента, отображаются доступные для него блоки.

● Любой компонент. Данная группа блоков позволяет организовать и управлять в приложении большим количеством однотипных компонентов, например, 20 спрайтами или 40 кнопками.

Задание на рабочих листках: Глядя на подгруппы группы “Встроенные блоки”, попробуйте найти каждой подгруппе аналоги в Scratch.

7. Обработка события “Встряхнуть телефон” В MIT App Inventor программа создается также, как и в Scratch - путем

перетаскивания блоков в поле “Просмотр”. Только здесь нет “Зеленого флажка”, который мог бы стартовать программу. Вместо флажка у всех компонент приложения предусмотрены команды обработки различных событий, начинающиеся со слова “Когда”. Кликните, например, на “СенсорАкселерометра1” - на экране появится список команд на полупрозрачном фоне, сверху которого две команды обработки событий. Внутри этих команд есть полость для помещения других команд и такие команды, как и команды группы “События” в Scratch - коричневого цвета.

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

“Схватите” левой кнопкой мыши и “перетащите” команду “Когда СенсорАкселерометра1.Вибрация” в поле “Просмотр”.

Теперь пора несколько отвлечься от изучения App Inventor и сформулировать ,более конкретно задачи выполняемого проекта. Имитация подбрасывания игральной кости будет происходить при встряхивании телефона. Сама имитация будет заключаться в том, что мы напишем небольшую программу, которая…

Вопрос: Каким образом в программе мы можем имитировать подбрасывание

игральной кости? (Случайным образом менять изображение на экране телефона, когда пользователь его встряхнул).

В режиме “Блоки” в App Inventor можно получать доступ ко всем свойствам

компонентов. Клинкув, например, на компонент “СторонаКубика”, вы можете увидеть много команд вида “Присвоить СторонаКубика.” (Это темно-зеленые блоки). После “.” перечисляются свойства компонента. Найдите, пожалуйста то свойство, которое нам необходимо (“.Изображение”) и добавьте этот блок в программу.

Вы, наверное, заметили,что справа у команды “Присвоить…” есть углубление для пристыковки других команд. В данном случае нам необходимо присвоить свойству “.Изображение” значение имени файла. Имена наших файлов специально сделаны

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

максимально просто: “1.png”... “6.png”, т.е. если мы хотим отобразить случайную сторону кубика, нам нужно…

Вопрос: что нам нужно сделать, чтобы присвоить компоненту случайное

изображение? (Взять случайное число от 1 до 6 и слить его со строкой “.png”) Если бы это был Scratch, то вы бы без затруднения справились с этой задачей.

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

Важно, чтобы ребята попробовали самостоятельно разобраться

дальнейшем им будет легче справляться с более трудными задачами. Они встретят команду “Соединить” (аналог команды “Слить” из Scratch) в группе встроенных блоков “Текст”. Команду “Случайное целое в диапазоне от…” найдут в группе “Математика”. Обратите внимание, что в команде “Соединить” есть пиктограмма шестеренки.

Нажмите на нее. При помощи таких “Шестеренок” можно настраивать функционал команд. В данном случае, можно добавить в команду элементов, которые она соединит.

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

8. Тестирование приложения на мобильном устройстве В зависимости от используемого способа тестирования приложения,

покажите учащимся как это делается. Все три возможные способы тестирования описаны в этой статье.

9. Создание apk-файла приложения Создать в MIT App Inventor установочный apk-файл ничуть не сложнее, чем

тестировать приложение. Давайте сделаем это. Выберите в меню в верхней части экрана пункт “Построить”. В выпадающем подменю всего два пункта. Первый предлагает нам оставить итоговый файл с программой на сервере с тем, чтобы при помощи “MIT AI2 Companion” его скачать и установить сразу на мобильное устройство. Второй пункт загрузит apk-файл на компьютер. Выберем первый пункт. Программа

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

скомпилирует наше приложение и отобразит штрихкод для скачивания. Для чтения этого кода можем воспользоваться “MIT AI2 Companion” на мобильном устройстве.

10. Дополнительные задания В оставшееся время предложите учащимся самостоятельно исследовать

возможности App Inventor и усовершенствовать проект. Вот примеры нескольких интересных задач:

● Задайте первоначальное изображение случайной стороны при запуске приложения (“Когда Screen1.Инициализировать”).

● Задайте случайный угол поворота кубика после каждого "подбрасывания". ● Создайте программу подбрасывания сразу 2-х кубиков при встряхивании.

4. Подведение итогов Время нашего урока подходит к концу. Пожалуйста, сохраняйте ваши проекты и

выключайте компьютеры. Будем подводить итоги.

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

● Что нового вы сегодня узнали? ● Чему научились за этот урок? ● Что было особенно сложным? ● Что показалось самым интересным?

Очень важно, чтобы учащиеся не разбегались сразу после того, как

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

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф

Рабочий листок ученика

Перед вами на экране - режим “Блоки” App Inventor. Глядя на подгруппы группы “Встроенные блоки”, попробуйте найти каждой подгруппе аналоги в Scratch. Напишите их здесь:

DOC-2699940506

2699

9405

06

Лице

нзиа

т: Д

емон

стра

цион

ный

ком

плек

т уч

им-н

овом

у.рф