Как разрабатывался трекер подписок Nocta — конкурс пет-проектов

Nocta Pro – приложение трекер подписок под Android. Много возможностей, уникальные функции, бесплатно и никакой рекламы.

Добрый день, меня зовут Инна, я андроид-разработчик, хочу написать о своем приложении Nocta Pro. Создание его началось осенью прошлого года, а опубликовано в Google Play оно в конце августа. Возможно, статья получится интересной для тех, кто пишет свой проект или задумывается о нем. Она о том, как проходила разработка.

Идея

У меня большой опыт в разработке. Больше всего нравилось писать под Android. Но жизнь сложилась так, что в последние полтора года на работе вначале попросили писать под iOS, потом освоился React Native. Но мне захотелось вернуться обратно в Android мир. Вначале отдохнуть от работы, т.к. она в то время была достаточно тяжелой, а потом подкачать свои устаревшие знания. И это лучше всего делать на реальном проекте.

Мой опыт показывает, что самое главное в приложении — это UI и UX. Будь оно сто раз полезно, но если будет выглядеть коряво, то обречено на провал (потом я подкорректировала это мнение, но об этом позже). И мне очень повезло с тем, что нашелся человек, его зовут Ярослав, он начинающий продуктовый дизайнер, у которого была идея и который уже набросал свою задумку в Figma. Мне оставалось только спросить — не хотел бы он, чтобы его проект был реализован? По ходу рассказа привожу комментарии Ярослава ниже курсивом.

Приложение

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

Ярослав: Идея такого приложения мне пришла в голову еще в далеком 2020 году, однако реализовать его не представлялось возможным из-за нехватки опыта, знаний и ресурсов. Что тогда, что сейчас, все представленные продукты на рынке содержат хотя бы один критический недостаток, который сводит на нет вообще весь смысл пользования таким трекером. Я горжусь Nocta потому, что в этом продукте решены сразу все известные недостатки и проблемы, и, более того, представлен ряд классных и полезных функций, которых вообще нигде нет.

Nocta Pro – имеет темную и светлую темы

Некоторые подписки могут быть в другой валюте. Есть Pay Upfront (Предоплата), что означает оплату подписки вперед на несколько циклов.

Ярослав: Pay Upfront – это классная и уникальная фича, которой нет ни в каком другом трекере. Она нужна, чтобы посчитать сколько денег нужно для того, чтобы оплатить подписку вперед на какой-то период. Особенно, когда бывают странные циклы списания – раз в две недели или раз в 30 дней. Ты оплачиваешь эту подписку и последующие уведомления приходят тогда, когда подходит следующая дата списания. Это удобная фича, которой лично я часто пользуюсь.

Как быстро попробовать приложение в действии

Нет ничего проще. Устанавливаете Nocta Pro и добавляете тестовые подписки. Проверить подходит оно или нет — можно за минуту, ничего не нужно делать сложного или разбираться как добавить подписку.

Ярослав: Когда я просматривал приложения, которые уже были, то каждый раз после установки я видел пустой экран, и для того, чтобы понять как им пользоваться, мне нужно было создавать подписки со множеством полей (это у нас в Nocte можно заполнить всего два поля – название подписки и ее стоимость). Поэтому пришла в голову идея для тех, кто только что установил приложение и хочет понять, подойдет оно ему или нет. Одним кликом добавляешь тестовые подписки и все – можешь рассматривать приложение со всех сторон. Таким образом, мы сэкономили много времени тем, кому приложение не подойдет.

Подобных интересных вещей в приложении еще много. Все максимально продумано.

Реализация

Я решила затянуть в приложение все новое, что было на тот момент — конечно же kotlin (до этого все мои больше 20 проектов были на java), современную архитектуру (MVVM), Jetpack Compose, Hilt, Compose Navigation, WorkManager, Glance Widget, Room, SqLite и т.д.

Начинать было тяжело. Экранов и логики нарисовано еще до начала реализации очень много. И чтобы преодолеть этот барьер — я просто решила попробовать сделать самый первый экран со списком. Это было ошибкой, нужно было рассмотреть все, что есть, и принять обдуманные решения. Потом, когда процесс уже встал на рельсы, я поменяла структуру базы данных, кое-что переделала, доработали requirements — автор идеи написал больше 30 страниц описывающих user flow и всяких расчетов, таблиц и правил, а также несколько таблиц в Excel, которые рассчитывали несколько сценариев с подписками, это очень помогло.

