환경은 Ubuntu 16.04에서 작업함.
우선 예제 코드를 git을 통해 가지고 온다.
git clone https://github.com/firebase/friendlychat
가지고 오면 firendlychat 폴더가 생기고
이안데 web-start 라는 폴더에 보면 index.html 이 있다.
이 폴더에 firebase 프로젝트 생성시 나오는 스니펫(?) 소스 코드를 넣어 준다.
firebase 프로젝트 생성과 소스코드 가져오는 설명은 아래 링크 참조
https://codelabs.developers.google.com/codelabs/firebase-web/#3
index.html 에 소스코드를 입력할때 다음 순서로 넣는다. 빨간 부분이 넣은 부분이다.
<!-- Firebase -->
<!-- ***********************************************************************************************************************
* TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Overview > Add Firebase to your web app. *
*********************************************************************************************************************** -->
<script src="https://www.gstatic.com/firebasejs/3.5.3/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyCql1C-ZzCVvSoKfnjdj48Y70THgGdYZ-4",
authDomain: "austin-gcs.firebaseapp.com",
databaseURL: "https://austin-gcs.firebaseio.com",
storageBucket: "austin-gcs.appspot.com",
messagingSenderId: "41293526285"
};
firebase.initializeApp(config);
</script>
<script src="scripts/main.js"></script>
</body>
</html>
index.html 에 소스코드를 입력 후, 저장한 뒤에
npm 명령어를 이용하여 firebase-tools 를 설치한다.
만약 npm 명령어가 안된다면 먼저 설치 후, 위 작업을 한다.
sudo apt install npm
firebase 가 제대로 설치 되었는지 확인한다.
sudo firebase version
현재 설치 했을때의 최신 버전은 3.0.8 이다.
로그인 명령어를 통해 firebase에 로그인 한다.
sudo firebase login
현재 구글계정을 이용하여 로그인하기 때문에 허용여부에 대한 웹 창이 뜨고 수락하면 된다.
sudo firebase use --add
채팅 프로그램을 실행한다.
sudo firebase serve
실행 후, http://localhost:5000 (이게 기본 로컬 주소)로 접속하면 채팅 화면창이 뜬다.
메시지 입력 후, SEND 버튼을 누르면 Sign in 해야된다는 문구가 뜰 것이다...
sign-in 하는 건 소스코드를 입력해야되는 부분이다.
https://codelabs.developers.google.com/codelabs/firebase-web/#6
3번의 경우, 안해도 잘되긴 했다...
기존 데이터 불러오기 및 메시지 전송은 아래 링크에 나와 있는 내용으로 진행하면 문제없이 진행된다.
데이터 불러오기
https://codelabs.developers.google.com/codelabs/firebase-web/#7
메시지 전송
https://codelabs.developers.google.com/codelabs/firebase-web/#9
이정도면... 실시간 채팅 앱이 되긴한다.... 룰 설정과 google 계정 외의 다른 메일로의 연동은 다음에 작성해야겠다.