App inventor 2 руководство на русском

Начинаем работать с приложением App Inventor

App Inventor (App – сокращение от application, переводится как приложение. Inventor — переводится как изобретатель) — это среда визуальной разработки приложений, не требующая больших знаний в программировании. Приложение было разработано в Google Labs, а после передано Массачусетскому технологическому институту.

App Inventor — это облачная среда визуальной разработки Android-приложений. Построение программ осуществляется в визуальном режиме с использованием блоков программного кода. На компьютер устанавливать ничего не требуется, просто откройте среду разработки ai2.appinventor.mit.edu в браузере Google Chrome и начинайте творить.

Обратите внимание, что для работы с App Inventor требуется аккаунт Google. Если вы не зарегистрированы в Google, то перед началом работы вам надо будет пройти регистрацию и авторизацию. После этого приложение App Inventor и все ваши сохраненные проекты будут доступны на любом компьютере после авторизации.

[/sociallocker]

Видео. Применения App Inventor в робототехнике

App Inventor состоит из конструктора и редактора блоков

Конструктор App Inventor

Редактор блоков App Inventor

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

Создание первого приложения для Android

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

1. Заходим в среду разработки из браузера Google Chrome appinventor.mit.edu

2. Заходим в свой аккаунт Google (при необходимости регистрируемся)

3. Открываем новый проект и присваиваем ему имя (без пробелов и цифр!)

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

5. Захватите объект «Кнопка» мышкой и перенесите его на вкладку «Просмотр»

6. На вкладке «Свойства» задайте необходимые стили для кнопки

7. Перейдите на вкладку «Медиа», захватите и перенесите объект «Текст в речь»

8. Переходите в режим редактора блоков

9. В панели блоков нажмите мышкой на объект «Кнопка»

10. Выберите функцию «Когда кнопка нажата» и перенесите в окно «Просмотр»

11. Выбираем объект «Текст в речь» и переносим блок «Сказать сообщение»

12. Наведите мышкой один блок на другой, чтобы совпал «замок»

13. Выберите объект «Текст» и добавьте к программе новый блок

14. Осталось лишь создать QR-код для скачивания на телефон

15. После построения программы у вас на экране появится похожий QR-код

16. Откройте на телефоне приложение QR Code Reader и просканируйте QR-код

Телефон запросит разрешение для перехода по ссылке. Нажмите «OK» и начнется загрузка вашего приложения. После загрузки установите приложение.

На что обратить внимание:

1. При установке своего приложения на телефон потребуется разрешить установку программ от сторонних источников;
2. Не сканируйте QR-код из неизвестных источников (этим могут воспользоваться злоумышленники и похитить ваши данные).

Задание для самостоятельного выполнения:

1. Добавьте в приложение вторую кнопку с функцией «Закрыть приложение»;
2. Добавьте в приложение третью кнопку с функцией «Проиграть мелодию».

Время на прочтение
2 мин

Количество просмотров 50K

Часть 1. Что такое App Inventor 2?
Начать хочется с того, что на habrahabr и geektimes есть несколько статей о предыдущей версии App Inventor. Вот они:
Google App Inventor отдадут в Open Source
MIT открыл Google App Inventor в бета-версии
App Inventor — создание Android-приложений для каждого: Урок 1
Чтение XML файла с помощью App Inventor

Эта версия App Inventor (beta) проработала с 2011 по 2015 годы, но сейчас ее поддержка прекращена. С 2014 работает версия App Inventor 2, которая несовместима с предыдущей. До 2011 года существовала версия Google App Inventor в рамках Google Labs
Итак, App Inventor — среда визуальной разработки android-приложений, требующая от пользователя минимальных знаний программирования. Выглядит она так:
Работает эта среда разработки прямо из браузера. Скачивать и устанавливать ничего не нужно. Создавать приложения можно хоть с android-планшета, хоть с Ipad. Основное требование к «железу» это хорошее разрешение экрана. Для примера приведу скриншот с экрана разрешения FullHD. Можно сравнить его с предыдущим, который сделан c HD экрана.

Готовые приложения можно размещать в Play Market, для примера приведу аккаунт разработчика, в котором все приложения сделаны в App inventor.
Подробно описывать MIT App inventor 2 не буду, поскольку от предыдущей версии он отличается в основном множеством мелких усовершенствований, которые выходят в среднем раз в несколько недель. Прочитав статьи, указанные выше, можно легко освоить и текущую версию.
Во вконтакте есть достаточно живое сообщество, в котором участники делятся друг с другом опытом использования App Inventor.
Часть 2. App Inventor+Arduino проекты.
В последнее время бурно развивается тема «интернета вещей». Во многих проектах на эту тему используется ардуино. Иногда в таких проектах нужно создать android-приложение, тут и может понадобиться App Inventor 2. На habrahabr и geektimes есть несколько статей на эту тему.
1. App Inventor+Arduino проекты с использованием блютуз-соединения. (блютуз модуль HC-0567)
Робот-пылесос на ардуино
Простая Bluetooth машинка на Arduino
Bluetooth пульт для телевизора на arduino
2. App Inventor+Arduino проект с использованием wi-fi соединения.(wi-fi модуль ESP8266)
Интернет Вещей (IoT) и водопровод
3.App Inventor+Arduino проект с использованием проводного соединения (Еthernet модуль Enc28j60)
Управление громкостью многозонного усилителя при помощи приложения для Android и Arduino
4.App Inventor+Arduino проект с использованием GPRS/GSM соединения (GPRS/GSM шилд SIM900)
Управление отоплением в загородном доме
Ну и закончить хотелось бы позитивной новостью, что с августа 2015 года App Inventor 2 поддерживает русский язык. Если у кого-то есть свои интересные приложения, сделанные в этой среде разработки, можно скидывать в комментарии, думаю многим будет интересно посмотреть какие еще можно делать приложения, используя App Inventor.
P.S. Сборник из более 100 обучающих материалов по ардуино для начинающих и профи тут
P.P.S. Онлайн курс по ардуино на гиктаймс здесь.

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

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

