앱인벤터로 어플리케이션 만들기

by 조혜인 | 2017-02-27 18:31
app arduino doorlock home inventor mit samrt smart 도어락 스마트 아두이노 앱인벤터 인벤터

첨부파일

이전 포스트에 이어서 마무리 하겠습니다. (Arduino & Android Based Bluetooth Controll Password Protected Smart Door Lock) 어느 훌륭하신 메이커분이 앱 인벤터로 간단하게 블루투스 어플 제작하는 방법을 메이커분이 상세하게 올려주셔서 소개해드립니다.ㅎㅎ사실 이런 자료는 흔치 않은데요. 대부분 앱인벤터 실행 후 인터페이스 설명 정도에 그치거나, 아니면 인터넷 동영상을 몇 편 봐야되긴 해서 조금 번거롭습니다. 특히나 아두이노에 블루투스가 많이 쓰이는데, 아두이노 특화된 컨트롤 앱 만들기는 초보자들에겐 쉽지 않은 일이라고 느껴집니다. 그런 가운데 발견한 자료라 참 기쁘네요. 다음에 제가 블투앱 만드는 과정을 정리해서 자료를 한번 더 올리면 좋은 레퍼런스가 될 것 같습니다.


참고소스

- BTcontrol.aia
소스를 수정하려면 "Projects"메뉴를 클릭하고 그림 24의 "Import project (.aia) from my computer"를 선택하고 컴퓨터에서 BTcontrol.aia 파일을 찾습니다. 가져온 후에는 쉽게 수정할 수 있습니다.
소스파일 첨부해 두었습니다.



STEP 4. 앱 인벤터(App Inventor)로 어플리케이션 제작하기

어플리케이션 제작에 관심이 있으신 분들은 이번 스탭을 따라하면 좋을 것 같습니다.
앱인벤터로 블루투스 어플 제작하는 것이 상세하게 나와있어서 소개해 드립니다.


앱 인벤터(App Inventor) 홈페이지에 접속 

Google 계정만 있으면됩니다.
http://ai2.appinventor.mit.edu/

그리고 아래 튜토리얼을 따라해 주세요. 번호가 약간 뒤죽박죽인데, 순서대로 진행하시면 됩니다.
차후에 앱인벤터 부분만 정리해 다시 포스팅해서 올리도록 하겠습니다.


디자인 하기 (UI 추가하기)

1. 이용 약관에 동의합니다.( image 1)



2. '나중에 설문 조사하기'를 클릭 한 다음 '계속'을 클릭하여 스플래시 화면 image 2, 3을 닫습니다.



3.  새 프로젝트 시작 (공백없이!) (image 4)

4. 프로젝트 이름을 "BluetoothControlDoorLock"으로 지정하십시오 (공백없이!)  (image 5)



5. 이제 디자이너에서 앱의 UI 레이아웃을 배치합니다. (image 6).
디자이너 창은 앱의 모양과 느낌을 배치하고 필요한 기능을 지정하는 곳입니다.
단추, 이미지, 레이블, 텍스트 상자, 텍스트 음성 변환, Bluetooth, 센서 및 GPS와 같은 기능을 사용자 인터페이스에 맞게 선택합니다.



6. image 7을 따라 List Picker를 뷰어에 추가합니다. 


7. "Connect to Bluetooth Device(Bluetooth 장치에 연결)"(image 8)로 이름을 변경하세요. 


8. 하나의 lable, 하나의 password text box 및 그림에 표시된 두 개의 button를 추가하십시오. 

9. properties의 텍스트 속성을 각각 "Enter Password", "Open Door"및 "Close Door"로 변경하십시오. 


10. Bluetooth 클라이언트를 뷰어에 추가하세요.

11. 최종 사용자 인터페이스는 image13과 같아야합니다. 



블록 편집기로 전환

"Block"을 클릭하여 블록 편집기 (image 13)로 이동하십시오. Designer와 Blocks 버튼을 탭처럼 생각세요. 이 버튼을 사용하여 App Inventor의 두 영역 사이를왔다 갔다합니다.  


Blocks Editor는 앱의 동작을 프로그래밍하는 곳입니다.  수학, 논리 및 텍스트와 같은 것을 처리하는 내장 블록이 있습니다. 아래는 앱의 각 구성 요소와 관련된 블록입니다. 

Blocks Editor에 특정 구성 요소의 블록을 표시하려면 먼저 Designer를 통해 해당 구성 요소를 앱에 추가해야합니다.

우리가 이전 스탭에서 버튼추가, text box를 추가했던 것 처럼요.



List Picker에 대한 블록을 디자인 해 보겠습니다. List Picker는 UI 요소입니다.

이 요소를 클릭하면 해당 요소 목록이 페어링 된 Bluetooth 장치로 표시됩니다. ListPicker.BeforePicking과ListPicker.AfterPicking의 두 블록을 추가해야합니다 (image14). 완전한 블록은 image 18과 19에 나와 있습니다.









apk 파일 만들기

디자인이 완성되었습니다. 이제 안드로이드 폰용 apk 파일을 만들어야합니다. 

빌드 메뉴를 클릭하고 "App (내 컴퓨터에 .apk 저장)"을 선택하십시오. 

apk 파일이 기본 다운로드 폴더로 다운로드됩니다. 이 apk 파일을 스마트폰에 설치해 사용하세요.



3. 결과물

결과물이 매우 투박하네요ㅠ. 커스터마이징이 절실해 보입니다.
한국에는 대부분 비밀번호 도어락이니, 그곳의 ON/OFF를 제어하는 것으로 변경해야 합니다.
안드로이드만 가능한 어플방식도 해결해야 합니다. 아이폰과도 호환되는 Bluetooth Low Enegy (Bluetooth 4.0) 방식을 이용할 계획입니다. 

댓글 5

MADE BY

조혜인

arduino, processing, rhino, sketchup, 아두이노, 에프터이펙트, 포토샵, 프리미어