앱 개발 - flet (창의플랫폼) (1)

창의플랫폼에서 진행하는 프로젝트인 시각장애인을 위한 버스 이용 도우미 앱을 제작해야 해서 앱 개발을 시작한다.

지금까지 해본 앱 개발은 안드로이드 스튜디오밖에 없는데 안드로이드 스튜디오는 정말 내가 해본 프로그래밍 중 가장 싫어한다. 일단 내가 거의 쓰지도 않는 java가 개발 언어이고 뭐 하려고 할 때마다 gradle 동기화 문제, manifest 파일에 뭐 추가 안해서 생기는 문제 등등 직접적인 코드보다 라이브러리 불러오는 과정에서 에러가 너무 많이 발생한다.

그것 말고도 가상 머신에서 앱 테스트 실행해보려고 해도 오지게 느리고 툭하면 강제종료된다.

ui 구성하는것도 xml 파일에 코드로 하거나 직접 ui 옮겨서 화면 구성하면 자동으로 되는데 이것도 상당히 불편하고 예쁘지도 않다. 사진 불러오거나 꾸미려면 한세월이다. 

어차피 창의플랫폼에서 여러 가지 기능 개발을 다 파이썬으로 했기 때문에 앱에서 파이썬 코드를 돌려야 한다.

그래서 파이썬 앱 개발을 찾아보게 되었고 flutter, react native, kivy 를 알게 되었는데 react보다는 flutter가 성능이 좋다는 정보를 얻어서 flutter로 해야겠다고 생각했다. 근데 flutter는 dot이라는 자바스크립트 비슷한 언어라길래 뭔가 해서 flutter 파이썬으로 찾아봤는데 flutter에서 파이썬을 실행하는 코드를 작성할 수도 있고 그냥 flet이라는 걸 이용할 수도 있다길래 flet을 이용하기로 최종 결정했다.

 

여기까진 그냥 내가 이 앱 개발을 시작한 이유에 대해서 나열한 것이고 내가 이 앱으로 어떤 기능을 구현할 것인지 간단하게 소개하고 본격적으로 시작해 보겠다.

 

이 앱에서는 첫번째로, 카메라로 버스 번호판을 인식해서 번호를 알려주고 왼쪽, 오른쪽 중에 어디로 가야 버스가 있는지 사용자에게 알려준다.

두 번째로, 어떤 버스에 어떤 역에서 타서 어떤 역에서 내릴건지를 녹음하면 음성 파일을 이용해서 해당 버스의 기사한테 카톡 알림을 보내주는 기능이 있다.(물론 실제 버스 기사한테는 못하니까 그냥 팀원들 폰으로 가상의 버스 번호를 부여해서 할 것이다.)

다른 기능들이 더 추가될 수 있지만 일단은 간단하게 이 정도이다. 이걸 하려면 카메라 연동과 음성 녹음 이 두가지가 앱 개발에서 고비가 될 것 같고 기능적인 부분 자체는(번호판 인식이나 음성->텍스트 변환) 이미 파이썬 코드로 구현해 놨기 때문에 걱정할 필요가 없다.

번호판 인식 부분은 사실상 인터넷에 올라온 예제 코드를 다듬은 정도기도 하고 이미지 인식 인공지능 관련해서는 따로 공부할 계획이기 때문에 글은 안 올렸고, 음성->텍스트 변환은 https://bluesunset-hack.tistory.com/185 이 글을 참고하기 바란다.

카카오톡 api를 이용해 텍스트 전송하는 기능은 https://bluesunset-hack.tistory.com/192 이 글을 참고하기 바란다.

 

이제 앱 개발을 위해 flet을 사용해 보겠다.

일단 flet 설치는 그냥 pip install flet 으로 하면 된다.

설치를 했으면 기본 앱 실행 코드를 짠다.

import를 하고 .app 함수에서 target을 지정해주고, main 함수를 만들어준다.

pass로 아무 기능도 안 만들었기 때문에 오른쪽 실행 화면은 비어있다.

실행은 터미널에서 flet run app.py 이렇게 하면 된다.

실행 창을 닫지 않고 그냥 왼쪽 코드에서 수정하면 즉각 반영이 되기 때문에 코드 짤 때 편하다.

page 변수를 이용해 앱 화면에 ui들을 추가할 수 있다.

먼저 title로 해당 페이지의 제목을 지을 수 있고, page.add 를 통해 여러 요소들을 추가할 수 있다.

text와 button을 추가한 예시이다.

버튼을 눌렀을 때 특정 기능이 돌아가게 하기 위해서 on_click 함수를 만들고 지정해주면 된다.

이렇게 하면 press를 누를 때마다 cmd 창에 pressed가 출력되는걸 확인할 수 있다.

그리고 textfield도 추가시킬 수 있다. hint_text 속성을 이용해 입력하기 전 박스에 내용을 채울 수 있다.

이번엔 입력값을 이용하는 기능이다. textfield를 변수에 담고, 버튼 클릭 이벤트 함수에서 textfield 안에 담긴 값을 

같이 출력하도록 하였다.

이제 버튼을 누르면 pressed만 뜨던게 input 안에 입력한 내용까지 같이 출력된다.

print 대신 page.add로 입력한 내용이 페이지에 뜨게 만들었다.

그리고 입력을 하고 엔터를 눌러도 버튼을 눌렀을 때랑 똑같이 되도록 on_submit 속성을 설정해주었다.

입력을 하고 나면 입력창이 비워지고 다시 hint_text가 채워지도록 textfield.value를 초기화시키고 페이지를 update 해주는 기능도 추가하였다.

page에 add하는 방식 말고 row와 column을 이용하는 방식도 있다. 

ft.Row와 ft.Column으로 생성을 하고 row.controls.append 이런식으로 추가를 시키면 된다.

row는 가로, col은 세로로 요소가 추가된다.