Blockchain code Metaverse VR

Crypto×VR×SmartContract(541)

スポンサーリンク

//tips

投資は10個のうち、7個はまやかしで、3つが本物というのを聞いてなるほどと思った。眼力は鍛える一方で、避けられないものとして共存する必要もある。全部避けようとすると本物もいつまでも捕まえられない。

//smart contract

ページの整備継続。

ページ構成に組み込んでいるlauout.jsの中のサイドバーの部分はEditdrawerコンポーネントに格納しているが、こちらのメールアイコン部分などを使用する予定は先になりそうなので表示だけはさせておき、後の組み込みメッセージ機能に割り当てることにする。

//const [myarray,setArray]=useState(['Inbox', 'Starred', 'Send email', 'Drafts'])
const [myarray,setArray]=useState(['Inbox', 'Starred'])

ページ構成がスッキリしたところでlayoutのappbarの中でauth済みのユーザーのnft画像を表示できる方法を模索する。

先にも述べたがlayoutが組み込まれているのが_app.jsで全ページに反映されるため、気をつけつつ、データベースの接続を行う。

ベースとなる考え方はmuiのappbarに追加するavatar機能かと思い、ninja先生のYouTubeを再確認。

import { Avatar } from "@mui/material”;から始める。

avatar:{
marginLeft:20,
}

<Typography>
Mario
</Typography>
<Avatar src="/image.jpg" className={classes.avatar} />

こちらにて、固定値での入力と反映は確認できた。

Avatarの表示画像がない場合のことも考えて、Marioの先頭文字の表記を代わりに表示させる。

const [Capitalname,setCapital]=useState('Mario')

<Avatar className={classes.avatar}>{Capitalname[0].toUpperCase()}</Avatar>

これできちんとusernameの先頭文字のimageも表示することができた。

Authでログインしたuserのnftがない場合はusernameの先頭文字を表示させる形にする。

またログインしていなければLogin表示をここに作っても良いかもしれない。

Authで取得できる内容はmailアドレスとなっているため、メールアドレスの取得から、データベースへのリンクを行わせる。

まずはfirebase関連の一式をlayout.jsに渡す。

import firebaseApp from "../../components/firebase"
import firebase from "../../components/firebase2"

import {
getAuth,
createUserWithEmailAndPassword,
signOut,
signInWithEmailAndPassword,
onAuthStateChanged,addDoc
} from "firebase/auth"

import { getStorage, ref,getDownloadURL,uploadBytes } from "firebase/storage";

import { doc, getFirestore } from "firebase/firestore"
import { collection, getDocs,getDoc, query, where,onSnapshot,orderBy,serverTimestamp } from "firebase/firestore"

そもそものauthのログインの認証は[id].jsの下記にて行っており、authhistoryという名前で設定mailがローカルストレージにて確認できるようになっている。

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

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

signInWithEmailAndPassword(auth,email,password)
.then((cred)=>{
//console.log('user loged in:',cred.user)
localStorage.setItem('authhistory',email)
setUmail('')
setUpass('')

}).then(()=>{
})

}

このauthhistoryがあるかないかでログインしているかいないかの判断を行なっており、まずはこのauthhistoryを取得することになる。

それがedit.jsにある下記にあたる。

const [authhistory, setauthHistory] = useState();

useEffect(() => {
setauthHistory(localStorage.getItem('authhistory'))
if (authhistory) {
console.log('authhistory')
console.log(authhistory)

//if(authhistory!=ninja[0].mail){router.push('/ID/'+ninja[0].userid)}

}
}, [authhistory])

こちらをlayoutに組み込み。反応を見る。

階層が異なっているのでimportの階層部分の整理・追加を行う。

import { useState,useEffect } from 'react';

無事にauthhistoryを取得することができた。

authhistoryがある場合にはstorageにアクセスさせる処理を追加。ninja[0].useridにあたる部分をデータベースから取得できれば良い。

//image表示
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+ninja[0].userid+"/image.jpg"
)

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

そのため、こちらのuseeffectを実装。

useEffect(() => {
setauthHistory(localStorage.getItem('authhistory'))
if (authhistory) {
console.log('authhistory')
console.log(authhistory)

//if(authhistory!=ninja[0].mail){router.push('/ID/'+ninja[0].userid)}
const colRef= collection(firebaseApp, "mydata")
const q = query(colRef,where("mail","==",authhistory))

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

snapshot.docs.forEach(doc => {
const data = doc.data()

if(data.mail)
{
setauthname(data.userid)
}
});

}).then(()=>{
console.log('authname'+authname)
})

}

}, [authhistory])

その上で別途image取得の設定。

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

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

<Avatar className={classes.avatar}>{image}</Avatar>

きちんと参照しようとしているがauthnameがundeifinedになっている。

[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)"
}

こちらをうまく取得できるように調整する。要検証。

また、NFTであることを示すためのopen seaなどのリンク場所も作成する。その流れで、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.