宝贝迈向您的第一个完整堆栈应用程序

Around Christmas 2018, I decided to take a two week vacation and finally build my first full-stack project, which I had vaguely conceptualized two years prior. After a lot of learning and bug squishing, I finally finished v1 of Cellar Scraper… a year later. Building your first app can be daunting, and I’m certainly not the first developer to massively underestimate how challenging a project will be. With that in mind, I thought I’d share some tips for making the process as painless as possible.

在2018年圣诞节前后，我决定休假两周，并最终建立了我的第一个全栈项目，两年前我对此进行了模糊的概念化设计。 经过大量学习和改进后，我终于在一年后完成了Cellar Scraper v1版。 构建您的第一个应用程序可能会令人生畏，而且我当然不是第一个大大低估项目挑战性的开发人员。 考虑到这一点，我认为我将分享一些使过程尽可能轻松的提示。

计划 (Plan)

Planning is essential for large projects and can also be a great tool to help keep you motivated. There are a few parts of planning that you may want to consider depending on the scale and complexity of your project.

规划对于大型项目至关重要，也可以成为帮助您保持动力的绝佳工具。 根据项目的规模和复杂性，您可能需要考虑规划的一些部分。

Before you even start coding, create a high-level doc explaining what your goals are for this project and what the end system might look like, including what tools you plan to use, where everything will be hosted, etc. Here is the doc that I worked from for my project.

之前，你甚至开始编码，建立一个高层次的文档，解释你的目标是什么，这个项目最终系统可能是什么样子，包括你打算使用，这里的一切将被托管，等什么工具下面是该文档我为我的项目工作。

Consider using different tools at different stages of the project. For example, when I first wrote my scraper, I found it easier to store the collected data in Google Sheets rather than having to set up a proper database, but I knew I couldn’t use that as a long-term solution because it would quickly hit row limits.

考虑在项目的不同阶段使用不同的工具。 例如，当我第一次编写刮板时，我发现将收集到的数据存储在Google表格中比创建一个合适的数据库更容易，但是我知道我不能将其用作长期解决方案，因为这样做会快速达到行数限制。

Almost as important as outlining what you will do is documenting what you won’t do in v1. Unless it’s essential to your app, leave off things that add a lot more complexity. For my app, I thought it would be really cool to use the data I’m collecting to offer predictions rather than just describing historical data. Having never made a predictive model before, I know it could take me months just to learn enough to implement that one feature.

与概述您将要做的事情一样重要的是，记录您在v1中不会做的事情。 除非它对您的应用程序至关重要，否则请不要添加那些会增加更多复杂性的东西。 对于我的应用程序，我认为使用我收集的数据提供预测而不是仅仅描述历史数据真的很酷。 以前从未建立过预测模型，所以我可能要花几个月的时间才能学到足够的知识来实现​​该功能。

By documenting what is outside the scope of what you’re working on for v1, you can keep yourself from going down a rabbit hole and cut down the time it takes you to have a minimum viable product. And since it’s written down, you won’t have to worry about forgetting it if you want to come back to it in a future iteration of the app.

通过记录超出v1工作范围的内容，您可以避免陷入困境，并减少了获得最低限度可行产品所需的时间。 而且由于它已被记录下来，因此如果您想在应用程序的未来版本中重新使用它，则不必担心会忘记它。

I also find it helpful to outline user stories. Rather than thinking in detail about the technical needs for the project, think about what the user will want to do. For example “user can sign up for email alerts” or “user can filter a dashboard to see high-level stats about a specific comedian.” If you’ve worked on any assignments for coding classes, you’ve probably noticed that they phrase the requirements like this, and it’s also a common practice in Agile companies. Of course, you’ll need to break out each user story into more detailed technical goals later, but it’s a good way to start segmenting your work (and depending on how eager you are to share your app with the world, you could potentially ship it with only a couple of user stories completed and add the others later).

我还发现概述用户故事很有帮助。 与其详细考虑项目的技术需求，不如考虑用户将要做什么。 例如，“用户可以注册电子邮件警报”或“用户可以过滤仪表板以查看有关特定喜剧演员的高级统计信息。” 如果您从事任何编码类的分配工作，您可能已经注意到他们用这种方式表达了要求，这在敏捷公司中也是一种普遍做法。 当然，您稍后需要将每个用户案例分解为更详细的技术目标，但这是开始细分您的工作的好方法(并且取决于您与世界分享您的应用程序的渴望程度，只需完成几个用户案例，然后再添加其他用户案例即可)。

When you’re ready to start coding, pick a user story and break it out into even more granular steps (e.g. for filtering a dashboard — I needed to populate a dropdown menu, make the selection trigger a GET request to the database, and update the charts based on the response from the request). I used a white board to diagram what the relevant features would look like and keep track of my to-do list for the features, but you could use an app or a notepad.

当您准备开始编码时，选择一个用户案例并将其分解为更详细的步骤(例如，过滤仪表板-我需要填充一个下拉菜单，使选择触发对数据库的GET请求，然后更新图表基于请求的响应)。 我使用白板来绘制相关功能的外观，并跟踪这些功能的任务清单，但是您可以使用应用程序或记事本。

Diagram of homepage and design options for a signup form

注册表单的首页和设计选项图

Diagram of dashboard and detailed to-do list

仪表板图和详细的工作清单

