List를 사용해 저장 공간 만들기

우리가 기능적으로 구현해야 할 부분은 크게 두 부분으로 나눌 수 있습니다. 뭘까요?
EnterButton을 눌렀을 때후보자 이름을 저장하는 부분
그리고 ResultButton을 눌렀을 때 후보자 이름 중 한 명과 음식이미지를 무작위로 출력하는 부분입니다.

이름 저장 리스트 만들기

이름을 ‘NameTextBox’에 입력하고 ‘EnterButton’을 클릭하면 이름이 저장되는 동작이 필요합니다.
그런데 받은 이름을 컴퓨터 어디에 저장해야 할까요? 음..... 어렵죠?ㅜㅜ
정답은! 입력 받은 이름을 저장해 놓을 빈 공간을 스마트폰에 만들어 놓아야 한다는 것 입니다. 헐...
이렇게 저장에 쓰일 공간을 변수(variable)이라고 합니다.
그리고 저장 장소의 이름을 지정해야죠. 비슷한 종류의 정보를 한 곳에 모아 둘 수도 있는 List도 있습니다.
물론 List도 이름 지정이 가능하죠.
잘 이해가 가지 않으신 분은 동영상을 참고해 주세요.

이제 블록을 조립해 보겠습니다. 언제나 중요한 블록!! 정신 차리시고!! 스트레칭 한번 하고 가겠습니다!!
blocks구역의 변수(variables)를 클릭하면 변수에 관련된 블록들이 뜨는 것을 볼 수 있습니다.
그 중에 변수를 선언하는 블록(밑에 이미지 참조)을 화면으로 드래그 해줍니다. 변수의 이름을 NameList로 지정해 주세요.
이제 blocks구역의 Lists를 클릭해 [create empty list]를 드래그하여 변수 블록 옆에 연결시켜주세요.
이름을 저장할 빈 List가 만들어 졌습니다. 이 List 이름은 "NameList"이구요. 짝짝짝~ 잘했어요!!

입력버튼 누르면 NameList에 저장하기

이제 입력버튼(EnterButton)을 클릭하면 이름이 List에 저장되도록 만들어 보겠습니다.
일단 입력버튼을 클릭했을 때 작동을 시작하라고 명령하는 블록이 필요합니다.
EnterButton을 클릭하면 나오는 [when EnterButton.Click] 블록을 드래그 해놓습니다.

다음으로 입력버튼을 누르면 이름을 List에 넣기 위해 [add items to list]블록(Lists에 있는)을 드래그 하여
[when EnterButton.Click]블록 사이에 연결시켜주고, 이름이 저장이 될 NameList를 list 부분에 연결합니다.
마지막으로 ‘NameTextBox’에 담긴 이름을 NameTextBox.Text 블록으로 불러와 List에 추가합니다.

여기까지 이름을 List에 저장하는 기능을 만들어 보았습니다.
이제 이름과 음식을 임의로 골라 출력하는 기능을 구현해 봅시다.
오우~ 중요한 기능이죠!! 이걸로 우리의 한끼가 결정되는 거라구요!!

랜덤 뽑기 만들기

우선 출력될 음식 사진을 Media영역에 upload합시다.
Design 페이지로 넘어가 Media 영역에서 upload file을 클릭하여 다운받은 배포 파일 중
1.png부터 8.png까지 upload 합니다.
Media 창이 아래 이미지와 같이 파일들이 올라와 있다면 필요한 모든 파일이 upload된 것 입니다.

다시 Blocks 화면으로 넘어가 음식 사진 랜덤 리스트를 만들어 봅시다.
사진 넣다가 침 흘리시면 앙~되요! 막 먹고싶어 하다 말고 먹으러 가고 그럼 더더더 안됩니다!!
List블록을 클릭해 음식 리스트를 만들 수 있는 블록 [make a list]를 화면에 드래그 해줍니다. 그 다음 text 블록을 이용하여
이미지파일 이름 1~8.png를 입력해주세요.

앱인벤터에서는 List에 있는 itme 중 하나의 item을 임의로 뽑을 수 있는 [pick a random item]블록이 있습니다. 이 블록을 List와 연결하여 List 안의 item 중 한 item을 뽑을 수 있게 합니다. 올~

랜덤으로 뽑은 이름을 NameLabel에 문자형태(Text)로 출력해야 하므로 [set NameLabel.Text] 블록과 이름을 랜덤으로 출력하는 [pick a random item ]블록을 연결합니다.

랜덤으로 뽑은 음식 그림을 FoodImage에 그림형식(Picture)으로 출력해야 하므로 [set FoodImage.Picture] 블록을 음식을 랜덤으로 뽑는 [pick a random item]블록과 연결합니다.

마지막으로 ResultButton을 클릭하면 결과를 출력하기 위해 [when ResultButton.Click]블록을 Viewer창의 빈 곳에 둡니다.
그리고 이름과 음식 랜덤출력 블록들을 [when ResultButton.click]블록의 옆으로 연결시켜주세요.
이로써 ResultButton을 클릭하면 랜덤으로 이름과, 음식 사진을 출력하는 기능이 완성되었습니다.

지금까지 '뭐먹'앱의 핵심 기능을 만들어 보았습니다. 크~ 역시 잘하시네요!!!!!(폭풍칭찬!) 이제 추가 기능을 통해 좀 더 쓰기 좋은 앱을 만들어 봅시다.