兔子运送胡萝卜

On June 29th, I shared the MVP of mentored.dev on Twitter–my first "real" project that was bigger than anything I'd built before and something I was excited for other people to use.

6月29日，我在Twitter上分享了mentored.dev的MVP，这是我的第一个“真实”项目，它比我之前建立的任何项目都要大，这让我为其他人使用感到兴奋。

After sharing this, I received some bits of positive feedback, including a shout-out in the npm weekly newsletter.

分享之后，我收到了一些积极的反馈，包括在npm每周新闻中大声疾呼。

I thought I'd share the story behind the whole process.

我以为我会分享整个过程的故事。

观念的起源 (Origin of the Idea)

I can't remember when I first had the idea but a while back when I was introduced to TwilioQuest, I thought to myself,

我不记得我最初有这个主意的时候，但是回想起当我被介绍给TwilioQuest时 ，我心想，

Wouldn't it be cool to build a "gamified" learning platform that taught you how to code?

建立一个“游戏化”的学习平台来教你如何编码不是很酷吗？

Like many other people, I have these ideas at random times throughout my life. I keep a list of these ideas in a Trello board called "IDEAS". Looking here, I can see I notated this on January 21st, 2019.

像许多其他人一样，我一生中都是随机产生这些想法的。 我将这些想法的清单保存在称为“ IDEAS”的Trello板上。 看这里，我可以看到我在2019年1月21日对此进行了注释。

I knew a few things:

我知道几件事：

• I wanted it to be interactive我希望它是交互式的
• I wanted it to feel like a game我希望它看起来像一个游戏
• I wanted it to have quick exercises我希望它能快速练习

---

---

从哪儿开始？ (Where to Start?)

Around that same time, I was wrapping up a freelance project (porting a Jekyll theme to a Gatsby site) so I didn't feel like I was ready to start it just yet. Then, I had a conversation with @signalnerve on Twitter that sparked my motivation:

大约在同一时间，我正在结束一个自由职业项目(将Jekyll主题移植到Gatsby网站)，所以我觉得自己还没有准备好开始。 然后，我在Twitter上与@signalnerve进行了一次对话，激发了我的动力：

Build a small app–a real MVP–validate your idea and then decide if you should keep building.

构建一个小的应用程序-一个真正的MVP-验证您的想法，然后决定是否应该继续构建。

So I thought, "What the heck, why not start it?"

所以我想：“到底，为什么不开始呢？”

---

---

2019年三月 (March 2019 )

I used a Gatsby/TypeScript starter to kickstart the first and pushed my first commit. Originally, I named the repo "Life of Code" because that's what came to mind but later I renamed it after buying the mentored.dev domain.

我使用Gatsby / TypeScript入门程序启动了第一个提交，并推送了我的第一个提交 。 最初，我将存储库命名为“代码的生命”，因为这是我想到的，但是后来我在购买了mentored.dev域后将其重命名。

初始线框 (Initial Wireframes)

After creating the repo, I sketched up some elementary wireframes in Figma

创建存储库后，我在Figma中绘制了一些基本线框

Once I had all this, I felt over the initial "where-do-I-begin-paralysis" and knew I needed to keep the momentum going.

一旦拥有了所有这些，我便感到了最初的“我从哪里开始瘫痪”，并且知道我需要保持这种势头。

接受输入 (Taking Input)

One of the first things I tried was asking for user input and showing that in a message. This would be useful for the dialog between the narrator and the user.

我尝试的第一件事之一是要求用户输入并将其显示在消息中。 这对于叙述者和用户之间的对话很有用。

基本对话框工作 (Basic Dialog Working)

Even though it didn't look pretty, the logic for the dialog was working! This felt like a good milestone because most of the hard stuff was done.

即使看起来不漂亮，对话框的逻辑也起作用了！ 这感觉是一个很好的里程碑，因为大多数艰苦的工作都已完成。

讲述人角色说话 (Narrator Character Talking)

I struggled a lot figuring out the best way to get the narrator talking but after finding react-keyframes, I was able to figure out a solution. This was huge because previously I hadn't done much with animation.

我一直在努力寻找react-keyframes叙述者说话的最佳方法，但是在找到react-keyframes ，我能够找到解决方案。 这是巨大的，因为以前我在动画方面没有做太多事情。

获取对话框的反馈 (Getting Feedback on Dialog)

As stated earlier, I think it's important to get input from others. I don't know if Twitter is the best place to do it but fortunately for me, the people who responded to my request for feedback were kind.

如前所述，我认为从他人那里获得输入很重要。 我不知道Twitter是否是最佳选择，但是对我来说幸运的是，响应我的反馈请求的人都很友善。

迁移到TypeScript (Migrating to TypeScript)

