После первого урока, на котором было разработано простейшее приложение по включению вспышки камеры смартфона детям предстоит написать программу, где будут меняться отображаемые экраны. Второй урок посвящен изучению дизайнерских элементов Апп Инвентор и их свойств. Дети будут многократно делать одно и тоже действие для разных объектов. Программный код пока останется на элементарном уровне. Задача второго урока адаптировать школьников к среде разработки App Inventor. В этом поможет программирование многоэкранного приложения с простейшим функционалом. Такая разработка потребует от детей многократного повторения однотипных действий и изменения свойств объектов. Представим, что вместо мобильной версии сайта, предстоит разработать информационно-рекламное приложение в App Inventor с переходом на различные информационные экраны.
ОГЛАВЛЕНИЕ:
- Настройки интерфейса и программный код для перехода с экрана на экран в приложении на базе Android
- Ограничения для многоэкранных приложений в среде AppInventor
- Виртуальный экран приложения (обработка атрибута «Видимость»)
- Передача информации с одного экрана программы в другой
Первое многоуровневое приложение в Апп Инвентор 2
Возьмем за основу сайт компании занимающейся производством оборудования по обработки денег — Cassida и напишем информационное приложение. На первом экране мы отобразим логотип компании и сделаем небольшое меню, при нажатии на пункты которого будет открываться другой экран разрабатываемого в App Inventor приложения. Изображения для второго урока в Апп Инвентор можно скачать в архиве к уроку.
Пошаговая инструкция для первого экрана в разделе Дизайн:
- Загружаем графические элементы из скаченного архива (Обратите внимание, что изображения требуется уменьшить до 300px по ширине перед загрузкой в Апп Инвентор);
- Находим тип управления Изображение в левом блочном меню Интерфейс пользователя среды разработки App Inventor и переносим эту часть на рабочий стол смартфона, вкладки Дизайн;
- Переходим в блок Расположение и переносим элемент Вертикальное расположение;
- Устанавливаем фон для созданной области выбрав картинку fon в свойствах Изображение для типа Вертикальное расположение;
- В свойствах Ширина ставим галочку Наполнить родительский;
- В свойствах ВыровнятьПоГоризонтали выбираем Центр;
- Далее загружаем нужное количество типов управления Кнопка внутрь области Вертикальное расположение (обратите внимание, что они должны выровняться по центру);
- В свойствах Ширина ставим галочку Наполнить родительский;
- В свойствах Изображение выбираем графический элемент button для каждой кнопки;
- Щелкаем по элементу Screen1 в блоке Компоненты (обратите внимание, что название первого экрана в App Inventor изменить нельзя)
- В свойствах экрана выставляем следующие значения для некоторых полей:
- ВыровнятьПоГоризонатли — Центр;
- ВыровнятьПВертикале — Верх;
- AppName — Cassida (как будет называться приложение в установочном apk-файле)
- Иконка — выбираем изображение icon.png (логотип приложения в андройд)
- Прокручиваемы — ставим галочку (тогда у разрабатываемого окна появится поле прокрутки);
- Заголовок — записываем текст, который следует отобразить в верху подготавливаемого изображения
- НомерВерсии — оставляем без изменения (в дальнейшем помогает делать обновления)
Дизайнерские работы в 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 предлагают использовать настройки видимости и менять информацию на экране за счет программирования этого атрибута. С точки зрения обучения детей программированию — это абсолютно верный подход. Такое ограничение позволяет включить фантазию и простимулирует изучение программирования атрибутов для элементов на форме.
Вместо того, чтобы создавать приложение с несколькими экранами. Вы можете использовать один экран и показывать и скрывать кнопки (с помощью свойства Visible) при изменении изображения на экране.
Код для программирования виртуального экрана в Апп Инвентор
Первым делом выбираем кнопку, по которой будет нажимать пользователь для перехода в новый экран приложения. Далее находим для каждого элемента обработку атрибута видимость (показано на рисунке ниже в правой части). Перетаскиваем эти значения внутрь блока и присваиваем атрибуту параметр истина или ложь. Причем: истина — объект будет виден на экране, ложь — объект исчезнет с экрана. Не забываем добавить кнопку НАЗАД для полного возврата значений отображаемых элементов при первичном переходе на экран (нажми на фотографию программного кода, чтобы рассмотреть подробнее).
Обмен данными между экранами App Inventor
Обмен данными между экранами в приложениях Android — это стандартная рутинная операция, поэтому ее надо обязательно рассмотреть в теме посвященной многоэкранным приложениям App Inventor. Обычно программируется передача нескольких параметров, но для начала рассмотрим простой код для передачи на открывающийся экран всего одного значения.
ПЕРЕДАЧА ОДНОГО ЗНАЧЕНИЯ В СЛЕДУЮЩИЙ ЭКРАН
Последовательность действий и описание всех процессов отображается на картинке ниже. Но на всякий случай я сделаю небольшое описание после размещенной фото — инструкции по переносу значения с экрана на экран в программе appinventor (для увеличения описания блок — кода нажми на фото инструкцию):
После этого переходим на второй экран приложения, тот куда нам требуется перенести информацию. На нем нужно указать в какое поле и какое значение следует подставить. Так как происходит перенос всего одного параметра, то код будет довольно простым (фотография увеличивается и открывается в новой закладки при нажатии на нее):
ПЕРЕДАЧА НЕСКОЛЬКИХ ЗНАЧЕНИЙ НА НОВЫЙ ЭКРАН
Зачастую обмен данными между экранами осуществляется по нескольким значениям. Можно использовать базу данных для приложения, но есть и еще один легкий способ запрограммировать задуманную процедуру. Для этого выбираем какое действие и какого элемента будет отвечать за передачу данных. В моем случае — это щелчок по кнопке, но может быть и переход на новый экран, и нажатие кнопки на смартфоне. Вот как будет смотреться блочный код app inventor (щелки на изображение для увеличения):
Программно блочный код на втором экране приложения прост и описан на следующей фотографии (для увеличения нажмите на фото):
Обратите ВНИМАНИЕ, что на второй экран информация попадает в момент запуска этого экрана, а вовсе не по нажатию кнопки! Программный код для обмена данными между экранами можно прикрепить к любому действию в многоэкранном приложении.
ПОЛУЧЕНИЕ ИНФОРМАЦИИ С ПЕРВОГО ЭКРАНА НАХОДЯСЬ НА ВТОРОМ
Опишу нештатную процедуру для Апп Инвентор, которая вполне работает и которая не описана в мануале на английском языку. Для написания такого программного кода придется использовать базу данных. В нашем случае — это TinyDB. Краткое описание на фотографии ниже (открывается в отдельном окне и увеличивается при нажатии на нее):
На первом экране соберем программные блоки в следующем порядке (подробнее при нажатии на фото инструкцию):
А теперь разберем подробнее:
(в стадии наполнения, извините за неудобства)
Полезные ссылки по appinventor:
- Как опубликовать приложение в Google Play
- Дополнительные внешние компоненты для App Inventor (на стадии разработки и наполнения)
Дополнительные уроки по Апп Инвентор 2:
- Создать фонарик в App Inventor
- Получение адреса и координат местоположения (в стадии подготовки, извините за неудобства)
- Реальное приложение по доставке питьевой воду по средствам СМС-уведомлений (в стадии подготовки, извините за неудобства)
