Как я построил и отправил мой первый MVP

Автор оригинала: JavaScript Joe.

29 июня я поделился MVP наставнее.dev В Twitter – мой первый «настоящий» проект, который был больше всего, что я построил раньше, и что-то, что я был взволнован для других людей.

Это было длинные 4 месяца, построение этого, и это нигде почти завершено, но я думаю, что это хорошая остановка, чтобы поделиться MVP. https://t.co/ltncqjb0bc – «Гамифицированная» платформа обучения, чтобы помочь вам стать веб-разработчиком. Первый урок? Основы командной строки? https://t.co/wdjr4u83t0 pic.twitter.com/l8cfnhodqi.

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

Я думал, что поделись историей за весь процесс.

Происхождение идеи

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

Как и многие другие люди, у меня есть эти идеи в случайных случаях во время моей жизни. Я держу список этих идей в Trello Доска называется «идеями». Ищете здесь, я вижу, что я отметил это 21 января 2019 года.

Я знал несколько вещей:

Я хотел, чтобы это было интерактивным
Я хотел, чтобы это было похоже на игру
Я хотел, чтобы это было быстрые упражнения

Когда начать?

Примерно в то же время я обернул внештатный проект (портированию темы Jekyll на сайт GATSBY), поэтому я не чувствовал, что я был готов начать это еще. Тогда у меня был разговор с @signalnerve В Твиттере, что вызвало мою мотивацию:

Поэтому я подумал: «Что, черт возьми, почему бы не начать это?»

Март 2019 года

Я использовал GATSBY/Tymdercript Starter, чтобы kickStart первый и нажал мой Первый коммит Отказ Первоначально я назвал репо «Жизнь кода», потому что это то, что пришло в голову, но позже я переименовал его после покупки домена Mentored.dev.

Начальные каркасы

После создания репо, я набросил некоторые элементарные каркасы в Фигема

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

Принимая вклад

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

Это медленно приходит к жизни? Боковой проект – простая «игровая» обучающая платформа POC Ничего не представляется, но и планирую сделать логику сначала, получить урок там, а затем добавить стили, цвета, анимацию и т. Д. Для того, чтобы заставить его чувствовать себя более веселым pic.twitter.com/qf8fvaiv8m.

Базовый диалог работает

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

Я наконец получил всю логику, работающую в моем боковом проекте? Следующий шаг, работайте над дизайном и анимацией! pic.twitter.com/mcfjmulldy.

Рассказчик персонаж разговаривает

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

??? Оно живое!!!! pic.twitter.com/2zsjnvhdzr.

Получение отзывов на диалог

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

Я худший при принятии решений, когда дело доходит до дизайна? Любые мысли о каком варианте вы предпочитаете? Также открыт для предложений Стрелки будут либо прогрессировать диалоговое окно вперед или назад pic.twitter.com/ttdp55dajd.

Мигрировать на машинопись

Я использовал стартер GATSBY-Tymdercript для этого проекта, потому что я имел значение для изучения Ts. Однако до этого момента я на самом деле не использовал TS. Файлы только что были .ts или .tsx окончания.

До 30-го я упомянул желание выучить TS и @Tejaskumar_ Предложил научить меня мигрировать наставной. ДЭВ CodeBase в TS на Google Hangouts Livestream. Это был один из самых крутых моментов этого проекта. И я выучил тонну.

Безопасно сказать, что это был огромный успешный ?? @Tejaskumar_ это феноменальный учитель. Он прошел ко мне через все, и мы оказались миграцией большинства кодовой базы @typescriptlang в течение примерно 3 часов ??? Я сейчас поклонник TypeyctScript! https://t.co/ogbhd6rwmm

Апрель 2019 года

Добавление компонента «профиль карты»

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

Сделал хороший успех этим вечером! Я смог превратить мою разработую «карточку профиля» в код ✨ pic.twitter.com/xrw7eiza58.

Проектирование приборной панели

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

Счастлив, что сделал это так далеко сегодня вечером! ?? Область приборной панели сделана – как минимум дизайн, все сложно закодировано. Следующие шаги будут рисовать карту (похожую на карту университета), где пользователи смогут нажать на здания, чтобы взять курсы/уроки? Это медленно идет к жизни! pic.twitter.com/rtfzysr4tn.

Проектирование карта кампуса

Это было дольше, чем я думал. Я хотел, чтобы он чувствовал себя университетским кампусом, но тяжело нарисовал от Город поддонов в покемоне. Заполненная версия имеет больше, но по крайней мере, у меня было что-то, что я мог бы добавить к приборной панели. Я разработал все это в фигне и экспортировал его как SVG. Работа с SVGS в реакции оказалась восхитительным опытом.

Пошел в кафе с @Bryanmierke и @tadscritch Сегодня – сделал какой-то прогресс на дизайн карты? Просто нужно добавить другое здание и, возможно, фонтан и несколько кустов pic.twitter.com/gnsqnxoolz.

