지금 바로 Firebase에 필요한 최소한의 일을 시작하겠습니다.
13585 단어 JavaScriptFirebase
Firebase란 무엇입니까?
백엔드와 백엔드를 분리해서 생각해 보세요.
백엔드
백엔드는 클라우드에서 제공하는 문서 데이터베이스와 데이터베이스에 액세스하는 REST API입니다.이 부분은 Firebase의 기초입니다.
Firebase의 API는 양방향 통신을 지원합니다.
프런트 엔드
프런트엔드는 REST 데이터 API에 쉽게 액세스할 수 있는 JavaScript 라이브러리입니다.Firebase의 이용(application)은 자바스크립트를 비롯한 클레트 코드로만 이루어질 수 있다.이 섹션은 Firebase의 선택 사항이며 Hosting 서비스도 제공하지만 다른 곳에서 관리할 수도 있습니다.
그나저나'Firebase 대단해~'가 되는 또 다른 요소는 양방향 통신 지원(웹소켓 등)이다.예를 들어 한 클라이언트가 데이터를 썼을 때 다른 클라이언트는 Callback을 통해 라이브러리에서 알림을 받습니다.이 통지를 처리함으로써 데이터의 변경을 모든 위기에 추론으로 반영할 수 있다.예를 들어 체스 게임에서는 상대방의 바둑알의 동작을 로컬의 DOM에 즉시 반영하는 것을 쉽게 설치할 수 있다.
App
이 백엔드와 백엔드는 "App"단원에 집중해서 사용할 수 있습니다.
다음은 새 앱이 작성한 양식과 기존 앱의 모습입니다.
데이터 URL
이 섹션에 표시된 URL은 매우 중요합니다.
이것은 SQL 데이터베이스에서 말하는 연결 문자열과 같다고 여겨질 수 있습니다.
데이터 관리
이 데이터 URL은 당연히 브라우저로 열 수 있다.데이터 URL은 이러한 데이터를 나타냅니다.
여기에서 수동으로 데이터를 삽입하거나 편집할 수 있습니다.구글 드라이브의 문서를 편집하는 것처럼 문서 데이터베이스의 내용을 관리할 수 있다.
그리고 클레인은 이 수동적인 데이터 관리를 자동화했을 뿐이라는 것을 감안하면 이해하기 쉬울 것이다.
Firebase를 사용해서 최소한으로 필요한 것들.
Firebase 계정
새 Firebase App
클라이언트 코드를 호스팅하는 환경 (개발 중이면localhost 가능)
이제 시작할 수 있다는 얘기다.서버가 필요 없습니다.
최소한의 위기 코드
Firebase 첫 페이지에서 제공하는 Tutorial은 index입니다.html로 저장하고 브라우저에서 열기만 하면 Firebase의 최소한의 기능인 데이터의 쓰기와 양방향 통신을 확인할 수 있습니다.
Tutorial
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>
<script>
var myDataRef = new Firebase('https://******.firebaseio.com/');
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
$('#messageInput').val('');
}
});
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};
</script>
</body>
</html>
주: 위의 코드는 직접 이동할 수 없습니다.우선 아래의 몇 가지를 변경합니다.var myDataRef = new Firebase('ここに自分のFirebaseのAppのデータURLを指定する');
그리고 index.두 개의 다른 브라우저로 html를 엽니다.
다음은 Chrome과 FireFox로 열려 있는 경우입니다.
실제 메시지를 입력하면 두 브라우저 모두 현재 Firebase의 데이터베이스 상태를 반영하는 것을 볼 수 있습니다.
브라우저로 데이터 URL 열고 데이터 상태 확인
결과는 예상한 것과 같다.
코드 설명
코드의 중요한 부분을 간단하게 설명하다.
다음은 CDN에서 Firebase의 위기 라이브러리를 다운로드하는 부분입니다.반드시<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
다음은 Firebase 객체를 만드는 곳입니다.데이터 URL을 전송하여 데이터베이스에 액세스할 수 있습니다.반드시
var myDataRef = new Firebase('データURLを指定する');
다음은 실제 데이터를 쓰는 곳입니다.
JQuery에서 두 필드의 데이터를 얻고 Firebase의push 방법으로 씁니다.
데이터는 JSON입니다.이 JSON 데이터는 계층 구조를 가진 복잡한 데이터일 수도 있다.Firebase에서 처리합니다.이것도 Firebase의 싼 점이다.var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
마지막으로 데이터베이스 업데이트 알림을 받은 코드입니다.on을 사용하여 데이터 업데이트에 귀를 기울이십시오.'child_added'는 "child가 새로 가입할 때마다 깨워주세요."라고 말했다.
참고로 이 on은 페이지에 불러올 때도 한 번 파이어됩니다.이렇게 하면 기존의 데이터를 표시할 수 있고 이를 위해 특별한 코드를 쓸 필요가 없다.myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
총결산
Firebase를 사용하면 양방향 통신과 지속적인 데이터를 지원하는 프로그램을 상당히 가벼운 걸음걸이로 만들 수 있다.
Reference
이 문제에 관하여(지금 바로 Firebase에 필요한 최소한의 일을 시작하겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yoshiwatanabe/items/5b4a5c2c109b5f530fb9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Firebase 계정
새 Firebase App
클라이언트 코드를 호스팅하는 환경 (개발 중이면localhost 가능)
이제 시작할 수 있다는 얘기다.서버가 필요 없습니다.
최소한의 위기 코드
Firebase 첫 페이지에서 제공하는 Tutorial은 index입니다.html로 저장하고 브라우저에서 열기만 하면 Firebase의 최소한의 기능인 데이터의 쓰기와 양방향 통신을 확인할 수 있습니다.
Tutorial
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>
<script>
var myDataRef = new Firebase('https://******.firebaseio.com/');
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
$('#messageInput').val('');
}
});
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};
</script>
</body>
</html>
주: 위의 코드는 직접 이동할 수 없습니다.우선 아래의 몇 가지를 변경합니다.var myDataRef = new Firebase('ここに自分のFirebaseのAppのデータURLを指定する');
그리고 index.두 개의 다른 브라우저로 html를 엽니다.
다음은 Chrome과 FireFox로 열려 있는 경우입니다.
실제 메시지를 입력하면 두 브라우저 모두 현재 Firebase의 데이터베이스 상태를 반영하는 것을 볼 수 있습니다.
브라우저로 데이터 URL 열고 데이터 상태 확인
결과는 예상한 것과 같다.
코드 설명
코드의 중요한 부분을 간단하게 설명하다.
다음은 CDN에서 Firebase의 위기 라이브러리를 다운로드하는 부분입니다.반드시<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
다음은 Firebase 객체를 만드는 곳입니다.데이터 URL을 전송하여 데이터베이스에 액세스할 수 있습니다.반드시
var myDataRef = new Firebase('データURLを指定する');
다음은 실제 데이터를 쓰는 곳입니다.
JQuery에서 두 필드의 데이터를 얻고 Firebase의push 방법으로 씁니다.
데이터는 JSON입니다.이 JSON 데이터는 계층 구조를 가진 복잡한 데이터일 수도 있다.Firebase에서 처리합니다.이것도 Firebase의 싼 점이다.var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
마지막으로 데이터베이스 업데이트 알림을 받은 코드입니다.on을 사용하여 데이터 업데이트에 귀를 기울이십시오.'child_added'는 "child가 새로 가입할 때마다 깨워주세요."라고 말했다.
참고로 이 on은 페이지에 불러올 때도 한 번 파이어됩니다.이렇게 하면 기존의 데이터를 표시할 수 있고 이를 위해 특별한 코드를 쓸 필요가 없다.myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
총결산
Firebase를 사용하면 양방향 통신과 지속적인 데이터를 지원하는 프로그램을 상당히 가벼운 걸음걸이로 만들 수 있다.
Reference
이 문제에 관하여(지금 바로 Firebase에 필요한 최소한의 일을 시작하겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yoshiwatanabe/items/5b4a5c2c109b5f530fb9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>
<script>
var myDataRef = new Firebase('https://******.firebaseio.com/');
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
$('#messageInput').val('');
}
});
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};
</script>
</body>
</html>
var myDataRef = new Firebase('ここに自分のFirebaseのAppのデータURLを指定する');
코드의 중요한 부분을 간단하게 설명하다.
다음은 CDN에서 Firebase의 위기 라이브러리를 다운로드하는 부분입니다.반드시
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
var myDataRef = new Firebase('データURLを指定する');
JQuery에서 두 필드의 데이터를 얻고 Firebase의push 방법으로 씁니다.
데이터는 JSON입니다.이 JSON 데이터는 계층 구조를 가진 복잡한 데이터일 수도 있다.Firebase에서 처리합니다.이것도 Firebase의 싼 점이다.
var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
참고로 이 on은 페이지에 불러올 때도 한 번 파이어됩니다.이렇게 하면 기존의 데이터를 표시할 수 있고 이를 위해 특별한 코드를 쓸 필요가 없다.
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
총결산
Firebase를 사용하면 양방향 통신과 지속적인 데이터를 지원하는 프로그램을 상당히 가벼운 걸음걸이로 만들 수 있다.
Reference
이 문제에 관하여(지금 바로 Firebase에 필요한 최소한의 일을 시작하겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yoshiwatanabe/items/5b4a5c2c109b5f530fb9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(지금 바로 Firebase에 필요한 최소한의 일을 시작하겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yoshiwatanabe/items/5b4a5c2c109b5f530fb9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
