Blockchain code Metaverse VR

Crypto×VR×SmartContract(512)

スポンサーリンク

//tips

//smart contract

必要であればonSnapshotを使用したリアルタイムの反映も交えて考える。

const [books, setBooks] = useState([])

const firestore = getFirestore(firebaseApp)

console.log(firestore)

const colRef=collection(firestore, "mydata")
console.log(colRef)

const q =query(colRef,where("age","==","39"))
console.log(q)

getDocs(q)
.then((snapshot)=>{
//console.log(snapshop.docs)
let boys=[]
snapshot.docs.forEach(doc => {
boys.push({...doc.data(),id:doc.id})//...で新しいオブジェクトに入れている
});
console.log(boys)
setBooks(boys)
})

Queryで範囲制限をしたがうまく取得できず。

こうなってくるとお手上げなので、シンプルな部分取得を再度作ってみる。

function apptest2() {

const [books, setBooks] = useState([])

// Initialize Firebase app
initializeApp(firebaseConfig);

//init services
const db=getFirestore()

//collection ref
const colRef=collection(db,"mydata")

const q =query(colRef,where("author","==","naki"))

getDocs(q)
.then((snapshot)=>{
//console.log(snapshot.docs)//このオブジェクトの中にある必要な部分を取り出す
let books=[]
snapshot.docs.forEach((doc)=>{
books.push({...doc.data(),id:doc.id})//doc.dataでデータ部分からタイトルなどの取り出し
})
console.log(books)
setBooks(books)
})

なんとauthorで検索をqueryを行うと一部取得ができた。

const q =query(colRef,where("age","==","39”))ではなく、const q =query(colRef,where("age","==",39))とすると数字は取得できることがわかってきた。

Useeffectの中でも無事に反映できた。

const [books, setBooks] = useState([])

// 単一抜き出し
useEffect(() => {

//const firestore = getFirestore(firebaseApp)

const getBook = async () => {
//const path="mydata/1"
const colRef=collection(firebaseApp, "mydata")

const q =query(colRef,where("age","==",39))

getDocs(q)
.then((snapshot)=>{
//console.log(snapshop.docs)
let books=[]
snapshot.docs.forEach(doc => {
books.push({...doc.data(),id:doc.id})//...で新しいオブジェクトに入れている
});
console.log(books)
setBooks(books)
})

これでクエリの条件にあたるユーザー情報を渡せれば、各ユーザーの独自情報を表示できる。データベースではstringとnumberでは別物として扱われるので型にも気を付ける。

Db.jsonの内容をFirebaseの中に移し、表示がきちんとされるか確認。

表示はされたものの、ユーザー単位での整理ができておらず、ドキュメントid名前の機能がいまいちわかっていない。現在は直接ドキュメント内のフィールドの値でフィルタリングしてしまっている。

const q =query(colRef,where("username","==","naki"),orderBy('title','desc'))

また、orderByを加えてabcの逆順で各項目を並べるようにした。

タイムスタンプを使用したい場合はserverTimestampをインポート。

この流れで単一ドキュメントの抜き出しを行ったらすんなりいった。

//再トライ単一抜き出し
const docRef=doc(firebaseApp, "mydata",'abc')
getDoc(docRef)
.then((doc)=>{
console.log(doc.data(),doc.id)
})

ドキュメント名がわかればドキュメントの抜き出しは行えそう。ドキュメントの方を少し勘違いしていたが、これはフォルダではなく、あくまでもフィールドコンテンツ一塊のタイトルになっており、複数のフィールドを内包できるわけではないことに注意が必要。

現状のjsonからのfetch部分をこれらのfirebaseからの取り出しに変換していく。その後にFire base Authをeditページへの遷移タイミングで適用できるように準備する。

[id]の方にまずは内容を反映させる。

データベースの方の設定も行って、configが少し変わってしまったので2種類作りインポートさせた。後で融合させる。

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

今までのfetch部分をそのまま置き換える。

下記をうまく変換していく必要があり。

//受け取るcontextの内容を編集
export const getStaticPaths = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await res.json();

// map data to an array of path objects with params (id)
const paths = data.map(ninja => {
return {
params: { id: ninja.id.toString() }
}
})

console.log(paths)

return {
paths,
fallback: false
}
}

//contextは{ params: { id: '2' },などの内容で取得
export const getStaticProps = async (context) => {
console.log(context)

const id = context.params.id;
const res = await fetch('https://jsonplaceholder.typicode.com/users/' + id);
const data = await res.json();

return {
props: { ninja: data }
}
}

最初はconst data=[]に入れて継承しようとしたがエラー、useStateもエラーさてどうするか。

//受け取るcontextの内容を編集
export const getStaticPaths = async () => {
//const res = await fetch('https://jsonplaceholder.typicode.com/users');
//const data = await res.json();

const [data, setdata] = useState([])

const getdata = async () => {
//const path="mydata/1"
const colRef=collection(firebaseApp, "mydata")

getDocs(colRef)
.then((snapshot)=>{
//console.log(snapshop.docs)
let data=[]

snapshot.docs.forEach(doc => {
data.push({...doc.data(),id:doc.id})//...で新しいオブジェクトに入れている
});
setdata(data)
})

}

getdata()

console.log("data")
console.log(data)

// map data to an array of path objects with params (id)
const paths = data.map(ninja => {
return {
params: { id: ninja.id.toString() }
}
})

//console.log(paths)

return {
paths,
fallback: false
}
}

//contextは{ params: { id: '2' },などの内容で取得
export const getStaticProps = async (context) => {
console.log(context)

const [data, setdata] = useState([])

const id = context.params.id;

//const res = await fetch('https://jsonplaceholder.typicode.com/users/' + id);
//const data = await res.json();

//const data=[]

const getBook = async () => {
//const path="mydata/1"
const colRef=collection(firebaseApp, "mydata")

const q =query(colRef,where("userid","==",id))

getDocs(q)
.then((snapshot)=>{
//console.log(snapshop.docs)
let data =[]
snapshot.docs.forEach(doc => {
data.push({...doc.data(),id:doc.id})//...で新しいオブジェクトに入れている
});
setdata(data)
})

}

getBook()

console.log("data")
console.log(data)

return {
props: { ninja: data }
}
}

人気の記事

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.