Разработка расширений для App Inventor: введение. MIT App Inventor — каждый может создать мобильное приложение App inventor программы на переливание воды

Installing the Windows software for App Inventor Setup has two parts:

1. Installing the App Inventor Setup software package. This step is the same for all Android devices, and the same for Windows XP, Vista, Windows 7, 8.1, and 10.
2. If you choose to use the USB cable to connect to a device, then you"ll need to install Windows drivers for your Android phone.

NOTE: App Inventor 2 does not work with Internet Explorer. For Windows users, we recommend using either Chrome or Firefox as your browser for use with App Inventor.

Installing the App Inventor Setup software package

You must perform the installation from an account that has administrator privileges . Installing via a non-administrator account is currently not supported.

If you have installed a previous version of the App Inventor 2 setup tools, you will need to uninstall them before installing the latest version. Follow the instructions at How to Update the App Inventor Setup Software .

Locating the Setup software

In most cases, App Inventor should be able to locate the Setup software on its own. But if it asks for the location of the software, the path to enter is C:\Program Files\Appinventor\commands-for-Appinventor . If you are using a 64-bit machine ((How to tell if you"re on 64-bit Windows) , you should type Program Files (x86) rather than Program Files. Also, if you did not install the software as an administrator, it was installed in your local directory rather than in C:\Program Files. You"ll need to search for it to find the correct pathname.

Увеличить встроенную функциональность 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.

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

App Inventor - среда визуальной разработки android-приложений, требующая от пользователя минимальных знаний программирования. Первоначально разработана в Google Labs, после закрытия этой лаборатории была передана Массачусетскому технологическому институту. В начале марта 2011 года Массачусетский институт запустил публичную бета-версию проекта, доступную на сайте appinventor.mit.edu .

Работает эта среда разработки прямо из браузера. Скачивать и устанавливать ничего не нужно. Полученный результат можно просматривать на android-устройстве. Готовые приложения можно размещать в Play Market.

C августа 2015 года App Inventor 2 поддерживает русский язык .

В онлайн редакторе MIT App Inventor 2 приложения строятся на базе стандартных компонентов, которые являются основным элементом разработки Android-приложений.

Блоки App Inventor. Важные понятия и принципы

Блоки App Inventor представляют собой инструменты для оперирования компонентами и выглядят как пазлы.

Блоки в этом конструкторе приложений для Android разбиты на две большие группы по признаку – на что влияют и к чему относятся:

• относящиеся непосредственно к компонентам
• относящиеся к приложению в целом

Начнем с блоков, которые принадлежат компонентам. Их можно разделить на три типа, которые легко различить по цвету:

1. блоки, описывающие свойства компонента. Они зеленого цвета и выглядят так:

этот блок обозначает текущее свойство компонента. На данной картинке приведен блок цвета фона для текстового компонента TextBox1. Он подразумевает получение уже имеющегося значения.

а этот задает требуемое значение компоненту (присвоить TextBox1 фоновый цвет …). «set» - задать. Этот тип блока-свойства можно было бы отнести к командам (обработчикам), поскольку он действительно дает команду изменить какое-либо свойство компонента, в том числе, и значения полей. Однако разработчики App Inventor решили так – все же это и свойства тоже.

2. блоки-события, то есть, те блоки, которые отслеживают наступления какого-либо события в приложении, например, нажатие кнопки и далее запускают блок-команду. Они окрашены в бронзовый цвет и выглядят вот так:

этот блок, например, выполняет действие по нажатии кнопки (когда по Button3 кликнули сделать …)

3. блок-команда, в App Inventor этот блок еще часто называют обработчиком. Этот блок указывает, что нужно сделать с компонентом, к которому принадлежит блок:

Конкретно этот блок вызывает данные из таймера устройства.

Вторая группа блоков, относящихся ко всему приложению , организована несколько иначе.

Для начала вот их список подгрупп:

• Logic blocks – логические блоки
• Math blocks – математические блоки
• Text blocks – текстовые блоки
• Lists blocks – блоки для управления списками
• Colors blocks – блоки для управления цветом
• Variables blocks – блоки для управления переменными
• Procedures blocks – блоки процедур.

Все они, за исключением Procedures blocks, встраиваются в другие блоки. То есть, они не могут служить изначальным блоком, в отличие от блоков-событий, принадлежащих компонентам – все действия производятся при каких-либо событиях с компонентами.

Вот здесь стоит рассказать еще о типах «пазлов». Итак, вы, наверное, заметили, что есть пазлы четырех видов.

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

А вот следующие два вида блока по типологии App Inventor относятся к разным типам: свойствам и командам (обработчикам), соответственно. Но по форме пазла и по смыслу их можно было бы отнести к командам, так как они задают действие. Скажем, второй приведенный на картинке пазл даёт команду присвоить компоненту определенное значение , а третий пазл – вызвать компонент с определенным значением . Кроме того, эти пазлы являются «промежуточными», ими нельзя закончить цепочку.

А вот четвертый вид представляет собой конечное значение, существующее или рассчитываемое и им заканчиваются цепочки . Например, четвертая картинка представляет собой текущее значение компонента Clock1.

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

Сроки проведения Конкурса

• Прием и регистрация конкурсных работ: с 1 января по 15 мая 2017 года.
• Рассмотрение работ конкурсным Жюри – с 15 по 30 мая 2017 года.
• Объявление итогов конкурса 30 мая на портале конкурса.

Помнится, в одной из статей по App Inventor я писал, что была попытка его русификации, но мне она не очень понравилась. Уже и не упомню почему. А русификация из App Inventor2, тем временем, пропала.
Но мир не стоит на месте и вот опять у нас есть Апп Инвентор на русском языке. Это случилось благодаря усилиям энтузиастов из сообщества «Учимся с Google» . Дальше я постараюсь разобраться в том, что получилось, а сейчас, для начала, аплодисменты энтузиастам! Ну, просто потому, что получилось весьма неплохо, на мой взгляд, и работа, всяко, нужная.

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

Теперь, что понравилось:
Грамотный и приятный перевод на русский язык различных менюшек на рабочих столах «Дизайнер» и «Блоки»

Это сразу позволит не потеряться человеку далекому от программирования и английского языка. Я и сам далек от первого, и лишь чуть ближе ко второму, поэтому нравится, черт возьми! Хотя уже и привык к английскому интерфейсу.
Нажимаем вопросик рядом в меню «Палитра» и что видим?

Ба! Да это маленькая подсказка, так же переведенная на наш, великий и могучий. Тоже здорово! Если с такой штукой, как кнопка, я разобрался, не прибегая к словарю, то, например, чтобы разобраться со спрайтами, мне пришлось почесать затылок. А тут все на блюдечке.
Идем дальше и смотрим блоки. И тут полное благолепие и русификация.

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

В общем, повторюсь, русификация мне понравилась.
Есть, конечно, маленькие косячки: например, пропущены некоторые слова в «Свойствах» компонентов.

Но, ей богу, это такая мелочь!
Да, вот, всплывающие подсказки у блоков, по-прежнему, на английском. А ведь их правильного понимания зачастую не хватает.

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

И следующий довод: в процессе разбирательства с AI я поднял свой уровень английского. А это тоже весьма полезно.
Но! Я все равно буду обращаться к русскоязычному App Inventor, так как не все и не всегда понятно. И более того, не всегда есть время и желание учить иностранный язык, если надо написать себе, скажем, приложение-будильник с собственными фичами. И тут Апп Инвентор на русском поможет. А если вы хотите обучить созданию мобильных приложений детишек, которые только начали изучать английский? Да на англоязычном AI вы им только головы заморочите. Ведь вспомните, что эта штуковина и создавалась для обучения.
Так что, проделанный труд заслуживает всяческого внимания и уважения. И, вне всякого сомнения, использования.
Еще неплохо бы ребятам было создать полный русский учебни… Стоп! Стоп! А что тогда буду делать я?

Погодная станция в MIT App Inventor 2 – приложение погодной станции для android телефонов созданное с помощью онлайн сервиса .

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

Для создания приложения погодная станция в MIT App Inventor 2 на потребуются:

1. Фоновое изображение размером 540х960 пикселей (размер фонового изображения зависит от размера экрана вашего устройства)

2. Иконка приложения для главного экрана 128х128 пикселей (в формате PNG32)

3. Иконки кнопок в приложении в двух цветах, размером 80х80 пикселей

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

• ListPicker1 – для запуска Bluetooth подключения, выбора доступных Bluetooth устройств и режима отображения состояния подключения
• Label3 – резервная, для отображения дополнительной информации (временно не работает, можно не добавлять)
• Label1 – для отображения полученных данных с arduino
• Label2 – для отображения надписи (температура в комнате, температура на улице, давления и т.д.)
• HorizontalArrangement1 – режим выравнивания элементов по горизонтали, в нашем случаи кнопок переключения режимов)
• Button1 – кнопка включения режима “температура на улице”
• Button2 – кнопка включения режима “температура в комнате”
• Button3 – кнопка включения режима “давление в мм.рт.ст.”
• Button4 – кнопка включения режима “влажность в %”
• Button5 – кнопка отключения (невидимая)
• Clock1 – таймер
• BluetoothClient1 – компонент для работы с Bluetooth (получение и отправка данных)

Теперь перейдем в режим блочного программирования в MIT App Inventor 2 Для начала пропишем функционал для ListPicker

потом для таймера

для получения данных через bluetooth

для кнопок 1-4

для кнопки отключения

После всех пройденных этапов разработки тестируем приложение на телефоне, и проверяем работоспособность.