1. Знакомство с App Inventor
Начинаем работать с приложением App Inventor
App Inventor (App – сокращение от application, переводится как приложение. Inventor — переводится как изобретатель) — это среда визуальной разработки приложений, не требующая больших знаний в программировании. Приложение было разработано в Google Labs, а после передано Массачусетскому технологическому институту.
App Inventor — это облачная среда визуальной разработки Android-приложений. Построение программ осуществляется в визуальном режиме с использованием блоков программного кода. На компьютер устанавливать ничего не требуется, просто откройте среду разработки ai2.appinventor.mit.edu в браузере Google Chrome и начинайте творить.
Обратите внимание, что для работы с App Inventor требуется аккаунт Google. Если вы не зарегистрированы в Google, то перед началом работы вам надо будет пройти регистрацию и авторизацию. После этого приложение App Inventor и все ваши сохраненные проекты будут доступны на любом компьютере после авторизации.
Видео. Применения 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» и начнется загрузка вашего приложения. После загрузки установите приложение.
Многоэкранное приложение на App Inventor
После первого урока, на котором было разработано простейшее приложение по включению вспышки камеры смартфона детям предстоит написать программу, где будут меняться отображаемые экраны. Второй урок посвящен изучению дизайнерских элементов Апп Инвентор и их свойств. Дети будут многократно делать одно и тоже действие для разных объектов. Программный код пока останется на элементарном уровне. Задача второго урока адаптировать школьников к среде разработки App Inventor. В этом поможет программирование многоэкранного приложения с простейшим функционалом. Такая разработка потребует от детей многократного повторения однотипных действий и изменения свойств объектов. Представим, что вместо мобильной версии сайта, предстоит разработать информационно-рекламное приложение в App Inventor с переходом на различные информационные экраны.
ОГЛАВЛЕНИЕ:
Первое многоуровневое приложение в Апп Инвентор 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:
Дополнительные уроки по Апп Инвентор 2:
Блоки управления App Inventor – Control.
В App Inventor есть комплекс блоков, который найдет применение практически в любом создаваемом мобильном приложении – Control. Это название переводится как «управление», что на мой взгляд не совсем верно. Здесь действительно присутствуют блоки, которые управляют приложением, но почему-то сюда попали и блоки, которые относятся к логическим функциям, например, «если-то». Впрочем, App Inventor таков, каков он есть и будем им пользоваться.
Итак, начнем с блока, представляющего собой логические функции.
if и if else (если-то и если-то-иначе).
Это не просто единичный блок, а целая группа блоков, которую можно построить на базе основного. Ниже будет рассказано, как это сделать.
Этот блок проверяет соответствие заданному условию, то есть набор тестов. Если указанное условие выполнено, то выполняется указанное действие, иначе блок игнорируется. Его структуру можно представить как «если-то»
Этот блок тоже проверяет соответствие заданному условию, но при несоответствии ему выполняет еще какое-либо действие. Проще говоря «если-то-иначе»
Из основного блока можно получить и такой:
Здесь, как возможно вы уже догадались, получается «если – то – иначе если – то – иначе». Ну например: если а=1, то в=3, иначе, если а=2, то в=4, иначе в=5.
А вот небольшая анимашка про то, как из основного блока получить более разветвленные.
for each from to (для каждого значения от – до делать-)
Блок используется для выполнения действий с переменной, находящейся в диапазон «от- и до-» с указанным шагом. Имя переменной можно указать вместо «number».
for each in list (для каждого из списка)
А этот блок App Inventor выполняет (do) определенные действия для значений из указанного списка (list)
While (в делать в тот момент, когда)
Блок, позволяющий проводить тестирование на некое условие/состояние и выполнять действие при выполнении этого условия или соответствии состоянию.
if then else (если-то-иначе)
Набор тестов. По смыслу схожи с первым описанным здесь блоком «если-то-иначе».
Do (выполнить и вернуть результат)
Иногда в процедуре или другом блоке возникает необходимость произвести некую операцию и вернуть результат этой операции – вот для этого и пригодится этот блок.
evaluate but ignore result (рассчитать но игнорировать результат)
Это, по-сути, блок-затычка: рассчитать результат, но игнорировать его. Он может пригодится в рамках процедуры, где некий результат надо рассчитать, но не использовать его в рамках данной процедуры.
open another screen (открыть другой экран)
Открывает экран с указанным именем. Сюда необходимо прикрепить вот такой блок
и при срабатывании блока откроется Экран2
open another screen with start value (открыть другой экран с начальным значением)
Открывает другой экран и передает ему значение, указанное в блоке, прикрепленном к нижнему сокету.
(получить начальное значение)
Возвращает значение, переданное с предыдущего экрана. Этот блок используется в том случае, если на предыдущем экране был использован блок «open another screen with start value»
close screen (закрыть экран)
Закрывает текущий экран. При этом открывается предыдущий.
close screen with value (закрыть экран с результатом)
Закрывает текущий экран и возвращает значение на предыдущий экран.
close application (закрыть приложение)
get plain start text (получить начальный текст)
Этот блок позволяет получать обычный текст из других приложений (не аппинвенторовских), когда он был запущен с помощью этого другого приложения. Если не было передано никакго текста, то блок возвращает пустой текст.
close screen with plain text (закрыть экран и отдать текст)
Закрывает экран и передает текст в приложение, которое открыло этот экран (это может быть не аппинвенторовское приложение). Этот и предыдущий блоки позволяют обмениваться данными (незначительным объемом) с другими android-приложениями.
Вот, вкратце, обзор возможностей, которые предоставляют блоки Control App Inventor.
App Inventor — создание Android-приложений для каждого: Урок 1
Для начала я расскажу вам немного про App Inventor, а потом мы напишем первое приложение, где будем кормить кота.
App Inventor может использовать человек, не владеющий языками программирования. По принципу действия мне он напоминает WYSIWYG-редактор. Пока регистрация доступна только с разрешения Google. App Inventor освобождает вас от написания кода, вместо этого вы используете подобие блок-схем.
Приступаем к работе
Вначале настройте ваш компьютер и телефон для работы с App Inventor. Затем создайте новый проект, назовите его «HelloPurr», откроете редактор блоков и присоедините телефон. Затем перейдите обратно в окно браузера.
Сейчас в вашем браузере должен быть открыт appinventor.googlelabs.com, а на вашем телефоне должен быть запущен App Inventor Phone Application. Браузер должен быть открыт на странице конструктора, которая выглядит так:
Обзор процесса разработки
В App Inventor приложения строятся объединением стандартных компонентов. Компоненты являются основным элементом разработки Android-приложений, как ингредиенты в рецепте. Некоторые компоненты очень просты, например Label(метка), который просто показывает текст на экране, или Button, который реализует кнопку. Другие же компоненты более сложны: Canvas, в котором можино располагать изображения или анимацию; accelerometer (motion) sensor, который работает как контроллер от Wii, и определяет когда вы трясете или переворачиваете телефон; компоненты, отправляющие сообщения, проигрывающие видео, получающие данные с сайтов, и много других.