Лаб работа14. Создание первого приложения. Привет, Коди! Создание вашего первого приложения HelloCodi
 Скачать 1.2 Mb.
|
|
Привет, Коди! Создание вашего первого приложения: HelloCodi Теперь, когда вы настроили свой компьютер и устройство и узнали, как работают конструктор и редактор блоков, вы готовы создать приложение HelloCodi. На этом этапе у вас должен быть открыт конструктор или редактор блоков в вашем браузере, а устройство Android или эмулятор Android должны быть подключены к редактору блоков. (См. Инструкции по установке для App Inventor 2, если у вас еще не запущены эти вещи.) Выберите «Начать новый проект» в меню «Проекты» и назовите его HelloCodi. HelloCodi: коснитесь пчелы, услышьте жужжание пчелы! HelloCodi - это простое приложение, которое можно создать за очень короткое время. Вы создаете кнопку с изображением пчелы Коди, а затем программируете кнопку так, чтобы при нажатии на нее телефон издавал жужжащий звук. Чтобы создать HelloCodi, вам понадобится файл изображения пчелы Коди. Загрузите эти файлы на свой компьютер, щелкнув следующие ссылки. Для загрузки: щелкнув ссылку, щелкните изображение правой кнопкой мыши и выберите «Сохранить как». Сохраните файл на рабочем столе, в папке загрузок или в любом другом месте, где его можно будет легко найти позже. Изображение Codi: codi.jpg (щелкните правой кнопкой мыши и сохраните) Звук пчелы: Bee-Sound.mp3 (щелкните правой кнопкой мыши и сохраните) Выберите компоненты для разработки вашего приложения  Изобретатель App компоненты расположены на левой стороне окна конструктора под названием палитры . Компоненты - это основные элементы, которые вы используете для создания приложений на телефоне Android. Они похожи на ингредиенты в рецепте. Некоторые компоненты очень просты, например, компонент Label , который просто показывает текст на экране, или компонент Button (№1 слева), который вы нажимаете, чтобы инициировать действие. Другие компоненты более сложны: холст для рисования, который может содержать неподвижные изображения или анимацию, датчик акселерометра , который работает как контроллер Wii и определяет, когда вы двигаете или встряхиваете телефон, компоненты, которые отправляют текстовые сообщения, компоненты, которые воспроизводят музыку и видео, компоненты которые получают информацию с веб-сайтов и т. д. Чтобы использовать компонент в своем приложении, вам нужно щелкнуть и перетащить его в средство просмотра в середине конструктора . Когда вы добавляете компонент в средство просмотра (№1 ниже), он также появляется в списке компонентов в правой части средства просмотра. Компоненты (№2 ниже) имеют настраиваемые свойства. Эти свойства изменяют способ отображения или поведения компонента в приложении. Чтобы просмотреть и изменить свойства компонента (№3 ниже), вы должны сначала выбрать нужный компонент в своем списке компонентов.  Шаги по выбору компонентов и настройке свойств HelloCodi будет иметь компонент Button, который отображает изображение пчелы, которое вы скачали ранее. Для этого: Шаг 1а . Из палитры « Пользовательский интерфейс» перетащите компонент « Кнопка» на Экран 1 (№ 1). Шаг 1b. Чтобы присвоить кнопке изображение пчелы, на панели « Свойства» в разделе «Изображение» щелкните текст «Нет ...» и нажмите «Загрузить файл ...» (№2). Появится окно, в котором вы сможете выбрать файл изображения. Нажмите «Обзор», а затем перейдите в папку с файлом codi.jpg, который вы скачали ранее (№3). Щелкните файл codi.jpg , нажмите «Открыть», а затем нажмите «ОК».  Шаг 2 . Измените свойство Text кнопки : удалите «Text for Button1», оставив свойство text кнопки пустым, чтобы не было надписей поверх изображения пчелы.  Шаг 3 . Из палитры пользовательского интерфейса перетащите компонент Label в средство просмотра (# 1) , поместив его под изображением пчелы. Он появится под вашим списком компонентов как Label1 . На панели " Свойства" измените (2) Текстовое свойство Label1 читается как «Touch the Bee». Вы увидите изменение текста в конструкторе и на своем устройстве. (3) FontSize до 30. (4) BackgroundColor Label1, щелкнув поле. Вы можете изменить его на любой понравившийся цвет. (5) TextColor на любой понравившийся цвет. (Примечание: если BackgroundColor и TextColor совпадают, вы не сможете прочитать свой текст!) Здесь цвет фона установлен на голубой, а цвет текста установлен на синий.  Шаг 4 . В разделе «Палитра» щелкните ящик « Медиа», перетащите компонент « Звук» и поместите его в средство просмотра (№1). Куда бы вы его не уронили, он будет отображаться в области в нижней части средства просмотра, отмеченной « Невидимые компоненты» . На панели «Мультимедиа» нажмите «Загрузить файл ...» (№2). Перейдите в папку с файлом Bee-Sound.mp3, который вы загрузили ранее, и загрузите его в этот проект (№3). На панели «Свойства» убедитесь, что в свойстве «Источник» в настоящее время указано «Нет» .... Щелкните слово «Нет ...», чтобы изменить Источник компонента Sound1 на Bee-Sound.mp3 (# 4).  Программирование с помощью редактора блоков До сих пор вы располагали экран и компоненты своего приложения в конструкторе , который находится в окне веб-браузера. Чтобы начать программировать поведение приложения, вам нужно перейти в редактор блоков . Нажмите кнопку «Блоки» в правом верхнем углу экрана, чтобы перейти в редактор блоков.  Когда перед вами появится редактор блоков, перейдите к следующему шагу, чтобы начать программировать свое приложение с помощью блоков. Воспроизведение звука Шаг 1 . В левой части редактора блоков щелкните ящик Button1, чтобы открыть его. Перетащите блок when Button1.Click в рабочую область (открытая область справа).  Эти горчично-желтые блоки называются блоками обработчиков событий . Блоки обработчика событий определяют, как мобильное устройство должно реагировать на определенные события: кнопка была нажата, телефон встряхивается, пользователь проводит пальцем по холсту и т. Д., Когда Button1.Click является обработчиком событий. Шаг 2а . Щелкните ящик Sound1 и перетащите блок Sound1.Play и подключите его к разделу «do» блока when Button1.Click . Блоки соединяются вместе, как кусочки пазла, и вы можете услышать щелчок, когда они соединяются.  Фиолетовые блоки называются командными блоками, которые помещаются в тело обработчиков событий. Когда обработчик событий выполняется, он запускает последовательность команд в своем теле. Команда - это блок, который определяет действие, которое должно быть выполнено (например, воспроизведение звука), когда запускается событие (например, нажатие Button1). На этом этапе ваши блоки должны выглядеть так:  Теперь вы можете видеть, что командный блок находится в обработчике событий . Этот набор блоков означает; «при нажатии кнопки Button1 будет воспроизводиться звук Sound1». Обработчик событий подобен категории действия (например, нажатие кнопки), а команда определяет тип действия и детали действия (например, воспроизведение звука). Вы можете узнать больше о блоках и о том, как они работают здесь: Встроенные блоки App Inventor . Попробуйте на своем устройстве или в эмуляторе! При нажатии на кнопку вы должны услышать жужжание пчелы. Поздравляем, ваше первое приложение запущено! Примечание. На некоторых устройствах существует известная проблема с компонентом «Звук». Если вы видите «Ошибка ОС», а звук не воспроизводится или воспроизводится с большой задержкой, вернитесь в конструктор и попробуйте использовать компонент «Проигрыватель» (находится в разделе «Медиа») вместо компонента «Звук». Упаковка вашего приложения Пока ваше устройство (эмулятор или телефон / планшет) было подключено к App Inventor, ваше приложение работало на вашем устройстве в реальном времени. Если вы отключите эмулятор / устройство от редактора блоков, приложение исчезнет. Вы всегда можете вернуть его, повторно подключив устройство. Чтобы приложение работало без подключения к App Inventor, необходимо « упаковать » приложение для создания пакета приложения (файла apk). Чтобы «упаковать» приложение для установки на ваше устройство или отправки другому пользователю, щелкните вкладку « Сборка » в верхней части экрана. В разделе «Сборка» вы можете выбрать один из двух вариантов:  1. Приложение (укажите QR-код): вы можете сгенерировать штрих-код (QR-код), который можно использовать для установки приложения на мобильное устройство с камерой, с помощью сканера штрих-кода, такого как сканер штрих-кода ZXing. (в свободном доступе в Google Play). этот штрих-код действителен только два часа. Если вы хотите поделиться своим приложением с другими с помощью штрих-кода в течение более длительного периода, вам необходимо загрузить файл .apk на свой компьютер и использовать стороннее программное обеспечение для преобразования файла в штрих-код. Более подробную информацию можно найти здесь . 2. Приложение (сохранить на моем компьютере): вы можете загрузить приложение на свой компьютер в виде файла apk, который вы можете распространять и делиться по своему усмотрению, вручную установив его на другие устройства. (иногда называется «боковой загрузкой» ). Рассмотрение Вот основные идеи, рассмотренные на данный момент: Вы создаете приложения, выбирая компоненты (ингредиенты), а затем сообщая им, что и когда делать. Вы используете конструктор для выбора компонентов и установки свойств каждого компонента. Некоторые компоненты видны, а некоторые нет. Вы можете добавлять мультимедиа (звуки и изображения) в приложения, загружая их со своего компьютера. Вы используете редактор блоков для сборки блоков, которые определяют поведение компонентов. Блоки when ... do ... определяют обработчики событий , которые сообщают компонентам, что делать, когда что-то происходит. блоки call ... сообщают компонентам, что нужно делать. Сканируйте образец приложения на свой телефон Отсканируйте следующий штрих-код на свой телефон, чтобы установить и запустить образец приложения.  Или скачайте apk Скачать исходный код Если вы хотите работать с этим образцом в App Inventor, загрузите исходный код на свой компьютер, затем откройте App Inventor, щелкните « Проекты» , выберите « Импортировать проект (.aia) с моего компьютера ...» и выберите исходный код, который вы только что скачал. Следующие шаги Теперь, когда вы знаете основы работы App Inventor, мы рекомендуем вам: Завершите дополнительные учебные пособия . Ознакомьтесь с руководством пользователя App Inventor 2 . Присоединяйтесь к дискуссионному форуму сообщества . Прочтите руководство по встроенным блокам . Или, если вы использовали эмулятор и хотите начать использовать свой мобильный телефон, вы можете настроить свое устройство Android для создания приложений. |