Занятие № 1. Мобильное приложение. Режимы «Дизайнер» и «Блоки»

Задачи

Создать личный аккаунт в среде разработки App Inventor.
Изучить интерфейс среды разработки; различия режимов Дизайнер и Блоки.
Изучить свойства компонентов Надпись, Кнопка, Изображение и научиться их модифицировать.

Введение

Архитектура мобильного приложения

Мобильное приложение состоит из компонентов и поведения, которое с ними связано. Компоненты могут быть видимыми и невидимыми. Видимые компоненты составляют пользовательский интерфейс приложения - UI (User Interface). Невидимые компоненты связаны с функциями, работа которых напрямую не зависит от пользователей.

Каждый компонент может выполнять ряд функций связанных с назначением компонента. Запуск функций возможен после наступления события на которые может реагировать компонент.

Источники событий

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

Экраны приложения

Мобильное приложение состоит из ряда экранов. Каждый экран по своей сути отдельное приложение. Передача информации между экранами возможна несколькими способами. С некоторыми из них вы познакомитесь на следующих занятиях.

Средства разработки

Языки программирования мобильных приложений:

Java, Kotlin - Android
Objective C, Swift - iOS
JavaScript - мультиплатформа

Воспользуемся визуализированной средой разработки App Inventor.

App Inventor - Дизайнер

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

App Inventor - Блоки

В этом режиме разработчик описывает обработчики событий и задаёт поведение компонентов при появлении этих событий.

Задание № 0. Регистрация

Запустите браузер и нажмите комбинацию клавиш ⌃Ctrl + ⇧Shift + N , чтобы открыть приватное окно. Это необходимо для того, чтобы не сохранять ваш Google-аккаунт в браузере.

Перейдите на сайт App Inventor. Нажмите кнопку . Войдите в ваш Google-аккаунт.

После входа на сайт, выберите классический интерфейс или сразу после регистрации, или открыв меню Settings - User Interface Settings и выберите интерфейс Classic.

Задание № 1. Конвертер температуры

Создадим первый проект - приложение, которое поможет перевести температуру из градусов по Фаренгейту $t$ в градусы Цельсия $C$ .

Формула для преобразования:

$C = \frac{5}{9} (t - 32)$

Создайте новый проект. Для этого выберите пункт меню Проекты - Начать новый проект или нажмите кнопку New project. В появившемся окне введите название проекта - temp. Нажмите кнопку OK.

Интерфейс приложения

После создания проекта мы оказываемся в режиме Дизайнера. В этом режиме на экран добавляются компоненты, настраивается их расположения и другие свойства - размер шрифта, цвет заливки, ширина, высота и многие другие.

Перетащите на экран компонент Текст из категории Интерфейс пользователя.

Перетащите на экран приложения компонент Кнопка и разместите её под компонентом Текст.

Последним разместите компонент Надпись под кнопкой.

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

Переименуем компоненты согласно их назначению в приложении. В начале имени оставим тип компонента.

В списке компонентов выделите компонент Текст1 и нажмите кнопку Переименовать. В появившемся окне впишите новое название - ТекстТемпература и нажмите OK:

Таким же образом переименуйте другие компоненты: Кнопка1 в КнопкаЦельсий, Надпись1 в НадписьРезультат.

Список компонентов должен выглядеть следующим образом:

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

Выделите компонент ТекстТемпература и настройте свойства согласно таблице:

Свойство	Значение
Ширина	Наполнить родительский
Подсказка	Значение температуры

Цвет фона и текста выберите самостоятельно. Цветовое оформление приложения полностью на вас.

Выделите компонент КнопкаЦельсий и настройте свойства согласно таблице:

Свойство	Значение
Ширина	Наполнить родительский
Текст	В градусы Цельсия

Выделите компонент НадписьРезультат и настройте свойства согласно таблице:

Свойство	Значение
Ширина	Наполнить родительский
Выравнивание текст	центр
Текст	Результат

