App inventor что это

App Inventor

App Inventor — это среда визуальной разработки приложений под Android и iOS (работает в режиме beta-теста), в которой базовая программная логика создаётся путём выбора, перетаскивания и соединения друг с другом графических блоков.

“Код” для создания простого приложения на App Inventor.

Если у вас уже есть аккаунт App Inventor, то вы можете создать новый проект, добавить в него кнопку с именем btnShowMessage и компонент для вывода сообщения, соединиться с эмулятором или устройством, после чего загрузить файл изображения и перетащить его редактор блоков. Как изображение превращается в блоки? Для этого в App Inventor существует функция сохранения выбранного блока в PNG-файл вместе с метаданными.

”Это как Scratch? Для чего нужна эта игрушка?”, — воскликнет программист. Во-первых, для обучения разработке мобильных приложений без погружение в детали синтаксиса того или иного языка программирования. Во-вторых, для создания мобильных приложений и размещения их в магазине приложений. В-третьих, для обучения основам программирования и алгоритмического мышления. В-четвёртых, несмотря на относительно скромную функциональность App Inventor IDE, она позволяет достаточно быстро и эффективно решать многие задачи (включая быстрое прототипирование), которые в случае текстового программирования потребуют глубокого погружения в проблему, при отсутствии готового к использованию кода.

Что возникает при виде игрушки? Интерес! Это именно то, что может предложить MIT App Inventor широкому кругу пользователей, а не только детям. Эту платформу можно воспринимать как детскую железную дорогу. Со стороны кажется, что игра с ней является пустой тратой времени, но соберите её перед взрослыми и серьёзными людьми, и многие из них с радостью погрузятся в игру сами или вместе со своими детьми.

Разве можно только при помощи блоков создавать более или менее серьёзные приложения? Можно, если принять во внимание тот факт, что при работе в App Inventor под Android можно также использовать расширения и взаимодействовать с web-технологиями при помощи JavaScript и др. Более того, вы также можете создавать свои расширения под Android на Java.

Для App Inventor существует немало обучающей информации в текстовом и электронном виде, а также официальная документация, которая поможет разобраться с установкой и настройкой App Inventor для работы. Мы же основное внимание уделим эффективному использованию App Inventor, благодаря чему ваш навык разработки мобильных приложений будет расти ощутимо быстрее навыка других пользователей, работающих по традиционной методике обучения.

Мобильная разработка для самых маленьких: разбираем инструменты

Что нужно для того, чтобы разработать свое мобильное приложение? Прежде всего, нужно определиться с тем, под какую мобильную операционную систему мы хотим писать свое приложение. Казанский техникум связи разбирает каждый шаг — попробуйте и вы со своим ребёнком.

С чего начать

Сейчас наиболее популярны две системы — это Android от Google и iOS от Apple. Если мы выбираем писать под Android, нужно знать язык программирования Kotlin или/и Java, если под iOS — Swift. Также существуют кроссплатформенные инструменты, например Flutter, в которых используется язык программирования Dart.

Можно ли обучать детей делать мобильные приложения? Можно. Но с какого возраста?

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

Но выход есть.

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

AppInventor

Инструмент, о котором я бы хотел рассказать называется AppInventor. Это web приложение, разработанное в MIT, с помощью которого можно создавать приложения под Android.

Для начала нужно перейти на сайт https://appinventor. mit. edu/ и нажать кнопку Create Apps, после чего вас попросят зарегистрироваться (это можно сделать через Google аккаунт). После регистрации мы попадаем на страницу проектов, где можно создать новый проект.

Процесс создания приложения состоит из двух частей:

• Создание дизайна (кнопки, текстовые поля и т. д.)
• Написание программы на графическом языке.

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

Для того, чтобы добавить новый компонент, его нужно перетащить мышью в рабочую область.

Окно блоков кода. Слева находятся все доступные блоки команд, справа — область, на которой строится программа путем перетаскивания блоков.

Для того, чтобы протестировать программу на мобильном телефоне необходимо установить приложение MIT AI2 Companion, оно доступно в Play Market. Также необходимо, чтобы и телефон, и компьютер, на котором открыт AppInventer, были подключены к одной сети Wi-Fi.

Нажимаем кнопку Connect, выбираем AI Companion, появляется QR код, и код в текстовом формате, далее либо сканируем qr-код через приложение, либо также в приложении вводим текстовый код.

После этого приложение запустится на телефоне.

Пример создания приложения

Чтобы продемонстрировать возможности AppInventor, создадим небольшое приложение.

Воспользуемся открытым API Nasa: Astronomy Picture of the Day. Сначала необходимо перейти на сайт https://api. nasa. gov/ и получить Api Key, вас попросят ввести email и фамилию, после чего на почту придет ключ. Далее нужно создать новый проект AppInventor.

Дизайн приложения

Добавим несколько компонентов: Button, Image, Label, Web.

Также поменяем свойство Text у Button на “Получить изображение”.

Label находится под картинкой, но на макете его не видно из-за того, что у него пустое свойство Text.

Свойства остальных компонентов оставим по умолчанию.

App Inventor — создание Android-приложений для каждого: Урок 1

Для начала я расскажу вам немного про App Inventor, а потом мы напишем первое приложение, где будем кормить кота.

App Inventor может использовать человек, не владеющий языками программирования. По принципу действия мне он напоминает WYSIWYG-редактор. Пока регистрация доступна только с разрешения Google. App Inventor освобождает вас от написания кода, вместо этого вы используете подобие блок-схем.

Для лучшего понимания давайте разберем создание приложения HelloPurr. В данном приложении будет показываться изображение с кошкой и кнопка для её кормления, после нажатия которой кошка будет мяукать. Мы создадим приложение с нуля, рассмотрев все шаги разработки представленные ниже:

