음성인식 기능을 이용한
검색 앱 만들기
앱인벤터에는 다양한 기능들이 제공되고 있습니다.
그 중 음성인식 기능을 이용하여 검색엔진에서 검색을 하는 실습을 해 보도록 하겠습니다.
앱인벤터 사이트(ai2.appinventor.mit.edu)로 이동하여, 먼저 새 프로젝트를 하나 생성 해 줍니다.
그럼 시작해 보겠습니다.
먼저 디자인 부분을 작업하도록 하겠습니다.
■ 디자인 영역
화면에 웹뷰어, 그리고 음성인식버튼을 추가 해 주도록 하겠습니다. 그리고 화면 디자인 구조를 위해 레이아웃에서 수평배치 컴포넌트를 사용하도록 하겠습니다.
1. [사용자 인터페이스] → [웹뷰어] 포함 2. [레이아웃] → [수평배치] 포함 3. [사용자 인터페이스] → [버튼] 수평배치 안으로 포함 |
그럼 각 컴포넌트들의 속성 및 이름을 설정 해 주도록 하겠습니다. 웹뷰어 초기 url로 네이버 주소를 입력하고, 보기좋도록 조금 수정 해 줍니다. 컴포넌트 이름은 알아보기 쉽도록 하며 됩니다.
1. [웹뷰어] 설정 - 홈 URL : 'http://naver.com' 2. [버튼] 설정 - 속성 : 텍스트 → '음성인식' - 컴포넌트 : 버튼이름 → '음성인식_버튼' 3. [수직배치] 설정 - 수평정렬 → 중앙 - 수직정렬 → 가운데 - 높이 → 자동 - 너비 → 부모에맞추기 |
미디어에서 음성인식 컴포넌트를 드래그 하여 포함시켜 줍니다.
1. [미디어] → [음성인식] 포함 |
여기까지 하였다면 다음과 같이 디자인 영역이 설정 됩니다.
■ 블록 영역
블록 부분은 순서를 이미지 부터 보고 그에따른 설명을 드리도록 하겠습니다.
[음성인식_버튼]을 클릭하면 음성인식 대기모드가 됩니다. 그 상태에서 말을 하면 음성인식이 되어 검색어 하게 됩니다. [음성인식_버튼]을 클릭하여 텍스트를 가져오는 부분 입니다.
1. [음성인식 버튼] → <언제 음성인식 클릭> 포함 2. [음성인식] → <언제 음성인식 클릭> 포함 |
이번에는 텍스트를 가져온 상태에서 실행되는 액션을 구성하도록 하겠습니다.
1. [음성인식] → <음성인식 텍스트를 가져온 후 > 포함 2. [웹뷰어] → <호출 웹뷰어.URL 로 이동> 음성인식 실행 부분에 연결 3. [텍스트] → <합치기> 를 웹뷰어 url 에 연결 4. [텍스트] 값 → "https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=" 5. <음성인식 텍스트를 가져온 후 > 결과 부분을 클릭하면 <가져오기 결과>블록이 나타납니다. 드래그하여 <합치기>에 연결합니다. |
이제 모든 코딩이 완료 되었습니다.
그럼 모바일 화면에서 확인 해 보도록 하겠습니다.
앱을 실행하면 다음과 같이 나타납니다. 그리고 음성인식 버튼을 클릭하면 인식대기 상태가 됩니다.
이때 말을 하면 인식하여 검색이 됩니다.
다음과 같이 검색이 잘 됩니다. 이렇게 하여, 앱인벤터 음성인식으로 네이버 검색하는 방법을 알아보았습니다.
도움 되셨다면 하트 한번 꾹~!! 눌러 주세요.
앱 인벤터 메뉴를 따로 생성 하였습니다. 앱 인벤터에 대하여 지속적으로 자세하고 쉽게 포스팅 해 보고자 하는 마음에서 입니다. 많이 방문하셔서 함께 앱인벤터에 대하여 알아가면 좋겠습니다.
'어린이 코딩 > 앱인벤터 응용' 카테고리의 다른 글
[인벤터] 게임 어플 만들기 - 고양이잡기 게임 기능 추가 (0) | 2017.09.19 |
---|---|
[인벤터] 고양이잡기 게임 어플 만드는 법 (0) | 2017.09.13 |
[인벤터]코딩을 배우자 - 고양이잡기 게임어플 만들기 1 (0) | 2017.09.12 |
[인벤터] inventor 를 이용한 어플(앱) 만들기 (5) | 2017.09.09 |