App Inventor

О сервисе

App Inventor – это вебсервис для создания приложений под мобильную операционную систему Android. По своей логике работы похож на многие студии для создания софта типа MS Visual Studio. Но внешне совершенно не похож. Коренным отличием является то, что пользователь не пишет код, а составляет его из графических блоков, соединяя их друг с другом по заданным правилам. Это визуально-блочное программирование. Для классических программистов все типы блоков знакомы – это события, методы, параметры, массивы, циклы, логические операторы, переменные…
Первоначальным разработчиком сервиса является Google. В настоящее время владеет им и курирует его MIT (Массачусетский технологический институт). Сервис бесплатный, для регистрации в нем требуется учетная запись Gmail

Designer (Дизайнер)

Приложение состоит из экранов, по крайней мере одного. Объект Screen в иерархии объектов является родительским для всех других. Добавление объектов на экран происходит в режиме Designer. С левой панели Palette возможные элементы перетаскиваются на экран мобильника области Viewer. Эти объекты выстраиваются в иерархию на панели Components. Объекты могут быть видимыми, например, из категории User Interface, или невидимыми, например, из категории Sensors. Невидимые объекты видны под мобильником и на панели Components. Статические свойства выделенного объекта можно настраивать на панели Properties. Есть возможность добавить в проект с видимостью для всех экранов медиа-файлы (изображения, звук…) – это делается на панели Media.

Свойства объектов, заданные в режиме Designer, не являются жестко закрепленными за объектами, их можно изменить с помощью кода в режиме Blocks. В общем-то, большинство приложений этим и занимаются.

Если вы начинаете подряд перетаскивать видимые объекты на экран мобильника, то они выстраиваются строго друг под другом. Это самый примитивный дизайн. Чтобы расположить объекты в более удобную для глаза структуру есть элементы из категории Layout – это контейнеры для построения дизайнерской сетки экрана. Есть контейнеры для выравнивания только по горизонтали или вертикали (со скроллом или без) и контейнер для таблицы. Манипулируя ими можно расположить свои элементы интерфейса максимально аккуратно.

Есть интересный объект Canvas (из категории Drawing and Animation). Это холст для рисования. Рисовать можно программно: точки, линии, фигуры, текст. Также можно спрограммировать возможность для пользователя рисовать пальцем/стилусом. В дизайнере же на Canvas можно добавить только два объекта Ball (примитивный круг) и ImageSprite (контейнер для изображения).

Blocks (Блоки)

Тут всё сложнее и интереснее. Это уже программирование. Слева на панели Blocks даны категории блоков – это сущности программного кода. Клик по категории приводит к появлению полупрозрачной панели с блоками этой категории, которые можно перетаскивать в область кода (Viewer). Также на панели Blocks представлены объекты текущего экрана. При клике на объект для него также выплывает панель с возможными блоками кода.
Блоки каждой категории имеют оригинальную расцветку, что упрощает восприятие объемного кода.
Почти все блоки имеют зацепляющие участки для крепления их друг за другом, для прикрепления к ним каких-то параметром. Если по логике какой-то блок нельзя прикрепить к другому, то AppInventor и не даст это сделать.

Для копирования блоков между экранами имеется функционал Backpack (Рюкзак). В него можно добавлять выделенный блок на одном экране, а потом изымать на другом.

Важнее передавать данные между экранами. Довольно неочевидная задача, потому что, переменные объявляются максимум на уровне текущего экрана. Решение задачи доходчиво изложено в этом видео. Есть также локальные переменные, объявляемые внутри процедур. И есть события с внутренними переменными для этой процедуры – такие события, например, сенсорные имеют в интерфейсе блока названия переменных и, когда вы хотите вставить переменную в какое-то место внутри этого блока, то вам будут предложены кроме глобальных переменных и локальные.

Внизу слева имеется индикатор ошибок кода. Есть ошибки не критические и критические. По нажатию на стрелочки в индикаторе ошибок можно переместиться на их место в коде.

Расширения

Это наборы дополнительных блоков, которые расширяют возможности создаваемого приложения. Некоторые блоки даже разрешают вмешиваться в настройки операционной системы. Чтобы добавить расширение в свой проект надо в режиме Designer в самом низу панели Palette раскрыть плашку Extension и нажать ссылку Import extension. Расширение должно быть скачано заранее на ваш компьютер (это файл *.aix) или вы должны знать URL расширения. После импорта расширение будет отображаться в этой плашке и вы его сможете перетащить на холст, а потом в режиме Blocks воспользоваться его блоками.

Страница с расширениями: https://puravidaapps.com/extensions.php – заходите на страницу какого-то расширения, читайте описание и в самом конце описания будет ссылка для скачивания.

