안녕하세요. 이지이지입니다.
이번 앱인벤터 포스팅에서는 채팅앱을 만들어 볼텐데요...
두 개의 포스팅으로 나누어져 있으며,
첫 번째 포스팅에서는 Screen1을, 두 번째 포스팅에서는 Screen_Chat를 완성합니다.
Screen1은 채팅방 만들기 또는 개설된 채팅방에 입장하기 등 기본적인 채팅 설정에 대한 스크린이며,
Screen2는 실제 채팅을 통해 메시지를 주고 받는 스크린입니다.
본 예제 앱을 통해 여러분은
1. FirebaseDB
2. ListView에 대한 이해를 할 수 있습니다.
화면 구성 및 블록 코딩은 다음 소스 파일을 내려받아 참고하시기 바랍니다.
| 사전 준비 (파이어베이스 프로젝트 만들기) |
본 예제 앱에서는 메시지를 저장하고, 불러오기 위해서 파이어베이스의 Realtime Database를 이용합니다.
파이어베이스 프로젝트 만들기는 이전 포스팅에서 자세히 설명하였으니, 이전 포스팅을 참고하시기 바랍니다.
앱인벤터 강좌 #3 파이어베이스(Firebase)
안녕하세요. 이지이지입니다. 이번 포스팅에서는 앱인벤터에서 데이터베이스 사용을 위한 파이어베이스 컴포넌트에 대해 알아보도록 하겠습니다. 파이어베이스는 아직 실험실(Experimental)에 있
egeasy.tistory.com
위의 강좌를 보고 프로젝트를 만드시고,
예제 앱에서 사용할 다음 두 가지 항목을 메모장 같은 곳에 기록해두시기 바랍니다.
1. 웹 API키
2. Realtime Database URL주소
그리고
3. Realtime Database의 규칙 설정에서 read와 write 권한을 모두 꼭 true로 설정해두시기 바랍니다.
(위의 링크된 포스팅에 설명 되어 있습니다.)
| 화면 구성 |
Screen1은 기본적인 채팅방 설정에 관환 화면입니다.
화면 구성에 있어 특별한 사항은 없으나,
단 FirebaseDB 컴포넌트의 속성 중 다음 두 가지 사항 입력에 주의하시기 바랍니다.
(사전 준비 단계에서 메모해 두었던 부분을 입력합니다.)
1. FirebaseToken: 파이어베이스 프로젝트의 웹 API키
2. FirebaseURL: 파이어베이스 Realtime Database URL
- 채팅룸: 채팅방의 이름으로 사용할 내용을 입력합니다.
- 비밀번호: 방을 개설하는 사용자의 경우에는 자신이 원하는 비밀번호를 입력하면 되고,
개설된 채팅방으로 참여할 사용자는 개설자가 설정한 비밀번호를 입력합니다.
- 닉네임: 채팅방에서 사용할 사용자의 닉네임입니다.
| 블록 코딩 |
블록 코딩에 앞서 파이어베이스 Realtime Database의 사용에 대해 간단히 언급만 하고 가겠습니다.
더 자세한 사항은 사전 준비 부분의 링크된 이전 포스팅을 참고하시기 바랍니다.
앱인벤터에서 Realtime Database를 이용할 때, 반드시 알아야 할 개념은 ProjectBucket, tag, value입니다.
ProjectBucket, tag, value는 정해져 있는 것이 아니라 변경할 수 있으며, ProjectBucket에 따라 tag가 달라지게 됩니다.
- ProjectBucket: 데이터베이스의 여러 항목(경로) 중, 실제 데이터를 읽고 쓰고 할 항목의 한 수준 상위 디렉토리
- tag: ProjectBucket의 한 수준 하위 항목
- value: tag에 저장되어 있는 값
이 개념을 좀 더 쉽게 영한사전을 예로 들어 비유하자면,
- ProjectBucket: 사전 200페이지
- tag: 사전 200페이지에 있는 영어 단어들(ex. cat, cookie, corn ...)
- value: tag에 대응되는 한글 뜻(ex. 고양이, 쿠키, 옥수수 ...)
본 앱에서 사용한 Realtime Database의 구조는 다음과 같습니다.
CHAT_1과 CHAT_2는 채팅방 이름으로 사용되었습니다.
password는 채팅방의 비밀번호입니다.
이름은 사용자가 입력한 닉네임이고 이름 옆에는 리스트 형식으로 채팅 메시지를 저장합니다.
만약 ProjectBucket을 ChatRoom/CHAT_1으로 설정한다면,
tag는 password, 김유신, 이순신이 되며
value는 1234, 김유신 채팅 메시지, 이순신 채팅 메시지가 됩니다.
이제 어느 정도 개념이 잡히셨다면, 블록 코딩을 살펴보도록 하겠습니다.
먼저 전체 블록 코딩입니다.
[시작하기] 버튼(btn_Start)을 클릭했을 때 실행되는 블록입니다.
① [시작하기] 버튼(btn_Start)을 클릭했을 때,
② 만약 txt_Chatroom 또는 txt_Password 또는 txt_Nickname이 공백이라면, => (true면 3번, false면 4번으로)
→ 필요한 정보가 최소한 하나는 빠진 것입니다.
③ 대화상자를 통해 정보가 부족하다는 메시지를 보여줍니다.
④ firebase_Chatroom의 ProjectBucket을 ChatRoom/txt_Chatroom.Text(사용자가 입력한 채팅방 이름)으로 설정합니다.
→ 기존에 경로가 존재하고 있지 않다면 새로 생성됩니다.
⑤ 파이어베이스 데이터베이스로부터 tag가 password인 것의 값(value)을 가져옵니다.
→ 만약 password란 tag가 없다면, 그 채팅방이 개설되어 있지 않았다는 것을 의미하므로 값으로 noRoom을 받도록 설정하였습니다.
⑥ [시작하기] 버튼을 눌렀다는 것은 모든 정보의 입력이 끝이 났다는 것이므로, 가장 늦게 입력했을 가능성이 높은txt_Nickname을 입력할 때 나타난 키보드를 숨깁니다.
→ txt_Chatroom, txt_Password를 가장 늦게 입력하였을 가능성도 있으니, HideKeyboard를 더 추가하여도 됩니다.
다음은 데이터베이스로부터 값을 전달받았을 때, 실행되는 블록입니다. 위에서 다음 블록으로 값을 가져오라는 명령을 한 후 실제 값을 받게되면 실행되는 것입니다.
① 데이터베이스로부터 값을 받았을 때
② 만약 받은 값(value)이 "noRoom"이라면 => (true면 3번으로, false면 6번으로)
→ password라는 tag가 없는 것이므로, 아직 사용자가 입력한 이름으로 개설된 채팅방이 없다는 의미입니다. (3번과 연결)
③ tag는 "password"로, tag에 대응하는 값으로 txt_Password.Text를 저장합니다.
④ TinyDB1에 사용자의 닉네임을 저장해둡니다. (Screen2에서 사용할 것입니다.)
⑤ 이제 방 개설이 끝났으므로, 실제 채팅 메시지가 오가는 Screen_Chat를 열어줍니다. 이 때 txt_Chatroom.Text(채팅방 이름)을 Screen_Chat로 startValue를 통해 전달합니다.
→ 타이니DB에 저장해 두어도 될 것입니다.
이상으로 채팅방 개설 등 채팅을 시작하기 위한 준비과정이 모두 끝났습니다.
다음 포스팅에서 실제 채팅 메시지가 오가는 화면을 완성해보도록 하겠습니다.~~~
댓글