Как создать приложение в MIT APP


Чтобы посмотреть этот PDF файл с форматированием и разметкой, скачайте его и откройте на своем компьютере.

Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


1



Программирование мобильных приложений

в

MIT App Inventor



Практикум





Авторы:

нивенец Марина Александровна

Ярмахов Борис Борисович












Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


2


рглавление

елава 1. Введение. уреда MIT App inventor. кнтерфейс пользователя

1.1 рписание интерфейса пользов
ателя

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

1.3 Экраны приложения

1.4 тежим “Блоки”

1.5 Функции режима

“Блоки”

1.6 Загрузка и установка приложения на устройство

1.6.1 Если у вас есть мобильное устройство с OS Android

и Wi
-
Fi

соединение

1.6.2 Если

у

Вас

отсутствует

мобильное

устройство
с

OS

Android?

1.6.3 Если вы используете USB кабель

1.7 Загрузка .apk

файла на мобильное устройство

1.8 Компоненты приложения

1.9 тазрешение экрана

1.9 Первое мобильное приложение

елава 2. Практические приемы создания приложений

2.1 Кнопки

Пример 2.1.1

Приложение “Загадка”

Пример 2.1.2

Приложение

“SoundBoard”

Пример 2.1.3.

Приложение “ртгадай
-
ка”

Пример 2.1.4

Приложение “Виртуальный кот”

2.2 Приложения с несколькими экранами

Пример 2.2.1 Приложение “указочные превращения”

2
.
3

рбмен данными между экранами

Пример 2.
3
.
1


Приложение “ук
азочные перемещения”

Пример 2.
3
.
2

Приложение “чамелеон”

2.4 уписки

Пример 2.4.1 уоздание собственного цвета

Пример 2.4.2

Приложение “Фонарик”

Пример 2.4.3

Приложение “Записная книжка”

Пример 2.4.4

Приложение “улайд
-
шоу”

2.5 тисование

Пример 2.5.1

Прил
ожение “тисование”

Пример 2.5.2 . Приложение “Пишем на холсте”

Пример 2.5.3 . Приложение“ Конфетти”

2.6 Анимация

Пример 2.6.1

Приложение “кгра в мяч”

Пример 2.6.2. Приложение”

Управляем движением объекта”

2.7

Медиа

Пример 2.7.1

Приложение

“таспознаван
ие речи”

Пример 2.7.2

Приложение “кспорченный телефон”

Пример 2.7.3

Приложение “Переводчик”

Пример 2.7.4 Приложение “Видеоплеер”

Пример 2.7.5 Приложение “Mp3 плеер”

Пример 2.7.5

Приложение “Фотокамера”

2.8 рбщение


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


3


Пример 2.8.1

Приложение

“Sharing”

2.9

уенсоры

Пример 2.9.1

Приложение “еде я?”

Пример 2.9.2 Приложение “Компас”

2.10 Математические функции

Пример 2.10.1. Приложение “Тренажер”

Пример 2.10.2. Приложение “Конвертер систем счисления”

елава 3. ррганизация проектной деятельности

3.1 уовместная р
азработка приложений

3.2 текомендации к созданию итогового проекта
-

приложения




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


4



елава 1. Введение. уреда MIT App inventor. кнтерфейс
пользователя


MIT App Inventor (
http://ai2.appinventor.mit.edu/
)
-

облачн
ая среда визуальной разработки
приложений для платформы OS Android, работа в которой не требует знания языка
программирования Java и Android SDK, достаточно знания элементарных основ
алгоритмизации. Для работы

в

MIT App Inventor необходимо наличие Google

или Google Apps

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



1.1 рписание интерфейса пользователя


После входа в MIT App Inventor пользователь

попадает на страницу, где отображается

с
писок
его

проектов.

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



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


5





Вновь создаваемое приложение в среде

MIT App I
nventor это новый проект (меню
Проекты
-


Начать новый проект). Нажатие кнопки “Удалить проект”
-

удаляет
созданный проект.

Перех
од к списку проектов из окна разработки по по ссылке
“Проекты/Мои проекты».

тазработка

мобильного приложения в MIT App Inventor
http://ai2.appinventor.mit.edu/

происходит в 2 этапа. Первый этап
-


проектирован
ие интерфейса пользователя

“Как это будет
выглядеть”, второй
-


программирование компонент приложения “Как они будут себя вести”.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


6




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


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


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

режим в котором создается

интерфейс (“внешний вид”)
приложения” . Данный режим

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

различных
компонент приложения: кнопок, текстовых

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

приложения.


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




Палитра


включает наборы (группы)

компонент

будущего приложения.





Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


7


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


акселерометр, GPS, базы данных и др.

Некоторые
компоненты являются частью графического дизайна, например, к
нопки, а некоторые


невидимы на экране устройства, например, таймер, сенсоры

или видеоплейер.


Просмотр



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


его функциональная часть.


Компоненты



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


кменование

компонент
ов

приложения


При именовании

компонент
ов


рекомендуется

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

Такое именование компонент

п
озволяет легко ориентироваться при
программировании

