P2SKLife

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 파일 빌드 같은 경우에는 아주 유용한 기능이긴 합니다.

앱을 실행하여 변수 등 자료를 사용하다가 앱이 종료되면 변수에 있던 내용은 사라지고 다음에 앱을 실행하면 다시 처음으로 세팅이 됩니다. 예를 들어서 게임을 하다가 내 최고점수를 기록했음에도 다음에 앱을 실행하면 최고점수가 다시 처음으로 세팅이 됩니다. 최고점수를 계속 앱에서 확인하고 활용하려면 앱이 아닌 곳에 따로 데이타를 정했다가 읽어오면 해결이 가능합니다. 이때 외부 저장소에 데이타를 입력하는 방법에는 기본적으로 DB가 있습니다. DB는 DataBase의 약자로 구성은 Tag와 Value로 이루어져 있습니다. 쉽게 말해서 이름표(Tag)와 실제값(Value)의 짝으로 데이타를 저장합니다. 그래서 이름표가 같으면 실제값을 계속 업데이트 하면서 처리가 가능합니다.

앱인벤터에서 이와 같은 처리를 위해 준비된 컴포너트가 있는데 TinyDB, TinyWebDB, Firebase에 대해서 간단히 알아보겠습니다.

TinyDB는 내 핸드폰에 데이타를 저장합니다. 그래서 다른 사람과 데이타를 공유하지 못합니다.

TinyWebDB는 앱인벤터에서 기본으로 제공하는 인터넷의 웹에 공유하는 방법입니다. 단점은 모든 사람이 공유하기 때문에 Tag가 동일할 경우에는 원치않는 데이타변경이 발생할 수 있다는 것입니다. 따라서 Tag를 다른 프로그램에서는 사용하지 않을 그러한 고유한 이름으로 정해야 할 것입니다. 웹주소만 알면 간단히 사용할 수 있습니다.

Firebase Database는 구글에서 제공하는 개인용 서버라고 보시면 됩니다. 물론 무료입니다. 사용량이 일정 조건을 넘어서면 유료화가 필요한 것은 염두에 두셔야 합니다. 당연히 Firebase를 사용하려면 가입과 설정이 과정이 필요합니다.

그리고 단순 데이타 저장용으로 Firebase Storage가 있습니다. Firebase에 가입하면 함께 추가로 사용할 수 있습니다. 그림, 오디오, 비디오 파일 등을 저장하고 읽어올 수 있습니다.

앱인벤터에서 csv파일 등 텍스트 파일을 읽어왔는데 한글이 깨지는 경우가 있습니다.

이때 간단하게 해결하는 팁을 알려드립니다.

윈도우의 메모장을 실행해서 그 파일을 메모장에서 읽으세요..

실행방법은 윈도우 화면 좌하다 검색창에 "메모장"이라고 입력 한 후

그림처럼 

1. 메뉴에서 '파일' 선택

2. '다른 이름으로 저장' 선택

3. 인코딩(E) 메뉴 중 'UTF-8' 선택

4. 파일이름을 입력하고 저장하시면 됩니다.

한글 깨졌다고 당황하지 마시고 이렇게 하시면 됩니다.|^.^|

초등학교 교과서에 수록된 클래식 음악 관련 앱을 만들어 보려고 합니다. 먼저 준비단계로 수록곡과 관련된 데이타를 수집하여 앱인벤터로 읽어오는 과정입니다. 데이타,디자인, 블록 화면을 공유합니다. 

먼저, 수록 관련 데이타를 엑셀로 작성합니다. 그런데, 앱인벤터에서는 엑셀을 직접 읽어오지 못합니다.

엑셀을 확자자를 csv( ,로 항목 구분)로 저장해야 읽을 수 있습니다.

파일을 읽어오는 방법은 3가지가 있습니다.

1. 핸드폰의 지정폴더에서 읽어오는 방법 : 파일명과 확장자만 필요

  예) example.csv는 /sdcard/Appinventor/example.csv를 읽어옵니다.

2. 핸드폰 기본 폴더(루트 디렉토리)에서 읽어오는 방법입니다.

  예) /example.csv는 /sdcard/example.csv를 읽어옵니다.

3. 개발자화면에서 파일을 업로드하여 읽어오는 방법이 있습니다. 이때 파일은 앱 안에 포함됩니다.

   [앱인벤터]에서는 [Media]에서 파일을 업로드합니다.

   [코둘라]에서는 [File Assets]에서 파일을 업로드합니다.

  예) //example.csv는 앱에 업로드하여 포함된 파일을 읽어옵니다.

3번이 제일 무난할 듯합니다. 

개인적인 생각이지만 가장 기본적인 3번을 파일명만으로 처리하게 하면 좋았을 것을 하는 생각입니다.

타이틀은 학년(grade),작곡가(composer),분류(genre),곡명(title) 등으로 일단 4개로 활용할 예정입니다. 앱인벤터의 디자인과 블럭을 올려드리니 엑셀파일을 읽어오는 기능이 필요하신 분은 잘 이용해보시기 바랍니다. 저도 이 기능을 구현하는데 며칠을 끙끙거려서 완성했습니다.