少儿编程真是荒谬

by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

建立第一个Web应用程序的6个荒谬想法 (6 Absurd Ideas For Building Your First Web App)

需要一些想法来构建简单的Web应用程序？ 这6个示例将帮助您练习所有关键技能，并从中获得乐趣！ (Need a few ideas for building a simple web app? These 6 examples will help you practice all the key skills and have fun doing it!)

Okay, you have already learned front-end web development, and now you are looking to flex your developer muscles on the next big challenge: full-stack web apps. You probably have many ambitious project ideas rolling around in your head. But how can you determine which are reasonable with your current skill set?

好的，您已经学习了前端Web开发，现在您正在寻找开发人员应对下一个重大挑战的能力：全栈Web应用程序。 您可能会想到许多雄心勃勃的项目构想。 但是，如何确定当前技能组中哪些是合理的呢？

Here are 6 unusual ideas for your first web app, which will help you gain experience with all the basic concepts of full-stack web development. At the end, you will have a distinctive project that you can include in your portfolio. It will help you stand out compared to all the boring projects that everybody else is building.

对于您的第一个Web应用程序，这里有6个不寻常的想法，它们将帮助您获得有关全栈Web开发的所有基本概念的经验。 最后，您将有一个与众不同的项目，可以将其包含在投资组合中。 与其他所有人正在建设的所有无聊项目相比，它可以帮助您脱颖而出。

Note: if you are still learning HTML/CSS/JS, I put together 8 ideas to practice front-end only.

注意：如果您仍在学习HTML / CSS / JS，我整理了8个想法来仅练习前端。

1.快餐大师 (1. FastFood Guru)

The Idea: Yelp is a pretty popular source of restaurant reviews. However, most people use it to learn about restaurants they have never heard about before. What about massive fast-food chains like McDonald’s and Burger King? Plenty of people go to these, but somehow, they are not a popular review candidate.

想法： Yelp是很受欢迎的餐厅评论来源。 但是，大多数人使用它来了解他们以前从未听说过的餐馆。 像麦当劳和汉堡王这样的大型快餐连锁店呢？ 有很多人参加这些会议，但是以某种方式，他们不是受欢迎的评论候选人。

Yes, you might tell me that every menu is pretty much the same, and the food always tastes the same as well. However, if you visited many of these chain “restaurants”, you know there are a few things that differ wildly.

是的，您可能会告诉我，每个菜单几乎都相同，而且食物的口味也总是相同的。 但是，如果您访问了许多此类连锁“餐厅”，就会知道其中有些事情大相径庭。

Which one has the most luxurious bathroom? Which ones mark up their menu prices? Which ones have funny drunks at 1AM in the morning? This would be a review site for those fast-food chains that are supposedly consistent.

哪间浴室最豪华？ 哪些加价菜单价格？ 哪些人早上1点有有趣的醉酒？ 对于那些据说是一致的快餐连锁店来说，这将是一个审查站点。

Type of Site: Reviews

网站类型：评论

Key Functions:

主要功能：

• Ability to create an account with a picture, username and location
  能够创建带有图片，用户名和位置的帐户
• Use Google Maps to let a user pick out a specific restaurant, either through searching a location on the map or through typing in a name and choosing from a list (typeahead)
  使用Google Maps，通过搜索地图上的位置或输入名称并从列表中选择(提前输入)，让用户选择特定的餐厅
• Allow the user to write a review
  允许用户撰写评论
• Allow user to rate the following fast-food specific topics on 1–5 scale: Bathroom Quality, Staff, Cleanliness, Drive-thru Sassy Level, Delivery Speed
  允许用户以1-5等级对以下快餐特定主题进行评分：浴室质量，员工，清洁度，直通车等级，运送速度
• Ability to add pictures to the review
  可以将图片添加到评论中
• Responsive design down to mobile
  快速响应设计到移动

Key Feature Decisions:

关键功能决策：