В итоге за данную проблему взялся коллектив Массачусетского технологического института (МТИ). В его стенах была создана среда, которая позволяет каждому школьнику или домохозяйке создать приложение под ОС Android. В основе данной разработки лежит популярная среда по алгоритмике Scratch, которую также разработали в МТИ.

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

Постановка задачи

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

1 шаг: Зарегистрироваться в Google

На первом шаге необходимо зайти на сайт google.com и пройти регистрацию.

2 шаг: MIT App Inventor

IDE App Inventor находится в веб-пространстве, что сильно упрощает работу, так как ресурсы компьютера практически не используются (но для доступа к среде необходимо наличие интернета). Также не требуется знания языка программирования Java и Android SDK.
Ссылка для входа в среду программирования MIT App Inventor:

http://ai2.appinventor.mit.edu/

Напоминаем: при обращении на данный сайт от вас потребуется наличие аккаунта Google или Google Apps.

3 шаг: Описание интерфейса пользователя

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

Разработка приложений происходит в 2 этапа:
Первый этап — проектирование интерфейса пользователя;
Второй этап — программирование (создание инструкций) приложения.

Создаем проект.

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

У нас появилась новая страница.

1 блок «Палитра» — это Встроенные модули и блоки. Данная группа блоков позволяет задавать определенные действия/функции созданным компонентам.
2 блок «Просмотры» — Модель экрана мобильного устройства для визуального отображения.
3 блок «Компоненты» — Компоненты программы инициализируемых объектов.
4 блок «Свойства» — Свойства компонентов.

Для нашего приложения нужно выбрать 3 стандартных объекта из блока 1: Текстовое окно, кнопка и надпись.
Для этого из блока 1 переместим их по очереди в блок 2.

Если вы всё сделали правильно, объекты отобразятся в блоке 3.

Следующим шагом переименуем надпись на кнопке. В блоке 2 выберем кнопку (для этого необходимо просто нажать на нее) и перейдем в блок 4 «Свойства». В блоке «Свойства» необходимо найти свойства кнопки «Текст». Заменим «Текст для Кнопка1» на «ЖМИ!» или «Ответ».

4 шаг: Программирование

Сейчас у нас готов интерфейс приложения (визуальное отображение). Если мы его запустим или скачаем его на мобильное устройство, то оно запустится, но при нажатии на кнопки или при вводе текста не будет происходить ничего. Чтобы написать программу (инструкцию), мы перейдем в режим программирования. Для этого в правом верхнем углу нажмем на кнопку «Блоки». Как вы уже поняли, до этого мы были в режиме «Дизайнер», и для перехода обратно в этот режим необходимо нажать на кнопку «Дизайнер» возле кнопки «Блоки».

Проговорим еще раз, что должна делать наша программа.
Оператор вводит свое имя в поле «Текст»: «Петя». Далее оператор нажимает на кнопку «ЖМИ!» и в надписи 1 появляется надпись: «Здравствуй, Петя!»

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

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

1 элементом для нашей программы будет срабатывание события — нажатие кнопки.
Для этого выбираем компонент «Кнопка 1» и выбираем функцию «Когда Кнопка1.Щелчок» и переносим ее на середину рабочей зоны.

2 элементом для нашей программы будет элемент присваивание значений компоненту «Надпись1».
Для этого выбираем компонент «Надпись1» и выбираем функцию «Присвоить Надпись1.ЦветФона». Переносим и присоединяем к функции кнопки. Если мы сделали все правильно, прозвучит звуковой сигнал, похожий на щелчок. Далее меняем цвет фона на «Текст», так как мы работаем с текстовой информацией.

3 элементом нашей программы будет встроенный объект «Текст». Выбираем компонент «соединить». Этот элемент позволяет склеить текстовые фрагменты в единый текст. Этот элемент необходимо соединить с элементом «Присвоить Надпись1.Текст».

4 элемент — это текстовое поле. Изначально оно пустое. В данном блоке элементов мы пропишем статическую приветственную информацию. Для этого во встречных компонентах выбираем «Текст», далее выбираем компонент, прикрепляем к первому ярусу элемента «соединить». В этом блоке напишем наше приветствие: «Привет».

5 элемент. Нам необходимо соединить с приветствием имя, введенное в текстовое поле оператором. Для этого выберем объект «Текст1», выбираем элемент «Текст1.ЦветФона» и соединяем с блоком «соединить». Далее меняем цвет фона на «Текст», так как мы работаем с текстовой информацией.

Наша программа готова.

5 шаг: Тестирование приложения

Первым делом мы смотрим на индикаторы в виде знаков ! и Х. Если возле этих знаков стоит цифра 0, то все сделано правильно.

Что означают данные знаки:
Знак ! означает, что в программе есть ошибки. С этими ошибками программа запустится, но будет работать некорректно.
Знак Х означает фатальную ошибку. С такими ошибками программа даже не запустится.
Цифра возле этих знаков показывает количество таких ошибок.
Если вы сделали все правильно, то ошибок не должно быть, и можно переходить к следующему этапу.

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

Мы воспользуемся самым простым.
Чтобы закачать приложение, его нужно скомпилировать в APK-файл. И этот установочный файл перенести на мобильное устройство.

В верхнем меню мы выберем раздел «Построить», в подпункте выбираем «Приложение (Создать QR-код для скачивания. apk)». Программа сама скомпилирует программу и создаст QR-код. Если мы считаем этот код, наша программа автоматически скачается на мобильное устройство. Важное замечание: QR-код действителен 2 часа.

Поздравляем! Вы создали свое первое мобильное приложение!

Вы можете настроить среду разработки Android-приложений App Inventor и начать создавать программы из блоков за несколько минут. Дизайнер (Designer) и редактор блоков (Blocks Editor) работают полностью в браузере (как облачное приложение). Чтобы увидеть после сборки приложения, как оно работает на Вашем устройстве (что называется «Live Testing»), нужно выполнить описанные в этой статье шаги (перевод руководства [1]).

Есть 3 варианта настройки:

