gradle构建编码

Have you ever wanted to build something but you had no idea what to do? Just as authors sometimes have “writer's block” it’s also true for developers.

您是否曾经想过建造一些东西，但又不知道该怎么做？ 正如作者有时会遇到“作家障碍”一样，对于开发人员来说也是如此。

Together with my friend Jim we created a collection of application ideas which is intended to solve this issue once and for all!

我们与我的朋友Jim共同创建了一系列应用程序创意 ，旨在彻底解决此问题！

These applications are:

这些应用程序是：

• great to improve your coding skills非常适合提高您的编码技能
• great to experiment with new technologies伟大的尝试新技术
• great to be added in your portfolio to impress your next employer/client非常适合添加到您的投资组合中，以打动您的下一个雇主/客户
• great to be used as examples in tutorials (articles or videos)非常适合用作教程(文章或视频)中的示例
• easy to complete and also easily extendable with new features易于完成，并且易于扩展，并具有新功能

This is not just a simple list of projects, but a collection that describes each project in enough detail so you can develop it from the ground up!

这不仅是一个简单的项目列表，而且是一个足够详细地描述每个项目的集合，因此您可以从头开始进行开发！

Each project specification contains the following:

每个项目规范都包含以下内容：

1. A clear and descriptive objective明确的描述性目标

2. A list of User Stories which should be implemented (these stories act more as a guideline than a forced list of To-Do’s. Feel free to add your own features if you want)

   应当实施的用户故事列表(这些故事充当指南，而不是强制性的待办事项列表。请根据需要随意添加自己的功能)

3. A list of bonus features that improve not only the base project but also your skills at the same time

   一系列奖金功能 ，这些功能不仅可以改善基础项目，而且可以同时提高您的技能

4. All the resources and links to help you find what you need to complete the project所有资源和链接可帮助您找到完成项目所需的内容

专案 (Projects)

All of the projects are divided into three tiers based on the knowledge and experience required to complete them. These tiers are:

根据完成项目所需的知识和经验，所有项目都分为三个层次。 这些层是：

1. Beginner — Developers in the early stages of their learning journey. Those who are typically focused on creating user-facing applications.

   初学者 -处于学习旅程初期的开发人员。 那些通常专注于创建面向用户的应用程序的人。

2. Intermediate — Developers at an intermediate stage of learning and experience. They are comfortable in UI/UX, using development tools, and building apps that use API services.

   中级 —开发人员处于学习和经验的中间阶段。 他们对使用开发工具和使用API​​服务的应用程序的UI / UX感到很满意。

3. Advanced — Developers who have all of the above, and are learning more advanced techniques like implementing BackEnd applications and Database services.

   高级 —具有以上所有内容的人员，并且正在学习更高级的技术，例如实现BackEnd应用程序和数据库服务。

Below you’ll find 5 projects for each of the tiers (15 in total), but there are over 30 projects (at the moment) in this GitHub repository. Make sure you check it out as we are planning to add more projects in the future. You are welcome to help! (More about this in the Contributing section below ?)

在下面，您将为每个层找到5个项目 ( 总共15个 )，但是此GitHub存储库中目前有30多个项目 (目前)。 确保您将其签出，因为我们计划在将来添加更多项目。 欢迎您的帮助！ (有关更多信息，请参见下面的“ 贡献”部分？)

1.笔记应用 (1. Notes App)

Tier: 1 — Beginner

等级： 1 —初学者

Description: Create and store your notes for a later purpose!

描述 ：创建并存储您的笔记以备后用！

用户故事 (User Stories)

• User can create a note用户可以创建笔记
• User can edit a note用户可以编辑笔记
• User can delete a note用户可以删除笔记
• When closing the browser window the notes will be stored and when the User returns, the data will be retrieved当关闭浏览器窗口时，便笺将被存储，当用户返回时，将检索数据

奖励功能 (Bonus features)

• User can create and edit a note in Markdown format. On save it will convert Markdown to HTML用户可以以Markdown格式创建和编辑便笺。 保存后，会将Markdown转换为HTML
• User can see the date when he created the note用户创建便笺时可以看到日期

有用的链接和资源 (Useful links and resources)

• localStorage

  本地存储

• Markdown Guide

  降价指南

• Marked — A markdown parser

  已标记-降价解析器

示例项目 (Example project)

2.圣诞灯 (2. Christmas Lights)

Tier: 1 — Beginner

等级： 1 —初学者

Description: The Christmas Lights application relies on your development talents to create a mesmerizing light display. Your task is to draw seven colored circles in a row and based on a timer change the intensity of each circle. When a circle is brightened its predecessor returns to its normal intensity.

描述 ：Christmas Lights应用程序依靠您的开发才能来创建令人着迷的灯光显示屏。 您的任务是连续绘制七个彩色圆圈，并根据计时器更改每个圆圈的强度。 当圆圈变亮时，其前身恢复到其正常强度。

This simulates the effect of a string of rippling lights, similar to the ones displayed during the Christmas Holidays.

这模拟了一连串的涟漪灯的效果，类似于圣诞节假期期间显示的效果。

用户故事 (User Stories)

• User can press a button to start and stop the display用户可以按一个按钮来启动和停止显示
• User can change the interval of time controlling the change in intensity用户可以改变时间间隔来控制强度的变化