Дизайн спецификации

Ярослав: Мне пришлось написать документ, который я назвал – дизайн спецификации. Это сложная штука, в нем мне пришлось вводить такой язык – собственные термины и использовать их на протяжении всего документа, в формулах и т.д. Например, ППСГ – потенциально потраченная стоимость за год, которая для каждой подписки считается по своему. И оперируя этим словариком терминов я создавал этот документ, который получился объемным, мне понравилось над ним работать, хотя наверное его можно было бы сделать сильно лучше.

Расчеты по подпискам

Ярослав: Еще пригодился Excel – файл. В нем были примеры подписок и все расчеты. Я его создал еще до реализации для того, чтобы использовать в эскизах экранов, чтобы они выглядели как можно правдоподобнее и были связаны друг с другом общей логикой. Позднее мы проверяли все данные с помощью этих расчетов.

Разработка достаточно сложная вещь, каждый день мы сталкиваемся с какими-то проблемами, которые нужно решать, недостатком знаний, которые нужно восполнять и т. д. У меня специфика работы была такая, что заказчик долго ждать не будет, поэтому если например задача не решается за 2 часа — я переключаюсь на что-то другое (а потом приходит решение) или принимаю решение делать не совсем оптимально, чтобы посмотреть на результат, а уже далее действовать в зависимости от общего мнения. Поэтому в некотором смысле — все приложение получилось таким компромиссом между попытками сделать хорошо и правильно, и продвижением вперед. Когда работаешь один — сложно сделать правильно с первого раза, что-то не получается, или просто пока не знаешь как сделать. Затем, уже спустя время, где-то находишь эти знания и рефакторишь код, исправляешь ошибки — когда это уже очевидно. Если буксовать и все время сомневаться — то весь проект рискует остаться недоделанным. У нас же была цель — Google Play Market — финальная точка, после которой можно выдохнуть.

Во время реализации дизайн в Figma был переработан, дополнен, уточнен и перепроверен.

От варфрейма до итогового экрана

Столкновение с реальностью

Ярослав: Как изменилась идея в начале разработки? Я столкнулся с тем, что разработчик пришел и сказал “нельзя”. В первую очередь это было связано с курсом валют. Первоначальная идея была такая, что курс валют приходит автоматически с накидыванием сверху полутора процентов банковских комиссий, потому что актуальный курс списания выше чем курс обменников. И тогда я подумал, что все, приложение не имеет смысла, но мы потом придумали, что можно заносить эти курсы вручную и даже напоминать обновить эти курсы.. и при этом убили двух зайцев – у пользователя всегда будут актуальные курсы валют и мы отказались от сервера. И даже я считаю это наверное плюс нашего приложения, т.к. если подумать , то автоматический курс валют не отвечал бы потребностям пользователя.

Ярослав: Еще один момент, который пришлось учесть, это использовать “темные паттерны”, к примеру уведомления, чтобы пользователь их не смахивал, а открывал и использовал приложение, чтоб Google не отозвал разрешение у приложения, нужно туда помещать интригу. Вначале было задумано уведомление “Через 3 дня спишется 100 рублей за подписку ХХХ”, а теперь “Скоро платеж” и чтобы узнать какой платеж пользователь должен нажать на уведомление и перейти в приложение, и таким образом поддерживается активность, в результате которой у нас с меньшей вероятностью отзовут разрешения.

А еще, когда пишешь свой проект, то ты сам себе начальник и неизбежно сталкиваешься с тем, что где-то хочешь упростить реализацию, что-то не делать, т. к. это сложно или долго. Но этот проект имел большую цель — попробовать на практике как можно больше сложных вещей.

Проект сейчас имеет 24 модуля. Для одного разработчика пет-проекта — это даже много, а когда хочешь попробовать, как оно получится — то вполне нормально для такого размера приложения.

UI

Приложение в классическом материальном дизайне. Я использовала библиотеку androidx.compose.material3. Для рисования интерфейса – Jetpack Compose. Сам дизайн продуман до мелочей, аккуратные отступы между элементами, паддинги тоже разные для оптической компенсации элементов в списке с точностью до пункта. Нами продумана вся дизайн система, она одинаковая — в Figma и перенесена в один из модулей приложения, легко найти и поправить, легко добавлять и использовать в любом месте. Есть система шрифтов, цветовая схема. Темная и светлая темы. Аккуратные картинки к каждой подписке пользователя. Иконки приложения для Monet в Android.

