Как я сделал и выпустил приложение на Flutter за 2 дня

Ну, если в сутках 24 часа и 2 дня не значит 2 дня подряд и 48 часов без перерыва, то это вообще-то не кликбейт, а так оно и есть.

Цель — создать приложение на Flutter с красивой анимацией за 24 часа. Почему? Я никогда не был на хакатоне, поэтому я принял такой вызов для самого себя. Реальность? У меня ушло 48 часов от самой первой строчки кода до публикации в обоих магазинах приложений.

Вот приложение.

Скачать QR-Code

‎Simple Interval Workout Timer

Developer: Artur Fijal

Price: Free

Скачать QR-Code

Simple Interval Workout Timer

Developer: Artur Fijał KOALASOFT

Price: Free

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

Что и почему

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

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

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

А приложение? Ничего революционного, просто приложение с таймером интервальных тренировок. Почему? Я люблю тренироваться, интервалы — это здорово, но все бесплатные приложения, которые я использовал, были либо уродливыми, либо содержали кучу надоедливой рекламы. Мое приложение основано на минималистичном, понятном, но красивом и хорошо анимированном пользовательском интерфейсе, быстрой и простой настройке и отсутствии рекламы НАВСЕГДА. Кроме того, такое приложение просто хорошо подходит для некоторых анимаций.

Представьте, вы хотите сделать несколько интервальных тренировок (табата), но давно их не делали. Вы загружаете первое приложение… Бум, хотите подписаться на профессиональную версию? Нет? Хорошо, вам удается настроить его и нажать «Пуск». Бум, interestial  реклама. Бум, то же самое после тренировки. Конечно, все хотят заработать немного денег, но нужно иметь приличия.

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

План игры

Итак, идея заключалась в том, чтобы сделать это за один день. Но был один дерзкий ход, который я хотел сделать — запланировать все заранее. Это означает, что список дел/задач организовать в разумном порядке, сделать архитектуру, подготовить плагины, которые я хочу использование и даже макеты, поэтому единственной оставшейся работой было бы программирование и публикация за эти 24 часа. Пройдем все этапы этого пути!

UI/UX-планирование

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

Я использовал приложение Concepts вместе с iPad и Logitech Crayon. Это не обязательно должно быть красиво, и уж точно это не так, потому что у меня совсем нет навыков рисования.

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

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

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

Прочее планирование

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

Время шоу

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

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

Я просто постарел и предпочитаю иметь и делать все в меру, лучше чаще, чем из последних сил. Я решил отказаться от однодневного приложения и перешел на 24-часовое. Кстати, я всегда отслеживаю свое время на своих сайд-проектах, в тот день я потратил на проект 12 часов.

Мне пришлось сосредоточиться на других вещах, таких как мой курс Flutter для начинающих на польском языке, и наступило Рождество, поэтому мои усилия были распределены и сокращены. В любом случае, видимо, 24 часов тоже было недостаточно, поэтому я удвоил это время до 48 часов и продолжил. На тот момент я просто хотел иметь хороший MVP, которым был бы доволен. У меня были некоторые действительно неприятные проблемы с приглушением звука (статья/руководство по этому поводу находится в разработке), которые заняли несколько часов моего времени, и несколько проблем с откликом на небольших устройствах.

И действительно, в итоге у меня ушло 48 часов, как гласит старая поговорка:

Работа заполняет время, отпущенное на неё.

Релиз

Большинство инструментов, которые я использовал в прошлом для создания скриншотов в магазине приложений, были затем спрятаны за платным доступом. Я действительно не хочу платить за подписку на инструмент, который я могу использовать раз в несколько месяцев, хотя просто платы за экспорт было бы достаточно. Затем я нашел эту абсолютную жемчужину, AppMockUp, и это был беспроблемный опыт, который мне очень понравился. Если вы используете этот инструмент, пожалуйста, купите автору кофе (я так и сделал), они заслуживают его! Время проверки было довольно долгим, но, по крайней мере, с приложением не было проблем, и первая сборка была в порядке, чего со мной никогда не случалось раньше! Я выбрал случайное бесплатное имя с некоторыми ключевыми словами, и вот оно — Простой таймер интервальной тренировки (Simple Interval Workout Timer).

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

Выводы

Самая важная часть любого процесса и самая ценная для вас.

1. Стоит делать более подробные макеты, потому что вы столкнетесь с проблемами на этапе проектирования, а не на этапе разработки, и дешевле исправить их на этом этапе.
2. Зеркалирование Figma — отличный инструмент. Видя макеты на реальном физическом устройстве, вы получаете гораздо больше, чем мокапы в виртуальных фреймах.
3. Вы все равно отодвинете дедлайн, не зацикливайтесь на этом, если делаете это для себя.
4. Отношение, как к хакатону, отлично подходит для быстрого прототипирования проекта, если он довольно маленький. Но это все, не создавайте целое приложение таким образом.
5. Я знаю, что это заманчиво, но если вы инди-разработчик, лучше сосредоточиться на одном проекте сразу или, по крайней мере, не планировать два дедлайна/релиза рядом друг с другом.
6. Последние 20% задачи занимают 80% времени.
7. Теперь я знаю, почему листы Figma в больших проектах очень быстро становятся огромными и запутанными. Чтобы содержать их в чистоте, требуются серьезные усилия.
8. Это очевидно, но кроссплатформенная разработка — это подарок бога для инди-разработчиков. Если бы не Flutter, у меня было бы как минимум в два раза больше работы, и это потребовало бы почти вдвое больше знаний.

Спасибо

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

Давайте общаться в моих социальных сетях!

Источник