1. Если Вы используете устройство Android, и имеете на нем беспроводное подключение к Интернет, то можете начать собирать приложения без загрузки какого-либо ПО на свой компьютер. Для этого Вам нужно установить на своем Android-устройстве App Inventor Companion App. Выберите Вариант 1, описанный ниже, это настоятельно рекомендуемый вариант.

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

3. Если у Вас нет беспроводного подключения к Интернет, то необходимо установить программное обеспечение на компьютер, чтобы можно было подключиться к Android-устройству через USB. Для этого выберите Вариант 3, описанный ниже. Работа через USB довольно хитрая, особенно на Windows. Используйте этот вариант как последний шанс, если ничего другого уже не остается.

[Вариант 1, рекомендуемый]

Этот вариант подразумевает сборку приложений с устройством Android, подключенным к Интернет через WiFi. Если у Вас есть компьютер, устройство Android, и Интернет WiFi, то это самый простой и удобный способ тестировать Android-приложения. Приложения разрабатываются прямо в браузере на сайте ai2.appinventor.mit.edu (необходима регистрация, но достаточно учетной записи Google, что обычно есть у каждого пользователя Android-устройств). При этом не нужно ничего устанавливать на компьютер, следует только установить специальное приложение на устройство Android — MIT App Inventor Companion app. После того, как это приложение установлено, Вы можете открывать свои проекты в App Inventor on the web, и тестировать приложения на Android-устройстве после их сборки.

Далее описан процесс по шагам.

Шаг 1, загрузите и установите MIT AI2 Companion App.

Запустите на своем Android-устройстве сканер QR-кода, и откройте в нем QR-код на первой картинке ниже (если у Вас нет сканера QR-кода, то установите его из Play Store, например сканер ZXing). Это приведет к переходу на Google Play Store, откуда Вы можете загрузить и установить приложение MIT AI2 Companion App. Если Вы не можете использовать Play Store, используйте второй QR-код, который содержит ссылку на загрузку установочного пакета APK, загрузите этот пакет и установите его.

После загрузки следуйте инструкциям по установке Companion app на своем устройстве. Вам нужно установить MIT AI2 Companion app только один раз, после чего оставьте его на своем телефоне или планшете Android всякий раз, когда используете App Inventor.

Примечание 1: если Вы не можете использовать QR-код, то все еще можно установить MIT AI2 Companion на телефон или планшет. Используйте WEB-браузер на своем устройстве для перехода на Google Play Store, и найдите там приложение MIT AI2 Companion. После этого кликните на кнопку INSTALL (Установить), и установите Companion app.

Примечание 2: если Вы не используете Google Play Store, и хотите установить Companion app напрямую из установочного пакета APK, то нужно разрешить на своем Android-устройстве вариант установки приложений из «неизвестных источников». Чтобы найти эту настройку на Android версий до 4.0, перейдите в Settings -> Applications, после чего поставьте галочку на «Unknown Sources». Для устройств, работающих на Android 4.0 или более свежей версии, перейдите в Settings -> Security» или Settings -> Security & Screen Lock, и поставьте галочку «Unknown Sources», и подтвердите свой выбор.

Шаг 2, подключите компьютер и Android-устройство к сети WiFi.

App Inventor автоматически покажет собираемое приложение, но только если и компьютер (на котором запущен App Inventor) и устройство Android (на котором запущено приложение Companion app) подключены к одной и той же сети WiFi. Подробнее см. врезку ниже.

Шаг 3, откройте проект App Inventor и подключите его к Android-устройству.

Перейдите в App Inventor и откройте проект, или создайте новый, используя ссылки Project -> Start New Project, после чего дайте новому проекту имя. После этого выберите в меню Connect -> AI Companion. Все эти действия доступны в браузере на сайте AI2.

На экране компьютера появится QR-код. На устройстве Android запустите приложение MIT App Companion app, как это делаете с любым другим приложением. Затем кликните кнопку «Scan QR code» в приложении Companion, и отсканируйте код в окне App Inventor:

Через несколько секунд Вы увидите на устройстве собранное приложение. Оно будет обновляться при изменениях в дизайне и блоках приложения, и эта функция называется «live testing» (живое тестирование).

Если Вы не можете отсканировать QR-код на своем устройстве, то на Android-устройстве введите код, показанный на компьютере в области текста Companion. Этот код состоит из 6 символов, и он показан на компьютере под надписью «Your code is:». После ввода шести символов кликните на оранжевую кнопку «Connect with code». Не вводите Enter или carriage return (возврат каретки): нужно ввести только 6 символов, после чего ткнуть на оранжевую кнопку.

Устранение проблем. Возможные проблемы, из-за которых приложение не появляется на Вашем устройстве Android:

• Возможно, что на Android-устройстве установлена устаревшая версия MIT App Inventor Companion App. Загрузите последнюю  версию Companion App для App Inventor.
• Возможно, что Android-устройство не подключено к беспроводной сети WiFi. Убедитесь, что в нижней части экрана AI2 Companion App Make отображается IP-адрес.
• Ваше Android-устройство не подключено к той же самой сети, что и компьютер. Убедитесь, что IP-адреса и компьютера, и устройства Android принадлежат одной и той же локальной сети.
• Ваша школа или организация могут использовать сетевые протоколы, запрещающие полноценную работу соединения WiFi (или вообще подключение WiFi недоступно). В таком случае Вы все еще можете использовать App Inventor вместе с эмулятором Androd, или можете использовать кабель USB для подключения к своему Android-устройству.

[Вариант 2, установка и запуск эмулятора Android]

Если нет в руках телефона или планшета Android, то Вы все еще можете использовать App Inventor. App Inventor предоставляет Android-эмулятор, который работает так же, как и Android, рисуя свое окно на экране компьютера PC. Таким способом можно тестировать приложения и распространять их, даже через Google Play Store.

Для использования эмулятора Вам сначала нужно установить на компьютере некоторое ПО (что не требуется при наличии WiFi подключения, см. Вариант 1 выше). Следуйте инструкциям, описанным во врезках ниже, в зависимости от версии операционной системы на Вашем PC.