奖励功能 (Bonus features)

• User can select the color used to fill each circle用户可以选择用于填充每个圆圈的颜色
• User can specify the intensity value用户可以指定强度值
• User can change the size of any circle in the row用户可以更改行中任何圆圈的大小
• User can specify the number of rows to be included in the display. From one to seven rows can be chosen用户可以指定要包括在显示中的行数。 可以选择1到7行

有用的链接和资源 (Useful links and resources)

• Sample Image

  样本图片

• Adafruit LED Matrix

  Adafruit LED矩阵

示例项目 (Example project)

3. FlipImage (3. FlipImage)

Tier: 1 — Beginner

等级： 1 —初学者

Description: It’s important for Web Developers to understand the basics of manipulating images since rich web applications rely on images to add value to the user interface and user experience (UI/UX).

描述 ：对于Web开发人员来说，理解图像的基础很重要，因为富Web应用程序依赖图像来为用户界面和用户体验(UI / UX)增值。

FlipImage explores one aspect of image manipulation — image rotation. This app displays a square panel containing a single image presented in a 2x2 matrix. Using a set of up, down, left, and right arrows adjacent to each of the images the user may flip them vertically or horizontally.

FlipImage探索图像处理的一个方面-图像旋转。 该应用程序显示一个正方形面板，其中包含以2x2矩阵呈现的单个图像。 使用与每个图像相邻的一组向上，向下，向左和向右箭头，用户可以垂直或水平翻转它们。

You must only use native HTML, CSS, and Javascript to implement this app. Image packages and libraries are not allowed.

您只能使用本机HTML，CSS和Javascript来实现此应用程序。 不允许使用图像包和库。

用户故事 (User Stories)

• User can see a pane containing a single image repeated in a 2x2 matrix用户可以看到一个窗格，其中包含以2x2矩阵重复的单个图像
• User can flip any one of the images vertically or horizontally using a set of up, down, left, and right arrows next to the image用户可以使用图像旁边的一组向上，向下，向左和向右箭头垂直或水平翻转任何一个图像

奖励功能 (Bonus features)

• User can change the default image by entering the URL of a different image in an input field用户可以通过在输入字段中输入其他图像的URL来更改默认图像
• User can display the new image by clicking a ‘Display’ button next to the input field用户可以通过单击输入字段旁边的“显示”按钮来显示新图像
• User can see an error message if the new images URL is not found如果未找到新图像URL，用户会看到一条错误消息

有用的链接和资源 (Useful links and resources)

• How to Flip an Image

  如何翻转图像

• Create a CSS Flipping Animation

  创建CSS翻转动画

示例项目 (Example project)

4.测验应用 (4. Quiz App)

Tier: 1 — Beginner

等级： 1 —初学者

Description: Practice and test your knowledge by answering questions in a quiz application.

描述 ：通过在测验应用程序中回答问题来练习和测试您的知识。

As a developer, you can create a quiz application for testing coding skills of other developers. (HTML, CSS, JavaScript, Python, PHP, etc…)

作为开发人员，您可以创建测验应用程序以测试其他开发人员的编码技能。 (HTML，CSS，JavaScript，Python，PHP等)

用户故事 (User Stories)

• User can start the quiz by pressing a button

  用户可以通过按一个button来开始测验

• User can see a question with 4 possible answers用户可以看到带有4个可能答案的问题
• After selecting an answer, display the next question to the User. Do this until the quiz is finished选择答案后，向用户显示下一个问题。 这样做直到测验结束
• In the end, the User can see the following statistics:最后，用户可以看到以下统计信息：

1. Time it took to finish the quiz完成测验所需的时间
2. How many correct answers did he get他得到了多少正确答案

3. A message showing if he passed or failed the quiz

   消息显示，如果他passed或failed的测验

奖励功能 (Bonus features)

• User can share the result of a quiz on social media用户可以在社交媒体上分享测验结果
• Add multiple quizzes to the application. User can select which one to take将多个测验添加到应用程序。 用户可以选择哪一个
• User can create an account and have all the scores saved in his dashboard. User can complete a quiz multiple times用户可以创建一个帐户，并将所有分数保存在其仪表板中。 用户可以多次完成测验

有用的链接和资源 (Useful links and resources)

• Open Trivia Database

  打开Trivia数据库

示例项目 (Example projects)

Quiz app built with React (wait for it to load as it is hosted on Heroku)

使用React构建的测验应用程序 (等待它在Heroku上托管时加载)

5.罗马数字到十进制数字转换器 (5. Roman Numeral to Decimal numbers Converter)

Tier: 1 — Beginner

等级： 1 —初学者

Description: The numeric system represented by Roman numerals originated in ancient Rome and remained the usual way of writing numbers throughout Europe well into the Late Middle Ages. Roman numerals, as used today, employ seven symbols, each with a fixed integer value.

描述 ：以罗马数字表示的数字系统起源于古罗马，一直是整个欧洲一直写入中世纪晚期的常用数字写方法。 今天使用的罗马数字使用七个符号，每个符号具有固定的整数值。

See the below table the Symbol — Value pairs:

请参见下表“ 符号—值对”：

• I — 1我-1
• V — 5V — 5
• X — 10X-10
• L — 50L — 50
• C — 100C – 100
• D — 500D — 500
• M — 1000M — 1000

