Blockchain code Metaverse VR

SmartContract×VR×Crypto(592)

スポンサーリンク

//tips

//smart contract

時刻スタンプの追加表示を組み込む。

ドキュメントにtimeフィールドを追加。

Titleと同様に 下記の形で取得してしまう。

{xitem[index].title}
{item}
time: {xitem[index].time}

Boardスクリプトの方にpile.time = data.time?data.time:nullを追加しておく。

これで追加できるようになった。
Onclickをnoteにつけて別のページに飛ばし、そちらでコメントを記入できるようにする。

{ninja[0]&&
<div>
<Boardedit item={ninja}/>
</div>
}

各ボードのドキュメントに対してidを割り当てて、ページとして表示させるようにする。

これはダイナミックパス作成の流れ。

Pagesフォルダの中にBoardフォルダを作成する。Boardフォルダの中に[bid].jsを作成。

まずは[id].jsの内容をそのまま組み込み改変。

//受け取るcontextの内容を編集
export const getStaticPaths = async () => {

let posts = []

const colRef=await collection(firebaseApp, "Board")

await getDocs(colRef)
.then((snapshot)=>{
snapshot.docs.forEach(doc => {
posts.push(JSON.stringify(doc.data().bid))

});

}).then(()=>console.log(posts))

const paths = posts.map(ninja => {
return {
params: { id:ninja.toString() }
}
})
console.log('paths')

return {
paths,
fallback: false
}
}

//contextは{ params: { id: '2' },などの内容で取得
export const getStaticProps = async (context) => {

let posts = []

const id = parseInt(context.params.id)

const colRef= await collection(firebaseApp, "Board")

const q = await query(colRef,where("bid","==",id))

await getDocs(q)
.then((snapshot)=>{

snapshot.docs.forEach(doc => {
const data = doc.data()

const pile={}

pile.bid = data.bid?data.bid:null
pile.mail = data.mail ?data.mail:null
pile.text = data.text?data.text:null
pile.time = data.time?data.time:null

pile.title = data.title?data.title:null

pile.userid = data.userid

posts.push(pile)

});

})//.then(()=>console.log(posts))

return {
props: { ninja: posts }
}
}

シンプルにhttp://localhost:3000/Board/1としたがエラー。

error - Error: A required parameter (bid) was not provided as a string in getStaticPaths for /Board/[bid]

なぜか.toStringが効いていないと思ったら[id].jsにすれば良いだけだった。bidは[id]のなかに格納する数値なので[bid]とする必要はなかった。

これにて無事に表示された。

http://localhost:3000/Board/1に飛ぶとbidが1のドキュメントを取得し、ninjaに下記のように格納したデータを渡してくれた。

0:
bid: 1
mail: "naki@gmail.com"
text: (2) [{…}, {…}]
time: 8888888
title: "テスト2"
userid: 1

シンプルにBoardで表示した内容をこちらにも映す。

しっかり表示させることができた。

テキストフィールドを組み込み、データベースに追加させる場所を作ると同時にログイン認証を行う。あとはUIを整えれば形ができる。

休日はデプロイ済みのコードを見て、自身のNFTのセキュリティに問題ないか確認を行う。最近ハッキングなどが身近で起こっているから流石に気になる。怖すぎるわ。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.