для них действий или событий




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


8


увойства



в этой части экрана

устанавливаются

свойства компонент вашего приложения,
например: цвет, размер шрифта, источники изображений и звуков,

надписи, первоначал
ьное
значение и другие.

Медиа



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




р размерах используемых файлов


Мобильное приложение
-

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

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

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

но и займет достаточно много памяти на самом мобильном
устройстве
.

1.3 Экраны приложения

Проект приложение может состоять из

множества экранов. Для работы с экранам «Screen»,

в
окне разработки есть

кнопки добавления экрана


«Добавить Экран и удаления экрана


“Удалить Экран”. Запуск приложения всегда начинается со стартового экрана, дизайн которого
может включать набор компо
нент

для перехода на другие экраны.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


9



В среде

MIT App

Inventor количество экранов не должно превышать 10. При
создании 11 экрана выдается предупреждение

о превышении

допустимого
количества экранов.

1.4 тежим “Блоки”

тежим “Блоки” используется

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




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


рсновные группы

Блоков используемых при созда
нии приложений:


1.

Встроенные блоки


Данная группа блоков позволяет

задавать

определенные действия/функции

созданным
компонентам.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


10






Управление


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



ногика


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



Математика
-

содержит набор математических блоков



Текст

-

включает набор текстовых блоков



Массивы

-

содержит блоки для работы с массивами/списками



Цвета

-

определяет блоки по работе с цветами



Перемен
ные

-

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



Процедуры

-

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




Блоки действий/событий для

компонентов ваше
го приложения

(еруппа

Screen
1)
. Задает действия компонентам конкретного приложения. При выделении нужного
компонента, отображаются доступные для него блоки.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


11


