Академия мобильных приложений



Скачать 430.25 Kb.
Pdf просмотр
страница1/3
Дата12.02.2017
Размер430.25 Kb.
Просмотров20
Скачиваний0
  1   2   3


Академия мобильных приложений
Appinvent.ru
1
Программирование мобильных приложений в MIT App Inventor
Практикум
Авторы:
Ливенец Марина Александровна
Ярмахов Борис Борисович


Академия мобильных приложений
Appinvent.ru
2
Оглавление
Глава 1. Введение. Среда MIT App inventor. Интерфейс пользователя
1.1 Описание интерфейса пользователя
1.2 Режим “Дизайнер”
1.3 Экраны приложения
1.4 Режим “Блоки”
1.5 Функции режима “Блоки”
1.6 Загрузка и установка приложения на устройство
1.6.1 Если у вас есть мобильное устройство с OS Android и Wi-Fi соединение
1.6.2 Если у Вас отсутствует мобильное устройство с OS Android?
1.6.3 Если вы используете USB кабель
1.7 Загрузка .apk файла на мобильное устройство
1.8 Компоненты приложения
1.9 Разрешение экрана
1.9 Первое мобильное приложение
Глава 2. Практические приемы создания приложений
2.1 Кнопки
Пример 2.1.1 Приложение “Загадка”
Пример 2.1.2 Приложение “SoundBoard”
Пример 2.1.3. Приложение “Отгадай-ка”
Пример 2.1.4 Приложение “Виртуальный кот”
2.2 Приложения с несколькими экранами
Пример 2.2.1 Приложение “Сказочные превращения”
2.3 Обмен данными между экранами

Пример 2.3.1 Приложение “Сказочные перемещения”
Пример 2.3.2 Приложение “Хамелеон”
2.4 Списки
Пример 2.4.1 Создание собственного цвета
Пример 2.4.2 Приложение “Фонарик”
Пример 2.4.3 Приложение “Записная книжка”
Пример 2.4.4 Приложение “Слайд-шоу”
2.5 Рисование
Пример 2.5.1 Приложение “Рисование”
Пример 2.5.2 . Приложение “Пишем на холсте”
Пример 2.5.3 . Приложение“ Конфетти”
2.6 Анимация
Пример 2.6.1 Приложение “Игра в мяч”
Пример 2.6.2. Приложение” Управляем движением объекта”
2.7 Медиа
Пример 2.7.1 Приложение “Распознавание речи”
Пример 2.7.2 Приложение “Испорченный телефон”
Пример 2.7.3 Приложение “Переводчик”
Пример 2.7.4 Приложение “Видеоплеер”
Пример 2.7.5 Приложение “Mp3 плеер”
Пример 2.7.5 Приложение “Фотокамера”
2.8 Общение


Академия мобильных приложений
Appinvent.ru
3
Пример 2.8.1 Приложение “Sharing”
2.9 Сенсоры
Пример 2.9.1 Приложение “Где я?”
Пример 2.9.2 Приложение “Компас”
2.10 Математические функции
Пример 2.10.1. Приложение “Тренажер”
Пример 2.10.2. Приложение “Конвертер систем счисления”
Глава 3. Организация проектной деятельности
3.1 Совместная разработка приложений
3.2 Рекомендации к созданию итогового проекта - приложения


Академия мобильных приложений
Appinvent.ru
4
Глава 1. Введение. Среда MIT App inventor. Интерфейс пользователя

MIT App Inventor (
http://ai2.appinventor.mit.edu/
) - облачная среда визуальной разработки приложений для платформы OS Android, работа в которой не требует знания языка программирования Java и Android SDK, достаточно знания элементарных основ алгоритмизации. Для работы в MIT App Inventor необходимо наличие Google или Google Apps аккаунта, а построение программ осуществляется в визуальном режиме с использованием блоков программного кода.
1.1 Описание интерфейса пользователя

После входа в MIT App Inventor пользователь попадает на страницу, где отображается список его проектов. Все созданные проекты хранятся в папке Мои проекты.


