P2SKLife

Firebase Realtime Database를 등록 유효날자가 경과하니 Permission Denied 에러 메시지가 허걱!

데이타베이스에 저장이 안된다.. 헐!

그래서 여기저기 검색해보다가 규칙설정의 읽고 쓰기를 true로 변경하면 된다하여 다음 그림과 같이 했더니

다행히 다시 저장이 되기 시작했다.

Firebase에 로그인 해서

1. Realtime Database을 클릭한다.

2. [규칙]을 클릭한다.

3. [규칙수정]에서 그림과 같이 true루 수정을 한다.

그러면 화면에 위와 같은 팝업창이 나타나는데 이때 [게시]를 과감히 클릭한다. 끝...

DB중 실시간 자료 갱신여부를 체크해주는 Firebase의 Realtime Database 등록 및 설정 방법을 알려드리겠습니다.

1. 먼저 firebase에 가입을 해야합니다. 위 링크를 클릭하여 회원가입을 합니다.

대부분 구글계정이 있으시기 때문에 별도 절차없이 구글 계정으로 로그인 하시면 바로 이용할 수 있습니다.

2. 로그인 후 [시작하기]를 클릭합니다.

3. [프로젝트 추가]를 클릭합니다.

4. 프로젝트 이름을 영문4자 이상으로 하여 원하는 문자를 입력한 후 [계속]을 클릭합니다.

5. [계속]을 클릭합니다.

6. 계정을 선택한 후 [프로젝트 만들기]를 클릭합니다.

7. 프로젝트가 생성중입니다. 잠시만 기다리면 완성됩니다.

8. 이제 [sample]이라는 프로젝트가 준비되었습니다. [계속]을 클릭하시면 됩니다.

9.  좌측 메뉴 중 [Realtime Database]를 클릭합니다.

10. [데이타베이스 만들기]를 클릭합니다.

11. [테스트 모드에서 시작]을 선택하고 [사용 설정]을 클릭합니다.

12. 이제 나만의 실시간 데이타베이스 공간이 확보되었습니다. 일단, 빨간 화살표의 클립아이콘을 클릭하여 빨간 네모안의 url주소를 복사합니다.

13. 코둘라(앱인벤터)에서 Firebase RetimeDatabse 컴포넌트 항목을 디자인에서 추가 한후 속성 화면을 보시면 위와 같이 3개의 항목을 이제 채워 넣어야 통신이 가능해집니다. 이 중 1,2번은 firebase에서 값을 복사해와야 하며, 3번은 임의의 문자열을 원하는 대로 입력하면 됩니다. 일종의  폴더명이라고 생각하시면 쉽습니다.

자, 12번에서 복사한 값을 위의 2번 URL칸에 붙여넣기합니다. 

14. 이번엔 1번 토큰값을 복사하는 방법입니다. 다시 Firebase 화면으로 갑니다.

     빨간 원의  톱니 아이콘을 클릭하고 [프로젝트 설정]을 클릭합니다.

15. 웹API키 검은선 부분을 복사합니다. 그리고 12번의 1번 네모칸[Token]에 붙여넣기합니다.

자, 이제 대망의 실시간 데이타베이스 사용 준비가 완료되었습니다.

활용 예제는 다음에 올려드리도록 하겠습니다. 

16. 그리고 끝으로 읽고 쓰기 권한 규칙을 수정해 주지 않으면 나중에 permission denied로 읽고 쓰기가 불가능해질 시기(한달 뒤)가 옵니다. 바로 규칙을 다음과 같이 수정해줍니다.

16. 위 그림과 같이 규칙을 수정해 주고 

17. [게시]를 클릭해 줍니다... 이제 읽고 쓰기 권한이 부여되었으니 거부당할 일이 없습니다...

리스트를 행을 나누어 변수에 저장하는 방법입니다.

먼저 디자인에서 [HTML Format]을 활성화 시켜줍니다.

블럭코딩에서 위 그림과 같이 리스트와 변수를 설정합니다.

for each 블럭으로 해당 리스트[Title]의 길이를 구해서[length of list] 1까지 역순[-1]로 반복하게 합니다.

1부터 하면 맨 마지막 행이 맨 위로 합쳐지기 때문에 첫 행을 맨 나중에 합쳐지게 하려면 역순으로 처리해야합니다.

그리고 변수[Title2]에 줄바꿈 명령어<br>을 삽입하여 이전 상태에 다시 ㅊ행을 추가하면 행이 나위어져 문자열이 합쳐집니다.

단순히 리스트를 거꾸로 정렬하는 reverse도 있으니 잘 조합하면 뭔가 멋진 그림이 그려질 것입니다.

1단계 : 첫번째 리스트피커인 [교과서]의 목록을 선택하기 위한 리스트[ListTextBook]를 [Before Picking] 컴포넌트에 입력합니다.