(





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




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


12



Конструкции из блоков собираются в поле Просмотр.




1.5 Функции режима

“Блоки”


При работе в режиме

“Блоки” часто используются следующие его функции:




увернуть/тазвернуть б
лок.


Функция

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




После выполнения функции “увернуть блок”, конструкция блоков принимает следующий вид:


Чтобы развернуть блок, необходимо

щелкнуть по конструкции правой кнопкой мыши и
выбрать меню “тазвернуть блок”




Добавить комментарий


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


13


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




ртключить/Включить

блок


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






Удалить
блоки


Блоки удаляются без перетаскивания в

корзину




Выполнить

Функция

позволяет запустить к исполнению любую часть кода и используется при
тестировании программ. В этом случае необходимо иметь подключение к эмулятору.




Копирование блоков



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


14


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

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






Копировать

блок в рюкзак






Копировать все

блоки в рюкзак



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


15




1.6 Загрузка и установка при
ложения на устройство


тазработка приложения происходит в облачной среде MIT App Inventor.

Тестирование и отладка происходит на мобильном устройстве.

текомендуется для разработки использовать настольный ПК или ноутбук, а для
отладки и тестирования
-
моби
льное устройство с предустановленным

приложением MIT App
Inventor Companion, которое позволяет считывать

QR код созданного вами мобильного
приложения для установки его на ваше устройство.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


16





упособы загрузки приложения на устройство:




в исходном коде

(файл c

расширением .aia)

ксходный код в формате .aia позволяет редактировать приложение. ксходный код
генерируется со страницы проекта

меню Проекты / Экспортировать выбранные проекты (.aia)

на Мой компьютер.




в виде исполняемого файла

( файл c

расшир
ением .apk)

Файл

приложения

.apk

генерируется в

App Inventor в меню

Построить
-

Приложение
(сохранить .apk на

компьютер). Файл .apk

является исполняемым приложением, которое
работает на устройстве.




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


17





в виде

QR
-

кода приложения

еенерируется

с по
мощью команды меню

Построить
-

Приложение (создать QR код для
скачивания

.apk).




Для

считывания

QR кода

и установки приложения на мобильное устройство необходимо
установить приложение MIT AI2 Companion App

из

Google Play.

на мобильное
устройст
во.

При установке

ваших приложений

.apk на мобильное устройство, необходимо
разрешить установку приложений

из неизвестных источников (Настройки
-
Приложения
-
Неизвестные источники).


1.6.1 Если у вас есть мобильное устройство с OS Android

и Wi
-
Fi

соеди
нение


1. На мобильном устройстве загрузить и установить из магазина Google Play

приложение

MIT
AI2 Companion App
.


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


18




2. Подсоединить компьютер на котором вы работаете и мобильное устройство к сети с
доступом к интернет, например, через Wi
-
Fi.

3. На компь
ютере открыть проект, который нужно протестировать, и

выбрать в меню

Помощник
-
>Помощник AI.




4. На экране компьютера появится QR код вашего приложения.


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


19




5 Запустить

MIT Ai2 Companion

на мобильном

устройстве и нажать

Scan QR

code
. Через
несколь
ко секунд приложение появится на вашем устройстве.



1.6.2 Если

у

Вас

отсутствует

мобильное

устройство с

OS

Android?


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


20


1. Загрузить и установить специальное программное обеспечение

App Inventor Setup
Software



Для Mac OS X
( англ.
Instructions for Mac OS X
)



Для


ру


Windows

(
англ
.
Instr
uctions for Windows
)



Для

Linux

(
англ
.
Instructions for GNU/Linux
)


2.
Запустить

aiSt
arter (
только

для

Windows & GNU/Linux)




aiStarter будет

успешно запущен,

если отображается

окно следующего вида:





Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


21


3. Перейти в окно проекта

в MiT App Inventor и выбрать меню
Подключиться
-
> Эмулятор.



ркно эмулятора имеет

следующий

вид:



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


22



1.
6.3 Если вы используете USB кабель

1. Подготовить устройство для использования USB (Включить отладку по

USB).


На Android устройстве, перейти в меню

Настройки системы
-
> Для разработчиков
, и
включить пункт меню ртладка USB.




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


23



На большинстве устройств, р
аботающих под управлением Android 3.2 или старше, выбрать

опцию в

Настройки
-
> Приложения
-
> тазработка
.

На Android 4.0 и новее, это в
Настройки
-
> Функции для разработчиков
.

На
Android 4.2 и старше, Функция для разработчиков по умолчанию скрыта. Чтобы
вкл
ючить данную функцию, перейдите в меню Настройки
-
>р телефоне и нажмите
номер сборки семь раз. Далее необходимо вернуться к предыдущему экрану,
чтобы найти меню Для разработчиков, в том числе "USB Debugging".

2. Подключить мобильное устройство к компьютеру

Подключить Android устройство к компьютеру с помощью кабеля USB, убедиться, что
устройство подключается как "запоминающее устройство",а не как "медиа
-
устройство".



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


24


На Android 4.2.2 и старше, при первом подключении мобильного устройства к компьютеру
появит
ся экран с сообщением
тазрешить USB
-
отладку
,

для

подключения его к компьютеру
нажмите "рК".

3. Проверить соединение

Убедитесь в том, что ваш компьютер подключен к мобильному устройству.


4 . укопировать файл .APK, сохраненный на вашем компьютере, в папк
у на мобильном
устройстве.

1.7 Загрузка .apk

файла на мобильное устройство


Загруженный для установки .apk файл приложения

хранится на мобильном устройстве в
каталоге Download.

Доступ к нему можно получить с помощью приложения “файловый
менеджер”.


Для
разных OS Andriod версии одного и того же приложения могут перезаписываться

в
различных

вариантах. Новое приложение может быть установлено на место старого, или в
виде новой версии

c модифицированными именем.

текомендуется

периодически

в каталоге

D
ownload удалять старые версии приложения.




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


25


1.8 Компоненты приложения




Компоненты

приложения размещаются

на экране в режиме “Дизайн”. Все компоненты
разделены на несколько групп.




кнтерфейс пользователя

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




тасположение

-

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

MIT App inventor нет форматирования, позволяющего
задавать интервалы между определенными компонентами, поэтому для макета и
задания расстояния и

пространства между

элементами используются компоненты

группы расположения с определенными заданными

свойствами, например высота или
ширина.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


26




Медиа
-

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

устройства, микрофоны и наушники, камеру,

звуки и аудиофайлы и
другое




тисование и анимация

-

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




чранилище

-

компоненты, позволяющие

передавать

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




уенсоры

-

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




рбщение

-

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




Каналы
-

компоненты,

позво
ляющие

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

веб
-
страницу.




LEGO® MINDSTORMS®
-


компоненты обеспечивающие управление

LEGO®
MINDSTORMS® NXT с использован
ием

Bluetooth.


1.9 тазрешение экрана


При работе в среде MIT App Inventor

штатное разрешение

экрана

320х480 пикселей.

уоздание приложения в ней требует установки связи

положения и размера каждого
компонента с разрешением

экрана.



тазличные

мобил
ьные устройства имеют разные разрешения экранов.

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

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

в процентах

от размера
экрана.




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


27


1.9 Первое мобильное приложение

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

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


кзображения для создания

приложения

(укачать)


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

MIT AI2 Companion.


Алгоритм работы:

1.

уоздать Google аккаунт, лучший вариант
Google Apps!!

или использовать созданный
ранее.


2.

Войти

в среду визуального программирования MIT App Inventor по ссылке
http://ai2.appinventor.mit.edu/




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


28


3. Выбрать “тазрешить”



4.
В

окне

“Terms of Service
выбрать
” I accept the terms of service”






Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


29


5.
В

окне

“Welcome to App Inventor 2”
выбрать

“Continue”


6.Выбрать язык “English
-
> тусский”


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


30




7. уоздать новый проект “Начать новый проект
-
>CubeSensor”


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


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


31




9. Перенести

компонент кзображение в окно экрана мобильного устройства, выбрать
кзображение
-
>Загрузить в свойствах компонента.


10. Загрузить

графический файл для к
омпонента кзображение.


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


32




11. Загрузить последовательно 5 графических файлов (сторон кубика)

с помощью

функции

”Загрузить файл”.


12. Переименовать компонент кзображение1 в уторонаКубика


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


33




13. Выбрать в группе

уенсоры
-
> уенсорАкселерометра и перенес
ти

его в область
экрана мобильного устройства


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


34



14. Выбрать компонент
Screen1

и установить

его свойства
ВыровнятьПогоризонтали,
ВыровнятьпоВертикали, рриентацияЭкрана



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


35


15. Перейти в режим Блоки в меню справа, выбрать
уенсорАкселерометра1

и
перетащите бл
ок


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

вибрации.


16. Выбрать

компонент
уторонаКубика1

и перенести

блок
присвоить.уторонаКубика1.изображение
в поле блоков п
рограммы. Данный блок
выводит изображение графического файла на экран мобильного устройства.



17. Для изображений сторон кубика (файлы 1.png
-
6.png)

имя файла изображения
формируется

с помощью функции “соединить”:

случайное число

в диапазоне

от 1 до
6

( у нас 6 сторон кубика), плюс расширение графического файла .png.


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


36




18. Выбрать Математика
-
>улучайное целое от 1 до 100 и установить значения
диапазона

от 1 до 6.



19. Добавить блок
, и вписать туда

текст “.png” для последующего
соединения со слу
чайным значением от 1 до 6.



20. рформить приложение и установить иконку в свойствах компонента

Screen1.


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


37




21. Программа готова, необходимо загрузить ее на мобильное устройство для этого
нажать Построить
-
>Приложение (уоздать QR
-
код для скачивания .apk)


22. Получить QR
-
код программы


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


38



23.

Запустить на мобильном устройстве MIT AI2 Companion App и просканировать

QR
-
код приложения


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


39




24. Установить приложение на

мобильное устройство.


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


40




24.

После завершения установки,

открыть приложение при помощи и
конки на
рабочем столе или в меню «Все приложения».





Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


41



елава 2. Практические приемы создания приложений


рбъекты

(компоненты) приложения

могут реагировать на определенные события: нажатие
на какую
-
либо клавишу, щелчок мышью по объекту, прикосновение к э
крану

или достижение
края экрана

и т.п.


После определенного

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

рсновным средством для обработки события являются так называемые блоки заголовков:
Когда кнопка… Например Когда Кнопка Шелчок (событие)
-

проигры
вается Звук (действие)


Некоторые события могут не зависеть от пользователя, к ним относятся:

o

уобытия таймера,

o

уобытия датчика, например, координаты GPS

o

уобытия на устройство, например

входящие сообщения.

o

уобытия связанные с анимацией объектов, например
достигнут край или
происходит наложение объектов.

o

Анимация события, такие как два объекта столкновения

o

Веб
-
события, связанные с данными поступающими

из сети

2.1 Кнопки


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


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




Щелчок



В фокусе



Потерян Фокус



Долгое нажатие



Провести вниз



Провести вверх




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


42



Примеры приложений

кспользуемые компоненты



Табличн
ое расположение



кзображения



Звуки



Надпись




Пример 2.1.1

Приложение “Загадка”

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



Пример 2.1.2

Приложение

“SoundBoard”


рписание: Приложение, в котором, при нажатии на с
оответствующие изображения,
проигрываются соответствующие звуки.

Примеры приложений “Зоопарк”, “рркестр”, “Колокольная галерея”


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


43





Пример 2.1.3.

Приложение “ртгадай
-
ка”


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



рдним из интересных

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

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


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


44



Пример 2.
1.4

Приложение “Виртуальный кот”


рписание: Приложение, в

котором кот на экране издает звук когда его погладят.




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


45






2.2 Приложения с несколькими экранами


уоздание

приложения с несколькими экранами аналогично созданию нескольких
отдельных прилож
ений.




Количество создаваемых в приложении

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

в нем всего
один экран.



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



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



Навигация (переход)

между экранами организуется

с помощью кнопок или

с помощью
действий.



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



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

и
получения с других экранов

данных

только с использованием TinyDB, к примеру счет
игры, количество набранных баллов в тесте.


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


46



Копирование блоков между экранами


Некоторые приложения

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

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

Алгоритм копирования включает следующие шаги.

1.

Перейти в режим Блоки

2.

На экране, перенести нужный набор блоков в “тюкзак”




3
. Перейти на другой

экран.

4. Вновь нажать на тюкзак и вынести нужные блоки на экран




5. укопированные на другой экран блоки отображаются

со значками предупреждения


6. После настройки компонент и привязки их к конкретному экрану знаки предупреждения

будут удалены.


Пример 2.
2
.1 Приложение “указочные превращения”



рписание. Превращение одного изображения

в другое “Муха” в

“улона”,
“евидон” в “Комара”.




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


47


Компоненты приложения:



Экраны:

Screen1 и Scre
en 2



Надпись



Кнопка



кзображение






Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


48


2
.
3

рбмен данными между экранами


упособ 1. кспользование компонента
TinyDB


Компонент TinyDB используется внутри приложения для передачи данных между
экранами, В этом их отличие от глобальных переменных, которые сохраняются

в
пределах одног
о экрана,

пока приложение работает.




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



у помощью TinyDB вы не можете получить доступ к данным другого прило
жения.



После того как данные сохранены

в TinyDB

они останутся

там, пока TinyDB не будет

очищено.


упособ 2. кспользование

функции открытия экрана с начальным значением


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

На экране с которого нужно передать данные, необходимо

в этом блоке указать

нужные
переменные или значения:


На другом экране можно получить

их с помощью функции получи
ть начальное значение, к
примеру при инициализации экрана:






Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


49



Пример 2.
3
.
1


Приложение “указочные перемещения”



рписание. Приложение: котором происходит перемещение объекта с одного
экрана на другой. Переместить евидона с острова в палаты (возможны примеры
“Фокусник”

зайца и
з шляпы, стакан воды перенести и другие)



Компоненты приложения:



Экраны:

Screen1 и Screen2



Надписи



чолст



кзображениеупрайт



Кнопки



TinyDB


Пример 2.
3
.
2

Приложение “чамелеон”



рписание.

Приложение состоящее

из двух экранов, в котором

при

щелчке по

кнопке экран
закрашивается выбранным цветом,

и при переходе на второй экран приложение сохраняет
цвет первого экрана, и закрашивает второй экран этим же цветом.

Компоненты приложения:



Экраны:

Screen1 и Screen2



Надписи



Кнопки



TinyDB



Цвет



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


50




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


51




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


52




2.4 уписк
и


кспользование списков в приложении позволяет создавать

нестандартные

цвета для

компонент и их свойств,

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

телефонов друзе и многое другое.

В некоторых приложениях необход
имо вводить переменные.


Переменные




Переменные
-

это область памяти, в которой можно хранить какие

-
либо значения.



Переменная должна иметь свое уникальное

имя, в приложении
на
одном экране

не может быть двух переменных с одинаковыми именами .




Пере
менная в приложении определяется с помощью блока
книциализировать.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


53






кнформация хранящаяся в переменной может изменяться.


нокальная переменная
-


это переменная, которая инициализирована

внутри функции или

она может быть аргументом, переданным

в фун
кцию или процедуру. Доступ к локальной
переменной

возможен только к этим переменным в конкретной функции или процедуре, в
которой

они были заданы

или передан в качестве аргумента.


елобальная переменная

-


это переменная, которая может быть доступна в
нескольких
областях программы внутри одного экрана. Внутри программы можно

получить текущее
значение переменной или задать новое

значение.



уписки

(в английской версии List или одномерные массивы) одни из самых
интересных компонент приложения.

уписк
и/ массивы

представляют собой

определенный тип структуры данных,
которые

используются во всех языках программирования.

Массивы можно использовать

для создания и управления

различными наборами значений /
компонент.







Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


54



кндекс


Положение элемента в с
писке называется его индексом. В Mit App Inventor, первый элемент в
списке имеет

индекс 1.

При создании приложений можно

ссылаться на конкретный элемент внутри списка, если
знаем, какой индекс имеет элемент в данном списке.




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


RGB (аббревиатура английских слов Red


красный,

Green
-

зелёный,

Blue синий)


аддитивная цветовая модель, как правило, описывающа
я способ синтеза цвета для цвето
-
воспроизведения.

При задании цвета в

App Inventor
-

может быть заданное четвертое
значение является дополнительным и представляет значение альфа или как насыщенный
цвет. По умолчанию альфа
-
значение по 100.


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


55






Пример 2.4
.1 уоздание собственного цвета


рписание. Приложение, в котором экран закрашен цветом, созданным самим пользователем.


Компоненты приложения:



Экран:

Screen1



Кнопка





Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


56



Пример 2.4.2

Приложение “Фонарик”


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



Компоненты приложения:



чолст



Кнопка



Пример 2.4.3

Приложение “Записная книжка”


рписание. Приложение в котором при вводе имени друга выводится его телефон (или
любимый фильм, или день рождения)



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


57


Компоненты пр
иложения:



Надпись



кзображение



Текст



Кнопка



Пример 2.4.4

Приложение “улайд
-
шоу”


рписание. Приложение , отображающее слайд шоу из изображение.


Компоненты приложения:



Надпись



кзображение



Кнопка



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


58









Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


59



2.5 тисование



рсновные тезисы:

чолст



Ком
понент чолст является

дополнительной

панелью приложения.



чолст

используется

для рисования на нем объектов. размещения. текста

и
анимации

изображений
-

спрайтов.



ртображение холста во весь экран требует установки параметров “Наполнить
родительский”

при задании свойств Высоты и Ширины чолста.



тазмещение дополнительных компонент на экране, кроме холста, требует установки
фиксированных

значений его ширины и высоты.



Местоположение объекта на холсте определяется

значениями

X, Y значение по
отношению к
левой верхней углу холста. X представляет горизонтальное положение
объекта, 0 является левой границей и ч увеличивается, когда

объект перемещается
вправо. У
-

вертикальная положение объекта,

0 верхняя граница и Y увеличивается,
когда

объект перемещается

вниз.




тисование круга/окружности на холсте требует указания параметров

координаты X

и Y
центра круга,

а также радиуса в пискелах и параметра заливки (ложь/истина).



тисование линий на холсте требует установки параметров

X и Y начала и конца линии.


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


60




Пр
и использовании случайных значений координат и в случае когда ширина холста

определяется параметром “Наполнить родительский! , рекомендуется использовать
функции определения ширины и высоту холста для устройства, как показано на
примере:




Пример 2.5.1

Приложение “тисование”


рписание. Приложение, позволяющее пользователю

рисовать на экране.


Компоненты



Кнопка



чолст





Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


61




Пример 2.5.2 . Приложение “Пишем на холсте”

рписание. Приложение, в котором при нажатии кнопке на холсте под углом отображается
т
екст “Меня нажали”





Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


62







Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


63



Пример 2.5.3 . Приложение“ Конфетти”

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






2.6 Анимация



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


64


рсновные тезисы




чолст является об
язательным компонентом приложений с анимированными объектами.




Для анимации предлагается два компонента
-

“Шар” и “кзображениеупрайта”.

Шар это
круг, для которого можно установить такие свойства

как радиус и цвет.
кзображениеупрайта
-

прямоугольное изобр
ажение, в

качестве источника которого,
может быть установлено любое загруженное изображение.



рба этих объекта должны

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



На холсте может
находиться множество компонент данного типа.



ууществуют определенные правила задания угла движения спрайта и определения края
холста. Числовые значения края устанавливаются на основании следующей

схемы:




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


65



Пример 2.6.1

Приложение “кгра в мяч”

рписание
.

Приложение в котором мяч двигается по экрану и при достижении края отскакивает
от него и движется в обратную сторону








Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


66





Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


67



Пример 2.6.2. Приложение”

Управляем движением объекта”


рписание, В приложении кзображение упрайта

на экране управляется д
вижением кнопок






Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


68




2.7

Медиа


рсновные тезисы




Медиа компоненты позволяют использовать встроенные в мобильные устройства фото и
видео ка меры, динамики,

микрофоны и пр.


Медиакомпоненты включают в себя:




Проигрыватель
-


предназначен для вос
произведения аудио/видеофайла или для
вибрации телефона.

Компонент Проигрыватель

невидимый,

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

компонент VideoPlayer.




Звук

-

применяется для воспроизвед
ения коротких звуковых файлов вроде звуковых
эффектов. рсобенность этого компонента


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




ТекстВтечь

-

компонент, позволяющий преобразовать Текст в
речь



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


69




ЯндексПереводчик
-

позволяет

переводить тексты с одного языка на другой. Для
работы с ними требуется подключение к сети кнтернет. Язык перевода задается в
формате

en
-

английский, ru
-

русский, es
-

испанский , fr
-


французский.




Видеоплеер

исполь
зуется для воспроизведения видеофайлов. Поддерживаются
форматы: Windows Media Video (wmv), 3GPP (3gp), MPEG
-
4 (mp4). Максимальный размер
файла


1 Мбайт

В отличие от компонентов Player и Sound, данный компонент
отображается на экране




Камера

-

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




таспознаватель течи

-


компонент, позволяющий преобразовать речь в текст.




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




Диктофон
-

позволяет записать звук.


Пример 2.7.1

Приложение

“таспознавание речи”

рписание приложения. Приложение проверяет строчку стихотворения, сверя
я ее с
оригиналом и выдает

сообщение “Правильно” или “Неправильно”.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


70






Пример 2.7.2

Приложение “кспорченный телефон”


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

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




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


71



Screen1









Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


72



Screen 2








Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


73


Пример 2.7.3

Приложение “Переводчик”

рписание:

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





Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


74







Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


75



Пример 2.7.4 Приложение “Вид
еоплеер”


рписание. Приложение, которое

проигрывает встроенный видеофайл.









Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


76



Пример 2.7.5 Приложение “Mp3 плеер”


рписание. Приложение проигрывает звуковой файл, и реагирует на кнопки плеера.









Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


77



Пример 2.7.5

Приложение “Фотокамера”


р
писание. Приложение позволяет сделать

фото с

встроенной

камеры

устройства и вывести

его на экран приложения.









Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


78


2.8 рбщение


рбщение
-

группа

компонент, отвечающая за
подключение к социальным сетям,
открытия доступа к ресурсам, доступ к конт
актам телефона и пр.




уборщикКонтактов

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




уборщик

Email
позволяет выбрать e
-
mail из списка контактов Android (до этого e
-
mail
контакта должен быть там сохранен). Предст
авляет собой текстовое поле, в который можно
ввести

или выбрать e
-
mail.




Позвонить


невидимый компонент, который применяется

для набора номера и
совершения звонка.




Поделиться


-

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




Номеро
-
набиратель


позволяет выбрать номер телефона.




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


79



Пример 2.8.1

Приложение

“Sharing”

рписание, Приложение, которое делает фото с камеры вашего мобильного устройства и
публи
кует его в сети.









Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


80



2.9 уенсоры


рсновные тезисы



уенсоры
-

это микроустройства внутри смартфона

или планшета, которые делают его умным,

и связывают с внешним миром.


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




Акселер
ометр (G
-
сенсор)


позволяет отследить ускорение, которое придается
устройству, определяет ускорение устройства и используется в

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

в
пространстве, например, тряся е
го.



Датчик приближения
-

позволяет определить приближение объекта без физического
контакта с ним.



Датчик освещенности позволяет определить

степень наружного освещения и
соответственно настроить яркость экрана.



еироскоп

определяет положение в пространст
ве и позволяет отслеживать поворотом
устройства и скорость поворота




Магнитный компас (магнитометр) отслеживает ориентацию устройства в пространстве
относительно магнитных полюсов Земли



уенсор ориентации обеспечивает получение данных от гироскопа и компас
а

мобильного устройства.



Часы
-

обеспечивают отсчет времени, используя часы мобильного устройства Единица
времени
-

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



уенсор местоположения получает

данные от датчика G
PS, определяя широту и долготу,
а так же высоту над уровнем моря.



При использовании сенсора местоположения

GPS
-
датчик на устройстве должен быть
включен.




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


81



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

К примеру приложение

Sensor Box for Android , которое можно скачать

из
магазина Google Play

обнаруживает все доступные датчики на устройства, и
демонстрирует на графиках как они работают.

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

Пример 2.9.1

Приложение “еде я?”

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








Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


82


Приме
р 2.9.2 Приложение “Компас”

рписание:

Приложение позволяющее определять стороны света.









Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


83


2.10 Математические функции


еруппа блоков Математика содержит следующий набор операций и функций:



математические операции (сложение, умножение, деление, вы
читание, сравнения и др.)





математические функции





функции случайных чисел




функции преобразования одних величин в другие




функции округления величин


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


84





работы с числами в различных системах счисления



Получить доступ к различным

функциям

и

постр
оить сложные математические конструкции
можно с помощью модификации блоков





Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


85


Пример 2.10.1. Приложение “Тренажер”


рписание. Приложение, которое

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






Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


86








Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


87



Пример 2.10.2. Пр
иложение “Конвертер систем счисления”

рписание. Приложение, которое позволяет конвертировать введенные числа,

в двоичную и
шестнадцатеричную систему счисления.















Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


88


елава 3. ррганизация проектной деятельности

3.1 уовместная разработка прилож
ений


тазработка мобильных приложений в среде

MIT App Inventor

может
осуществляться не только одним человеком, но и целой командой


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


утруктура программы в

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


Каждый участник совместной работы создает

экран со своим номером

Screen1, Screen2
или ScreenN, оставляя экраны, создаваемые другими членами команды
пустыми.


На

финальном этапе работы

выполняется слияние нескольких экранов в единое приложение
с помощью инструмента AI2 Project Merger



Алгоритм создания совместного приложения


1.

Каждый
участник создает отдельный проект.

2.

Файлы проекта могут иметь одинаковые имена файлов или могут быть названы
именами участников. Для того, чтобы минимизировать затраты на сбор приложения
можно задавать имя проекта по схеме кМЯ + Номер разрабатываемого экра
на.
Например m1, m2 и т. д.

3.

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

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

4.

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

и разрабатывать

дополнительные экраны.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


89




5. После того, как отдельные проекты завершены, их необходимо объединить вместе,
испо
льзуя App Inventor Merger Tool, загрузить его можно по ссылке
http://appinventor.mit.edu/explore/resources/ai2
-
project
-
merger.html



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

.aia.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


90




7. Загрузить

исходные файлы экранов в соответствующие поля приложения App Inventor
Merger.




8. Нажать на кнопку Merge.

Программа генерирует aia файл, соединив в нем экраны.

9. Для добавления следующего проекта, шаги


6
-
8 нужно повторить.

10. Загрузить готовый проект на App Inventor


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


91


11. Настроить навигацию между экранами

12. Протестировать приложение на устройстве

3.2 текомендации к созданию итогового проекта
-

приложения


Этап 1. Анализ

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

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


1.____________________
____________________________________________








2.__________________________________________________________________








3.___________________________________________________________________



Этап 2. тазработка дизайна приложения



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




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


92


Screen 1

Screen2








Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


93



Screen3

Пример







Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


94



Этап 3. Проектир
ование действий для компонент приложения


рбъясните, как приложение работает с точки зрения пользователя. Что произойдет, если
пользователь касается экрана?



3.1

Перечислите , какие компоненты содержатся в программе?



видимые





невидимые



3.2

Вид: как
эти компоненты отображаются при просмотре на мобильном устройстве?


_______________________________________________________
________________________________________________________


_______________________________________________________
____________________
____________________________________


_______________________________________________________
________________________________________________________



3.3.

Мультимедиа. Какие мультимедийные файлы использованы в программе?


3.4.

уформулируйте какие свойс
тва заданы для

каждого из компонентов программы?


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


Действия
-

операции или фун
кции, которые деталь компонент может

выполнять. Действия
могут быть инициированы другими деталями посредством соответствующих связей.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


95


Поря
док выполнения действий определяется, прежде всего, событиями, возни
кающими

в
системе, и реакцией на них объектов
.
.


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


Компонент

Действие

Как будет называться в панель
компонент

увойства

Что делает?

Кнопка

Перенести на
экран

КнопкаДалее

Цвет фона: светло
-
серый

Ширина
-

80

пикселей

Высота 50 пикселей

При нажатии переходит на
экран

Screen2








Этап 4. Программирование приложения в среде

MIT App Inventor


уоздать новый проект в среде

MIT App Inventor.

уоздать диза
йн приложения в режиме
“Дизайн” и запрограммируйте действия для каждого компонента, в режиме “Блоки”.


Этап 5. Тестирование приложения


Проверить,

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




Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


96



Этап 6. рценивание приложения


Провести

оценку приложения на основании оценочного листа.


Название приложения

рценка в баллах (1,2,3)

комментарии

кдея

Простое


Дизайн

приложения

2


Программирование

2


Внедрение

2


Тестирование

2


Краткое описание

2



Этап 7. рформление приложения


тазработать

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

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

тассмотрим данный алгоритм на примере приложения “Аудиокнопка”.


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


Этап
1. Анализ

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

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


1.Приложение может использоваться как напоминание выполнить какое то де

2.Приложение может работать как тест, при нажатии кнопки можно будет ответить на
какой то вопрос.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


97


3.Приложение может демонстрировать какие
-
либо действия, возникающие при
програ
ммировании мобильных приложений.


Этап 2. тазработка дизайна приложения



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

на нем компонент.


Screen 1






Этап 3. Проектирование действий для компонент приложения


рбъясните, как приложение работает с точки зрения пользователя. Что произойдет, если
пользователь касается экрана?


При нажатии на кзображение (Кнопку) будет пр
оигрываться звуковой файл.


3.1

Перечислите , какие компоненты содержатся в программе?



видимые

o

Кнопка

o

Надпись

o

Надпись




невидимые

o

Звук


3.2

Вид: как эти компоненты отображаются при просмотре на мобильном устройстве?


Надписи и кнопка изображения отображаю
тся как только приложение запускается.


3.3.

Мультимедиа. Какие мультимедийные файлы использованы в программе?

Звуковой файл

dance. mp3


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


98



3.4.

уформулируйте, какие свойства заданы для компонентов программы?


Компонент

Тип
компонента

(Видимый/
Невидимый)

Как будет называться
компонент?

увойства

уобытие

Действие

Экран

Screen1

Видимый

По умолчанию

Screen 1

Выравнивание по
центру



Надпись

Видимый

НадписьЗаголовок

тазмер шрифта
-
40
px, цвет
-
пурпурный



Надпись

Видимый

НадписьПодзаголовок

тазмер шрифта

-

16
px, цвет синий



Кнопка

Видимый

Кнопкакзображение

Цвет фона: светло
-
серый

Ширина
-

300

пикселей

Высота
-
200
пикселей

кзображение

Dance.jpeg


Нажатие
кнопки

Вызов
аудиофайла

Звук

Невидимый

ЗвукТанец

ксточник
Dance2.mp3.


Проигрывается
при вызове



Этап 4. Программирование приложения в среде

MIT App Inventor


уоздайте новый проект в среде

MIT App Inventor.

уоздайте дизайн приложения в режиме
“Дизайн” и запрограммируйте действия для каждого компонента, в режиме “Блоки”.



Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


99




Этап 5. Тестирование п
риложения


Проверьте

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


Этап 6. рценивание приложения


Проведите оценку приложения на основании оценочного листа.


Название приложения

рценка в баллах (1,2,3)

комментарии

кдея

Простая


Дизайн

приложения

2


Программирование

2


Внедрение

2


Тестирование

2


Краткое описание

2



Этап 7. рформление приложения


Ак͉д͊мия м͌бильных п͍ил͌ж͊ни͋

Appi
nvent.ru


100



Дизайн иконки на основе файла изображения. уанудтрека для запуска приложени
я нет.


Заключение


Данный практикум знакомит с основами

программирования мобильных устройств в среде
визуального программирования MIT App Inventor. Практические задания позволяют получить навыки
создания мобильных приложений и оценить

полезность и значи
мость

развития навыков

программирования

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

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



Литература


1.

Kerfs



Apress, 2011.
-
198
с
.

2.

Frederick G., Lal R. Beginning Smartphone Web Development: Building Javascript, CSS, HTML
and Ajax
-
Based Applications for iPhone, Android, Palm Pre, Blackb
erry, Windows Mobile and

Nokia S60.



Apress, 2010.


350 с.

3.

Моррисон М. Создание игр для мобильных телефонов.


М.: ДМК Пресс, 2006.
-

494 с.

4.

Виноградов А. Программируем игры для мобильных телефонов.
-

М.

Триумф, 2007.


272с.

5.

MIT App Inventor.
Ресурс
ы
.
http://appinventor.mit.edu/explore/resources.html

6.

Я дилетант. Мобильные приложения своими руками
gory/mobilnye
-
prilozeniya/



Приложенные файлы

  • pdf 1321120
    Размер файла: 6 MB Загрузок: 0

Добавить комментарий