[앱인벤터 기초] 문장을 번역하고 읽어주는 번역기 만들기

앱인벤터를 이용해 번역기를 만들어보도록 하겠습니다.

왼쪽 화면에 번역하고 싶은 문장을 입력하고 번역하기를 클릭하면 오른쪽 화면에 번역된 내용이 보이게 됩니다.

먼저 완성된 앱을 동영상으로 확인해봅시다.

동작영상

[완성동영상]

화면구성

스마트폰 화면을 가로로 바꾸기 위해서 스크린의 속성 값을 변경합니다. 그리고 스크린에 들어갈 내용들(컴포넌트)이 가운데로 배치되도록 속성 값을 변경합니다.

스크린방향 : 가로

수평정렬 : 중앙

수평배치를 넣어 왼쪽과 오른쪽 화면을 가로로 정렬될 수 있도록 합니다.

수직배치를 두 번 화면으로 드래그합니다. 각각 절반의 크기를 차지하도록 속성값을 변경합니다.

수직배치의 가장 위쪽에 스피너를 넣습니다. 스피너는 한국어, 영어 등 언어를 선택하도록 합니다.

왼쪽화면에는 문장을 입력할 수 있도록 텍스트 박스를 넣습니다. 글씨 크기를 크게하기 위해 속성값을 변경합니다.

글씨크기 : 20

수직배치의 가장 아래에는 버튼이 3개 들어가게 합니다. 버튼은 수평으로 배치되야 하므로 수평배치를 먼저 넣습니다.

그리고 수평배치 안에 버튼을 3개 넣습니다.

버튼에는 아이콘 이미지를 넣습니다. 이미지를 넣기 위해선 미디어에서 파일을 업로드 해야합니다. 미디어를 클릭해서 아이콘 이미지를 업로드 합니다.

각 버튼에 맞는 그림을 선택해서 바꿉니다. 버튼의 속성 중에서 이미지를 바꾸면 됩니다.

가장 마지막에 있는 버튼은 초록색으로 변경합니다.

배경색 : 사용자지정 #21dc6d

버튼 사이에 여백(비어있는 공간)을 주기 위해서 수평 배치를 드래그 해서 넣습니다. 너비 값을 변경합니다.

너비 :

왼쪽 화면을 구성한 것 처럼 오른쪽 화면도 같은 방법으로 구성합니다.

번역 기능을 추가합니다. [팔레트]에서 [미디어]를 선택한 후 [Yandex번역]을 드래그해서 넣습니다.

번역 전, 번역 후 문장을 읽어주는 [음성변환]을 드래그해서 넣습니다.

코딩하기

디자이너 화면에서 블록 화면으로 들어갑니다.

가장 첫번째로 스피너에서 언어를 선택한 상황을 코딩합니다.

스피너에서 번역하고 싶은 언어를 선택하면 선택된 항목을 가져와서 '영어', '일본어', '중국어' 중 하나로 설정되어야 합니다.

언어를 설정했으면 번역을 시작합니다. 텍스트상자에 있는 글을 가져와서 번역 기능을 호출합니다.

번역이 끝나면 번역된 내용을 오른쪽 화면에 표시합니다. 레이블의 텍스트 값을 변경합니다.

발음듣기 버튼을 클릭했을 때 음성변환 기능을 호출합니다. 스피너에서 선택된 언어 값을 가져와서 음성변환할 언어를 바꾼 후에 말하기 블록을 실행합니다.

확인하기

앱인벤터로 만든 앱을 스마트폰에 설치하기 위해 [빌드] - [앱(APK용 QR코드 제공)] 을 클릭해서 QR 코드를 만듭니다.

설치할 스마트폰에서 네이버 앱을 열어 QR코드를 찍도록 합니다.

앱을 설치한 후 완성된 모습을 확인합니다. (완성~ :D )

내맘대로코딩