[Thunkable] 썬커블로 코딩없이 만드는 이미지 인식 앱 - 03. 완성!

코딩없이 만드는 이미지 인식 앱! 이제 완성을 앞두고 있습니다.
오늘은 썬커블 블록을 배치하여 앱을 완성하고 테스트까지 해보도록 할게요~!

[Thunkable] 썬커블로 코딩없이 만드는 이미지 인식 앱 - 02. 에셋(Assets) 패널 사용하기

[Thunkable] 썬커블로 코딩없이 만드는 이미지 인식 앱 - 02. 에셋(Assets) 패널 사용하기

바로 시작해 볼까요?
상단의 Block탭을 클릭하여 Block 에디터로 이동하겠습니다.

블록 코딩

이미지 인식 앱 만들기 첫번째 포스팅에서 앱을 어떻게 만들 것인지 구상했던것 기억하시나요?

👉 화면에 촬영 버튼과 텍스트를 배치하고,
👉 촬영버튼을 누르면 카메라가 호출되어 사진을 찍은 후
👉 다시 화면으로 돌아와 촬영한 결과 이미지와 함께 이 이미지를 인식한 결과를 텍스트에 표시한다.

이렇게 우리가 만들 앱을 정리해 봤었죠. 이 정리를 바탕으로 블록코딩을 시작해 볼게요.

이벤트 설정하기

촬영버튼을 누르는^[각주:1] 이벤트가 발생할때 기능이 시작되게 하기 위해 UI 컴포넌트에서 촬영버튼을 선택한 후 Click 블록을 불러오겠습니다.

카메라로 촬영한 사진 표시하기

이제 촬영버튼을 눌렀으니 카메라가 나와야겠죠?
앱 기능 블록^[각주:2]에서 Camera를 선택하여 photo from camera 블록을 가져옵니다.
photo from camera 블록은 카메라를 열어 사진을 촬영하게 하고, 촬영한 사진을 가져옵니다.

오늘은 photo from camera 의 고급 블록을 사용하려고 합니다.
블록을 마우스 오른쪽 버튼으로 클릭하면 나오는 Show advanced block을 선택해주세요.
그리고 난 후 고급 블록을 Click 블록에 조립해 주겠습니다.

photo from camera 고급블록의 옆에 3개의 작은 블록이 붙어있는게 보이시죠?
이 블록에서 출력되는 값들을 나타내는데요. 이번에는 카메라에서 촬영된 사진을 나타내는 photo블록을 사용할 것입니다.

photo from camera 블록을 이용해 찍은 사진이 이미지 에 표시되어야겠죠?
UI 컴포넌트 리스트에서 이미지를 선택하고 컴포넌트에 표시할 사진을 설정하는 블록을 photo from camera 블록에 조립하겠습니다.
👉 촬영버튼을 클릭하면 카메라로 사진을 촬영하고 촬영된 사진을 이미지 컴포넌트에 표시하는 기능이 되어야 하기 때문에 그렇습니다.

가까이 살펴볼게요!

위와 같이 블록이 조립된 모습을 볼 수 있어요.
초록색 블록을 살펴보면 컴포넌트에 표시될 이미지를 noimg.png 파일로 설정하고 있네요.
우리는 카메라로 촬영한 사진을 이미지에 표시할 것이므로 photo from camera 블록의 photo를 가져와 noimg.png자리에 끼워줍니다.

이렇게 촬영버튼 을 눌렀을때 촬영한 사진을 이미지 컴포넌트에 표시하는 블록코딩이 되었습니다.

이미지 인식 후 결과 표시하기

Camera에서 설정한 이미지를 인식하고 그에대한 설명을 생성하는 description of image from ~ 블록을 가져와 줄게요.

이 이미지 인식에 대한 결과는 결과텍스트 에 표시될 예정이죠?
결과텍스트 를 선택하여 컴포넌트의 텍스트를 변경하는 블록을 이미지 블록 아래로 배치해 줍니다.

이제 자세히 살펴볼게요

촬영버튼을 클릭했을때 결과텍스트에 표시되는 "Label" 문구를 이미지 인식결과 텍스트로 변경해야겠죠?

이렇게 아래에 꺼내놓았던 이미지 인식 설명 블록을 "Label" 대신 조립해 주었습니다.
그리고 이미지 인식 설명 블록의 photo from camera 대신, 아까 카메라로 촬영한 photo 블록을 조립해 줄게요.
이제 블록코딩 작업이 모두 완료되었어요! 참 쉽죠?🥳

테스트하기

이제 이미지 인식 앱이 완성되었으니 썬커블 앱으로 테스트를 해봅시다!
썬커블 빌더의 Web preview 기능을 사용해도 되지만, 카메라 기능이 정상적으로 동작하는지 확인하기 위해 모바일 앱으로 진행할게요.

촬영버튼으로 가위를 찍어보았습니다. "a pair of scissors"라고 잘 인식되고 있네요.
이렇게 이미지 인식 앱 개발도 완성입니다!

고생 많으셨고, 앞으로 다른 다양한 앱들을 같이 만들어 보려고 하니 관심 부탁드려요!

1. 클릭 혹은 터치 [본문으로]
2. App Features [본문으로]