A1Crow

A1Crow

Приложение для сборов ПВД - https://clck.ru/3TuME9 Телеграм - https://t.me/veloshchoki YouTube - https://www.youtube.com/@veloshcheki VkVideo - https://vk.com/veloshcheki RuTube - https://rutube.ru/u/veloshcheki
Пикабушник
Дата рождения: 30 августа
141 рейтинг 0 подписчиков 1 подписка 2 поста 1 в горячем
10

Я сделал web приложение, которым сам собираюсь в велопоходы. Рассказываю, как оно работает

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

Если не читали, то там как раз вся история: зачем вообще понадобилась таблица, как появилась идея сделать из неё что-то большее и как в итоге родился "Едем в лес".

Именно с таких поездок и началась идея Едем в лес

Именно с таких поездок и началась идея Едем в лес

А в этой статье хочу сделать немного другое

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

Потому что я сам продолжаю им пользоваться. И, наверное, это лучший способ объяснить, зачем я всё это делал.

Что такое "Едем в лес"

Если совсем коротко - это помощник для подготовки к велопоходу. Не просто список вещей. И не каталог туристического снаряжения. Идея в другом - собрать в одном месте своё снаряжение и использовать его для сборов разных поездок.

Я добавляю в приложение вещи, которые реально использую:

  • Палатку

  • Спальник

  • Одежду

  • Кухню

  • Инструменты

  • Электронику

  • Аптечку

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

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

У меня сборы долгое время выглядела примерно одинаково - открываешь старый список и начинаешь вспоминать:

  • Палатка - есть.

  • Спальник - есть.

  • Коврик - есть.

  • Горелка ...

А где-то ещё был ремкомплект.

  • Нужно не забыть насос.

  • А сколько брать носков?

  • А зарядку?

  • А powerbank?

  • А аптечку?

И вот вроде бы всё очевидно, но чем больше становится снаряжения, тем сложнее держать всё это в голове.

Вроде бы всё знакомо. Но когда вещей становится много, легко что-нибудь забыть

Вроде бы всё знакомо. Но когда вещей становится много, легко что-нибудь забыть

Особенно если поездки разные.

  • На одну ночь не нужен тот же набор, что на пять дней.

  • Летом не нужен тот же комплект одежды, что осенью.

  • В одном походе готовишь еду, в другом нет.

А если добавить к этому велосипедные сумки, вес и распределение вещей, обычный список начинает довольно быстро превращаться в маленький проект.

Именно поэтому когда-то у меня появился excel, а потом появился "Едем в лес".

Сначала создаём своё снаряжение

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

Например:

  • Домик - Палатка, спальник, коврик,

  • Одежда - Футболки, носки, термобельё, дождевик, тёплая кофта,

  • Кухня - Горелка, газ, котелок, кружка, ложка,

  • Гигиена - Зубная щётка, паста, полотенце и прочие мелочи,

  • Первая помощь - Аптечка,

  • Инструменты -Насос, камера, монтажки, мультитул, ремкомплект,

  • Электроника - Телефон, powerbank, зарядки, фонари

И постепенно появляется ваша собственная библиотека. Причём это не какой-то абстрактный каталог. Это ваше реальное снаряжение.

Сначала я просто заношу в приложение своё реальное снаряжение

Сначала я просто заношу в приложение своё реальное снаряжение

Потом можно собрать готовый набор

Допустим, я часто езжу на двухдневные ПВД. Один раз собрал всё необходимое:

  • Палатка.

  • Спальник.

  • Коврик.

  • Кухня.

  • Одежда.

  • Ремкомплект.

  • Электроника.

Получился мой комплект для ПВД.

И в следующий раз мне уже не нужно начинать с пустого списка. Я могу взять этот набор и изменить его. Например, добавить тёплую одежду.

  • Изменить кухню,

  • Поменять спальник,

  • Добавить дождевик или мембрану

Получается очень простой принцип: один раз хорошо собрал и потом используешь снова.

Один раз собрал рабочий комплект - дальше его можно использовать снова

Один раз собрал рабочий комплект - дальше его можно использовать снова

Со временем наборы начинают отражать реальный опыт

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

Например:

Эту кофту я вообще ни разу не достал

Значит, в следующий раз её можно убрать. Или наоборот:

