제4강-특정 사이트가 열리는 앱 만들기

* 앱 기획하기

 1. 버튼을 누르면 특정 사이트로 이동하게 만든다.

icon_web.png

* 컴포넌트 구성하기

 1. 새 프로젝트 생성하기

 2. Screen1 속성에 제목을 webview로 바꾸기

 3. 버튼을 만들어 특정 사이트로 이동하게 하기 위해 [버튼] 컴포넌트를을 추가한다.

 4. 버튼을 누르면 다음 사이트로 이동하기위해 버튼의 속성 값에서 [텍스트] 부분의 이름을 바꿔준다.

 5. 사이트가 보이는 장소를 만들기 위해 [웹뷰어] 컴포넌트를 가져온다.

* 프로그래밍 하기

 1. 버튼을 클릭했을 때 사이트로 이동하기 때문에 버튼에 [언제. 버튼. 클릭] 블록을 가져온다.

 2. [웹뷰어] 컴포넌트에서 [호출. 웹뷰어. URL로 이동] 블록을 가져온다.

 

 3. 이동할 사이트 주소를 입력하기 위해 [공통 블록]-[텍스트]를 클릭하여 텍스트를 가져온다.

 4. 열어야 할 사이트를 입력한다.

* 앱 아이콘 만들기 

 1. 아이콘 파인더 사이트에서 적절한 앱 아이콘을 찾습니다.

 2. [디자이너]로 이동하고 [Screen1]을 선택한 후 아이콘 이미지를 올린다.

* 앱 실행하기

 1. [빌드]-[앱(.apk 용 QR 코드 제공)] 클릭

*미션 수행 하기

 1. 네이버 사이트를 여는 버튼을 추가하기 위해 버튼을 가져오면 아래와 같이 된다.

 2. 다음 옆에 버튼을 가져오기 위해 [레이아웃]-[수평배치] 컴포넌트를 가져온다.

 3. 수평 배치 컴포넌트 속성 : 너비-부모에 맞추기, 배경색-없음

 4. 수평 배치 컴포넌트 안에 버튼들을 넣고, 텍스트에 '네이버'로 바꾸기

 5. [블록]으로 이동하여 [버튼2]를 클릭하고, 버튼1의 소스 복사하기

 6. 복사한 소스 수정하기

*디자인 하기

 1. 버튼 부분이 화면의 1/12만 차지하게 수정하기

* 1/20로 축소하면 글자가 절반만 보임. 글자 크기도 같이 줄여야 할 듯. 1/12이나 1/10정도가 적절해 보임. 

 

 

* 최종 파일

 1. aia  파일        webview.aia

 

 2. apk 파일        webview.apk

 

* 도전과제

 1. 새 창에서 사이트가 열리게

 

webview.apk

2.55MB

icon_web.png

0.01MB

webview.aia

0.01MB