java web程序示例

Interested in learning JavaScript? Get my ebook at jshandbook.com

有兴趣学习JavaScript吗？ 在jshandbook.com上获取我的电子书

If you’re reading this post, you are probably looking for an idea. You likely want to build a simple app that you can use in a tutorial or in your example project to test a new framework or API. But you can’t find anything that really resonates with you.

如果您正在阅读这篇文章，则可能正在寻找一个想法。 您可能想构建一个简单的应用程序，以在教程或示例项目中使用它来测试新的框架或API。 但是，您找不到真正能引起您共鸣的东西。

It needs to be simple enough not to take up all your time, but at the same time complex enough to be worth doing.

它必须足够简单以不占用您的所有时间，但同时又要足够复杂才能值得。

“I don’t want to build another to-do app!” I hear you thinking.

“我不想构建另一个待办事项应用程序！” 我听到你在想

I get it. I wrote this post to help myself, and I hope it will help you as well.

我知道了。 我写这篇文章是为了帮助自己，我希望它也会对您有所帮助。

您会在下面找到 (What you’ll find below)

Some of the ideas are self-contained (not involving the use of an external API), while some make use of famous public APIs where you can easily grab pre-built data.

有些想法是独立的(不涉及使用外部API)，而有些想法则使用了著名的公共API，您可以在其中轻松获取预先构建的数据。

Some require a server part, and some do not, which might also depend on your implementation.

有些需要服务器部分，有些则不需要，这也可能取决于您的实现。

But I tried to make sure these ideas are:

但是我试图确保这些想法是：

• good for a tutorial
  很好的教程
• good to experiment with web technologies
  可以尝试使用网络技术
• not something that will take a week to figure out
  不需要花一个星期的时间
• not “startup ideas”
  不是“创业思路”
• targeted to web apps
  针对网络应用
• easy to explain
  容易解释
• easy to build (less than 24 hours, if prepared)
  易于构建(如果准备的话，不到24小时)
• easy to extend with new features
  易于扩展的新功能

So, enough talk, here’s the list!

所以，足够多的谈话，这是清单！

没有外部依赖的简单应用 (Simple apps without external dependencies)

体重追踪器应用 (A weight tracker app)

• It accepts a set of manual entries of weight measurements taken at different dates
  它接受一组在不同日期进行的体重测量的手动输入
• It can plot a graph
  它可以画一个图
• It can allow you to track multiple entities, for example more than one person’s weight
  它可以让您跟踪多个实体，例如一个人的体重
• It stores the weights somewhere
  它把重量存储在某个地方

计算器应用 (A calculator app)

• A standard calculator: numbers, +, -, *, /, and the result
  标准计算器：数字，+，-，*，/和结果

图书数据库 (A book database)

• Enter the books you own
  输入您拥有的书
• Enter the books you’d like to buy
  输入您要购买的书
• Store the book info and images
  存储书籍信息和图像

食谱应用 (A recipes app)

• Enter a name and a description with the steps
  输入带有步骤的名称和描述
• Have pictures
  有图片
• Have some ranking for difficulty and quality
  在难度和质量上有一些排名
• Add the time needed
  添加所需时间
• Have different steps with a picture for each
  每个步骤都有不同的图片
• Store them somewhere
  将它们存放在某个地方

账单追踪器 (A bill tracker)

• Log bills, amounts, and dates
  记录帐单，金额和日期
• List bills
  列出账单
• Have a few graphs (this year / last year)
  有一些图表(今年/去年)
• Store them somewhere
  将它们存放在某个地方

费用追踪器 (An expenses tracker)

• Log expenses and tag them (or have categories)
  记录费用并标记(或具有类别)
• List expenses
  列出费用
• Have a few graphs (last month / last year)
  有一些图表(上个月/去年)
• Store them somewhere
  将它们存放在某个地方

聊天应用 (A chat application)

• Some sort of stripped-down Slack
  某种简化的松弛
• People enter without authentication and are assigned a name, stored for when they come back
  人们未经身份验证即进入，并被分配一个名字，以备下次访问时使用