• Is this a serious website, or is it really about the funny things that can happen at a fast-food joint?
  这是一个严肃的网站，还是关于快餐店可能发生的有趣事情？
• Who will be using this site? People on roadtrips trying to choose a lunch place? Frequent fast-food visitors looking to share their experience?
  谁将使用此网站？ 人们在旅途中试图选择午餐地点？ 经常有快餐游客想分享他们的经验吗？
• Should this be a community where people frequently check the site for funny stories and participate? Or more one-time, infrequent use?
  这是否应该是一个人们经常在网站上查找有趣故事并参与其中的社区？ 或更多次一次性使用？
• What social media integration might help spread stories/reviews?
  哪些社交媒体集成可以帮助传播故事/评论？

What You Will Learn: User systems and picture storage are two major challenges. This will be a good chance to implement a basic version of each. Also, if you choose to make this a humor-oriented site, how can your design influence an appropriate level of humor that is not nasty? If you want to gain a following, this will be a good test to see where you might be able to source current fast food reviews to seed your database and create immediate content.

您将学到什么：用户系统和图片存储是两个主要挑战。 这将是实现每个基本版本的好机会。 另外，如果您选择将其设为幽默导向的网站，那么您的设计如何影响不讨厌的幽默度？ 如果您想获得更多关注，这将是一个很好的测试，以查看您可以在哪里找到最新的快餐评论，以播种数据库并创建即时内容。

2. GrillBer (2. GrillBer)

The Idea: Yep, you guessed it. Uber for grills. If you live in a city, you may not have the space for a grill or a safe place to lock it up. For example, if you live on the 20th floor of an apartment building, where can you put your grill?

想法：是的 ，你猜对了。 烧烤用的Uber。 如果您住在城市，则可能没有足够的空间放置烧烤架或安全的地方来将其锁起来。 例如，如果您住在公寓大楼20楼，可以在哪里放置烤架？

Problem solved with GrillBer, a delivery service for grill rentals. This will allow customers to put on a cookout with none of the logistics. In fact, you might want to include a roll of turf and chairs so your customers can create a pop-up park in a parking space!

使用GrillBer解决了问题，这是烧烤炉出租的送货服务。 这将使客户无需进行任何物流就可以进行野炊。 实际上，您可能希望包括一卷草皮和椅子，以便您的客户可以在停车位上创建一个弹出式公园 ！

Type of Site: Delivery/Logistics

网站类型：交付/物流

Key Functions:

主要功能：

• Form that allows a user to book a grill for a certain number of hours at a certain hourly rate, and stores that in a database. User must input their name, address etc.
  允许用户以特定的小时价格预订特定小时数的格栅并将其存储在数据库中的表格。 用户必须输入他们的姓名，地址等。

• Calendar that shows different times that grills are available. Check out Zipcar for an example of this.

  显示可用烧烤时间的日历。 查看Zipcar的示例。

• Product details page that shows the grill and tells you more about the different add-ons, like chairs and turf.
  产品详细信息页面显示了烤架，并向您详细介绍了各种不同的附件，例如椅子和草皮。
• Social media integration with Instagram that shows all the awesome cookouts people have held with GrillBer.
  与Instagram社交媒体集成，显示了人们与GrillBer进行的所有很棒的野餐。

• A checkout process and payments system with Stripe so users can complete the process.

  带有Stripe的结帐流程和付款系统，因此用户可以完成该流程。

Key Feature Decisions:

关键功能决策：

• This does not need to be visually stimulating like Uber. But does it even need a cool interactive calendar? Or can you get away with a basic form like an e-commerce site?
  不需要像Uber那样在视觉上刺激。 但是，它甚至需要很酷的交互式日历吗？ 还是可以摆脱像电子商务网站这样的基本形式？
• How many pains in the grilling process will you offer to address? Do you expect the user to clean the grill? Are these the cheaper but slower charcoal grills, or more expensive gas grills?
  您要解决的烧烤过程中有多少痛苦？ 您希望用户清洁格栅吗？ 这些是便宜但慢速的木炭烧烤炉，还是更昂贵的燃气烧烤炉？