Важное замечание: если Вы обновляете предыдущую установку ПО App Inventor, см. ссылку [2]. Вы можете проверить, работает ли на компьютере последняя версия ПО, путем посещения странички App Inventor 2 Connection Test [3].

Шаг 1, установка App Inventor Setup Software.

sudo apt-get install lib32z1

sudo rm -rf /usr/google/appinventor
sudo rm -rf ~/.appinventor

sudo dpkg --install appinventor2-setup_2.3_all.deb

/usr/google/appinventor/commands-for-Appinventor/aiStarter &

Шаг 2, запуск aiStarter.

Использование эмулятора или кабеля USB требует программы на компьютере, которая называется aiStarter. Эта программа является помощником для браузера, который осуществляет обмен с эмулятором или с Android-устройством через кабель USB. Программа aiStarter устанавливается, когда Вы устанавливаете пакет App Inventor Setup. Программа aiStarter не нужна, только если Вы используете беспроводное подключение к Интернет на устройстве Android (см. Вариант 1 выше).

• На Mac программа aiStarter запустится автоматически, когда Вы заходите в свою учетную запись на компьютере (логин), и работает невидимо в фоновом режиме.

• На Windows появится ярлык на Рабочем Столе (Desktop), в меню Пуск (кнопка Start) и в папке Автозагрузка (Startup Folder). Если Вы хотите использовать эмулятор вместе с App Inventor, то возможно понадобится запустить aiStarter вручную на компьютере. Это можно сделать кликом на иконке aiStarter, находящейся на Рабочем Столе или в меню кнопки Пуск.

После успешного запуска aiStarter будет отображаться окно наподобие следующего:

• На GNU/Linux программа aiStarter появится в папке /usr/google/appinventor/commands-for-Appinventor, и Вам надо запустить её вручную. Это можно сделать из командной строки терминала следующей командой:

/usr/google/appinventor/commands-for-appinventor/aiStarter &

127.0.0.1 - - [01/Dec/2013 11:28:30} "GET /replstart/emulator-5554 HTTP/1.1" 2000

Шаг 3, откройте проект App Inventor и подключитесь к эмулятору.

В App Inventor и откройте свой проект, или создайте новый через меню Project -> Start New Project, дав новому проекту имя. Затем в меню App Inventor перейдите по ссылке Connect -> Emulator. Все вышеописанные действия осуществляются в браузере с открытой страницей App Inventor.

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