Зря не взял вторую пару носков

Добавляем. Или:

Мембранную куртку лучше держать в другой сумке для быстрого доступа в случае внезапного дождя

Меняем распределение.

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

Но в велопоходе есть ещё одна проблема

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

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

  • Есть подседельная сумка.

  • Рамная.

  • На руле.

  • Передняя.

  • Задняя.

  • Флягодержатели.

И у каждой сумки свой объём и назначение. Поэтому в "Едем в лес" можно не просто выбрать снаряжение, но и распределить его по велосипедным сумкам.

В велопоходе важно не только взять вещи, но и понять, где они будут лежать

В велопоходе важно не только взять вещи, но и понять, где они будут лежать

Например:

Подседельная сумка

  • Спальник, одежда и другие объёмные, но относительно лёгкие вещи.

Рамная сумка

  • Инструменты, горелка и вещи, которые удобно держать в центре велосипеда.

Сумка на руле

  • Палатка и то, что может понадобиться во время движения.

В результате список начинает выглядеть уже не как:

Палатка
Спальник
Горелка
Одежда
Инструменты

а как:

Что взять + где это будет лежать.

И для меня это очень важное отличие.

В велопоходе важно не только взять вещи, но и понять, где они будут лежать

В велопоходе важно не только взять вещи, но и понять, где они будут лежать

А ещё есть вес

Пока вещей пять, вес примерно понятен. Но когда их становится несколько десятков, начинаются сюрпризы.

  • Палатка - столько,

  • Спальник - около 700г,

  • Сумки - столько, но в расчет не берем,

  • Кухня грамм 500, не считая еды,

  • Еда и поджоры,

  • Вода,

  • Инструменты,

  • Одежда

И внезапно получается совсем не тот вес, который представлялся в голове.

Поэтому в приложении можно учитывать вес снаряжения и смотреть, сколько в итоге получается. А когда вещи распределены по сумкам, можно посмотреть и как распределяется нагрузка.

Важно знать не только общий вес, но и то, где именно он находится

Важно знать не только общий вес, но и то, где именно он находится

Для меня это особенно интересно именно в велопоходах. Потому что вопрос уже не только в том:

Сколько я везу?

но и:

Где я это везу?

И тут начинается настоящий байкпакинг

Мне вообще нравится, что приложение можно использовать и для совершенно разных подходов к поездкам.

  • Кому-то хочется взять минимум вещей и максимально облегчить велосипед, а кому-то важнее комфорт,

  • Кто-то едет на одну ночь, а кто-то на неделю.

  • Кто-то берёт только самое необходимое, а просто необходимо нормальная кружка, тёплая одежда и хороший завтрак

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

что он берёт, сколько это весит и где это лежит.

А что делать непосредственно перед выездом?

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

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

Вот теперь можно ехать

Поэтому я сделал нормальный мобильный сценарий

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

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

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

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

Даже если пропал интернет

Ещё одна вещь, которую я специально предусмотрел - возможность пользоваться приложением офлайн.

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

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

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

Есть режим "Не выключать экран". Казалось бы, мелочь, но представьте обычную ситуацию:

Вы открыли список на телефоне -> посмотрели:

Палатка

Положили телефон -> Пошли в другую комнату за палаткой -> вернулись, а экран уже погас -> разблокировали -> поставили отметку -> снова пошли за следующей вещью.

Через пять минут это начинает раздражать.

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

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

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

телефон рядом -> список открыт -> собираешь вещи -> отмечаешь -> ничего не забываешь.

В итоге весь процесс выглядит довольно просто

1. Моё снаряжение

  • Что у меня вообще есть?

2. Набор

  • Что обычно беру с собой?

3. Поход

  • Что понадобится именно в этот раз?

4. Велосипедные сумки

  • Куда всё это положить?

5. Вес

  • Сколько в итоге получится и как распределена нагрузка?

6. Сборка

  • Всё ли я действительно положил?

И после поездки этот комплект никуда не исчезает. Его можно использовать снова.

Всё собрано. Можно ехать.

Всё собрано. Можно ехать.

Для кого я вообще это сделал

В первую очередь, наверное, для таких же людей, как я.

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

Для новичка приложение может помочь разобраться:

С чего вообще начать?

Для человека, который ездит время от времени:

