Thiết kế website giá rẻ

Question

I am following an outdated youtube tutorial, so I have been using documentation to update parts of the code. I added data manually into firestore in the firebase console, and when I try to access the documents within the collection “guides”, it says that the snapshot is empty.

I’ve tried updating everything to be like the documentation and have consistently gotten feedback that there are no documents in the returned querySnapshot.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Game Guidez</title>
</head>
<body class="grey lighten-3">
    <nav class="z-depth-0 grey lighten-4">
        <div class="nav-wrapper container">
          <a href="#" class="brand-logo">
            <img src="img/logo.svg" style="width: 180px; margin-top: 10px;">
          </a>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
              <li class="logged-in">
                <a href="#" class="grey-text modal-trigger" data-target="modal-account">Account</a>
              </li>
              <li class="logged-in">
                <a href="#" class="grey-text" id="logout">Logout</a>
              </li>
              <li class="logged-in">
                <a href="#" class="grey-text modal-trigger" data-target="modal-create">Create Guide</a>
              </li>
              <li class="logged-out">
                <a href="#" class="grey-text modal-trigger" data-target="modal-login">Login</a>
              </li>
              <li class="logged-out">
                <a href="#" class="grey-text modal-trigger" data-target="modal-signup">Sign up</a>
              </li>
            </span>
          </ul>
        </div>
      </nav>
    
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script type="module" src="scripts/auth.js"></script>
  <script src="scripts/index.js"></script>

</body>
</html>

auth.js



// signup
 // Import the functions you need from the SDKs you need


import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-app.js";
 import { getAuth, createUserWithEmailAndPassword, signOut, signInWithEmailAndPassword, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-auth.js";
 import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/10.12.1/firebase-firestore.js";



 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries

 // Your web app's Firebase configuration
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 var firebaseConfig = {
  apiKey: "AIzaSyBYbLUpvawWie-C-d2rglmqEcKbLbYitm4",
  authDomain: "tut-b7d0e.firebaseapp.com",
  projectId: "tut-b7d0e",
  storageBucket: "tut-b7d0e.appspot.com",
  messagingSenderId: "590080106180",
  appId: "1:590080106180:web:5e49369cc7bc0495cdb391",
  measurementId: "G-J1T5VTHNR4"
  // databaseURL: "https://(default).firebaseio.com"
 };
// firebase.initializeApp(config);
 // Initialize Firebase
//  const auth = firebase.auth();
// const db = firebase.firestore();
const app = initializeApp(firebaseConfig)
const auth = getAuth(app)
const db = getFirestore(app, {
 timestampsInSnapshots: true
})

// get data
/*getDocs(collection(db, 'guides')).then(snapshot => {
  console.log(snapshot.docs)

})*/
console.log(collection(db, 'guides'))
getDocs(collection(db, 'guides')).then(snapshot => {
  if (snapshot.empty) {
    console.log('No matching documents.');
    return;
  }
  console.log("Documents in 'guides' collection:");
  snapshot.docs.forEach(doc => {
    console.log(doc.id, '=>', doc.data());
  });
}).catch(error => {
  console.error("Error getting documents: ", error);
});

 // listen for auth status changes
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log('user logged in: ', user)
  } else {
    console.log('user logged out')
  }
})
 


 // update firestore settings
/*   initializeFirestore(app, {
   timestampsInSnapshots: true
 })*/
const signupForm = document.querySelector('#signup-form');
signupForm.addEventListener('submit', (e) => {
    e.preventDefault();

    // get user info
    const email = signupForm['signup-email'].value
    const password = signupForm['signup-password'].value

    // sign up the user
    createUserWithEmailAndPassword(auth, email, password).then(cred => {
        const modal = document.querySelector('#modal-signup')
        M.Modal.getInstance(modal).close();
        signupForm.reset()
    });


})
// logout
const logout = document.querySelector('#logout')
logout.addEventListener('click', (e) => {
  e.preventDefault()
  signOut(auth)
})

// login
const loginForm = document.querySelector('#login-form')
loginForm.addEventListener('submit', (e) => {
  e.preventDefault()

  // get user info
  const email = loginForm['login-email'].value;
  const password = loginForm['login-password'].value;

  signInWithEmailAndPassword(auth, email, password).then(cred => {
      //close login modal and reset form
  const modal = document.querySelector('#modal-login')
  M.Modal.getInstance(modal).close();
  loginForm.reset();
  })

})

index.js:

// setup materialize components
document.addEventListener('DOMContentLoaded', function() {

    var modals = document.querySelectorAll('.modal');
    M.Modal.init(modals);
  
    var items = document.querySelectorAll('.collapsible');
    M.Collapsible.init(items);
  
  });

Database in Firestore

Thiết kế website giá rẻ

Danh mục

Firebase Authentication – Accessing Documents in Collections (firestore)