# AND-1-3-Проектирование интерфейсов

---

## Вспомним прошлые занятия
1. Что такое Android?
2. Что такое Activity?
3. Из каких двух частей состоит Activity?
4. Как называется элемент управления, который показывает картинку на экране?
5. Для чего нужен файл манифеста приложения?
6. Чем View отличается от ViewGroup?
7. Как можно обратиться к элементу управления интерфейса из java кода?
8. Как можно открыть новый экран приложения?

:pager:

---
## Задача
### ТЗ на разработку
1. Нужно сделать медицинское приложение для учёта давления пациентов.
2. Необходимо записывать в память введённые пользователем данные:
* "верхнее" давление
* "нижнее" давление
* пульс
* тахикардия (флаг да или нет)
* дата замера (указывается и дата и время)

3. Добавить кнопку **Сохранить**.
4. Приложение должно работать без ошибок и никогда не падать.
5. Нужно логировать работу пользователя для отладки.
6. Приложение должно быть доступно для пользователей с версий Android 4.3, 5, 6.

---

## Решение задачи

### Как Вы думаете с чего начать?

---

## План занятия
1. Эргономика и проектирование интерфейса в Android
2. Работа с ресурсами
3. Работа с ошибками во время построения приложения
4. Обработка исключений
5. Работа с логами
6. SDK и инструменты Google для отладки

---

## Эгономика мобильных приложений
### Основные принципы
**1. Четко формулируйте задачу.**
Нужно понимать что конкретно будет делать наше приложение

**2. Избегайте перезаполнения!**
На экране не должно быть наезжающих друг на друга элементов, между элементами должно быть "просторно".

**3. Используйте мобильные элементы навигации и управления.**
Нужно использовать кнопки с иконками. Чтобы кнопки занимали меньше места и были более функциональными, используйте общепринятые иконки.

**4. Пишите крупным шрифтом, просто и понятно.**
На экране мало места и нужно его расходовать с пользой.

**5. Уделяйте внимание цветовой гамме.**

**6. В общем стиле приложения главное — простота.**

**7. Используйте подсказки пользователю.**

:pager:

---

## Разработка интерфейса
### 1. Проектирование на листочке
Сначала надо спроектировать интерфейс на листочке или в специальных программах.

**Примеры программ:**
* Mockflow
* MarvelApp.com
* Fluid UI
* Mockup Builder

:pager:

---
## Разработка интерфейса
### 2. Переносим интерфейс в Android Studio
Используя элементы управления View и контейнеры для отображения разместите элементы удобным образом в Дизайнере:
1. Проработайте дерево вложенности контейнеров ViewGroup, чтобы расположить элементы правильно;
2. Разместите элементы View;
3. Задайте размеры и стили элементам;
4. Заполните необходимые значения ресурсами;
5. Реализуйте логику отображения и работы элементов управления.

:pager:

---

## Работа с ресурсами
Как вам уже известно, ресурсы хранятся в папке res. И в этой папке хранятся константы: строки, стили, цвета, разметка, графика.

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

#### Использование ресурсов в разметке:

@string/app_name

#### Использование ресурсов в коде:

R.string.app_name

#### Пример:

String applicationName = getString(R.string.app_тame); 

---

# Обработка исключений

---
## Обработка исключений
Во время работы программы пользователь может ввести неправильные значения в формы, или логика обработки может быть недостаточна, или недоступен какой-то требуемый ресурс.
Тогда возникают исключения, приложение "вылетает".

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

**Решение**
Обработка исключений!

**Пример, общий случай:**

try {
    // Блок кода, где появляются ошибки
}
catch (Исключение 1) {
    // Обрабатываем ошибку
}
catch (Исключение 2) {
    // Обрабатываем ошибку
}
finally {
    // Код, который нужно выполнить после завершения блока try
}

---

## Основные типы исключений
1. ArithmeticException
1. ArrayIndexOutOfBoundsException
1. ArrayStoreException
1. ClassCastException
1. ConcurrentModificationException
1. EmptyStackException
1. IllegalArgumentException
1. IllegalMonitorStateException
1. IllegalStateException
1. IllegalThreadStateException
1. IndexOutOfBoundsException
1. MissingResourceException
1. NegativeArraySizeException
1. NoSuchElementException
1. NullPointerException
1. NumberFormatException
1. SecurityException
1. StringIndexOutOfBoundsException
1. UndeclaredThrowableException
1. UnsupportedOperationException

:pager:

---
## Всплывающие уведомления
Реализация всплывающих уведомлений в Android доступна через класс Tost.

Toast toast = Toast.makeText(this,
    "Hello Android",Toast.LENGTH_LONG);
toast.show();

При нажатии на кнопку Сохранить в нашем приложении надо проверить данные, считать из формы и выдать пользователю сообщение, что данные записаны.

:pager:

---

# Логирование

---

## Консоль и логи
Для логирования и отладки приложения в Android Studio есть консоль с выводом логов — LogCat.

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

