Blockchain code Metaverse VR

Crypto×VR×SmartContract(542)

スポンサーリンク

//tips

//smart contract

authnameが取得できない要因はdocidの指定部分かと思うので、そちらを調整していく。

[StorageError [FirebaseError]: Firebase Storage: Object 'undefined/image.jpg' does not exist. (storage/object-not-found)] {
code: 'storage/object-not-found',
customData: { serverResponse: '' },
_baseMessage: "Firebase Storage: Object 'undefined/image.jpg' does not exist. (storage/object-not-found)"
}

これは格納しているimage storageの方に該当するフォルダがないためおきのかと考えた。

mailアドレス:"naki@gmail.com”でフィルターし、そちらのuserid:1を取得してもstorageにフォルダがないのかと思ったがきちんと1フォルダは事前に用意してある。

Useridとフォルダの生成は別途整えるとして、authnameが取得できない問題をクリアにしていく。

ログで確認していくとどうやらstateの反映よりも前にauthnameをもとにstorageに読み込みをかけてしまうのが問題のよう。

if(authname!=undefined){

const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+authname+"/image.jpg"
)

getDownloadURL(gsReference)
.then(url => {
setImage(url)
})
.catch(err => console.log(err))

}

上記でトライするとLayout.jsはマウント時にしか読み込まれないため、マウント後のstate反映への対処ができない。

似たような使用例を探してみたがなかなか見つからない。コンポーネントの方でデータベース接続するのはやはり無理があるか。_appを編集するなどで対応できるかもしれない。

https://stackoverflow.com/questions/66302551/next-js-fetch-data-once-to-display-on-all-pages

画像関係の表示は一旦取りやめ。

シンプルな形に戻す。

Auth登録時にデータベースへの登録連携ができるように調整する。同時にstorageへのimageアップロードの仕組みを再度確認し、useridと紐づいた表示が行われているか確認。また、そもそものuseridの自動付与の仕組みも追加してあげる必要がある。

現状のauth登録はTOPページに機能を移しており、sign upボタンを押すことでmailとpassを設定できるようにしている。

handleOnAuthにてこちらの関数は実装されており、内容としては下記の形になっている。

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

console.log('aiu')
const email=umail
const password=upass

createUserWithEmailAndPassword(auth,email,password)
.then((cred)=>{
console.log('user created:',cred.user)
setUmail('')
setUpass('')

})

}

ここにデータベースへの追加も一緒に行わせられるよう設定を加えていく。

edit.jsのadd contents部分が参考になるか。

handleOnAddcontentsの中身を見ていく。内容としてはかなりシンプル。

const colRef=collection(firebaseApp,'mydata')

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

console.log('add contents')

addDoc(colRef,{
title:title,
details:details,
category:subcategory,
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail

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

}

ただ、ネックとなるのはninja[0]などで事前取得しているデータベースの情報を別途取得する必要があるということ。

事前にuseridの最後尾だけ取得したい。
配列にidを格納して最大値を抽出すれば良いが、色々注意が必要で単純な.maxの使用は控える。

https://qiita.com/ndj/items/82e9c5a4518fe16e539f

https://www.javadrive.jp/javascript/math_class/index6.html

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max

下記を参考にし、Reduceを使用した安全な方法をとる。

const aryMax = function (a, b) {return Math.max(a, b);}
let ary = [5, 2, 3, 1, 10];
let max = ary.reduce(aryMax); // => 10

ベースはid部分を抽出しているgetStaticPathsの内容を踏襲し、その中で最大値を取得する形にする。

let posts = []

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

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

});

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

下記にて対応し、ログの確認。

const aryMax = function (a, b) {return Math.max(a, b);}

//最大userid値の取得
let posts = []
const colRef= collection(firebaseApp, "mydata")
getDocs(colRef)
.then((snapshot)=>{
snapshot.docs.forEach(doc => {
posts.push(JSON.stringify(doc.data().userid))

});

}).then(()=>{
setMaxid(posts.reduce(aryMax))
})

console.log('Maxid')
console.log(Maxid)

きちんとMaxidが取得できた。

handleOnAddcontentsへの組み込みトライ。

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

console.log('aiu')
const email=umail
const password=upass

createUserWithEmailAndPassword(auth,email,password)
.then((cred)=>{
console.log('user created:',cred.user)
setUmail('')
setUpass('')

}).then(()=>{

addDoc(colRef,{
userid:Maxid+1,
username:email,
date:Date.now(),
mail:email

})
})
}

うまくいっていないよう。

Uncaught (in promise) TypeError: (0 , firebase_auth__WEBPACK_IMPORTED_MODULE_5__.addDoc) is not a function
at eval

のエラーが問題か。

ログインしたままでできないのかもしれないと気づき。ログアウトして再度トライ。

Authenticationの方にはきちんとデータベースに反映されているが、firestoreデータベースの方には反映されていない。

また地味にauthのpassの長さが6桁必要とのことなので事前にエラーは出さないようなコメントを記入しておく。

Thenでの連動がいけないのかと考え、一旦分離してチェック。

const docRef = awaitaddDoc(colRef,{
userid:Maxid+1,
username:email,
date:Date.now(),
mail:email
})

console.log("Document written with ID: ", docRef.id);

adddoc is not function と出てくる。

何かと思ってよく読むとfirestoreでなく、authのadddocを引用している。authの方のaddDocを消去してトライ。

素晴らしい。authデータベースにもfirestoreデータベースにも登録が確認できた。

Auth登録時にデータベースへの登録連携とuserid自動付与の仕組みも追加できた。

次は、storageへのimageアップロードの仕組みを再度確認し、useridと紐づいた表示が行われているか確認していく工程に移る。

※忘れないようメモ
NFTであることを示すためのopen seanなどのリンク場所も作成。その流れで、Linkを自動でカ
スタムして生成できる仕組みも組み込む。

 

人気の記事

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.