你好呀污淋，我是 Bruce，元宇宙賞金黑客組織 Web3HackerDAO 創(chuàng)始人铃诬，在這里我主要分享我對世界的所見所聞蘸际、Web3 的一些看法理解以及技術(shù)積累文字座哩。
Web3HackerDAO 是一個由“元宇宙賞金黑客”為中堅產(chǎn)品開發(fā)力量的從全人類角度思考而開發(fā)的 Web3 產(chǎn)品的一個去中心化的黑客組織。
這個腳手架是 Bruce 多次比賽并連續(xù)拿了 10 幾個Web3黑客松獎后積累的一套可以開箱即用的 Web3 前端腳手架捡鱼，這個月Web3 黑客松比賽有好幾個八回，目前要參賽的 idea 正在瘋狂腦暴構(gòu)思中酷愧，昨天剛剛從新過了一遍 一個解決方案來讓你的 NFT 擁有無限可能 的 Diamond 合約架構(gòu)的腳手架代碼驾诈。
昨天到今天剛剛加入了 2 位 賞金黑客，要一起參與這輪的 Web3 黑客松比賽溶浴，忽然發(fā)現(xiàn)我可能沒有介紹清楚這套代碼的邏輯乍迄，幸虧第一位加入的黑客同學(xué)是正好也有類似的邏輯才一看我之前的文章介紹就明白這個“賞金黑客”腳手架的意義！
在文章結(jié)尾我附帶了兩個已經(jīng)開源的拿了Web3黑客松獎的部分組件代碼士败，歡迎查看闯两！
時間緊迫，這里我簡單介紹下這個 Web3 開發(fā)前端腳手架的核心幾個特性谅将，以及整個 Web3HackerDAO 生態(tài)的后續(xù)整體架構(gòu)脈絡(luò)漾狼。
開箱即用的 Web3 前端開發(fā)腳手架
Web2 從業(yè) 10 幾年，到最后會發(fā)展到了低代碼等饥臂，其實本質(zhì)是對代碼的進(jìn)一步抽象逊躁。雖然各種框架語言不斷推陳出新，但是從業(yè)務(wù)角度來看隅熙，不外乎各種登錄稽煤、支付、數(shù)據(jù)組件業(yè)務(wù)的抽象化囚戚，使其方便后續(xù)快速開發(fā)等酵熙。
到了 Web3，一樣的出現(xiàn)各種不同的框架方案驰坊，當(dāng)然在前端還是 Vue匾二，React 或其他 Web2 一樣的前端框架，而核心關(guān)鍵在于有一套乘手的解決方案拳芙。
對于市面上各種 Web3 教程或者資料合集察藐、Awesome 系列研究了一波后，總結(jié)了這樣一套基于 Vue3 技術(shù)棧的框架方案态鳖，目的在于幫助還不熟悉 Web3 開發(fā)的同學(xué)可以比較低成本的能介入開發(fā)一個完整的 Web3 應(yīng)用转培。
當(dāng)然這個框架方案并不是只能在初級階段使用，而是適用于產(chǎn)品化應(yīng)用開發(fā)項目的浆竭，基本上是 Bruce 最近半年的最佳實踐的反復(fù)總結(jié)的浸须。
前端框架使用 Vue3惨寿，是基于 https://github.com/antfu/vitesse 提供的最佳實踐腳手架基礎(chǔ)上增加了 Web3 業(yè)務(wù)組件搭建的。
1. 添加了常用的組件删窒，整套 UI 是基于 TailwindCSS 的
? loading
? LoginModal: Web3 登錄
? OnboardModal: 在用戶瀏覽器未安裝 Metamask 時進(jìn)行引導(dǎo)下載的組件
? 基本按鈕組件: 添加了點擊音效功能
? 彈窗組件: 用于信息提示等
? 編輯器組件：基于 @kangc/v-md-editor 包進(jìn)行了二次封裝
下方截圖中一些目錄是某些不同項目的組件的目錄裂垦，非所有組件都是公共組件。
一般是先針對某個項目開發(fā)了某個組件肌索，后面多個項目確實重復(fù)使用了某個組件才去抽離出來作為通用組件蕉拢。
2. 基于 IPFS 服務(wù)的圖片、文件管理組件
? 可拖拽上傳
? 單個圖片上傳及展示: 可用于頭像诚亚、文章頭圖的上傳表單使用
? 多個圖片上傳及展示: 可用于相冊等表單組件
? 圖片自動上傳到 IPFS（基于 NFT.Storage 的服務(wù)封裝）
3. 使用 .env 文件來本地開發(fā)可以設(shè)置 VITE_PROJECT_FOLDER
? 多個不同項目可以放在一個代碼庫里而互相不干涉晕换，我們以建立新項目
awesome-web3為例? 不同項目在 pages 目錄下新建一個對應(yīng)的子目錄即可，這里我們建立
/pages/awesome-web3目錄? 復(fù)制
/public/default目錄為/public/awesome-web3目錄站宗，可以自行替換里面的圖片 logo 等為新項目的 logo闸准，這些 logo 會被用到瀏覽器 favico 或者一些組件的布局 logo 里面?
.env內(nèi)設(shè)置VITE_PROJECT_FOLDER=awesome-web3
4. 自動化的部署策略
目前代碼是部署到 vercel 上并設(shè)置了自動化的域名映射的，簡單來說是這樣的：
? 不同的 branch 會在 vercel 上有對應(yīng)設(shè)置的域名映射
? 不同的 branch 在 vercel 上也有設(shè)置不同的環(huán)境變量參數(shù)
? 一旦 push 新的代碼到該 branch梢灭，則 vercel 會自動觸發(fā) build 該域名的代碼夷家，而不會和其他項目沖突
? 在某個項目開發(fā)到一定程度階段時，再 merge 到 main 分支敏释，這樣該項目開發(fā)過程中新增的一些公共的組件或者功能則可以共享給其他項目使用
還有其他更多特性库快，待這個月密集的幾個 Web3 黑客松比賽過后（總獎金超過 100萬美金：Web3 賞金黑客 11月-12月可以關(guān)注的幾個黑客松比賽 ，總共獎金超過100萬刀钥顽！）义屏，會回過頭來整理下項目的多語言官網(wǎng)以便更多黑客伙伴加入“元宇宙賞金黑客”組織一起改進(jìn)這個腳手架！
是的耳鸯，要作為全球的一個統(tǒng)一的 Web3 前端開發(fā)平臺來發(fā)展的湿蛔！因為本身“元宇宙賞金黑客”組織要開發(fā)的 Web3 產(chǎn)品基本上都是基于全人類使用的角度來做的，并不會太在意國內(nèi)或者國外市場的區(qū)別的县爬。
招募這個月一起參與 Web3 黑客松的伙伴
目前已經(jīng)有兩位伙伴加入阳啥，歡迎更多想要介入 Web3 開發(fā)的伙伴加入成為“元宇宙賞金黑客”的一員！一起打造 “Web3 的 DApp 工廠”财喳。
這個月接下來時間 Bruce 會花更多在和 “賞金黑客" 成員一起快速構(gòu)建幾個 idea 參加幾個 Web3 黑客松比賽上察迟，歡迎感興趣的黑客們加入，一起使用改進(jìn)這個“開箱即用”的 Web3 開發(fā)套件腳手架耳高！
參與開發(fā)項目的伙伴扎瓶，如果項目有拿到 Web3 黑客松獎，則會根據(jù)具體貢獻(xiàn)分配一部分獎金做為貢獻(xiàn)獎勵泌枪！
Web3HackerDAO 的伙伴分以下幾類：
1. 賞金黑客
這是整個組織的核心開發(fā)力量概荷，他們要具備極強的好奇心，也樂于學(xué)習(xí)新的技術(shù)及知識碌燕，能全棧開發(fā)整個產(chǎn)品误证，這樣一旦有什么新的 idea 可以非臣萄Γ快速的在 DAO 內(nèi)組建人數(shù)極少的“賞金黑客” 小分隊，快速的迭代開發(fā)產(chǎn)品愈捅。
加入者需要具備一定的開發(fā)能力遏考，不一定需要馬上是技能點都點滿的。
因為最終在整個 DAO 內(nèi)蓝谨，賞金黑客是自由流動的灌具，他們可能是某個項目的核心開發(fā)者，也可能同時是多個不同項目的早期開發(fā)者譬巫，但是中后期作為維護(hù)支持即可咖楣。取決于每個項目及每個“賞金黑客”的意愿。
2. VC/基金/早期投資者 成員
此類成員需要滿足一定的條件缕题，當(dāng)然最核心會滿足資源資金上的限定截歉，否則 DAO 內(nèi)孵化的項目組會疲于與不同的“走馬觀花”的所謂投資者溝通而浪費大量的可以 Build 的時間胖腾。
賞金黑客經(jīng)過一定時間的開發(fā)后烟零，DAO 會組織線上的多項目同時的 Pitch 大會，讓這類成員可以一次性看多個 DAO 孵化產(chǎn)出的項目咸作。
后面 DAO 也會開發(fā)一系列的工具來做 VC 成員的資產(chǎn)零知識驗證锨阿。
3. 早期嘗鮮種子用戶
此類用戶為平臺的“種子用戶”，會成為平臺的熱心用戶记罚，幫助各個項目組早期找 bug墅诡，同時在項目成熟推向市場時，會給與極大的宣傳幫助桐智。
當(dāng)然末早，各個項目也會在平臺的統(tǒng)一的“黑客增長”相關(guān)模塊功能下，給與此類用戶明確的項目獎勵说庭。
以上是目前規(guī)劃的 《元宇宙賞金黑客》組織 Web3HackerDAO 的幾類用戶然磷，也許后續(xù)也會進(jìn)一步調(diào)整。具體的要求規(guī)則可以聯(lián)系 Web3Hacker 刊驴！
兩個開源的獲獎的代碼說明
1. Stockx3[1]
這個項目一開始是想開發(fā)個 Web3 版本的 Stockx.com 來著姿搜，后來發(fā)現(xiàn)可能要做真正球鞋交易平臺，可能對于平臺運營來說比較重捆憎，后面就簡化成舅柜，任何人可以在上面發(fā)布自己的產(chǎn)品信息了。
每發(fā)布一個產(chǎn)品信息其實就是發(fā)布了一個新的 ERC1155 的 NFT躲惰，只是我在產(chǎn)生 NFT 的元數(shù)據(jù)提交到 IPFS 并使用 LitProtocol 來做了加密部分信息的處理致份，這樣只有購買了此 NFT 的用戶，才可以獲得加密后的信息础拨。
這個產(chǎn)品已經(jīng)在 Web3HackerDAO 內(nèi)立項氮块，并會從新整理并開發(fā)為 "SellX3.com"瞬沦，作為 Web3 的亞馬遜吧。
2. NftTop.Best: Web3-ProductHunt[2]
顧名思義雇锡，有用過 Product Hunt 的同學(xué)應(yīng)該明白什么意思逛钻，不過這個項目有更加進(jìn)一步的動作。
他相當(dāng)于集成了產(chǎn)品提交锰提、眾籌曙痘、捐贈、評論立肘、投票幾個功能為一體的 Product Hunt边坤， 雖然我看到 Product Hunt 現(xiàn)在也推出了 Web3 頻道，不過似乎他并沒有真正融入 Web3谅年，這個項目后續(xù)會進(jìn)一步運用落地到 https://NFTTop.Best 茧痒， 作為 DAO 孵化項目對外公開的一個渠道，這樣所有用戶都可以對我們的產(chǎn)品進(jìn)行投票融蹂、捐贈旺订、評論。
ok超燃，以上就是今天的內(nèi)容区拳，感興趣加入 Web3HackerDAO 的同學(xué)歡迎加 Web3Hacker !
---全文完
往期文章推薦
? 腦洞大開之從中醫(yī)是先人個人努力打造的大數(shù)據(jù)系統(tǒng)累積的結(jié)果聯(lián)想到的 Web3 對世界的作用
? 一個解決方案來讓你的 NFT 擁有無限可能 當(dāng)前 1244 閱讀，￥2000 贊賞
? 開源一個連續(xù)拿了 3 個 Web3 黑客松獎項目 當(dāng)前 953 閱讀届良，￥300 贊賞
引用鏈接
[1] Stockx3: https://github.com/NftTopBest/stockx3
[2] NftTop.Best: Web3-ProductHunt: https://github.com/NftTopBest/hackathon-city-filecoin-nervos
