Blockchain code Metaverse VR

Crypto×VR×SmartContract(557)

スポンサーリンク

//tips

//smart contract

Staticpropsで前処理する準備を行う。

export default function Index({ ninja }) {の形を作り、export const getStaticProps = async (context) => {から値を渡せるようにしていたところ、どちらにせよstorageに対して総当たりでデータの内容を吐き出させるのでエラーが出るのは変わらなく、さらにMAXidの取得で二度手間になりそうな頃がわかってきた。

ここは素直にstorageのimageurlをfirestoreに格納しておく方がよさそう。

useEffect(() => {内部をmaxidを取得するだけの単純なものに戻す。

下記は一旦保留。

if(MAX!=0||MAX!=undefined||MAX!=null){
console.log('abc')
console.log(MAX)
const firestorage = getStorage();

for (let i = 1; i < MAX+1; i++) {
console.log('abcd')

const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+i+"/image.jpg"
)
console.log('abcd')

getDownloadURL(gsReference).then(url => {
//return Promise.resolve(true);
urllist.push(url)
console.log(i)
console.log(MAX)

})
.catch(error => {
if (error.code === 'storage/object-not-found') {
return Promise.resolve(false);
} else {
return Promise.reject(error);
}
});

Storageにあるimageのurlパスをもとにデータベースにstorageurlという項目でアップしていく。

この処理は後でimageのアップロード部分に追加する。

まずはこのstorageurlのリンクをfirestoreから取得できることを確認していく。 getStaticPropsで取得物をninja配列に格納。

export const getStaticProps = async () => {
//console.log(context)
//console.log('aa')

let posts = []

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

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

snapshot.docs.forEach(doc => {
const data = doc.data()
console.log('data.title')

const pile={}
//条件式 ? trueの処理 : falseの処理
pile.userid = data.userid
pile.username = data.username?data.username:null
pile.docid = doc.id ?doc.id:null
pile.storagelink = data.storagelink?data.storagelink:null

posts.push(pile)

});

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

return {
props: { ninja: posts }
}
}

こちらで取得物の確認。

export default function Index({ ninja }) {
console.log(ninja)

きちんとninjaの配列に格納されたことが確認できた。

さらにrendering部分を下記のようにすることで画像表示とクリックした際に画像んも所有者の[id]ページに飛ばすように設定できた。

<h2>ALL Players</h2>

{ninja.map((item,index) => (
<div key={index}>
{item.storagelink &&
<Grid item xs={12} md={6} lg={4} key={index}>
<img src={item.storagelink} alt="" width="100" height="100" onClick={()=>router.push('/ID/'+item.userid)}/>
</Grid>
}
</div>
))}

次にnftimageの登録部分を加工することでstorageからfirestoreのデータベースにurlの格納が行われるようにする。

Set My Avatar
<form onSubmit={handlenftSubmit}>
<input type="file"  onChange={handlenftChange} />
<button className="button">Send</button>
</form>

Editの上記箇所がnftアップロード箇所となるので、handlenftSubmit関数を加工する流れになるか。

const handlenftSubmit = e => {
e.preventDefault()

console.log(nftimage.name)

try {
const imageRef = ref(firestorage, ninja[0].userid+'/'+'image.jpg')
console.log(imageRef)

uploadBytes(imageRef, nftimage).then(() => {
console.log("Uploaded a file!")
router.reload()
})

} catch (err) {
console.log(err)
}
}

アップロードしたらその場でurlを取得し、forestoreへのアップロードまで行うようにする。

同時に既にnft画像を保有しているかの判断で分岐させる必要もある。

Propsに下記を追加。
pile.storagelink = data.storagelink?data.storagelink:null

if(Item.storagelink !=null||Item.storagelink !=undefined){

if(storagelink==undefined||storagelink==null||storagelink==''){
setstoragelink(Item.storagelink)
setstoragelinkdocid(Item.docid)
}
}

const [storagelink, setstoragelink] = useState('')
const [storagelinkdocid, setstoragelinkdocid] = useState('')

handlenftSubmit にこれらの要素を適用させて分岐させる。

const handlenftSubmit = e => {
e.preventDefault()

console.log(nftimage.name)

try {
const imageRef = ref(firestorage, ninja[0].userid+'/'+'image.jpg')
console.log(imageRef)

uploadBytes(imageRef, nftimage).then(() => {
console.log("Uploaded a file!")
//router.reload()
}).then(() => {
console.log("Get storageurl!")
getDownloadURL(imageRef)
.then(url => {
//setImage(url)
//データベースにstoragelinkがあるか確認
if(storagelink===null||storagelink==''){
console.log('aaa')

addDoc(colRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
storagelink:url
})
}else{
console.log('bbb')

const updateRef = doc(firebaseApp,'mydata',storagelinkdocid);
console.log('currentdocid')

updateDoc(updateRef, {
storagelink: url
});

}
router.reload()

})
})

人気の記事

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.