Как сделать иконку приложения в mit app inventor

Обновлено: 19.05.2024

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

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

Developing Hidden Object Mobile Games using the MIT App Inventor

In this paper, we consider the process of developing a simple game, such as searching for items, for mobile devices running on the Android OS using the MIT App Inventor . A game algorithm is developed, code blocks are given. The article is intended for schoolchildren who are fond of programming and will be useful for computer science teachers when used in additional classes or organizing project and research activities of computer science children. Keywords: MIT App Inventor , mobile applications , training in the creation of mobile applicati

Разработка мобильных игр в жанре «Поиск предметов» с помощью MIT

Нефтекамский филиал ФГБОУ ВО «Башкирский государственный университет»,

Аннотация: В данной работе рассматривается процесс разработки игры, наподобие поиска предметов, для мобильных устройств, работающих на базе ОС Android, с помощью MIT App Inventor. Разработан алгоритм игры, приведены блоки кода. Статья предназначена для школьников и студентов, увлекающихся программированием, и будет полезна для преподавателей информатики, при использовании на дополнительных занятиях или организации проектной и исследовательской деятельности школьников и студентов по информатике.

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

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

Роль мобильных приложений в сегодняшней повседневной жизни трудно переоценить. Мобильные технологии используются для решения самых разнообразных задач: навигация внутри зданий [1], поиск нужных рейсов [2], строительство [3], вызов экстренных служб [4], и т.д. И, конечно же, немалую долю приложений составляют игры.

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

В последние годы главным направлением развития IT отрасли являются облачные вычисления, в том числе и для мобильных ПО [5]. В данной работе рассматривается алгоритм разработки подобной игры с помощью среды MIT App Inventor. MIT App Inventor

Работа в ней не требует знания языка программирования Java и Android SDK, достаточно знания элементарных основ алгоритмизации [6]. Для работы в MIT App Inventor необходимо наличие Google или Google Apps аккаунта, а построение программ осуществляется в визуальном режиме с использованием блоков программного кода [6].

MIT App Inventor имеет несложный, интуитивно понятный интерфейс, который позволяет разрабатывать простейшие приложения даже школьникам, и не требует специальных знаний и опыта работы в данной области (достаточно лишь знаний основ алгоритмизации и программирования) [V], что поможет избежать или упростить проблемы, с которыми сталкиваются учителя и ученики при изучении темы «Алгоритмизация и программирование» [8].

Язык MIT App Inventor очень похож на Scratch, в его основе лежит тот же принцип перетаскивания визуальных кирпичиков и собирания программы из блоков. Отличие App Inventor от Scratch состоит в том, что App Inventor ориентирован не на десктопное использование, а предназначен для создания приложений под мобильное устройство - смартфон или планшет с ОС Android. Приложения на App Inventor умеют «понимать» данные акселерометра мобильного гаджета, управлять встроенной камерой, видят, как ориентирован телефон в пространстве и многое другое [9]. Например, в работе [10] на App Inventor разработан проект удаленной автоматизированной системы голосового управления контроллером arduino с помощью телефона или планшета.

Итак, создадим новый проект. Интерфейс языка программирования MIT App Inventor состоит из двух основных частей - дизайнера и редактора блоков [9]. Сначала мы находимся в режиме «Дизайнер». В этом режиме

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

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

Рис. 1. - Режим «Дизайнер» для игры

Элемент «надпись» будет содержать название животного, изображение которое игрок должен найти и кликнуть мышкой (рис. 1). Уведомитель Notifier будет нас уведомлять об окончании игры (когда найдены все предметы).

Теперь можно приступить к разработке программного кода игры. Для этого переходим в режим «Блоки». Режим «Блоки» используется для программирования поведения мобильного приложения и его компонент [6].

Сначала создаем список животных (рис. 2):

в создать список

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

когля 1ЯЯ95ЯИ Ини! иапизитвять

делать присвоить ПЕПМЯИ . ÉrJ^w ¡В в выбраггь это элемент списка получить ЯВМВШЯ^Д |

индекса получить ItlbSV ИИИШЮ

Рис. 3. - Создание индекса текущей картинки

Поскольку действия кнопок будут однообразными, удобно создать процедуру. Назовем ее, соответственно, «действие_кнопки» (рис. 4). Алгоритм примерно следующий:

1) Сравниваем загаданную надпись и надпись на нажатой кнопке;

2) Если они совпадают, то предмет найден, заменяем изображение картинки на пустое изображение (предмет как бы исчезает).

3) Переменную индекс увеличиваем на единицу и загадываем название следующего животного из списка;

4) Если вдруг значение индекса достигло значения 13, то это означает, что все картинки найдены, и игру нужно заканчивать.

