项目使用ts辅助

by Jurn W

由Jurn W

我如何建立辅助项目并在第一周获得31,000名用户 (How I Built my Side Project and Got 31,000 Users the First Week)

I love building side-projects. Seeing your own ideas come to life is amazing.

我喜欢建立辅助项目。看到自己的想法变成现实，真是太神奇了。

Side-projects provide a creative outlet and are a great way to learn and experiment with new things.

附带项目提供了创造性的渠道，是学习和尝试新事物的好方法。

If your side-project takes off, it might even turn into a startup. Many well-known companies started off as side-projects — Twitter, Slack, GitHub, and Instagram to name a few.

如果您的副项目开始，甚至可能会变成一个启动。许多著名的公司都是从附属项目开始的，例如Twitter，Slack，GitHub和Instagram。

Recently, I launched a new side-project and was able to get 31,000 users in the first 7 days after launching.

最近，我启动了一个新的副项目，并在启动后的前7天获得了31,000个用户。

The website I built is called Screely. It allows you to instantly turn a screenshot into a beautiful design mockup, without the hassle of using Photoshop or Sketch templates.

我建立的网站称为Screely 。它使您可以立即将屏幕截图变成精美的设计模型，而无需使用Photoshop或Sketch模板。

In this article, I’ll tell you how I got the idea, how I built it, and how I managed to get 31,000 users in the first 7 days.

在本文中，我将告诉您我是如何得到这个主意，如何构建该主意的，以及在最初的7天中如何成功吸引31,000个用户。

寻找一个主意 (Finding an Idea)

The idea for Screely came from a group chat of designers and developers that share and discuss their projects. Often they share screenshots to ask for feedback or to show finished work.

Screely的想法来自设计师和开发人员的小组聊天，他们共享并讨论了他们的项目。他们通常会共享屏幕截图，以征求反馈或显示完成的作品。

But there was one person whose screenshots stood out. He shared beautiful images instead of plain screenshots like everyone else.

但是有一个人的屏幕截图很突出。他分享了精美的图片，而不是像其他人一样分享简单的屏幕截图。

They looked more like the designs you see on Dribbble or Behance.

它们看起来更像您在Dribbble或Behance上看到的设计。

It turned out he had made a custom template in Sketch to add these effects.

事实证明，他已经在Sketch中制作了一个自定义模板来添加这些效果。

I wanted to make my screenshots look similar. But I did not want to design my own templates and have to load every new screenshot into Sketch.

我想使屏幕截图看起来相似。但是我不想设计自己的模板，而不必将每个新的屏幕截图加载到Sketch中。

I knew about Carbon, a tool that instantly generates a nice image of your code, but I wanted something similar for my screenshots.

我知道Carbon可以立即生成您的代码的漂亮工具，但是我想要类似的截图。

I couldn’t find a website that did this, so I decided to build it myself.

我找不到能做到这一点的网站，所以我决定自己建立它。

定义最低可行产品(MVP) (Define your Minimum Viable Product (MVP))

The first thing I do when I start working on a new product is to define an MVP.

开始开发新产品时，我要做的第一件事是定义MVP。

There are a few different definitions of what an MVP is. Usually, it’s described as a product with the smallest number of features that still solves the problem.

关于什么是MVP，有几种不同的定义。通常，它被描述为功能最少的产品，仍然可以解决问题。

Limiting yourself to building only an MVP is very important for two reasons.

由于两个原因，将自己限制为仅构建MVP非常重要。

First, you prevent yourself from spending lots of time building a product without validating the idea and knowing if it’s something others want to use.

首先，您要避免花费大量时间来构建产品，而不必验证想法并知道其他人是否想使用它。

Second, you prevent yourself from endlessly adding more features and tweaking your product.

其次，您要防止自己无休止地添加更多功能并调整产品。

These aren’t bad things, of course. But this is a dangerous trap that can lead to working on your product for months or years before ever releasing it.

