Создание мобильных

приложений
Виды мобильных приложений. Интерфейс
MIT App Inventor
 Первая группа — нативные приложения
Кто слышал про такое?
Они разрабатываются специально для конкретной платформы,
зачастую для iOS или Android. Эти приложения устанавливаются
непосредственно на мобильное устройство и используют его
ресурсы. Соответственно, разработчик должен уметь
программировать в соответствующей среде разработки: xCode для
iOS, Eclipse для Android. нативные приложения требуют большое
количество ресурсов в разработке
Вторая группа — веб-приложения

 Представьте себе сайт, который выглядит и функционирует как

обычное приложение. Это и есть веб-приложение. Их
особенность в том, что они гораздо «легче» нативных
и гибридных, а также функционируют с большинством ОС.
Кроме того, процесс их разработки гораздо быстрее

У гибридных приложений наиболее широкая

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

 MIT App Inventor — отличный инструмент для юного разработчика мобильных

приложений. Эта среда визуальной разработки не требует глубокого знания языков
программирования, но при этом помогает понять основы построения мобильного
приложения
 Разработка реализуется с помощью сопоставления цветных блоков, как конструктор
или пазл
 Для начала работы в MIT App Inventor достаточно наличия аккаунта в Google
 Интерфейс программы
 Рабочую область, в которой создается приложения, можно
условно разбить на 2 окна.
 Первое — окно проектирования внешнего вида приложения
(кнопки, надписи, поле для ввода текста и т.д.). С помощью этих
элементов пользователь управляет приложением на своем
мобильном устройстве. Другими словами — это интерфейс.
 Второе — поле для программирования. Здесь вы непосредственно
задаете команды своему приложению с помощью блоков.
Загрузка и установка приложения на
устройство
 Плюсом MIT App Inventor является то, что в процессе
разработки вы можете опробовать приложение на
своем мобильном устройстве. Для этого необходимо
загрузить из Google Play MIT App Inventor Companion
и добавьте разрабатываемое приложение с помощью
QR-кода
Еще один вариант тестирования —
эмулятор App Inventor Software + AI Starter.
Создание приложения «Hello, world»:
Создание программы Виртуальное
животное
Обзор блоков интерфейса MIT App Inventor
1. Режим Designer
 Окно Designer предоставляет возможность сформировать интерфейс
приложения. Интерфейс — это как пульт управления для пользователя.
Кроме того, режим Designer позволяет добавлять и новые функции в ваше
приложение
 Palette — перечень компонентов, которые могут использоваться
в приложении. это функциональные элементы программы, например,
кнопки, изображения, текст, поля для введения текста, дат, интерфейсы
для подключения к разным датчикам вашего Androidустройства:
акселерометр, GPS, базы данных и т.д. Некоторые компоненты являются
частью графического дизайна, например, кнопки, а другие — невидимы
на экране устройства, например, таймер, сенсоры или видеоплеер
 Viewer — это окно, которое показывает, как будет выглядеть
ваше приложение на дисплее мобильного устройства.
В приложении можно использовать несколько экранов, где
будут проводится разные действия. Например, на первом экране
у вас инструкция к приложению, а на втором —
непосредственно функциональная часть самого приложения
 Components — здесь вы сможете увидеть, какие компоненты
использовали в своем проекте. При именовании компонентов
рекомендуется воспользоваться таким правилом: Имя
компонента = Название компонента + Действие/Функция,
которую он исполняет в приложении. Например, КнопкаНазад,
КнопкаВперед, ИзображениеФон и тому подобное. Такое
именование компонентов позволяет легко ориентироваться
в списках при программировании действий или событий
 Properties — набор настроек каждого компонента, который вы
использовали в своем проекте (например, цвет и размер
шрифта, ширина и высота блоков и т.д.)
 Media — это список изображений, видео, аудио, которые вы
загружаете в проект (рис. 5). Важно помнить, что мобильное
приложение — это не набор загруженных видеофайлов или
большая коллекция аудиозаписей. Желание добавить
в структуру побольше графических и звуковых файлов может
привести к  тому, что приложение будет долго загружаться
и займет очень много памяти на самом мобильном устройстве.
Также важно отметить, что приложение может состоять из множества экранов.
Для работы с экранами Screen, в окне разработки есть кнопки добавления
и удаления экранов: Add Screen и Remove Screen
2. Режим Blocks (Блоки)

 Режим Blocks — это главный инструмент начинающего

