介紹下Web3賞金黑客們必備的開箱即用 Web3 元宇宙 NFT 開發(fā)必備腳手架

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


---全文完

往期文章推薦

引用鏈接

[1] Stockx3: https://github.com/NftTopBest/stockx3
[2] NftTop.Best: Web3-ProductHunt: https://github.com/NftTopBest/hackathon-city-filecoin-nervos

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末士葫,一起剝皮案震驚了整個濱河市乞而,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌为障,老刑警劉巖晦闰,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異鳍怨,居然都是意外死亡呻右,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進(jìn)店門鞋喇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來声滥,“玉大人,你說我怎么就攤上這事÷渌埽” “怎么了纽疟?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長憾赁。 經(jīng)常有香客問我污朽,道長,這世上最難降的妖魔是什么龙考? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任蟆肆,我火速辦了婚禮,結(jié)果婚禮上晦款,老公的妹妹穿的比我還像新娘炎功。我一直安慰自己,他們只是感情好缓溅,可當(dāng)我...
    茶點故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布蛇损。 她就那樣靜靜地躺著,像睡著了一般坛怪。 火紅的嫁衣襯著肌膚如雪淤齐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天酝陈,我揣著相機與錄音床玻,去河邊找鬼。 笑死沉帮,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的贫堰。 我是一名探鬼主播穆壕,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼其屏!你這毒婦竟也來了喇勋?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤偎行,失蹤者是張志新(化名)和其女友劉穎川背,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蛤袒,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡熄云,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了妙真。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缴允。...
    茶點故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖珍德,靈堂內(nèi)的尸體忽然破棺而出练般,到底是詐尸還是另有隱情矗漾,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布薄料,位于F島的核電站敞贡,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏摄职。R本人自食惡果不足惜嫡锌,卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望琳钉。 院中可真熱鬧势木,春花似錦、人聲如沸歌懒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽及皂。三九已至甫男,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間验烧,已是汗流浹背板驳。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留碍拆,地道東北人若治。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像感混,于是被迫代替她去往敵國和親端幼。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,044評論 2 355

推薦閱讀更多精彩內(nèi)容