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

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

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.