채팅17 Firebase Web 채팅앱 만들기 - Authentication을 이용한 유저 가입 및 로그인 구현하기 1) Authentication 콘솔 설정 Firebase Authentication을 사용하여 가입 및 로그인 처리를 해보겠습니다. Authentication 을 사용하기 위하여 Firebase Console화면으로 진입한 후 좌측 Authentication 메뉴에 들어가고, 그 다음 로그인 방법 탭으로 들어갑니다. 로그인 방법 탭 항목 중 이번 예제에서는 '이메일/비밀번호', 'Google', 'Facebook' 항목을 이용하겠습니다. '이메일/비밀번호' 라인을 클릭해봅니다. 그러면 아래와 같은 팝업창이 뜹니다. 사용설정 스위치버튼을 눌러 사용설정을 해줍니다. 'Google'도 마찬가지로 사용설정을 해줍니다. Facebook 설정은 Facebook 로그인과 Firebase Authentication을.. 2017. 12. 2. Firebase Web 채팅앱 만들기 - Hosting을 활용한 프로젝트 준비 작업 1) 예제 시작 소스 다운로드 받기 프로젝트를 시작하기 위해서 미리 구조를 잡아둔 예제 시작파일을 다운로드 받습니다. 예제 시작 파일을 받기위하여 https://github.com/cionman/firebase-tutorial-chat/ 아래 링크로 진입하여 commit 히스토리를 볼 수 있는 부분을 클릭합니다. commit 히스토리 중 맨 아래 쪽 '1. 예제 시작 파일' 부분 우측에 '' 버튼을 클릭 합니다. 나중에 예제를 글 단위별로 커밋을 해두었으니 따라하시면서 commit 히스토리를 참조하시면 됩니다. '1. 예제 시작 파일' 커밋 화면으로 진입한 후 아래의 스크린샷 부분을 클릭하면 예제 시작 파일을 다운로드 받을 수 있습니다. 다운로드 받은 파일을 프로젝트를 구성할 위치에 압축을 풀어줍니다. .. 2017. 12. 2. Firebase Web 채팅앱 만들기 - Firebase 설정하기 이제 예제 프로젝트를 수행하기 전 먼저 Firebase를 설정 및 준비를 해보겠습니다. 1. Firebase 프로젝트 추가하기 Firebase를 사용하기 위해서 가장 먼저 할 일은 Firebase Console로 진입하여 Firebase 프로젝트를 생성하는 일입니다. 그러기 위해 다음 URL을 방문하십시오. Firebase 홈페이지 https://firebase.google.com/ Firebase 홈페이지에서 우측 상단 GO TO CONSOLE 을 클릭하여 들어가면 아래와 같은 화면이 나옵니다. 화면을 보시면 이미 생성되어 있는 프로젝트 목록을 볼 수 있고, 프로젝트 추가 버튼이 있습니다. 프로젝트 추가 버튼을 누릅니다. 프로젝트 추가 버튼을 누르면 위와 같은 화면이 나옵니다. 프로젝트에 원하시는 이름.. 2017. 12. 1. Firebase Web 채팅앱 만들기 - 예제 소개 Firebase 웹용 라이브러리들을 활용하여 아래와 같은 채팅앱을 만들어 보겠습니다. 채팅앱의 모든 기능이 포함되어 있지는 않습니다. 예제를 열심히 만들었지만.. 버그도 있을 수 있습니다. Firebase 의 기능을 한 번씩 활용해본다고 생각해주셨으면 좋겠습니다. Firebase의 여러 기능을 사용하면 카카오톡과 같은 메신저에 포함되어 있는 대부분의 기능이 구현 가능하겠지만, 지금부터 구현할 기능은 다음과 같습니다. 유저 가입 및 로그인 유저데이터 저장 유저 리스팅 화면 채팅메세지 리스팅 화면 채팅 메세지 전송 채팅방 리스팅 화면 채팅방 초대기능 파일 전송 접속 중인 유저 표시기능 파일 전송기능 푸시 기능 위 기능을 구현을 하면 아래와 같은 Realtime Database는 아래와 같은 데이터 구조를 가.. 2017. 12. 1. 이전 1 2 3 4 5 다음 728x90