2단계 : 선택한 교과서명을 화면의 ListPicker에 표시하기 위해 [After Picking]컴포넌트에 지정합니다.

         여기서는 선택한 교과서명에 해당하는 파일을 읽는 과정을 [After Picking] 단계에서 시작하는 예제입니다.

         2단계에서 교과서를 선택하면 해당 교과서 파일을 읽어 들입니다.

         여기서 파일명은 관리하기 편하도록 인덱스번호를 쉽게 활용하기 위하여 교과서명이 아닌 일련번호로 파일명을 정하였습니다.

         파일읽기의 [Get Text]컴포넌트에서 파일의 내용을 리스트로 변환합니다.

         파일에는 [곡목(Title), 유튜브 주소(Youtube), 총재생시간(TotalTime)]으로 저장했습니다.

3단계 :  2단계 처리 과정 중에 두번째 리스트피커[ListTitle]의 [Elements], [Text]를 지정해줍니다.

4단계 : [After Picking] 컴포넌트에 선택 후 처리할 내용을 지정합니다. 여기서는 선택한 곡목의 인덱스번호[Selection Index]를 다른 컴포넌트(유튜브 재생)에 활용하기 위하여 변수[index]에 저장합니다. 

총 시간이 초로 되어 있는 것을 분과 초로 나누어 변환하는 예제입니다.

변수 [TempTime]에 들어 있는 숫자(초)를 60으로 나눈 몫(quotient of]으로 분의 값을 구하고

60으로 나눈 나머지(remainder of)로 초의 값으로 구하면 됩니다.

코듈러에서 유뷰브 동영상을 원하는 시간에 시작하게 하려면

위 그림과 같이 [Start Second]로 시작하는 값[초단위:숫자]을 정해준 후

[Load video Id]에 유튜브 동영상 주소를 문자로 연결해 준 후

[Play]하면 됩니다.

먼저 아직 firebase storage를 등록하지 않은 경우에는 위 블로그 내용을 참조하여 먼저 등록절차를 마치셔야합니다.

활용단계를 요약해보면

1. Firebase 등록하고 Storage 설정하기

2. Firebase Storage component 파일 import하기

3. 앱의 디자인에서 버킷값과 API키값 등록하기

4. 블럭 코딩을 하여 실제 활용하기

이번에는 2~4번까지를 알아보겠습니다.

코듈러에는 Firebase Storage 콤포넌트가 있는데 속성항목에 아무것도 없어서 버킷값과 API값을 등록할 수 없습니다. App Inventor에는 아예 없습니다. 그러나 둘 다 확장기능을 활용하여 파일을 import하면 사용이 가능합니다.

확장파일[com.mirxtremapps.FirebaseStorage.aix]을 첨부하였으니 다운로드해서 활용하세요.

먼저 다운로드 받은 파일을 import합니다.

앱인벤터2에서는 메뉴 중 [확장기능]-[확장기능추가하기]에서 다운로드 받은 파일을 선택하면 됩니다.

코둘라에서는 메뉴 중 제일 밑의 아이콘>Import Extension> [NO FILE CHOSEN] >다운받은 파일 선택.

이제 FirebaseStorage콤포넌트를 디자인 화면에 추가합니다.

추가된 컴포넌트 아이콘을 클릭하여 속성(Properties)창을 활성화합니다.

등록화면에서 메모해둔 API키와 버킷값을 입력합니다.

이제 블럭코딩화면에서 다음 예제와 같이 활용하면 됩니다.

FirebaseStorage 블럭 중 Get 블럭을 활용하는데, filename을 지정 후 response블럭으로 사진,오디오,비디오 보기나 재생기능을 응용하면 됩니다.

업로드하는 예제는 다음과 같습니다. 

앱을 개발하다보면 사진, 오디오, 비디오 파일이 필요한 경우가 있는데 이 파일을 프로그램 안에 포함시키면 덩치가 커져서 문제가 발생합니다. 쉬운 예로 사이트에서 정해 놓은 용량이 있어서 프로그램을 완성하여 앱을 apk로 만들 때 불가능할 수도 있습니다. 물론 이를 해결하려면 비용이 들어가면 가능할 것입니다. 그래서 무료로 사용하면서도 최대한 덩치가 제한 용량을 넘어가지 않도록 하려면 이런 미디어 파일을 별도 웹에 저장하고 필요할 때만 읽어들여와서 사용하면 될 것입니다. 이때 필요한 것이 온라인 상의 외부 저장소입니다. 앱인벤터와 비교적 간단하게 연결이 가능하며 거기다가 무료로(제한은 있음) 사용할 수 있는 것이 바로 Firebase입니다. 그중 Storage(저장소)를 활용하는 방법을 알아보겠습니다. 의외로 이 내용을 찾아보기가 어려웠고 참 힘들게 성공했습니다.

일단은 먼저 Firebase가입을 해야합니다.

주소=> http://firebase.google.com

[시작하기]를 클릭합니다.

[+프로젝트 추가]를 클릭합니다.

프로젝트 이름을 입력합니다. 프로젝트 이름은 4자(영문 기준) 이상, 문자, 숫자, 공백, -!'"만 포함할 수 있습니다.

[계속] [계속] 클릭합니다.

[계정]을 선택하고 [프로젝트 만들기]를 클릭합니다.

[프로젝트 생성중...]

[앱을 추가하여 시작하기] 위에 있는 안드로이드 아이콘(1)을 클릭합니다.

