Transcript PPT - 앱 인벤터 2

PART 1
앱 인벤터 프로젝트
10 퀴즈 만들기와 퀴즈 풀기
데이터를 공유하는 앱
 사용자가 문제를 생산
 예) 선생님이 <퀴즈 만들기> 앱으로 문제를 만들어두면,
학생은 <퀴즈 풀기> 앱으로 문제를 풀어봄
 예) 엄마가 <퀴즈 만들기> 앱으로 가족과 관련된 문제를
만들어두면, 자녀는 <퀴즈 풀기> 앱으로 문제를 풀어봄
 이 장에서는 이처럼 서로 연동되는 두 개의 앱을 제작
 데이터 공유를 위해 웹 데이터베이스에 데이터를 저장하는
TinyWebDB 사용
무엇을 만드는가?
 <퀴즈 만들기> 앱의 기능
 사용자는 입력 양식에 문제와 정답을 입력
 문제-정답 쌍을 화면에 표시
 문제와 정답을 웹 데이터베이스에 저장
 <퀴즈 풀기> 앱의 기능
 8장의 <대통령 알아맞히기> 앱과 비슷
 다른 점은 문제를 웹 데이터베이스에서 가져
온다는 사실
무엇을 배우는가?
 정적 데이터와 동적 데이터
 8장의 <대통령 알아맞히기>는 정적 데이터를 다룸
• 문제와 정답이 블록에 고정되어있음  이런 방식을 하드코딩이라 함
• 앱을 여러 번 사용해도 문제 집합이 같음
 뉴스, 블로그, 페이스북, 트위터 앱은 시간에 따라 데이터가 변하는 동적 데이터
• 사용자가 데이터를 생산해냄
• 앱은 사용자에게 정보 입력, 수정, 공유 기능을 제공함
• 동적 데이터를 처리하려면 list를 사용해야 함 (예, 9장의 <실로폰> 앱)
무엇을 배우는가?
 <퀴즈 만들기>와 <퀴즈 풀기> 앱을 만들면서 배우는 것들
 사용자가 데이터를 입력하는 입력 양식
 for each 블록과 색인 변수를 사용하여 여러 리스트의 항목에 접근
 데이터 영구 저장
• <퀴즈 만들기>는 문제와 정답을 웹 데이터베이스에 저장하고
• <퀴즈 풀기>는 데이터베이스에서 문제와 정답을 가져옴
 데이터 공유
• TinyWebDB 컴포넌트를 이용하여 데이터를 웹 데이터베이스에 저장
컴포넌트 설계
컴포넌트 설계
 TinyWebDB의 ServiceURL 속성 설정
 http://appinvtinywebdb.appspot.com
 MIT 앱 인벤터 팀이 제공하는 기본 웹 데이터베이스 서비스
• 전 세계 앱 인벤터 프로그래머가 같이 사용하기 때문에 다른 사람이 검색해 볼 수 있고
덧씌워질 수도 있음  테스트 단계까지만 사용해야 함
 앱을 공개할 시점에는 자신만의 웹 데이터베이스를 구축
• 특별한 프로그래밍 지식이 없어도 쉽게 구축 가능하고 무료임
• http://appinventor.chonbuk.ac.kr “웹데이터베이스구축.pdf” 문서 참조 또는 22장 참조
문제와 정답을 저장할 빈 리스트 만들기
 문제와 정답을 저장할 두 개의 리스트
 미리 내용을 지정하지 않기 때문에 make a list 대신 create empty list 블록을 사용
 나중에 사용자가 문제와 정답을 만들어 주면 그때 add items to list 블록을 이용하여
항목 추가
사용자가 입력한 문제와 정답 추가하기
 프로그램은 어떻게 작동하는가?
 사용자가 텍스트 박스에 문제와 정답을 입력하고 [제출] 버튼을 누르면
SubmitButton.Click 이벤트 발생
• 먼저 add items to list 블록으로 텍스트 박스에 있는 내용을 list에 추가함
• QuestionList와 AnswerList 내용을 join으로 결합하여 레이블에 표시해줌
텍스트 박스를 깔끔하게 비우기
문제와 정답 쌍을 한 줄씩 표시하기
 for each in list 블록을 이용한 처리 과정
문제와 정답 쌍을 한 줄씩 표시하기
 for each from to by 블록을 이용한 또 다른 코드
문제와 정답을 웹에 영구 저장하기
 앱을 껐다 켜면
 만들어두었던 데이터가 모두 사라짐  리스트 변수는 단기 메모리
 4장과 7장에서 사용했던 TinyDB를 사용하면
 TinyDB는 데이터를 폰 메모리에 저장함
 <퀴즈 만들기> 앱과 <퀴즈 풀기> 앱이 데이터를 공유하지 못함
 TinyWebDB
 데이터를 웹에 저장함
 서로 다른 사용자 간에 데이터 공유가 가능
 클라우드 방식
문제와 정답을 웹에 영구 저장하기
 프로그램은 어떻게 작동하는가?
 사용자가 문제와 정답을 입력하고 [제출] 버튼을 누를 때마다 웹데이터베이스에 저장
 태그와 값 쌍으로 저장
문제와 정답을 웹에 영구 저장하기
데이터베이스에서 데이터 검색
 프로그램은 어떻게 작동하는가?
 TinyWebDB: GetValue로 데이터를 요청해 놓은 다음 GotValue로 받는 두 단계 방식
 실제 리스트 데이터가 온 경우와 빈 데이터가 온 경우를 if-then으로 처리
 데이터를 받았다면 도착한 데이터가 문제인지 정답인지를 if-then-else로 처리
 두 리스트가 모두 도착한 다음에야 displayQAs를 호출하여 화면에 표시해줌
<퀴즈 만들기>의 전체 앱 프로그램
<퀴즈 만들기>의 전체 앱 프로그램
<퀴즈 풀기> 앱
 사용자 인터페이스 화면 (8장의 <대통령 알아맞히기>와 비슷)
<퀴즈 풀기> 앱
 빈 리스트 만들기
 앱이 시작할 때, 데이터베이스에 데이터 요청하기
<퀴즈 풀기> 앱
 GotValue 이벤트 처리기 코딩
 데이터베이스에서 데이터를 받았을 때
• 문제 (questions 태그)이면 첫 번째 문제를 화면에 표시해줌
• 정답 (answers 태그)이면 두 버튼의 Enabled 속성을 true로 설정하여 사용자가 정답을 입력할 수
있게 함
<퀴즈 풀기> 앱
 나머지 프로그램
 다음 문제로 넘어가는 NextButton.Click
 사용자 입력이 정답인지 확인해주는 AnswerButton.Click
 8장의 <대통령 알아맞히기>와 똑같으므로 코드를 복사해다 사용
<퀴즈 풀기> 전체 앱 프로그램
<퀴즈 풀기> 전체 앱 프로그램
확장해 보기
감사합니다.