Помнится, в одной из статей по App Inventor я писал, что была попытка его русификации, но мне она не очень понравилась. Уже и не упомню почему. А русификация из App Inventor2, тем временем, пропала.
Но мир не стоит на месте и вот опять у нас есть Апп Инвентор на русском языке. Это случилось благодаря усилиям энтузиастов из сообщества «Учимся с Google» . Дальше я постараюсь разобраться в том, что получилось, а сейчас, для начала, аплодисменты энтузиастам! Ну, просто потому, что получилось весьма неплохо, на мой взгляд, и работа, всяко, нужная.
Но, от восторгов к делу.
Переключиться на русский язык можно в выпадающем меню выбора языков, вверху-справа.
Теперь, что понравилось:
Грамотный и приятный перевод на русский язык различных менюшек на рабочих столах «Дизайнер» и «Блоки»
Это сразу позволит не потеряться человеку далекому от программирования и английского языка. Я и сам далек от первого, и лишь чуть ближе ко второму, поэтому нравится, черт возьми! Хотя уже и привык к английскому интерфейсу.
Нажимаем вопросик рядом в меню «Палитра» и что видим?
Ба! Да это маленькая подсказка, так же переведенная на наш, великий и могучий. Тоже здорово! Если с такой штукой, как кнопка, я разобрался, не прибегая к словарю, то, например, чтобы разобраться со спрайтами, мне пришлось почесать затылок. А тут все на блюдечке.
Идем дальше и смотрим блоки. И тут полное благолепие и русификация.
Признаюсь честно, что вроде бы разобрался с AI (ну, хорошо, только с его частью), но некоторые блоки заставляют напрягаться, так как, опять же, английский мой, увы, хромает. Так что App Inventor на русском и тут в помощь.
Еще есть в App Inventor указатель ошибок. И его ребята не обошли стороной.
В общем, повторюсь, русификация мне понравилась.
Есть, конечно, маленькие косячки: например, пропущены некоторые слова в «Свойствах» компонентов.
Но, ей богу, это такая мелочь!
Да, вот, всплывающие подсказки у блоков, по-прежнему, на английском. А ведь их правильного понимания зачастую не хватает.
Теперь о том, перейду ли я лично на русифицированную версию. Скорее, нет, и вот почему: подавляющее большинство языков программирования используют именно английский язык. Отсюда вывод – тот, кто хочет продвинутся дальше в изучении программирования, должен работать с языком оригинала. А я хочу.
И следующий довод: в процессе разбирательства с AI я поднял свой уровень английского. А это тоже весьма полезно.
Но! Я все равно буду обращаться к русскоязычному App Inventor, так как не все и не всегда понятно. И более того, не всегда есть время и желание учить иностранный язык, если надо написать себе, скажем, приложение-будильник с собственными фичами. И тут Апп Инвентор на русском поможет. А если вы хотите обучить созданию мобильных приложений детишек, которые только начали изучать английский? Да на англоязычном AI вы им только головы заморочите. Ведь вспомните, что эта штуковина и создавалась для обучения.
Так что, проделанный труд заслуживает всяческого внимания и уважения. И, вне всякого сомнения, использования.
Еще неплохо бы ребятам было создать полный русский учебни… Стоп! Стоп! А что тогда буду делать я?
MIT App Inventor 2
- среда визуальной разработки, позволяющая легко создать приложение для android устройств даже не обладая знаниями в области программирования.
Работает эта среда разработки прямо из браузера. Скачивать и устанавливать ничего не нужно. Полученный результат можно просматривать на android-устройстве. Готовые приложения можно размещать в Play Market. App Inventor 2 поддерживает русский язык.
Сразу, при старте, появляется возможность создать свое уникальное приложение, например приложение которое может управлять другими bluetooth-устройствами (Простая Bluetooth машинка на Arduino), ну или игру на смартфон.
В онлайн редакторе MIT App Inventor 2 приложения строятся на базе стандартных компонентов, которые являются основным элементом разработки Android-приложений. В интернете приведено много примеров как использовать комбинацию блоков, компонентов чтобы получилось то приложение которую мы хотим сделать.
Окно конструктора
В этом окне настраивается как будет выглядеть приложение (какие элементы будут отображаться на экране и т.п.). Посмотрев на окно конструктора вы увидите, что оно состоит из нескольких областей:
- palette (палитра) - область где показаны доступные компоненты. Палитра разделена на секции.
- viewer (просмотр) - область куда добавляются компоненты и где вы работаете с ними. В этой области можно посмотреть как ваше приложение будет выглядеть на вашем смартфоне.
- components (компоненты) - область где показываются используемые компоненты. Компоненты в этой области можно переименовывать или удалять, также удобна для их редактирования с помощью области Properties.
- media (медиа) -область куда загружаются используемые картинки и аудио.
- properties (свойства) - область где редактируются свойства компонентов: цвет, размер текста, шрифт, и прочее.
Окно редактора блоков
В этом окне мы настраиваем поведение нашего смартфона при воздействии на него каких либо внешних факторов. Например при нажатии на клавишу на экране смартфона подается сигнал приветствия или при изменении состояния датчиков (акселерометра, датчика приближения и т.п.) гаснет экран смартфона для экономии энергии аккумуляторной батареи.
Увеличить встроенную функциональность App Inventor можно при помощи web-технологий и расширений. В сети можно найти платные и бесплатные расширения (порядка 200 на puravidaapps.com), но возникают вопросы, а насколько сложно создавать свои, что они могут дать и стоит ли тратить время на это или лучше заняться чем-то другим?
Все компоненты и блоки, доступные в App Inventor, относятся к встроенным (внутренним), а расширения - к внешним.
Встроенные возможности предоставляют интересную функциональность для начинающих пользователей, удовлетворительную для опытных и недостаточную для программистов. При этом большинство пользователей предпочтут загружать готовые расширения, а не разрабатывать их. Из этого следует простой вывод о том, что разработка расширений может быть интересна, в основном, опытным пользователям и энтузиастам. Начинающих вполне устроят встроенные возможности и имеющиеся расширения, а программистам заниматься расширениями не интересно по причине необходимости выполнения двойной работы. Зачем тратить время на создание и отладку расширения ограниченной функциональности, а затем при помощи него создавать приложение ограниченной функциональности, если можно сразу писать код на Java, пользуясь всеми доступными возможностями Android Studio IDE и Android API?
Создавать расширения для AI несложно, если имеется какой-то опыт программирования и понимание основ ООП, но по указанным выше причинам этим серьёзно занимаются единицы. Создавать функциональные расширения непрактично, а вот написание простых дополнений для расширения встроенной функциональности или создания новой может показаться интересным и полезным в плане практики занятием. Но здесь нужно определиться с подходом. Можно либо следовать концепции AI - визуальное программирование, либо расширить её элементами текстового программирования.
Если сказать грубо, то App Inventor похож на айсберг, верхушка которого видна пользователям в виде встроенной функциональности, а под водой находится и недоступна значительно большая часть. Это сделано специально в соответствии с назначением данной IDE, требующей от пользователей минимальных знаний программирования. Заложенная в App Inventor модель работы изначально не рассчитана на большую функциональность. Добавление новых свойств вызовет рост количества блоков в геометрической прогрессии. Например, добавление свойства прозрачности приведёт к появлению двух блоков для каждого виджета (для установки и возврата значения). Если таких виджетов 5, то число блоков увеличится на 10. Добавили 10 свойств, на выходе получили 100 блоков. Дополнительно к этому появятся новые поля свойств в дизайнере. В этих условиях подход “простая IDE + расширения” выглядит обоснованным, но не для тех, кто предпочитает хорошую функциональность “из коробки” без необходимости поиска и установки дополнений.
Индивидуальная настройка свойств объектов и задание жесткой связи блоков на этапе разработки приложения, с одной стороны, упрощает разработку и позволяет избежать большого количества ошибок, но приводит к возникновению статичных приложений. Если к одному блоку присоединён другой блок, то это навсегда. Изменить свойство или выбрать другой объект на этапе выполнения приложения можно только в том случае, если эта возможность была изначально заложена на этапе разработки. Для этого необходимо использовать косвенный доступ к объектам. Например, можно создать список пар “название объекта - объект” для всех объектов, а затем использовать его в функциях для доступа к разным объектам. В этом случае принимающий блок будет связан не с конкретным объектом, а со списком, из которого нужный можно получить по его ключу-имени.
Если к сказанному выше добавить сложности с реализацией групповых операций, отсутствием виджетов, методов и других нюансов встроенной функциональности, то станет понятна причина появления AppyBuilder, Thunkable, Makeroid и др., в которых увеличение функциональности реализовано за счёт количества компонентов. Больше компонентов - больше блоков. А вот при помощи расширения можно увеличить функциональность качественным образом, например, использовать один блок для доступа к десяткам свойств десятка объектов. Вот это уже действительно интересно, поскольку дополняет визуальное программирование элементами текстового для компенсации ряда недостатков встроенной функциональности AI.
Смогут ли создавать расширения те, кто слабо знаком с программированием? Да, простые смогут, воспользовавшись подходом “скопируй и измени”, но определённая подготовка всё же требуется. Без неё будет непонятно, почему расширение не компилируется и что при этом пишется на экране. Также следует сказать о том, что часть расширения, работающего с объектами Android, удобее создавать и отлаживать в Android Studio.
Разработка расширений подойдёт тем, кого, в принципе, устраивает App Inventor, но хотелось бы что-то дополнить, улучшить и упростить, а заодно и попрактиковаться в Java. Если это ваш случай, то начнём с развёртывания среды разработки.
ВКонтакте есть группа Расширения для App Inventor , где на видео и в текстовом виде дано пошаговое руководство по созданию и настройке рабочей среды, а также простой пример, возвращающий слово Test. Дублировать данный материал не имеет смысла, а вот сам пример рассмотрим в качестве быстрого введения в тему.
package vlad; import com.google.appinventor.components.runtime.*; import com.google.appinventor.components.annotations.DesignerComponent; import com.google.appinventor.components.annotations.DesignerProperty; import com.google.appinventor.components.annotations.PropertyCategory; import com.google.appinventor.components.annotations.SimpleEvent; import com.google.appinventor.components.annotations.SimpleFunction; import com.google.appinventor.components.annotations.SimpleObject; import com.google.appinventor.components.annotations.SimpleProperty; import com.google.appinventor.components.common.ComponentCategory; import com.google.appinventor.components.common.PropertyTypeConstants; import com.google.appinventor.components.common.YaVersion; import com.google.appinventor.components.runtime.util.SdkLevel; @DesignerComponent(version = YaVersion.NOTIFIER_COMPONENT_VERSION, category = ComponentCategory.EXTENSION, description = "This is a test extension", nonVisible = true, iconName = "images/notifier.png") @SimpleObject(external=true) public final class TestExtension extends AndroidNonvisibleComponent implements Component { public TestExtension(ComponentContainer container) { super(container.$form()); } @SimpleFunction(description = "This function returns the \"Test\" string") public String Test() { return "Test"; } }
Код расширения включает в себя java-код класса и аннотации, начинающиеся с символа @. Аннотации используются для указания того, что блок кода под ними должен быть обработан простым компилятором. Простой компилятор просматривает аннотации и производит интеграцию расширения в среду разработки App Inventor - создаёт для указанной функции блок (функции или свойства), поле редактирования в дизайнере и выполняет другую работу.
@DesignerComponent указывает на общие параметры компонента и то, что он относится к категории расширений и является невизуальным (в настоящее время можно создавать только невизуальные компоненты расширения)
@SimpleObject указывает на компонент, а поле external=true на то, что компонент является внешним
@SimpleFunction указывает компилятору функцию, для которой нужно создать блок. Если функция возвращает значение, то выемка появится в его левой стороне. Если функция имеет параметры, то соответствующие им выемки будут в правой стороне.
Исходные коды классов можно посмотреть в директориях, соответствующих названиям пакетов:
com/google/appinventor/components/runtime - классы встроенных объектов.
com/google/appinventor/components/annotations - классы аннотации
com/google/appinventor/components/common - классы общего использования
com/google/appinventor/components/runtime/util - классы утилит
В настоящее время при помощи расширения можно создать только невизуальный компонент. Если необходимо создать визуальный компонент, перетаскиваемый на рабочее поле дизайнера, как и строенные виджеты, то для этого понадобится своя локальная копия App Inventor.
Попробуйте изменить надпись, скомпилировать, установить и выполнить блок. Если всё получилось, то рабочая среда настроена и можно идти дальше для создания более практичных и интересных вещей.
Под операцией мы будем понимать последовательность действий, каждое из которых может содержать разное количество блоков.
Любую операцию можно поместить либо в блок обработки события, либо в блок процедуры. Расположение операции в блоке обработки события характеризуется простой, но в будущем это может привести ко многим проблемам, в отличие от использования её в процедуре, что позволят получить гибкий алгоритм. Рассмотрим это на примере простой операции присваивания глобальной переменной пустого списка, состоящей из двух блоков (рис. 1).
Рис. 1. Варианты расположения операции.
При размещении операции в блоке обработки события компонента (верхний вариант), она жестко привязывается к нему и становится недоступной для вызова из других блоков. Если эту операцию нужно вызвать из другого блока, то её придётся скопировать. Создавать копии операции нежелательно, потому что при изменении её алгоритма придётся вносить правку в каждую из них. Это повышает вероятность появления разных ошибок: можно забыть исправить какую-то копию, ошибиться при копировании блоков, вставке их и т.п. Размещение операции в блоке процедуры позволит вызывать её из других блоков и избежать описанных выше ошибок.
При работе в редакторе блоков иногда возникает необходимость вызова разных версий одной операции или разных операций. Для этого можно либо создать новые компоненты с новыми блоками обработки событий, либо использовать один существующий блок btnExecute, помещая в него вызов той или иной операции. В результате замены, отсоединённые операции превратятся в “плавающие” блоки (рис. 2), которые не принадлежат никакому групповому блоку.
Рис. 2. "Плавающие" блоки.
Если на рабочем поле таких плавающих блоков много, то разобраться с ними может будет непросто. Если с нижним блоком всё понятно - это блок вызова процедуры, то что делает сцепка блоков в верхней части рисунка? Это отдельная операция или действие, которое входит или входило в какую-то другую операцию? Но тогда где остальная часть этой операции? Добавление операции в блок процедуры позволит избавиться от непонятных “плавающих” блоков.
Для выполнения блока не обязательно помещать его в обработчик события. Можно нажать правой кнопкой мыши на нём и в появившемся контекстном меню выбрать опцию Do it.
Ещё один недостаток размещения операции в обработчике события связан с тем, что при случайном удалении компонента в дизайнере произойдёт удаление не только всех блоков, которые относятся к этому компоненту, но и всех вложенных в них блоков. Особенно досадно будет в том случае, если операция состояла из большого числа блоков (рис. 3). Если удалить компонент btnTest, то произойдёт удаление блока btnTest.Click со всем его содержимым.
Рис. 3. Нежелательная группировка блоков в обработчике события.
Какую операцию выполняют блоки на этом рисунке? Сразу ответить трудно. А при помещении их в отдельную процедуру всё сразу станет понятно из её названия setVarValue - задаёт значение переменной (рис. 4).
Рис. 4. Группировка боков в процедуре.
Блоки процедур и локальных переменных имеют настройку, доступную при щелчке по пиктограмме шестерёнки. Для блоков процедур она заключается в добавлении им входных параметров, а для блоков локальных переменных к созданию дополнительных входов. Это позволит четыре блока переменных превратить в один блок с четырьмя переменными (рис. 4). Является ли такое преобразование эквивалентным? Нет. Блок с несколькими локальными переменными имеет одну область видимости, что не позволяет внутри него получать значения его переменных. Например, невозможно переменной value (рис. 4) присвоить значение переменной key.
Перечислим обнаруженные нами недостатки размещения операции в блоке обработки события:
- Жёсткая привязка к блоку события определённого типа выбранного компонента
- Невозможно вызова операции из других блоков (значит, она не может стать библиотечной)
- Удаление операции при удалении компонента
- Образование непонятных “плавающих” групп блоков
- Сложно быстро понять то, что делает операция
Избавиться от всех этих недостатков очень просто, если все операции помещать в процедуры.
При создании алгоритмов для простоты и скорости хочется разные операции поместить в одну процедуру, что приведёт к быстрому увеличению количества блоков и сложностям с пониманием её работы. Для исключения этого в программировании широко используется простое правило:
Одна функция (процедура) - одна операция
Это правило взято из жизненной практики. Представьте, что вы включаете свет в комнате, а при этом происходит включение телевизора, кондиционера и выключение компьютера. Понравится ли вам это? Нет, потому что это приведёт к путанице и неприятным ситуациям.
На рис. 4 в начале блока происходит вызов четырёх процедур - getKey (получить ключ), getNewVal (получить новое значение), getKeys (получить список ключей) и getIndex (получить индекс). Каждая из этих процедур выполняют одну операцию. После них идёт блок if, в котором происходит выполнение одной операции процедуры setVarValue1.
Можно ли в процедурах вместо локальных переменных использовать глобальные? Можно, но так делать не следует. Использование глобальных переменных внутри процедуры, во-первых, жёстко привязывает её к ним и, соответственно, к данному приложению, а, во-вторых, при помощи глобальных переменных внешние блоки из разных мест приложения могут оказывать влияние на внутренний механизм работы процедуры, что весьма нежелательно. Что может случиться, если пассажиры автобуса будут иметь доступ к его механизму?
Локальные переменные являются своего рода буфером. Если изменится имя глобальной переменной, то это не нарушит работу процедуры, потому что внутри неё используются имена локальных переменных, которые не менялись. В App Inventor при изменении имени глобальной переменной оно автоматически изменится во всех использующих его блоках. Отсюда следует важный вывод о том, что существующая в App Inventor автоматизация по проверке корректности типов переменных, переименованию переменных и и др., с одной стороны, упрощает разработку приложений, освобождая разработчика от размышления над этими вопросами, а, с другой стороны, способствует развитию навыка небрежного составления алгоритмов. Вообще говоря, данный навык может развиться при программировании на любом языке. Как этого избежать? Использовать рекомендации по созданию “чистого кода”, о чём написано немало книг. В MIT App Inventor получится использовать лишь малую долю этих рекомендаций, но следование им позволит улучшить алгоритмы и их читаемость при любом способе их создания - на листе бумаги, доске, при редактировании кода или работе с блоками.
Указанное выше правило следует использовать и в случае использования блоков обработки событий. На рис. 4 обработчик события Click производит только одну операцию - вызывает процедуру. А если из обработчика событий нужно вызвать несколько процедур? Тогда нужно понять, эта группа процедур выполняет одну или несколько операций? Если одну, то всё в порядке. Например, при инициализации приложения вызывается много процедур, но все они объединены одной операцией - инициализации.
Чем больше операций выполняет процедура, тем более тесной является её связь с данным проектом, и тем сложнее её адаптировать для работы в другом приложении. В идеальном случае процедуру общего назначения желательно делать независимой от данного приложения, чтобы появилась возможность поместить её в свою библиотеку для повторного использования в других приложениях.
В качестве хранилища библиотечных процедур в App Inventor можно использовать незадействованные экраны приложения. Библиотеки с небольшим количеством процедур можно располагать совместно на одном экране, а большие - на отдельных. В последнем случае перемещение всех блоков библиотеки в рюкзак можно будет выполнить при помощи одной операции.
Если библиотек накопилось много, то можно их оформить в виде шаблона приложения, в котором первый экран оставить пустым. Используем этот шаблон при создании нового приложения, а после его готовности создаём копию, из которой удаляются все библиотечные экраны.
Для исключения переименования глобальных переменных и нарушения работы библиотечных процедур при копировании их из рюкзака на экран приложения, который может иметь глобальные переменные с такими же именами, необходимо имена библиотечных блоков заранее составлять с префиксами, указывающих на библиотеку. Если библиотека для работы со списком пар имеет название libPairs. Тогда можно переменные, процедуры и компоненты в ней назвать так: libPairs_name, libPairs_setValue, libPairs_btnExecute.
Для более удобной работы с большим количеством блоков и перемещения их по рабочему полю, помимо кнопок масштабирования на области просмотра пригодится и масштабирование рабочей области браузера при помощи комбинации клавиш Ctrl- или Ctrl+.
