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

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

В цикле статей рассмотрим разработку Android-приложения с использованием современной библиотеки для создания UI, а именно Jetpack Compose. Минимум "воды", максимум полезной информации.

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

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

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

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

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

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

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

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


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

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

Темная тема VS Светлая тема
Темная тема VS Светлая тема

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

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

А какой вариант нравится Вам?)
А какой вариант нравится Вам?)

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


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

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

Для примера, к Event относится ввод данных, а к Action отображение диалогового окна
Для примера, к Event относится ввод данных, а к Action отображение диалогового окна

Решение будет кастомное, без использования готовых библиотек (например, "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)

Источник: https://habr.com/ru/articles/798755/


Интересные статьи

Интересные статьи

В первой части статьи мы узнали про существование такого явления, как цифровая музыка, то есть состоящая из оцифрованных кусочков звучания реальных инструментов, на маломощных 8-битных микрокомпьюте...
Совсем скоро мы в четвертый раз запустим исследование PHP-сообщества. Посмотрим на тенденции относительно фреймворков и инструментов, на каких версиях сидят команды, как устроена архитектура проектов,...
Фото Florencia Viadana, Unsplash.com После почти пятилетних разработок протокол HTTP/3 наконец приближается к окончательному выпуску. Предыдущие итерации уже доступны как экспериментальная функция,...
Как стать DevOps инженером за полгода или даже быстрее. Часть 1. Введение Как стать DevOps инженером за полгода или даже быстрее. Часть 2. Конфигурирование Как стать DevOps инженером за полгод...
На этот раз мы погрузимся в реализацию алгоритма генератора подземелий. В прошлой статье мы создали первую комнату, а теперь сгенерируем остальной уровень подземелья. Но прежде чем мы начнём...