I used a Gatsby-TypeScript starter for this project because I had been meaning to learn TS. However, up until this point, I wasn't actually using TS. The files just had .ts or .tsx endings.

我在这个项目中使用了Gatsby-TypeScript入门程序，因为我一直想学习TS。 但是，到目前为止，我还没有真正使用TS。 文件仅以.ts或.tsx结尾。

Before the 30th, I had mentioned wanting to learn TS and @TejasKumar_ offered to teach me by migrating the mentored.dev codebase over to TS on a Google Hangouts livestream. This was one of the coolest moments of this project. And I learned a ton.

在30日之前，我曾提到过要学习TS， @ TejasKumar_愿意通过在Google Hangouts直播流中将mentored.dev代码库迁移到TS来教我。 这是该项目最酷的时刻之一。 我学到了很多。

---

---

2019年四月 (April 2019 )

添加“个人资料卡”组件 (Adding a "Profile Card" Component)

Next up after finishing the dialog part of the project, I decided to focus on the Dashboard - or the page after you logged in. I created a simple "Profile Card" that will eventually show your experience, any code-cash you have, etc.

在完成项目的对话框部分之后，接下来，我决定将重点放在仪表板-或登录后的页面上。我创建了一个简单的“配置文件卡”，最终将显示您的经验，所拥有的任何代码现金，等等。 。

设计仪表盘 (Designing the Dashboard)

In hindsight, I may have gotten ahead of myself here because I designed way more than I could implement in the MVP but at least it gave me an idea for the future. I first added it as hard-coded components but later commented out to maintain a healthy UX.

事后看来，我在这里可能会领先于我，因为我设计的方式超出了我在MVP中可以实现的范围，但至少它给了我关于未来的想法。 我首先将其添加为硬编码组件，但后来注释掉以保持健康的UX。

设计校园地图 (Designing the Campus Map)

This took way longer than I thought. I wanted it to feel like a university campus but drew heavily from Pallet Town in Pokemon. The completed version has more but at least I had something I could add to the Dashboard. I designed all of this in Figma and exported it as SVG. Working with SVGs in React has proven to be a delightful experience.

这花了比我想象的更长的时间。 我希望它看起来像一个大学校园，但是大量吸引了Pokemon的Pallet Town 。 完整的版本有更多，但至少我可以添加到仪表板中。 我在Figma中设计了所有这些内容，并将其导出为SVG。 在React中使用SVG已被证明是一种令人愉快的体验。

添加游戏音乐 (Adding Gameplay Music)

