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

Операционная система 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 часа.

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