Для начала я расскажу вам немного про App Inventor, а потом мы напишем первое приложение, где будем кормить кота.
App Inventor может использовать человек, не владеющий языками программирования. По принципу действия мне он напоминает WYSIWYG-редактор. Пока регистрация доступна только с разрешения Google. App Inventor освобождает вас от написания кода, вместо этого вы используете подобие блок-схем.
Для лучшего понимания давайте разберем создание приложения HelloPurr. В данном приложении будет показываться изображение с кошкой и кнопка для её кормления, после нажатия которой кошка будет мяукать. Мы создадим приложение с нуля, рассмотрев все шаги разработки представленные ниже:
Вначале настройте ваш компьютер и телефон для работы с App Inventor. Затем создайте новый проект, назовите его «HelloPurr», откроете редактор блоков и присоедините телефон. Затем перейдите обратно в окно браузера.
Сейчас в вашем браузере должен быть открыт appinventor.googlelabs.com, а на вашем телефоне должен быть запущен App Inventor Phone Application. Браузер должен быть открыт на странице конструктора, которая выглядит так:
![image](https://habrastorage.org/r/w1560/storage/habraeffect/39/a1/39a13c6d1b370abb658ac0399687f033.png)
В App Inventor приложения строятся объединением стандартных компонентов. Компоненты являются основным элементом разработки Android-приложений, как ингредиенты в рецепте. Некоторые компоненты очень просты, например Label(метка), который просто показывает текст на экране, или Button, который реализует кнопку. Другие же компоненты более сложны: Canvas, в котором можино располагать изображения или анимацию; accelerometer (motion) sensor, который работает как контроллер от Wii, и определяет когда вы трясете или переворачиваете телефон; компоненты, отправляющие сообщения, проигрывающие видео, получающие данные с сайтов, и много других.
Посмотрев на окно конструктора вы увидите, что оно состоит из нескольких областей:
Вам понадобится изображение котенка и звук «Мяу».
![image](https://habrastorage.org/r/w1560/storage/habraeffect/ad/c2/adc2ae62275ca6becce5743c207af6e1.png)
Перейдите в палитру и перетащите Button в окно просмотрщика под метку. После этого вы увидите там прямоугольную кнопку. Вы можете нажать на неё, но ничего не произойдет, поэтому нам нужно определить действие при нажатии на кнопку.
![image](https://habrastorage.org/r/w1560/storage/habraeffect/48/69/4869abc9f30cc5e7b2f55ae64ddd5c14.png)
Чтобы добавить звук перетащите с палитры компонент Sound, после этого он появится внизу, как невидимый компонент. Нажмите на Sound1, и выберите источником файл с мяуканьем в параметре Source.
Теперь сделаем так, чтобы кошка мяукала при нажатии.
![image](https://habrastorage.org/r/w1560/storage/habraeffect/74/57/7457e6046f3e18568964f3f2bc03fb86.png)
![image](https://habrastorage.org/r/w1560/storage/habraeffect/f5/30/f530f0b5eb076a7775b744f9cf91f354.png)
![image](https://habrastorage.org/r/w1560/storage/habraeffect/a2/67/a2677cd68bf936510cbf81a25b512e27.png)
Теперь ваше приложение работает, но только пока вы не отключите телефон.
В следующем уроке мы разберем как сохранить приложение и научим кошку новым трюкам.
App Inventor может использовать человек, не владеющий языками программирования. По принципу действия мне он напоминает WYSIWYG-редактор. Пока регистрация доступна только с разрешения Google. App Inventor освобождает вас от написания кода, вместо этого вы используете подобие блок-схем.
![image](https://habrastorage.org/storage/habraeffect/4e/7d/4e7da6514c7ee85245ff9e5cbde3ce24.png)
- Создать новое приложение на сайте App Inventor
- Добавить компоненты, а также метку, содержащую «Pet the Kitty»
- Добавить кнопку с изображением кошки
- Добавить звуковой компонент для воспроизведения мяуканья
- Обработчик событий, запускающий звук при нажатии на кнопку
Приступаем к работе
Вначале настройте ваш компьютер и телефон для работы с App Inventor. Затем создайте новый проект, назовите его «HelloPurr», откроете редактор блоков и присоедините телефон. Затем перейдите обратно в окно браузера.
Сейчас в вашем браузере должен быть открыт appinventor.googlelabs.com, а на вашем телефоне должен быть запущен App Inventor Phone Application. Браузер должен быть открыт на странице конструктора, которая выглядит так:
![image](https://habrastorage.org/storage/habraeffect/39/a1/39a13c6d1b370abb658ac0399687f033.png)
Обзор процесса разработки
В App Inventor приложения строятся объединением стандартных компонентов. Компоненты являются основным элементом разработки Android-приложений, как ингредиенты в рецепте. Некоторые компоненты очень просты, например Label(метка), который просто показывает текст на экране, или Button, который реализует кнопку. Другие же компоненты более сложны: Canvas, в котором можино располагать изображения или анимацию; accelerometer (motion) sensor, который работает как контроллер от Wii, и определяет когда вы трясете или переворачиваете телефон; компоненты, отправляющие сообщения, проигрывающие видео, получающие данные с сайтов, и много других.
Окно конструктора
Посмотрев на окно конструктора вы увидите, что оно состоит из нескольких областей:
- В центре — белая область называемая Viewer(просмотрщик). Это место где вы работаете с компонентами. Эта область показывает как ваше приложение будет выглядеть на вашем телефоне.
- Слева находится Palette(палитра), где показаны доступные компоненты. Palette разделена на секции.
- Справа от Viewer — список компонентов, где показываются используемые компоненты.
- Под компонентами — Media, где показаны используемые картинки и аудио.
- Еще правее — Настройки компонентов: цвет, размер текста, шрифт, и прочее.
Вам понадобится изображение котенка и звук «Мяу».
Создаем метку
- Перейдите в палитру и нажмите на Label, и перетащите его в окно просмотрщика. Далее введите текст метки.
- Посмотрите в окно настроек, там показаны настройки метки. В параметре «Text» вы можете указать текст метки, напишите там «Pet the Kitty» и нажмите Enter. Текст изменится как в окне просмотрщика, так и на телефоне.
- Измените BackgroundColor метки, который сейчас не задан. Также можете изменить цвет текста в параметре TextColor, в конце измените FontSize на 20.
![image](https://habrastorage.org/storage/habraeffect/ad/c2/adc2ae62275ca6becce5743c207af6e1.png)
Добавляем кнопку
Перейдите в палитру и перетащите Button в окно просмотрщика под метку. После этого вы увидите там прямоугольную кнопку. Вы можете нажать на неё, но ничего не произойдет, поэтому нам нужно определить действие при нажатии на кнопку.
- В окне Настройки показаны все параметры кнопки, если это не так, то нажмите на кнопку в окне просмотрщика. Нажмите на область под Image.
- Нажмите Add... потом выберите файл и намите ОК.
- После загрузки изображения, в окне просмотра вы можете увидеть кнопку с изображением кошки.
- Если внимательно< посмотреть на кнопку, вы увидите «Text for button 1» на ней, можно написать там «Pet Me» («покорми меня») или оставить пустым.
![image](https://habrastorage.org/storage/habraeffect/48/69/4869abc9f30cc5e7b2f55ae64ddd5c14.png)
Чтобы добавить звук перетащите с палитры компонент Sound, после этого он появится внизу, как невидимый компонент. Нажмите на Sound1, и выберите источником файл с мяуканьем в параметре Source.
Воспроизводим звук при нажатии
Теперь сделаем так, чтобы кошка мяукала при нажатии.
- Посмотрите на окно Редактора блоков. Сейчас мы должны сделать так, чтобы при нажатии на кнопку проигрывался звук.
- Вверху вы видите кнопки Built-in и My Blocks, нажмите на My Blocks, ниже вы увидите колонку, которая содержит вкладки для каждого компонента: Button1, Label1, Screen1, и Sound1.
![image](https://habrastorage.org/storage/habraeffect/74/57/7457e6046f3e18568964f3f2bc03fb86.png)
- Нажмите на Button1, далее выберите блок when Button1.Click сверху.
- Перетащите блок when Button1.Click на рабочее пространство
![image](https://habrastorage.org/storage/habraeffect/f5/30/f530f0b5eb076a7775b744f9cf91f354.png)
- Нажмите на Sound1 в My Blocks и переместите блок call Sound1.Play внутрь блока when Button1.Click.
![image](https://habrastorage.org/storage/habraeffect/a2/67/a2677cd68bf936510cbf81a25b512e27.png)
- Теперь нажмите на кошечку, и вы услышите мяуканье, поздравляю!
Теперь ваше приложение работает, но только пока вы не отключите телефон.
В следующем уроке мы разберем как сохранить приложение и научим кошку новым трюкам.