• Store the history
  储存历史
• Add notifications
  添加通知

笔记应用 (A notes app)

• Add a new note
  新增笔记
• List all your notes in the sidebar
  在边栏中列出所有笔记
• Store them somewhere
  存放在某个地方

个人日记应用 (A personal diary app)

• Add entries with a date and text
  添加带有日期和文本的条目
• Show more recent first
  先显示更多最新内容
• Attach pictures
  附上图片
• Store them somewhere
  将它们存放在某个地方

番茄程序 (A pomodoro app)

• Enter a time
  输入时间
• Start timer
  启动计时器
• Alert when the time is over
  时间到时提醒

一个模因发生器 (A meme generator)

• Have 10 popular meme images
  有10个流行的米姆图片
• Let the user add the text
  让用户添加文字
• Result is image + text
  结果是图像+文字
• Store the history
  储存历史

井字游戏 (Tic-tac-toe game)

We all know what a tic-tac-toe game is ?

我们都知道井字游戏是什么？

生活游戏 (The game of life)

A great project involving math and graphics.

一个伟大的项目，涉及数学和图形。

博客引擎 (A blog engine)

• Allow user to login and add posts
  允许用户登录并添加帖子
• Visitors can add comments
  访客可以添加评论
• Store the data somewhere
  将数据存储在某处

质量检查引擎 (A QA engine)

• Allow user to login
  允许用户登录
• Add questions
  添加问题
• Answer to questions
  回答问题
• Allow original user to choose the best question
  允许原始用户选择最佳问题
• Store the data somewhere
  将数据存储在某处

论坛引擎 (A forum engine)

• Allow user to login
  允许用户登录
• Add posts
  添加帖子
• Comment on posts
  评论帖子
• Store the data somewhere
  将数据存储在某处

嵌入式实时聊天 (An embeddable live chat)

Think Intercom or Olark.

考虑对讲机或Olark。

• Have a “backend” where you respond
  有一个“后端”，您可以在其中做出回应
• Embed on a web page
  嵌入网页
• Let people write to you privately
  让人们私下给您写信

API驱动的应用 (API-powered apps)

黑客新闻客户端 (An Hacker News client)

• List the popular posts
  列出热门帖子
• Show a post’s comments
  显示帖子的评论
• Show a user’s profile
  显示用户的个人资料
• Search HN
  搜索HN

Check out HNPWA and Awesome Hacker News for inspiration.

查看HNPWA和Awesome Hacker News以获得灵感。

Reddit客户端 (A Reddit client)

• List the popular posts
  列出热门帖子
• List the comments of a post
  列出帖子的评论
• Show a user’s profile
  显示用户的个人资料

Instagram客户端 (An Instagram client)

• Enter an hashtag and get the latest posts
  输入主题标签并获取最新帖子
• Enter a username and get the latest posts
  输入用户名并获取最新帖子
• Allow to store one or more hashtags/usernames and get all the latest posts from those
  允许存储一个或多个主题标签/用户名并从中获取所有最新帖子

GitHub API客户端 (A GitHub API client)

• List the popular repositories from today / week / month
  列出今天/周/月的热门存储库
• List the latest commits in a repository
  列出存储库中的最新提交
• Show a person or organization public repositories ranked by stars
  显示按星标排名的个人或组织公共存储库

Unsplash API客户端 (An Unsplash API client)

• Search images by topic
  按主题搜索图像
• Let the user enter a term, show relevant images
  让用户输入一个术语，显示相关图像

Start at Unsplash API for inspiration.

从Unsplash API开始获取灵感。

您的示例应用程序的数据 (Data for your sample apps)

Sometimes you start building some simple app, but you’re bored with the data you’ve found that you can use. You don’t have to be bored! You can use real data, or random data.

有时，您开始构建一些简单的应用程序，但对发现的可以使用的数据感到无聊。 您不必无聊！ 您可以使用真实数据，也可以使用随机数据。

您可以在示例项目中使用的公共API (Public APIs you can use in example projects)

