오늘 만들 앱은 같은 검색어로 네이버, 구글, 다음, 네이트에서 자유롭게 검색할 수 있는 앱입니다.
사실 이 앱은 맛집 검색하다 여기저기 검색하기 불편해서 만들게 되었습니다.
앱을 만들 수 있다면 불편한 점을 내 스스로 고칠 수 있는 장점이 있군요!ㅋㅋ
물론 어렵지 않습니다. 걱정은 하지 마세요. 하지만 언제나 긴장은 하면 좋다는 점! 이제 시작해 봅시다!
아래 사항을 꼭 준비하세요.
검색어를 텍스트 박스에 입력하고 네개의 검색 사이트 버튼을 사용해 검색사이트를 바꿔가며 검색 결과를 볼 수 있는 어플! 원터치 포강냉이! 크~ 검색의 최강자가 되겠으!! 만들어 봅시다~
이 튜토리얼을 마치면 여러분이 자유자재로 사용할 수 있는 기능은 다음과 같습니다.
앱인벤터를 들어가 (ai2.appinventor.mit.edu) 구글 아이디로 로그인을 합니다. (보고 계시는 페이지 오른쪽 상단의 "앱 인벤터 바로가기" 버튼을 통해서도 접속이 가능합니다.)
알림 창의 왼쪽 아래 [Continue] 버튼을 클릭하고 다음 화면 왼쪽 상단 [Project] 메뉴의 [Start new project…] 항목을 클릭합니다.
새로운 알림 창(Create new App Inventor project)이 뜨면, 프로젝트 이름으로 “WebViewer”를 빈칸에 입력하고 [OK] 버튼을 클릭하여 WebViewer 프로젝트를 생성합니다. (프로젝트 이름은 앱의 이름이 되며, 영어로 입력해야 합니다.)
여러분의 WebViewer 프로젝트 생성을 완료하였습니다.
2강의 Connect를 참고하여 앱인벤터와 스마트폰을 연결하여 생성한 프로젝트 상태를 확인해 봅시다. Connect를 통해 앱 만들기 진행상황을 거의 실시간으로 확인 할 수 있습니다. (아래 사진은 AI2 Companion으로 연결하여 나타난 현재까지의 진행 상황입니다.)
앱에서 버튼을 눌러 드림코드의 웹페이지를 띄우는 방법을 알아 봅시다.어떻게 하냐고요? 너무 걱정하지 않아도 돼요! 친절히 설명하도록 노력하겠습니다!
아래 그림과 같이 ①[Palette]의 [WebViewer]와 [Button]을 Viewer영역에 각각 끌어다 놓습니다.
②Components 구역에 [WebViewer1]과 [Button1]이 생성된 것을 확인할 수 있습니다.
이제 배치한 이 요소들의 작동을 설계하기 위해 화면 오른쪽 윗부분 [Blocks] 버튼을 클릭하여 동작을 설계해 봅시다.
Button1을 클릭했을 때 동작을 설계해 봅시다.
①Blocks구역에서 [Button1]을 클릭하여 ②[When Button1.Click] 블록을 드래그 하여 Viewer영역에 갖다 놓습니다.
Button1을 클릭했을 때 WebViewer1에 웹페이지를 띄우는 동작을 구현하기 위해 ① Blocks구역에 [WebViewer1]을 클릭하여 ② [call Webviewer. GoToUrl]을 드래그해 Viewer의 빈 공간에 배치하고, WebViewer에 띄울 주소를 입력해주기 위해 Blocks구역의 ③ [Text]를 클릭하여 [” ”]빈칸 블록을 드래그하여 아래 그림과 같이 배치합니다. ④ 방금 배치한 빈칸 블록에 드림코드 홈페이지 http://www.dreamcode.co.kr를 입력합니다.
이제 2강에서 배웠던 방법을 사용하여 지금까지 만든 결과를 확인해 봅시다. 상단의 [Connect]를 클릭하여 결과를 확인해 봅시다. 스마트 폰에서 [Text for Button1]이라고 쓰인 버튼을 클릭하면 드림코드 웹페이지가 나오는 것을 확인할 수 있습니다. 신기하죠?!(보시고 계신 화면이 아래 사진과 다르다고 걱정하지 마세요. 드림코드 홈페이지는 계속 업그레이드 중이니깐요.ㅋ)
이제 스마트폰 앱에서 웹페이지를 띄우는 방법을 배우셨습니다. 사용했던 모든 [Blocks]들은 삭제하세요. 아깝지만...지금까지는 이해를 위한 거였으니깐요. 더 좋은 앱을 만들기 위해! 아까워 하지 맙시다!!