Визуальное программирование для Android

App Inventor (appinventor.googlelabs.com) - это веб-сервис Google, представляющий собой браузерный визуальный конструктор приложений для мобильной ОС Android. Создание приложений происходит в визуальном режиме методом "тащи-бросай" из готовых визуальных блоков. Поэтому App Inventor может быть интересен как учащимся и любителям программирования, так и интересующимся разновидностями визуального программирования.

Визуальное программирование

Веб-сервис App Inventor корпорация Google представила в середине прошедшего лета. Этот сервис ставит своей целью лёгкое и быстрое создание прямо в браузере программ для мобильных систем на базе Android. Сервис предназначен, в первую очередь, для не очень искушённого в программировании человека - это учащиеся, школьники и интересующиеся любители.

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

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

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

Таким образом, несмотря на то, что основным языком создания программ для "Андроида" является Java, знание этого языка в случае использования App Inventor совершенно не обязательно.

Регистрация

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

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

Настройка

Хотя App Inventor является веб-сервисом и работает через браузер, одного браузера будет недостаточно, и поэтому потребуется скачать дополнительные компоненты, а также настроить специальным образом смартфон. Эта настройка может вызвать некоторые трудности для пользователя. Остановимся на ней подробнее.

Для работы в App Inventor нужен браузер - чем современнее, тем лучше. Хотя на сайте сервиса утверждается, что может подойти даже Internet Explorer 6. Основное требование к браузеру - поддержка работы Java.

Поэтому для работы веб-сервиса в системе обязательно должна быть установлена JRE 1.6. Для систем GNU/Linux не рекомендуется использовать OpenJDK, лучше установить официальную версию Oracle. И, соответственно, в настройках браузера необходимо включить поддержку Java. В Ubuntu, например, для этого нужно установить пакет sun-java6-plugin.

Ещё в отношении браузеров рекомендуется, если пользователь имеет несколько браузеров в системе, выбрать и использовать для работы с App Inventor один из них, так как сервис может активно использовать кэширование данных.

Одной среды JRE недостаточно для работы. Нужно ещё с официального сайта App Inventor скачать и установить дополнительный набор софта App Inventor Extras Software размером около 50 Мб (имеется набор для операционных систем Windows, Mac OS, Linux; для Debian и Ubuntu - установочные deb-пакеты).

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

Естественно, нужно настроить и сам гуглофон. Для этого необходимо в настройках смартфона в разделе "Приложения" включить установку программ из неизвестных источников. Здесь же, в настройках приложений, в меню "Разработка" нужно включить опции "Отладка по USB" и "Оставить включённым". Также нужно выключить в разделе настроек "Дисплей и звук" автоматическую ориентацию экрана.

Но следует быть готовым и к тому, что ваша модель смартфона может не определиться. Так, например, Huawei не определился в Ubuntu. В этом случае вместо подключения смартфона можно запустить эмулятор, который входит в состав App Inventor Extras Software. В Ubuntu этот эмулятор находится в каталоге /usr/google/appinventor-extras/commands-for-appinventors.

Создаём интерфейс

Закончив настройку ПК и смартфона, приступаем к более приятному занятию - созданию программы. Для этого входим в свой экаунт на appinventor.googlelabs.com и первоначально попадаем в менеджер проектов. Создав здесь имя проекта, автоматически переходим в визуальный конструктор интерфейса программы.

Окно конструктора состоит из четырёх областей.

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

Сами же эти элементы интерфейса находятся с левой стороны. Эта область называется "Палитра" (Palette). Палитра разделена на секции, в которых компоненты интерфейса сгруппированы по темам: базовые элементы, мультимедиа, сенсоры смартфона, компоненты коммуникации и дополнительные элементы. Из этой палитры элементы и перетаскиваются мышью на просмотрщик.

С правой стороны просмотрщика находится список элементов, задействованных в приложениях, а также список задействованных файлов-ресурсов - картинки, звуки и т. д. Ещё правее имеется область параметров выделенного элемента. Здесь можно настроить цвет, размер текста, шрифт и прочие специальные параметры выделенного компонента программы.

Для тех, кто уже сталкивался с другими визуальными конструкторами интерфейсов, конструктор App Inventor никакой сложности не представит. Процесс создания интерфейса несложен: перетаскиваем из палитры нужные компоненты, а в области параметров задаём нужные значения для каждого выбранного элемента.

Логика программы

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

Для этого в конструкторе компонентов нужно нажать кнопку "Blocks editor", и должна запуститься загрузка этого редактора логики приложения. Редактор блоков - это отдельное java-приложение, которое запустится в отдельном окне, а не в браузере.

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

Для синхронизации с устройством нужно в редакторе блоков нажать кнопку "Connect phone". Если конкретный смартфон не поддерживается, то можно, как уже упоминалось выше, запустить эмулятор "Андроида".

В редакторе блоков всем созданным в конструкторе компонентов можно задать логику. Список всех компонентов программы открывается кнопкой "My Blocks". Если щёлкнуть по выбранному элементу, то откроется список действий, которые можно применить к данному элементу.

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

Кроме графических блоков действий программы, имеется список блоков "Built-in", предоставляющих общую функциональность: работа с переменными и текстом, работа со списками, математическая функциональность, булевая логика, установка цвета.

Таким образом, хоть работа в App Inventor и не требует знания синтаксиса какого-то определённого языка программирования, однако здесь требуется иметь навыки и понимание работы с переменными, строками, объектами, методами, циклами, условиями. Так что совсем не знакомому с программированием человеку вряд ли удастся с ходу написать здесь какую-нибудь программу.

Пример

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

Итак, начнём:

• в конструкторе компонентов из палитры выберем элемент Image и переместим его на просмотрщик;
• в области параметров через поле Picture загрузим картинку кошки в конструктор;
• в палитре выберем компонент Sound и перетянем его на просмотрщик, где он будет обозначен как невидимый элемент;
• в области параметров через поле Source загрузим звук мяуканья;
• в палитре выберем элемент Button (кнопка) и в области параметров сделаем ей надпись "погладь кота";
• переходим в редактор логики, нажимаем кнопку My Blocks и выбираем здесь компонент Button1;
• появится список визуальных блоков действий, здесь выбираем блок Button1.Click и перетаскиваем его на рабочий стол;
• из списка компонент My Blocks выбираем компонент Sound1, а дальше и из списка появившихся блоков выбираем блок Sound1.Play и помещаем его внутрь блока Button1.Click.

Вот приложение и готово. Как видите, ни одной строчки кода мы не написали, а всё сделали в визуальном режиме.

Осталось его только протестировать в смартфоне или в эмуляторе. Если всё работает хорошо и кошка мяукает, то наше приложение можно сохранить в подключенном телефоне или на диске как файл apk. Для этого возвращаемся в редактор компонентов и выбираем соответствующую операцию в меню "Package for Phone".

Что касается нашего кота, то установочный файл apk получился размером 1,3 Мб при размере картинки и звука 200 килобайт. Такая вот плата за визуальность.

Послесловие

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

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

А ещё в случае визуального программирования возникает один немного забавный вопрос. Ведь если в визуальном программировании нет никакого исходного кода, то как тогда сделать свою программу, например, open source? Если приложение сделано визуальным способом, то открывать, получается, нечего.

Михаил АСТАПЧИК