• Cookouts are meant to be a low-stress experience. If people have to hurry to cook their food, it will not be a great experience. How can you use copy and microcopy to clearly state how this will not be a stressful process?
  野炊本来是一种低压力的体验。 如果人们不得不急于烹饪食物，那将不是一个很好的经历。 您如何使用复印和显微镜清楚地说明这将不会带来压力？
• What logic do you need to have on your back-end for the booking system? Do you need to allow a half-hour before and after for grill delivery?
  您需要在预订系统的后端使用什么逻辑？ 您是否需要在烧烤之前和之后的半小时内送餐？

What You Will Learn: How to coordinate the front-end and back-end of a booking system. Think about how many sites do this. Restaurant booking sites. Conference room booking sites. There are many more. This is a very common pattern, and a great accomplishment to have on your resume for discussion.

您将学到什么：如何协调预订系统的前端和后端。 考虑一下有多少个站点这样做。 餐厅预订网站。 会议室预订网站。 还有更多。 这是一种非常常见的模式，也是简历中讨论的一项伟大成就。

3. NetworkTap (3. NetworkTap)

The Idea: Social media is an increasingly popular advertisement strategy. Companies use Twitter, Facebook, LinkedIn and Pinterest to reach customers in the middle of browsing. However, there is one untapped space: the user’s actual post.

想法：社交媒体是一种越来越流行的广告策略。 公司使用Twitter，Facebook，LinkedIn和Pinterest在浏览过程中吸引客户。 但是，有一个未开发的空间：用户的实际帖子。

Advertisers love word of mouth marketing, and having users post the actual ads themselves would be a great way to confuse others in their newsfeed!

广告客户喜欢口口相传的营销方式，让用户自己发布实际广告将是在新闻源中混淆其他人的好方法！

This site would allow users that want to make a little extra cash to volunteer information on themselves, and advertisers to briefly hijack a post with an ad. Users get paid on a per-view basis or another method. Now, ads can reach eyeballs in new and innovative ways!

该网站允许希望赚取额外现金的用户自愿提供有关自己的信息，而广告客户则可以利用广告短暂劫持帖子。 用户按观看次数或其他方式获得报酬。 现在，广告可以以新颖的方式吸引眼球！

Type of Site: Marketplace

网站类型：市场

Key Functions:

主要功能：

• Individual users must be able to create an account with info like: location, age, interests, and family status so advertisers can pick who they want to post about their product
  单个用户必须能够创建一个帐户，其中包含以下信息：位置，年龄，兴趣和家庭状况，以便广告客户可以选择要为其产品发布信息的人
• Advertisers must be able to create an account and post about their brand identity, and who they are looking to reach.
  广告商必须能够创建一个帐户并发布有关其品牌标识以及他们希望与谁联系的信息。
• Each user must be able to reach out to an advertiser to talk about their interest in doing a post.
  每个用户都必须能够联系广告商，以谈论他们对发布帖子的兴趣。
• Each advertiser must be able to search all users by criteria like age, gender etc. and send a mass message to their chosen demographic about interest in doing an ad.
  每个广告客户都必须能够按年龄，性别等条件搜索所有用户，并向他们选择的受众群体发送关于制作广告的兴趣的大量信息。
• Users and advertisers must agree on a payment method: pay-per-like, pay-per-view, pay-per-click or other.
  用户和广告商必须就一种付款方式达成一致：按次付费，按次付费，按点击付费或其他方式。

Key Feature Decisions:

关键功能决策：

• Search functionality will be a big deal for the advertisers. How do you represent each search result? May want to use data visualization like Google Analytics.
  搜索功能对于广告客户来说将是一件大事。 您如何代表每个搜索结果？ 可能想使用数据可视化，例如Google Analytics(分析)。
