P2SKLife

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

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

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

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

Firebase에 로그인 해서

1. Realtime Database을 클릭한다.

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

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

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

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

먼저 디자인에서 [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키 값을 메모장에 잘 기록해 두시기 바랍니다.