精通编程：自我挑战，解决一系列前端难题

左手的ㄟ右手 2022-12-17 03:27 94阅读 0赞

> 全文共2457字，预计学习时长7分钟

![e4562a98ff3a53e15ea18b0d48fce22a.png][]

图源：unsplash

你是否听过一万小时定律？它指的是，要想成为某方面的大师，就必须要实践一万个小时。虽然并非适用于所有领域，但至少作为一名开发人员，最有效的成长方法之一就是投入尽可能多的时间。

从下面列表中选择一个项目并开始编码吧！使用哪种技术或工具并不重要，重要的是你亲手完成了一个项目。

**Jira克隆**

Jira是Atlassian开发的专利问题跟踪产品，提供bug跟踪和灵活的项目管理服务。产品名称源自Gojira，Gojira在日语中是哥斯拉的意思。

![5589cfe5f8c0f860f78c479eea3c1292.png][]

Jira | 图源：GitHub

构建Jira克隆，你将学到以下内容：

· 拖放（DND）API如何服务于浏览器：每个Jira板都有一个看板集合，在那里你可以根据任务的进度拖放任务。

· 如何安排用户角色和访问权限逻辑：每个看板都有相关的成员，成员可能具有不同的访问级别。例如，项目经理可能具有阅读、编写和编辑权限，而客户可能只有阅读权限。客户可以看到正在进行的工作和已经完成的工作，但是他们不能改变团队当前正在进行的工作。

· HTML和CSS：从语法层面构建应用设计风格是任何人都能拥有的实用技能。

**使用Emoji的Discord聊天**

当和朋友们一起外出或玩电子游戏时，Discord是一种有趣的联系方式，它专注于聊天频道中用户之间的文本、图像、视频和音频通信。每个Discord频道都有可供用户选择的表情符号，你的任务是构建包含表情符号的聊天部分。如果愿意，你可以建立整个Discord克隆。

![2a5ad82f6fb98d3128bd4f1a5df2fc06.png][]

![8e91fb547be86daa7047583f3ca36c31.png][]

构建Discord聊天克隆，你将学会：

· 如何将网络套接字应用于聊天。每个现代网络聊天应用程序都在以某种方式使用WebSockets。WebSocket是一种计算机通信协议，在一个TCP连接上提供全双工通信通道。简而言之，服务器和前端客户端是同步的。

· 如何使用Electron构建跨平台的桌面应用程序，当前版本的Discord就是通过Electron构建的。

**Beatbox应用**

Beatbox应用程序会根据你当前所按的键播放不同的声音，只用键盘就可以演奏一段曲子。

![a2b0102da961e5c9a6228ae70b61b69d.png][]

图源：GitHub

构建Beatbox应用，你将学会：

· 为了激活声音，需要熟悉WebAudio API是如何工作的。

· 使用JavaScript键盘。必须弄清楚按的是什么键，然后演奏正确的曲子。

Mozilla开发者文档：“Web Audio为控制Web上的音频提供了一个强大的多功能系统，允许开发人员选择音频源、向音频添加效果、创建音频可视化界面、应用空间效果(比如移动)等等。”

**Spotify唱片区**

你可以在Spotify上播放和上传歌曲。Spotify有一个版块，可以根据专辑浏览音乐和艺术家。下面是我最喜欢的专辑之一。

![c9749aed1f19bbbebfd01bf68de62711.png][]

金属乐队(1991)专辑

构建Spotify克隆，你将学会：

· 如何通过API获取数据，并为相关艺术家显示正确的专辑。幸运的是，Spotify有一个可以免费使用的API：https://developer.spotify.com/documentation/web-api/

· 可以将app构建为web或桌面应用程序。这两种应用程序都需要了解如何在页面上布局元素并对其进行适当的样式化处理。

亚马逊克隆

亚马逊刚成立的时候还只是一个卖书的小型电子商务网站，如今，它们已经是电子商务领域的巨人。