Академия мобильных приложений
Appinvent.ru
5
Вновь создаваемое приложение в среде MIT App Inventor это новый проект (меню
Проекты - Начать новый проект). Нажатие кнопки “Удалить проект” - удаляет созданный проект. Переход к списку проектов из окна разработки по по ссылке
“Проекты/Мои проекты».
Разработка мобильного приложения в MIT App Inventor http://ai2.appinventor.mit.edu/
происходит в 2 этапа. Первый этап - проектирование интерфейса пользователя “Как это будет выглядеть”, второй - программирование компонент приложения “Как они будут себя вести”.


Академия мобильных приложений
Appinvent.ru
6
Эти два процесса реализуются в отдельных окнах, по сути это два разных режима работы в среде с MIT App Inventor.
1.2 Режим “Дизайнер”
Режим “Дизайнер” - режим в котором создается интерфейс (“внешний вид”) приложения” . Данный режим используют для выбора и размещения различных компонент приложения: кнопок, текстовых полей, изображений и др., которые отображаются на экране вашего устройства, при запуске приложения.
Интерфейс для разработки дизайна проекта состоит из следующих основных элементов:

Палитра включает наборы (группы) компонент будущего приложения.


Академия мобильных приложений
Appinvent.ru
7
Компонентами называются функциональные элементы приложения, такие как кнопки, изображения, текст, поля для ввода текста, дат, интерфейсы для подключения к разным датчикам вашего Android-устройства — акселерометр, GPS, базы данных и др. Некоторые компоненты являются частью графического дизайна, например, кнопки, а некоторые — невидимы на экране устройства, например, таймер, сенсоры или видеоплейер.
Просмотр — экран вашего приложения. Точнее один из экранов. В приложении можно использовать несколько экранов, где будут производиться различные действия. Например, на первом экране у вас инструкция к приложению а на втором экране, собственно, приложение
— его функциональная часть.
Компоненты — здесь расположен список компонентов, которые вы уже используете в своем проекте.
Именование компонентов приложения
При именовании компонентов рекомендуется воспользоваться следующим правилом “Имя компонента” = “ Название компонента”+ “Действие/ Функция”, которое он выполняет в приложении: КнопкаНазад, КнопкаДалее, ИзображениеФон и пр. Такое именование компонент позволяет легко ориентироваться при программировании для них действий или событий


Академия мобильных приложений
Appinvent.ru
8
Свойства — в этой части экрана устанавливаются свойства компонент вашего приложения, например: цвет, размер шрифта, источники изображений и звуков, надписи, первоначальное значение и другие.
Медиа — список используемых медиафайлов (изображений, видео-, аудио-роликов и т.п.)
О размерах используемых файлов
Мобильное приложение - это не тот случай, когда в него внедрены фильмы или большие коллекции аудио записей. Желание встроить в приложения большие графические и звуковые файлы, может привести к тому, что оно не только будет долго загружаться, но и займет достаточно много памяти на самом мобильном устройстве.
1.3 Экраны приложения

Проект приложение может состоять из множества экранов. Для работы с экранам «Screen», в окне разработки есть кнопки добавления экрана — «Добавить Экран и удаления экрана —
“Удалить Экран”. Запуск приложения всегда начинается со стартового экрана, дизайн которого может включать набор компонент для перехода на другие экраны.


Академия мобильных приложений
Appinvent.ru
9
В среде MIT App Inventor количество экранов не должно превышать 10. При создании 11 экрана выдается предупреждение о превышении допустимого количества экранов.
1.4 Режим “Блоки”

Режим “Блоки” используется для программирования поведения вашего приложения и его компонент, каким образом выбранные вами компоненты, будут реагировать на различные действия пользователя.
В режиме “Блоки” используются три группы Блоков:
Основные группы Блоков используемых при создании приложений:
1.
Встроенные блоки
Данная группа блоков позволяет задавать определенные действия/функции созданным компонентам.


Академия мобильных приложений
Appinvent.ru
10

Управление— содержит общие для всех компонент блоки ветвления, цикла, работы с несколькими экранами и пр.

Логика— содержит блоки для использования логических функций в приложении

Математика- содержит набор математических блоков

Текст - включает набор текстовых блоков

Массивы - содержит блоки для работы с массивами/списками

Цвета - определяет блоки по работе с цветами

Переменные - блоки позволяющие определять и устанавливать значение глобальных и локальных переменных

