matart

Попробовать вайбкодинг

Попробовал, удивили возможности нейронок. Теперь вопрос стоит не "Как это делать?", а "что сделать?". Удивительно, что за ≈250 баксов получилось собрать полноценное, работающее MVP продукта. Можно было уложиться в 50-70, но я уперся в лимиты и пришлось перейти на подписку за 200 баксов, чтоб не тратить время на ожидание.

Попробовать пройти весь цикл разработки продукта

Считаю, что получилось, хоть и заказчиком выступал я сам, я прошел сбор требований, дизайн, написание технического задания и аналитики для нейронки, разработку, тестирование, подключение метрики с событиями (Yandex app metrica), интеграция с внешними сервисами и, собственно, релиз.

О приложении

Финансовый менеджер. Уже лет 10 пользуюсь аппами для учета дохода и расхода, и у всех есть ряд минусов, которые я для себя решил закрыть своей собственной аппой. Разрабатывал прежде всего для собственного использования, за пример я брал коинкипер в его лучшие годы.

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

Идея и дизайн

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

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

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

Аналитика и Техническое задание

Техническое задание и аналитику экранов я писал с помощью Claude. Взял самую дешевую подписку, подключил нейронку к фигме через MCP, описал ей свою задумку и попросил пройтись по общему флоу, каждому экрану, компоненту и составить на их основе техническое задание на разработку мобильного приложения на SwiftUI.

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

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

Разработка

Разрабатывать проект я доверил Codex’у, он должен был писать код по документам Claude, потом отправлять коммиты в гихаб, где их проверял Claude перед мержем. Изначально всё шло идеально, кодекс писал код по этапам, которые ему расписал Клод, я билдил аппу на телефон и проверял, далее я, видимо, сильно ему поверил и пропускал проверки на устройстве, а когда сбилдил сборку, заметил что кодекс буд-то перестал смотреть в макеты. Он делал весь функционал следуя доке, но вот UI элементы придумывал сам, пришлось описывать ему что и как должно быть на самом деле.

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

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

Бэкенд кодекс написал сам, на своих стандартных ui компонентах практически без моего участия, получилось хорошо, ну, по крайней мере всё работает.

Работа с кодексом - самый длительный этап, я извел всю подписку за 20 баксов в первые дни, далее купил подписку за 200, и ее уже хватило до финала. К проекту кодекс самостоятельно подключил аналитику – Yandex App Metrica, а так как проект писался на SwiftUI у меня бонусом получилась аппа, работающая на MacOs. Данные между компом и телефоном синхронизируются через iCloud.

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

Сегодня iOs аппу добавили в AppStore, было 2 реджекта, первый - нужно было предоставить детальное видео работы приложения и описание его функционала, а второй касается навигации для MacOS приложения, оно еще на проверке. Пока приложение доступно для России, США, Англии, Малайзии, Казахстана.

Скачать и затестить приложение можно тут: AppStore

Я веду небольшой телеграмм канал, где рассказываю о продуктовом дизайне и своих экспериментах с нейронками, подписывайтесь

Буду рад если поддержите меня и нажмете на кнопку "Yes" в Стиме:

https://steamcommunity.com/sharedfiles/filedetails/?id=29632...

Статья была написана два года назад, но пролежала в черновике. Сейчас заработок именно в Galaxy Store на циферблатах неактуален, но теперь есть WearOs с Google Play и Huawei, да и опытом поделиться охота.

Есть два способа разработки циферблатов, оба из которых я опробовал

Первый – разработка в специальной софтине от Самсунга – «Galaxy Watch Designer». Этот софт представляет из себя визуальный редактор, где элементы будущего циферблата накладываются слоями друг на друга, текстовым областям задаются свойства (время, счетчик шагов и т.п.). Так как это конструктор – есть ряд ограничений в разработке, и не все фантазии и идеи можно реализовать. Самое печальное – нельзя совмещать спортивные счетчики (шаги, пульс, лестницы) и информацию о погоде.

Второй – разработка в Tizen Studio. Либо на C, либо с помощью HTML, JS, CSS. Тут гораздо больше возможностей, но ограничения тоже есть. Например – нельзя брать данные для информеров с Samsung Health. Как пример, нужно писать свой счетчик шагов, который не будет синхронизироваться с Samsung Health, это приведет к тому, что данные о шагах на циферблате и в приложении на часах будут отличаться, хоть и незначительно.

Для себя я выбрал разработку циферблатов первым способом, так как это быстрее. Конструктор в данный момент полностью закрывает мои потребности.

Процесс разработки

Сначала я рисую наброски циферблатов на бумаге, далее отрисовываю их в Sketch’e. После – нарезаю графику и собираю в Galaxy Watch Designer. Весь цикл разработки при желании можно закрыть за 1 день, но у меня уходит в среднем 2-4 дня на циферблат. Самое сложное – придумать идею. Вот так выглядит отрисовка одного из моих циферблатов:

Публикация в сторе

Для стора необходимо подготовить набор промо-графики: иконка, обложка и до 8-ми скриншотов с описанием. Для себя я сделал шаблон, в котором просто меняю картинки и текст под новый циферблат. Так выглядит мой шаблон:

У меня много картинок, я адаптирую промо-материалы под 9 языков. Чаще всего у разработчиков в сторе 1-2 языка.