то присвоить Кнопка

в И выбрать эта элемент списка получить (¡1

индекса получить (3

Рис. 4. - Действие кнопки

Теперь наше действие «навешиваем» на все кнопки. В цикле, увы, это сделать не получится, поэтому делаем это вручную для всех кнопок (рис. 5):

когда IflTHÎIFTP .Щелчок

делать вызвать ИДВВЯЗВ! е кнопки т 1

делать вызвать КШшЭ

г-——^-^щ когда GŒBD Щелчок

делать вызвать ИТШДЯТ^^ПДГТР

В меню проекта выбираем «Построить» - «Приложение (создать QR-код для скачивания. apk)» (рис. 6):

Компиляция приложения достаточно быстрая и составляет порядка нескольких секунд. В случае успешной компиляции появляется QR код мобильного приложения (рис. 7).

Теперь фотографируем QR код с помощью MIT App Inventor Companion, и происходит скачивание приложения на телефон. Устанавливаем приложение (при этом необходимо разрешить в мобильном устройстве установку приложений из неизвестных источников).

Приложение успешно установлено и работает (рис. 8).

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

1. Сафронов Р.Ю. Разработка мобильного приложения для 10б с использованием технологии «1Ьеасоп» для решения задач навигации внутри

6. Ливенец М.А., Ярмахов Б.Б. Программирование мобильных приложений в MIT App Inventor: Практикум. - 2016. - 100 с.

7. Шалина О.Н. Некоторые аспекты обучения школьников созданию Android-приложений // Достижения и приложения современной информатики, математики и физики. Материалы VI Всерос. науч.-практ. заоч. конф. - Уфа: Издательство «Башкирский государственный университет», 2017 - С. 134-139.

8. Пьянзина И.Н. Программируем с Mit App Inventor 2. Информатика в школе. 2018. №3. - С. 19-22.

10. Арменков А.Г. Обучение программированию школьников. Создание приложения в среде Mit App Inventor // Вестник науки и образования, 18 (72). - 2019, С. 73-76.

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

ОГЛАВЛЕНИЕ:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Q: Размер моего приложения превысил 5 Мб. AppInventor не может его упаковать.

Q: Почему вы не выкладываете готовые примеры приложений или их скриншоты сюда? Зачем эта программисткая тарабарщина? Я хочу готовые примеры.

A: AI был создан для обучения программированию. Конечно, многие используют его с целью получения выгоды. Это не запрещено. Но, я не хочу чтобы кто-то получил деньги за то, что взял чужое решение и заменил в нем картинки. Я готов помочь Вам разобраться с проблемами написания приложений на AI, но я не готов писать их за Вас.

Q: Я зарегистрировался на маркете. Теперь я могу продавать приложения?

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

A: Вам понадобится ActivityStarter и что-нибудь по чему можно кликать. Я умышлено пищу «что-нибудь», чтобы не ограничивать вас кнопками, как это сделано в английских туториалах. Подойдет все что может обрабатывать события onClick или onTouch.
В поле action ActivityStarter пишем android.intent.action.VIEW
В поле DataUri вставляем сылку на ваше приложение (не на это, а на то которое рекламируем естественно).
Далее:
WhenAdClick.Click(CallActivityStarter1.StartActivity)
В данном случае AdClick – кнопка, backgroundImage которой является баннером другого приложения.
Данный способ может быть значительно усовершенствован программно. Например, можно добавить динамическую замену картинки баннера или брать картинку из Интернета.

Q: Как мне максимально уменьшить размер моего приложения?

A: Для начала оптимизируйте код. Если вы используете несколько раз подобные куски кода, возможно, имеет смысл создать отдельную процедуру.
Используйте Advanced Components.
Оптимизируйте графику. Используйте графику в формате png. Уменьшайте палитру png, некоторым элементам дизайна не требуется больше 2-х цветов. Используйте прозрачный фон. Начиная с релиза Version 127, July 24, 2012 появилась возможность вращать маштабированные спрайты, не используйте разные картинки для анимации поворота.
Не делайте background экрана или canvas большого размера. Большинство устройств до сих пор на поддерживают HD, а если поддерживают на 4-х дюймах разницы никто не заметит. Уменьшайте DPI картинок. Для кнопок и других маленьких элементов вполне достаточно 12 – 36 dpi. Используйте сжатые звук и видео. Для фоновой музыки достаточно ogg c 64кб/сек.

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

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

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

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

Массачусетский технологический институт

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

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

2 шаг: MIT App Inventor

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

Напоминаем: при обращении на данный сайт от вас потребуется наличие аккаунта 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 часа.

Читайте также: