아두이노 Wifi 스위치 - 주말 프로젝트 후기

2주에 걸친 주말 아두이노 Wifi 스위치 프로젝트를 대충 정리 해서 소스를 Github에 올려 놨습니다. 그냥 혼자 공부한게 아까워서 정리 한번 해봤습니다.

다운로드 링크 https://github.com/bipark/home-control

와이파이 아두이노에 릴레이를 달아 전원 컨트롤이 가능한 스위치 박스와 그 스위치 박스들의 컨트롤을 관래 해주는 Node.js 서버 그리고 앱에서 그 스위치들을 On/Off 할 수 있는 React-Native 기반의 앱 까지 전체 프로젝트 소스 입니다.

아두이노 스위치

UI가 너무 구려서 안타깝습니다만 팔거 아니니 뭐 어쩔 수 없습니다.

주말 프로젝트 후기

아두이노 Wemos 보드는 의외의 보물이다. 아두이노 보드에 Wifi 모듈을 장착하고 있으면서 가격은 4달러 수준으로 웬만한 기능을 다 구현 할 수 있다. 아래 링크에사 사용한 부품의 상세를 확인 할 수 있다.

보드구입링크 - 알리익스프레스

릴레이링크 - 알리익스프레스

전원부링크 - 알리익스프레스

예를들면 AP 모드로 기동해서 간단한 웹서버로 쓸 수있고 Wifi 클라이언트로 붙어서 Request & Response를 처리 할 수도 있다. 코딩 역시 꽤 간단하게 웹서버와 클라이언트 모듈을 구현 할 수 있었다.

요즘 10달러 수준의 IOT릴레이가 샤오미에서 나오는데 이게 단 하나의 Digital Out을 지원하는데 비해 상당히 많은 I/O를 만들 수도 있기 때문에 더 효율적 일 수도 있을것 같다. 대신 조립을 해야 하기 때문에 예쁜 외형을 유지하는건 불가능. 전원부, 릴레이부, 그리고 보드의 조합을 예쁘게 한개의 박스로 만들어 내는건 쉬운일이 아니다. 역시 이런건 샤오미가 잘한다.

그 외의 코드들은 그냥 보통(?) 수준이다. Node.js를 이용한 서버와 React-Native를 이용한 앱 클라이언트는 늘상(?) 하던 일이라 대충 디펜던시 조합과 적은양의 코드로 만들 수 있는데 문제는 항상 UI에 있다. 예쁜 UI를 만들어 내는건 개발자의 일이 아닌 모양이다. CSS공부가 최고 숙제..

좀 더 해야할 일은 아두이노를 좀 더 범용적으로 쓰기위한 셋팅 시스템을 만드는 일인데 예를들면 처음 기동할때 AP모드로 기동하여 웹서버를 열고 웹으로 서버에 접근해서 접속할 Wifi의 ID, PW등을 셋팅하고 서버의 IP를 입력한 후 다시 기동하면 IoT클리이언트로 아두이노의 I/O를 서버에 자동으로 업로드 하여 앱에서 자동으로 리스트를 가져 올 수 있도록 자동화 하는 기능이다. 주중에 코딩을 덜하게 되니 주말 코딩을 늘리고 있다.

이런식으로 개발자의 행색을 이어가고 있는 올드보이.. 라니

아두이노 스위치 아두이노 스위치 아두이노 스위치 아두이노 스위치

만든 계기

약 2주간 주말에 재미삼아 만든 프로젝트 입니다. 처음엔 아두이노만 하려고 했는데 일이 커져 버렸네요. 알리익스프레스에서 wifi가 달린 아두이노를 발견하고 https://ko.aliexpress.com/item/ESP-12E-WeMos-D1-WiFi-uno-based-ESP8266-shield-for-arduino-Compatible/32719426362.html?spm=2114.13010608.0.0.Kro7h8 코딩 한번 해보려고 시작한 일이 커져 벼렸습니다.

처음 만든것은 이런 모양 이었습니다. 컨트롤 스위치 (페북 링크 참조) https://www.facebook.com/rtlink.park/posts/1765804983435531 이걸 브라우저 주소로 컨트롤 할 수 있게 만들었는데 기왕 만들고 보니 서버와 앱이 있으면 좋겠다 싶어서 현재 리포와 같은 작업을 했습니다.

기왕에 시작한 일을 중지 하기가 싫어서 만든 소스라서 예쁘게 정리 하지 못하고 올려 놓습니다. 대충 개념만 참조 히시면 좋겠습니다. 시간이 나는대로 업데이트 해보도록 애써 보겠습니다.

구동방식

  1. 아두이노에 전원이 인가되면 아두이노 내부에 웹서버를 기동하고 와이파이를 연결하고 서버에 접속해서 자신의 number, ip, name를 전송합니다.
  2. 서버는 전송받은 정보를 DB(MySQL)에 저장합니다.
  3. 모바일앱은 기동하면서 서버에 접속하여 Device List Request 합니다. 받은 리스트를 이용하여 화면을 만들고 사용자의 액션을 기다립니다.
  4. 사용자가 앱 스위치를 On/Off 하면 서버로 ip, Status가 전달되고 서버를 Device에 On/Off 메세지를 전달하여 On/Off 를 수행 합니다.

추후 예정작업

  1. 원래는 앱을 실행하면 서버에서 디비이스의 상태를 모두 확인하고 현재 디바이스별 On/Off 상태를 앱에 전달해 줘야 하는데, 아두이노에 상태 확인 코드 까지는 넣어 놨는데 서버에서 확인하는 과정이 없습니다.
  2. 서버 페이지 - 웹으로 접근해서 스위치 온오프 하려고 ExpressJS를 셋팅만 해놨습니다.
  3. 귀찮음 병이 좀 나아지면 하겠습니다.

서버 환경 설정

  1. MySQL 테이블 구조
  2. npm install
  3. npm start

React Native

  1. npm install
  2. npm start
  3. react-native run-ios or react-native run-android
  4. 아이폰과 안드로이드에서 잘 동작 합니다만 UI 구립니다.

프로젝트 폴더의 구조

  1. [app] - React Native 기반의 앱 폴더
  2. [server] - Node.js 홈서버
  3. [arduino] - 아두이노 소스 코드

라이센스

MIT 입니다. 맘대로 사용하셔도 됩니다. 대신 책임지지 않습니다. ㅋ

Written on July 5, 2017