用户故事 (User Stories)

• User should be able to enter one Roman number in an input field用户应该能够在输入字段中输入一个罗马数字
• User could see the results in a single output field containing the decimal (base 10) equivalent of the roman number that was entered by pressing a button用户可以在一个输出字段中看到结果，该输出字段包含等效于通过按按钮输入的罗马数字的十进制(以10为基数)
• If a wrong symbol is entered, the User should see an error如果输入了错误的符号，则用户应该看到一个错误

奖励功能 (Bonus features)

• User could see the conversion to be made automatically as I type用户输入时可以看到转换是自动进行的
• User should be able to convert from decimal to Roman (vice-versa)用户应该能够从十进制转换为罗马(反之亦然)

有用的链接和资源 (Useful links and resources)

• An explanation of Roman Numbers

  罗马数字的解释

示例项目 (Example project)

Roman Number Converter

罗马数字转换器

6.图书查找器应用 (6. Book Finder App)

Tier: 2 — Intermediate

等级： 2-中级

Description: Create an application that will allow users to search for books by entering a query (Title, Author, etc). Display the resulting books in a list on the page with all the corresponding data.

描述 ：创建一个应用程序，允许用户通过输入查询(标题，作者等)来搜索书籍。 在页面上的列表中显示包含所有相应数据的结果书籍。

用户故事 (User Stories)

• User can enter a search query into an input field

  用户可以在input字段中输入搜索查询

• User can submit the query. This will call an API that will return an array of books with the corresponding data (Title, Author, Published Date, Picture, etc)

  用户可以提交查询。 这将调用一个API，该API将返回带有相应数据( 书名 ， 作者 ， 出版日期 ， 图片等)的书籍数组。

• User can see the list of books appearing on the page用户可以看到页面上显示的书籍列表

奖励功能 (Bonus features)

• For each item in the list add a link that will send the User to an external site which has more information about the book为列表中的每个项目添加一个链接，该链接会将用户发送到具有有关该书的更多信息的外部站点
• Implement a Responsive Design实施响应式设计
• Add loading animations添加加载动画

有用的链接和资源 (Useful links and resources)

You can use the Google Books API

您可以使用Google Books API

示例项目 (Example Project)

BookSearch-React

BookSearch-React

7.卡记忆游戏 (7. Card-Memory-Game)

Tier: 2 — Intermediate

等级： 2-中级

Description: Card memory is a game where you have to click on a card to see what image is underneath it and try to find the matching image underneath the other cards.

描述/控制 ：卡记忆是一种游戏，您必须单击一张卡以查看其下方的图像，然后尝试查找其他卡下方的匹配图像。

用户故事 (User Stories)

• User can see a grid with n x n cards (n is an integer). All the cards are faced down initially (hidden state)

  用户可以看到带有nxn张卡片的网格( n是整数)。 最初所有卡面朝下( hidden状态)

• User can click a button to start the game. When this button is clicked, a timer will start用户可以单击一个按钮来启动游戏。 单击此按钮后，计时器将启动

• User can click on any card to unveil the image that is underneath it (change it to visible state). The image will be displayed until the user clicks on a 2nd card

  用户可以单击任何卡以显示其下方的图像(将其更改为visible状态)。 图像将一直显示，直到用户单击第二张卡

When the User clicks on the 2nd card:

当用户单击第二张卡时：

• If there is a match, the 2 cards will be eliminated from the game (either hide/remove them or leave them in the visible state)

  如果有比赛，则将两张牌从游戏中删除(隐藏/删除它们或将它们保留在visible状态)

• If there isn’t a match, the 2 cards will flip back to their original state (hiddenstate)

  如果没有匹配项，则两张卡将翻转回其原始状态( hidden状态)

• When all the matches have been found, the User can see a dialog box showing a Congratulations message with a counter displaying the time it took to finish the game找到所有匹配项后，用户可以看到一个对话框，显示一个祝贺消息，并带有一个计数器，该计数器显示完成游戏所花费的时间

奖励功能 (Bonus features)

• Use can choose between multiple levels of difficulty (Easy, Medium, Hard). Increased difficulty means: decreasing the time available to complete and/or increasing the number of cards使用可以在多个难度级别(轻松，中等，困难)之间进行选择。 难度增加意味着：减少完成卡片的时间和/或增加卡数
• User can see the game statistics (nr. of times he won / he lost, the best time for each level)用户可以查看游戏统计信息(获胜/失败的次数，每个级别的最佳时间)

有用的链接和资源 (Useful links and resources)

• Wikipedia

  维基百科

示例项目 (Example projects)

Flip — card memory game

翻转—记忆卡游戏

SMB3 Memory Card Game

SMB3记忆卡游戏

8.降价表生成器 (8. Markdown Table Generator)

Tier: 2 — Intermediate

等级： 2-中级

Description: Create an application that will convert a regular table with data provided by the User (optionally) into a Markdown formatted table.

描述 ：创建一个应用程序，它将带有用户(可选)提供的数据的常规表转换为Markdown格式的表。

用户故事 (User Stories)

• User can create an HTML table with a given number of Rows and Columns

  用户可以创建具有给定行数和列数的HTML table

• User can insert text in each cell of the HTML table

  用户可以在HTML table每个单元格中插入文本

