내맘대로 검색하기-웹뷰어 예제
. 무엇을 만들 것인가?
. 모바일에서 검색할 때, 네이버 검색해서 원하는 결과가 안나오면 다음, 다음에서 원하는 결과가 안나오면 구글 사이트를 돌아가면서 검색하는데, 사이트를 이동할 때마다 검색어를 새로 입력해야 하는 불편함이 있다. 이에 웹뷰어를 통해 간단하게 네이버, 구글, 다음 사이트를 활용하여 검색하는 간단하면서도 매우 유용한 앱을 만들어보자.
. 화면설계
컴포넌트로는 버튼 3개, 텍스트박스 1개 그리고 웹뷰어 컴포넌트를 추가하여 화면에 배치하였다.
텍스트박스 컴포넌트는 검색어를 입력하는 사용자 인터페이스이다.
그리고 3개의 버튼은 각각 네이버, 구글, 다음 사이트를 대변하는 버튼이다.
사용자는 검색어를 입력하고 ‘네이버’ 버튼을 클릭하면 검색어를 네이버에서 검색하도록 블럭 코딩을 하면 된다.
코딩하기
[step1]. 간단한 웹뷰어 앱 만들기 [몸풀기]
. 네이버, 구글, 다음 버튼을 클릭 하면, 네이버/구글/다음 사이트로 이동한다.
. 웹뷰어 컴포넌트에서 활용하는 블럭은 ‘URL이동하기’ 호출 블럭이다. 매개변수 url에 네이버, 구글, 다음 홈페이지 주소를 지정해주면 된다.
| 네이버 | https://www.naver.com |
| 구글 | https://www.google.com |
| 다음 | https://www.daum.net |
url에 상기 스트링을 지정해주면 된다.
구글로 이동해보자.
다음으로 이동해보자.
[심화 학습]
텍스트박스에 검색어를 입력하고 네이버, 구글, 다음에서 검색하는 앱을 만들어보자!!!
. 화면 디자인
. 텍스트박스 컴포넌트를 추가해보자.(가능하면 맨 위에 삽입하자)
코딩하기
. 텍스트박스에 글자를 넣고, 네이버/구글/다음 버튼을 클릭했을 때, 텍스트박스의 텍스트를 검색하는 코딩을 해보자.
네이버/구글/다음 각 사이트의 검색 URL을 찾아보자.
[step2]
네이버로 검색할 때는 ‘URL로이동하기’ 호출 블럭을 사용할 것이다. 매개변수 url에는 텍스트 블럭의 ‘합치기’블럭을 활용하여 url 주소를 생성할 것이다.
상기 표에서 각 사이트의 검색 url을 확인하였고, url에 텍스트박스에서 입력한 텍스트를 합쳐서 url 매개변수를 완성한다.
자 url이 완성되었으니까, ‘URL로이동하기’ 호출 블럭을 통해 블럭을 완성해보자.
구글 사이트 검색 블럭은 아래 그림과 같다.
다음 검색 사이트의 블럭 코딩은 아래 그림과 같다.
실행해보면 엄청 편하다. 한번 검색어를 입력하여 3개의 사이트에서 내가 원하는 검색을 쉽고 빠르게 할 수 있다.
아래 aia 소스파일은 내맘대로검색하기 앱인벤터 소스파일이다. 참고하셔서 더나은 검색 앱을 만들어보는 것도 좋은 훈련입니다.
[추가실험사항]
. 탭을 만들 수 있으면 탭을 만들어서 네이버/구글/다음 탭을 만들어 보자. (지원을 하는지는 아직 잘 모르겠다.)
. 검색 사이트를 수정해서 내가 원하는 검색사이트를 설정할 수 있도록 변경해보자.
. 신문검색 전용 사이트로 해서 내가 좋아하는 신문사를 등록하고 검색어를 입력하면 각각 신문사이트에서 원하는 기사 내용을 보여주는 앱이다.
. 별도로 지명을 검색하여 지도 검색을 하는 앱이다.(이 앱은 별도의 앱으로 많이 존재한다.)
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 코딩따라하기' 카테고리의 다른 글
| 앱인벤터-목록선택버튼 컴포넌트 활용 예제2 (1) | 2022.09.16 |
|---|---|
| 앱인벤터-목록선택버튼을 활용하는 예제 (0) | 2022.09.15 |
| 앱인벤터-이미지 컴포넌트를 활용하는 예제 (0) | 2021.10.11 |
| 앱인벤터 날짜선택버튼 컴포넌트 예제-우리가 만난지 며칠 (0) | 2021.10.11 |
| 앱인벤터 버튼 컴포넌트 예제 (0) | 2021.10.04 |
댓글