• Создать новое приложение на сайте App Inventor
• Добавить компоненты, а также метку, содержащую «Pet the Kitty»
• Добавить кнопку с изображением кошки
• Добавить звуковой компонент для воспроизведения мяуканья
• Обработчик событий, запускающий звук при нажатии на кнопку

Приступаем к работе

Вначале настройте ваш компьютер и телефон для работы с App Inventor. Затем создайте новый проект, назовите его «HelloPurr», откроете редактор блоков и присоедините телефон. Затем перейдите обратно в окно браузера.

Сейчас в вашем браузере должен быть открыт appinventor.googlelabs.com, а на вашем телефоне должен быть запущен App Inventor Phone Application. Браузер должен быть открыт на странице конструктора, которая выглядит так:

Обзор процесса разработки

В App Inventor приложения строятся объединением стандартных компонентов. Компоненты являются основным элементом разработки Android-приложений, как ингредиенты в рецепте. Некоторые компоненты очень просты, например Label(метка), который просто показывает текст на экране, или Button, который реализует кнопку. Другие же компоненты более сложны: Canvas, в котором можино располагать изображения или анимацию; accelerometer (motion) sensor, который работает как контроллер от Wii, и определяет когда вы трясете или переворачиваете телефон; компоненты, отправляющие сообщения, проигрывающие видео, получающие данные с сайтов, и много других.

Окно конструктора

• В центре — белая область называемая Viewer(просмотрщик). Это место где вы работаете с компонентами. Эта область показывает как ваше приложение будет выглядеть на вашем телефоне.
• Слева находится Palette(палитра), где показаны доступные компоненты. Palette разделена на секции.
• Справа от Viewer — список компонентов, где показываются используемые компоненты.
• Под компонентами — Media, где показаны используемые картинки и аудио.
• Еще правее — Настройки компонентов: цвет, размер текста, шрифт, и прочее.

Создаем метку

1. Перейдите в палитру и нажмите на Label, и перетащите его в окно просмотрщика. Далее введите текст метки.
2. Посмотрите в окно настроек, там показаны настройки метки. В параметре «Text» вы можете указать текст метки, напишите там «Pet the Kitty» и нажмите Enter. Текст изменится как в окне просмотрщика, так и на телефоне.
3. Измените BackgroundColor метки, который сейчас не задан. Также можете изменить цвет текста в параметре TextColor, в конце измените FontSize на 20.

Добавляем кнопку

Перейдите в палитру и перетащите Button в окно просмотрщика под метку. После этого вы увидите там прямоугольную кнопку. Вы можете нажать на неё, но ничего не произойдет, поэтому нам нужно определить действие при нажатии на кнопку.

1. В окне Настройки показаны все параметры кнопки, если это не так, то нажмите на кнопку в окне просмотрщика. Нажмите на область под Image.
2. Нажмите Add. потом выберите файл и намите ОК.
3. После загрузки изображения, в окне просмотра вы можете увидеть кнопку с изображением кошки.
4. Если внимательно < посмотреть на кнопку, вы увидите «Text for button 1» на ней, можно написать там «Pet Me» («покорми меня») или оставить пустым.

Чтобы добавить звук перетащите с палитры компонент Sound, после этого он появится внизу, как невидимый компонент. Нажмите на Sound1, и выберите источником файл с мяуканьем в параметре Source.

Воспроизводим звук при нажатии

Теперь сделаем так, чтобы кошка мяукала при нажатии.

• Посмотрите на окно Редактора блоков. Сейчас мы должны сделать так, чтобы при нажатии на кнопку проигрывался звук.
• Вверху вы видите кнопки Built-in и My Blocks, нажмите на My Blocks, ниже вы увидите колонку, которая содержит вкладки для каждого компонента: Button1, Label1, Screen1, и Sound1.

• Нажмите на Button1, далее выберите блок when Button1.Click сверху.
• Перетащите блок when Button1.Click на рабочее пространство

• Нажмите на Sound1 в My Blocks и переместите блок call Sound1.Play внутрь блока when Button1.Click.

• Теперь нажмите на кошечку, и вы услышите мяуканье, поздравляю!

Теперь ваше приложение работает, но только пока вы не отключите телефон.

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

• android
• разработка для новичков
• Android inventor

Главная

App Inventor — довольно удобный инструмент для создания программ под мобильную ОС Google Android людьми, не являющимися программистами, но имеющими представления об основах разработки программ. Тем, кому знакомо слово «алгоритм», но кто в силу обстоятельств не изучал или уже забыл основы любых языков программирования. Это официальное позиционирование.

App Inventor чем-то напоминает среду программирования с визуальным редактором (концепция WYSIWYG ), где вначале создаётся интерфейс программы, а затем пишется «код» для каждого элемента этого интерфейса и общего поведения программы (Visual Basic). То есть, в App Inventor есть возможность визуально проектировать интерфейс программы и графически представить алгоритм её работы для полученя более подробной информации.

Узнав о существовании графических языков программирования , например ДРАКОН , можно прийти к несколько другим выводам о позиционировании App Inventor. Ведь правила таких языков «оптимизированы для восприятия алгоритмов человеком», а ведь и в данном продукте программист не пишет буквами — он выстраивает алгоритм практически блок-схемами.

App Inventor — развивающий проект. Конечно, его функциональность далека от таковой у профессиональных сред разработки. Не реализовано и большинство компонентов средств разработки ( SDK ) для Android, представленных в официальном SDK.

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

Наиболее важные из них приведены в таблице ниже (элементы, помеченные * доступны при использовании Marketizer ).