앱인벤터 사운드라이브러리 앱
앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.
이 앱은 오디어를 캡처, 저장 및 재생하는 앱을 만들고자 한다.
이 프로젝트에서는 일상에서 소리를 캡처하여 모바일 장치의 사운드 라이브러리에 저장할 수 있는 자체 앱을 만든다. 긴 하루의 끝에 자신을 진정시키기 위해 ASMR처럼 진정시키는 소리를 캡처하거나 시원한 자연 리듬을 캡처하여 자신만의 펑키한 음악을 생성하기 위해, 우리는 당신이 기술과 소닉 아트를 결합하는 도전을 요청한다.
앱을 닫을 때도 사운드 라이브러리의 사운드를 보존해야 하므로 MIT App Inventor의 TinyDB 구성 요소를 사용하여 모바일 장치의 장기 데이터 저장 기능에 액세스하는 방법을 배우게 될 것이다.
앱을 닫을 때도 사운드 라이브러리의 사운드를 보존해야 하므로 MIT App Inventor의 TinyDB 구성 요소를 사용하여 모바일 장치의 장기 데이터 저장 기능에 액세스하는 방법을 배우게 됩니다.
자, 이제 시작해보자...
앱인벤터 사운드라이브러리 앱 디자인
사운드라이브러리 앱은 일상의 소리를 캡처하고 저장 플레이 및 삭제 등의 기능을 제공하는 앱이다.
사운드라이브러리 앱의 화면 디자인은 소리를 녹음하고 중지하는 기능, 녹음된 소리를 플레이, 정지 및 소리 삭제 등의 기능 등으로 나뉘어 디자인하였다.
그리고 녹음된 소리 제목을 리스트로 사용자에게 보여준다.
사운드라이브러리 앱 기본 설계
사용자는 소리를 녹음하기 위해 제목을 넣고 소리를 녹음한다. 적절한 시간에 녹음을 중지한다. 그러면 자동으로 TinyDB에 저장이 되고 소리 제목 리스트에 등록이 된다.
또한 소리 제목 리스트에서 선택한 항목을 플레이하고 중지 혹은 삭제할 수 있다.
이를 위해 리스트뷰 컴포넌트로 소리 제목들을 관리하며, 앱이 종료된 후에도 저장하기 위해 TinyDB에 소리 제목과 녹음된 소리를 저장할 것이다. 그리고 플레이를 위해 플레이어 컴포넌트를 사용하며 이벤트를 위해 버튼 컴포넌트들을 사용할 것이다.
사운드라이브러리 앱 컴포넌트
앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 버튼과 레이블 컴포넌트를 활용하여 화면을 구성하고 앱을 만들려고 한다.
컴포넌트 리스트
소리 컴포넌트 : 소리 제목을 입력하기 위해 텍스트박스 컴포넌트를 사용한다.
버튼 컴포넌트 2개 : 'Record Sound', 'Stop Recording' 버튼으로 소리를 녹음 및 중지하는 이벤트를 사용한다.
체크박스 컴포넌트 : loop 활성화 여부를 체크한다.
버튼 컴포넌트 3개 : 'Play Sound,', 'Stop Sound', 'Erase Sound' 버튼으로 해당 이벤트를 발생한다.
리스트뷰 컴포넌트 : 소리 제목을 리스트로 저장 및 삭제하며 사용자에게 보여준다.
아래 그림은 앱이벤터로 작성한 사운드라이브러리 앱의 디자인과 사용된 컴포넌트이다.
텍스트박스 컴포넌트 설정값 설정하기
소리 제목을 입력할 수 있는 기능을 제공한다.
힌트 : 'Enter Title for Sound
버튼 컴포넌트 설정값 설정하기
RecordSoundButton/StopRecordingButton 텍스트를 표시하며, 소리 녹화 및 중지 이벤트를 생성한다.
백그라운드 색상 : 사이안
텍스트 : Record Sound, Stop Recording
수평백치 컴포넌트 설정값 설정하기
none.
체크박스 컴포넌트 설정값 설정하기
Loop 활성화 여부를 체크하는 기능을 제공한다.
너비 : 22%
버튼 컴포넌트 설정값 설정하기
PlaySound/StopSound/EraseSound 텍스트를 표시하며, 소리를 재생/중지/삭제 이벤트를 생성한다.
백그라운드 색상 : 초록색
텍스트 : Play Sound, Stop Sound, Erase Sound
리스트뷰 컴포넌트 설정값 설정하기
none
녹음기 컴포넌트 설정값 설정하기
none
플레이어 컴포넌트 설정값 설정하기
none
TinyDB 컴포넌트 설정값 설정하기
none
코딩블럭
블록 코딩은 내가 하고자 하는 내용을 문장으로 만들어 보라. 그것을 그대로 코딩하면 된다.
우리가 무엇을 할 것인지 생각해보라. 간단하다.
텍스트박스에서 소리 제목을 입력하고 'Record Sound' 버튼을 클릭하면 소리가 녹음이 되고, 'Stop Sound' 버튼을 클릭하면 소리 녹음이 중지된다.
아래 리스트 뷰에 소리제목들 중에 하나를 선택하고 'Play Sound'버튼을 클릭하면 선택한 소리가 재생이 된다.
재생되는 소리를 중단하기를 원하면 'Stop Sound' 버튼을 터치하면 된다.
만일 리스트뷰에서 선택한 소리를 삭제하고 싶으면 'Erase Sound' 버튼을 터치하여 리스트뷰에서 소리를 삭제한다.
. 전역변수
currentSoundTitle : 리스트뷰에서 선택한 현재 선택한 소리 제목을 저장한다.
currentSound : 리스브 뷰에서 선택한 현재 소리값을 저장한다.
SoundTitleList : 소리제목들을 관리하는 리스트이다.
'Screen1' 이 초기화되었을때
'Screen1'dl 초기화되었을 때 실행되는 코드이다.
| TinyDB(soundTitle) 값을 가져와서 soundTitleList에 저장한다. SoundListView.요소 <- soundTitleList 지정한다. |
'RecordSoundButton' 을 클릭했을때
'Record Sound' 버튼을 클릭하면 녹음기 컴포넌트의 'SoundRecorder'. 녹음시작하기를 호출한다.
'StopSoundButton' 을 클릭했을때
| StopSound버튼을 클릭했을때 녹음기 컴포넌트에서 '정지'를 호출한다. if soundTitleTextBox.텍스트가 비어있지 않다면 soundTitleList에 SoundTitleTextBox.텍스트추가 TinyDB(soundTitle, soundTitleList) 값 저장하기 TinyDB(soundTitleTexxtBox.텍스트, soundTitleList) 값 저장하기 |
'SoundRecord' 녹음 후에
녹음기.정지가 호출이 되면 녹음이 완료되면 '녹음후에' 이벤트가 호출이 된다.
| SoundRecord 녹음 후에 녹음기 컴포넌트에서 '정지'를 호출한다. if soundTitleTextBox.텍스트가 비어있지 않다면 soundTitleList에 SoundTitleTextBox.텍스트추가 TinyDB(soundTitle, soundTitleList) 값 저장하기 TinyDB(soundTitleTexxtBox.텍스트, soundTitleList) 값 저장하기 SoundListView.요소 <- soundTitleList SoundTitleTextBox.텍스트 <- '' |
'SoundListView' 선택후에
소리제목 리스트뷰에서 하나의 소리제목을 선택한 후에 해야 할 일이다.
| currentSoundTitle <-SoundListView.선택된항목 currentSound <- TineDB.값가져오기(currentSoundTitle) |
'PlaySoundButton' 클릭했을때
PlaySound 버튼을 터치했을 때, 소리가 재생되기 시작하도록 한다.
. 사전에 할 일은 소리제목 리스트뷰에서 소리제목을 선택해야 한다.
| Player.반복.LoopCheckBox.체크여부 Player.소스 <- currentSound Player.시작하기 |
'StopSoundButton' 클릭했을때
StopSound 버튼을 터치했을 때, 소리 재생을 중지한다.
지금까지 사운드라이브러리 앱을 작성하였다. 사운드 제목과 녹음 그리고 제목 목록 관리 및 재생 등을 하는 앱이다. 어려울 것 같지만, 소리 컴포넌트와 목록뷰 컴포넌트에 대한 이해를 바탕으로 앱을 작성하면 그렇게 어렵지 않게 작성할 수 있다.
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
댓글