iOS версия приложения

Ярослав: В самом начале Nocta планировалась как кейс для iOS и там было основных 20 экранов. Потом пришлось переделывать все экраны с учетом не только дизайна, но и с учетом логики того, как взаимодействуют окна, структура. iOS версия раньше смотрелась как-то прикольно, но теперь она устарела и Android версия выглядит значительно лучше. Кроме того, у меня прибавилось опыта, если я раньше мог пропускать экраны, которые содержат определенный стейт, то сейчас я сразу вижу, что экран должен содержать, какой стейт и как с ним взаимодействовать.

UI kit

Я разработал UI kit, в нем содержатся – цветовая схема (светлая и темная), шрифты, и элементы дизайна, это как будто кирпичи, из которых формируются экраны.

Картинки к подпискам я пытался сделать лаконичными, чтобы не приходилось в них копаться, пытаясь выбрать то, что нужно. Я внимательно пролистал список иконок к андроиду в плагине Figma и выбрал те, который наиболее подходят для подписок.

Функционал

Это одна из самых сложных основ приложения. Оно содержит много расчетов с датами, много разных строк, которые обозначают эти даты, периоды. Для того, чтобы правильно их сделать – нам пригодился документ, где была бы описана вся логика, а также тестовые примеры

База данных

Самая легкая часть. Обожаю базы данных, делать их структуру и особенно — писать запросы. Поэтому у меня очень много что сделано запросами, а не простым вытаскиванием данных из таблицы и последующей обработкой с полным перебором. Sqlite классная быстрая база данных, возможности которой нужно использовать.

Уведомления

Ни для кого не секрет — Google с каждым выходом новой версии операционной системы ужесточает правила для приложений в плане потребления энергии или безопасности. И получается, что приложения, которыми пользуется владелец устройства — те имеют зеленый свет, а у остальных понемногу отбирают разные полученные ранее права. Наше приложение задумывалось так, чтобы пользователь вложил свое время вначале — заполнил данные по своим подпискам, установил нужные уведомления и в общем-то больше не обращался к приложению, просто получал уведомления о будущих платежах, чтобы оно его не беспокоило лишний раз, не надоедало, не раздражало. Но увы, такие приложения обречены на фактическое сокращение функциональности. Не будешь пользоваться — через месяц (а ведь есть подписки, которые оплачиваются раз в год!) не увидишь уведомления — ОС забирает разрешение и все. Открывать настройки, искать нужный пункт меню и приложение, включать уведомления — только одно перечисление этого уже вызывает раздражение.

Пришлось изменить текст уведомления. Вначале мы думали выводить текст «Следующий платеж 100 рублей через 2 дня по такой-то подписке». Теперь просто выводится «Следующий платеж через 2 дня». И нужно кликнуть на уведомление и откроется окно с подпиской. Увы, это неизбежная реальность.

Есть еще второй вид уведомлений – это напоминания пользователю уже в самом приложении. Напоминание сделать бэкап, или напоминание о том, что нужно разрешить системные уведомления.

Виджет

Еще один вариант решения проблемы с уведомлениями — сделать виджет, который будет показывать список нескольких ближайших платежей на экране. Если пользователь его поставит, то приложение будет периодически работать, пользователю не нужно будет в него даже заходить. Сделать виджет, который одобрит дизайнер, достаточно сложно, а сделать Glance Widget, по которому очень мало информации даже в документации — еще сложнее. Сделать его приемлемого размера на экране — уже задачка со звездочкой, т. к. в определенных версиях действуют одни правила, в более новых — другие и т. д. У нас виджет двух типов. Вначале я сделала более простой вариант — там кнопки быстрого доступа для открытия приложения, создания новой подписки или открытия календаря. А затем виджет с самыми ближайшими подписками.

Работа над дизайном виджетов, у нас их два вида.

Для виджета пришлось делать свою дизайн систему, т. к. используемый там «jetpack compose», на деле им не является, и пока что там нельзя сделать полноценную дизайн систему, т. к. он находится в разработке. Также там есть ограничения по использованию шрифтов и размеров, управлять ими как в приложении не получится, да и выглядит он в итоге на разных устройствах по-разному.

