Пользователь
0,0
рейтинг
6 августа 2010 в 14:29

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

Для начала я расскажу вам немного про 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
  • Теперь нажмите на кошечку, и вы услышите мяуканье, поздравляю!


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

В следующем уроке мы разберем как сохранить приложение и научим кошку новым трюкам.
Перевод: Google
Никита @zemel
карма
40,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое

Комментарии (28)

  • +3
    Как мне кажется, этот App Inventor никогда не послужит действительно мощным средством для разработки под Android.

    1) Написание кода в Java файлах никто не отменял, ну а без него вряд ли что-то, полезное можно будет написать.
    2) В таких прогах всегда генерируется куча лишнего кода, который не нужен, да и всякие мелочи можно учитывать только собственноручно прописывая все компоненты, их размещения и свойства.

    В итоге мы получим большое количество приложений низкого уровня, что конечно же печально. Однако, если все наработки Google Inc. добавить в самые популярные сегодняшние Java, и не только, IDE, то получились бы вкусные плюшки.
    • +2
      Этот сервис создан не столько для разработки серьезных приложений, сколько в образовательных целях, для школьников, различных вузов (ПТУ?) и т.д, что, собственно, видно по форме регистрации.
      • –2
        Ну положим, что каждому первому школьнику это будет не нужно. На моей памяти мои одноклассники (2 человека из 30) самостоятельно изучая Паскаль писали вполне себе достойные программульки, даже чат делали между допотопными неизвестного производства компьютерами. Это для них будет как «Разукрашка» для опытного художника.
        Имхо, лучше было бы проводить семинары в крупных образовательных центрах для талантливой программерской молодежи. Пригласили бы победителей олимпиад по информатике да и устроили бы им лекции и воркшопы.
        • 0
          Проводят мастер классы, по крайней мере у нас в Украине. Но одно другому не мешает.
  • +2
    очень актуально, как раз на хабре реклама про конкурс на лучшее android- приложение. Чувствую будет много работ про «котиков и собачек»
  • +2
    Да.
    Я уже прихожу к мнению, что наличие котейки в любой статье — это 50% успеха. Похлеще НЛП залочит в памяти усвоенную информацию
    Буду ждать дальнейшего развития кошаче-инклюзивные материалы типа «как сдать ПДД» с кошачьими картинками-примерами внутри

    ПыСы
    Я кошатник, если чО
  • +1
    Я не являюсь Яблофилом, но, на мой взгляд, средства разработки с наиболее адекватным соотношением простота-функциональность сделали большой вклад в популярность платформы и появлению большого количества качественных программ.
    Шаг, подобный созданию быдлосервиса (простите) по созданию поделок, на мой взгляд, не делает плюса для Андроида…
    • 0
      Почему сразу быдлосервис, вдруг человек далекий от программирования просто захочет сделать приложение под свои нужды?
      • +1
        Человек далекий от программирования скорее всего не имеет понятия об алгоритмах, и максимум что у него получится сделать, это такое «мяукающее» приложение (утрирую).
        • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Можно узнать много ли изменений появилось в App Inventor с момента написания этого урока? Насколько я понимаю, разработчики примерно раз в месяц его обновляют, много за 3 месяца изменений?
    • –1
      Ерунда. В XCode есть Interface Builder, чем плох аналог в App Inventor? Вам дают инструмент, а уж как вы его используйте — зависит от вас. Я вижу большой плюс в App Inventor в том, что теперь намного легче будет создавать интерфейсы.
    • 0
      Визуальное программирование и идеи аля Делфи — вот откуда ноги растут.
      Какбы и отдаёт «быдлоориентированностью», но с другой стороны всёже неслабо сделано, учитывая что тут IDE навроде того-же Delphi полностью работает в браузере (на GWT написано кстати).
      Слышал что приходится всётаки ставить плагин еще, но по сути для того чтоб это ремоутное IDE в браузере (которое хостится где-то в клауде кстати) могло дебажить приложения, запущенные на твоём личном локальном андроидодевайсе, втыкнутом в твой комп.
      Тоесть есть интересные сильные стороны в этом всём.
  • +3
    Почему-то большинство программистов высказывается против этого инструмента. И мне кажется — это делает большой плюс — любой человек, не знакомый с программированием может сделать себе iКотейкоПрограммко.
    И на самом деле это новая «идеология» в карманных устройствах.
    Первое — просто телефон, когда ты можешь пользоваться только тем, что сделал производитель, второе — телефон с J2ME, когда ты можешь выбирать из приложений ограниченного функционала, третье — смарт, который позволяет использовать более продвинутые приложения, и теперь уже пользователь сам может реализовывать собственный функционал.
    • +1
      Да, но это накладывает и некоторые отрицательные факторы. Например, появление кучи барахла в маркете, о котором ни раз уже упоминалось. Ничего против этого инструмента не имею. В маркете вообще не хватает фильтра для левых приложений.
      • –1
        мне кажется проблема барахла на маркете несколько надумана. Да — приложений много, да — многие невысокого качества, но есть же система рейтинга, есть сторонние каталоги и рекомендаторы (тот же дроидер чарт :) ) потому меня не напрягает убогость маркета — если что-то нужно ищё в инете, потом беру на маркете.
        • +1
          И все же было бы приятнее, если в маркете был бы раздел «Барахло» с рейтингом приложений от 3 и ниже. Да, есть полезные ресурсы, типа Droider.ru и Android.mobile-review.com, это и спасает положение вещей. =)
      • 0
        Чтобы в маркете появиться, все же надо денег заплатить.
        Хотя конечно в целом не очень-то понятно, чего же хоть примерно полезного можно таким образом сотворить.

        Но очень надеюсь на то, что определенные наработки из Inventor'a перекочуют в плагин ADT, это облегчило бы различную рутину.
      • 0
        Барахло также есть и в App Store. Вспомните про пакистанца (или индуса), который создал десятки копеешных программ с изображением разных моделей и успешно наварился в App Store. Более грамотная система рейтинга и фильтры уберегут вас от подобного треша в маркете. Вот к чему надо стремится Google! А инструменты разработки действительно нужно упрощать.
  • –2
    Теперь говноприложений для Android станет еще больше. Гораздо, гораздо больше…
  • +2
    Зарегистрировлся у них на сайте, что бы дали скачать сие чудо, обещали ответить в течении недели, уже прошло две — ни ответа, ни привета.
    Будучи за городом попробовал скачать на смартфон (через GPRS/EDGE) пример приложения из туториала, тоже простенькое типа этой кошки. Думал максимум килобайт на 100-200, но оказалось >2 мегабайт. Сразу вспомнилась Дельфи и ее EXE'шник с пустой формой на >500 Килобайт.
    • 0
      Кто-нить уже реально имеет доступ в этот сервис? Как вы это сделали?

      У меня такая же ситуация. Причем я зарегился на два акаунта. В одном честно указал где живу, в другом написал что я школьник из штатов. Думал что это ускорит процесс. Результат одинаковый — молчание.
    • 0
      Мне пришло дня через. Четыре приглашение.
      Но надо было внимательнее читать условия: андроид-телефона у меня пока нет…
      Так что сижу, кусаю локти(
      • 0
        Мне пришло только сегодня… Чуть ли не месяц назад просил дать доступ
  • 0
    Спасибо за урок. Честно пытался разобраться в этой программе, не смог. плюнул и вернулся обратно в Эклипс, а то тут как-то сложно всё.
  • +2
    Единственное, чего мне не хватает при разработке Android-приложений — хорошего визуального редактора интерфейса.
    Скрестите, пожалуйста, Visual Studio с ADK!
  • –1
    App Inventor рассчитан для детей и людей, которые Очень хотят сделать программу под Android, но не знают как.
    Не вижу ничего отрицательного в этом ресурсе. По-моему, уж лучше ребёнок сидит рисует приложение, чем занимается не пойми чем.
    Насчёт визуального редактора для Android, есть вот такое творение, оно, конечно, не заменит полноценного gui-редактора, но жизнь облегчить сможет
  • 0
    В настоящее время программу созданную в AppInventor невозможно опубликовать в Android Market. Так что опасаться за появление там кучи барахла преждевременно. Если только «программисты» не подсуетятся.
    Кроме того, судя по некоторым замечаниям проектом интересуются не только школьники.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.