2025年4月23日水曜日

Cloud Firestore 一応の到達点

------------------------listup.html no realtime version----------------

<html><head>

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-firestore.js"></script>

  <script> 

  const firebaseConfig = {

  apiKey: "AIzaSyCcIW92ehZDJSAAJylBZGeeviyYtCPqous",

  authDomain: "my-nodejs-e9414.firebaseapp.com",

  databaseURL: "https://my-nodejs-e9414-default-rtdb.firebaseio.com",

  projectId: "my-nodejs-e9414",

  storageBucket: "my-nodejs-e9414.firebasestorage.app",

  messagingSenderId: "64417285110",

  appId: "1:64417285110:web:41cac867f805aec2c07dd7",

  measurementId: "G-K0E78VTKBB"

  };


  firebase.initializeApp(firebaseConfig);

  var db = firebase.firestore();

  db.collection("people").get().then((querySnapshot) =>{

     let result='';

     querySnapshot.forEach((doc) => {

     let data = doc.data();

     result += '<li>'+data.name+' ['+data.mail+':'+data.age+'] id= '+doc.id+'</li>';

     });

  document.querySelector('#list').innerHTML=result;

  });

</script>

</head>

<body>

  <h1>Sample Page</h1>

  <h2 id="msg"></h2>

  <ol id="list"></ol>

</body>

</html>


-----------------------listup2.htm realtime version-----------------------------

<html><head>

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-firestore.js"></script>

  <script> 

  const firebaseConfig = {

  apiKey: "AIzaSyCcIW92ehZDJSAAJylBZGeeviyYtCPqous",

  authDomain: "my-nodejs-e9414.firebaseapp.com",

  databaseURL: "https://my-nodejs-e9414-default-rtdb.firebaseio.com",

  projectId: "my-nodejs-e9414",

  storageBucket: "my-nodejs-e9414.firebasestorage.app",

  messagingSenderId: "64417285110",

  appId: "1:64417285110:web:41cac867f805aec2c07dd7",

  measurementId: "G-K0E78VTKBB"

  };


  firebase.initializeApp(firebaseConfig);

  var db = firebase.firestore();

  db.collection("people").onSnapshot((querySnapshot) =>{

     let result='';

     querySnapshot.forEach((doc) => {

     let data = doc.data();

     result += '<li>'+data.name+' ['+data.mail+':'+data.age+'] id= '+doc.id+'</li>';

     });

  document.querySelector('#list').innerHTML=result;

  });

</script>

</head>

<body>

  <h1>Sample Page</h1>

  <h2 id="msg"></h2>

  <ol id="list"></ol>

</body>

</html>

-------------------------------- add.html--------------------------------

<html><head>

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-firestore.js"></script>

<script>

 

  const firebaseConfig = {

  apiKey: "AIzaSyCcIW92ehZDJSAAJylBZGeeviyYtCPqous",

  authDomain: "my-nodejs-e9414.firebaseapp.com",

  databaseURL: "https://my-nodejs-e9414-default-rtdb.firebaseio.com",

  projectId: "my-nodejs-e9414",

  storageBucket: "my-nodejs-e9414.firebasestorage.app",

  messagingSenderId: "64417285110",

  appId: "1:64417285110:web:41cac867f805aec2c07dd7",

  measurementId: "G-K0E78VTKBB"

  };


  try { firebase.initializeApp(firebaseConfig);

  } catch(e) {

    console.log(e);

  }


  var db = firebase.firestore();

  let coll = db.collection("people");


  coll.onSnapshot((querySnapshot) =>{

     let result='';

     querySnapshot.forEach((doc) => {

        console.log(`${doc.id} => ${doc.data()}`);

        let data = doc.data();

        result += '<li>'+data.name+' ['+data.mail+':'+data.age+'] id= '+doc.id+'</li>';

     });

     document.querySelector('#list').innerHTML=result;

  });


  function doAction(){

    nm=document.querySelector('#name');

    ml=document.querySelector('#mail');

    ag=document.querySelector('#age');

    db.collection("people").add({

     name: nm.value,

     mail: ml.value,

     age: ag.value,

    })

    .then(()=>{

      nm.value='';ml.value='';ag.value='';

      document.querySelector('#msg').textContent='add new data';

    })

    .catch((error)=>{

      console.error("Error writing cocument: ",error);

    });

  }