• User can generate a Markdown formatted table that will contain the data from the HTML table

  用户可以生成Markdown formatted table ，该Markdown formatted table将包含HTML table的数据

• User can preview the Markdown formatted table

  用户可以预览Markdown formatted table

奖励功能 (Bonus features)

• User can copy the Markdown formatted table to the clipboard by pressing a button

  用户可以通过按按钮将Markdown formatted table复制到剪贴板

• User can insert a new Row or Column to a specified location

  用户可以在指定位置插入新的行或列

• User can delete a Row or a Column entirely

  用户可以完全删除行或列

• User can align (to the left, right or center) a cell, a column, a row, or the entire table

  用户可以将单元格 ， 列 ， 行或整个表格 ( 向左 ， 向右或居中 )对齐

有用的链接和资源 (Useful links and resources)

• Markdown Guide

  降价指南

• Marked — A markdown parser

  已标记-降价解析器

• How to Copy to Clipboard

  如何复制到剪贴板

示例项目 (Example project)

Tables Generator / Markdown Tables

表格生成器/降价表

9.弦乐艺术 (9. String Art)

Tier: 2 — Intermediate

等级： 2-中级

Description: The purpose of String Art is to provide the developer with practice creating a simple animated graphic, using geometry in the animation algorithm, and creating something that’s visually pleasant to watch.

Description(说明) ：String Art的目的是为开发人员提供练习，以创建简单的动画图形，在动画算法中使用几何图形以及创建视觉上令人愉悦的东西。

String Art draws a single multicolored line which smoothly moves until one end touches a side of the enclosing window. At the point, it touches a “bounce” effect is applied to change its direction.

弦乐艺术画了一条多色的线，该线平滑地移动，直到一端碰到封闭窗口的一侧。 此时，它会碰触“反弹”效果，以更改其方向。

A ripple effect is created by only retaining 10–20 images of the line as it moves. Older images are progressively faded until they disappear.

通过仅在移动时保留线条的10–20个图像来创建波纹效果。 较旧的图像逐渐消失，直到消失。

Animation libraries are not allowed. Use only Vanilla HTML/CSS/JavaScript.

不允许使用动画库。 仅使用Vanilla HTML / CSS / JavaScript。

用户故事 (User Stories)

• Start by drawing a multicolored line at a random position within the boundary of it’s enclosing window首先在封闭窗口边界内的任意位置绘制多色线
• Each 20 ms draw a new copy of the line at a new position based on a trajectory — the incremental distance from the previous line based on the endpoints每20毫秒根据轨迹在新位置绘制一条线的新副本-根据端点到上一条线的增量距离
• When either endpoint of the line touches the boundary of the enclosing window change it’s direction and randomly alter its angle当线条的任一端点接触封闭窗口的边界时，更改其方向并随机更改其角度
• Progressively fade the intensity of old lines so that only the most recent 10–20 lines are visible to create the sense of movement or “ripple”逐渐淡化旧线条的强度，以便仅显示最近的10–20条线条，以产生移动感或“涟漪”感

奖励功能 (Bonus features)

• User can specify the length of the line and its velocity用户可以指定线的长度及其速度
• User can specify the multiple lines within the window, all moving along different trajectories and velocities用户可以在窗口中指定多条线，所有线均沿不同的轨迹和速度移动

有用的链接和资源 (Useful links and resources)

• Using Multistep Animations & Transitions

  使用多步动画和转场

• Animation Basics

  动画基础

示例项目 (Example project)

This project is very close, but has a small enclosing window and is monochromatic. Daniel Cortes

这个项目非常接近，但是有一个小的封闭窗口并且是单色的。 丹尼尔·科尔特斯

10.待办事项 (10. To-Do App)

Tier: 2 — Intermediate

等级： 2-中级

Description: The classic To-Do application where a user can write down all the things he wants to accomplish.

描述 ：经典的“待办事项”应用程序，用户可以在其中写下自己想要完成的所有事情。

用户故事 (User Stories)

• User can see an input field where he can type in a to-do item

  用户可以看到一个input字段，可以在其中input待办事项

• By pressing enter (or a button), the User can submit the to-do item and can see that being added to a list of to-do’s通过按Enter键(或按钮)，用户可以提交待办事项，并可以看到将其添加到待办事项列表中

• User can mark a to-do as completed

  用户可以将待办事项标记为completed

• User can remove a to-do item by pressing on a button (or on the to-do item itself)用户可以通过按一个按钮(或待办事项本身)来删除待办事项。

奖励功能 (Bonus features)

• User can edit a to-do用户可以编辑待办事项
• User can see a list with all the completed to-do’s用户可以看到包含所有已完成待办事项的列表
• User can see a list with all the active to-do’s用户可以看到包含所有活动待办事项的列表
• User can see the date when he created the to-do用户可以在创建待办事项时看到日期
• When closing the browser window the to-do’s will be stored and when the User returns, the data will be retrieved关闭浏览器窗口时，待办事项将被存储，当用户返回时，将检索数据

有用的链接和资源 (Useful links and resources)

• localStorage

  本地存储

示例项目 (Example projects)

Todo App built with React

使用React构建的Todo App

11.战舰游戏引擎 (11. Battleship Game Engine)

