Firebase의 Realtime Database를 터치해보세요
Realtime Database란?
NoSQL 클라우드 데이터베이스에서 데이터를 저장하고 동기화할 수 있습니다. 데이터는 모든 클라이언트에서 실시간으로 동기화되며 앱이 오프라인 상태인 경우에도 사용 가능한 상태를 유지합니다.
라는 것
문서 : htps : // 푹 빠져라. 오, ぇ. 코 m/도 cs/다타바세/
준비
먼저 프로젝트를 만들고 Hosting을 끝마치고 놓으면 편합니다.
htps : // 이 m / 편하게 0615 / ms / 2에 2f77437d3557842022
프로젝트 구성
$ tree
.
├── firebase.json
└── public
└── index.html
1 directory, 2 files
로컬에서는 이러한 프로젝트를 준비
이 문서의 목표
Realtime Database를 이용한 테스트 웹 페이지를 작성한다.
- 텍스트 상자에 텍스트를 입력하면 다른 탭에서 열려 있는 같은 페이지에서 비동기적으로 반영된다.
작업
콘솔에서 Firebase 연결용 스니펫 획득
<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxx-xxxx-x-xxxxx.firebaseapp.com",
databaseURL: "https://xxx-xxxx-x-xxxxx.firebaseio.com",
projectId: "xxx-xxxx-x-xxxxx",
storageBucket: "xxx-xxxx-x-xxxxx.appspot.com",
messagingSenderId: "xxxxxxxxx"
};
firebase.initializeApp(config);
</script>
테스트용 HTML 준비
<html>
<head>
<title>Firebase test 1</title> <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxx-xxxx-x-xxxxx.firebaseapp.com",
databaseURL: "https://xxx-xxxx-x-xxxxx.firebaseio.com",
projectId: "xxx-xxxx-x-xxxxx",
storageBucket: "xxx-xxxx-x-xxxxx.appspot.com",
messagingSenderId: "xxxxxxxxx"
};
firebase.initializeApp(config);
</script>
<script>
var db = firebase.database();
var chatAll = db.ref("/chat/all");
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});
}
window.onload = function() {
document.getElementById("btnChangeData").onclick = changeData;
};
</script>
</head>
<body>
<p>Realtime Database</p>
<ul>
<li id="textMessage"></li>
<li><input type="text" name="" id="message"></li>
<li><input type="button" value="Update" id="btnChangeData"></li>
</ul>
</body>
</html>
Database 시작
Database => Realtime으로 전환하고 Database 시작
보안 제한을 해제
다음 값으로 보안 규칙을 업데이트합니다.
{
"rules": {
".read": true,
".write": true
}
}
＊이쪽은 전 기입, 읽기를 해방해 버리기 때문에, 테스트가 끝나면 false에 고치는 것.
deploy하다
작업 프로젝트 배포
firebase deploy --token "1/hO3xxxxxxxxxxxxxxxxxxxxxxxx........."
=== Deploying to 'xxx-xxxx-1-xxxx'...
i deploying hosting
i hosting[xxx-xxxx-1-xxxx]: beginning deploy...
i hosting[xxx-xxxx-1-xxxx]: found 2 files in public
✔ hosting[xxx-xxxx-1-xxxx]: file upload complete
i hosting[xxx-xxxx-1-xxxx]: finalizing version...
✔ hosting[xxx-xxxx-1-xxxx]: version finalized
i hosting[xxx-xxxx-1-xxxx]: releasing new version...
✔ hosting[xxx-xxxx-1-xxxx]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/xxx-xxxx-1-xxxx/overview
Hosting URL: https://xxx-xxxx-1-xxxx.firebaseapp.com
테스트
탭 A에서 "hoo!"를 입력하면
탭 B에
비동기적으로 반영되는
그건 그렇고, 콘솔을 확인하면 이러한 데이터 구조로 저장됩니다.
참고로 한 기사
Reference
이 문제에 관하여(Firebase의 Realtime Database를 터치해보세요), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rakuraku0615/items/9f88886d7348db3905f6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
먼저 프로젝트를 만들고 Hosting을 끝마치고 놓으면 편합니다.
htps : // 이 m / 편하게 0615 / ms / 2에 2f77437d3557842022
프로젝트 구성
$ tree
.
├── firebase.json
└── public
└── index.html
1 directory, 2 files
로컬에서는 이러한 프로젝트를 준비
이 문서의 목표
Realtime Database를 이용한 테스트 웹 페이지를 작성한다.
- 텍스트 상자에 텍스트를 입력하면 다른 탭에서 열려 있는 같은 페이지에서 비동기적으로 반영된다.
작업
콘솔에서 Firebase 연결용 스니펫 획득
<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxx-xxxx-x-xxxxx.firebaseapp.com",
databaseURL: "https://xxx-xxxx-x-xxxxx.firebaseio.com",
projectId: "xxx-xxxx-x-xxxxx",
storageBucket: "xxx-xxxx-x-xxxxx.appspot.com",
messagingSenderId: "xxxxxxxxx"
};
firebase.initializeApp(config);
</script>
테스트용 HTML 준비
<html>
<head>
<title>Firebase test 1</title> <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxx-xxxx-x-xxxxx.firebaseapp.com",
databaseURL: "https://xxx-xxxx-x-xxxxx.firebaseio.com",
projectId: "xxx-xxxx-x-xxxxx",
storageBucket: "xxx-xxxx-x-xxxxx.appspot.com",
messagingSenderId: "xxxxxxxxx"
};
firebase.initializeApp(config);
</script>
<script>
var db = firebase.database();
var chatAll = db.ref("/chat/all");
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});
}
window.onload = function() {
document.getElementById("btnChangeData").onclick = changeData;
};
</script>
</head>
<body>
<p>Realtime Database</p>
<ul>
<li id="textMessage"></li>
<li><input type="text" name="" id="message"></li>
<li><input type="button" value="Update" id="btnChangeData"></li>
</ul>
</body>
</html>
Database 시작
Database => Realtime으로 전환하고 Database 시작
보안 제한을 해제
다음 값으로 보안 규칙을 업데이트합니다.
{
"rules": {
".read": true,
".write": true
}
}
＊이쪽은 전 기입, 읽기를 해방해 버리기 때문에, 테스트가 끝나면 false에 고치는 것.
deploy하다
작업 프로젝트 배포
firebase deploy --token "1/hO3xxxxxxxxxxxxxxxxxxxxxxxx........."
=== Deploying to 'xxx-xxxx-1-xxxx'...
i deploying hosting
i hosting[xxx-xxxx-1-xxxx]: beginning deploy...
i hosting[xxx-xxxx-1-xxxx]: found 2 files in public
✔ hosting[xxx-xxxx-1-xxxx]: file upload complete
i hosting[xxx-xxxx-1-xxxx]: finalizing version...
✔ hosting[xxx-xxxx-1-xxxx]: version finalized
i hosting[xxx-xxxx-1-xxxx]: releasing new version...
✔ hosting[xxx-xxxx-1-xxxx]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/xxx-xxxx-1-xxxx/overview
Hosting URL: https://xxx-xxxx-1-xxxx.firebaseapp.com
테스트
탭 A에서 "hoo!"를 입력하면
탭 B에
비동기적으로 반영되는
그건 그렇고, 콘솔을 확인하면 이러한 데이터 구조로 저장됩니다.
참고로 한 기사
Reference
이 문제에 관하여(Firebase의 Realtime Database를 터치해보세요), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rakuraku0615/items/9f88886d7348db3905f6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
콘솔에서 Firebase 연결용 스니펫 획득
<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxx-xxxx-x-xxxxx.firebaseapp.com",
databaseURL: "https://xxx-xxxx-x-xxxxx.firebaseio.com",
projectId: "xxx-xxxx-x-xxxxx",
storageBucket: "xxx-xxxx-x-xxxxx.appspot.com",
messagingSenderId: "xxxxxxxxx"
};
firebase.initializeApp(config);
</script>
테스트용 HTML 준비
<html>
<head>
<title>Firebase test 1</title> <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxx-xxxx-x-xxxxx.firebaseapp.com",
databaseURL: "https://xxx-xxxx-x-xxxxx.firebaseio.com",
projectId: "xxx-xxxx-x-xxxxx",
storageBucket: "xxx-xxxx-x-xxxxx.appspot.com",
messagingSenderId: "xxxxxxxxx"
};
firebase.initializeApp(config);
</script>
<script>
var db = firebase.database();
var chatAll = db.ref("/chat/all");
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});
}
window.onload = function() {
document.getElementById("btnChangeData").onclick = changeData;
};
</script>
</head>
<body>
<p>Realtime Database</p>
<ul>
<li id="textMessage"></li>
<li><input type="text" name="" id="message"></li>
<li><input type="button" value="Update" id="btnChangeData"></li>
</ul>
</body>
</html>
Database 시작
Database => Realtime으로 전환하고 Database 시작
보안 제한을 해제
다음 값으로 보안 규칙을 업데이트합니다.
{
"rules": {
".read": true,
".write": true
}
}
＊이쪽은 전 기입, 읽기를 해방해 버리기 때문에, 테스트가 끝나면 false에 고치는 것.
deploy하다
작업 프로젝트 배포
firebase deploy --token "1/hO3xxxxxxxxxxxxxxxxxxxxxxxx........."
=== Deploying to 'xxx-xxxx-1-xxxx'...
i deploying hosting
i hosting[xxx-xxxx-1-xxxx]: beginning deploy...
i hosting[xxx-xxxx-1-xxxx]: found 2 files in public
✔ hosting[xxx-xxxx-1-xxxx]: file upload complete
i hosting[xxx-xxxx-1-xxxx]: finalizing version...
✔ hosting[xxx-xxxx-1-xxxx]: version finalized
i hosting[xxx-xxxx-1-xxxx]: releasing new version...
✔ hosting[xxx-xxxx-1-xxxx]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/xxx-xxxx-1-xxxx/overview
Hosting URL: https://xxx-xxxx-1-xxxx.firebaseapp.com
테스트
탭 A에서 "hoo!"를 입력하면
탭 B에
비동기적으로 반영되는
그건 그렇고, 콘솔을 확인하면 이러한 데이터 구조로 저장됩니다.
참고로 한 기사
Reference
이 문제에 관하여(Firebase의 Realtime Database를 터치해보세요), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rakuraku0615/items/9f88886d7348db3905f6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Firebase의 Realtime Database를 터치해보세요), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rakuraku0615/items/9f88886d7348db3905f6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
