Pull to refresh

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

Reading time 3 min
Views 165K
Original author: Google
Для начала я расскажу вам немного про App Inventor, а потом мы напишем первое приложение, где будем кормить кота.

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



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

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


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

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

image

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


В 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.


image

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


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

image

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

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


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

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

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

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


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

В следующем уроке мы разберем как сохранить приложение и научим кошку новым трюкам.
Tags:
Hubs:
+13
Comments 28
Comments Comments 28

Articles