---
# System prepended metadata

title: BAKAJOHN
tags: [Blockchain project]

---

###### tags: `Blockchain project`
- [備份](/Q_MuC9CFRH2CvKcdXiXnfA)
# BAKAJOHN
# :zebra_face: 
:::info
:key: **目標**
> 【7/10更新】目標是做出 dynamic NFT。客戶端 mint 後就可以讓圖片顯現出來，客戶再做 2 次、3 次交易之後就會讓圖片產生不一樣的變化。
:::

:::success
:bulb: **HINT** 
> *Be free to ask and discuss with every teammate. **There is no dumb questions!** Just keep learning and having fun!*
:::

# Dynamic NFT
## 主題方向
[這裡](https://gist.github.com/FoodChain1028/08e5c6744bc7364f7e515563c1da68ee)

## 圖像部分
### 圖的大小
1020 x 1614

### 特色
- 1. <font color=green>【保留】</font> 在mint前只知道**眼睛**長怎樣，但是其他部分會隱藏。
在 mint 前只看的到眼睛，像是這樣
![](https://i.imgur.com/CKWcaOk.png)
mint 之後才會得到一張完整的圖。
![](https://i.imgur.com/ShgkNIC.png)
- 2. 融合台灣的特色:
    - nft風格台式style
        1.  花襯衫
        2.  原住民族服飾(可不用怕政治不正確)
        3.  客家花布
        4.  阿公ㄉ白色吊嘎（？）
        5.  8+9 style (平頭、金項鍊、全身黑、包手刺青)
        6.  塑膠掃把(紅綠那個)
        7.  藍白拖
        8.  斗笠
        9.  珍奶
        10.  紅色塑膠袋
        11.  菜市場袋子
        12.  雞排
        13.  檳榔
        14.  金門高粱
        15.  台灣鳳梨
        16.  臭豆腐
        17.  皮蛋
        18.  香菜
        19.  豬血糕（花生粉）
        20.  維士比
        21.  維大力    

---
# :clock10: Road Map
## 開發階段
### 第一階段 (雛形)
- 前端:
    - 網頁基本架構 (像是有什麼頁面?)
        - introduction
        - roadmap
        - gallery [BAYC的gallery](https://boredapeyachtclub.com/#/gallery)
        - mint
        - FAQs
        - team
        - community
- DApp:
    - mint button
    - 連接 wallet。
- 後端:
    - 學會如何使用 mongoDB
- 智能合約:
    - 學習 solidity 基本語法、合約繼承、ERC721 的函式
### 第二階段 (優化)
- 前端:
    - 網頁上的動態 hover、UI 上的優化
    - gallery 架構建好
- 後端:
    - 建立我們自己需要的資料庫 (利用 mongoDB 上的 web service，聽 Sen 講容量 & 流量應該是夠的)
- 智能合約:
    - 學習 dynamic NFT 寫法
        - [1](https://www.youtube.com/watch?v=dNRd_ym0WeQ)
        - [2](https://www.youtube.com/watch?v=E7Rm1LUKhj4)
        - [3](https://docs.nftport.xyz/docs/nftport/ZG9jOjI4NzY0NTY1-how-to-create-dynamic-nf-ts)
    - 學習空投寫法

### 第三階段 (測試與部屬) - 在測試鏈上做
- 前端:
    - 與後端測試 gallery 的功能
- DApp:
    - NFT dynamic NFT 還不太知道怎麼做(之後會更新)
    - 測試 mint、wallet 的功能
- 後端:
    - 與前段測試 gallery 的功能
- 智能合約:
    - 合約完成
    - 測試白單、dynamic NFT、空投功能
### 第四階段 (修 bug、宣傳、賺錢!) - 
- 網頁可能會有一些沒抓到的 bug -> 修復。
- 企劃組大力宣傳。
---
 
## 前後端系統圖
![](https://i.imgur.com/fzRE0Ne.png)
---
## 時程
| 階段 | 時間點 | 須完成項目                                                                                                                                                                                                            | 完成與否           |
| ---- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| 一   | 7/6    | 決定主題與方向                                                                                                                                                                                                       | :heavy_check_mark: |
| 一   | 7/22   | - **前端**: 設計圖完成。<br/> - **後端**: 學習 mongoDB、API。 <br/> - **智能合約**: solidity基本語法。 <br/> - **企劃組**:發文排程、活動排程(空頭日期、白單日期)。 <br/> - **繪師**: 每種部件至少產出 2 個。          |            設計圖還沒出來 :expressionless:         |
| 一   | 8/5    | - **前端**: 可以連結 provider、網站大致上功能都完成。<br/> - **後端**: 建立資料庫。<br/> - **智能合約**: 智能合約完成、Dynamic NFT部屬測試。 <br/> - **企劃組**: 尋找合作項目方 <br/> - **繪師**: 每種部件產出1-2個。 |                    |
| 二   | 8/12   | - **前端**: UI 的優化<br/> - **前後端**: gallery 的架設<br/> - **智能合約**: Dynamic NFT部屬測試。 <br/> - **企劃組**: 按照排程進行活動 <br/> - **繪師**: 每種部件產出1-2個。                                         |                    |
| 三   |   8/20 以前  | - **前後端**: 測試各種功能，包含 wallet、mint、gallery、每個網頁有無 bug<br/> - **智能合約**: 測試 dynamic NFT 與 DApp 的功能 <br/> - **企劃組**: 按照排程進行活動 <br/> - **繪師**: 全部的部件完成。 <br/> - **合圖**: 了解合圖方法、如何儲存、放到 IPFS/ 其他儲存空間。->給予後端圖片                                                                                                                                                                                                                      |                    |
| 三   | 8/28   | - **前端**: 網站部屬完成。 <br/> - **後端**: gallery測試完成&部屬。<br/> - **智能合約**: Whitepaper 完成、完成 mint 測試、dynamic NFT 功能測試 <br/> - **合圖**: 完成合圖、測試功能 <br/>- **企劃組**: 按照排程進行活動 <br/>                               |                    |                  |
|  四   | 9/17   | 開放大家 Mint。可能會有一些 bug需要修復(不一定有!)。然後**企劃組**加油!                                                                                                                                                                                                        |                    |


---
## 工作內容
### tck 負責部分: 
#### 前端 
- 網站設計稿
- 網頁架構 react 拉 css
#### DApp
- 串接 API
- wallet 如何登入
- 學 web3.js & ethers.js 連接智能合約

### Rebecca 負責部分
#### 後端
- mongoDB
    - 請服用 [Mern stack - mongoDB](https://www.youtube.com/watch?v=mrHNSanmqQ4&t=9112s&ab_channel=freeCodeCamp.org)
- gallery
    - [BAYC 範例](https://boredapeyachtclub.com/#/gallery)，但是他們好像有個 bug 是如果選到了沒有發行的 NFT 會一直繞圈圈，可能可以改成「找不到」之類的。

### FC、EM 負責部分
#### 智能合約
- 學習進度:
    - solidity 基本語法
    - ERC165
    - ERC721
    - 繼承
    - 怎麼使用 dynamic NFT (FC)
    - 白名單 (FC)
    - 空投
- 合圖:
    - IPFS


## 會議記錄
### 6/14
- 圖片分成不同的部件，之後利用程式生成。
- 看看繪師的風格以及草稿，再畫網站的設計圖。
- 原本分成上下半部的方式改成在 mint 之前只露出眼睛。mint 後就可以看到完整的圖片。
- 每一個角色的 NFT 會分成三個階段，集滿三個階段可以得到一張會動、有顏色的 gif/ NFT。
- 政傑 & Sen: 滾動式討論網站的設計稿，下禮拜呈現給大家看。
- 仲嘉: 下禮拜開會提供一個前端的部分給大家看。
- 社群大大們: 研究一下 NFT 賦能、社群運作、行銷手法、加入白名單的方式等等，下禮拜也呈現給大家看。

### 6/24 
- 風格: Jojo
- 企劃組(N、Corn、淮)下禮拜前會給 Road Map 讓大家投票
- 時程(deadline) 另外公布
- 鍾計算大概預計發的圖與上鏈需要的錢

### 7/6
- 企劃組詳細介紹一下每個 Roadmap 的樣子 :+1:
- 投票 -> Dynamic 獲勝
- 政傑拿一些圖給大家看 :+1: 
- 設計圖什麼時候可以出來?

### 7/13
1. @artist 記得要給大家看你畫好的圖。評估一下產量如何。 2. @marketing 給大家看社群的預計排程 (e.g. 網站何時要上、活動大概什麼時候開始)。 
3. @鍾富全 FoodChain 會給大家看一下開發組的工作內容與開發時程。
4. @cooksen (如果可以的話)給大家看一下開發文件。
5. @artist   @full-stack developer 給大家看一下網頁設計稿 
6. 開「大家下次的開會時間」的when2meet。 看過幫我按ㄍ 
7. 投票結果:專案名字 : Bakajohn、Dynamic NFT 發行方式: 分三個階段，(1)正常人(2)表情變生氣(3)變成8+9

### 7/20

1. @artist 給大家看這禮拜的產出，將部件放上 google drive 資料夾中。
2.  
    - @marketing 報告一下這禮拜進度，還有下禮拜會有哪些行動？
    - @marketing 可以預估一下追蹤人數(雖然我知道有點困難)
3.  
    - @cooksen 和 @Rick | Elysium 跟大家報告一下網站設計的情況，希望設計圖越快出來越好。
    - 網站上的圖由誰負責繪製？
    - 設計稿完成後 @cooksen  & @tck  & @Rick | Elysium 可能需要馬上討論。
4. @becca 大概說一下學習進度(不要有壓力哈哈)
5. @鍾富全 FoodChain 研究 dynamic NFT 合約寫法，跟大家分享一下。

### 7/28
1. @artist 給大家看一下產出。
2. @cooksen & @夏到政傑 給大家看一下目前網頁設計的狀況， @tck  看一下有沒有問題，也可以約時間一起討論需要什麼動態設計。
3.  - @marketing 報告上週進度：
        - 粉絲數量目前多少
        - 有無找到可以幫推的粉專。
    - @marketing 社群近期有沒有什麼活動？
### 8/4
1. NFT圖：@artist 產出進度，傳到雲端。（ @夏到政傑 說他可能需要人幫忙畫部件 QQ）。 
2. 網頁設計： @artist 、 @full-stack developer 、 @DApp developer。 
    - 網頁部分製作得如何了？目前有網頁可以看ㄌ嗎？ 
    - 動畫如何解決？ 
3. @marketing ： 
    - Twitter 粉絲數量與 DC 數量如何解決？ 
4. @cooksen @tck 你們目前有想好 gallery 的形式了嗎？ 
5. 大家注意 8/5 的期限，目前網站設計都還沒有做好，可能要加快，先產出一個模板出來。