从零开始，慢慢来，为了学习要模仿它的每个特点。不要试图复制亚马逊的商业模式，而是以学习为目的尝试建立一个类似的网络体验。亚马逊的核心是一个大型数据库，在进行搜索时，它将从数据库中返回正确的条目。当然，亚马逊远不止这些，但这是一个非常简单的例子。

![656e55599bee8a16f50a315e25b5c43a.png][]

亚马逊克隆：Github

构建亚马逊克隆，你将学会：

· 设置MySQL或者PostgreSQL，学会在数据库中存储条目。需要将条目存储在数据库中，然后再从中查询条目。

· 支持搜索功能。用户登录你的网站，搜索条目，你需要给出相应的内容。你要怎么做？

· HTML和CSS。每个网站都会使用的两种技术，不管是初学者的简单项目，还是非常复杂的网站比如Netflix或亚马逊，都会用到。

这是我在GitHub上找到的一个简单的亚马逊克隆：https://github.com/CleverProgrammers/react-challenge-amazon-clone?ref=HackerTabExtension

![42b898ee46b77e0297f522ee8f1b6cac.png][]

**Netflix克隆**

Netflix是观看电视剧、电影和纪录片的热门选择，彻底改变了我们看电视的方式，能够在任何地方用任何设备观看。

![9f80b792fb60181dc9ed398afa62af64.png][]

Netflix主页 | 图源：Netflix

构建Netflix克隆，你将学会：

· 使用HTML和CSS。

· 可选项：如何通过API搜索电影和电视剧。

· 音视频API：Netflix的核心是流媒体服务，每个流媒体服务在某种程度上都包含视频或音频。

**推特克隆**

推特是一个热门的讨论平台，从政治到音乐再到编程，上面有很多小众社区，许多人喜欢使用推特和粉丝互动。

![95685fac0cbc0a5543fea05c6c2df665.png][]

笔者的推特个人主页 | 图源：Twitter

构建推特克隆，你将学会：

· HTML和CSS用于与布局相关的部分。

· 在数据库中存储tweet：设置一个关系(MySQL)或一个非关系(MongoDB)数据库。

· 角色管理逻辑：每个用户都有一个档案，只有自己可以编辑，其他人可以查看。

希望你已经为下一个项目找到了灵感，开始行动吧！

![8746bab6de3552969feb73a6dfdb8ece.png][]

**一起分享AI学习与发展的干货**

**欢迎关注全平台AI垂类自媒体 “读芯术”**

![format_png][]

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）

[e4562a98ff3a53e15ea18b0d48fce22a.png]: /images/20221123/4fae243fde32482e93d8b193f5a2021d.png
[5589cfe5f8c0f860f78c479eea3c1292.png]: /images/20221123/27e8d51f0ee74beea07003c8908a2938.png
[2a5ad82f6fb98d3128bd4f1a5df2fc06.png]: /images/20221123/1c243ff57de14cbca05e715895138d84.png
[8e91fb547be86daa7047583f3ca36c31.png]: /images/20221123/3f0fd35708c64c6892a3ab469e7a94f6.png
[a2b0102da961e5c9a6228ae70b61b69d.png]: /images/20221123/d65222f0677e4697ab283befdd8baf6c.png
[c9749aed1f19bbbebfd01bf68de62711.png]: /images/20221123/239c3e33c29a49c586c386ce34f3f17e.png
[656e55599bee8a16f50a315e25b5c43a.png]: /images/20221123/37b22b0de1eb40acbc383a265d7b6a09.png
[42b898ee46b77e0297f522ee8f1b6cac.png]: /images/20221123/d52af5f60383433fa756e0a5e0fc6334.png
[9f80b792fb60181dc9ed398afa62af64.png]: /images/20221123/bcba70d414a0410093ea790cabf8b9cc.png
[95685fac0cbc0a5543fea05c6c2df665.png]: /images/20221123/b48379f6ce834a0583e614fd8128228d.png
[8746bab6de3552969feb73a6dfdb8ece.png]: /images/20221123/07baedafd1c54ec7aa9ea8fa580d7eb5.png
[format_png]: /images/20221123/9d28c252529142daba2c29a51b3ce5e1.png