Экран - это тоже компонент приложения и обладает своими свойствами. Настроим их.

Выделите компонент Screen1 и настройте свойства согласно таблице:

Свойство	Значение
ОриентацияЭкрана	Альбомный режим
TitleVisible	нет галочки

Теперь интерфейс приложения выглядит так:

Перейдём к программированию поведения компонентов.

Программирование компонентов

Перейдите в режим Блоки, чтобы начать составлять скрипты.

Объявите глобальную переменную с именем t с начальным значением равным 0:

В ней мы будем хранить значение, введённое пользователем.

Объявите глобальную переменную с именем res с начальным значением равным 0:

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

Добавьте обработчик события нажатия кнопки КнопкаЦельсий:

Блоки, которые мы разместим внутри обработчика события будут выполняться после нажатия на кнопку.

Внутри обработчика события сохраним в переменную t содержимое компонента ТекстТемпература:

Переменной res нужно присвоить результат вычислений по формуле. Чтобы провести вычисления используем блоки из категории Математика. Составляя математические выражения на визуализированные языках следует помнить, что первыми выполняются те блоки-действия, которые были добавлены в выражение в последнюю очередь. Например, формулу из нашего задания можно представить в форме дерева:

В первую очередь добавим умножение, так как это действие должно выполняться последним. В блок умножения добавляем блоки деления и вычитания.

Составьте выражение для перевода градусов в температуру по Цельсию и присвойте результат переменной res:

Остаётся вывести ответ с помощью компонента НадписьРезультат.

Свойству Текст компонента НадписьРезультат присвойте значение переменной res:

Время тестирования!

Важный этап разработки приложений - тестирование и отладка. Запустим приложения и проверим корректно ли оно работает.

Выберите пункт меню Построить - Android App (.apk). Через некоторое время появится QR-код со ссылкой на скачивания готового приложения. Скачайте apk-файл и установите его на своём телефоне.

Хороший тестировщик проверит различные варианты входных данных. Попробуйте сделать следующее:

Введите температуру 72 градуса по Фаренгейту и нажмите кнопку В градусы цельсия?. Вы должны увидеть ответ, равный 21.66667. Введите -3. В результате получится -19.44444.
Оставьте поле с вводом температуры пустым и нажмите кнопку. Что произойдёт в этом случае?
Введите любое слово в поле для температуры и нажмите кнопку. Как на это отреагирует приложение?

Тестирование помогло найти ситуации в которых приложение работает некорректно. Устраним источник некоторых ошибок. Кроме этого отформатируем число в ответе и оставим один знак после запятой.

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

Перейдите в режим Дизайнер и выберите компонент ТекстТемпература. В свойстве ТолькоЦифры поставьте галочку.

Время тестирования!

Запустите приложение на телефоне. Попробуйте ввести строку вместо числа. Что изменилось?

✍️ Сделайте самостоятельно

Добавить кнопку для перевода из градусов Цельсия в градусы Фаренгейта:

$F = \frac{9}{5} t + 32$

Значение t берите из компонента ТекстТемпература, ответ выводите в компонент НадписьРезультат.

Задания для самостоятельной работы

Создайте новый проект для приложения на ваш выбор. Цветовое оформление проектов - на ваше усмотрение.

✍️ Сделайте самостоятельно

Дневник настроения

Имя проекта: mood_track.

Приложение поможет следить за настроением.

На экране находятся две кнопки с весёлым и грустным эмодзи. На экране находятся две надписи с числом, равным количеству нажатий на каждую из кнопок.

✍️ Сделайте самостоятельно

Счётчик шагов

Имя проекта: steps_count.

Приложение считает сколько шагов суммарно прошёл пользователь.

На экране находится текстовое поле в которое вводится количество шагов. Нажав на кнопку “Добавить”, пользователь добавляет введённое значение к общей сумме. Сумма выводится на экран под кнопкой.