• How can you get the most info out of users? Integrating with a social media account? Perhaps paying them more based on how much info they offer?
  您如何从用户那里获得最多的信息？ 与社交媒体帐户整合？ 也许根据他们提供多少信息向他们支付更多？
• What power dynamics are there between advertisers and users? Do users get input on the ad text and picture? Or do advertisers make all the decisions on what gets shown?
  广告商和用户之间存在什么力量动态关系？ 用户是否获得广告文字和图片的输入？ 还是广告商就显示的内容做出所有决定？
• People will not want $10 a week out of this. They will probably want more like $100 at minimum. How can you balance this with the number of ads they will likely need to show to get there? Nobody wants to completely pollute their news feed.
  人们不会想要每周10美元。 他们可能会希望至少获得$ 100。 您如何在达到该目标所需的广告数量之间取得平衡？ 没有人愿意完全污染他们的新闻提要。
• How sly do you want the ads to be? Should it be obvious, or should it feel more like an authentic post?
  您希望广告表现如何？ 应该是显而易见的，还是应该更像是一个真实的帖子？

What You Will Learn: Marketplaces are another very popular type of site. This one will let you create two types of accounts, which is a common structure. Messaging within a site will be a good skill to learn with this one. Check out Fiverr for an example.

您将学到什么：市场是另一种非常流行的网站。 这将使您创建两种类型的帐户，这是一种常见的结构。 站点内的消息传递将是学习该消息的一项很好的技能。 查看Fiverr为例。

4.修理我的船 (4. Repair My ‘Ship)

The Idea: This is short for “Repair My Relationship”. It is a forum where users can post about their relationship issues, and others can chime in with advice on how to fix their problems.

想法：这是“修复我的关系”的缩写。 这是一个论坛，用户可以在该论坛上发布有关其关系问题的信息，而其他用户则可以提出有关如何解决其问题的建议。

If you have experienced the fine communities on sites like 4chan, Reddit or Bodybuilding, then you know that there are plenty of people willing to donate a few minutes of time to help out.

如果您在4chan，Reddit或Bodybuilding等网站上体验过优质社区，那么您就会知道有很多人愿意捐赠几分钟的时间来提供帮助。

Type of Site: Forum

网站类型：论坛

Key Functions:

主要功能：

• A post/comment system similar to Reddit or Quora.
  与Reddit或Quora类似的发布/评论系统。
• An upvote system for both posts and comments
  帖子和评论的投票系统
• An opportunity for the user to post what they actually tried with their significant other, and what results ensued
  用户有机会发布与其他重要用户实际尝试过的内容以及随后产生的结果
• A badges or karma system to reward frequently upvoted users
  徽章或业力系统来奖励经常被推荐的用户
• A user account system for those that want to comment or post, similar to Reddit
  想要发表评论或发表评论的用户帐户系统，类似于Reddit

Key Feature Decisions:

关键功能决策：

• Should this be more anonymized like Reddit, or tied to a social media account like Quora for credibility?
  是应该像Reddit这样更匿名化，还是应该与Quora这样的社交媒体帐户绑定以提高信誉？
• There will be plenty of trolls on this site. How do you deal with it?
  这个网站上会有很多巨魔。 你如何解决？
• Should this strictly relate to romantic relationships? Or friendships as well?
  这应该与恋爱关系严格相关吗？ 还是友谊？
• How can you use the badge system to motivate especially good commenters to come back?
  您如何使用徽章系统来激发特别好的评论员回来？

What You Will Learn: How to build a forum! Also, there are plenty of people out there that are willing to donate a few minutes of their time to help Internet strangers in need. Seriously. Your main challenge is making sure these helpful users feel rewarded for their efforts, because that will motivate them to come back.

您将学到什么：如何建立论坛！ 此外，还有很多人愿意花几分钟的时间来帮助有需要的互联网陌生人。 说真的 您的主要挑战是确保这些有用的用户因自己的努力而感到收获，因为这将激励他们回来。

5. CatBattles (5. CatBattles)

