Firebase 시작 - 실시간 데이터베이스 사용

3251 단어 googleFirebase자바스크립트nosql
Firebase의 실시간 데이터베이스를 사용하는 절차를 정리해 보았습니다.

실시간 데이터베이스



Firebase Realtime Database는 클라우드에서 호스팅되는 데이터베이스입니다.
이번에는 간단한 메시지 앱을 만들어 보겠습니다.
  • 브라우저에서 firebase console 열기 htps : // 이런. 푹 빠져라. 오, ぇ. 이 m/? hl = 그럼

  • "웹 앱에 Firebase 추가"를 선택하여 표시되는 jaavascript를 index.html에 추가합니다 
    <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "あなたのAPIキー",
authDomain: "myfirstfirebase(的な名前).firebaseapp.com",
databaseURL: "https://myfirstfirebase-(的な名前).firebaseio.com",
storageBucket: "myfirstfirebase-(的な名前).appspot.com",
};
firebase.initializeApp(config);
</script>

  • 실시간 데이터베이스를 사용하는 스크립트를 index.html에 포함
    <script>
  var db = firebase.database();
  var chatAll = db.ref("/chat/all");
  //DB内容が変更されたとき実行される
  chatAll.on("value", function(snapshot) {
    document.getElementById("textMessage").innerText = snapshot.val().message;
  });
  //入力内容を更新した時
  var changeData = function(){
    var message = document.getElementById("message").value;
    chatAll.set({message:message});
  }
  //htmlロードが完了したらボタンにイベントを設定
  window.onload = function() {
   document.getElementById("btnChangeData").onclick = changeData;
  };
</script>
<body>
<p>リアルタイムデータベース</p>
<ul>
<li id="textMessage"></li>
<li><input type="text" name="" id="message"></li>
<li><input type="button" value="更新" id="btnChangeData"></li>
</ul>
</body>
  • 콘솔에서 실시간 데이터베이스 보안 규칙 변경

    인증 불필요하게 다시 작성해 본다.{"rules":{".read":"true",".write":"true"}}
  • 로컬 환경에서 실행하여 내용을 확인해 봅니다.
  • 잘 움직이면 URL을 다른 브라우저 등으로 2화면 열어 업데이트가 동기화되는지 확인해 본다.
    http://localhost:5000
  • 배포 실행 firebase serve firebase deploy --only hosting 에서 일부 배포. --only 파라미터로 지정할 수 있는 것은 --only hosting , hosting , database 이 3 종류.
  • 배포가 성공하면 브라우저에서 열어보세요. storage

    • 매우 쉽게 실시간 동기화 처리를 작성할 수있었습니다.
    iOS나 Android에서도 쉽게 이용할 수 있는 것 같기 때문에, 나중에 해 보고 싶습니다.

    참고




    Firebase Realtime Database
    SQL을 Firebase로 다시 작성하기위한 치트 모음
    Azure Time Series Insights로 IoT 데이터 시각화

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage