Make Online Chat with Firebase

파이어베이스를 이용하여 빠르고 쉽게 채팅방을 구현해봅니다.

파이어베이스에서 Hosting, FireStore, Authentication를 사용합니다.

결과물: https://applayserviceproject.firebaseapp.com

Transcript

1. 파이어 베이스를 이용하여 나만의 서비스 만들기 컴퓨터공학과 박민석 소개
2. 박민석 컴퓨터공학과 3학년 (14) 휴마트컴퍼니 안드로이드 개발자
3. • 적은 양의 코드 • 짧은 시간 • 최대의 가성비 • 그나마 보기 좋은 디자인 • 잘 모르는 남들한테 자랑 가능 오늘의 결과물
4. 무엇을 하나요?
5. 무엇을 하나요? 민석: 안녕하세요 정윤: ? 민석: ?
6. 어렵지 않을까요?
7. 어렵지 않을까요? 네 어렵지 않습니다!
8. 어렵지 않을까요? 네 어렵지 않습니다! 가 다 해줄거예요.
9. 그럼 가 무엇 인가요?
10. 그럼 가 무엇 인가요? 더 강력하고 안전하게 유연한 서비스를 만들 수 있도록 도와주는 구글이 만든 서비스 입니다.
11. 그럼 가 뭔가요?
12. 그럼 가 무엇 인가요? 귀찮게 굳이 내가 할 필요가 있나 싶지만 반드시 필요한 요소들을 대신 만들어주는 구글의 서비스
13. 대신 만들어주는 구글의 서비스 웹 서버 구축 데이터베이스 생성 간편 로그인 구현 등. 그럼 가 무엇 인가요?
14. 잘 모르겠고 무엇이 편해지죠?
15. 서비스 구조를 먼저 알아야합니다.
16. 사용자 웹 / 앱 서버 데이터베이스 새로운 메시지를 보낼 경우
17. 사용자 웹 / 앱 서버 데이터베이스 새로운 메시지를 보낼 경우 민석: 안녕하세요
18. 사용자 웹 / 앱 서버 데이터베이스 “안녕하세요＂ 민석: 안녕하세요 새로운 메시지를 보낼 경우
19. 사용자 웹 / 앱 서버 데이터베이스 “안녕하세요＂ {message: “안녕하세요”} 민석: 안녕하세요 새로운 메시지를 보낼 경우
20. 사용자 웹 / 앱 서버 데이터베이스 “안녕하세요＂ {message: “안녕하세요”} Insert “안녕하세요＂ 민석: 안녕하세요 새로운 메시지를 보낼 경우
21. 사용자 웹 / 앱 서버 데이터베이스 “안녕하세요＂ {message: “안녕하세요”} Insert “안녕하세요＂ OK OK OK 민석: 안녕하세요 새로운 메시지를 보낼 경우
22. 사용자 웹 / 앱 서버 데이터베이스 “안녕하세요＂ {message: “안녕하세요”} Insert “안녕하세요＂ 민석: 안녕하세요 실제로 일어나는 일
23. 사용자 웹 / 앱 서버 데이터베이스 “안녕하세요＂ {message: “안녕하세요”} Insert “안녕하세요＂ 민석: 안녕하세요 실제로 일어나는 일 Firebase 가 도와줄 수 있는 영역
24. 그럼 에서 어떤 기능을 사용하나요?
25. • 다른 사용자와 연결 시켜주는 서버 • 사용자의 정보를 저장하는 데이터베이스 • 간편한 로그인을 도와주는 인증 과정
26. • 서버 • 데이터베이스 • 간편한 인증 과정
27. • 서버 • 데이터베이스 • 간편한 인증 과정 Firebase Hosting Firebase FireStore Firebase Authentication
28. 시작해봅시다!
29. 파이어 베이스를 이용하여 나만의 서비스 만들기 컴퓨터공학과 박민석 실기
30. 시작하기전에 무엇을 만들 것인지 정리해봅시다!
31. 안녕하세요 그냥 채팅 서비스
32. 안녕하세요 1. 메시지 전송 가능 2. 메시지 수신 가능 3. 로그인 가능 4. 로그아웃 가능 5. 자랑도 가능 그냥 채팅 서비스 특)
33. 1. Google 아이디 2. Brackets 3. Terminal (or PowerShell) 먼저 준비해야할 것.
34. 0. 초기 세팅 1. 설정 2. 클라이언트 개발 3. 데이터베이스 연동 3. 로그인 구현 4. 테스트 5. 자랑! 오늘 우리가 작업할 순서.
35. 초기 세팅
36. • 다른 사용자와 연결 시켜주는 서버 • 사용자의 정보를 저장하는 데이터베이스 • 간편한 로그인을 도와주는 인증 과정
37. 0. 초기 세팅 0_ Nodejs 설치 1_ Firebase CLI 설치 2_Firebase Hosting npm install –g firebase-tools sudo apt-get install nodejs firebase login firebase init firebase deploy
38. - Hosting 세팅
39. 짝짝짝! 자신만의 웹 서버가 생겼습니다! (컴퓨터공학과 2학년 과정)
40. 클라이언트 개발
41. 안녕하세요 HTML + CSS + jQuery
42. 안녕하세요 HTML + CSS + jQuery (Boots Strap)
43. 일해라!
44. 메시지 전송, 수신
45. 새로운 메시지를 보낼 경우 민석: 안녕하세요
46. 새로운 메시지를 보낼 경우 안녕하세요 민석: 안녕하세요 입력창에 “안녕하세요” 입력 전송 버튼 클릭
47. 민석: 안녕하세요 새로운 메시지를 보낼 경우 안녕하세요 입력창에 “안녕하세요” 입력 전송 버튼 클릭
48. 민석: 안녕하세요 새로운 메시지를 보낼 경우 “안녕하세요” 입력창에 “안녕하세요” 입력 전송 버튼 클릭 0) 입력 창의 내용 지우기 1) 메시지 리스트에 메시지 추가 2) 추가된 메시지를 서버로 전송 안녕하세요
49. 새로운 메시지를 받을 경우 안녕하세요
50. 새로운 메시지를 받을 경우 안녕하세요 “안녕하세요” 서버에서 메시지가 받아짐
51. 새로운 메시지를 받을 경우 안녕하세요 “안녕하세요” 서버에서 메시지가 받아짐 0) 메시지 리스트에 메시지 추가 안녕하세요
52. 일해라!
53. DataBase 연동
54. • 다른 사용자와 연결 시켜주는 서버 • 사용자의 정보를 저장하는 데이터베이스 • 간편한 로그인을 도와주는 인증 과정
55. 연동 하기 전, 무엇을 보내고 받을 것인지 정해야 합니다!
56. 민석: 안녕하세요 메시지의 구조 안녕하세요 메시지 번호 유저 아이디 메시지 내용 1 iamminseokpark 안녕하세요 이미지 …./photo.jpg
57. - FireStore 세팅
58. 짝짝짝! 자신 만의 데이터베이스가 생겼습니다! (컴퓨터공학과 3학년 과정)
59. 새로운 메시지를 보낼 경우 “안녕하세요” 입력창에 “안녕하세요” 입력 전송 버튼 클릭 0) 입력 창의 내용 지우기 1) 메시지 리스트에 메시지 추가 2) 추가된 메시지를 서버로 전송 안녕하세요 새로운 메시지를 받을 경우 안녕하세요 서버에서 메시지가 받아짐 0) 메시지 리스트에 메시지 추가 안녕하세요 “안녕하세요”
60. 일해라!
61. 로그인, 로그아웃
62. • 다른 사용자와 연결 시켜주는 서버 • 사용자의 정보를 저장하는 데이터베이스 • 간편한 로그인을 도와주는 인증 과정
63. 사용자가 로그인이 되어있을 경우 사용자 로그아웃 사용자가 로그인이 되어있지 않은 경우 로그인 • 로그아웃 버튼 표시 • 입력 창 활성화 • 로그인 버튼 표시 • 입력 창 비활성화
64. - Authentication 세팅
65. 일해라!
66. 짝짝짝! 서드파티 서비스 계정을 자신의 서비스와 연동시켰습니다! (어디가서 안알랴줌)
67. 확인!
68. 자랑! * 주의) 자랑할때 파이어베이스에서 사용한 API KEY는 외부에 자랑하지 마세요. 요금 폭탄의 대상이 될 수 있습니다.