知道何时折叠 (Know when to fold ‘em)

I learned this one the hard way — don’t throw too much time at something that you’re not making any progress on. After I had a working scraper, I wanted to host it in Heroku so that I could schedule it to run every night. I spent most of my second week of vacation trying to get this to work, and every time I thought I had found the solution, it was another dead end. Eventually, I just gave up and figured out how to schedule the program locally in a couple of hours, and I leave my laptop open every night so it can run. If I ever have a ton of users relying on this, I’ll go back to researching this issue, but for now, I don’t think my mom will be upset if she misses an update one day a month.

我很难学到这一点-不要在没有任何进展的事情上花太多时间。 拥有可用的刮板之后，我想将其托管在Heroku中，以便可以安排它每晚运行。 我在假期的第二周中大部分时间都在努力使它正常工作，每当我以为自己找到了解决方案时，那又是死路一条。 最终，我只是放弃了，想出了如何在几个小时内在本地计划该程序的过程，并且我每天晚上将笔记本电脑保持打开状态以便可以运行。 如果我有大量的用户依赖于此，我将重新研究此问题，但就目前而言，如果我妈妈每月错过一天的更新，我认为她不会感到沮丧。

与人交谈！ (Talk to people!)

If you’re working on a solo project, get input from other people at the outset and intermittently throughout your work. Maybe they’ve seen a similar project that could be a useful blueprint, have suggestions for what functionality they would want to see as an end user, or can recommend some technology that you didn’t even know existed.

如果您正在做一个单独的项目，则一开始要从别人那里获得输入，并且要在整个工作中间歇地获取。 也许他们已经看过一个类似的项目，该项目可能是有用的蓝图，为他们希望作为最终用户看到哪些功能提供建议，或者可以推荐一些您甚至不知道的技术。

I was initially planning to use MongoDB and Node just because those were the tools FreeCodeCamp promoted when I first started learning web development (even though I had never used them). A former coworker suggested Flask instead of Node, and I was able to reference an old project he had worked on to see what the Flask routes should look like. Another friend took a look at an early iteration of my landing page and suggested some revisions to make it easier to interpret.

我最初打算使用MongoDB和Node只是因为这些是我第一次开始学习Web开发时FreeCodeCamp推广的工具(即使我从未使用过)。 一位前同事建议用Flask代替Node，而我能够参考他从事的一个旧项目，以查看Flask路线的外观。 另一个朋友查看了我的目标网页的早期版本，并提出了一些修改意见，以使其易于理解。

Note: you should specifically be talking to people to get ideas/feedback, not just a pat on the back.

注意：您应该特别与他人交谈，以获取想法/反馈，而不仅仅是拍拍背部。

善待自己 (Be kind to yourself)

Ok, this advice sounds like the kind of empty nonsense that you use to justify eating a dozen Krispy Kreme doughnuts in a weekend (not that I’ve ever done that). But it’s important to keep in mind that you’re a human who has a life outside of whatever app you’re working on.

好的，这条建议听起来像是一种空洞的废话，您可以用来证明在周末吃十几个Krispy Kreme甜甜圈(不是我做过的事情)。 但请务必记住，您是一个人，生活超出了您正在开发的任何应用程序。

I genuinely thought that within that two weeks (give or take a couple extra days) I could write a scraping tool, schedule it, and build a full-stack website to show cool D3 charts with dynamic filtering, despite the fact that I had never worked with schedulers or back-end technologies and had limited experience with D3. Once I missed that self-imposed deadline and was back to work, it was hard to make very much progress each week, and I quickly became disheartened.

我真的以为，在这两个星期内(给我或多花了几天的时间)，我可以编写一个抓取工具，安排它的时间，并建立一个完整的网站以显示带有动态过滤的很酷的D3图表，尽管我从来没有使用调度程序或后端技术，并且对D3的经验有限。 一旦我错过了自己设定的最后期限并重新开始工作，每周很难取得很大进步，我很快就感到沮丧。

If you’re setting your own deadlines, be exceedingly generous. Or consider not setting any deadline at all (if it’s a side project). Work on it when you have the energy, and acknowledge that you need time to decompress from work/school, hang out with friends and family, and enjoy your other hobbies.

如果您要设定自己的截止日期，请特别慷慨。 或者考虑根本不设置任何截止日期(如果这是附带项目)。 精力充沛时继续努力，并确认自己需要时间来减轻工作/学校的压力，与朋友和家人一起闲逛，并享受其他爱好。

Hopefully these tips help you have a better first project experience. Or feel free to be really contrary and do the opposite of everything I said and let me know how that goes — wing it, never give up, only share your ideas with your cat, push yourself. Honestly, that doesn’t sound so bad either. Maybe I have it all backwards.

希望这些技巧可以帮助您获得更好的首次项目经验。 或者，随意地做一个真正的对立，做我所说的一切相反的事情，然后让我知道它的发展过程—挥舞它，永不放弃，只与猫分享您的想法，推动自己。 老实说，这听起来也不错。 也许我全都倒退了。

Thanks for reading this far. Here’s a picture of my cat helping out with my project on the Fourth of July as a reward.

感谢您阅读本文。 这是我的猫在7月4日为我的项目提供帮助的照片，作为奖励。

翻译自: https://medium.com/swlh/baby-steps-to-your-first-full-stack-app-8a72f0ccf4f