Архив Галактики

Изобретаем с Google App Inventor

biarmicus's blog / 17.10.2010

Этим летом, пока все мы боролись с пожарами или старались не обращать на них внимания, компания Google тоже не теряла времени даром – она разработала и представила на суд общественности свой новый продукт - Google App Inventor, который представляет возможность пользователям мобильных телефонов (читай – всем людям доброй воли) создавать собственные приложения и обмениваться ими.

С выходом в свет Google Inventor у нас появился отличный повод пройтись сразу по нескольким зайцам – познакомиться с мобильной платформой Android, окунуться в свежие ощущения, связанные с "облачным компьютингом" и познать новые радости визуального программирования. С чего начнем? Начнем с того, что пошарим по своим карманам в поиске телефона (точнее, смартфона), оснащенного операционной системой Android. Если таковой обнаружится, соединим его USB кабелем с компьютером (в этом случае следующий раздел этого поста можно не читать), а если (совершенно случайно) такого телефона у нас нету, то это совершенно не беда - мы его сэмулируем.

Эмуляция андроидного телефона.
Для того, чтобы собрать телефон прямо на мониторе нашего компьютера, нам понадобятся две вещи – среда Java (качается бесплатно с http://java.com/ru/) и, собственно, инсталляционный пакет эмулятора Android SDK (то есть Software Developer Kit), который ждет нас по ссылке http://developer.android.com/sdk/index.html (естественно, качаем архив, соответствующий операционной системе, на которую мы его собираемся устанавливать). Устанавливаем Java (если мы это еще не сделали), распаковываем архив с Android SDK и запускаем SDK Setup.exe. В процессе установки SDK свяжется с сервером Google и проверит наличие новых пакетов, после чего предложит нам выбрать пакеты для установки. На момент написания этого поста самой свежей является версия SDK 2.2 – ее и установим, нажав кнопку Install.



После установки всех необходимых компонентов система сгенерирует пусковой файл start_emulator.bat – пуск которого и приведет к запуску эмулятора мобильного телефона с Android на нашем компьютере. Теперь можно потыкать мышкой в кнопочки и насладиться предустановленными приложениями, можно запустить браузер и полазить по Интернету "из под Андроида", а можно перейти к тому, ради чего мы тут сегодня собрались.



Изобретаем облачно
Google App Inventor – приложение облачное т.е. скачивать его себе на компьютер не нужно, оно себе тихонько крутится на сервере Google, а мы запускаем его в браузере. Но для того, чтобы все у нас получилось, нужна одна малость – разрешение Googlе на его использование. Заходим на http://appinventor.googlelabs.com/ и начинаем переговорный процесс. Кому попало Google свой Инвентор не дает, но мы то – не кто попало! В правом верхнем углу находим раздел "Request access" и жмем "Complete this form". В открывающейся форме тихо шепчем "мы с тобой одной крови" – то есть вписываем в открывшиеся поля свой аккаунт Google, название учебного заведения, в котором мы работаем, свою должность и пару предложений про то, как мы собираемся использовать Google App Inventor. Одно заполнение этой формы – прекрасный повод для того, чтобы выучить английский язык. Google любит учителей. Через некоторое время (в моем случае – через несколько минут) к вам в почтовый ящик Gmail придет письмо, в котором будет сказано, что доступ вам предоставлен. Cмело жмем на кнопку "My projects" на странице http://appinventor.googlelabs.com/ - теперь нам там рады!

Программируем визуально
В открывшемся поле выбираем "New" и придумываем имя нашему проекту (приветствуются английские буквы, цифры и подчеркивания).


Перед нами откроется окошко дизайнера с четырьмя полями – Палитрой (Palette), Просмотрщиком (Viewer), Компонентами (Components) и Свойствами (Properties). Не откладывая дела в долгий ящик, соберем простенькую программу. Мне, например, очень захотелось получить на своем телефоне изображение морского льва, тыкая в которое, я бы слышал, как он разговаривает.

Итак:
Перетаскиваем из палитры в просмотрщик блок Label. Это та надпись, которая будет появляться над изображением льва в моем телефоне. Сделаем ее максимально красивой. Для простоты будем считать красивым все, что написано 20-м шрифтом синего цвета на желтом фоне – введем все эти параметры в окне "Свойства".



Добавим к нашему проекту изображение морского льва. Для этого перетащим в просмотрщик из палитры блок Button. В окне свойств укажем, что кнопкой для нас будет изображение морского льва (в этом нам поможет меню Image). В Меню Текст мы тоже можем написать что-то более веселое, чем просто Text.



Теперь делаем нашему льву голос. Для этого тащим из палитры в просмотрщик блок Sound (Он находится во вкладке Media). В меню свойств Source жмем Add и выбираем нужный файл из нашей обширной коллекции звуковых файлов. Обращаем внимание на то, что в разделе Компоненты у нас выстраивается структура того, чего мы насобирали.



Итак, строительные материалы готовы. Переходим к самому интересному – к программированию. Жмем на кнопку "Open the Block Editor" ... и долго пытаемся отделаться от ощущения дежавю – до чего же тут все похоже на Scratch. Идем в My Blocks и обнаруживаем там все, что мы понасоздавали на предыдущем этапе. Щелкаем по вкладке Button 1 – и видим все действия, которые мы можем совершить с нашей кнопкой. Выбираем Button1.click (это значит, что нужное нам действие будет происходить, когда мы нажмем на кнопку) и перетаскиваем его в рабочее поле программы. Идем в закладку Sound1. Затаскиваем блок Sound1.Play внутрь блока Button1.click. Наша программа готова!



Теперь – самое интересное. Жмем на кнопку Connect to Phone (она в правом верхнем углу). Наша программа экспортируется в эмулятор телефона и через некоторое время мы видим на нем физиономию нашего льва. Щелкаем ему по носу - и слышим его голос. Все работает!



Теперь дело за малым – записаться в Гуглгруппу учителей, использующих Google App Inventor в своей работе – http://groups.google.ru/group/app-inventor-instructors и начать делиться с ними своими успехами!