Tier: 3 — Advanced

等级： 3-高级

Description: Battleship Game Engine (BGE) implements the classic turn-based board game as a package that’s separated from any presentation layer. This is a type of architectural pattern that useful in many application since it allows any number of apps to utilize the same service.

描述 ：战舰游戏引擎(BGE)将经典的回合制棋盘游戏实现为与任何表示层分离的软件包。 这是一种架构模式，在许多应用程序中都很有用，因为它允许任意数量的应用程序使用相同的服务。

The BGE itself is invoked through a series of function calls rather than through directly coupled end-user actions. In this respect using the BGE is similar to using an API or a series of routes exposed by a web server.

BGE本身是通过一系列函数调用而不是通过直接耦合的最终用户操作来调用的。 在这方面，使用BGE类似于使用API​​或Web服务器公开的一系列路由。

This challenge requires that you develop the BGE and a very thin, text-based presentation layer for testing that’s separate from the engine itself. Due to this, the User Stories below are divided two sets — one for the BGE and one for the text-based presentation layer.

这项挑战要求您开发BGE和一个非常薄的，基于文本的表示层以进行测试，并且与引擎本身是分开的。 因此，下面的用户故事分为两组-一组用于BGE，另一组用于基于文本的表示层。

BGE is responsible for maintaining the game state.

BGE负责维护游戏状态。

用户故事 (User Stories)

BGE (BGE)

• Caller can invoke a startGame() function to begin a 1-player game. This function will generate an 8x8 game board consisting of 3 ships having a width of one square and a length of:

  调用者可以调用startGame()函数来开始1人游戏。 此功能将生成一个8x8游戏板，该游戏板由3艘船组成，其宽度为一个正方形，长度为：

1. Destroyer: 2 squares驱逐舰：2个正方形
2. Cruiser: 3 squares巡洋舰：3平方
3. Battleship: 4 squares战舰：4平方

startGame() will randomly place these ships on the board in any direction and will return an array representing ship placement.

startGame()会将这些飞船随机放置在任意方向上，并将返回一个表示飞船放置的数组。

• Caller can invoke a shoot() function passing the target row and column coordinates of the targeted cell on the game board. shoot() will return indicators representing if the shot resulted in a hit or miss, the number of ships left (i.e. not yet sunk), the ship placement array, and updated hits and misses array.

  调用者可以调用shoot()函数，以传递游戏板上目标单元格的目标行和列坐标。 shoot()将返回指示击球是否造成命中或未命中，剩余船只数量(即尚未沉没)，船只布置阵列以及更新的命中和未命中阵列的指示符。

Cells in the hits and misses array will contain a space if they have yet to be targeted, O if they were targeted but no part of a ship was at that location, or Xif the cell was occupied by part of a ship.

命中和未命中数组中的像元如果尚未被定位，则将包含一个空格；如果被针对但没有船的一部分位于该位置，则为O如果该像元被船的一部分占据，则为X

基于文本的表示层 (Text-based Presentation Layer)

• User can see the hits and misses array displayed as a 2-dimensional character representation of the game board returned by the startGame() function.

  用户可以看到由startGame()函数返回的游戏板的二维字符表示的击中和未击中数组。

• User can be prompted to enter the coordinates of a target square on the game board.可以提示用户在游戏板上输入目标方块的坐标。
• User can see an updated hits and misses array display after taking a shot.拍摄后，用户可以看到更新的命中和未命中阵列显示。
• User can see a message after each shot indicating whether the shot resulted in a hit or miss.用户可以在每次射击后看到一条消息，指示该射击是命中还是未命中。
• User can see a congratulations message after the shot that sinks the last remaining ship.用户在击沉最后一艘剩余飞船后可以看到祝贺消息。
• User can be prompted to play again at the end of each game. Declining to play again stops the game.在每个游戏结束时，都会提示用户再次玩。 拒绝再次玩将停止游戏。

奖励功能 (Bonus features)

BGE (BGE)

• Caller can specify the number of rows and columns in the game board as a parameter to the startGame() function.

  调用者可以将游戏板上的行数和列数指定为startGame()函数的参数。

• Caller can invoke a gameStats() function that returns a Javascript object containing metrics for the current game. For example, the number of turns played, the current number of hits and misses, etc.

  调用者可以调用gameStats()函数，该函数返回一个Javascript对象，其中包含当前游戏的指标。 例如，玩的回合数，当前的命中和未击中的次数等。

• Caller can specify the number of players (1 or 2) when calling startGame()which will generate one board for each player randomly populated with ships.

  呼叫方可以在调用startGame()时指定玩家人数(1或2)，这将为每个随机装有飞船的玩家生成一个棋盘。

shoot() will accept the player number the shot is being made for along with the coordinates of the shot. The data it returns will be for that player.

shoot()会接受shoot()的球员编号以及拍摄的坐标。 它返回的数据将用于该玩家。

基于文本的表示层 (Text-based Presentation Layer)

• User can see the current game statics at any point by entering the phrase stats in place of target coordinates. (Note that this requires the gameStats()function in the BGE)

  通过输入短语stats代替目标坐标，用户可以随时查看当前的游戏静态stats 。 (请注意，这需要BGE中的gameStats()函数)

