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, и определяет когда вы трясете или переворачиваете телефон; компоненты, отправляющие сообщения, проигрывающие видео, получающие данные с сайтов, и много других.
Окно конструктора
Создаем метку
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» и начнется загрузка вашего приложения. После загрузки установите приложение.
Поступаем в 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:
Приложение создано, пришло время для некоторых выводов.
Программирование мобильных приложений с помощью App Inventor
Операционная система Android является одной из лидирующих ОС. Разработка мобильных приложений под ОС Android очень актуальна даже несмотря на то, что под Android разработано множество приложений самых разных форматов и жанров. Дело в том, что подчас трудно найти нужное приложение, а часто бывает и так, что у пользователя рождается идея создания собственного уникального приложения.
Для создания приложений под Android необходима определенная квалификация в программировании, что делает практически невозможным создание приложений людьми, не познавшими основы программирования.
В итоге за данную проблему взялся коллектив Массачусетского технологического института (МТИ). В его стенах была создана среда, которая позволяет каждому школьнику или домохозяйке создать приложение под ОС Android. В основе данной разработки лежит популярная среда по алгоритмике Scratch, которую также разработали в МТИ.
В данной статье мы рассмотрим алгоритм создания простого приложения под Android. В дальнейшем вы сможете повышать свой уровень в создании программ под мобильные устройства.
Массачусетский технологический институт
Создадим простейшее приложение, которое будет здороваться с нами по имени.
1 шаг: Зарегистрироваться в Google
На первом шаге необходимо зайти на сайт google.com и пройти регистрацию.
2 шаг: MIT App Inventor
IDE App Inventor находится в веб-пространстве, что сильно упрощает работу, так как ресурсы компьютера практически не используются (но для доступа к среде необходимо наличие интернета). Также не требуется знания языка программирования Java и Android SDK.
Ссылка для входа в среду программирования MIT App Inventor:
Напоминаем: при обращении на данный сайт от вас потребуется наличие аккаунта Google или Google Apps.
Вход: Google
3 шаг: Описание интерфейса пользователя
После того как мы зашли на сайт и ввели свой логин и пароль, мы попадаем на страницу с проектами (при первом заходе данная страница будет пустой).
Разработка приложений происходит в 2 этапа:
Первый этап — проектирование интерфейса пользователя;
Второй этап — программирование (создание инструкций) приложения.
Для этого в меню выбираем Проекты → Начать новый проект. Появится окно для ввода названия проекта. При создании имени проекта нужно учитывать, чтобы имя отражало суть проекта (в имени запрещено использовать пробелы и другие спецсимволы).
У нас появилась новая страница.
1 блок «Палитра» — это Встроенные модули и блоки. Данная группа блоков позволяет задавать определенные действия/функции созданным компонентам.
2 блок «Просмотры» — Модель экрана мобильного устройства для визуального отображения.
3 блок «Компоненты» — Компоненты программы инициализируемых объектов.
4 блок «Свойства» — Свойства компонентов.
Для нашего приложения нужно выбрать 3 стандартных объекта из блока 1: Текстовое окно, кнопка и надпись.
Для этого из блока 1 переместим их по очереди в блок 2.
Если вы всё сделали правильно, объекты отобразятся в блоке 3.
Следующим шагом переименуем надпись на кнопке. В блоке 2 выберем кнопку (для этого необходимо просто нажать на нее) и перейдем в блок 4 «Свойства». В блоке «Свойства» необходимо найти свойства кнопки «Текст». Заменим «Текст для Кнопка1» на «ЖМИ!» или «Ответ».
4 шаг: Программирование
Сейчас у нас готов интерфейс приложения (визуальное отображение). Если мы его запустим или скачаем его на мобильное устройство, то оно запустится, но при нажатии на кнопки или при вводе текста не будет происходить ничего. Чтобы написать программу (инструкцию), мы перейдем в режим программирования. Для этого в правом верхнем углу нажмем на кнопку «Блоки». Как вы уже поняли, до этого мы были в режиме «Дизайнер», и для перехода обратно в этот режим необходимо нажать на кнопку «Дизайнер» возле кнопки «Блоки».
Проговорим еще раз, что должна делать наша программа.
Оператор вводит свое имя в поле «Текст»: «Петя». Далее оператор нажимает на кнопку «ЖМИ!» и в надписи 1 появляется надпись: «Здравствуй, Петя!»
В 1 блоке находятся элементы и функции, их называют компоненты, которые мы можем использовать. Для этого нужно необходимый элемент перетащить в рабочую зону. Компоненты делятся на встроенные и интегрированные.
Теперь перейдем непосредственно к созданию инструкции (программы). Мы это делаем составлением разных блоков в единую картину — это очень похоже на сборку пазла.
1 элементом для нашей программы будет срабатывание события — нажатие кнопки.
Для этого выбираем компонент «Кнопка 1» и выбираем функцию «Когда Кнопка1.Щелчок» и переносим ее на середину рабочей зоны.
2 элементом для нашей программы будет элемент присваивание значений компоненту «Надпись1».
Для этого выбираем компонент «Надпись1» и выбираем функцию «Присвоить Надпись1.ЦветФона». Переносим и присоединяем к функции кнопки. Если мы сделали все правильно, прозвучит звуковой сигнал, похожий на щелчок. Далее меняем цвет фона на «Текст», так как мы работаем с текстовой информацией.
3 элементом нашей программы будет встроенный объект «Текст». Выбираем компонент «соединить». Этот элемент позволяет склеить текстовые фрагменты в единый текст. Этот элемент необходимо соединить с элементом «Присвоить Надпись1.Текст».
4 элемент — это текстовое поле. Изначально оно пустое. В данном блоке элементов мы пропишем статическую приветственную информацию. Для этого во встречных компонентах выбираем «Текст», далее выбираем компонент, прикрепляем к первому ярусу элемента «соединить». В этом блоке напишем наше приветствие: «Привет».
5 элемент. Нам необходимо соединить с приветствием имя, введенное в текстовое поле оператором. Для этого выберем объект «Текст1», выбираем элемент «Текст1.ЦветФона» и соединяем с блоком «соединить». Далее меняем цвет фона на «Текст», так как мы работаем с текстовой информацией.
Наша программа готова.
5 шаг: Тестирование приложения
Чтобы закачать нашу программу на мобильное устройство, у App Invertor есть несколько вариантов.
Мы воспользуемся самым простым.
Чтобы закачать приложение, его нужно скомпилировать в APK-файл. И этот установочный файл перенести на мобильное устройство.
В верхнем меню мы выберем раздел «Построить», в подпункте выбираем «Приложение (Создать QR-код для скачивания. apk)». Программа сама скомпилирует программу и создаст QR-код. Если мы считаем этот код, наша программа автоматически скачается на мобильное устройство. Важное замечание: QR-код действителен 2 часа.
Поздравляем! Вы создали свое первое мобильное приложение!
