Что такое app inventor
App Inventor — создание Android-приложений для каждого: Урок 1
Для начала я расскажу вам немного про App Inventor, а потом мы напишем первое приложение, где будем кормить кота.
App Inventor может использовать человек, не владеющий языками программирования. По принципу действия мне он напоминает WYSIWYG-редактор. Пока регистрация доступна только с разрешения Google. App Inventor освобождает вас от написания кода, вместо этого вы используете подобие блок-схем.
Приступаем к работе
Вначале настройте ваш компьютер и телефон для работы с App Inventor. Затем создайте новый проект, назовите его «HelloPurr», откроете редактор блоков и присоедините телефон. Затем перейдите обратно в окно браузера.
Сейчас в вашем браузере должен быть открыт appinventor.googlelabs.com, а на вашем телефоне должен быть запущен App Inventor Phone Application. Браузер должен быть открыт на странице конструктора, которая выглядит так:
Обзор процесса разработки
В App Inventor приложения строятся объединением стандартных компонентов. Компоненты являются основным элементом разработки Android-приложений, как ингредиенты в рецепте. Некоторые компоненты очень просты, например Label(метка), который просто показывает текст на экране, или Button, который реализует кнопку. Другие же компоненты более сложны: Canvas, в котором можино располагать изображения или анимацию; accelerometer (motion) sensor, который работает как контроллер от Wii, и определяет когда вы трясете или переворачиваете телефон; компоненты, отправляющие сообщения, проигрывающие видео, получающие данные с сайтов, и много других.
Окно конструктора
Создаем метку
Создаём игру на Android с помощью MIT App Inventor
Для создания и публикации игр на Android сейчас есть множество доступных инструментов. Одним из них является конструктор MIT App Inventor, интерфейс которого во многом очень схож с визуальной средой Scratch. Благодаря этому с помощью MIT App Inventor даже дети могут самостоятельно создавать игры и приложения для Android.
Пример рабочего окна в MIT App Inventor
Код в MIT App Inventor во многом схож с языком программирования в среде Scratch
MIT App Inventor – бесплатный облачный инструмент, изначально разработанный Google, сейчас поддерживается Массачусетским технологическим институтом (MIT). Платформа с открытым исходным кодом позволяет сразу приступить к визуальному дизайну игры или приложения.
После создания проекта его сразу можно установить на мобильное устройство и запустить с помощью QR-кода, который можно отсканировать с помощью телефона.
Пример QR-кода в MIT App Inventor
Для начала на сайте http://www.appinventor.mit.edu/ необходимо создать аккаунт.
При регистрации необходимо указывать данные аккаунта на Google.com
После регистрации вы можете выбрать русский язык в настройках
При создании проекта вам будет предложено выбрать пример приложения и инструкцию по его созданию, также можно выбрать кнопку «Проект с нуля».
Например, выберем приложение HELLO PURR — простое приложение, где нужно коснуться котика, чтобы услышать его мяуканье. После выбора приложения откроется рабочее окно с редактором. 
Выберите и установите кнопку под фото с изображением кота. Переименовать кнопку можно, вбив название в поле «Текст». 
Отредактировать надпись можно на панели текст, изменив размер надписи и жирность текста. 
Далее переходим в раздел «Блоки» в верхнем меню. 
Здесь необходимо обозначить алгоритм появления звука «Мяу» после нажатия на надпись «Погладить кота». Далее разделе «Управление» выбираем следующий алгоритм.
акже добавляем действие, чтобы при нажатии кнопки телефон дополнительно вибрировал. 
Далее добавим таймер в алгоритм. 
В итоге должен получиться такой код. 
Теперь сохраняем проект в разделе «Проекты» — «Сохранить проект как…». Также в верхнем меню выберите пункт «Построить Android App». 
После этого начнется упаковка приложения для мобильного устройства, это займет какое-то время. 
Далее вы сможете скачать приложение на телефон или запустить его на ПК. 
Cкачать MIT App Inventor на телефон можно здесь. 
На ПК скачать можно здесь. 
На телефоне MIT App Inventor выглядит так.
После сканирования приложения вы можете протестировать свое приложение: при нажатии на кнопку появляется звук «Мяу» и вибрация. 
Подробная инструкция по созданию приложения находится по ссылке https://appinventor.mit.edu/explore/ai2/hellopurr. Также дополнительно можно запускать другие приложения в MIT App Inventor, подробные инструкции можно скачать по ссылке. Или посмотреть мануалы на Youtube. 
В MIT App Inventor используется упрощенный код, позволяющий пользователям быстро создавать и разворачивать приложения для мобильных устройств, одновременно изучая основы кода и разработки приложений. Другим преимуществом MIT App Inventor является его доступность: с помощью этой платформы можно бесплатно и быстро реализовывать популярные игры. 
Гибкая и простая в изучении платформа App Inventor будет полезна начинающим программистам для запуска первых приложений для Android. Особенно платформа будет полезна тем, кто уже умеет программировать на языке Scratch. Подборку видео по созданию игр на Scratch смотрите на Youtube.
О том, как создать игру Among Us на Scratch, мы также писали на Tproger в этой статье.
А какую игру на Android вы бы создали с помощью языка программирования Scratch?
1. Знакомство с App Inventor
Начинаем работать с приложением App Inventor
App Inventor (App – сокращение от application, переводится как приложение. Inventor — переводится как изобретатель) — это среда визуальной разработки приложений, не требующая больших знаний в программировании. Приложение было разработано в Google Labs, а после передано Массачусетскому технологическому институту.
App Inventor — это облачная среда визуальной разработки Android-приложений. Построение программ осуществляется в визуальном режиме с использованием блоков программного кода. На компьютер устанавливать ничего не требуется, просто откройте среду разработки ai2.appinventor.mit.edu в браузере Google Chrome и начинайте творить.
Обратите внимание, что для работы с App Inventor требуется аккаунт Google. Если вы не зарегистрированы в Google, то перед началом работы вам надо будет пройти регистрацию и авторизацию. После этого приложение App Inventor и все ваши сохраненные проекты будут доступны на любом компьютере после авторизации.
Видео. Применения App Inventor в робототехнике
App Inventor состоит из конструктора и редактора блоков
Конструктор App Inventor
Редактор блоков App Inventor
Программирование производится с помощью составления блоков
Блоки программы составляются подобно пазлам или конструктору лего
Создание первого приложения для Android
Создадим простое приложение в котором при нажатии кнопки на экране телефона, гаджет будет произносить определенную фразу. Следуйте пошаговой инструкции и обращайте внимание на подсказки под изображением.
1. Заходим в среду разработки из браузера Google Chrome appinventor.mit.edu
2. Заходим в свой аккаунт Google (при необходимости регистрируемся)
3. Открываем новый проект и присваиваем ему имя (без пробелов и цифр!)
4. При желании вы можете перейти на русский язык
5. Захватите объект «Кнопка» мышкой и перенесите его на вкладку «Просмотр»
6. На вкладке «Свойства» задайте необходимые стили для кнопки
7. Перейдите на вкладку «Медиа», захватите и перенесите объект «Текст в речь»
8. Переходите в режим редактора блоков
9. В панели блоков нажмите мышкой на объект «Кнопка»
10. Выберите функцию «Когда кнопка нажата» и перенесите в окно «Просмотр»
11. Выбираем объект «Текст в речь» и переносим блок «Сказать сообщение»
12. Наведите мышкой один блок на другой, чтобы совпал «замок»
13. Выберите объект «Текст» и добавьте к программе новый блок
14. Осталось лишь создать QR-код для скачивания на телефон
15. После построения программы у вас на экране появится похожий QR-код
16. Откройте на телефоне приложение QR Code Reader и просканируйте QR-код
Телефон запросит разрешение для перехода по ссылке. Нажмите «OK» и начнется загрузка вашего приложения. После загрузки установите приложение.
With MIT App Inventor, anyone can build apps with global impact
Become an
MIT Master Trainer in Educational Mobile Computing
Program resumes fully virtual online on March 1, 2022.
Registration starts February 1, 2022. Click here to learn more.
Get Started
Follow these simple directions to build your first app!
Tutorials
Step-by-step guides show you how to create even more apps.
Teach
Find out about curriculum and resources for teachers.
Support
Get answers to your questions in our community.
Contribute
Contribute to the App Inventor system or educational resources.
Collaborate
Learn about research and affiliations with App Inventor.
Artificial Intelligence with
App Inventor
New Curriculum and Teacher Resources
Made in partnership with YR Media.
News & Events
Announcing Become An App Inventor
The MIT App Inventor team is delighted to announce the publication of Become an App Inventor: The Official Guide from MIT App Inventor, by Karen Lang and Selim Tezel.
(Release date February 8, 2022)
App Inventor Collaborator CoolThink@JC Awarded ISTE Seal of Alignment
MIT App Inventor collaborator CoolThink@JC, a Computational Thinking Education Programme targetting primary school students, receives the ISTE Seal of Alignment!
Appathon 2021 at MIT News
Budding coders create apps aimed at real-world impact
MIT App Inventor’s “Appathon” joins programmers from around the world to imagine a better future and start building it one app at a time.
Chromium 94 Issues
Chromium 94, the core browser functionality for Google Chrome and Microsoft Edge, among others, recently introduced a new feature to protect local network devices from malicious websites. This change unfortunately affects many App Inventor users. If you use Chrome or Edge and you live test your App Inventor project using.
Поступаем в Android Market с помощью AppInventor
1. Предварительная подготовка
Для выполнения поставленной задачи – написания и публикации приложения под ОС Google Android, необходимо выполнить несколько манипуляций в браузере. Пройдёмся по пунктам:
a. если у вас… если у вас нет аккаунта в системе Google, вам нужно его создать. Для этого достаточно зайти на сайт, например, http://gmail.com/, найти надпись «Create an account»/«Создать аккаунт», найти на странице переключатель языка, выбрать ваш родной язык из списка и ответить на несколько вопросов в процессе регистрации. В дополнение у вас появится замечательный сервис электронной почты, а при желании большое количество других полезных сервисов компании Google;
b. нужно иметь учётную запись в инструментарии разработчика Google AppInventor. На данном этапе Google не предоставляет доступ к инструментарию кому попало. Поэтому нужно перейти по адресу http://appinventor.googlelabs.com/, войти на него под учётной записью в Google и подать заявку в автоматически открывшейся форме путём её заполнения. (Совсем как на хабре, только готовую полезную программу иметь не обязательно.) После этого шага нужно подождать благоволения со стороны Google. Я ждал его примерно 2 недели;
В принципе, это основные действия, которые необходимо совершить, для получения возможности писать, точнее собирать программы средствами AppInventor. И чтобы не терять времени в ожидании удовлетворения вашей заявки, можно загрузить и установить необходимое для работы программное обеспечение (см. ниже).
Если разработчика интересует распространение собранной программы, то необходимо выполнить ещё один пункт, а именно:
Однако, поскольку, возможно, не все захотят пробиться в Android Market, а кто-то, не обладающий программистскими навыками, захочет написать программу для себя — этот последний пункт выполнять следует не всем.
Непосредственно для написания программ нужно сделать еще пару вещей. Нужно установить клиентский Java модуль и настроить подключение к Android-телефону. Как выполнить эти процедуры и решить возникшие проблемы описано здесь http://appinventor.googlelabs.com/learn/gettingstarted.html. Коротко пробежимся по этапам:
— если на вашем компьютере не установлена Java, следует скачать последнюю версию с сайта http://java.com/ и установить её на компьютер (проверить установлена ли Java можно тут: http://www.java.com/en/download/help/testvm.xml, рекомендуют установить новейшую версию);
— далее нужно скачать и установить пакет AppInventor Extras Software, содержащий драйверы и другое программное обеспечение. Ссылки для различных операционных систем: Mac OS X, Windows, Linux. Разработчики рекомендуют не изменять каких-либо параметров при установке;
— наконец нужно изменить несколько настроек в телефоне. Тут хотелось бы заметить, что для написания программы вовсе не обязательно подключать телефон к AppInventor, скомпилированную программу (.apk) можно скачать из веб-интерфейса инструментария и установить на телефон вручную в любой момент. Однако при подключении к телефону, на последнем, в режиме реального времени, выполняется разрабатываемый проект, что весьма удобно для поимки разных багов, поэтому продолжим. Итак, в телефоне нужно отключить автоповорот экрана (Настройки-Экран-Автоповорот экрана), разрешить установку из неизвестных источников (Настройки-Приложения-Неизвестные источники), включить отладку по USB (Настройки-Приложения-Разработка-Отладка по USB) и настройку, не позволяющую экрану выключаться при соединении с компьютером (Настройки-Приложения-Разработка-Оставить включенным). А подключив телефон к компьютеру ни в коем случае не монтировать SD-карту как флешку.
Нужно принять во внимание также то, что после подключения на телефон будет установлена программа AppInventorPhoneApp размером 3,81 Мб, т.е. свободная телефонная память понадобится.
После многочисленных подготовительных операций и принятия вашей заявки в AppInventor, вы получаете письмо на электронную почту и доступ к этому веб-приложению. Можно начинать реализацию творческих планов!
2. Разработка интерфейса программы
Приложение, которое я решил создать для публикации в Android Market не изобилует сложностью вещей. Пусть программа будет вычислять корни квадратного уравнения. Апдейты будут плавно приводить программу к решению систем уравнений, а если хватит пару, к решению системы неравенств. Всё лучше, чем заставлять картинку с кошкой мяукать.
Определимся с требованиями к нему: так как наша программа будет вычислять корни квадратного уравнения, как минимум должен быть реализован ввод коэффициентов и вывод результатов.
Предполагаемый интерфейс можно прикинуть на бумаге или набросать презентацию. Для первой версии сойдёт что-то типа этого:
Что ж, приступим к реализации!
Подключаем телефон к компьютеру, не монтируем карту как накопитель, заходим на страницу http://appinventor.googlelabs.com/, вводим регистрационные данные, жмём «Sign in» и попадаем в AppInventor BETA.
Описывать появившуюся страницу не имеет особенного смысла (пригодится лишь ссылка «Learn» в центре верхней части страницы).
Поэтому смело жмём кнопку «New» и вписываем в появившемся окне название нового проекта — uSolver, что должно означать Universal Solver, т.е. универсальный решатель (не путать с Deep Thought).
Жмём на «OK» и попадаем в модуль «Design»:
Тут уже есть что описать.
В центре окна находится панель «Viewer», служащая для предпросмотра интерфейса разрабатываемого приложения и выбора управляющих элементов (это не окно эмулятора или симулятора!). Сами элементы интерфейса и некоторые другие управляющие структуры содержатся в панели «Palette», где они распределены по категориям. Настройки каждого использованного элемента доступны в палитре «Properties». Общая структура элементов интерфейса отображена в палитре «Components», где элементы можно удалять и переименовывать.
Можно сразу же нажать кнопку «Open the Block Editor» и там установить подключение к телефону, для отслеживания изменений дизайна вживую, но на первый раз не рекомендую загромождать голову ещё одной игрушкой.
Лучше приступим к интерфейсу. Переименуем заголовок стартового экрана и изменим цвет фона (дабы белый не утомлял):
Для управления расположением управляющих элементов (контролов) есть категория «Screen Arrangments». Нас интересует последовательное следование элементов сверху вниз. Выбираем нужную категорию (КО: пыцкаем, естественно, на неё левой кнопкой), раскрывается её содержимое, хватаем нужное выравнивание и тащим его на пустое пространство экрана нашего приложения, затем немного настроим его вид в панели «Properties»:
Если выделение компонента потеряно, следует нажать на него во «Viewer» или «Components» и он будет доступен для настройки свойств.
Начнём заполнять экран согласно выбранной концепции…
Первым у нас должен быть общий вид решаемого уравнения. Запихнём его в Label. Palette->Basic->Label, тянем его внутрь выравнивания и настраиваем параметры:
Далее нужно разместить поля вводов коэффициентов в одну горизонтальную линию и расположить их группу по центру экрана. Для этого воспользуемся табличным выравниванием из 5 ячеек в одну строку:
Три центральные ячейки будут занимать поля ввода. Для этого перетягиваем поля в примерные места расположения ячеек:
Не забываем настраивать параметры, на свой вкус.
Для вывод решений уравнения предусмотрим два контрола «Label». Их можно внести друг под другом в вертикальное выравнивание после блока с табличным выравниванием:
Кажется это всё, что планировалось сделать. Хочу обратить внимание на имена некоторых полей ввода (TextBox) и меток (Label). Эти имена будут использоваться в дальнейшем и они должны нести хоть какую-то смысловую нагрузку, иначе в процессе составления блочного «кода» возможны недоразумения. Впрочем, переименовали мы только те, которые нужно.
3. Блок-описание программы (программирование)
После создания интерфейса пришло время «собрать» логику программы. Для этого жмём на кнопку «Open the Block Editor».
Браузер должен будет скачать некий файл, открыть который нужно с помощью ранее установленной Java. Обычно все действия происходят автоматически. После старта Java может выдать вопрос о местоположении файлов AppInventors Extra, которые были скачены и проинсталлированы нами заранее.
Стоит отметить, что манипуляции нужно проводить, если необходимо обеспечить подключение к телефону. Если же подключение не нужно — нажать «Cancel».
Хочу так же отметить, что процесс загрузки Редактора блоков не быстрый, но не нужно нервничать по этому поводу.
После его запуска жмём «Connect to phone», если, конечно, нужно соединение. Произойдёт подключение к телефону, установка программного обеспечения и запуск разрабатываемой программы, впрочем неработоспособной.
Если всё получилось, вернёмся к редактору блоков.
Интерфейс Редактора блоков весьма похож на интерфейс Редактора интерфейса, что символизирует. Встроенные блоки (Built-In) содержат управляющие блоки, блоки «My Blocks» — взаимодействуют с элементами интерфейса программы. Если понятно стало не всё, можно будет разобраться по ходу текста, а сейчас перейдём к делу.
Повторим те же действия для оставшихся переменных. К сожалению, я не нашёл способа скопировать блоки, поэтому придётся запастись терпением здесь и в некоторых местах далее (стоит сказать, что разработчики оповещены заинтересованными пользователями и уже работают над копи/пастой блоков).
Теперь переменным a, b, c необходимо присвоить вводимые пользователем значения. Начнём с переменной a.
На вкладке «My Blocks» выбираем блок «A» (это текстовое поле для ввода значения коэффициента a) и перетаскиваем на пустое пространство конструкцию «A.LostFocus» (это кагбэ говорит о том, что блок выполнится тогда, когда текстовое поле потеряет т.н. фокус, т.е. пользователь перейдёт к другому управляющему элементу). В поле «My Definitions» выбираем конструкцию «set global a to» и перетаскиваем её внутрь блока «A.LostFocus» так, чтобы она закрепилась в нём (это произойдёт с характерным звуком). Затем снова жмём на блок «A» и перетаскиваем конструкцию «A.Text» в пазловый вырез «set global a to». В итоге должно получиться так (процесс показан на примере компонента «B»):
Подсказка: следует понять, что дискриминант это прежде всего разность. Разность произведения b на b и произведения 4 на произведение a на c. Где 4 – числовая константа.
Проверку знака дискриминанта пока вводить не будем, рассчитаем корни с тем, что есть.
Вытянем из My Definitions конструкцию «set global x1 to» на пустое пространство и приведём значение переменной x1 в соответствие с формулой: x1=(-b+sqrt(D))/(2*a). То же проделаем и с x2, где x2=(-b-sqrt(D))/(2*a).
Теперь все нужные значения обсчитываются.
Так как предполагается выдача сосчитанных корней после потери «фокуса» любого из полей ввода коэффициентов уравнения, а в отсутствии копи-пасты набирать ещё несколько раз «формулы» ну очень лень, напишем процедуру, которую будем вызывать в блоках «.LostFocus».
Начнём. Вытаскиваем блок Built-In->Definition->procedure переименовываем её в X12 (кликнув по слову «procedure») и прилепляем ей в слоты «arg» блоки Built-In->Definition->name, называя их «ax», «bx», «cx» (все переменные глобальные, поэтому требуется их переименование).
Внутрь процедуры помещаем вычисление «D», «x1» и «x2», а так же блок My Blocks->X1-> «set X1.Text to», в слот которому устанавливаем значение корня x1 (My Blocks->My Definitions-> global x1) и аналогичное для текстовой метки «X2»:
Вызывать эту процедуру будем в каждом блоке «потери фокуса». Вызов осуществляется блоком My Blocks->My Definitions-> call X12 с параметрами «global a», «global b» и «global c»:
На картинке выше видно, что я разобрал блок «A.LostFocus» и выстраиваю цепочку его содержимого на пустом пространстве. Это связано с тем, что мне было довольно трудно поставить вызов процедуры в нужное место в цепочке. Такая проблема возникает довольно часто и я нашёл выход компонуя цепочку блоков вне вызова, а потом прикрепляя всё внутрь.
Точно такие же вызовы помещаются в остальные блоки «.LostFocus». Окончательно всё должно выглядеть примерно так:
На телефоне решение уравнения x^2-9x+20=0 будет выглядеть следующим образом:
Сразу вывалились недочёты настройки некоторых контролов… будет что исправить при апдейте.
Если телефон не был подключён к компьютеру можно скомпилировать приложение в веб-интерфейсе AppInventor, а так же создать Barcode:
Приложение создано, пришло время для некоторых выводов.