• User can specify a two-player game is to be played, with each player alternating turns in the same terminal session (Note that this requires corresponding Bonus Features in the BGE)用户可以指定要玩的两人游戏，每个玩家在同一终端会话中交替轮流(注意，这需要BGE中的相应奖励功能)
• User can see the player number in prompts associated with the inputs in each turn.用户可以在每个回合的输入提示中看到玩家编号。
• User can see both players board at the end of each turn.用户可以在每个回合结束时看到两个玩家的棋盘。

有用的链接和资源 (Useful links and resources)

• Battleship Game (Wikipedia)

  战舰游戏(维基百科)

• Battleship Game Rules (Hasbro)

  战舰游戏规则(Hasbro)

示例项目 (Example projects)

This YouTube video shows how a text-based Battleship Game is played.

该YouTube视频显示了如何播放基于文本的战舰游戏 。

The following example is provided as a demonstration of the Battleship game if it is unfamiliar to you. Remember you are to implement a text-based presentation layer for testing. Battleship Game by Chris Brody

以下示例是您不熟悉的《战舰》游戏的演示。 请记住，您将实现一个基于文本的表示层进行测试。 克里斯·布罗迪(Chris Brody)的《战舰游戏》

12.聊天应用 (12. Chat App)

Tier: 3 — Advanced

等级： 3-高级

Description: Real-time chat interface where multiple users can interact with each other by sending messages.

描述 ：实时聊天界面，多个用户可以通过发送消息彼此交互。

As an MVP(Minimum Viable Product) you can focus on building the Chat interface. Real-time functionality can be added later (the bonus features).

作为MVP(最低可行产品)，您可以专注于构建聊天界面。 稍后可以添加实时功能(附加功能)。

用户故事 (User Stories)

• User is prompted to enter a username when he visits the chat app. The username will be stored in the application当用户访问聊天应用时，系统会提示用户输入用户名。 用户名将存储在应用程序中

• User can see an input field where he can type a new message

  用户可以看到一个input field ，可以在其中input field新消息

• By pressing the enter key or by clicking on the send button the text will be displayed in the chat box alongside his username (e.g. John Doe: Hello World!)

  通过按enter键或单击“ send按钮，文本将在chat box显示在其用户名旁边(例如John Doe: Hello World! )。

奖励功能 (Bonus features)

• The messages will be visible to all the Users that are in the chat app (using WebSockets)该消息对聊天应用程序中的所有用户都是可见的(使用WebSockets)
• When a new User joins the chat, a message is displayed to all the existing Users新用户加入聊天时，会向所有现有用户显示一条消息
• Messages are saved in a database邮件保存在数据库中
• User can send images, videos, and links which will be displayed properly用户可以发送将正确显示的图像，视频和链接
• User can select and send an emoji用户可以选择并发送表情符号
• Users can chat in private用户可以私下聊天

• Users can join channels on specific topics

  用户可以加入有关特定主题的channels

有用的链接和资源 (Useful links and resources)

• Socket.io

  套接字

• How to build a React.js chat app in 10 minutes — article

  如何在10分钟内构建React.js聊天应用程序—文章

示例项目 (Example project)

Chatty2

闲话2

13. GitHub时间轴 (13. GitHub Timeline)

Tier: 3 — Advanced

等级： 3-高级

Description: API’s and graphical representation of information are hallmarks of modern web applications. GitHub Timeline combines the two to create a visual history of a users GitHub activity.

描述 ：API和信息的图形表示是现代Web应用程序的标志。 GitHub时间轴将两者结合起来，以创建用户GitHub活动的可视历史记录。

The goal of GitHub Timeline is to accept a GitHub user name and produce a timeline containing each repo and annotated with the repo names, the date they were created, and their descriptions. The timeline should be one that could be shared with a prospective employer. It should be easy to read and make effective use of color and typography.

GitHub时间轴的目标是接受GitHub用户名，并生成一个包含每个存储库的时间轴，并用存储库名称，创建日期和描述进行注释。 该时间表应该是可以与潜在雇主共享的时间表。 它应该易于阅读并有效使用颜色和版式。

Only public GitHub repos should be displayed.

仅显示公共GitHub存储库。

用户故事 (User Stories)

• User can enter a GitHub user name用户可以输入GitHub用户名
• User can click a ‘Generate’ button to create and display the named user's repo timeline用户可以单击“生成”按钮来创建并显示指定用户的回购时间线
• User can see a warning message if the GitHub user name is not a valid GitHub user name.如果GitHub用户名不是有效的GitHub用户名，则用户可以看到警告消息。

奖励功能 (Bonus features)

• User can see a summary of the number of repos tallied by the year they were created用户可以查看按创建年份计算的回购数量的摘要

有用的链接和资源 (Useful links and resources)

GitHub offers two API’s you may use to access repo data. You may also choose to use an NPM package to access the GitHub API.

GitHub提供了两个API，您可以使用它们访问回购数据。 您也可以选择使用NPM软件包来访问GitHub API。

Documentation for the GitHub API can be found at:

可以在以下位置找到GitHub API的文档：

• GitHub REST API V3

  GitHub REST API第3版

• GitHub GraphQL API V4

  GitHub GraphQL API V4

Sample code showing how to use the GitHub API’s are:

显示如何使用GitHub API的示例代码为：