I never realized how hard it is to create or find music for a game. I ended up finding this amazing sound artist named Eric Matyas who makes music and sounds royalty-free. I wanted the audio to start automatically (because that's how most games do it) but unfortunately that is not accessible so it does not auto-play.

我从来没有意识到为游戏创建或查找音乐有多困难。 我最终找到了一位叫Eric Matyas的惊人声音艺术家，他的音乐和声音免版税。 我希望音频能够自动启动(因为这是大多数游戏的启动方式)，但是不幸的是无法访问，因此无法自动播放。

However, if you turn it on at the start menu or when you're playing the game, it adds a nice touch.

但是，如果您在开始菜单上或在玩游戏时将其打开，它会带来不错的感觉。

变更地图 (Changing Maps)

This has to be my favorite feature I added–being able to change the map. At first, I had no idea how I was going to do this, then I thought, "why not just swap the map with another map?"

这必须是我最喜欢的功能-能够更改地图。 起初，我不知道该怎么做，然后我想：“为什么不将地图换成另一张地图？”

So that's exactly what I did and it worked!

这就是我所做的，而且确实有效！

I extracted the parts of the map that were clickable (like the buildings) and made it so they open up different maps. I don't know how well my solution will scale but hey, it's working right now and that's what matters.

我提取了地图上可点击的部分(例如建筑物)，并将其打开，以便它们打开不同的地图。 我不知道我的解决方案可以扩展到什么程度，但是，嘿，它现在正在工作，这很重要。

课程页面 (Courses Page)

One of the other challenges I faced was figuring out where and how to show the courses (i.e. the dialog with the narrator).

我面临的其他挑战之一是弄清楚在哪里以及如何显示课程(即与叙述者的对话)。

Same thing–I struggled with this for a bit then decided, "Let's show it in an Overlay component!"

同样的事情–我为此挣扎了一下，然后决定，“让我们在叠加组件中展示它！”

That ended up working out well. Again, I don't know if that will scale well but it works for now.

最终效果很好。 再说一次，我不知道这种方法是否可以很好地扩展，但是目前仍然有效。

---

---

2019年五月 (May 2019)

In May, I took a little bit of a break. I was getting married so I wanted to focus on prepping for that rather than my game. I still had ideas for things here and there but I didn't put in nearly as much time as March or April.

五月份，我休息了一会儿。 我要结婚了，所以我想专注于为此做准备，而不是我的比赛。 我仍然对这里和那里的事情有想法，但是我花的时间不及3月或4月。

Even though it's difficult for me to take breaks and step away, I think it's healthy to go outside, change what you're doing, mediate, etc. As my mother always says,

即使我很难休息和走开，但我认为出门，改变您的工作，进行调解等都是健康的。

Everything in moderation.

一切都适度。

---

---

2019年六月 (June 2019)

Looking at the Dashboard I created, there was still so much left to do.

看看我创建的仪表板，还有很多事情要做。

I felt overwhelmed.

我感到不知所措。

"How am I going to finish all this?"

“我要如何完成所有这一切？”

Phoenix ReactJS聚会上的实现 (A Realization at the Phoenix ReactJS Meetup)

I hadn't been to the Phoenix ReactJS Meetup in a while. My two coworkers and I decided to go hear the lightning talks.

我有一段时间没去过Phoenix ReactJS聚会了。 我和我的两个同事决定去听闪电谈话。

Before the talks, we were crowded around a table, chatting about our side projects. I said I wanted to finish the MVP for mentored.dev by the end of the year.

会谈之前，我们挤在桌子旁，谈论我们的附属项目。 我说我想在年底之前完成mentored.dev的MVP。

"How much more do you have to finish?"

“你还需要完成多少？”

"A decent amount. Everything on the Dashboard page is hard-coded at the moment."

“数量可观。目前，“仪表板”页面上的所有内容均已硬编码。”

"Drop all that. Finish the core features and ship it."

“放弃所有这些。完成核心功能并发布。”

Those were the wise words from my coworkers. That's when I realized they were right. I decided to cut scope and implement two last features–the streak tracker and the lesson progress.

这些是我同事的明智话。 那时我才意识到他们是对的。 我决定缩小范围并实现最后两个功能-条纹跟踪器和课程进度。

The streak tracker logic was buggy when I first implemented it and didn't work at all. I wasn't sure if I should only increment the streak after 24-48 hours, or just do it by the day, or what. It seemed a lot more complicated than it should have been.

条纹追踪器逻辑在我第一次实施时是有问题的，根本没有用。 我不确定是否只应在24-48小时后增加连胜纪录，还是只在白天或其他时候进行。 似乎比原先要复杂得多。

I still don't know if I'm happy with the implementation. But again, it's out the door and the basic functionality works.

我仍然不知道我是否对实施感到满意。 但是，再次出现，基本功能正常运行。

The lesson progress (completed - 1/3) is also rudimentary at best. Again, my focus was to get it out the door. I'll style it in the future.

课程进度(完成-1/3)也是最基本的。 同样，我的重点是将其发布出去。 以后会样式。

装运它 (Ship It)

June 29th. The big day.

6月29日。 重要的一天。

As I say in the tweet thread,

正如我在推文主题中所说的，

...It's nowhere near complete but I think this is a good stopping point to share the MVP.

...距离完成还很遥远，但我认为这是分享MVP的一个好起点。

A while back, I read Lean Startup by Eric Ries. One thing that always stuck with me was something he said along the lines of, "You should be embarrassed putting your product out there. That's when you know it's an MVP."

前一段时间，我读了Eric Ries的《 精益创业》 。 他经常说的一句话是：“您应该尴尬地将产品放在那里。那是您知道它是MVP的时候。”

And that's how I felt! So much left to do. It's hard to even consider it a "game"–most real gamers probably wouldn't.

这就是我的感受！ 还有很多事情要做。 甚至很难将其视为“游戏”，大多数真正的游戏玩家可能不会。

But that's the point–it helped lift a burden off my shoulders and step back to hear what people think.

但这就是重点–它帮助我减轻了负担，退后一步听听人们的想法。

Most people I've talked to think it's a good start and a neat concept. They're excited to see where it goes.

我与大多数人交谈过，认为这是一个良好的开端，也是一个简洁的概念。 他们很高兴看到它的去向。

---

---

我认为有效 (What I Think Worked)

Reflecting on what helped me launch this MVP, a few things come to mind.

在反思帮助我启动此MVP的因素时，我想到了几件事。

问责制-朋友和Twitter社区 (Accountability - Friends & Twitter Community)

As we all know, it's very easy to silo yourself and work alone. This might work for some people and that's fine. But in my case, I think sharing this project with my coworkers held me more accountable than if I hadn't told anyone. Each week on Monday mornings, one of them would ask, "Hey Joe. Did you work on your game?"

众所周知，孤身作战和独自工作非常容易。 这可能对某些人有用，这很好。 但就我而言，我认为与我的同事分享这个项目比不告诉任何人更负责任。 每个星期一的早晨，其中一个会问：“嗨，乔。你在玩游戏吗？”

Their interest and support meant a lot to me. They wanted to see it succeed as much as I did. That kept me going.

他们的兴趣和支持对我来说意义重大。 他们希望看到它像我一样成功。 那让我继续前进。

The other part that kept me accountable was sharing it with people on Twitter. Sometimes people would comment and other times they wouldn't. Either way, people were following along. A few would DM me asking how it was coming along.

让我负责的另一部分是在Twitter上与人们共享。 有时人们会发表评论，而其他时候则不会。 无论哪种方式，人们都在跟随。 有些人会问我如何发展。

By sharing it in public, I felt a bit of pressure (in a good way) to finish it.

通过在公共场合共享它，我感到有一点压力(以一种很好的方式)来完成它。

使用GitHub项目，问题和里程碑 (Using GitHub Projects, Issues, and Milestones)

I treated this project like we treat client/company applications at work. I didn't use sprints per se but I did keep a list of tasks in a GitHub Project board and then select a few and create a milestone. This made the work feel more achievable and less overwhelming.

我像对待工作中的客户/公司应用程序一样对待这个项目。 我本身并没有使用sprint，但确实在GitHub Project板上保留了一系列任务，然后选择了一些任务并创建了一个里程碑。 这使工作更容易实现且不那么令人头疼。

I set up a staging environment at https://staging.mentored.dev (thanks to Netlify, this was straightforward). Then, each issue I finished, I submitted a PR to merge into staging. I reviewed and merged myself (yes, a bit silly, but good practice).

我在https://staging.mentored.dev上建立了一个暂存环境(感谢Netlify ，这很简单)。 然后，我完成的每个问题都提交了一份PR，以合并为阶段。 我审阅并合并了自己(是的，有点傻，但是很好的做法)。

Once a milestone was complete, I merged staging into master and created a new release. This process set me up for success. I kept milestones small (something I could finish in 1-3 weeks).

里程碑完成后 ，我将阶段合并到master中并创建了一个新版本。 这个过程使我成功。 我保持里程碑很小(可以在1-3周内完成)。

Having some type of project management in place for your side project I believe will help you reach the finish line sooner.

我相信对您的副项目有某种类型的项目管理，相信会帮助您更快地到达终点。

切割范围 (Cutting Scope)

I wouldn't have finished this MVP if I hadn't cut a lot of features. For instance, I really wanted to create a repository called "mentored-dev" after the user logged in and store the lesson progress there. But that was going to take more time than I anticipated so I cut it.

如果我不削减很多功能，我就不会完成这个MVP。 例如，我真的很想在用户登录后创建一个名为“ mentored-dev”的存储库，并将课程进度存储在那里。 但这将花费比我预期更多的时间，所以我削减了它。

Instead, I store the progress in localstorage. Yes, it's short-term but again, I had to cut scope to ship. If I hadn't, I wouldn't have finished this phase of the project.

相反，我将进度存储在本地存储中。 是的，这是短期的，但是我又不得不缩小范围。 如果没有的话，我就不会完成该项目的这一阶段。

---

---

总结思想 (Closing Thoughts)

Overall, I feel thankful for all the support. I'm proud of the small project I built and the feedback I have received, so thank you. As for the next steps, I've already created the next milestone. The main thing is to finish all the lessons for the basics of the command line and then share that to see what people think.

总体而言，我感谢所有支持。 我为我所建立的小项目和收到的反馈意见感到骄傲，非常感谢。 至于下一步，我已经创建了下一个里程碑 。 最主要的是完成所有关于命令行基础知识的课程，然后分享这些内容以了解人们的想法。

As far as actual features–I wouldn't promise anything but I'd love to add experience points (XP) which you accumulate based on your score in the lessons or how many times you take each lesson, how often you login, etc.

至于实际功能，我什么都不会保证，但我很乐意根据您在课程中的分数或每堂课的学习次数，登录频率等来添加经验值(XP)。

It would also be nice to give XP for doing things outside the game (i.e. writing a blog post, tweeting something you learned, contributing to open source, helping someone, etc). We'll see what happens though.

为XP提供游戏以外的其他功能(例如，撰写博客文章，发布您所学的内容，为开源做贡献，帮助某人等)，这也将是不错的选择。 我们将看到发生了什么。

Thank you for listening to the journey.

感谢您聆听旅程。

###

###

If you enjoyed this article or found it interesting, please share it with others or let me know on Twitter.

如果您喜欢本文或发现本文有趣，请与他人分享或在Twitter上告诉我。

To stay up to date on mentored.dev or other things I'm working on, I have a newsletter you can sign up for here.

要了解mentored.dev或我正在处理的其他事情，请阅读我的时事通讯，您可以在此处注册 。

Happy coding!

编码愉快！

翻译自: https://www.freecodecamp.org/news/how-i-built-shipped-my-first-mvp/

兔子运送胡萝卜