shinnoske0727
12/26/2017 - 5:52 AM

client sample for connect DialogFlow with Firebase Realtime Database

client sample for connect DialogFlow with Firebase Realtime Database

client.html
content_copyfile_download
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            body {
              width: 100vw;
              height: 100vh;
              background-color: #000;
              background-repeat: no-repeat;
              background-position: center bottom;
              color: #fff;
            }
      </style>
    </head>
    <body>
        <p id="face-name">ホゲホゲ</p>

        <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
        <script>
            // Initialize Firebase
            var config = {
                apiKey: "<API_KEY>",
                authDomain: "<PROJECT_ID>.firebaseapp.com",
                databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
                storageBucket: "<BUCKET>.appspot.com",
                messagingSenderId: "<SENDER_ID>",
            };
            firebase.initializeApp(config);

            var db = firebase.database();
            var faceType = db.ref('faceName'); //取得したいデータのパスを指定
            faceType.on('value', function(snapshot) { 
                const value = snapshot.val(); //faceNameに入ってる値を取得
                document.getElementById("face-name").innerText = value;
                document.body.style.backgroundImage = 'url(img/' + value + '.png)';
            });
        </script>
    </body>
</html>