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

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

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.