The Idea: Cat videos are… incredibly popular. One particularly distinctive form of cat video is the amateur battle, where two cats duke it out with minimal consequences, but plenty of meowing and wrestling.

想法： Cat视频非常受欢迎。 猫录像的一种特别独特的形式是业余战斗，在这场战斗中，两只猫以最小的后果杜绝了录像，但猫叫声和摔跤声却很高。

This site would allow users to post videos of their cats wrestling, and allow viewers to offer funny comments. This site would also NOT allow professional cat battles, or fights with gruesome ends. It is strictly for casual entertainment, not animal rights violations.

该网站将允许用户发布他们的猫摔跤视频，并允许观众提供有趣的评论。 该站点也不允许进行专业的猫之争或残酷的战斗。 它严格用于休闲娱乐，不侵犯动物权利。

Type of Site: Video Content

网站类型：视频内容

Key Functions:

主要功能：

• Anybody can upload a cat video
  任何人都可以上传猫视频
• Users can create an anonymous account and add comments.
  用户可以创建一个匿名帐户并添加评论。
• A screenshot of each cat that the user clicks on to guess the victor before the fight starts
  用户在战斗开始之前单击以猜测获胜者的每只猫的屏幕截图
• Upvotes for best videos and best comments
  投票获得最佳视频和最佳评论
• The ability to report malicious videos, or ones that seem to be staged
  报告恶意视频或似乎已上演的视频的能力

Key Feature Decisions:

关键功能决策：

• Why would somebody post their cat fight video here rather than Reddit or YouTube? You need to add a couple features to distinguish it from these sites.
  为什么有人在这里发布他们的战斗视频而不是Reddit或YouTube？ 您需要添加一些功能以将其与这些站点区分开。
• How can you make this site popular within the cat-lovers community? Cat lovers do not enjoy violence, but they do enjoy cat humor.
  您如何才能使这个网站在爱猫人士社区中流行？ 爱猫人士不喜欢暴力，但喜欢猫幽默。

• Should this site duplicate the dynamics of Hot or Not? How can you create a unique viewing experience for the viewer that goes beyond YouTube? Perhaps a play-by-play of the fight that gets recorded as users post?

  该网站是否应该复制热点或非热点的动态？ 您如何为YouTube以外的观众创造独特的观看体验？ 也许在用户发布时记录下战斗的逐一播放？

What You Will Learn: Storing videos in a database is a good skill to learn. Also, replicating the dynamics of YouTube will be good practice that others will clearly understand. Getting the tone of humor right on the site would also be a good challenge.

您将学到什么：将视频存储在数据库中是一种学习的好技能。 另外，复制YouTube的动态效果也是其他人都应该清楚理解的好习惯。 在网站上正确表达幽默感也是一个很好的挑战。

6.优惠券银行 (6. CouponBank)

The Idea: There are plenty of sites out there that allow people to exchange coupons on a one-for-one basis. But what about the “long tail” of coupons? In other words, rare or obscure coupons that might not be popular on a more mainstream coupon site. And what if the other person does not have a coupon you desire? Coupons are basically money, anyway.

想法：那里有很多站点，使人们可以一对一地交换优惠券。 但是优惠券的“ 长尾巴 ”呢？ 换句话说，稀有或晦涩的优惠券在较主流的优惠券网站上可能不受欢迎。 如果对方没有您想要的优惠券怎么办？ 优惠券基本上就是钱。

You need a bank to handle this mismatch in the marketplace. This bank would ask for an initial deposit of $20, let’s say. Then, every coupon that you ask for will get debited from your account. Any coupon that you are able to successfully give away will be credited.

您需要一家银行来处理市场中的这种不匹配问题。 假设这家银行要求初始存款$ 20。 然后，您要求的每张优惠券都会从您的帐户中扣除。 您能够成功赠送的任何优惠券都将被记入贷方。

Type of Site: Peer to Peer Lending

网站类型：点对点借贷

Key Functions:

主要功能：