Простой пример применения расширений. Есть приложения "Шагомер" для измерения пройденных шагов, расстояния, времени... после старта. Если сделать такое приложения силами ванильного App Inventor, то после запуска приложения и старта шагоизмерения приложение будет считать шаги только до момента ухода устройства в сон согласно настройкам пользователя устройства (обычно, через полминуты). И подсчет шагов прекратится на период засыпания. Это не дело. Скачиваем расширение TaifunTools и с помощью блока сall[TaifunTools1].KeepScreenOn запрещаем устройству уходить в сон во время работы Шагомера. Теперь приложение работает постоянно, пока пользователь его не закроет. Сразу возникает желание пожалеть батарею устройства и уменьшить яркость экрана во время шагоизмерения. Это может обеспечить другое расширение Brightness с помощью блока call[Brightness1].SetWindowsBrightness.

Отладка

Написание приложений крайне затруднено без удобной отладки. В App Inventor постарались упростить отладку в меру возможностей. Компиляция APK файла является половиной задачи. Надо еще APK файл забросить в андроид-устройство и установить на нем.

Вот, что предлагает App Inventor в этой области:

• Заброс напрямую в андроид-устройство. В верхнем меню выберите: Build > Android App (.apk) > появится прогресс-бар подготовки APK > после готовности APK будет предложено две кнопки – для скачивания напрямую на ваш ПК, и для зпагрузки на смартфон по бар-коду. Скачаем по бар-коду. После скачивания смартфон предложит установить приложение, ругнется на то, что приложение не из Google Play и после вашего позволения установит.
• Скачивание на ПК. Из пункта выше нажмите кнопку скачивание на ПК. Если у вас есть эмулятор Андроида на ПК, то путем перетаскивания apk-файла в окно эмулятора приложение будет быстро установлено. Я пользовался эмулятором Nox и не испытывал проблем.
• Запуск в синхронизированном эмуляторе. У MIT есть приблуда aiStarter, которую можно скачать на свой компьютер для Windows, macOS и Linux. После инсталляции это программа-эмулятор будет работать в связке с веб-сервисом, о котором эта статья. Итак:

  Запустите aiStarter на своем компьютере > в веб-сервисе App Inventor запустите из меню Connect пункт Emulator > ждите 1-2 минуты, пока установится связь между двумя программами > после удачной синхронизации на компьютере появится окно андроид-устройства с запущенным в нем вашим приложением. Теперь, при внесении изменений в код приложения, изменения будут отображаться в окне эмулятора – в этом состоит синхронизация. Это самый удобной способ отладки если эмулятор не глючит. Но иногда связь между программами не устанавливается (когда в Северной Америке рабочий день) и периодически эмулятор зависает. Против зависания есть пункт меню в App Invenor: Connect > Refresh Companion Screen.

Экспорт

Экспортировать приложение можно в APK, как было описано в предыдущем разделе, в AAB (это новый формат приложений для Андроида) и в файл проекта AIA. Соответственно aia-файл можно импортировать обратно в App Inventor.
Кроме того, сервис позволяет сохранять промежуточные результаты вашей разработки в снимки Checkpoint с возможностью открыть его редакторе снова.
При первом заходе в App Inventor или через меню Projects > My projects вы попадаете на список проектов и снимков.

App Inventor & Thunkable

У App Inventor есть несколько форков. Самым "крутым" кажется Thunkable – этот сервис выигрывает за счет современного дизайна, удобства составления структурной сетки экрана, дополнительных блоков, возможности составлять приложения для iOS и онлайнового отладчика.
Но почему же я продолжаю пользоваться App Inventor?
Дело в том, что Thunkable сервис платный. Для комфортной работы надо заплатить от 38 до 500 долларов в месяц. Есть, правда, бесплатный тариф, НО на нем вам разрешается всего 2 раза за месяц выгрузить свой APK-файл. Это чудовищно мало! На таком тарифе вы будете год отлаживать приложение. Кроме того, самое простенькое приложение с одним экраном будет весить 70 мб против 3 мб такого же приложения из App Inventor.
Что касается отладчика – совершенно не для каждого типа приложения подойдет онлайновый. Например, шагомер в нем не отладишь, нужно выгружать приложение на реальное устройство.

Почитать, посмотреть

🌐 Сайт App Inventor, на котором можно познакомиться с сервисом и начать создание веб-приложений.
📗 App Inventor имеет неплохой Help. Кроме того, если в режиме Blocks вызвать контекстное меню какого-нибудь блока по правой кнопке мыши, то можно выбрать пункт Help и быть перекинутым на справку именно по этому блоку.
📺 На Ютубе имеется канал, в котором автор канала последовательно излагает на чисто русском языке разные темы по работе с App Inventor – новичкам будет полезно. Там 48 уроков.
📥 Скачать Oparin_clock.apk – это результат моего первого проекта в App Inventor. Это часы с интересным способом отображения времени. Скачать также можно по QR-коду:

Релевантные ссылки:
• Визуально-блочные среды программирования и моделирования – обзор
• TurboWarp – форк Scratch для создания веб-приложений и исполняемых под Windows файлов