앱인벤터 헬로우 코디(Hello Codi)

앱인벤터 헬로우 코디 블록(Hello Codi)

 

앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.

 

블록코딩이 처음이면 튜터리얼을 하나씩 따라하면서 코딩하기를 추천한다.

 

자, 이제 시작해보자...

이제 컴퓨터와 장치를 설정하고 디자이너와 블록 편집기의 작동 방식을 배웠으므로 HelloCodi 앱을 만들 준비가 되었다. 이때 브라우저에서 Designer 또는 Blocks Editor를 열고 빌드하는 동안 테스트를 위해 Android 장치 또는 에뮬레이터를 연결해야 한다. 프로젝트 메뉴에서 새 프로젝트 시작을 선택하고 이름을 HelloCodi로 지정한다.

 

앱인벤터 환경설정 등은 아래 글을 참고바란다. 개발환경과 애뮬레이터 설치 등은 아래 글을 참고바란다.

 

0. 앱인벤터 개발환경, hello World

0. 앱인벤터 개발환경, hello World

 

1-1 앱인벤터 개발환경-애뮬레이터 설치

1-1 앱인벤터 개발환경-애뮬레이터 설치

 

. 헬로우코디-벌을 터치하면 벌소리가 나요

헬로코디는 매우 짧은 시간 안에 만들 수 있는 간단한 앱이다. 벌의 사진이 있는 단추를 만든 다음 단추를 클릭하면 스마트폰 기기에서 윙윙거리는 소리가 나는 프로그램이다. 여기서 코디는 벌 그림 이미지에 이름을 붙였다.

헬로코디 프로그램을 작성할 경우에, 이미지와 소리 파일이 필요하다. 아래 이미지 파일과 소리 파일을 다운로드하여 앱인벤터 프로젝트의 미디어에 올린다.

codi.jpg

0.06MB

Bee-Sound.mp3

0.03MB

 

컴포넌트

앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 버튼과 레이블 컴포넌트를 활용하여 화면을 구성하고 앱을 만들려고 한다.

 

버튼 컴포넌트 : 터치 이벤트를 제공하는 컴포넌트로 이미지에는 위에서 다운로드 받은 codi.jpg를 설정할 것이다.

레이블 컴포넌트 : "벌을 터치해주세요" 라는 문구를 버튼 아래에 배치해서 사용자게에 보여줄 것이다.

 

버튼 컴포넌트 설정값 설정하기

버튼 컴포넌트에 알고 싶으면 아래 글을 참고하세요

앱인벤터-버튼 컴포넌트

앱인벤터-버튼 컴포넌트

 

. 사용자 인터페이스에서 버튼 컴포넌트를 뷰어에 드래그&드롭한다.

. 속성값을 설정한다.

  - 이미지 파일 codi.jpg 파일을 프로젝트로 업로드한다. 

  - 버튼 속성에 이미지에 'codi.jpg'를 설정한다.

  - 텍스트에 '버튼1의 텍스트' 기본 문구를 삭제한다.

앱인벤터 헬로우코디 버튼컴폰넌트 편집 화면

 

레이블 컴포넌트 설정값 설정하기

. 사용자 인터페이스에서 레이블 컴포넌트를 뷰어에 드래그&드롭한다.

. 속성값을 설정한다.

  - 글자크기 : 30 을 입력한다.

  - 배경색 : 청록색을 선택한다.

  - 글자색 : 파랑색을 선택한다.

  - 텍스트 : "벌틀 터치해보세요!!!"를 입력한다.

 

앱인벤터 헬로우코디 레이블컴포넌트 편집 화면

* 확인해보세요

 스크린 컴포넌트 설정값 확인하기

보통 스크린의 정렬값은 왼쪽, 위쪽 정렬이 기본값이다. 그래서 위에 삽입한 버튼과 레이블 컴포넌트가 왼쪽, 위로 배치가 되는데, 여기서는 스크린의 정렬값을 수평정렬(가운데), 수직정렬(가운데)를 설정한다.

 

스크린 설정값

. 수평정렬 : 가운데

. 수직정렬 : 가운데

앱인벤터 헬로우코디 스크린  설정값

 

소리 컴포넌트 설정값 설정하기

. 팔레트의 '미디어'에서 '소리' 컴포넌트를 드래그&드롭한다.

. 소리 컴포넌트는 화면에 보이지않는 컴포넌트이다.

 

. 소리컴포넌트 속성값 설정하기

  - 소스 : bee-sound.mp3 파일 설정

 

설계 아이디어

 

버튼을 클릭하면 벌 소리가 나오게 하는 프로그램이다. 사실 프로그램은 어렵지 않다.

블록 코딩에서 버튼 컴포넌트에서 '터치했을 때' 블록을 드래그&드롭을 하고 실행 영역에 'bee-sound.mp3' 소리를 플레이하는 블록을 넣으면 끝난다.

- 버튼을 터친한다.

. 음악 bee-sound.mp3 플레이한다.

 

코딩블럭

블록 코딩은 정말 간단한다.

우리가 무엇을 할 것인지 생각해보라

- 버튼을 터치한다.

- 음악 bee-sound.mp3 플레이한다.

 

말하는 그대로 코딩을 하면 된다.

 

. 버튼을 클릭했을 때

왼쪽 스크린1에서 버튼 컴포넌트를 클릭하면 블럭들이 나오는데, 그중에서 '클릭했을때' 블록을 드래그&드롭한다.

 

앱인벤터 헬로우코디 버튼을 클릭했을때 블록

 

 

앱인벤터 버튼을 클릭했을때 블록

 

. 재생하기 호출

스크린1에서 소리를 클릭하면 소리컴포넌트에서 제공하는 블록들이 나온다. 그 중에서 재생하기 블록을 드래그&드롭한다. 그리고 재생하기 브록을 버튼일 클릭했을때 실행영역에 맞추어서 넣는다.

 

앱인벤터 헬로우코디 소리컴포넌트 블록들

 

앱인벤터 헬로우코디 블록코딩

 

블록코딩은 완성이다. 상기의 2개의 블록으로 버튼 컴포넌트를 클릭했을때 음악이 재생할 수 있도록 코딩을 완성하였다.

 

실행결과 화면

 

앱인벤터의 헬로우코디 앱을 작성하였다. 실행 결과 화면은 아래와 같다. 

 

앱인벤터 헬로우코디 실행화면

 

 

앱인벤터 헬로우코디 실행 동영상

 

지금까지 헬로우코디 앱을 작성하였다. 버튼과 레이블 그리고 소리 컴포넌트를 활용하여 간단한 블록 코딩까지 해보았다. 블록코딩을 처음한 경험을 살려 다음 튜터리얼도 계속 실습하기를 추천한다.

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.