안녕하세요. 이지이지입니다.
이번 포스팅에서는 앱인벤터에서 데이터베이스 사용을 위한 파이어베이스 컴포넌트에 대해 알아보도록 하겠습니다.
파이어베이스는 아직 실험실(Experimental)에 있는 단계인데요.
아직 앱인벤터에서 사용자별 권한설정 등 파이어베이스의 모든 기능을 활용하지 못하여 그런 것 같습니다.
그래도 앱인벤터에서 가장 쉽고 편리하게 사용할 수 있으면서, 사용자 인증기능까지 제공하는 것은 파이어베이스 밖에 없는 것 같습니다.
파이어베이스로 이메일 인증 기능이 있는 회원가입, 로그인 기능 구현이나 권한 관리(규칙 설정) 등과 같은 좀 더 고난이도 스킬은 제 블로그의 이전 포스팅을 참고하시구요.
앱인벤터 회원가입 및 로그인 만들기(feat. 이메일 인증, 파이어베이스DB) #1
안녕하세요. 이지이지입니다. 이번 포스팅에서는 앱인벤터2(App Inventor2)에서 회원가입 및 로그인 기능을 만들어 볼텐데요. 여러 사이트들에서 볼 수 있는 이메일인증 기능과 파이어베이스(firebase
egeasy.tistory.com
앱인벤터 파이어베이스(Firebase)DB 권한 관리(규칙 설정)
안녕하세요. 이지이지입니다. 이 포스팅을 읽는 분이라면 파이어베이스DB를 사용하고 있다는 것이고, 파이어베이스를 사용하는 이유는 1. 데이터를 웹에 저장하고 사용자들이 변화하는 데이터
egeasy.tistory.com
이번 포스팅에서는 간단하지만 가장 자주 사용하는 파이어베이스의 기능을 상세하게 알려드리고자 합니다.
파이어베이스를 이용해 다음 화면과 같은 예제 앱을 만들어 보도록 하겠습니다.
| 사전 설정: 파이어베이스 프로젝트 만들기 |
※ 이미 파이어베이스에서 프로젝트를 만들어 두신 분이라면 이 과정은 넘어가도 됩니다.
1. 먼저 다음 링크를 통해 파이어베이스 사이트로 이동합니다.
Firebase
Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.
firebase.google.com
2. 메인 화면에서 [시작하기 Get Started]를 클릭합니다.
3. [프로젝트 추가]를 클릭합니다.
4. 프로젝트의 이름을 입력하고 [계속]을 클릭합니다.
5. Google 애널리틱스 화면에서 토글 버튼을 활성화하고 [계속]을 클릭합니다.
(선택 사항으로활성화하지 않아도 됩니다.)
6. 애널리틱스를 사용할 계정을 선택하고 [프로젝트 만들기]를 클릭합니다.
7. 왼쪽 메뉴에서 [Realtime Database]를 선택하고 [데이터베이스 만들기]를 클릭합니다.
8. 실시간 데이터베이스 위치는 아무 지역이나 선택합니다. (저는 줄곧 미국을 선택했습니다.)
9. 보안 규칙 설정에서 [테스트 모드에서 시작]을 선택하고 [사용 설정]을 클릭합니다.
(나중에 규칙을 변경할 것이기 때문에 [잠금 모드로 시작]을 선택해도 괜찮습니다.)
10. 다음과 같이 데이터베이스가 생성되면, 빨간색 네모 부분을 앱인벤터에서 사용하기 위해 다른 곳에 기록해둡니다.
(앱인벤터에서 Firebase URL에 입력할 내용입니다.)
11. [규칙]을 클릭하고 다음과 같이 모든 사용자가 데이터베이스에 읽기(read), 쓰기(write)를 할 수 있도록(true) 규칙을 수정합니다. 기본적인 규칙은 데이터베이스를 생성한 후 한 달 이내만 모든 사용자가 읽고 쓸 수 있도록 되어 있는 것입니다.
※ 모든 사용자에게 읽고 쓰는 권한을 줄 경우 파이어베이스 프로젝트 화면에서 계속 경고를 보냅니다.
(사용자에게 경고 메시지가 보이는 것은 아닙니다.)
추후 파이어베이스와 앱인벤터에 대한 이해가 늘어나면 위에 링크를 걸어두었던 파이어베이스 권한 관리 포스팅을 참고하시기 바랍니다.
12. 메뉴 좌측 상단의 [톱니바퀴]-[프로젝트 설정]을 클릭하고 웹 API 키를 앱인벤터에서 사용하기 위해 다른 곳에 기록해둡니다. (앱인벤터에서 FirebaseToken 부분에 입력할 내용입니다.)
※ 만약 웹 API 키 부분에 "이 프로젝트에 웹 API 키가 없습니다."라고 쓰여 있는 경우에는
다음 이미지를 따라 [Sign-in method]에서 [이메일/비밀번호]를 사용설정합니다.
그런 다음 프로젝트 설정을 보게 되면 웹 API 키가 생성되어 있을 것입니다.
파이어베이스 설정은 이것으로 끝이 났습니다.
| 화면 구성 |
다음은 예제 앱의 화면 구성입니다. 다음 aia 파일을 내려받아 참고하시기 바랍니다.
FirebaseDB1과 FirebaseDB2의 속성은 공통적으로 위의 이미지처럼 설정합니다.
FirebaseToken: 여러분의 파이어베이스 웹 API 키
FirebaseURL: Realtime Database의 URL
Use Default: 체크 해제
Persist: 체크 해제
ProjectBucket: 공란
※ ProjectBucket는 작업대상이 되는 폴더 개념이라고 생각하면 쉽습니다.
ProjectBucket으로 지정하는 폴더 안에서 자료를 추가, 수정, 검색, 삭제 등이 이루어지는 것입니다.
ProjectBucket은 고정되어 있는 것이 아니라 사용자가 작업하기를 원하는 폴더를 선택하는 것으로 계속 변경가능합니다.
ProjectBucket은 디자인 화면에서 속성창(Properties)에서 지정할 수도 있지만, 계속 변경시키는 경우가 많아 필요할 때 마다 그리고 경로를 확실히 해주기 위해 블록 코딩으로 지정하는 것이 일반적입니다.
만약 다음 이미지처럼 컴퓨터에 폴더가 있다면
로컬 디스크 (D:)는 여러분의 Realtime Database의 URL 주소로 볼 수 있고,
ProjectBucket을 [국가]로 지정하면, 그 하위 폴더 [남아메리카, 북아메리카....유럽]에서 작업이 이루어지고,
ProjectBucket을 [아시아]로 지정하면, 그 하위 폴더 [일본, 중국, 한국]에서 작업이 이루어지는 것으로 볼 수 있습니다.
| 블록 코딩 |
다음은 예제 앱의 전체 블록 코딩입니다.
블록이 많아 보이나, 덩어리 지어진 블록이 많아서 그렇지 난이도는 쉬운 편입니다.
파이어베이스는 JSON 형식으로 데이터를 저장하게 됩니다.
JSON 형식은 앱인벤터의 Dictionary의 개념과 같으며 중괄호 { } 안에 {"키":"값"}의 쌍으로 이루어집니다.
"키"를 검색하면 "키"에 해당하는 "값"을 가져오게 됩니다.
ex.) {"pencil":"연필"} "pencil"로 검색하면 "연필"을 가져 옴.
※ 파이어베이스에서는 "키"를 "태그(tag)"라고 합니다.
오늘 포스팅의 주제가 파이어베이스이니 만큼 지금부터는 계속 태그로 사용하겠습니다.
- 문자를 사용할 때는 반드시 따옴표(" ")로 묶어 주어야 합니다.
- 리스트(배열)를 사용하고자 할 때에는 대괄호 [ ] 안에 항목을 콤마로 구분합니다. ex.) [한국, 일본, 중국]
※ 파이어베이스 태그(tag)의 이해
파이어베이스에는 태그(tag)가 값(value)이 될 수도 있고, 값이 태그가 될 수도 있습니다.
오늘 예제 앱의 데이터베이스 구조를 통해 알아보겠습니다.
1. ProjectBucket이 최상위 웹 URL일 때,
→ TAG: User_Data
→ Value: {이순신 및 하위 내용, 이지이지 및 하위 내용....}
1. ProjectBucket이 User_Data일 때,
→ TAG: 이순신, 이지이지, 장보고, 홍길동
→ Value: {"국어":"점수","수학":"점수","영어":"점수","학반":"학반"}
2. ProjectBucket이 이순신일 때,
→ TAG: 국어, 수학, 영어, 학반
→ Value: "점수" 또는 "학반"
먼저 학생 개인의 정보를 다루기 위한 변수입니다.
① Realtime Database로부터 정보를 받았을 때 정보를 저장할 변수입니다.
→ 파이어베이스의 JSON 형식은 앱인벤터의 딕셔너리(Dictionary)와 잘 어울리므로 빈 딕셔너리를 만듭니다.
②~④ 학생 개인의 과목별 점수를 저장할 변수입니다.
⑤ Realtime Database에 학생 개인의 정보를 조회하고 수정할 때 블록 코딩이 달라집니다. 그래서 어떤 경우인지 나중에 저장할 변수입니다.
다음은 ListPicker1~2를 선택한 다음에 발생하는 블록입니다.
ListPicker1은 개인에, ListPicker2는 학반 전체에 사용됩니다.
- 리스트피커에서 항목을 선택했더라도 사용자에게 보여지는 리스트피커의 텍스트가 변하지는 않습니다.
그래서 사용자가 선택한 것을 리스트피커의 텍스트로 나타내게 하는 것입니다.
다음은 어느 텍스트박스를 누르더라도 무조건 발생하는 블록입니다.
예제 앱에는 텍스트박스가 총 4개가 있습니다.
- 이름을 입력할 텍스트박스 1, 국어/수학/영어 점수를 입력할 텍스트박스 3
- 사용자가 텍스트박스를 누른다는 것은 정보를 입력한다는 것이므로 사용자의 편의를 위해 텍스트박스가 눌려지면 기존의 텍스트를 지우도록 하는 것입니다.
※ Any Component는 [Blocks]창의 맨 왼쪽 하단에 있습니다.
이제 본격적으로 파이어베이스 관련 블록들입니다.
먼저 [입력] 버튼을 클릭했을 때 실행되는 블록입니다.
① [입력] 버튼을 클릭했을 때
② FirebaseDB1의 ProjectBucket을 User_Data/txt_name.text로 합니다.
→ 경로를 입력할 때 하위 수준을 나타낼 때는 일반 컴퓨터에서 처럼 슬래시( / )를 이용합니다.
③~⑥ FirebaseDB1에 태그(tag):값(valueToStore)형식으로 자료를 입력합니다.
→ ProjectBucket이나 태그가 기존에 없는 경우는 새로 생성합니다.
→ ProjectBucket이나 태그가 기존에 있는 경우는 값만 새로 저장됩니다.
만약 앱인벤터 화면에서 txt_name: 이지이지, LP_class: 1-1, txt_Kor: 80, txt_Math: 55, txt_English: 75를 입력했다면,
파이어베이스에는 다음과 같이 저장됩니다.
[조회] 또는 [수정] 버튼을 클릭했을 때 실행되는 블록입니다.
① [조회] 또는 [수정] 버튼을 클릭했을 때
② 변수 query_type에 "조회" 또는 "수정"을 입력합니다.
③ FirebaseDB1의 ProjectBucket을 User_Data로 설정합니다.
④ txt_name을 tag로 하는 값(value)을 가져옵니다.
※ 다음 이미지에서처럼
- GetValue로 파이어베이스를 호출하여 정보를 달라는 요청을 한 후
- 파이어베이스로부터 앱이(사용자가) 정보를 받게 되면 GotValue이벤트를 사용할 수 있습니다.
- GotValue 블록에서 tag는 GetValue에서 사용자가 지정한 tag이며,
- GotValue 블록에서 value는 tag에 해당하는 값을 가져오게 됩니다.
[삭제] 버튼을 클릭했을 때 실행되는 블록입니다.
① [삭제] 버튼을 클릭했을 때
② FirebaseDB1의 ProjectBucket을 User_Data로 설정합니다.
③ txt_name에 해당하는 tag를 삭제합니다.
→ tag를 삭제하면 tag에 속해 있는 값(value) 또한 삭제됩니다.
FirebaseDB1이 데이터베이스로부터 정보를 받았을 때 실행되는 블록입니다.
블록이 많아 보이나, 항목만 달리하는 반복되는 블록이기 때문에 심플한 편입니다.
① FirebaseDB1이 정보를 받았을 때
→ 위에서 언급했듯이 예제 앱에서 FirebaseDB1은 [조회] 버튼 또는 [수정] 버튼을 클릭하여 FirebaseDB1.GetValue를 호출하면 정보를 받게 됩니다.
② 만약 받은 정보가 없다면, (있다면 ④으로)
→ [조회] 또는 [수정] 버튼을 블록에서 FirebaseDB1.GetValue로 데이터베이스를 호출할 때, tag를 txt_name으로 해두었습니다. 그래서 만약 받은 정보가 없다면, 그 태그(이름)가 데이터베이스에 없다는 것을 의미합니다.
③ "이름이 존재하지 않습니다."라는 알림창을 띄웁니다.
④ 변수 FirebaseData에 데이터베이스로부터 받은 정보를 입력합니다.
→ 변수 FirebaseData는 변수 블록의 설명을 보면 딕셔너리형태로 설정을 해두었습니다.
→ 만약 [조회]나 [수정] 버튼을 클릭했을 때 FirebaseDB1.GetValue 블록의 tag를 "이지이지"로 하였다면 변수 FirebaseData에는 다음과 같이 딕셔너리 형태로 정보가 저장됩니다.
{"국어":"＼"80＼", "학반":"＼"1-1＼", "수학":"＼"55＼", "영어":"＼"75＼"}
⑤~⑦ 변수 Kor, Math, Eng에 key가 "국어", "수학", "영어"에 해당하는 값을 저장합니다.
만약 key가 없다면 값에 "not found"를 저장합니다.
⑧ 만약 변수 query_type에 저장된 값이 "조회"라면, (그렇지 않다면 ⓐ로)
→ [조회] 버튼을 클릭했다는 의미입니다. [조회] 버튼을 클릭했을 때 블록 참고
⑨~⑪ 앱인벤터에서 국어, 수학, 영어 점수의 텍스트를 각각 변수 Kor, Math, Eng에 저장되어 있는 값으로 표시합니다.
ⓐ 만약 변수 Kor에 입력된 값이 txt_Kor에 입력된 값과 다르다면,
→ 변수 Kor에는 데이터베이스로부터 받은 점수가 저장되어 있습니다.
앱인벤터의 txt_Kor에 입력된 내용과 변수 Kor의 값이 다르다면 사용자가 수정을 했다는 의미가 됩니다.
ⓑ FirebaseDB1의 ProjectBucket를 User_Data/txt_Name.text 로 합니다.
ⓒ FirebaseDB1에 tag를 "국어"로 값을 txt_Kor.text로 수정하여 저장합니다.
ⓓ~ⓘ: ⓐ~ⓒ와 동일
다음은 전체 학생의 평균 및 선택된 학반의 평균을 구하기 위한 변수 블록입니다.
①~③ 각 과목별로 전체 학생의 성적합을 저장할 변수입니다.
④~⑥ 각 과목별로 선택된 학의 학생의 성적합을 저장할 변수입니다.
⑦~⑧ 전체 학생 수 및 선택된 학반의 학생 수를 저장할 변수입니다.
⑨~⑫ 각 과목의 점수 및 학반을 리스트 형태로 저장할 변수입니다.
다음은 [평균 조회하기] 버튼을 클릭했을 때 실행되는 블록입니다.
① [평균 조회하기] 버튼을 클릭했을 때
②~⑨ 각 변수에 0을 저장합니다.
→ [평균 조회하기] 버튼을 여러 번 눌렀을 때 기존에 저장되어 있던 값을 초기화하는 것입니다.
⑩ FirebaseDB2의 ProjectBucket을 공백으로 합니다.
→ 최상위 경로가 ProjectBucket이 됩니다.
⑪ FirebaseDB2에서 tag가 "User_Data"에 해당하는 값을 가져오도록 요청하라.
마지막으로 FirebaseDB2가 데이터베이스로부터 값을 전달받았을 때 실행되는 블록입니다.
이 블록 역시 같은 내용이 반복되어 많아 보이는 것이지, 실제로는 단순한 과정입니다.
이해를 돕기 위해 이 블록은 User_Data를 tag로 했을 때 값을 받아오는 블록이므로,
다음과 같은 값을 전달받게 됩니다.
① FirebaseDb2가 정보를 전달받았을 때
② 변수 total_Count에 전달받은 리스트의 항목 개수를 입력합니다.
→ User_Data 바로 아래 수준의 key의 개수가 저장됩니다.
→ 이 예제 앱에서는 4가 저장됩니다.
③ Kor_AllList, Math_AllList, Eng_AllList, Class_AllList 각 변수에 모든 사용자의 점수 및 학반을 저장합니다.
위의 list by walking key path는 지정된 key를 따라 가며 해당 key에 해당하는 값을 리스트 형태로 가져오는 블럭입니다.
key의 path는 리스트 형태로 입력합니다.
walk all at level은 그 노드 수준의 모든 키를 탐색합니다.
위의 예에서는 경로 설정 리스트의 첫 번째 항목에 walk all at level로 되어 있으므로, 첫 번째 노드의 모든 키를 검색합니다. 그러면 [이순신, 이지이지, 장보고, 홍길동] 모든 키의 내용을 검색합니다.
경로 설정 리스트 두 번째 항목에는 "국어"라고 되어 있으므로, 각 사용자의 키가 "국어"인 값을 저장하게 됩니다.
결국 ["96", "80", "72", "30"]이 저장됩니다.
딕셔너리에 대한 더 자세한 사항은 제 블로그의 이전글을 참고하시기 바랍니다.
앱인벤터 강좌 #2 딕셔너리(Dictionary) 블록
안녕하세요. 이지이지입니다. 이번 포스팅에서는 딕셔너리(Dictionary) 블록에 대해 알아보도록 하겠습니다. 딕셔너리(Dictionary)란? 딕셔너리는 키(key)와 값(value)으로 이루어진 데이터 구조를 말하
egeasy.tistory.com
④ 1부터 파이어베이스로 부터 전달받은 값의 리스트 항목 개수(② 참고) 만큼 1씩 증가하면서 do 안의 블록을 실행합니다.
⑤ Kor_Total, Math_Total, Eng_Total 각 변수에 각 과목 리스트에 저장되어 있던 모든 값을 더하여 총점을 구합니다.
replace all text 블록은 텍스트에 포함된 segment를 replacement로 대체하는 블록입니다.
위의 ③에서 보듯 각 과목 점수 리스트의 항목에 따옴표가 있어 ["96", "80", "72", "30"] 앱인벤터가 텍스트로 인식하여 계산을 할 수 없으므로 따옴표를 제거해 준 것입니다.
⑥ 만약 학반 리스트에서 선택된 학반이 리스트피커2에서 선택된 항목과 같다면
⑦ 변수 class_Count에 1을 더해줍니다.
→ 해당 학반의 사용자 수를 구하는 것입니다.
⑧ Kor_Class, Math_Class, Eng_Class 각 변수에 해당학반의 각 과목 점수를 더하여 각 과목별 합계를 저장합니다.
⑨ 검색 결과를 나타내는 레이블들에 "(학급)총점 / (학급)사용자 수"의 결과를 나타냅니다.
format as decimal number 블록은 숫자를 소수로 표현하는 블록으로,
number에는 소수로 나타낼 숫자를, places에는 몇 번째 자리까지 나타낼지를 입력합니다.
이상 파이어베이스의 기본적인 사용방법에 대해 알아보았습니다.
파이어베이스의 나머지 블록은 오늘 포스팅을 이해하셨다면 쉽게 적용할 수 있을 것입니다.
앱인벤터에서 가장 쉽고 잘 활용할 수 있는 파이어베이스 유용하게 사용하세요~~~
댓글