Добавление геймплея музыки

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

Однако, если вы включите его в меню «Пуск» или когда вы играете в игру, он добавляет приятное прикосновение.

[Аудио на] Наконец добавил немного звука в мою игру Там несколько странных ошибок, но по большей части он работает! ? pic.twitter.com/2bwmdhmco9.

Изменение карт

Это должно быть моей любимой функцией, которую я добавил – возможность изменить карту. Сначала я понятия не имел, как я собирался сделать это, то я подумал: «Почему бы не просто поменять карту с другой картой?»

Так что именно то, что я сделал, и это сработало!

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

Сделал хороший успех этим вечером! Добавлена возможность изменить карту при нажатии на здание? Следующие шаги: – Внутри здания пользователя может выбрать курс/урок – Наложение покажет на вершине всего с уроком диалога с профессором pic.twitter.com/circb2vxkp.

Курсы Страница

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

То же самое – я боролся с этим немного, а затем решил: «Давайте покажем это в компоненте наложения!»

Это закончилось хорошо. Опять же, я не знаю, хорошо ли что масштабируется, но он работает сейчас.

Через некоторое время выключено, вернемся к работе на моем боковом проекте? Собрать быстрый дизайн и выяснил, как я собираюсь показать доступные курсы pic.twitter.com/wer9thqgg7.

Май 2019 года

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

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

Июнь 2019 года

Глядя на приборную панелью, которую я создал, все еще осталось сделать.

Я чувствовал себя пораженным.

“Как я собираюсь закончить все это?”

Реализация на встрече Phoenix Reactjs

Я не был в Phoenix rectjs встречаются через некоторое время. Мои два коллеги, и я решил пойти, услышал переговоры молнии.

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

«Сколько больше вы должны закончить?»

«Достойное количество. Все на странице приборной панели в данный момент жестко закодирована».

«Оставьте все это. Завершите основные функции и отправьте его.

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

Логика Tracker Streak была багги, когда я впервые реализовал его и вообще не работал. Я не был уверен, что я должен приращить только серию через 24-48 часов или просто сделать это по дням, или что. Это казалось намного сложнее Чем это должно было быть.

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

Прогресс урока (завершен – 1/3) также в лучшем случае. Опять же, я сосредоточен, чтобы вытащить его в дверь. Я буду стилься в будущем.

Отправим его

29 июня. Важный день.

Как я говорю в Tweet Thread,

Некоторое время назад я читаю Постный запуск Эриком Рис. Одна вещь, которую всегда застрял со мной, было то, что он сказал вдоль линий: «Вы должны быть смущены, помещая ваш продукт там. Вот когда вы знаете, что это МВП».

И вот как я чувствовал! Столько осталось сделать. Трудно даже рассмотреть это «игровые» на настоящие игроки, вероятно, не так ли.

Но это точка – это помогло поднять бремя с моих плеч и отступить, чтобы услышать, что думают люди.

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

Что я думаю, работал

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

Учетность – Сообщество друзей и Twitter

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

Их интерес и поддержка много значило для меня. Они хотели, чтобы это было успешно, как я. Это держало меня идти.

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

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

Использование проектов GitHUB, проблемы и вехи

Я относился к этому проекту, как мы относимся к работе клиента/компании на работе. Я не использовал Sprints se, но я сохранял список задач в Github Project Propert А затем выберите несколько и создайте вехой. Это сделало работу более достижимыми и менее ошеломляющими.

Я настроил промежуточную среду в https://staging.menterored.dev (Благодаря NetLify , это было просто). Затем каждая проблема я закончил, я представил пр слить в постановку. Я рассмотрел и объединил себя (да, немного глупо, но хорошая практика).

Однажды А . Милус был завершен Я объединил постановку в мастеру и создал новый выпуск. Этот процесс устанавливает меня на успех. Я держал вехи маленькими (что я мог закончить через 1-3 недели).

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

Область резки

Я бы не закончил этот MVP, если бы не сократил много функций. Например, я действительно хотел создать репозиторий, называемый «наставным dev» после того, как пользователь вошел в систему и хранить прогресс урока там. Но это собирается занять больше времени, чем я ожидал, поэтому я его разрезал.

Вместо этого я храним прогресс в LocalStorage. Да, это краткосрочный, но опять же, мне пришлось резать объем на корабле. Если бы у меня не было, я бы не закончил этот этап проекта.

Закрытие мыслей

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

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

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

Спасибо за слушать путешествие.

###

Если вы наслаждались этой статьей или нашли это интересно, пожалуйста, поделитесь этим с другими или дайте мне знать на Twitter Отказ

Чтобы оставаться в курсе на peateded.dev или другие вещи, над которыми я работаю, у меня есть рассылка, которую вы можете Подпишитесь на здесь Отказ

Счастливое кодирование!