Как-то прочла замечание одного разработчика (спасибо ему), что после добавления кнопки установки виджета в самом приложении, его использование значительно возросло. Мы добавили такую же кнопку. Это и напоминает о том, что у нас есть виджет, и значительно облегчает его установку, сравните сами – легко ли найти виджет в длинном списке всех виджетов устройства, а затем искать ему место, или просто нажать на кнопку?

Перевод на русский язык

Это тоже было достаточно сложной частью. В приложении очень много различных фраз, которые отображаются на экране, обозначающих, например, период времени или количество чего-то («в следующем месяце», «через 2 года», «скоро», «каждый год») и очень много нюансов когда и что отображается. В английском языке все достаточно просто, там нет падежей, фразы строятся однотипно. При переводе на русский я пересмотрела многое, чтобы все правильно отображалось, но уже с целью на будущее, чтобы можно было переводить на другие языки.

Бэкапы

Как вы уже поняли, сервера у нас нет, поэтому отвечать за сохранность своих знаний должны сами пользователи. Я добавила удобную функциональность по создании бэкапа с данными, и восстановление данных из файла, так же приложение напоминает (как можно более ненавязчиво) что неплохо сделать бэкап. Некоторые операционные системы сами делают бэкап и при установке приложение — данные уже там.

Справочная система

У нас реализована и продумана справочная система, то есть в местах, где пользователю нужна поддержка в плане “что это такое?” – реализованы небольшие диалоги с подсказками, но есть и экраны, где объясняются фичи и концепции, что и для чего это нужно, как это работает, например, о функции Предоплаты.

Публикация в Google Play

Это тоже достаточно нетривиальная задача для человека, который давно там ничего не публиковал, т. к. все постоянно меняется. Я вначале решила, что опубликую приложение в Open Testing части. Она по сути ничем не отличается от Production, кроме того, что отзывы приватные, видны только владельцу.

Очень волнительно было ждать вердикта Google (и сейчас тоже волнительно). Интересный факт в том, что во время проверки приложения, Google также тестирует приложение и публикует его результат. Если находит баг — то предоставляется видео тестирования, при котором произошло падение. И один из интересных багов был найден и исправлен. Также, он проводит глубокий анализ со скриншотами на разных устройствах и широкий анализ приложения на адаптивность к пользователям с особыми потребностями.

Реклама

Ну а теперь о том, как изменилось мое мнение что важно для приложения. Увы и ах, без вложений в рекламу ничего не получается. Nocta получилась большое и красивое приложение, законченное, которым приятно пользоваться, со мной связалось несколько разработчиков (удалось «прорекламировать» только в чатах по разработке) и мы даже стали друзьями и делимся чем-то полезным.

Но реальность такова, что денег на это больше нет.

Планы

Ярослав: Не знаю насчет планов.. внутри приложения всегда можно добавлять, докручивать какие-то интересные фичи, тот же самый max-концепт, разделение на профили, теги, wizards, даже что-то безумное, какие-то сториз “а вы знаете, чтобы сэкономить на подписках, можно применить вот эту тактику”, добавить notification hub, с ним поработать, т.к. они у нас в разных местах возникают, разделить приложение max, basic, pro. Это в сторону фич, в сторону платформы – хотелось бы видеть приложение на iOS.

Вообще в планах у нас были две или три версии приложения. Одна — самая простая, для тех, кому нужна базовая функциональность. Вторая — Pro, платная, которая и была реализована и была выложена бесплатно. Но уже есть планы на дальнейшее развитие, продуманные фичи для добавления. Однако пока не знаю, будет ли продолжение (добавление крупных фич) в связи с тем, что сейчас получать доход от приложения уже сложно.

Конечно, было бы неплохо иметь сервер, сделать регистрацию пользователей и синхронизацию их данных, или, к примеру, автоматические курсы валют. Но освоение мною этих вещей это too much.

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

Надеюсь, наше приложение понравится тем, кто любит такое ? Пожалуйста, пользуйтесь, присылайте нам свои пожелания, оставляйте оценки в Google Play Store, передайте ссылку своим друзьям, если знаете, что оно им понравится, мы благодарны вам за это.

1. Ссылка на Google Play Store;
2. Связаться с нами можно в телеграм;
3. Мой профиль и резюме.