Для доступа к выводу на консоль есть класс Log.

**Использование:**
* Log.e() - ошибки (error)
* Log.w() - предупреждения (warning)
* Log.i() - информация (info)
* Log.d() - отладка (degub)
* Log.v() - подробности (verbose)

---
## Пример вывода в консоль
1. Добавим в начале класса Activity константу:

private static final String TAG = "MyApp";

2. В коде можем использовать логирование:

Log.i(TAG, "Это мое сообщение для записи в журнале");

3. Выводим ошибки из блоков catch:

try {
// ...
} catch (Exception exception) {
    Log.e(TAG, "Получено исключение", exception);
}

---
## Необработанные исключения
В логах также можно найти необработанные исключения с указанием проблемы, класса с ошибкой и номера строки.

Строки с опасным кодом нужно поместить в блок try catch.

---
# Вспомогательные инструменты от Google

---

## Android SDK
В нашей задаче надо реализовать поддержку версии Android 4.3, для этого нам надо скачать SDK нужной версии.

Для работы с инструментами Google есть SDK Manager, открыть его можно так `Tools > Android > SDK Manager`.


---
## SDK tools
Дополнительные инструменты, которые могут помочь в разработке:
* Android Support Repository
* Android Support Library
* Google Play Services
* Google Repository
* Google Usb Driver


:pager:

---
## Отладка приложения в Android Studio
Обычно для запуска приложения вы используете значок с зелёным треугольником Run (Shift+F10) на панели инструментов. Для отладки следует нажимать соседнюю кнопку Debug (Shift+F9) с изображением жука.

Android Studio откроет окно Debug. Можно открыть его вручную через кнопку 5: Debug в нижней части среды разработки. Окно показывает потоки и переменные в вкладке Debugger, статус устройства во вкладке Console и системные логи во вкладке Logcat.

---

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

После того, как вы установили точки останова, щёлкните кнопку Rerun для повторного запуска программы.

Когда выполнение кода дойдёт до установленной точки останова, студия выполнит паузу и подсветить строку кода. Панель Debug позволит проверить переменную и выполнить код шаг за шагом.

Для проверки переменных раскройте список в панели Variables. Если панель не видна, то щёлкните кнопку Restore Variables.

Для вычисления выражения в текущей точки щёлкните кнопку Evaluate Expression.

Для перехода на следующую строку кода без выполнения щёлкните кнопку Step Over.

Для перехода на первую строку кода внутри метода щёлкните кнопку Step Into.

Для перехода на следующую строку за пределами текущего метода щёлкните кнопку Step Out.

Чтобы продолжить работу приложения в нормальном режиме, нажмите кнопку Resume Program.

---
## Что мы сегодня сделали
1. Изучили основы проектирования и реализации интерфейса в приложении на основе общих принципов эргономики мобильных приложений.
2. Вспомнили как работать с ресурсами, в том числе и из кода.
3. Научились делать всплывающие сообщения.
4. Научились бороться с ошибками и обрабатывать исключения с помощью `try catch`.
5. Изучили основные типы исключений.
6. Посмотрели, как работать с SDK Manager.
7. **Создали приложение, применив все эти знания**.

---

## ДЗ

---

## Спасибо за внимание

---
## Дополнительные материалы
### Эргономика мобильных приложений
https://habr.com/ru/company/alee/blog/117950/ :crystal_ball:
https://freelance.today/poleznoe/10-veschey-kotorye-nuzhno-uchest-pri-razrabotke-mobilnyh-prilozheniy.html
https://apptractor.ru/info/articles/10-sovetov-po-uluchsheniyu-ux-vashego-prilozheniya.html

### Проектирование интерфейса
https://geekbrains.ru/posts/mob_interface
https://medium.com/product-design/процесс-разработки-дизайна-мобильного-приложения-с-нуля-909c0443ef92
https://developer.android.com/distribute/best-practices/develop/create-great-experiences?hl=ru :star:
https://habr.com/ru/company/skillbox/blog/416641/ :crystal_ball:

### Инструменты Android Studio
https://www.fandroid.info/urok-3-resursy-i-makety-ekrana-prilozheniya-constraintlayout-v-android-studio/
https://www.fandroid.info/urok-2-kotlin-sozdanie-proekta-v-android-studio-i-zapusk-prilozheniya-na-android-ustrojstve/
https://metanit.com/java/android/1.7.php

---
!!!! не включать в презентацию !!!!
### Исключения
https://www.fandroid.info/osnovnye-tipy-isklyuchenij-exception-v-java/
http://developer.alexanderklimov.ru/android/java/exception.php

### Blueprint, layout
https://habr.com/ru/company/livetyping/blog/302106/
https://startandroid.ru/ru/uroki/vse-uroki-spiskom/13-urok-4-elementy-ekrana-i-ih-svojstva.html
https://developer.android.com/studio/write/layout-editor.html