App inventor 2 приложения. Разработка расширений для App Inventor: введение


Начать хочется с того, что на habrahabr и geektimes есть несколько статей о предыдущей версии App Inventor. Вот они:

MIT открыл Google App Inventor в бета-версии
App Inventor - создание Android-приложений для каждого: Урок 1
Чтение XML файла с помощью App Inventor

Эта версия App Inventor (beta) проработала с 2011 по 2015 годы, но сейчас ее поддержка прекращена. С 2014 работает версия App Inventor 2, которая несовместима с предыдущей. До 2011 года существовала версия Google App Inventor в рамках Google Labs
Итак, App Inventor - среда визуальной разработки android-приложений, требующая от пользователя минимальных знаний программирования. Выглядит она так:

Работает эта среда разработки прямо из браузера. Скачивать и устанавливать ничего не нужно. Создавать приложения можно хоть с android-планшета, хоть с Ipad. Основное требование к «железу» это хорошее разрешение экрана. Для примера приведу скриншот с экрана разрешения FullHD. Можно сравнить его с предыдущим, который сделан c HD экрана.


Готовые приложения можно размещать в Play Market, для примера приведу аккаунт разработчика , в котором все приложения сделаны в App inventor.
Подробно описывать MIT App inventor 2 не буду, поскольку от предыдущей версии он отличается в основном множеством мелких усовершенствований, которые выходят в среднем раз в несколько недель. Прочитав статьи, указанные выше, можно легко освоить и текущую версию.
Во вконтакте есть достаточно живое сообщество , в котором участники делятся друг с другом опытом использования App Inventor.
Часть 2. App Inventor+Arduino проекты.
В последнее время бурно развивается тема «интернета вещей». Во многих проектах на эту тему используется ардуино. Иногда в таких проектах нужно создать android-приложение, тут и может понадобиться App Inventor 2. На habrahabr и geektimes есть несколько статей на эту тему.
1. App Inventor+Arduino проекты с использованием блютуз-соединения. (блютуз модуль HC-05\06\07)
Робот-пылесос на ардуино
Простая Bluetooth машинка на Arduino
Bluetooth пульт для телевизора на arduino
2. App Inventor+Arduino проект с использованием wi-fi соединения.(wi-fi модуль ESP8266)
Интернет Вещей (IoT) и водопровод
3.App Inventor+Arduino проект с использованием проводного соединения (Еthernet модуль Enc28j60)
Управление громкостью многозонного усилителя при помощи приложения для Android и Arduino
4.App Inventor+Arduino проект с использованием GPRS/GSM соединения (GPRS/GSM шилд SIM900)
Управление отоплением в загородном доме
Ну и закончить хотелось бы позитивной новостью, что с августа 2015 года App Inventor 2 поддерживает русский язык. Если у кого-то есть свои интересные приложения, сделанные в этой среде разработки, можно скидывать в комментарии, думаю многим будет интересно посмотреть какие еще можно делать приложения, используя App Inventor.
P.S. Сборник из более 100 обучающих материалов по ардуино для начинающих и профи
P.P.S. Онлайн курс по ардуино на гиктаймс

Погодная станция в 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

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

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

In this post I’m going to introduce you to the MIT App Inventor 2 software and I’m going to show you what you need to quickly getting started building Android apps that interact and control your Arduino.

Here’s the contents that are going to be covered in this post:

  • Why MIT App Inventor 2 is a good choice?
  • Accessing MIT App Inventor 2
  • How to control Arduino with MIT App Inventor (Bluetooth)
  • MIT App Inventor Overview
  • Projects with MIT App Inventor
  • Android Apps for Arduino with MIT App Inventor 2

Introducing MIT App Inventor 2

MIT App Inventor 2 is a simple and intuitive free service for creating Android applications. If you want to start with MIT App Inventor, you don’t need to download or install any program in your computer as the software is cloud-based, so you build the apps directly in your browser (Chrome, Mozilla, Safari, Internet Explorer, etc).

For instance, you only need an internet connection for building the apps.

Why MIT App Inventor is a good choice?

  • MIT App Inventor 2 is intuitive and simple to use.
  • You don’t have to be an expert in programming or design to build awesome apps that can do useful stuff.
  • Creating the design is as easy as selecting and placing widgets in the smartphone screen.
  • The code is done with drag and drop puzzle blocks.

Anyone can learn how to build their own apps with MIT App Inventor 2 with a few hours of practice.

Accessing MIT App Inventor 2

The most common Bluetooth modules used with the Arduino are the HC‑05 bluetooth, HC-04 and HC-06.

For more information about the bluetooth module, you can check this blog post:

The Bluetooth module works with serial data. This means that the Arduino sends information and the Bluetooth module receives it via serial (and vice-versa).

The following figure explains how the information flows from the Android app to the Arduino.

Your smartphone sends information to the Bluetooth module via Bluetooth. Then, the Bluetooth module sends the information via serial communication to the Arduino. This flow also works the other way around: the Arduino sends information to the Bluetooth module that sends it to the smartphone via Bluetooth.

MIT App Inventor Overview

This is a step-by-step course to get you building cool Android applications for Arduino, even with no prior experience! A collection of 8 + 1 Projects.

I hope you’ve found this post useful.

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

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

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 (свойства) - область где редактируются свойства компонентов: цвет, размер текста, шрифт, и прочее.

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

Примерка © 2024 Bumagastore - Для пользователей ПК