You can use this CURL command to see the JSON returned by the V3 REST API for your repos:

您可以使用以下CURL命令查看V3 REST API为您的存储库返回的JSON：

curl -u "user-id" https://api.github.com/users/user-id/repos

示例项目 (Example projects)

14.拼写 (14. Spell-It)

Tier: 3 — Advanced

等级： 3-高级

Description: Knowing how to spell is a fundamental part of being fluent in any language. Whether you are a youngster learning how to spell or an individual learning a new language being able to practice helps to solidify your language skills.

描述 ：知道如何拼写是流利使用任何语言的基础。 无论您是学习拼写的年轻人，还是个人学习能够练习的新语言，都可以帮助您巩固语言能力。

The Spell-It app helps users practice their spelling by playing the audio recording of a word the user must then spell using the computer keyboard.

Spell-It应用程序通过播放用户必须使用计算机键盘进行拼写的单词的录音来帮助用户练习拼写。

用户故事 (User Stories)

• User can click the ‘Play’ button to hear the word that’s to be entered用户可以单击“播放”按钮来听到要输入的单词
• User can see letters displayed in the word input text box as they are entered on the keyboard用户可以看到在键盘上输入的单词显示在单词输入文本框中
• User can click the ‘Enter’ button to submit the word that has been typed in the word input text box用户可以单击“ Enter”按钮提交在单词输入文本框中输入的单词
• User can see a confirmation message when the correct word is typed键入正确的单词时，用户可以看到一条确认消息
• User can see a message requesting the word be typed again when it is spelled incorrectly当拼写不正确时，用户可以看到一条消息，要求再次输入该单词
• User can see a tally of the number of correct spellings, the total number of words attempted, and a percentage of successful entries.用户可以看到正确拼写的数量，尝试输入的单词总数以及成功输入的百分比。

奖励功能 (Bonus features)

• User can hear a confirmation sound when the word is correctly spelled正确拼写单词时，用户可以听到确认声音
• User can hear a warning sound when the word is incorrectly spelled拼写错误时，用户会听到警告声
• User can click the ‘Hint’ button to highlight the incorrect letters in the word input text box用户可以单击“提示”按钮以在单词输入文本框中突出显示不正确的字母
• User can press the ‘Enter’ key on the keyboard to submit a typed word or click the ‘Enter’ button in the app window用户可以按键盘上的“ Enter”键提交输入的单词，或在应用程序窗口中单击“ Enter”按钮

有用的链接和资源 (Useful links and resources)

• Texas Instruments Speak and Spell

  德州仪器(TI)说话和拼写

• Web Audio API

  网络音频API

• Click and Speak

  点击说话

示例项目 (Example projects)

Word Wizard for iOS

适用于iOS的Word向导

Speak N Spell on Google Play

在Google Play上讲N咒语

15.调查应用 (15. Survey App)

Tier: 3 — Advanced

等级： 3-高级

Description: Surveys are a valuable part of any developers toolbox. They are useful for getting feedback from your users on a variety of topics including application satisfaction, requirements, upcoming needs, issues, priorities, and just plain aggravations to name a few.

描述 ：调查是任何开发人员工具箱的重要组成部分。 它们对于从用户那里获得有关各种主题的反馈非常有用，这些主题包括应用程序满意度，需求，即将到来的需求，问题，优先级，仅举一反。

The Survey app gives you the opportunity to learn by developing a full-featured app that will you can add to your toolbox. It provides the ability to define a survey, allow users to respond within a predefined timeframe, and tabulate and present results.

Survey应用程序使您有机会通过开发功能齐全的应用程序进行学习，并将其添加到工具箱中。 它提供了定义调查，允许用户在预定义的时间范围内做出响应以及将结果制成表格并进行呈现的功能。

Users of this app are divided into two distinct roles, each having different requirements:

此应用程序的用户分为两个不同的角色，每个角色都有不同的要求：

• Survey Coordinators define and conduct surveys. This is an administrative function not available to normal users.

  调查协调员定义并进行调查。 这是普通用户无法使用的管理功能。

• Survey Respondents Complete surveys and view results. They have no administrative privileges within the app.

  调查对象完成调查并查看结果。 他们在应用程序内没有管理权限。

Commercial survey tools include distribution functionality that mass emails surveys to Survey Respondents. For simplicity, this app assumes that surveys open for responses will be accessed from the app’s web page.

商业调查工具包括分发功能，该功能可将调查大量电子邮件发送给调查受访者。 为简单起见，此应用程序假定可以从该应用程序的网页访问为答复而打开的调查。

用户故事 (User Stories)

一般 (General)

• Survey Coordinators and Survey Respondents can define, conduct, and view surveys and survey results from a common website调查协调员和调查响应者可以定义，执行和查看公共网站上的调查和调查结果
• Survey Coordinators can login to the app to access administrative functions, like defining a survey.调查协调员可以登录该应用程序以访问管理功能，例如定义调查。

定义调查 (Defining a Survey)

• Survey Coordinator can define a survey containing 1–10 multiple choice questions.调查协调员可以定义包含1–10个选择题的调查。
• Survey Coordinator can define 1–5 mutually exclusive selections to each question.调查协调员可以为每个问题定义1-5个互斥选择。
• Survey Coordinator can enter a title for the survey.调查协调员可以输入调查的标题。
• Survey Coordinator can click a ‘Cancel’ button to return to the home page without saving the survey.调查协调员可以单击“取消”按钮以返回主页，而无需保存调查。
• Survey Coordinator can click a ‘Save’ button to save a survey.调查协调员可以单击“保存”按钮以保存调查。

