Blockchain code Metaverse VR

SmartContract×VR×Crypto(595)

スポンサーリンク

//tips

AIに意識が宿ったのか。茶番なのか。

https://gigazine.net/news/20220613-google-engineer-lamda/

仮想通貨の下落がすごいが、一応まだBTCは2020年初旬の3~4倍、ETHは10倍以上。今までが途方もなさすぎた。gas代がリーズナブルになるのはいいこと。

//smart contract

キュレーションサイトの作成に戻り、5ちゃん風のUIにてhttp://localhost:3000/Board/[id]を構築していく。

まずは[id].jsにテキストフィールドを組み込み、データベースBoardの該当ドキュメントのtext配列chat内容とusernameを追加させる。

const [openflag,setFlag]=useState(false)

ログインできていればtrueになるような仕組みを作る。

現時点ではconst [openflag,setFlag]=useState(true)とし、表示の流れを見る。

const [details,setDetails]=useState(‘’)をコメントの格納先として設定。

まずはフォーム自体を作成。

{openflag && (
<div>
Add comments
<form noValidate autoComplete="off" onSubmit={()=>{console.log("title")}}>

Details
<TextField
onChange={(e)=>setDetails(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>

<Box textAlign="center">
<Button
type="submit"
varient="contained"
onClick={()=>console.log('aa')}
>
submit
</Button>
</Box>

</form>
</div>
)}

提出とデータベースをつなげるため関数を設計。

<form noValidate autoComplete="off" onSubmit={handleOnAddcomments}>

const colRef= collection(firebaseApp, "Board”)を追加し、usernameは別途ログイン時にローカルに保存させることにし、保存したものを別途登録させる。

単純な追加ではないので、配列への追加をどうにか表現させる必要がある。

フィールド要素の追加はarrayUnionで可能。ど忘れしていたので再度調べ直した。見つかってよかった。

ただ、下記のようにドキュメント名は特定しておく必要があるので、pile.docid = doc.id ?doc.id:nullはデータベースから事前に取得しておく。

const washingtonRef = doc(db, "cities", "DC");

// Atomically add a new region to the "regions" array field.
await updateDoc(washingtonRef, {
regions: arrayUnion("greater_virginia")
});

これを参考に下記のようにした。

async function handleOnAddcomments(e) {
e.preventDefault();

console.log('add comments')

const Ref = doc(firebaseApp, "Board", ninja.docid);
await updateDoc(Ref, {
text: arrayUnion({chat:details,username:"naki"})
})
.then(()=>{
setDetails('')
}).then(()=>{router.reload()})

}

Unhandle d runtime error
Type Error:cannot properties of undifined(reading ‘indexof’)

表記方法が古いのか。Docの使い方が間違っているのか。

const db = getFirestore(app);

なのでfirebaseAppではなくfirebaseを使わなければならいなのか。

ログでいくつか確認する。

const Ref = doc(firebaseApp, "Board", "RJfWZWAONNvRmqBV1lnV");
const docSnap = getDoc(Ref);
if (docSnap.exists()) {
console.log("Document data:", docSnap.data());
}

これでもエラー。promiseが要因のよう。

getDoc(doc(firebaseApp, "Board", "RJfWZWAONNvRmqBV1lnV")).then(docSnap => {
if (docSnap.exists()) {
console.log("Document data:", docSnap.data());
} })

こちらにてドキュメント内容を取得することができた。

これをもとに考えたがupdateの型と異なる。

await updateDocdoc(firebaseApp, "Board", ninja.docid)).then(docSnap => {
if (docSnap.exists()) {
console.log("Document data:", docSnap.data());
} })

https://zenn.dev/arark/articles/60927323db8697

https://stackoverflow.com/questions/68308510/firestore-arrayunion-returns-firebaseerror-function-documentreference-update

https://stackoverflow.com/questions/69570638/firebase-v9-firestore-add-2-documents-one-by-one

色々探っていると { products_array: arrayUnion(product_id) }の使い方は合っている。

Dbが渡せればもっとシンプルにできるのではと考え、dbの大元を確認。

https://firebase.google.cn/docs/firestore/quickstart?hl=ja

const db = getFirestore(firebase);

こちらで様子見。

async function handleOnAddcomments(e) {
e.preventDefault();

console.log('add comments')
const db = getFirestore(firebase);

const Ref = doc(db, "Board", ninja.docid);

await updateDoc(Ref, {
text: arrayUnion({chat:details,username:"naki"})
})

.then(()=>{
setDetails('')
}).then(()=>{router.reload()})

}

これでもエラー。

const Ref = doc(db, "Board", "RJfWZWAONNvRmqBV1lnV”);でも試す。

データベースにきちんと反映できた。

どうやらninja.docidがダメなよう。ninja[0].docidとしなければならなかった。[0]で問題ないのはidでドキュメントを一つに絞っているためdocidも一つしかないため。

async function handleOnAddcomments(e) {
e.preventDefault();

console.log('add comments')
const db = getFirestore(firebase);

const Ref = doc(db, "Board", ninja[0].docid);

await updateDoc(Ref, {
text: arrayUnion({chat:details,username:"roro"})
})

.then(()=>{
setDetails('')
}).then(()=>{router.reload()})

}

問題なく稼働。

データを登録した後にリロードしてBoardに登録したものを即表示させるようにした。

書き込みの際には登録確認を行う。

登録の確認は下記などで良さそう。

localStorage.getItem('authhistory')
localStorage.getItem('authuserid')
localStorage.getItem(‘username’)

useEffect(() => {部分にフラグのオンオフを加える。

const [openflag,setFlag]=useState(false)

useEffect(() => {
if(localStorage.getItem('authhistory')){setFlag(true)}

}
, [])

これで{openflag && (が機能する。

{openflag && (
<div>
Add comments
<form noValidate autoComplete="off" onSubmit={handleOnAddcomments}>

Details
<TextField
onChange={(e)=>setDetails(e.target.value)}
・・・

素晴らしい。

現時点ではBoardの表示が先のBoardの省略ページのgridを継承しているのでうまくページ全体対応するものに変換する。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.