</script>

</head>

<body>

  <h1>Sample Page</h1>

  <h2 id="msg"></h2>

  <table>

   <tr>

     <th>Name</th>

     <td><input type="text" id="name"></td>

   </tr>

   <tr>

     <th>Mail</th>

     <td><input type="text" id="mail"></td>

   </tr>

   <tr>

     <th>Name</th>

     <td><input type="text" id="age"></td>

   </tr> 

   <tr>

     <th></th>

     <td><button onclick="doAction();">Add</td>

   </tr>

  </table></br>

  <ol id="list"></ol>

</body>

</html>

---------------------------index(update and delete both works )-------------------

<html><head>

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-firestore.js"></script>

<script>


  var params = new URLSearchParams(window.location.search);

  var id_value = params.get('id');

  //console.log(id_value);

  var nm = null; 

  var ml = null; 

  var ag = null; 

  var msg = null;

 

  const firebaseConfig = {

  apiKey: "AIzaSyCcIW92ehZDJSAAJylBZGeeviyYtCPqous",

  authDomain: "my-nodejs-e9414.firebaseapp.com",

  databaseURL: "https://my-nodejs-e9414-default-rtdb.firebaseio.com",

  projectId: "my-nodejs-e9414",

  storageBucket: "my-nodejs-e9414.firebasestorage.app",

  messagingSenderId: "64417285110",

  appId: "1:64417285110:web:41cac867f805aec2c07dd7",

  measurementId: "G-K0E78VTKBB"

  };


  firebase.initializeApp(firebaseConfig);

  var db = firebase.firestore();

  let coll = db.collection("people");

  console.log(id_value);


  function onload(){

    nm=document.querySelector('#name');

    ml=document.querySelector('#mail');

    ag=document.querySelector('#age');

    msg=document.querySelector('#msg');

  if (id_value == null) {console.log('hel')};

    if (id_value != null){

      coll.doc(id_value).get().then((doc) => {

         let data = doc.data();

         console.log(data.name);

         nm.value = data.name;

         ml.value = data.mail;  

         ag.value = data.age;

         msg.textContent='id= "'+id_value+'"';

      });

     }

   }


  coll.onSnapshot((querySnapshot) =>{

     let result='';

     querySnapshot.forEach((doc) => {

        console.log(`${doc.id} => ${doc.data()}`);

        let data = doc.data();

        result += '<li>'+data.name+' ['+data.mail+':'+data.age+'] id= '+doc.id+'</li>';

     });

     document.querySelector('#list').innerHTML=result;

  });


  function doAction(){

    coll.doc(id_value).set({

     name: nm.value,

     mail: ml.value,

     age: ag.value,

    })

    .then(()=>{

      nm.value='';ml.value='';ag.value='';

      msg.textContent="update data";

    })

    .catch((error)=>{

      console.error("Error writing cocument: ",error);

    });

  }


  function doAction2(){

    coll.doc(id_value).delete()

    .then(function() {

nm.value='';ml.value='';ag.value='';

msg.textContent='delete data';

     })

    .catch(function(error){

console.error("error writing document;",error);

    });

  }

</script>

</head>

<body onload="onload()">

  <h1>Sample Page</h1>

  <h2 id="msg"></h2>

  <table>

   <tr>

     <th></th>

     <td><button onclick="doAction2();">Delete</td>

   </tr>

   <tr>

     <th>Name</th>

     <td><input type="text" id="name"></td>

   </tr>

   <tr>

     <th>Mail</th>

     <td><input type="text" id="mail"></td>

   </tr>

   <tr>

     <th>Name</th>

     <td><input type="text" id="age"></td>

   </tr> 

   <tr>

     <th></th>

     <td><button onclick="doAction();">Update</td>

   </tr>

  </table></br>

  <ol id="list"></ol>

</body>

</html>


投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)