Процедуры - содержит блоки, позволяющие определять процедуры и функции, с параметрами или без них, внутри приложения

Блоки действий/событий для компонентов вашего приложения (Группа Screen
1). Задает действия компонентам конкретного приложения. При выделении нужного компонента, отображаются доступные для него блоки.


Академия мобильных приложений
Appinvent.ru
11
(

Любой компонент. Данная группа блоков позволяет организовать и управлять в приложении большим количеством однотипных компонент, например 20 спрайтами или 40 кнопками.


Академия мобильных приложений
Appinvent.ru
12
Конструкции из блоков собираются в поле Просмотр.
1.5 Функции режима “Блоки”

При работе в режиме “Блоки” часто используются следующие его функции:

Свернуть/Развернуть блок.
Функция “Свернуть блок” используется для оптимизации места на экране, при создании приложений с большим программным кодом.
После выполнения функции “Свернуть блок”, конструкция блоков принимает следующий вид:
Чтобы развернуть блок, необходимо щелкнуть по конструкции правой кнопкой мыши и выбрать меню “Развернуть блок”

Добавить комментарий


Академия мобильных приложений
Appinvent.ru
13
Комментирование блоков полезно при написании любых программ, вы оставляете комментарий для пояснения действий и событий, которые заложены в этой конструкции.

Отключить/Включить блок
Данная функция может использоваться при тестировании программ, чтобы не удалять блоки, когда вы сомневаетесь в правильности их использования. Вместо удаления в корзину, на время можно отключить их использование.

Удалить блоки
Блоки удаляются без перетаскивания в корзину

Выполнить
Функция позволяет запустить к исполнению любую часть кода и используется при тестировании программ. В этом случае необходимо иметь подключение к эмулятору.

Копирование блоков


Академия мобильных приложений
Appinvent.ru
14
Копировать блоков внутри экрана, можно используя контекстное меню, Для этого необходимо щелкнуть правой кнопкой мыши на нужной конструкции блоков и выбрать “Создать копию”

Копировать блок в рюкзак

Копировать все блоки в рюкзак


Академия мобильных приложений
Appinvent.ru
15
1.6 Загрузка и установка приложения на устройство

Разработка приложения происходит в облачной среде MIT App Inventor.
Тестирование и отладка происходит на мобильном устройстве.
Рекомендуется для разработки использовать настольный ПК или ноутбук, а для отладки и тестирования -мобильное устройство с предустановленным приложением MIT App
Inventor Companion, которое позволяет считывать QR код созданного вами мобильного приложения для установки его на ваше устройство.


Академия мобильных приложений
Appinvent.ru
16
Способы загрузки приложения на устройство:

в исходном коде (файл c расширением .aia)
Исходный код в формате .aia позволяет редактировать приложение. Исходный код генерируется со страницы проекта меню Проекты / Экспортировать выбранные проекты (.aia) на Мой компьютер.

в виде исполняемого файла ( файл c расширением .apk)
Файл приложения .apk генерируется в App Inventor в меню Построить - Приложение
(сохранить .apk на компьютер). Файл .apk является исполняемым приложением, которое работает на устройстве.


Академия мобильных приложений
Appinvent.ru
17

в виде QR- кода приложения
Генерируется с помощью команды меню Построить - Приложение (создать QR код для скачивания .apk).
Для считывания QR кода и установки приложения на мобильное устройство необходимо установить приложение MIT AI2 Companion App из Google Play. на мобильное устройство.
При установке ваших приложений .apk на мобильное устройство, необходимо разрешить установку приложений из неизвестных источников (Настройки-
Приложения-Неизвестные источники).
1.6.1 Если у вас есть мобильное устройство с OS Android и Wi-Fi соединение

1. На мобильном устройстве загрузить и установить из магазина Google Play приложение MIT
AI2 Companion App.


Академия мобильных приложений
Appinvent.ru
18 2. Подсоединить компьютер на котором вы работаете и мобильное устройство к сети с доступом к интернет, например, через Wi-Fi.
3. На компьютере открыть проект, который нужно протестировать, и выбрать в меню
Помощник->Помощник AI.
4. На экране компьютера появится QR код вашего приложения.


Академия мобильных приложений
Appinvent.ru
19 5 Запустить MIT Ai2 Companion на мобильном устройстве и нажать Scan QR code. Через несколько секунд приложение появится на вашем устройстве.
1.6.2 Если у Вас отсутствует мобильное устройство с OS Android?



Академия мобильных приложений
Appinvent.ru
20 1. Загрузить и установить специальное программное обеспечение App Inventor Setup
Software

Для Mac OS X
( англ.
Instructions for Mac OS X
)

Для ОС Windows
( англ.
Instructions for Windows
)

Для Linux
(англ.
Instructions for GNU/Linux
)
2. Запустить aiStarter (только для Windows & GNU/Linux) aiStarter будет успешно запущен, если отображается окно следующего вида:




Академия мобильных приложений
Appinvent.ru
21 3. Перейти в окно проекта в MiT App Inventor и выбрать меню Подключиться -> Эмулятор.
Окно эмулятора имеет следующий вид:


Академия мобильных приложений
Appinvent.ru
22
1.6.3 Если вы используете USB кабель

1. Подготовить устройство для использования USB (Включить отладку по USB).

На Android устройстве, перейти в меню Настройки системы-> Для разработчиков, и включить пункт меню Отладка USB.


Академия мобильных приложений
Appinvent.ru
23

На большинстве устройств, работающих под управлением Android 3.2 или старше, выбрать опцию в Настройки-> Приложения-> Разработка.
На Android 4.0 и новее, это в Настройки-> Функции для разработчиков. На
Android 4.2 и старше, Функция для разработчиков по умолчанию скрыта. Чтобы включить данную функцию, перейдите в меню Настройки->О телефоне и нажмите номер сборки семь раз. Далее необходимо вернуться к предыдущему экрану, чтобы найти меню Для разработчиков, в том числе "USB Debugging".
2. Подключить мобильное устройство к компьютеру
Подключить Android устройство к компьютеру с помощью кабеля USB, убедиться, что устройство подключается как "запоминающее устройство",а не как "медиа-устройство".


Академия мобильных приложений
Appinvent.ru
24
На Android 4.2.2 и старше, при первом подключении мобильного устройства к компьютеру появится экран с сообщением Разрешить USB-отладку, для подключения его к компьютеру нажмите "ОК".
3. Проверить соединение
Убедитесь в том, что ваш компьютер подключен к мобильному устройству.
4 . Скопировать файл .APK, сохраненный на вашем компьютере, в папку на мобильном устройстве.
1.7 Загрузка .apk файла на мобильное устройство

Загруженный для установки .apk файл приложения хранится на мобильном устройстве в каталоге Download. Доступ к нему можно получить с помощью приложения “файловый менеджер”.
Для разных OS Andriod версии одного и того же приложения могут перезаписываться в различных вариантах. Новое приложение может быть установлено на место старого, или в виде новой версии c модифицированными именем.
Рекомендуется периодически в каталоге Download удалять старые версии приложения.



Академия мобильных приложений
Appinvent.ru
25
1.8 Компоненты приложения

Компоненты приложения размещаются на экране в режиме “Дизайн”. Все компоненты разделены на несколько групп.

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

Расположение - компоненты, отвечающие за макетирование экрана, позволяют размещать компоненты интерфейса пользователя горизонтально, вертикально, или в ячейки таблицы. В среде MIT App inventor нет форматирования, позволяющего задавать интервалы между определенными компонентами, поэтому для макета и задания расстояния и пространства между элементами используются компоненты группы расположения с определенными заданными свойствами, например высота или ширина.


Академия мобильных приложений
Appinvent.ru
26

Медиа - компоненты, позволяющие задействовать в приложении различные медиа инструменты: устройства, микрофоны и наушники, камеру, звуки и аудиофайлы и другое

Рисование и анимация - группа компонент, позволяющих рисовать или создавать анимацию в приложении.

Хранилище - компоненты, позволяющие передавать значения внутри приложения и сохранять какие -либо данные приложения на внешнем устройстве.

Сенсоры - группа невидимых компонент, позволяющих использовать в приложении данные, полученные с различных сенсоров и датчиков мобильного устройства.

Общение - компоненты, обеспечивающие связь с социальными сетями. позволяющие делиться информацией, получать доступ к контактам устройства и пр.

Каналы - компоненты, позволяющие запустить какое-либо внешнее действие из приложения: другое приложения на мобильном устройстве, камеру, поиск в сети интернет или открыть веб-страницу.

LEGO® MINDSTORMS® - компоненты обеспечивающие управление LEGO®
MINDSTORMS® NXT с использованием Bluetooth.
1.9 Разрешение экрана

При работе в среде MIT App Inventor штатное разрешение экрана 320х480 пикселей.
Создание приложения в ней требует установки связи положения и размера каждого компонента с разрешением экрана.
Различные мобильные устройства имеют разные разрешения экранов. Вид приложения на смартфоне и семидюймовом планшете будет выглядеть по разном, и на планшете все компоненты могут быть в 1,5 раза крупнее. При разработке приложений для различных экранов лучший способ задания свойств некоторых компонентов в в процентах от размера экрана.


Академия мобильных приложений
Appinvent.ru
27
1.9 Первое мобильное приложение

Рассмотрим алгоритм создания приложения на примере проекта, имитирующего игральный кубик, который будет выкидывать кубик с нужным количеством кружков, если мобильное устройство тряхнуть.
Изображения для создания приложения
(Скачать)
Для выполнения всех шагов алгоритма требуется, чтобы на вашем мобильном устройстве была предустановлено приложение MIT AI2 Companion.
Алгоритм работы:
1.
Создать Google аккаунт, лучший вариант
Google Apps!!
или использовать созданный ранее.
2.
Войти в среду визуального программирования MIT App Inventor по ссылке http://ai2.appinventor.mit.edu/


Академия мобильных приложений
Appinvent.ru
28 3. Выбрать “Разрешить”
4.В окне “Terms of Service выбрать” I accept the terms of service”


Академия мобильных приложений
Appinvent.ru
29 5. В окне “Welcome to App Inventor 2” выбрать “Continue”
6.Выбрать язык “English-> Русский”


Академия мобильных приложений
Appinvent.ru
30 7. Создать новый проект “Начать новый проект->CubeSensor”
8. Рабочий экран среды визуального программирования будет выглядеть следующим образом:


Академия мобильных приложений
Appinvent.ru
31 9. Перенести компонент Изображение в окно экрана мобильного устройства, выбрать
Изображение->Загрузить в свойствах компонента.
10. Загрузить графический файл для компонента Изображение.


Академия мобильных приложений
Appinvent.ru
32 11. Загрузить последовательно 5 графических файлов (сторон кубика) с помощью функции ”Загрузить файл”.
12. Переименовать компонент Изображение1 в СторонаКубика


Академия мобильных приложений
Appinvent.ru
33 13. Выбрать в группе Сенсоры -> СенсорАкселерометра и перенести его в область экрана мобильного устройства


Академия мобильных приложений
Appinvent.ru
34 14. Выбрать компонент Screen1 и установить его свойства ВыровнятьПогоризонтали,
ВыровнятьпоВертикали, ОриентацияЭкрана


Академия мобильных приложений
Appinvent.ru
35 15. Перейти в режим Блоки в меню справа, выбрать СенсорАкселерометра1 и перетащите блок когда.СенсорАкселерометра1.Вибрация в поле блоков программы.
Данный блок будет запускаться как только устройство будет подвержено вибрации.
16.
Выбрать компонент
СторонаКубика1 и перенести блок
присвоить.СторонаКубика1.изображение в поле блоков программы. Данный блок выводит изображение графического файла на экран мобильного устройства.
17. Для изображений сторон кубика (файлы 1.png-6.png) имя файла изображения формируется с помощью функции “соединить”: случайное число в диапазоне от 1 до 6
( у нас 6 сторон кубика), плюс расширение графического файла .png.


Академия мобильных приложений
Appinvent.ru
36 18. Выбрать Математика->Случайное целое от 1 до 100 и установить значения диапазона от 1 до 6.
19. Добавить блок
, и вписать туда текст “.png” для последующего соединения со случайным значением от 1 до 6.
20. Оформить приложение и установить иконку в свойствах компонента Screen1.



Поделитесь с Вашими друзьями:
  1   2   3


База данных защищена авторским правом ©nethash.ru 2017
обратиться к администрации

войти | регистрация
    Главная страница


загрузить материал