Как спроектировать и построить индивидуальный график социальных тренировок и придерживаться его, используя invision, vue.js и dexie.
Почему я это делаю?
Я никогда не тренируюсь, никогда. Теперь я нахожу способ тренироваться, и я хочу, чтобы он прижился.
Еще в колледже я занималась бальными танцами и «ходьбой и бегом трусцой», чтобы выполнить свои зачеты по физкультуре. Да, ходьба, это урок, на котором вы ходите по кругу в поле 6 раз, а затем заканчиваете. Это занятие для человека, который никогда не тренировался, как я, и я был не одинок.
На самом деле заниматься спортом не сложно. Ты появляешься, делаешь это, потом чувствуешь себя хорошо и хочешь пойти снова. Но есть две огромные проблемы:
- Спортивная среда демотивирует
- Нет реального способа отслеживать ваш прогресс, особенно в начале, когда все, что вы чувствуете, это боль и слабость.
Я пробовал заниматься в спортзале, пробовал следить за экраном на YouTube, пробовал приложения для тренировок за х-минут, но ни одно из них мне не подошло. Самая большая проблема заключается в том, что я не чувствую, что подхожу ни под один из этих режимов: тренажерный зал слишком пугает, а подписка на YouTube просто хромает.
Потом я столкнулся с организованными групповыми занятиями. Это социальное; это весело. Вы получаете мгновенную обратную связь, когда выполняете различные движения. И лучшая часть? Вы видите людей, похожих на вас: худых и немотивированных типов, которые находятся на пути к лучшему образу жизни!
В сообществе много предложений, и это довольно дезориентирует. Я хочу знать, какой из них подходит мне, когда он лучше всего соответствует моему сегодняшнему графику и с кем я могу пойти. Именно тогда я решил создать свой собственный небольшой веб-инструмент, чтобы продвигать себя и заниматься фитнесом (без каламбура: P).
Это первая часть из двух частей по созданию этого приложения. Здесь я сосредоточусь на первом несоциальном MVP, рассмотрю дизайн и минимальные используемые технологии. Последующая история продемонстрирует социальные функции и итерации пользовательского интерфейса.
Дизайн
Вот ценности, которые я хочу создать. Конечный продукт должен быть:
- гибкий, не привязанный к расписанию, как календарь, но адаптирующийся к вашему дню
- общение, как для хвастовства, так и для планирования с друзьями
- спокойный, а не сумасшедший, который уменьшает силу каждого толчка
Первая попытка
Для начала я представляю чистый интерфейс, в котором я могу легко искать различные предложения, добавлять их одно за другим в свое собственное расписание и иметь очень простой способ взаимодействия с каждым сеансом.
Вот как выглядит бумажный макет:
Панель поиска взаимодействует с API-интерфейсом календаря для получения целевых сеансов, доступных сегодня и завтра, и отображает множественный выбор, который пользователь может добавить в свое расписание, которое отображается в нижней половине экрана с хронологическими записями. Пользователь может взаимодействовать с каждой записью, проводя пальцем влево, чтобы закрыть серию, или вправо, чтобы оставить заметку об этом конкретном сеансе.
Стек
Я верю в простые и надежные решения. Я решил создать его как веб-приложение, чтобы использовать вездесущую платформу браузера, которая снижает входные барьеры. Вот мой подробный выбор:
Внешний интерфейс
Я использую любимый и хорошо поддерживаемый vue.js, прогрессивный фреймворк javascript, доступный, универсальный и производительный. Для стилизации я использую Buefy вместе с Bulma, модульным и современным CSS-фреймворком (новичок!). Компоненты пользовательского интерфейса выглядят красиво и чисто из коробки, что подходит для этого простого небольшого веб-приложения.
Бэкэнд
Я всегда выступаю за безумно простые решения для баз данных. В нашей первой итерации нет социальной составляющей. Встроенная в браузер база данных, такая как indexedDb, была бы идеальной. Пригодилась бы минималистичная обертка Dexie.
Первый MVP
После некоторых доработок, вот как это выглядит сейчас:
Не стесняйтесь играть с ним здесь.
Далее: подключение веб-приложения к социальной сети и многое другое, следите за обновлениями!
PS: шшш… маленький секрет, введите «кино», чтобы посмотреть фильмы, которые покажут сегодня и завтра ;)
Ресурсы
Screencastify для создания демонстрационного видео в браузере
Подробное обсуждение различных соображений дизайна для множественного выбора
