Android-приложение на Compose с нуля: Часть 1 (Прототипирование)

Здравствуй, дорогой читатель!

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

Навигация по циклу статей:

• Часть 1 — Прототипирование (Вы здесь)

• Часть 2 — UI

• Часть 3 — Бизнес-логика (В разработке)

Коротко о техническом задании:

Разрабатывать будем одноэкранный калькулятор с основными математическими операциями (всего их будет 7). Из уникальных возможностей будет переключение темы внутри приложения, да в общем то и всё 😉

Из стандартных требований:

• Сохранение введённого пользователем математического выражения при повороте экрана / сворачивании приложения;

• Поддержка светлой / тёмной темы;

• Отсутствие лагов при отрисовки UI;

• Отсутствие ошибок при работе приложения (100% Crash-free rate);

• Уведомление пользователя о некорректных математических операциях (например, деление на 0).

Немного о UI и дизайн-системе:

Ниже представлен красивый (субъективно, конечно) пользовательский интерфейс приложения.

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

Цветовая схема, согласно Material 2, следующая:

В качестве основного шрифта выбран Exo, бесплатен для личного и коммерческого использования. Используемые виды начертания — Regular & Medium, а размеры — 20, 24 и 34.

Архитектура — наше всё:

В рассматриваемом проекте будем использовать архитектуру MVI (Model-View-Intent).

Решение будет кастомное, без использования готовых библиотек (например, «MVICore» от Badoo или «Moko-MVVM» от IceRock):

• Для сокращения лишних рекомпозиций — паттерн «Single State» (все данные для отображения хранятся в одном data class’е);

• Для обработки действий пользователя — sealed класс Event, а для уведомлений пользователя об ошибках — sealed класс Action;

• Для сохранения состояния приложения — ViewModel;

• Все расчёты мат. выражений выносим в отдельный Repository (привет, Clean Architecture).

Все вышеописанные подходы основываются на принципах — KISS (делай просто), DRY (не повторяйся), YAGNI (не используй лишнего).

Набор библиотек также стандартный:

• Jetpack Compose + Activity — для UI (User Interface);

• Hilt — для DI (Dependency Injection);

• Lifecycle — для VM (View Model).

В качестве основного языка программирования безусловно используем любимый Kotlin.

И хотя навигация в проекте не предусмотрена (экран один), а в основе лежит Compose, стоит упомянуть, что будем использовать подход «Single Activity».

В следующей статье:

Рассмотрим структуру проекта и спроектируем дизайн-систему, а также создадим UI и добавим в него немного интерактивности.

Благодарю за внимание!

Алексей Охотниченко

Автор Телеграм-канала «Android для Junior’ов» (@android_for_juniors)