建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)。
你是否聽過(guò)一萬(wàn)小時(shí)定律?它指的是，要想成為某方面的大師，就必須要實(shí)踐一萬(wàn)個(gè)小時(shí)。雖然并非適用于所有領(lǐng)域，但至少作為一名開發(fā)人員，最有效的成長(zhǎng)方法之一就是投入盡可能多的時(shí)間。
從下面列表中選擇一個(gè)項(xiàng)目并開始編碼吧!使用哪種技術(shù)或工具并不重要，重要的是你親手完成了一個(gè)項(xiàng)目。
[[347664]]
Jira克隆
Jira是Atlassian開發(fā)的專利問(wèn)題跟蹤產(chǎn)品，提供bug跟蹤和靈活的項(xiàng)目管理服務(wù)。產(chǎn)品名稱源自Gojira，Gojira在日語(yǔ)中是哥斯拉的意思。
Jira | 圖源：GitHub
構(gòu)建Jira克隆，你將學(xué)到以下內(nèi)容：
- 拖放(DND)API如何服務(wù)于瀏覽器：每個(gè)Jira板都有一個(gè)看板集合，在那里你可以根據(jù)任務(wù)的進(jìn)度拖放任務(wù)。
- 如何安排用戶角色和訪問(wèn)權(quán)限邏輯：每個(gè)看板都有相關(guān)的成員，成員可能具有不同的訪問(wèn)級(jí)別。例如，項(xiàng)目經(jīng)理可能具有閱讀、編寫和編輯權(quán)限，而客戶可能只有閱讀權(quán)限?？蛻艨梢钥吹秸谶M(jìn)行的工作和已經(jīng)完成的工作，但是他們不能改變團(tuán)隊(duì)當(dāng)前正在進(jìn)行的工作。
- HTML和CSS：從語(yǔ)法層面構(gòu)建應(yīng)用設(shè)計(jì)風(fēng)格是任何人都能擁有的實(shí)用技能。
使用Emoji的Discord聊天
當(dāng)和朋友們一起外出或玩電子游戲時(shí)，Discord是一種有趣的聯(lián)系方式，它專注于聊天頻道中用戶之間的文本、圖像、視頻和音頻通信。每個(gè)Discord頻道都有可供用戶選擇的表情符號(hào)，你的任務(wù)是構(gòu)建包含表情符號(hào)的聊天部分。如果愿意，你可以建立整個(gè)Discord克隆。
構(gòu)建Discord聊天克隆，你將學(xué)會(huì)：
- 如何將網(wǎng)絡(luò)套接字應(yīng)用于聊天。每個(gè)現(xiàn)代網(wǎng)絡(luò)聊天應(yīng)用程序都在以某種方式使用WebSockets。WebSocket是一種計(jì)算機(jī)通信協(xié)議，在一個(gè)TCP連接上提供全雙工通信通道。簡(jiǎn)而言之，服務(wù)器和前端客戶端是同步的。
- 如何使用Electron構(gòu)建跨平臺(tái)的桌面應(yīng)用程序，當(dāng)前版本的Discord就是通過(guò)Electron構(gòu)建的。
Beatbox應(yīng)用
Beatbox應(yīng)用程序會(huì)根據(jù)你當(dāng)前所按的鍵播放不同的聲音，只用鍵盤就可以演奏一段曲子。
圖源：GitHub
構(gòu)建Beatbox應(yīng)用，你將學(xué)會(huì)：
- 為了激活聲音，需要熟悉WebAudio API是如何工作的。
- 使用JavaScript鍵盤。必須弄清楚按的是什么鍵，然后演奏正確的曲子。
Mozilla開發(fā)者文檔：“Web Audio為控制Web上的音頻提供了一個(gè)強(qiáng)大的多功能系統(tǒng)，允許開發(fā)人員選擇音頻源、向音頻添加效果、創(chuàng)建音頻可視化界面、應(yīng)用空間效果(比如移動(dòng))等等。”
Spotify唱片區(qū)
你可以在Spotify上播放和上傳歌曲。Spotify有一個(gè)版塊，可以根據(jù)專輯瀏覽音樂和藝術(shù)家。下面是我最喜歡的專輯之一。
金屬樂隊(duì)(1991)專輯
構(gòu)建Spotify克隆，你將學(xué)會(huì)：
- 如何通過(guò)API獲取數(shù)據(jù)，并為相關(guān)藝術(shù)家顯示正確的專輯。幸運(yùn)的是，Spotify有一個(gè)可以免費(fèi)使用的API：https://developer.spotify.com/documentation/web-api/
- 可以將app構(gòu)建為web或桌面應(yīng)用程序。這兩種應(yīng)用程序都需要了解如何在頁(yè)面上布局元素并對(duì)其進(jìn)行適當(dāng)?shù)臉邮交幚怼?/li>
亞馬遜克隆
亞馬遜剛成立的時(shí)候還只是一個(gè)賣書的小型電子商務(wù)網(wǎng)站，如今，它們已經(jīng)是電子商務(wù)領(lǐng)域的巨人。
從零開始，慢慢來(lái)，為了學(xué)習(xí)要模仿它的每個(gè)特點(diǎn)。不要試圖復(fù)制亞馬遜的商業(yè)模式，而是以學(xué)習(xí)為目的嘗試建立一個(gè)類似的網(wǎng)絡(luò)體驗(yàn)。亞馬遜的核心是一個(gè)大型數(shù)據(jù)庫(kù)，在進(jìn)行搜索時(shí)，它將從數(shù)據(jù)庫(kù)中返回正確的條目。當(dāng)然，亞馬遜遠(yuǎn)不止這些，但這是一個(gè)非常簡(jiǎn)單的例子。
亞馬遜克?。篏ithub
構(gòu)建亞馬遜克隆，你將學(xué)會(huì)：
- 設(shè)置MySQL或者PostgreSQL，學(xué)會(huì)在數(shù)據(jù)庫(kù)中存儲(chǔ)條目。需要將條目存儲(chǔ)在數(shù)據(jù)庫(kù)中，然后再?gòu)闹胁樵儣l目。
- 支持搜索功能。用戶登錄你的網(wǎng)站，搜索條目，你需要給出相應(yīng)的內(nèi)容。你要怎么做？
- HTML和CSS。每個(gè)網(wǎng)站都會(huì)使用的兩種技術(shù)，不管是初學(xué)者的簡(jiǎn)單項(xiàng)目，還是非常復(fù)雜的網(wǎng)站比如Netflix或亞馬遜，都會(huì)用到。
這是我在GitHub上找到的一個(gè)簡(jiǎn)單的亞馬遜克?。?/p>
https://github.com/CleverProgrammers/react-challenge-amazon-clone?ref=HackerTabExtension
Netflix克隆
Netflix是觀看電視劇、電影和紀(jì)錄片的熱門選擇，徹底改變了我們看電視的方式，能夠在任何地方用任何設(shè)備觀看。
Netflix主頁(yè) | 圖源：Netflix
構(gòu)建Netflix克隆，你將學(xué)會(huì)：
- 使用HTML和CSS。
- 可選項(xiàng)：如何通過(guò)API搜索電影和電視劇。
- 音視頻API：Netflix的核心是流媒體服務(wù)，每個(gè)流媒體服務(wù)在某種程度上都包含視頻或音頻。
推特克隆
推特是一個(gè)熱門的討論平臺(tái)，從政治到音樂再到編程，上面有很多小眾社區(qū)，許多人喜歡使用推特和粉絲互動(dòng)。
筆者的推特個(gè)人主頁(yè) | 圖源：Twitter
構(gòu)建推特克隆，你將學(xué)會(huì)：
- HTML和CSS用于與布局相關(guān)的部分。
- 在數(shù)據(jù)庫(kù)中存儲(chǔ)tweet：設(shè)置一個(gè)關(guān)系(MySQL)或一個(gè)非關(guān)系(MongoDB)數(shù)據(jù)庫(kù)。
- 角色管理邏輯：每個(gè)用戶都有一個(gè)檔案，只有自己可以編輯，其他人可以查看。
希望你已經(jīng)為下一個(gè)項(xiàng)目找到了靈感，開始行動(dòng)吧!
分享標(biāo)題：精通編程：自我挑戰(zhàn)，解決一系列前端難題
鏈接地址：http://www.5511xx.com/article/coeipei.html
