PART 1 앱 인벤터 프로젝트 06 파리 관광. PART 1 앱 인벤터 프로젝트 06 파리 관광.

Presentation on theme: "PART 1 앱 인벤터 프로젝트 06 파리 관광. PART 1 앱 인벤터 프로젝트 06 파리 관광."— Presentation transcript:

1

2 PART 1 앱 인벤터 프로젝트 06 파리 관광

3 관광용 앱 매우 복잡해 보이지만, 두 가지 컴포넌트를 사용하면 쉬움 ActivityStarter 컴포넌트
WebViewer 컴포넌트

4 무엇을 배우는가? <파리 관광> 앱을 만들며 배우는 것들
앱 안에서 다른 앱을 구동할 때 사용하는 ActivityStarter 컴포넌트 앱 안에서 웹 페이지를 보여주는데 사용하는 WebViewer 컴포넌트 여러 개의 데이터를 저장할 때 사용하는 list 변수 list 변수에서 원하는 요소를 선택할 때 사용하는 ListPicker 컴포넌트 원하는 지도를 보여주는데 필요한 URL을 동적으로 생성하기

5 컴포넌트 설계

6 ActivityStarter 컴포넌트 속성 설정
다른 안드로이드 앱을 실행시켜주는 컴포넌트 여기서는 구글 지도 앱을 구동시켜봄  표 6-2와 같이 속성을 설정해두어야 함

7 컴포넌트 동작 프로그래밍 처리 절차 앱이 시작되면, 관광지를 ListPicker 컴포넌트에 끼워넣음

8 관광지 목록 작성하기 리스트 변수를 만들어줌

9 관광지 선택 처리하기

10 URL 이용하여 지도 열기 URL이란? <파리 관광> 앱에서는 URL이 사용자 선택에 따라 동적으로 변함
URL(Uniform Resource Locator)는 네트워크 상에서 자원이 어디 있는지를 알려주기 위 한 규약 예)  ?는 매개변수가 뒤따라옴을 뜻하고, q는 매개변 수 이름이고 Paris는 매개변수의 값 <파리 관광> 앱에서는 URL이 사용자 선택에 따라 동적으로 변함

11 URL 이용하여 지도 열기 프로그램은 어떻게 동작하는가?
사용자가 ListPicker에서 선택하면 AfterPicking 이벤트가 발생하고, 선택된 항목은 ListPicker.Selection에 저장됨 join 블록으로 URL 조립하고, DataUri 속성에 설정함

12 URL 이용하여 지도 열기

13 전체 앱 프로그램

14 웹 뷰어를 이용한 가상 관광 WebViewer 컴포넌트 WebViewer를 이용한 두 번째 <파리 관광> 앱
앱 안에서 웹 브라우저 화면을 보여주고 웹 페이지를 옮겨 다닐 수 있게 해줌 ActivityStarter와 달리, 사용자는 현재 사용 중인 앱을 떠나지 않음  최소 버튼으로 돌 아올 필요 없음 WebViewer를 이용한 두 번째 <파리 관광> 앱 URL을 조립하는 대신, 미리 수집해 둠

15 특정 지도의 DataUri 찾기

16 URL 리스트 만들기

17 ListPicker.AfterPicking 수정하기
프로그램은 어떻게 작동하는가? 사용자가 선택한 요소의 내용은 ListPicker1.Selection, 요소의 번호, 즉 색인은 ListPicker1.SelectionIndex에 저장됨 select list item 블록을 이용하여 URLs라는 리스트의 SelectionIndex 번째 요소의 내용을 꺼내옴

18 전체 앱 프로그램

19 확장해 보기

20