当然，这些不是坏事。但是，这是一个危险的陷阱，可能导致在发布产品之前，要花费数月或数年的时间才能对其进行操作。

“In product development, the minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future development” - Wikipedia

“在产品开发中，最低可行产品(MVP)是具有足够功能以满足早期客户并为未来开发提供反馈的产品” -Wikipedia

The faster you ship your MVP, the faster you can validate your idea and improve your MVP with feedback from users.

您发布MVP的速度越快，您就可以越快地验证您的想法并通过用户反馈改善MVP。

For Screely, I defined the MVP as:

对于Screely，我将MVP定义为：

A user should be able to pick a local image file (jpg, png)
用户应该能够选择本地图像文件(jpg，png)
The system should generate an image with a mockup window, box shadow, and a background color
系统应生成具有模型窗口，框阴影和背景色的图像
A user should be able to change the background color
用户应该能够更改背景色
A user should be able to download the generated image
用户应该能够下载生成的图像

Of course there were plenty of other features that I would’ve liked to add: drag-and-drop an image, gradient backgrounds, or being able to tweet the generated image.

当然，我还想添加许多其他功能：拖放图像，渐变背景或能够鸣叫生成的图像。

But none of these are part of the core functionality. And as I said before, it’s important to limit yourself for the MVP, or you start getting into this endless feature sprawl.

但是这些都不是核心功能的一部分。正如我之前说过的，限制自己成为MVP非常重要，否则您将开始陷入无尽的功能蔓延。

制备 (Preparation)

Before firing up my text editor, I explored potential technical solutions and their pros and cons.

在启动我的文本编辑器之前，我探讨了潜在的技术解决方案及其优点和缺点。

After doing some research, I considered 3 different options:

经过研究后，我考虑了3种不同的选择：

Use an HTML canvas element and JavaScript
使用HTML canvas元素和JavaScript
Use regular DOM elements and use pure HTML and CSS
使用常规DOM元素，并使用纯HTML和CSS
Generate the image server-side and return the end result
生成图像服务器端并返回最终结果

Each option had its pros and cons.

每个选项都有其优点和缺点。

For example, rendering the image server-side would avoid cross-browser compatibility issues. But as a user, I would not want my screenshots being sent to a server since I don’t know if they are saved or used in any way.

例如，在服务器端渲染图像将避免跨浏览器兼容性问题。但是作为用户，我不希望将屏幕截图发送到服务器，因为我不知道屏幕截图是否被保存或以任何方式使用。

It would also require running a server, whereas I could host a pure front-end solution for free on Netlify. So option three was out.

它还需要运行服务器，而我可以在Netlify上免费托管一个纯前端解决方案。所以选择三了。

With the first two options left. I finally decided on using the HTML <canvas> element and painting on the canvas with plain JavaScript. Additionally, because I hadn’t used the HTML canvas element before, and side-projects are a great way to learn new things, I was inclined to go down that path. ?

剩下前两个选项。我最终决定使用HTML <canv如>的Elemen 吨和PA inting与普通JavaScript在画布上。另外，由于我以前从未使用过HTML canvas元素，并且附带项目是学习新事物的好方法，所以我倾向于走这条路。？

让我们开始建设 (Let’s Start Building)

The most exciting part of any project.

任何项目中最令人兴奋的部分。

I immediately started with the basic functionality. I did not spend any time on a name/domain, design, logo, or setting up social media. You can do these later.

我立即开始使用基本功能。我没有花时间在名称/域名，设计，徽标或设置社交媒体上。您可以稍后再做。

1 hour into the project I had the very basics working.

在项目开始1个小时后，我就开始了基础工作。

A placeholder name - sexy screenshots (it’s what we called these images in the group chat)
占位符名称-性感的屏幕截图(这就是我们在群聊中称为这些图像的名称)
A file input
文件输入
A generated <canvas> element with the image I select with a colored background and with the added fake window

生成的<canv as>元素，带有我选择的带有彩色背景的图像以及添加的假窗口

