2025年4月8日火曜日

FirebaseRtdb一応の到達点

------最新はmy-nodejsプロジェクトでmy-nodejsのfirestoreをいじってるーーーーーー

cf ーーーーfirestore-testプロジェクトのfbrtdbは.jsonでled on offにもちいるーーー

cf ーーーーfirestore-testプロジェクトのfirestoreはいろいろのトライににもちいるーーー

------------my-nodejsプロジェクトでmy-nodejsのrtdbをいじっていたが archived -------

index.htmlを以下のようにする 、 これだとhttp-serverでlocalhostでは

/?id=...をうけつけるがfc2 homepageではうけつかんようだ listup,addはOKだった

firebase hostingでは動いた! https://firestore-test-88b23.web.app/ でデプロイしたが

my-nodejsでrtdb,firestoreをためしているので要注意 firestore-testのrtdb,firestoreと

違うので要注意 なお表示がおかしければ履歴を削除すること!

----------------------index.html-----------------------------------------

<html><head>

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

<script> // Import the functions you need from the SDKs you need

   

   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 database = firebase.database();

  var people = database.ref('people/');


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

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


  getPeople();  // prototype

  getById(id_value); // prototype


  function onloaded(){

     getPeople();

  };


  function getPeople(){

    people.on('value', (snapshot) => {

      let data = snapshot.val();

      let result = "";

      for(let i in data){

        let person = data[i];

        result += '<tr><td>' + person.name + '</td><td>[' + 

          person.mail + ',' + person.age + 'yo]</td><td> id=' 

      + i + '</td></tr></br>';

      }

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

     });

   };

   

   function getById(id){

        people.child(id).on('value', (snapshot) => {

          let data = snapshot.val();

        console.log(data);

document.querySelector('#name').value = data.name;

          document.querySelector('#mail').value = data.mail;

          document.querySelector('#age').value = data.age;

        }); // id部分のみの更新となる

   };

   


  function doAction(){

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

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

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

        console.log(nm);

        console.log(ml);

        console.log(ag);

let val = {

          'name':nm,

          'mail':ml,

          'age':ag

        };

        var person = people.child(id_value);

        person.set(val); 

   };


   function doAction2(){

      var person = people.child(id_value);

      person.remove().then((error) => {

          alert(id_value);

      });

   };


</script>

</head>

<body>

  <h1>Sample Page</h1>

 

  <table>

    <tr>

     <th></th>

     <td><button onClick="doAction2()">Delete</button></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>Age</th>

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

    </tr>

    <tr>

     <th></th>

     <td><button onClick="doAction()">Update</button></td>

    </tr>

  </table>

  <hr>

  <h1>latest datas</h1>

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

</body>

</html>

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

<html><head><script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"> </script>
<script> // Import the functions you need from the SDKs you need
   
   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 database = firebase.database();
  var people = database.ref('people/');
  people.on('value', (snapshot) => {
      let data = snapshot.val();
      let result = "";
      for(let i in data){
        let person = data[i];
        result += '<li>' + person.name + '[' + person.mail + ',' + person.age + 'yo]';
      }
      document.querySelector('#list').innerHTML = result;
   }); 
   
   function doAction(){
let nm = document.querySelector('#name');
        let ml = document.querySelector('#mail');
        let ag = document.querySelector('#age');
        let val = {
          'name':nm.value,
          'mail':ml.value,
          'age':ag.value
        };
        var people = database.ref('people/').push(); // return ref
        people.set(val); // res set
        nm.value='';
        ml.value='';
        ag.value='';
   }
</script>
</head>
<body>
  <h1>Sample Page</h1>
  <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>Age</th>
     <td><input type="text" id="age"></td>
    </tr>
    <tr>
     <th></th>
     <td><button onClick="doAction()">Add</button></td>
    </tr>
  </table>
  <hr>
  <h1>latest datas</h1>
  <ol id="list">wait...</ol>
</body>
</html>
--------------------listup.html---------------------------------------------------------
<html><head><script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"> </script>
<script> // Import the functions you need from the SDKs you need
   
   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 databse = firebase.database();
  var people = databse.ref('people/');
  people.on('value', (snapshot) => {
      let data = snapshot.val();
      let result = "";
      for(let i in data){
        let person = data[i];
        result += '<li>' + i+ ':' + person.name + '[' + person.mail + ',' + person.age + ']';
      }
      document.querySelector('#list').innerHTML = result;
      });  
</script>
</head>
<body> 
<h1>latest datas</h1>
<ol id="list">wait...</ol>
</body>
</html>


0 件のコメント:

コメントを投稿