Как я собирался в прошлый раз?

Для опытного туриста:

Как хранить своё снаряжение, комплекты, вес и загрузку сумок в одном месте?

А для байкпакера:

Как всё это компактно распределить по велосипеду?

И всё это появилось из обычной Excel-таблицы

Наверное, поэтому я и продолжаю немного удивляться тому, во что всё это превратилось.

Когда-то мне просто хотелось перестать каждый раз собирать список заново.

  • Потом понадобилось учитывать вес.

  • Потом сумки.

  • Потом разные варианты комплектов.

  • Потом удобная сборка со смартфона.

И постепенно Excel перестал справляться с тем, что от него требовалось. Так появился Едем в лес ака edemvles.

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

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

от куда я вообще еду? до всё собрано, можно ехать

Если хотите попробовать

Едем в лес находится здесь

Можно начать с самого простого - создать своё снаряжение и попробовать собрать первый небольшой набор. Не обязательно сразу переносить туда весь свой туристический шкаф. Создайте один комплект для ближайшего ПВД.

А после поездки просто посмотрите, насколько этот список совпал с реальностью.

  • Что пригодилось

  • Что оказалось лишним

  • Что забыли

  • Что пришлось искать в другой сумке

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

А теперь мне интересно ваше мнение

Если вы ездите в велопоходы, расскажите, как вы сейчас собираетесь?

  • Excel / Google Таблицы

  • Заметки в телефоне

  • Старый список в Telegram

  • Фотография разложенного снаряжения

  • Или всё это до сих пор хранится в голове

Я как раз начинал с Excel и в итоге дошёл до того, что сделал для этого отдельное приложение.

Буду рад, если оно пригодится ещё кому-нибудь.

edemvles.com

Показать полностью 9
33

Как Excel таблица превратилась в приложение для велопоходов, или мой опыт вайб-кодинга

Всем привет!

Хочу рассказать о своем приложении “Едем в лес”. По задумке оно должно облегчить сборы в походы как для новичков, так и для опытных туристов. Также в нем можно поделиться своим сетапом снаряжения с коллегами по цеху или помочь собраться другу-новичку.

Это история о том, как я пришел к этой идее, что стало прародителем проекта, какие инструменты использовались для реализации и почему статья опубликована именно в велоразделе, а не в условном «Я пиарюсь» или IT-сообществах.

С чего всё началось

Сначала немного о себе. Катаю лет 10. Сначала это были короткие покатушки, но со временем я заезжал все дальше и глубже в леса. Конечно, натыкался на YouTube каналы путешественников и велотуристов. Хотелось попробовать и это направление. Так, шаг за шагом, на собственных ошибках я обживался снаряжением, пробовал разные велосипедные сумки и заводил новые знакомства. Путем проб и ошибок пришел к байкпакингу и его философии.

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

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

В итоге у меня образовались две вкладки:

  1. Список снаряжения и его характеристики.

  2. Список сумок и их параметры.

В один прекрасный день пришла мысль скрестить их между собой. Так, сам того не ведая, я создал MVP (минимально жизнеспособный продукт) будущего приложения. Как говорится, каждое успешное приложение когда-то было чьей-то Excel таблицей.

Долгими зимними вечерами я тюнинговал файлы: добавлял специфические характеристики вроде температуры комфорта для спальника, R-value для ковриков и КБЖУ для раскладки еды. В итоге скромный список перерос в монстра из ВПР-формул. Таблица помогала собираться быстрее и наглядно показывала перегруз, но поддерживать в актуальном состоянии столько вкладок стало слишком тяжело.

Пора расчехлять ноутбук

Так и родилась идея создать на основе таблицы полноценное приложение. Уверенности в том, что это нужно кому-то, кроме меня, не было. Поэтому сначала я показывал саму таблицу и мини-демо знакомым и тем кто действительно понимает в вело ПВД, чтобы оценить: полезен ли такой функционал или это уже явный перебор?

К моему удивлению, 90% опрошенных дали положительную обратную связь. Поняв, что проект пригодится не только мне, но и как минимум паре человек из сообщества, я решил: пора расчехлять ноутбук и садиться за код.

Release now, fix later

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