I hardcoded everything, and it only worked with one (specific) screenshot. You could not change the background color, or use a screenshot with different image dimensions.

我对所有内容进行了硬编码，并且仅使用了一个(特定的)屏幕截图。您无法更改背景颜色，也不能使用具有不同图像尺寸的屏幕截图。

I improved the product from there, starting with the ability to handle different size screenshots.

我从那里开始改进产品，从能够处理不同大小的屏幕截图开始。

I also started adding the other features I had defined for the MVP, like adding a color picker to change the background color and a download button for the generated image.

我还开始添加我为MVP定义的其他功能，例如添加颜色选择器以更改背景颜色和生成图像的下载按钮。

Now that all the MVP requirements I set in the beginning were met, it was time to launch (yes, already)!

既然我一开始就设定了所有MVP要求，那么现在该发布了(是的)！

准备发射 (Preparing for Launch)

At this point my MVP was nothing more than a placeholder title, an HTML button, and a small list of things I wanted to add after launching the MVP.

在这一点上，我的MVP只是一个占位符标题，一个HTML按钮以及一小部分我想在启动MVP之后添加的内容。

After picking a name (Screely), buying the .com domain, and making a landing page, this was the result:

在选择一个名称(Screely)，购买.com域并创建登录页面之后，结果如下：

I also added an e-mail opt-in and a link to a Twitter account to make sure I could stay in touch with users after the launch.

我还添加了一个电子邮件接收选项和一个Twitter帐户的链接，以确保启动后我可以与用户保持联系。

Another thing I added was a chat button on the right bottom so users could easily talk to me. I received valuable feedback on the product, bug reports, and feature suggestions there.

我添加的另一件事是右下角的聊天按钮，以便用户可以轻松地与我交谈。我收到了有关该产品，错误报告和功能建议的宝贵反馈。

There are many options you can use to embed a chat on your product. I used Drift but you can also use alternatives such as Intercom or Olark.

您可以使用许多选项在产品上嵌入聊天。我用过Drift，但您也可以使用对讲机或Olark等替代产品。

公开构建 (Build in the open)

A quick side-note about launching your project: launching should not be a one day event where you share your project and hope for the best.

关于启动项目的简短说明： 启动不是一天的活动，您可以共享项目并希望获得最好的结果。

Your “launch” starts the day you start working on your idea. You should start promoting your project from day one.

您的“启动”从您开始研究想法的那一天开始。您应该从第一天开始推广您的项目。

When I started working on Screely, I tweeted about my progress just one hour after starting. I also tweeted regular updates as I built the MVP.

当我开始研究Screely时，在开始仅一个小时后就发布了自己的进度推文。建立MVP时，我还发布了定期更新。

This helps spread awareness about your new product, gets people curious, and helps you get feedback.

这有助于传播对您的新产品的认识，引起人们的好奇心，并帮助您获得反馈。

Don’t be embarrassed about showing an unfinished product. People love seeing others build cool things and understand that it takes time to build cool projects.

不要为展示未完成的产品而感到尴尬。人们喜欢看到别人在建造有趣的东西，并且明白建造有趣的项目需要时间。

发射 (Launch)

I posted Screely to Product Hunt, Hacker News, Reddit, Designer News and a few other websites.

我将Screely发布到了Product Hunt，Hacker News，Reddit，Designer News和其他一些网站。

I won’t go very in-depth in where to post your product and best practices for each platform, as that’s a blog post on it’s own.

对于每个平台的产品发布和最佳实践，我不会做得很深入，因为这是一篇博客文章。

The most important thing is that you reach your target audience. For Screely, that was mainly designers, developers, and technical writers.

最重要的是，您可以覆盖目标受众。对于Screely，主要是设计师，开发人员和技术作家。

产品搜寻 (Product Hunt)

The Product Hunt launch went extremely well and exceeded all my expectations. Screely ended up becoming the #1 product of the day with 1032 upvotes.

