你好呀污淋,我是 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