进行调查 (Conducting a Survey)

• Survey Coordinator can open a survey by selecting a survey from a list of previously defined surveys调查协调员可以通过从先前定义的调查列表中选择一个调查来打开调查
• Survey Coordinators can close a survey by selecting it from a list of open surveys调查协调员可以通过从打开的调查列表中选择调查来关闭调查
• Survey Respondent can complete a survey by selecting it from a list of open surveys调查受访者可以通过从公开调查列表中选择调查来完成调查
• Survey Respondent can select responses to survey questions by clicking on a checkbox调查受访者可以通过单击复选框来选择对调查问题的回答
• Survey Respondents can see that a previously selected response will automatically be unchecked if a different response is clicked.调查受访者可以看到，如果单击其他响应，则先前选择的响应将自动取消选中。
• Survey Respondents can click a ‘Cancel’ button to return to the home page without submitting the survey.调查受访者可以单击“取消”按钮以返回主页，而无需提交调查。
• Survey Respondents can click a ‘Submit’ button submit their responses to the survey.调查对象可以单击“提交”按钮将其答复提交给调查。
• Survey Respondents can see an error message if ‘Submit’ is clicked, but not all questions have been responded to.如果单击“提交”，但并非所有问题都已回答，调查受访者会看到错误消息。

查看调查结果 (Viewing Survey Results)

• Survey Coordinators and Survey Respondents can select the survey to display from a list of closed surveys调查协调员和调查响应者可以从已关闭调查的列表中选择要显示的调查
• Survey Coordinators and Survey Respondents can view survey results as in tabular format showing the number of responses for each of the possible selections to the questions.调查协调员和调查受访者可以表格形式查看调查结果，显示出每个可能选择的问题的答案数量。

奖励功能 (Bonus features)

• Survey Respondents can create a unique account in the app调查对象可以在应用程序中创建一个唯一帐户
• Survey Respondents can login to the app调查对象可以登录到应用程序
• Survey Respondents cannot complete the same survey more than once调查受访者不能一次完成同一调查
• Survey Coordinators and Survey Respondents can view graphical representations of survey results (e.g. pie, bar, column, etc. charts)调查协调员和调查受访者可以查看调查结果的图形表示(例如饼图，条形图，柱形图等)

有用的链接和资源 (Useful links and resources)

Libraries for building surveys: SurveyJS

建筑测量图书馆： SurveyJS

Some commercial survey services include: Survey Monkey and Typeform

一些商业调查服务包括： Survey Monkey和Typeform

示例项目 (Example project)

贡献 (Contributing)

You are welcome to contribute to the project in the GitHub repository! Any contribution is highly appreciated.

欢迎您在GitHub存储库中为该项目做出贡献！ 非常感谢任何贡献。

You can contribute in two ways:

您可以通过两种方式做出贡献：

1. create an issue and tell us your idea. Make sure that you use the new idea label in this case;

   提出问题并告诉我们您的想法。 在这种情况下，请确保使用新的想法标签。

2. fork the project and submit a PR. Before doing that, please make sure that you read and follow the Contribution Guide (you can find it in the repository);分叉项目并提交PR。 在此之前，请确保您已阅读并遵循《贡献指南》(可以在资源库中找到它)；

添加您自己的示例 (Add your own examples)

You can also add your own examples to the projects after you have completed them. I highly encourage you to do this as it will show others what amazing things you have built! ?

完成示例后，您也可以将自己的示例添加到项目中。 我强烈建议您这样做，因为它可以向其他人展示您建造了哪些惊人的东西！ ？

传播这个词！ (Spread the word!)

If the information from this article and from the repo was useful to you in any way, make sure you give it a star ?, this way others can find it and benefit too! Together we can grow and make our community better!

如果本文和回购中的信息对您有任何帮助，请确保给它加一个星号，这样其他人也可以找到它并从中受益！ 我们可以共同成长，并使我们的社区变得更好！

Do you have any suggestions on how we could improve this project overall? Let us know! We’d love to hear your feedback!

您对我们如何整体改善该项目有任何建议吗？ 让我们知道！ 我们希望听到您的反馈！

主要贡献者 (Main Contributors ??)

Florin Pop: Twitter and website.

Florin Pop ： Twitter和网站 。

Jim Medlock: Twitter and Medium

吉姆·梅德洛克(Jim Medlock) ： Twitter和媒介

每周编码挑战？ (Weekly Coding Challenge ?)

As a bonus, there’s a Weekly Coding Challenge where you can learn more by practicing your skills on real-world projects. Read The Complete Guide to find out how you can participate! ?

作为奖励，每周进行一次编程挑战，您可以通过在实际项目中练习技能来学习更多。 阅读完整指南 ，了解如何参加！ ？

Originally published at www.florin-pop.com.

最初在www.florin-pop.com上发布。

翻译自: https://www.freecodecamp.org/news/here-are-some-app-ideas-you-can-build-to-level-up-your-coding-skills-39618291f672/

gradle构建编码