Maybe you have an idea for a perfectly nice CRUD app, or something that works with an API, but you don’t want to create the API in the first place.

也许您对一个完美的CRUD应用程序有一个想法，或者与API兼容的想法，但是您不想一开始就创建API。

I recommend that you check out Airtable, which provides a great API for developers. It’s very easy to use, like a database.

我建议您查看Airtable ，它为开发人员提供了一个不错的API。 它非常容易使用，就像数据库一样。

Here are some amazing public APIs you can use:

以下是一些您可以使用的惊人的公共API：

• The Cat API

  猫API

• The Dog API

  狗的API

• The Chuck Norris API

  Chuck Norris API

• F**k Off As A Service API

  F ** k关闭即服务API

• Quotes API

  报价API

• Quotes API

  报价API

• Dad Jokes API

  爸爸笑话API

• The Spotify API

  Spotify API

• The New York Times API

  纽约时报API

• The Wikipedia API

  维基百科API

• The Wikidata API

  Wikidata API

• The Medium API

  中型API

• Design Quotes API

  设计报价API

• The GoodReads API

  GoodReads API

• The Dribbble API

  Dribbble API

• The 500px API

  500px API

• The Unsplash API

  Unsplash API

• The Giphy API — GIFs!

  Giphy API-GIF！

• The Pixabay API

  png API

• Exchange rates

  汇率

• Site screenshots API

  网站截图API

• The Oxford Dictionary API

  牛津字典API

• Website Technologies API

  网站技术API

• The Mapbox API

  Mapbox API

• Music Lyrics API by Genius

  Genius的Music Lyrics API

• Site meta tags API

  网站元标记API

• The EventBrite API

  EventBrite API

• Open source projects changelogs

  开源项目变更日志

• The GitHub REST API

  GitHub REST API

• The GitHub GraphQL API

  GitHub GraphQL API

• QR codes API

  QR码API

• The StackExchange API

  StackExchange API

• Words and synonyms

  单词和同义词

• The Nasa API

  美国国家航空航天局API

• The SpaceX API

  SpaceX API

• The Hacker News API

  黑客新闻API

• The Instagram API

  Instagram API

• The Reddit API

  Reddit API

• The Slack API

  Slack API

• The Twitter API

  Twitter API

• The YouTube API

  YouTube API

您的示例项目的图像占位符 (Image placeholders for your sample projects)

• Placeholder.com

  Placeholder.com

• Placekitten

  小猫咪

影像产生器 (Image generators)

Avatars:

头像：

• RoboHash

  机器人哈希

• Adorable Avatars

  可爱的化身

• DiceBear Avatars (pixel art)

  DiceBear头像 (像素图)

• Lorem Picsum

  洛雷姆·皮克苏姆(Lorem Picsum)

用于示例项目的示例文本生成器 (Sample text generator for your sample projects)

Lorem Ipsum is boring. Spice it up!

Lorem Ipsum很无聊。 加香料！

If you insist on using Lorem Ipsum, Loripsum is a good generator.

如果您坚持使用Lorem Ipsum， Loripsum是一个很好的生成器。

其他虚假数据 (Other fake data)

FakeJSON has tons of fake data generation capabilities.

FakeJSON具有大量的伪造数据生成功能。

JSONPlaceholder has fake posts, comments, photos, todos, users, and albums, all ready for REST consumption.

JSONPlaceholder具有伪造的帖子，评论，照片，待办事项，用户和相册，所有这些都可供REST使用。

Need fake name/user data generation? Check UI Names and RandomUser.

需要假名称/用户数据生成？ 检查UI名称和RandomUser 。

结语 (Wrapping up)

I hope this list is comprehensive enough to suit your needs!

我希望这份清单足够全面，可以满足您的需求！

Have fun!

玩得开心！

Interested in learning JavaScript? Get my ebook at jshandbook.com

有兴趣学习JavaScript吗？ 在jshandbook.com上获取我的电子书

翻译自: https://www.freecodecamp.org/news/want-to-build-something-fun-heres-a-list-of-sample-web-app-ideas-b991bce0ed9a/

java web程序示例