В эмуляторе сначала появится пустой черный экран (картинка №1 ниже). Подождите готовности эмулятор, когда экран станет цветным (картинка #2). Даже после этого экрана Вам нужно подождать несколько минут, пока эмулируемый телефон подготавливает свою карту SD: процессе подготовки карты в верхней части экрана телефона будет иконка, информирующая о подготовке карты. После соединения и подготовки эмулятор запустит и покажет приложение, которое Вы открыли в App Inventor.

[Вариант 3, подключение через кабель USB]

Некоторые шлюзы и сетевые экраны школ и организаций не позволяют осуществить тот тип соединения WiFi, который необходим (например, блокируются некоторые порты, или WiFi вообще не предоставляется). Если WiFi не работает или недоступен, попробуйте подключение к Android-устройству через кабель USB.

Когда Вы отлаживаете приложения App Inventor на Android-телефоне или планшете, Android-устройство обменивается данными с программным обеспечением App Inventor, работающим в окне браузера на компьютере. Этот обмен осуществляется под управлением приложения MIT AI2 Companion App, работающим на Android-устройстве. Ниже на шаге 2 приведены инструкции по установке этого приложения. MIT AI2 Companion App может осуществлять обмен данными через сетевое беспроводное беспроводное соединение. Это самый удобный, настоятельно рекомендуемый метод, не нужно устанавливать на компьютер никакого дополнительного ПО (см. выше описание Варианта 1).

Однако в некоторых случаях это беспроводное подключение не работает. Например, некоторые отели, конференц-залы, школы и другие организации предоставляют ограниченное подключение через WiFi. Они конфигурируют свою сеть так, чтобы запретить двум устройствам в локальной сети, одно из которых подключено по радио, обмениваться данными друг с другом (см. выше врезку «Как работает через WiFi приложение MIT AI2 Companion»). Некоторые пользователи App Inventor решают эту проблему покупкой беспроводного роутера, позволяющего настроить свою частную локальную сеть (также некоторые компьютеры Mac и некоторые PC Windows могут работать как WiFi-роутеры, предоставляя подключения к Интернет небольшому количеству сетевых устройств). Однако в случаях, где такое решение невозможно, Вы все еще можете использовать App Inventor с телефоном или планшетом Android, соединив его с компьютером кабелем USB.

Настройка соединения через USB может быть неудобной, особенно на машинах с современной операционной системой Windows, которая требует специальный драйвер для подключения устройствам Android (это не относится к Mac или Linux, которым не нужен специальный драйвер). К сожалению, разные устройства Android могут требовать для себя разные драйверы, и за исключением нескольких стандартных моделей устройств компании Microsoft и Google оставляют реализацию и предоставление этого драйвера на совести производителя Android-устройства. Как следствие возможно Вам понадобится поискать в Интернете нужный драйвер для своего телефона. App Inventor предоставляет тест-программу, которая проверяет, может ли Ваше Android-устройство обмениваться данными с компьютером через кабель USB. Вы должны запустить этот тест и устранить проблемы с соединением перед тем, как попробуете использовать App Inventor с этим устройством на подключении через USB.

Выполните следующие шаги, чтобы начать использовать App Inventor с подключением к Android-устройству через кабель USB:

Шаг 1, установка App Inventor Setup Software.

Чтобы подключиться через USB, сначала Вам нужно запустить инсталлятор App Inventor на компьютере (это не требуется, когда для Android-устройство доступно подключение к Интернет через WiFi, см. Вариант 1 выше). На этом шаге устанавливается программа aiStarter, которая работает как промежуточное звено между App Inventor в браузере и MIT AI2 Companion App, работающим на Android-устройстве. В зависимости от того, на какой системе работает компьютер — Mac, Windows или Linux, процесс установки происходит по-разному. Инструкции по установке см. во врезках выше в описании Варианта 2, «Шаг 1: установка App Inventor Setup Software».

Важное замечание: если Вы обновляете предыдущую версию ПО App Inventor, см. ссылку [2]. Вы можете проверить, работает ли на компьютере последняя версия ПО, по ссылке [3].

Шаг 2, загрузите и установите MIT AI2 Companion App.

Действия на этом шаге совпадает с действиями первого шага Варианта 1, см. Вариант 1 «Шаг 1, загрузите и установите MIT AI2 Companion App».

Шаг 3, запуск aiStarter.

Действия на этом шаге совпадают с описанием Варианта 2, «Шаг 2, запуск aiStarter».

Шаг 4, настройка Adroid-устройства для подключения USB (включение отладки через USB).

Убедитесь, что на устройстве Android в системных настройках разрешена возможность отладки через USB (USB Debugging ON). Эта функция находится в опциях разработчика, и называется «Отладка USB».

На большинстве Android 3.2 или более старых эту опцию можно найти в меню Настройки (Settings) -> Приложения (Applications) -> Разработка (Development). На Android 4.0 или более свежей версии, это находится в меню Настройки (Settings) -> Разработчик (Developer).

Примечание: на Android 4.2 или более новых операционных системах опции разработчика по умолчанию скрыты. Чтобы сделать их доступными, перейдите в Настройки (Settings) -> Об этом устройстве (About phone) и ткните на номер сборки (Build number) семь раз. Вернитесь в предыдущий экран, чтобы найти опции разработчика, где находится галочка «Отладка USB» (USB Debugging).

Шаг 5, соединение компьютера и устройства.

Соедините компьютер и Android-устройство кабелем USB, и при этом убедитесь, что устройство подключилось как флешка (mass storage device), но не как мультимедийное устройство (media device), и при этом она не смонтирована как диск на компьютере. Это означает, что надо будет перейти в Finder (Проводник на Mac) или в My Computer (Проводник на Windows), и отключить любой диски (диски), которые смонтировались при подключении Вашего Android-устройства.

На Android 4.2.2 и более новой операционной системе, устройство отобразит всплывающее окно с вопросом «Разрешить отладку USB?» (Allow USB Debugging?) при первом подключении к компьютеру. Нажмите «OK». Это идентифицирует компьютер на устройстве, позволяя компьютеру обмениваться данными с ним. Это нужно делать при каждом соединении с другим компьютером, но на каждом конкретном компьютере это делается только один раз.

Шаг 6, проверка соединения.

Перейдите на страничку [3] (открыв эту ссылку в новой закладке браузера) и посмотрите, есть ли подтверждение о том, что компьютер может обнаружить устройство. Если тест окончился неудачно, просмотрите советы по решению проблем на страничке [4]. Вы не сможете использовать App Inventor через кабель USB, пока не устраните проблему с соединением.

[Системные требования App Inventor]

Внимание: Internet Explorer не поддерживается App Inventor, разработчики рекомендуют Chrome или Firefox.

Компьютер или операционная система:

Macintosh (на процессоре Intel): операционная система Mac OS X 10.5 или более свежая.
Windows: операционная система Windows XP, Windows Vista, Windows 7.
GNU/Linux: операционная система Ubuntu 8 или более свежая, Debian 5 или более свежая (замечание: GNU/Linux live development поддерживается только для WiFi-соединений между компьютером и Android-устройством).

Браузер:

Mozilla Firefox 3.6 или более свежий. Замечание: если Вы используете Firefox с расширением NoScript, то это расширение нужно выключить (см. страничку по решению проблем [5]).
Apple Safari 5.0 или более свежий.
Google Chrome 4.0 или более свежий.
Телефон или планшет (или используйте эмулятор).
Операционная система Android 2.3 («Gingerbread») или более свежая.

Microsoft Internet Explorer не поддерживается.

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

• Базовые руководства для начинающих
• Обзор библиотек App Inventor 2
• Пользовательский форум
• Описание встроенных блоков App Inventor
• Дополнительные руководства

[Ссылки]

1. Setting Up App Inventor site:appinventor.mit.edu.
2. How to Update the App Inventor Setup Software site:appinventor.mit.edu.
3. MIT App Inventor 2 Connection Test site:appinventor.mit.edu.
4. General Connection Help site:appinventor.mit.edu.
5. Troubleshooting for App Inventor 2 site:appinventor.mit.edu.
6. How to Set up a Wireless Network (WiFi) Connection site:wikihow.com.
7. MIT APP INVENTOR SUPPORT FORUM site:groups.google.com.
8. Sharing and Packaging Apps site:appinventor.mit.edu.
9. 181225AI2-HelloPurr.zip — установочный пакет эмулятора AI2, проект HelloPurr.

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

Практикум

Авторы:

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

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

Оглавление

Глава 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 Общение

Пример 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
Рекомендации к созданию итогового проекта — приложения

Глава         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 пользователь  попадает
на страницу, где отображается   список его  проектов.  Все созданные проекты
хранятся в папке Мои проекты.

Вновь
создаваемое приложение в среде  MIT App Inventor это новый проект (меню Проекты
—  Начать новый проект). Нажатие кнопки “Удалить проект” — удаляет созданный
проект. Переход к списку проектов из окна разработки по по ссылке “Проекты/Мои
проекты».

Разработка  мобильного приложения в MIT App Inventor http://ai2.appinventor.mit.edu/ происходит в 2 этапа. Первый этап —  проектирование
интерфейса пользователя  “Как это будет выглядеть”, второй —  программирование
компонент приложения “Как они будут себя вести”.  

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

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

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

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

                     Палитра 
включает наборы (группы)  компонент  будущего приложения. 

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

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

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

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

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

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

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

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

устройстве.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(

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

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

1.5 Функции режима  “Блоки”

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

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

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

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

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

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

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

•      
Отключить/Включить   блок

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

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

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

•      
Выполнить

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

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

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

•      
Копировать  блок в рюкзак

•      
Копировать все  блоки в рюкзак

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

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

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

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

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

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

•      
в исходном коде  (файл c  расширением .aia)

Исходный код в формате .aia позволяет редактировать
приложение. Исходный код генерируется со страницы проекта  меню Проекты /
Экспортировать выбранные проекты (.aia)  на Мой компьютер.

•      
в виде исполняемого файла  ( файл c  расширением .apk)

Файл  приложения   .apk  генерируется в   App Inventor
в меню  Построить — Приложение (сохранить .apk на  компьютер). Файл .apk 
является исполняемым приложением, которое работает на устройстве.

•      
в виде  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.

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

3.  
На компьютере открыть проект, который нужно протестировать, и  выбрать в
меню  Помощник->Помощник AI.

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

5 Запустить  MIT Ai2 Companion  на мобильном 
устройстве и нажать  Scan QR   code. Через несколько секунд приложение
появится на вашем устройстве.

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

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

Software

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

•      
Для  ОС  Windows ( англ. Instructions for Windows)

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

2.  
Запустить aiStarter (только для Windows & GNU/Linux)

aiStarter будет  успешно запущен,  если отображается 
окно следующего вида:

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

Окно эмулятора имеет  следующий  вид:

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

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

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

На большинстве устройств, работающих под управлением
Android 3.2 или старше, выбрать  опцию в  Настройки-> Приложения->
Разработка.

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

чтобы найти меню Для разработчиков, в том числе
«USB Debugging».

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

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

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

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

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

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

1.7 Загрузка .apk  файла на мобильное устройство

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

Для разных OS Andriod версии одного и того же
приложения могут перезаписываться  в различных  вариантах. Новое приложение
может быть установлено на место старого, или в виде новой версии  c
модифицированными именем.

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

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

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

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

•      
Расположение — компоненты, отвечающие за макетирование
экрана, позволяют размещать компоненты интерфейса пользователя горизонтально,
вертикально, или в ячейки таблицы. В среде  MIT App inventor нет
форматирования, позволяющего задавать интервалы между определенными
компонентами, поэтому для макета и задания расстояния и  пространства между 
элементами используются компоненты  группы расположения с определенными
заданными свойствами, например высота или ширина.

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

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

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

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

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

•      
Каналы — компоненты,  позволяющие  запустить какое-либо
внешнее действие из приложения: другое приложения на мобильном устройстве,
камеру, поиск в сети интернет или открыть  веб-страницу.

•      
LEGO® MINDSTORMS®               —               компоненты
   обеспечивающие          управление       LEGO®

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

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

При работе в среде MIT App Inventor  штатное
разрешение  экрана  320х480 пикселей.

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

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

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

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

Изображения для создания  приложения  (Скачать)

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

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

1.      
Создать Google аккаунт, лучший вариант Google Apps!! или использовать созданный
ранее.  

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

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

4.В окне “Terms of Service выбрать” I accept the
terms of service”

5. В окне “Welcome to App Inventor 2” выбрать “Continue”

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

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

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

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

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

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

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

13.  

Выбрать в группе  Сенсоры -> СенсорАкселерометра и перенести  его в область
экрана мобильного устройства

14.  
Выбрать компонент Screen1 и установить  его свойства ВыровнятьПогоризонтали,

ВыровнятьпоВертикали, ОриентацияЭкрана

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

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

17.  
Для изображений сторон кубика (файлы 1.png-6.png)  имя файла изображения
формируется  с помощью функции “соединить”:  случайное число  в диапазоне  от 1
до 6  ( у нас 6 сторон кубика), плюс расширение графического файла .png.

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

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

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

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

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

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

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

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

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

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

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

Основным средством для обработки события являются так
называемые блоки заголовков:

Когда кнопка… Например Когда Кнопка Шелчок (событие) —
проигрывается Звук (действие)

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

o   События
датчика, например, координаты GPS  o        События на
устройство, например  входящие сообщения.

o   События
связанные с анимацией объектов, например достигнут край или происходит
наложение объектов. o         Анимация события, такие как два
объекта столкновения o   Веб-события, связанные с данными
поступающими  из сети

2.1 Кнопки

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

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

•       Щелчок

•       В
фокусе

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

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

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

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

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

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

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

•      
Изображения

•      
Звуки

•      
Надпись

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

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

Пример 2.1.2  Приложение  “SoundBoard”  

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

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

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

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

Одним из интересных  приемов работы с изображением
служит скрытое разделение изображения на части. Изображение, части которого
необходимо выделить разрезается на нужное количество частей с помощью http://imagesplitter.net/
Полное изображение, создается из кнопок, каждая их которых содержит
отдельный элемент. На основе таких приемов, можно строить тестовые задания с
использованием изображений и кнопок.

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

Описание: Приложение, в  котором кот на экране издает
звук когда его погладят.

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

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

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

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

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

•      
Навигация (переход)  между экранами организуется  с помощью
кнопок или с помощью действий.

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

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

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

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

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

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

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

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

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

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

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

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

Описание. Превращение
одного изображения  в другое “Муха” в  “Слона”, “Гвидон” в “Комара”.

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

•      
Экраны:  Screen1 и Screen 2

•      
Надпись

•      
Кнопка

•      
Изображение

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

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

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

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

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

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

Способ 2.
Использование  функции открытия экрана с начальным значением

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

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

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

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

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

•      
Экраны:  Screen1 и Screen2

•      
Надписи

•      
Холст

•      
ИзображениеСпрайт

•      
Кнопки          TinyDB

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

Описание.  

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

•      
Экраны:  Screen1 и Screen2

•      
Надписи

•      
Кнопки

•      
TinyDB

•      
Цвет

2.4 Списки

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

Переменные

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

•           
Переменная должна иметь свое уникальное  имя, в приложении на
одном экране  не может быть двух переменных с одинаковыми именами .      Переменная
в приложении определяется с помощью блока Инициализировать.

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

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

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

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

Списки/
массивы  представляют собой  определенный тип структуры данных,

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

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

Индекс

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

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

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

RGB (аббревиатура английских слов Red — красный, 
Green- зелёный,  Blue синий) — аддитивная цветовая модель, как правило,
описывающая способ синтеза цвета для цветовоспроизведения. При задании цвета в 
App Inventor — может быть заданное четвертое значение является дополнительным и
представляет значение альфа или как насыщенный цвет. По умолчанию
альфа-значение по 100.  

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

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

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

•      
Экран:  Screen1

•      
Кнопка

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

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

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

•      
Холст

•      
Кнопка

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

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

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

•      
Надпись

•      
Изображение

•      
Текст

•      
Кнопка

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

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

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

•      
Надпись

•      
Изображение

•      
Кнопка

2.5 Рисование  

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

Холст

•      
Компонент Холст является  дополнительной  панелью приложения.

•      
Холст  используется  для рисования на нем объектов. размещения.
текста   и анимации  изображений — спрайтов.

•      
Отображение холста во весь экран требует установки параметров
“Наполнить родительский”  при задании свойств Высоты и Ширины Холста.

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

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

•      
Рисование круга/окружности на холсте требует указания параметров 
координаты X  и Y центра круга,  а также радиуса в пискелах и параметра заливки
(ложь/истина).

•      
Рисование линий на холсте требует установки параметров  X и Y
начала и конца линии.

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

Пример 2.5.1 
Приложение “Рисование”

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

Компоненты

 Кнопка  Холст

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

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

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

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

2.6 Анимация

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

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

•      
Для анимации предлагается два компонента — “Шар” и
“ИзображениеСпрайта”.  Шар это круг, для которого можно установить такие
свойства  как радиус и цвет. ИзображениеСпрайта — прямоугольное изображение, в 
качестве источника которого, может быть установлено любое загруженное
изображение.

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

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

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

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

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

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

Описание, В приложении Изображение Спрайта  на экране
управляется движением кнопок

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

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

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

•      
Проигрыватель-   предназначен для воспроизведения
аудио/видеофайла или для вибрации телефона.  Компонент Проигрыватель 
невидимый,  его лучше всего использовать для воспроизведения аудиофайлов, для
воспроизведения видео используется  компонент VideoPlayer. 

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

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

•      
ЯндексПереводчик — позволяет  переводить тексты с одного
языка на другой. Для работы с ними требуется подключение к сети Интернет. Язык
перевода задается в формате   en — английский, ru — русский, es- испанский , fr
—  французский.

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

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

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

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

•      
Диктофон — позволяет записать звук.

Пример 2.7.1  Приложение  “Распознавание речи”

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

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

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

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

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

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

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

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

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

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

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

2.8 Общение

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

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

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

•      
Позвонить — невидимый компонент, который применяется  для
набора номера и совершения звонка.

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

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

Пример
2.8.1  Приложение  “Sharing”

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

2.9 Сенсоры

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

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

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

•      
Акселерометр (G-сенсор)— позволяет отследить ускорение, которое
придается устройству, определяет ускорение устройства и используется в 
приложениях, где предполагается управлять действием приложения, изменяя
положение устройства  в пространстве, например, тряся его. 

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

•      
Датчик освещенности позволяет определить  степень наружного
освещения и соответственно настроить яркость экрана.

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

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

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

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

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

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

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

К примеру приложение  Sensor Box for Android , которое
можно скачать  из магазина Google Play   обнаруживает все доступные датчики на
устройства, и

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Глава 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» пустым  и
разрабатывать  дополнительные экраны.

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

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

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

8.      
Нажать на кнопку Merge.  Программа генерирует aia файл, соединив в нем
экраны.

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

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

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

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

3.2 Рекомендации к созданию итогового проекта —
приложения

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

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

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

1.________________________________________________________________

2.__________________________________________________________________
 

3.___________________________________________________________________
 

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

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

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

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

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

•      
видимые

•      
невидимые

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

_______________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 видимые
o Кнопка
o Надпись
o Надпись

              невидимые

                        o    Звук

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

Данный практикум знакомит с основами  программирования
мобильных устройств в среде визуального программирования MIT App Inventor.
Практические задания позволяют получить навыки создания мобильных приложений и
оценить  полезность и значимость  развития навыков  программирования  для
жизни. Выполнив задания практикума Вы сможете освоить  основные принципы
создания мобильных приложений. Научиться программировать можно только
программируя. Успехов в создании приложений! Новых идей и новых программ!!

Литература

1.   
Kerfs  J. Beginning
Android Tablet Games Programming. – 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, Blackberry, 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.    Я дилетант. Мобильные приложения своими
руками http://idilettante.ru/category/mobilnyeprilozeniya/

После первого урока, на котором было разработано простейшее приложение по включению вспышки камеры смартфона детям предстоит написать программу, где будут меняться отображаемые экраны. Второй урок посвящен изучению дизайнерских элементов Апп Инвентор и их свойств. Дети будут многократно делать одно и тоже действие для разных объектов. Программный код пока останется на элементарном уровне. Задача второго урока адаптировать школьников к среде разработки App Inventor. В этом поможет программирование многоэкранного приложения с простейшим функционалом. Такая разработка потребует от детей многократного повторения однотипных действий и изменения свойств объектов. Представим, что вместо мобильной версии сайта, предстоит разработать информационно-рекламное приложение в App Inventor с переходом на различные информационные экраны.

ОГЛАВЛЕНИЕ:

• Настройки интерфейса и программный код для перехода с экрана на экран в приложении на базе Android
• Ограничения для многоэкранных приложений в среде AppInventor
• Виртуальный экран приложения (обработка атрибута «Видимость»)
• Передача информации с одного экрана программы в другой

Первое многоуровневое приложение в Апп Инвентор 2

Возьмем за основу сайт компании занимающейся производством оборудования по обработки денег — Cassida и напишем информационное приложение. На первом экране мы отобразим логотип компании и сделаем небольшое меню, при нажатии на пункты которого будет открываться другой экран разрабатываемого в App Inventor приложения. Изображения для второго урока в Апп Инвентор можно скачать в архиве к уроку. 

Пошаговая инструкция для первого экрана в разделе Дизайн:

Дизайнерские работы в App Inventor закончены и требуется написать программный код для размещенных элементов. Для этих действий надо перейти в раздел Блоки и последовательно выбирая каждый элемент собрать программу из визуальных частей. Искомый раздел находится в правом верхнем углу среды разработки App Inventor. Щелкаем на него и начинаем программировать!

Пишем программный код для проекта в App Inventor

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

Требуется написать код для одного события — нажатия кнопки Назад на смартфоне. Перетаскиваем выделенный на верхней фотографии элемент в белое поле редактирования кода. Заострите внимание детей на событии Инициализации (запуска) приложения! Обычно в приложениях пишется много кода для этого момента. Код будет состоять из двух блоков: щелчок по кнопки назад + закрыть приложение (блок находится в разделе Управления (слева на мониторе)):

Далее пишем код для открытия нужного следующего экрана приложения при нажатии определенной кнопки в меню главного экрана (фотография увеличивается и открывается в новой закладки при нажатии на нее):

В левой верхней части монитора ищем кнопку — Добавить Экран (показана на фотографии выше). Нажимаем на нее и создаем требуемое количество окон приложения. Далее возвращаемся на главный экран программы — Screen1. Порядок действий при построении визуальных блоков в App Inventor. Вначале щелкаете по объекту, в открывшемся меню выбираете действие при нажатии кнопки, далее перетаскиваете программный блок в область программирования. Переходите в раздел управление и находите в нем блок:

Объединяете оба блока. Далее переходите в раздел левого меню Текст добавляете к соединенным блокам компонент:  Перетащив все в зону программирования и объединив как показано на экране пишите правильное название открывающихся экранов. Пример готового проекта можно посмотреть по ссылке — http://ai2.appinventor.mit.edu/?galleryId=6199244156960768

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

Ограничения по количеству окон в appinventor

Когда ты только начинаешь работать с программой, то даже не догадываешься, что есть определенные ограничения. В среде разработки App Inventor рекомендуется создавать не более 10 экранов.На английском языке с ограничением многоэкранного приложения можно ознакомить на официальном сайте. Для русскоязычной аудитории я сделаю краткую выжимку и перевод важных значений!

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

Это вовсе не значит, что вы не можете добавить 15 экранов — можете. Но вы берете на себя риски,что при компилировании может что-то пойти не так. При высоком уровне нагрузки во время компиляции готового приложения будет автоматически остановлена. Соответственно разработчику или ученику потребуется уменьшить количество экранов в приложении и сделать еще одну попытку создания apk — файла.

В качестве альтернативы создатели среды appinventor предлагают использовать настройки видимости и менять информацию на экране за счет программирования этого атрибута. С точки зрения обучения детей программированию — это абсолютно верный подход. Такое ограничение позволяет включить фантазию и простимулирует изучение программирования атрибутов для элементов на форме.

Код для программирования виртуального экрана в Апп Инвентор

Первым делом выбираем кнопку, по которой будет нажимать пользователь для перехода в новый экран приложения. Далее находим для каждого элемента обработку атрибута видимость (показано на рисунке ниже в правой части). Перетаскиваем эти значения внутрь блока и присваиваем атрибуту параметр истина или ложь. Причем: истина — объект будет виден на экране, ложь — объект исчезнет с экрана. Не забываем добавить кнопку НАЗАД для полного возврата значений отображаемых элементов при первичном переходе на экран (нажми на фотографию программного кода, чтобы рассмотреть подробнее).

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

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

ПЕРЕДАЧА ОДНОГО ЗНАЧЕНИЯ В СЛЕДУЮЩИЙ ЭКРАН

Последовательность действий и описание всех процессов отображается на картинке ниже. Но на всякий случай я сделаю небольшое описание после размещенной фото — инструкции по переносу значения с экрана на экран в программе appinventor (для увеличения описания блок — кода нажми на фото инструкцию):

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

ПЕРЕДАЧА НЕСКОЛЬКИХ ЗНАЧЕНИЙ НА НОВЫЙ ЭКРАН

Зачастую обмен данными между экранами осуществляется по нескольким значениям. Можно использовать базу данных для приложения, но есть и еще один легкий способ запрограммировать задуманную процедуру. Для этого выбираем какое действие и какого элемента будет отвечать за передачу данных. В моем случае — это щелчок по кнопке, но может быть и переход на новый экран, и нажатие кнопки на смартфоне. Вот как будет смотреться блочный код app inventor (щелки на изображение для увеличения):

Программно блочный код на втором экране приложения прост и описан на следующей фотографии (для увеличения нажмите на фото):

Обратите ВНИМАНИЕ, что на второй экран информация попадает в момент запуска этого экрана, а вовсе не по нажатию кнопки! Программный код для обмена данными между экранами можно прикрепить к любому действию в многоэкранном приложении.

ПОЛУЧЕНИЕ ИНФОРМАЦИИ С ПЕРВОГО ЭКРАНА НАХОДЯСЬ НА ВТОРОМ

Опишу нештатную процедуру для Апп Инвентор, которая вполне работает и которая не описана в мануале на английском языку. Для написания такого программного кода придется использовать базу данных. В нашем случае — это TinyDB. Краткое описание на фотографии ниже (открывается в отдельном окне и увеличивается при нажатии на нее):

На первом экране соберем программные блоки в следующем порядке (подробнее при нажатии на фото инструкцию):

А теперь разберем подробнее:

(в стадии наполнения, извините за неудобства)

Полезные ссылки по appinventor:

• Как опубликовать приложение в Google Play
• Дополнительные внешние компоненты для App Inventor (на стадии разработки и наполнения)

Дополнительные уроки по Апп Инвентор 2:

• Создать фонарик в App Inventor
• Получение адреса и координат местоположения (в стадии подготовки, извините за неудобства)
• Реальное приложение по доставке питьевой воду по средствам СМС-уведомлений  (в стадии подготовки, извините за неудобства)