이 패키지 이름을 잘 정하고 입력여부를 확인해야 합니다. 개발중인 앱과 파이어베이스의 패키지 이름이 동일해야 정상적으로 자료를 주고 받을 수 있습니다. 특별한 규칙이 있는 것은 아니고 다른 앱과 중복되지 않는 자신만의 프로그램이름 정해서 앱에 입력하고 그 이름을 여기에도 입력하면 됩니다. 보통 위의 예처럼 "com.회사명 또는 자기 아이디.프로그램명" 등으로 정하면 됩니다. 여기서는 샘플로 "com.noname.abcd"로 해보겠습니다. 앱에도 이것을 입력해야 하는데 확인방법은 개발 사이트의 스크린 속성 중 패키지네임(또는 앱이름)이라는 항목이 있습니다. 여기에 동일하게 입력되어 있어야 합니다.

[앱등록]을 클릭합니다.

[다음] [다음] [이 단계 건너뛰기]를 클릭합니다.

이제 앱이 등록되었습니다.

[보안규칙]에서 [다음]을 클릭합니다.

[위치 설정]에서 [완료]를 클릭합니다.

먼저 2를 복사합니다. 그리고 메모합니다. 메모장에 붙여넣기 하면 좋습니다.

앞의 gs://부분은 제외합니다. 이게 앱에 등록할 [스토리지 버킷값]입니다.

1번을 클릭하여 Rules를 수정화면으로 이동합니다.

{bucket}을 지우고 방금 복사한 값을 붙여넣기 합니다.

두번째 네모, allow~ 를 수정합니다. 읽고 쓰기 권한 부여하는 방법입니다.

자세한 것은 해당 사이트의 안내를 참조하시기 바랍니다.

톱니모양의 아이콘을 클릭하여 [프로젝트 설정]을 클릭합니다.

웹API키를 메모장에 기록합니다.

자 이제 파이어베이스 스토리지(firebase storage)설정이 끝났습니다.

여기까지 오시느라 고생하셨습니다.

버킷값과 API키 값을 메모장에 잘 기록해 두시기 바랍니다.

블럭코딩 사이트에는 앱인벤터를 기반으로 하는 또 다른 사이트가 있습니다. Kodular(=AppyBuilder)와 Thunkable이라는 것이 있습니다. 이 셋의 특징을 비교해보겠습니다.

- 가장 중요한 것은 광고여부일텐데요,

App Inventor에는 광고를 달 수 없지만 다른 두 프로그램에서는 광고를 간단하게 추가할 수 있습니다.

다만, 앱인벤터에서는 광고를 직접 달 수는 없지만 코딩한 것을 파일로 저장하여 Kodular(=AppyBuiolder)에서 import하면 광고를 추가할 수 있습니다.

Kodular에서는 다음과 같이 다양한 광고를 추가할 수 있습니다. AdMob, Amazon, Facebook, AdColony, AppLovin, Unity, LeadBolt, AtartApp. Thunkable에서는 AdMob만 가능합니다. 광고 수수료가 있는데 AppyBuilder는  10~35%, Thunkable은 월회비를 지불해야합니다.

- Firebase를 사용하려면 App Inventor2나 Kodular에서 사용 가능하다.

- Thunkable에서는 안드로이드 뿐만 아니라 애플용 ios로도 동시에 제작 가능하지만 추가비용이 발생한다.

- google play game service 연결기능은 Kodular에서만 가능하다.

- 확장기능(import) : 인공지능(머신러닝) 확장 기능은 App Inventor와 Kodular에서 별도의 확장파일을 다운 받아 import기능으로 읽어들이면 사용할 수 있다.

- 아두노이드 지원 : App Inventor, Kodular에서 가능하다.

- 유투브 연결 : Kodular는 자체 콤포넌트가 있어서 쉽게 조작 활용이 가능, 다른 것은 액티비티스타터를 활용하면 연결은 가능하나 기능이 제한적이다.

- 구글 플레이스토어 출시를 위한 확장자 aab 지원 : Kodular에서 다운로드할 수 있다. 다만 이때 mp3 재생은 aab로 다운로드하면 player와 sound 기능이 안되는 오류가 발생하므로 엑소플레이어로 해야 오류가 발생하지 않는다.

결론, 개인적인 목적에 따라 선택하되 Kodular가 광고뿐만 아니라 여러가지 다양한 기능 등을 보았을 때 가장 무난할 듯 싶습니다.

Kodular의 안정성이 좀 떨어지는 것이 아쉽습니다.

최근 21년 봄부터 Kodular의 Companion이 안되고 있어 작업하기가 짜증이 납니다.

확장자 Personal Image Classifier도 Screen1에 추가해야 다른 화면에서도 webviewer가 나타난다.

아직 제가 모르는 뭔가 이런 자잘해 보이지만 중요할 수 있는 버그 같은 것들이 있어서 주의할 필요가 있습니다.

앱인벤터에서는 지원이 안되는 광고 달기와 구글용 aab 파일 빌드 같은 경우에는 아주 유용한 기능이긴 합니다.