PART 1 앱 인벤터 프로젝트 10 퀴즈 만들기와 퀴즈 풀기. PART 1 앱 인벤터 프로젝트 10 퀴즈 만들기와 퀴즈 풀기.

Presentation on theme: "PART 1 앱 인벤터 프로젝트 10 퀴즈 만들기와 퀴즈 풀기. PART 1 앱 인벤터 프로젝트 10 퀴즈 만들기와 퀴즈 풀기."— Presentation transcript:

1

2 PART 1 앱 인벤터 프로젝트 10 퀴즈 만들기와 퀴즈 풀기

3 데이터를 공유하는 앱 사용자가 문제를 생산 예) 선생님이 <퀴즈 만들기> 앱으로 문제를 만들어두 면, 학생은 <퀴즈 풀기> 앱으로 문제를 풀어봄 예) 엄마가 <퀴즈 만들기> 앱으로 가족과 관련된 문제 를 만들어두면, 자녀는 <퀴즈 풀기> 앱으로 문제를 풀 어봄 이 장에서는 이처럼 서로 연동되는 두 개의 앱을 제작 데이터 공유를 위해 웹 데이터베이스에 데이터를 저장 하는 TinyWebDB 사용

4 무엇을 만드는가? <퀴즈 만들기> 앱의 기능 <퀴즈 풀기> 앱의 기능
사용자는 입력 양식에 문제와 정답을 입력 문제-정답 쌍을 화면에 표시 문제와 정답을 웹 데이터베이스에 저장 <퀴즈 풀기> 앱의 기능 8장의 <대통령 알아맞히기> 앱과 비슷 다른 점은 문제를 웹 데이터베이스에서 가져 온다는 사실

5 무엇을 배우는가? 정적 데이터와 동적 데이터 8장의 <대통령 알아맞히기>는 정적 데이터를 다룸
문제와 정답이 블록에 고정되어있음  이런 방식을 하드코딩이라 함 앱을 여러 번 사용해도 문제 집합이 같음 뉴스, 블로그, 페이스북, 트위터 앱은 시간에 따라 데이터가 변하는 동적 데이터 사용자가 데이터를 생산해냄 앱은 사용자에게 정보 입력, 수정, 공유 기능을 제공함 동적 데이터를 처리하려면 list를 사용해야 함 (예, 9장의 <실로폰> 앱)

6 무엇을 배우는가? <퀴즈 만들기>와 <퀴즈 풀기> 앱을 만들면서 배우는 것들
사용자가 데이터를 입력하는 입력 양식 for each 블록과 색인 변수를 사용하여 여러 리스트의 항목에 접근 데이터 영구 저장: <퀴즈 만들기>는 문제와 정답을 웹 데이터베이스에 저장하고, < 퀴즈 풀기>는 데이터베이스에서 문제와 정답을 가져옴 데이터 공유: TinyWebDB 컴포넌트를 이용하여 데이터를 웹 데이터베이스에 저장

7 컴포넌트 설계

8 컴포넌트 설계 TinyWebDB의 ServiceURL 속성 설정 http://appinvtinywebdb.appspot.com
MIT 앱 인벤터 팀이 제공하는 기본 웹 데이터베이스 서비스 전 세계 앱 인벤터 프로그래머가 같이 사용하기 때문에 다른 사람이 검색해 볼 수 있고 덧씌워 질 수도 있음 테스트 단계까지만 사용해야 함 앱을 공개할 시점에는 자신만의 웹 데이터베이스를 구축 특별한 프로그래밍 지식이 없어도 쉽게 구축 가능하고 무료임 “웹데이터베이스구축.pdf” 문서 참조 또는 22장 참조

9 문제와 정답을 저장할 빈 리스트 만들기 문제와 정답을 저장할 두 개의 리스트
미리 내용을 지정하지 않기 때문에 make a list 대신 create empty list 블록을 사용 나중에 사용자가 문제와 정답을 만들어 주면 그때 add items to list 블록을 이용하여 항 목 추가

10 사용자가 입력한 문제와 정답 추가하기 프로그램은 어떻게 작동하는가?
사용자가 텍스트 박스에 문제와 정답을 입력하고 [제출] 버튼은 누르면 SubmitButton.Click 이벤트 발생 먼저 add items to list 블록으로 텍스트 박스에 있는 내용을 list에 추가함 QuestionList와 AnswerList 내용을 join으로 결합하여 레이블에 표시해줌

11 텍스트 박스를 깔끔하게 비우기

12 문제와 정답 쌍을 한 줄씩 표시하기 for each in list 블록을 이용한 처리 과정

13 문제와 정답 쌍을 한 줄씩 표시하기 for each from to by 블록을 이용한 또 다른 코드

14 문제와 정답을 웹에 영구 저장하기 앱을 껐다 켜면, 4장과 7장에서 사용했던 TinyDB를 사용하면, TinyWebDB
만들어두었던 데이터가 모두 사라짐  리스트 변수는 단기 메모리 4장과 7장에서 사용했던 TinyDB를 사용하면, TinyDB는 데이터를 폰 메모리에 저장함 <퀴즈 만들기> 앱과 <퀴즈 풀기> 앱이 데이터를 공유하지 못함 TinyWebDB 데이터를 웹에 저장함 서로 다른 사용자 간에 데이터 공유가 가능 클라우드 방식

15 문제와 정답을 웹에 영구 저장하기 프로그램은 어떻게 작동하는가?
사용자가 문제와 정답을 일력하고 [제출] 버튼을 누를 때마다 저장 태그와 값 쌍으로 저장

16 문제와 정답을 웹에 영구 저장하기

17 데이터베이스에서 데이터 검색 프로그램은 어떻게 작동하는가?
TinyWebDB: GetValue로 데이터를 요청해 놓은 다음 GotValue로 받는 두 단계 방식 실제 리스트 데이터가 온 경우와 빈 데이터가 온 경우를 if-then-else로 구분하여 처리 두 리스트가 모두 도착한 다음에야 displayQAs를 호출하여 화면에 표시해줌

18 <퀴즈 만들기>의 전체 앱 프로그램

19 <퀴즈 만들기>의 전체 앱 프로그램

20 <퀴즈 풀기> 앱 사용자 인터페이스 화면 (8장의 <대통령 알아맞히기>와 비슷)

21 <퀴즈 풀기> 앱 빈 리스트 만들기 앱이 시작할 때, 데이터베이스에 데이터 요청하기

22 <퀴즈 풀기> 앱 GotValue 이벤트 처리기 코딩
데이터베이스에서 데이터를 받았을 때, 정답 (answers 태그)이면 보여주지 말아야 함 문제 (questions 태그)이면 첫 번째 문제를 화면에 표시해줌

23 <퀴즈 풀기> 앱 나머지 프로그램 다음 문제로 넘어가는 NextButton.Click
사용자 입력이 정답인지 확인해주는 AnswerButton.Click  8장의 <대통령 알아맞히기>와 똑같으므로 그때 코드를 복사해다 사용

24 <퀴즈 풀기> 전체 앱 프로그램

25 <퀴즈 풀기> 전체 앱 프로그램

26 확장해 보기

27