Страничка публикации работ в сторе выглядит так:

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

После публикации нужно ждать, пока циферблат протестируют. Это долго. Обычно до недели.

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

Продвижение

Когда циферблат появляется в Galaxy Store, я начинаю его продвигать. Продвижение в топе сейчас несложное – алгоритм до конца непонятен, но точно известно, что количество скачиваний и отзывов влияет на позиции в рейтинге.

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

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

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

У каждой страны свой рейтинг внутри стора. Можно быть на первом месте в России и на 50 в США. В России выйти в топ 10 несложно, большинство моих циферблатов в нем были, в США – очень сложно.

Финансовая часть

Самсунг платит раз в месяц на пайпал, себе берет от 30% с продажи. В личном кабинете есть статистика продаж, которая обновляется раз в сутки. В принципе продажи пошли сразу после выкладки первого циферблата, сначала совсем чуть-чуть, через месяц – примерно по 20$ в день. Сейчас уже больше. Вот так выглядит статистика по загрузкам за последние 30 дней. В ней учитываются как платные скачивания, так и скачивания по купонам:

Всего я сейчас разработал 40+ циферблатов, которые уже продаются, и еще 11 в разработке.

Обновленные данные на 2023 год

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

Смысла создавать циферблаты под Tizen больше нет, новые часы выходят на Wear Os.

Максимальный заработок который был – 18 000$ за месяц.

Теперь я разрабатываю циферблаты для часов на WearOs (Google Play) и для часов Huawei (Huawei App Gallery), времени трачу на это дело сильно меньше, доход соотвественно тоже меньше. В планах выпускать по 1 циферблату в месяц.

Разработал более 100 циферблатов.

Статистика за все время в Galaxy Store:

Все мои циферблаты можно посмотреть на моем сайте – http://matveyanwatchface.ru/?ref=vc.ru

Как родилась идея?

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

Некоторые клиенты брали иконки с CoinMarketCap, тут есть ряд минусов:

– Иконки там в .png и маленького размера;

– Отсутсвие возможности для кастомизации;

– Ручная работа с каждой иконкой, так как файл иконки не соответствует названию криптовалюты;

– Вес иконки больше векторного аналога.

Другие находили сеты иконок в интернете, вариант тоже не без минусов:

– Чаще всего попадаются очень ограниченные сеты иконок на 100-150 штук;

– Очень много неактуальных, устаревших иконок;

– Сложная ручная кастомизация каждой иконки.

– После поиска очередного сета иконок для проекта я решил создать свой набор.

Набор иконок

Главное преимущество моего набора – легкая кастомизация иконок под стиль проекта как в фигме, так и при подключении к проекту в CSS.

Все иконки отрисованы в векторе, именуются и вызываются по тикеру.

Набор содержит топ 600 иконок с CoinMarketCap и все коины с Binance.

Дизайнерам

Все иконки я упаковал в компонент Фигмы, сделал несколько пресетов, вот так это выглядит:

Компонент меняет размер без косяков, каждая иконка расположена строго по центру и растягивается вместе с компонентом. В фигме кроме иконок содержится библиотека цветов, в которой есть цвет каждой отрисованной иконки. Дизайнеру вместе с файлом фигмы отдается папка со всеми иконками в svg.

Для разработчиков

Все иконки – в Webfont, получился аналог FontAwesome, но с иконками криптовалют. Для вывода иконки в своем проекте нужно подключить шрифт и файл стилей, а потом вызвать нужную иконку:

<span class="cryptoicon icon-USDT"></span>

для разработчиков тоже сделал несколько пресетов: белая иконка на черном фоне, черная иконка на белом фоне, иконка своего оригинального цвета на белом фоне, фон цвета оригинальной иконки и белая иконка:

Вместе с иконками в css файле в виде переменных содержится оригинальный цвет каждого отрисованного коина, цвет можно применить к любому элементу и его фону:

<span class="USDT-color-bg"></span>

Код выше применит к элементу <span> фон цвета иконки USDT. А вот так задается цвет элемента:

<span class="USDT-color"></span>

Есть и другие варианты подключения и использования иконок. Можно подключить svg-спрайт со всеми иконками и вызывать иконки таким способом:

<svg><use xlink:href="cryptosymbol.svg#icon-USDT"></use></svg>

Можно использовать svg штучно, в папке с svg иконками все иконки именуются по тикеру.

Монетизация

Есть три варианта покупки набора:

– Полный набор (svg, svg-спрайт, webfont, Figma) – 20$

– Набор дизайнера (svg, Figma) – 12$

– Набор разработчика (svg, svg-спрайт, webfont) – 12$

Разовая покупка, подписок нет. Вышла новая версия – можно купить еще раз или использовать старую, если ее хватает. В данный момент автоматизированно купить набор можно за USDT, LTC, ETH, BTC, возникли сложности с подключением карточного процессинга и получения оплат из-за рубежа. Бесплатно можно скачать весь набор иконок в png, большого размера и прозрачные.

Поддержка

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

Команда

Над проектом работаю с супругой, она отрисовала большую часть иконок, а я сделал сайт, упаковал иконки в шрифт, svg-спрайт.

Посмотреть проект и бесплатно скачать весь набор иконок в png можно тут – https://cryptoicons.net/

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