разработчика. Здесь вы фактически выбираете, как именно
будут реагировать компоненты вашего приложения на действия
пользователя. Эти блоки заменяют собой строки кода, по факту,
это этап программирования
 Встроенные блоки (Build-in) — помогают напрямую задавать
функции компонентам разработки. Они делятся на следующие
подблоки:
 Control — общие для всех компонентов блоки разветвлений,
циклов, работы с несколькими экранами и т.д.
 Logic — блоки для применения логических функций
в приложении.
 Math — набор математических блоков.
 Text — текстовые блоки.
 Lists — блоки для работы с массивами и списками.
 Colors — блоки для работы с цветом.
 Variables — блоки, которые позволяют вычислить и установить
значения глобальных и локальных переменных.
 Procedures — блоки, с помощью которых можно определить
процедуры и  функции внутри программы (с параметрами или без
них
 Блоки действий и событий — это индивидуальные строки
каждого компонента, с помощью которых вы программируете
кнопки, сенсоры, поля ввода и т.д.
Группа Any component — здесь вы сможете организовать
и настроить большую группу однородных компонентов.
Например, сразу 20 кнопок
По клику ПКМ можно вызвать контекстное
меню с дополнительными настройками блоков.
Duplicate (Копирование блоков). Эта команда
копирует сформированный кусок кода,
создавая полностью идентичный дубликат
 Collapse/Expand Block (Свернуть/Развенуть блоки). С помощью
это команды можно оптимизировать пространство на экране,
благодаря чему будет удобнее работать с блоками.
 Disable/Enable Block (Включить/Отключить блок). Эта функция
используется для тестирования приложений. Она поможет,
когда вы сомневаетесь в правильности используемого блока.
 Add to Backpack (Копировать в рюкзак). Блоки копируются
в рюкзак.
 Delete Blocks (Видалити блок). Блоки удаляются без
перетягивания в корзину
 Do it . Это функция, которая позволит запустить любую часть
программного кода в виде блоков отдельно
 Инструменты для наполнения вашего приложения специальными
функциями, которые содержит в себе MIT App Inventor. Они
называются компонентами
 User Interface — базовые компоненты дизайна интерфейса.
Сюда входят: кнопка, поля для ввода, другие элементы
управления и т.д.
 Layout — структурные компоненты размещения элементов
интерфейса на экране пользователя. Необходимо помнить, что
компоненты Layout взаимодействуют только с отображаемыми
компонентами
 Media — к ним относятся видео- и аудиозапись,
мультимедийные проигрыватели, распознавание речи. Данные
компоненты расширяют круг используемой информации
разрабатываемым приложением. Мультимедийные файлы могут
быть как заранее вшиты в приложение, так и использоваться из
хранилища мобильного устройства
 Drawing and Animation — это те компоненты приложения,
которые отвечают за работу с изображениями и анимацией
 Sensors позволяют использовать приложению использовать
сенсоры вашего устройства (акселерометр, GPS и т.д.)
 Maps — элементы построения карт и  навигации
 Компоненты Social позволяют выстраивать
коммуникацию как с  социальными интернет-
сервисами, так и с контактами на самом мобильном
устройстве
 В свою очередь Storage отвечает за управление
данными в приложении
 Connectivity позволяют приложению связываться со
внешними устройствами или программами
 LEGO MINDSTORMS — управление роботами LEGO
с помощью телефона
Настройки некоторых свойств доступны во вкладке
Properties в правой стороне экрана Design
 BackgroundColor — цвет фона кнопки.
 Enabled — кнопка включена или не работает (но видима).
 Fontbold — жирный шрифт надписи на кнопке.
 Fontitalic — шрифт «италик» — наклонный.
 Fontsize — размер шрифта.
 FontTypeface — тип шрифта (их довольно много).
 Image — изображение на кнопке.
 Shape — форма кнопки. (может быть классической
прямоугольной формы, прямоугольной с закругленными углами
и овалом).
 ShowFeedback — включение/выключение визуальной реакции
на нажатие кнопки.
 Text — текст на кнопке.
 TextAlignment — расположение текста на кнопке.
 TextColor — цвет текста.
 Visible — видимость компонента (здесь можно отключить
видимость — например, вам нужно, чтобы вначале кнопка была
не видна и появлялась в результате каких-либо действий
в приложении).
 AndroidWidht, Height — ширина и высота компонента (может
выставляться как автоматическая, в размер всего экрана или
с заданными размерами)