Как раз в это время коллеги по работе то тут, то там начали открывать для себя “вайб-кодинг” (AI-assisted coding), делясь написанными приложениями и сервисами. И тут меня осенило. Еще в 2020 - 2021 годах мне скидывали Replit. Ребята тогда только начинали и щедро насыпали бесплатных токенов. Но на тот момент искусственный интеллект был сыроват, и токены я так и не потратил.

Осознав, что сегодня Replit превратился в полноценного ИИ-ассистента с поддержкой кучи API, и учитывая рекомендации коллег, я сделал очевидный выбор. Решил стать модным и современным - вкатиться в ИИ-разработку и вайб-кодинг!

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

Текущий ИИ - это студент-джун, который только-только окончил курсы по JavaScript. У него нет понимания архитектуры и взаимосвязей. Что ему написали в промпте, то он и сделал, вообще не думая о прошлых или будущих задачах. Помните: дебажить за ним придется долго, а мата в духе “Ну какой же тупой!” и “Зачем ты вообще так сделал?!” будет очень много. Но это дает быстрый старт, и ты не выгораешь в самом начале пути.

В итоге структура и “скелет” логики приложения были свайбкожены буквально за пару недель. Когда проект дошел до стадии, где уже можно было добавить снаряжение, выбрать сумку и виртуально упаковать вещи, я пошел со своим продуктом в народ.

Релиз и первые пользователи

Купил домен и хостинг. Поскольку для синхронизации снаряжения и сумок между устройствами требовалась регистрация пользователей, я автоматически попал под действие закона 152-ФЗ “О персональных данных”. Выполнил все требования, подал уведомление в Роскомнадзор и запустил веб-приложение.

4 мая стало официальным днем рождения проекта! Эх, где то прекрасное время, когда можно было просто закинуть html, css и js через FTP - и всё сразу работало...

Когда я скинул ссылку близким знакомым для тестирования, ладони у меня потели знатно.

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

Кстати, из-за бага формы обратной связи в “Спорт-Марафон” улетело порядка 10 - 15 одинаковых писем подряд.

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

Взросление разработки

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

Если Replit - это чистый вайб-кодинг (пишешь человеческим языком и сразу получаешь результат при минимальных знаниях), то Cursor - это уже полноценная IDE для разработки. Но со встроенным ассистентом, который подскажет, что, куда и как лучше вставить, а также поможет залабать сложный кусок кода. Сейчас я стараюсь контролировать все процессы сам, без слепого участия ИИ. Стабильность приложения от этого сильно выросла, хотя TTM (время вывода фич на рынок) конечно, просело.

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

Сейчас в системе около 50 зарегистрированных пользователей. Из них 5 человек уже всерьез и полностью собрались в своё путешествие, а сами пользователи добавили в общую библиотеку 12 новых вещей. Трафик хоть и медленно, но растет.

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

В июне собрался еще раз на #ШТС и для него уже виртуально собрался https://clck.ru/3TuPNh

Продолжение следует…

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

Показать полностью 8
Отличная работа, все прочитано!

Темы

Политика

Теги

Популярные авторы

Сообщества

18+

Теги

Популярные авторы

Сообщества

Игры

Теги

Популярные авторы

Сообщества

Юмор

Теги

Популярные авторы

Сообщества

Отношения

Теги

Популярные авторы

Сообщества

Здоровье

Теги

Популярные авторы

Сообщества

Путешествия

Теги

Популярные авторы

Сообщества

Спорт

Теги

Популярные авторы

Сообщества

Хобби

Теги

Популярные авторы

Сообщества

Сервис

Теги

Популярные авторы

Сообщества

Природа

Теги

Популярные авторы

Сообщества

Бизнес

Теги

Популярные авторы

Сообщества

Транспорт

Теги

Популярные авторы

Сообщества

Общение

Теги

Популярные авторы

Сообщества

Юриспруденция

Теги

Популярные авторы

Сообщества

Наука

Теги

Популярные авторы

Сообщества

IT

Теги

Популярные авторы

Сообщества

Животные

Теги

Популярные авторы

Сообщества

Кино и сериалы

Теги

Популярные авторы

Сообщества

Экономика

Теги

Популярные авторы

Сообщества

Кулинария

Теги

Популярные авторы

Сообщества

История

Теги

Популярные авторы

Сообщества

Недвижимость и ремонт

Теги

Популярные авторы

Сообщества