Product Hunt的发布非常顺利，超出了我的所有期望。 Screely最终以1032次投票成为当天的第一名产品。

Screely was #1 product of the day, #1 product of the week and #4 product of the month. This meant it would also appear in Product Hunt’s daily and weekly newsletter.

Screely是当日排名第一的产品，当周排名第一的产品和当月排名第四的产品。这意味着它也将出现在Product Hunt的每日和每周新闻通讯中。

In total, Product Hunt brought in close to 11k visitors in the first week!

在第一周，Product Hunt总共吸引了近11000名访客！

黑客新闻 (Hacker News)

Screely started quite slow but after a few hours it suddenly jumped to the front page of Hacker News. Even though Screely’s highest position was ‘only’ #15, it still resulted in a lot of traffic.

Screely起步很慢，但几个小时后突然跳到Hacker News的首页。即使Screely的最高位置是“仅”第15位，它仍然带来了大量的流量。

I estimate that 5 -10k users came from Hacker News.

我估计有5个-10k用户来自Hacker News。

It’s unclear exactly how many users came from HN as it does not add a ?ref= parameter to the URL. I have included a more detailed look at traffic sources later in this article.

目前尚不清楚到底有多少用户来自HN，因为它没有向URL添加?ref=参数。我将在本文的后面部分详细介绍流量来源。

设计师新闻 (Designer News)

The third most successful platform (in terms of traffic numbers) was designernews.com.

排名第三的成功平台(按点击量计算)是designernews.com。

Screely got to #2 on the front page and this resulted in just under 3k new users.

严格地在首页上排名第二，这导致了不到3000名新用户。

病毒式传播 (Going Viral)

I had posted Screely on many other places, like Reddit and Indie Hackers, but the previous three were by far the most successful.

我曾在Reddit和Indie Hackers等许多其他地方发布过Screely，但到目前为止，前三个是最成功的。

A cool side-effect of doing well on places like Hacker News and Product Hunt is that your product shows up on many other places — tweets, newsletters, smaller blogs, aggregators and more.

在Hacker News和Product Hunt等地方做得很好的一个很酷的副作用是，您的产品会出现在许多其他地方，例如推文，新闻通讯，小型博客，聚合器等等。

For example, Screely was mentioned by CSS tricks to their 360k followers.

例如，CSS技巧向他们的360k关注者提到了Screely。

Screely was also included in Codrops Collective #416, a popular newsletter among designers.

Screely还被列入Codrops Collective＃416 (设计师中颇受欢迎的时事通讯)中。

In total, Screely had just under 31,000 users in the very first week.

在第一周，Screely总共拥有不到31,000个用户。

通过用户反馈进行改进 (Improve with User Feedback)

Given the success of the launch, I can confidently say that the idea has been validated. Now I know it’s worth it to dedicate more time to this project.

鉴于发布会的成功，我可以自信地说这个想法已经得到验证。现在我知道为这个项目花更多的时间是值得的。

Remember the chat feature I implemented to prepare for the launch of Screely? It was filled with feature requests and feedback by users of Screely.

还记得我为准备Screely推出而实现的聊天功能吗？ Screely用户充满了功能请求和反馈。

Now that you know exactly what your users want, it’s easy to know what features to work on and what to prioritise.

既然您已经确切了解了用户的需求，那么就很容易知道要使用哪些功能以及优先考虑哪些功能。

For example, many users wanted to be able to drag-and-drop their image into Screely so I added that feature first.

例如，许多用户希望能够将其图像拖放到Screely中，因此我首先添加了该功能。

Another often requested feature was to automatically match the background color with the image. So you immediately have a background that suits your screenshot.

另一个经常要求的功能是自动将背景色与图像进行匹配。因此，您立即拥有适合您的屏幕截图的背景。

I added a script that analyzes the image, generates a color palette and picks the most dominant color for the background.

我添加了一个脚本，用于分析图像，生成调色板并为背景选择最主要的颜色。

Apart from adding new features and fixing bugs, I also spend time polishing up the design.