• Users must be able to create an account, and then deposit $20 in escrow which can be taken out any time. This is collateral. You can use Stripe to process this transaction.
  用户必须能够创建一个帐户，然后将20美元存入代管帐户，该代管帐户可以随时取出。 这是抵押。 您可以使用Stripe处理此事务。

• Users can upload a photo of a coupon. The site must then automatically determine the product, and the amount of the coupon. It must prompt the user if it cannot figure it out. Google’s Cloud Vision API should help with this.

  用户可以上传优惠券的照片。 然后，该站点必须自动确定产品以及优惠券的金额。 如果无法解决，它必须提示用户。 Google的Cloud Vision API应该可以帮助您。

• When a user requests a coupon, the original poster must mail it to them. The amount of the coupon is credited to the original poster’s account, and debited from the requester’s account.
  当用户请求优惠券时，原始海报必须将其邮寄给他们。 优惠券的金额记入原始张贴者的帐户，并从请求者的帐户中扣除。
• Once somebody’s account hits $0, they cannot request any more coupons until they trade some themselves, or add more money.
  一旦某人的帐户达到$ 0，他们便无法再申请任何优惠券，除非他们自己进行交易或添加更多资金。
• The site generates revenue by taking a small percentage of every transaction.
  该网站通过每笔交易的一小部分产生收入。

Key Feature Decisions:

关键功能决策：

• How can you make this as easy as possible to upload a massive number of coupons? The Cloud Vision API would be a big deal for this.
  您如何才能尽可能轻松地上传大量优惠券？ Cloud Vision API对此将是一件大事。
• How can you make this as easy as possible for people to send the coupons? The user would be exhausted if he/she needs to send many coupons via mail.
  您如何使人们尽可能轻松地发送优惠券？ 如果用户需要通过邮件发送许多优惠券，则将筋疲力尽。
• How can you make the search process as easy as possible? What if somebody could upload a receipt, and you can check if there are any coupons available for the items on the list?
  如何使搜索过程尽可能简单？ 如果有人可以上传收据，并且您可以检查列表中的物品是否有优惠券怎么办？

What You Will Learn: This one encompasses a few key concepts of peer to peer lending, albeit with a much lower risk profile. This is a great test of your attention to user experience. There are millions of people across the US that have time to spare, and are looking for an easy way to make a few extra bucks. How can you make your site an excellent option for this?

您将学到什么：本课程涵盖了一些点对点借贷的关键概念，尽管其风险状况要低得多。 这是对您注意用户体验的一次很好的测试。 美国各地有数百万的人有空余时间，他们正在寻找一种简单的方法来赚几美元。 您如何使您的网站成为此的绝佳选择？

发挥创意 (Get creative)

Don’t feel obligated to build the same projects as everybody else. It’s extremely hard to gain a competitive edge on the rest of the market when you are imitating.

不必与其他人一起构建相同的项目。 模仿时，在其他市场上很难获得竞争优势。

Even if one of these suggestions does not help you, you should consider building projects that can create a little personality and distinguish yourself from all the others.

即使这些建议中的一项对您没有帮助，您也应该考虑构建能够创造一点个性并使自己与所有其他人区分开的项目。

As Seth Godin says, “In a crowded marketplace, fitting in is a failure. In a busy marketplace, not standing out is the same as being invisible.”

正如塞思·戈丁(Seth Godin)所说：“在拥挤的市场中，适应是失败的。 在繁忙的市场中，不脱颖而出就是看不见。

Did you enjoy this? Give it a like and let me know in the comments!

你喜欢这个吗？ 给个喜欢，让我在评论中知道！

Also, if you are looking for visualized coding tutorials that make HTML, CSS and JavaScript simple, sign up for my newsletter here:

另外，如果您正在寻找使HTML，CSS和JavaScript变得简单的可视化编码教程，请在此处注册我的新闻通讯：

翻译自: https://www.freecodecamp/news/6-absurd-ideas-for-building-your-first-web-application-24afca35e519/

少儿编程真是荒谬