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

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

2

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

3

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

4

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

5

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

-Blockchain, code, Metaverse, VR
-, ,

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