除了添加新功能和修复错误外，我还花时间完善了设计。

If you want to get updates on Screely. Follow @getScreely on Twitter, or sign up for the monthly product update by email on screely.com.

如果要在Screely上获取更新。 在Twitter上关注@getScreely ，或在screely.com上通过电子邮件注册产品的每月更新。

运输辅助项目的建议(更快) (Advice for Shipping Your Side-projects (faster))

Keep it simple: Keep your MVP as limited as possible. Use programming languages you are familiar with instead of whatever framework is trendy. The more complex your project becomes, the longer it takes to ship and get your first users.

保持简单：尽可能限制您的MVP。使用您熟悉的编程语言，而不要使用任何流行的框架。您的项目越复杂，运送和获得第一个用户所需的时间就越长。
Ship everyday: Keeping the momentum going in your side-projects is super important. Try to work on your project every single day. Refactor a single function or fix a tiny CSS issue. It doesn’t matter how small the task you complete is, keep shipping! If you skip a day (it happens), make it a top priority to get something, no matter how small, done the next day.

每天发货：在副项目中保持发展势头非常重要。每天尝试处理您的项目。重构单个功能或修复微小CSS问题。无论完成的任务有多小，都请继续发货！如果您跳过一天(它确实发生了)，那么不管有多小，第二天都要把它放在第一位。
Take shortcuts: Whenever possible, try to find shortcuts to ship your product faster. If you can find a good open-source solution for a problem, use that instead of writing your own from scratch. Use tools like Netlify to host and deploy instead of setting up your own server.

取得捷径：只要有可能，请尝试寻找捷径以更快地运送产品。如果您可以找到一个很好的开源解决方案，请使用它，而不要从头开始编写自己的解决方案。使用Netlify之类的工具托管和部署，而不是设置自己的服务器。
Launch before you think you are ready: Don’t get caught up in perfecting your product. You can get away with a lot more than you think.

在您准备就绪之前启动：不要陷入完善产品的陷阱。您可以获得的收益远远超出您的想象。
Programming is a tool to get your idea into the world: Don’t over-engineer your side-project. Your users don’t care about your tech stack, what matters to them is the benefit they get from using your product. They don’t care if you are using Docker or React, they focus on what problem your product can solve for them.

编程是一种使您的想法广为人知的工具：不要过度设计您的副项目。用户并不关心您的技术堆栈，对他们而言重要的是，他们从使用您的产品中获得的收益。他们不在乎您使用的是Docker还是React，而是专注于您的产品可以为他们解决的问题。
You know enough: Many people that are learning to code postpone working on their own projects. They often think they need to follow more tutorials, buy more courses, and read more books. Don’t keep learning forever, start building! Even seasoned developers still look up ‘simple’ things like how to remove an element from an array.

您已经知道：许多正在学习编码的人会推迟在自己的项目上工作。他们通常认为他们需要遵循更多的教程，购买更多的课程以及的书。不要永远学习，开始建设！即使是经验丰富的开发人员仍然会查找“简单”的东西，例如如何从数组中删除元素。

Good luck and have fun!

祝好运并玩得开心点！

If you found this article helpful, give me some claps. ?

如果您发现本文有帮助，请给我一些鼓掌。？

I’m a Dutch freelance UI/UX designer and Front-end Developer. I also run some successful affiliate websites and build side-projects for fun and profit.

我是荷兰自由UI / UX设计师和前端开发人员。我还经营一些成功的会员网站，并建立附带项目以获得乐趣和利润。

If you want to know what I’m currently working on, follow me on Twitter or check out my blog.

如果您想知道我目前正在做什么，请在Twitter上关注我或查看我的博客。

Be sure to tweet at me with any questions you have, I’m always happy to help!

如有任何疑问，请务必向我发送推特，我随时乐意为您服务！

翻译自: https://www.freecodecamp.org/news/how-i-built-my-side-project-and-got-31-000-users-the-first-week-d9053bae5302/