wifi 아두이노 WeMos D1 (ESP8266) 과 파이어베이스 Firebase를 연동한 사물인터넷 IoT 애플리케이션을 앱 인벤터 App Inventor 로 만들기 - 15 단계 steps

 하따 제목 길다..

 이 강좌를 따라 하면

 요런걸 만들 수 있습니다!

 

0 단계

 가장 먼저 WeMos D1을 준비해야 됩니다. wifi가 되는 아두이노는 많지만 WeMos D1은 아두이노 우노 기반이기 때문에 쓰기 쉽고.. 제일 중요한 가격이.. 가격이! 엄청 쌉니다! 케이블도 micro usb를 사용하기 때문에 따로 챙길 필요도 없구..

 

 시간적 여유가 되시는 분들은 알리에서 주문 하시고 저 처럼 성격이 급한 분들 국내 사이트에서 주문을 하시면 되겠습니다. 가격은 알리가 2~3$정도 하고 국내는 알리의 두 세배 정도 하는 것 같습니다.

https://search.shopping.naver.com/search/all.nhn?where=all&frm=NVSCTAB&query=wemos+d1

wemos d1 : 네이버쇼핑

 WeMos D1이 준비 되었다면 준비물은 끝입니다! 야호! 이제 사물인터넷을 만들러 떠나볼까요옹~?

 

1 단계

 처음으로는 Arduino.cc 사이트에서 사용하시는 OS에 맞는 IDE를 다운로드 해주시면 됩니다.

https://www.arduino.cc/en/Main/Software

Arduino - Software

 다운로드 후 설치까지 끝냈다면 Arduino라는 이름의 프로그램을 실행시켜주세요!

 

 

2 단계

 그러면 아두이노 스케치라는 것이 열릴텐데 '파일 -> 환경설정 (ctrl+comma)'으로 이동해 줍니다.

 

추가적인 보드 매니저 URLs에 http://arduino.esp8266.com/stable/package_esp8266com_index.json 를 입력하고 확인!

 

 아래 쪽 '추가적인 보드 매니저 URLs'의 주소를 http://arduino.esp8266.com/stable/package_esp8266com_index.json 로 입력해줍니다. esp8266이라는 wifi 모듈 기반의 보드들을 잡아주기 위해서 필요한 과정입니당~

 

3 단계

 그 다음 '툴 -> 라이브러리 관리... (ctrl+shift+i)'에서 아두이노 json 라이브러리를 추가해주겠습니다.

 

다른거 말고 ArduinoJson 을 설치해줘야 합니다.

 'json'이라고 검색하면 여러개의 검색결과가 나올텐데 그 중에서 'ArduinoJson' by Benoit Blanchon님 <- 요거를 설치해주시면 됩니다. 저는 이미 설치된 상태라 INSTALLED라고 되어 있는데 님들은 아직 설치 안했으면 마우스커서 올리면 나오는 설치 버튼을 클릭해서 설치를 해주세요!

 

4 단계

 이제 제일 중요한 파이어베이스 라이브러리를 추가해주어야 합니다. 같은 esp8266 모듈의 보드라고 해도 종류가 매우 많기 때문에 WeMos D1에서 제대로 동작하는 파이어베이스 라이브러리를 찾아주어야 합니다. 그렇다고 WeMos 회사에서 라이브러리를 제공해주는 것도 아니라서 제대로 동작하는 파이어베이스 라이브러리찾는 것이 굉장히 어려웠습니다. ㅠ.ㅠ 인터넷에서 쉽게 찾을 수 있는 파이어베이스 라이브러리가 WeMos D1에서는 동작을 안하는 경우가 허다해서.. 흑흑..

 저는 MIT의 K. Suwatchai (Mobizt) 님께서 배포하신 라이브러리를 썼습니다. https://github.com/mobizt/Firebase-ESP8266 에서 받으실 수 있습니다. 만, 귀찮으신 분들을 위해 압축 파일을 첨부합니다.

Firebase-ESP8266-master.zip

0.14MB

 사실 이 파이어베이스 라이브러리만 받아서 설치하면 구부능성은 넘었다고 보셔도 됩니다. 이거 찾느라 엄청 고생했는데.. 여러분들은 제 덕에 쉽게 꿀빠시는 것을 감사하게 생각하시면 저는 감사합니다.

 

 파이어베이스 라이브러리 설치는 아두이노가 설치된 폴더에서 'libraries' 폴더 안에 압축을 푸시면 됩니다. 저 같은 경우는 'C:\Users\Haksung\Documents\Arduino\libraries' 이 경로인데요, 앞에 '학성'이 달라질 수도 있고 경로 자체가 달라질 수도 있고 그것은 여러분들이 아두이노를 어디에 설치했느냐에 따라 달라지겠지요옹~?

 

5 단계

 구부능성을 넘었는데 왜 5 단계라고 하신다면 반사.

 이제 가장 중요한 구글 파이어베이스에 실시간 데이터베이스(Realtime Database)를 설치해야 합니다. 구글 계정은 다들 있으시겠지요?

 파이어베이스 홈페이지에 접속해서 https://firebase.google.com 

Firebase

 구글 아이디로 로그인 하시고 프로젝트를 하나 만들어 주시면 됩니다. 프로젝트는 대충 생성 하시면 됩니다. 프로그램 설치 하듯이 '다음' 같이 생긴 버튼만 누르면 되거든요! 중간에 구글 애널리틱스 계정만 기본 계정(Default Account for Firebase)로 하시면 됩니다.

프로젝트 이름은 대충 지었습니다.

6 단계

 단계가 거듭될 수록 단게 땡기네요.

 이번 단계에선 실시간 데이터베이스를 설치해야 합니다. 왼쪽 메뉴에서 'Database'를 눌러서 주황색 화면에서 '데이터베이스 만들기' 버튼을 눌러주세요!

초록색으로 네모 친 버튼을 누르면 됩니다. 당근 컬러~

 '데이터베이스 만들기' 버튼을 누르면 '프로덕션 모드'에서 시작할 것인지, '테스트 모드'로 시작할 것인지 고를 수 있습니다. 아직 여러분들은 수련이 될 되었기 때문에 감히 프로덕션 모드를 고를 수 없습니다. 내공이 쌓이기 전에는 '테스트 모드'를 선택해줍니다.

내공이 부조카당..

 그리고 위치 설정을 해주어야 하는데.. 되도록이면 대한민국이면 좋겠고 대한민국이 없으면 대한민국과 가까운 나라면 좋겠죠? 대한민국이 없기 때문에 그나마 가까운 'asia-northeast2'를 선택해주시면 되겠습니다. 위치가 궁금해서 찾아봤는데 'asia-northeast1'은 도쿄, 'asia-northeast2'는 오사카라고 하네요. 일본의 서버를 써야 한다니 분하지만 다음 가까운 서버는 홍콩에 있기 때문에 오사카보다는 좀 더 멀겠습니다. 하지만 저는 일본의 서버를 써야 한다는 것이 기분이 나쁘기 때문에 'asia-east2'를 골라서 홍콩의 서버를 쓰겠습니다. 그제가 삼일절이기도 했구요. 그렇다고 여러분들 까지 홍콩 서버를 골라야 된다는 것은 아닙니다. 물리적으로 거리가 멀다면 물론 반응속도가 조금 길어질 수 있겠지만 우리가 무슨 큰 대단한 프로젝트를 만드는 것도 아니고 LED 깜빡 거리는 프로젝트 하나 만들어 보려는 것이기 때문에 반응속도가 조금 길어지면 어떻습니까? 갑자기 일본으로 부터의 서버 독립 의지가 불타 올라서 글이 길어졌습니다. 노노 재팬!

노노재팬

예스홍콩

 

7 단계

 이제 데이터베이스가 만들어졌으니까 실시간 데이터베이스 Realtime Database 설정을 해주기만 하면 됩니다.

 데이터베이스가 만들어진 화면에서 'Cloud Firestore'를 누르면 'Realtime Database'를 선택할 수 있습니다.

노노 클라우드 파이어스토어, 예스 리얼타임 데이터베이스

 Realtime Database를 선택 하셨다면 상단에 있는 '규칙'에 들어갑니다. '규칙'에 들어가면 'read'와 'write'가 둘 다 'false'로 되어있을건데, 'true'로 수정해주시면 됩니다. 둘 다 true로 수정한 다음 '게시' 버튼을 눌러주세요.

read와 write를 참트루로 ㄱㄱ

 8 단계

 아 드디어 파이어베이스 설정이 끝났습니다. 좀만 더 했으면 파이어베이스 데이터베이스 리얼타임 데이터베이스에 게슈탈트 붕괴 올 뻔 했네요. 파이어베이스 인터넷 창은 끄지 마시고 왼쪽 상단에 'Project Overview' 오른쪽에 톱니바퀴 모양의 버튼을 눌러주세요. '프로젝트 설정'에 들어가주세요.

 그리고 상단 메뉴에 보면 '서비스 계정'이라고 있습니다. 여기에 들어가서 왼쪽에 '데이터베이스 비밀번호'를 클릭해주세요. 이 곳에서 여러분이 만든 데이터베이스의 호스트 아이디와 비밀번호를 볼 수 있습니다.

 이 아이디와 비밀번호가 있어야 아두이노에서 파이어베이스에 접속할 수 있습니다.

데이터베이스 아이디와 비밀번호가 꼭 필요합니다!

 비밀번호가 땡땡이로 가려져 있다면 '표시' 버튼을 누르면 볼 수 있습니다.

 

9 단계

 이제 파이어베이스의 데이터베이스를 설치 했으니 앱 인벤터로 만든 애플리케이션과 연동해볼까요오옹?

 앱 인벤터 프로젝트를 만들고 'Experimental'에서 'FirebaseDB'컴포넌트를 추가해줍니다.

경고가 떠도 괜찮아요! 우리는 어차피 이 컴포넌트를 쓸거니까!

 그리고 'FirebaseDB'컴포넌트의 속성(Properties)에서 'FirebaseURL'을

https://여러분의데이터베이스ID.firebaseio.com

 이렇게 입력해주시면 됩니다. 저는 ID가 'daechoong-4b82f'였으니까

https://daechoong-4b82f.firebaseio.com

 이렇게 되겠죠?

 'ProjectBucket'은 여러분이 만든 앱 인벤터 프로젝트의 이름과 같은지만 확인해주고 넘어갑시다. 나중에 파이어베이스 데이터베이스에 이 프로젝트 버킷 이름으로 데이터가 생성될 거니까요! 

앱 인벤터 프로젝트도대충 만들어 주었습니다.

 앱은 그냥 스위치를 써서 여러가지 LED를 다룰 수 있게 했는데 LED 준비하는게 귀찮으니까 그냥 스위치 컴포넌트 한 개만 넣고 넘어가도 됩니다.

 

10 단계

 이제 앱 인벤터의 블록 코드를 볼까요? 스위치가 켜졌을 때 파이어베이스에 저장하려는 tag(key)를 "tag"로, 저장하려는 값을 1로 정했습니다. 스위치가 꺼지면 1이 아니라 0을 값으로 저장하면 됩니다. 개간단하죠? 문자열, 특히 한글은 앱 인벤터와 파이어베이스를 연동하여 다루기가 무척 어렵기 때문에 그냥 간단하게 숫자로 해주었습니다. 어차피 아두이노에서는 문자열로 받아올거라.. 흑흑..

개간단하다. 사물 인터넷 코드가 이렇게 간단해도 돼?

11 단계

 11 단계 만에 아두이노에 코드를 업로드 할 수 있게 되었습니다. 이전까지는 준비운동 이었죠. ㅎㅎ 구부능선? ㅎㅎ

#include "FirebaseESP8266.h" // 반드시 파이어베이스 라이브러리를 먼저 추가해야 합니다.
#include <ESP8266WiFi.h>
 
#define FIREBASE_HOST "파이어베이스아이디.firebaseio.com" // http달린거 빼고 적어야 됩니다.
#define FIREBASE_AUTH "데이터베이스비번" // 데이터베이스 비밀번호
#define WIFI_SSID "와이파이이름" // 연결 가능한 wifi의 ssid
#define WIFI_PASSWORD "와이파이비번" // wifi 비밀번호
 
FirebaseData firebaseData;
FirebaseJson json;
 
void printResult(FirebaseData &data);
void setup() // wifi 접속 과정.
{
  Serial.begin(115200);
 
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  Serial.println();
  Serial.print("Connecting to Wi-Fi");
  while (WiFi.status() != WL_CONNECTED)
  {
    Serial.print(".");
    delay(300);
  }
  Serial.println();
  Serial.print("Connected with IP: ");
  Serial.println(WiFi.localIP());
  Serial.println();
 
  Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);
  Firebase.reconnectWiFi(true);
 
  //Set the size of WiFi rx/tx buffers in the case where we want to work with large data.
  firebaseData.setBSSLBufferSize(1024, 1024);
  //Set the size of HTTP response buffers in the case where we want to work with large data.
  firebaseData.setResponseSize(1024);
  //Set database read timeout to 1 minute (max 15 minutes)
  Firebase.setReadTimeout(firebaseData, 1000 * 60);
  //tiny, small, medium, large and unlimited.
  //Size and its write timeout e.g. tiny (1s), small (10s), medium (30s) and large (60s).
  Firebase.setwriteSizeLimit(firebaseData, "tiny");
 
  pinMode(LED_BUILTIN, OUTPUT); // 출력 핀 잡아주기.
}
 
void loop()
{
  if (Firebase.getString(firebaseData, "앱인벤터프로젝트이름/tag")) // 해당하는 key가 있으면 (앱 인벤터에서는 tag)
  {
    String value = firebaseData.stringData(); // 값을 문자열로 받아와서 value에
    Serial.println(value); // 시리얼모니터에 값을 출력
    
    if (value == "1")
    {
      digitalWrite(LED_BUILTIN, LOW); // WeMos D1의 빌트인 LED는 LOW로 해야 불이 들어오네요 -.-;;
    }
    else if (value == "0")
    {
      digitalWrite(LED_BUILTIN, HIGH); // 이거는 반대
    }
  }
  else
  {
    Serial.println(firebaseData.errorReason()); // 에러 메시지 출력
  }
  delay(1000); // 1초마다 반복
}

 이 코드를 복사해서 초반에 설치해준 아두이노 스케치에 붙여넣기 해줍니다.

 코드를 읽어보시면 아시겠지만, 당연히 이 코드를 붙여 넣는다고해서 바로 동작하지는 않습니다. 중간 중간에 수정해주어야 할 것들이 있죠!

이 곳을 #define FIREBASE_HOST "파이어베이스아이디.firebaseio.com" // http달린거 빼고 적어야 됩니다. #define FIREBASE_AUTH "데이터베이스비번" // 데이터베이스 비밀번호 #define WIFI_SSID "와이파이이름" // 연결 가능한 wifi의 ssid #define WIFI_PASSWORD "와이파이비번" // wifi 비밀번호   이런식으로 수정해야 합니다. #define FIREBASE_HOST "daechoong-4b82f.firebaseio.com" // http달린거 빼고 적어야 됩니다. #define FIREBASE_AUTH "asdf1234asdf1234 // 데이터베이스 비밀번호 #define WIFI_SSID "JamongBabo" // 연결 가능한 wifi의 ssid #define WIFI_PASSWORD "Jamong1004" // wifi 비밀번호

 그리고 아랫부분 void loop() 이하에도 수정해주어야 할 것이 있습니다.

이 곳을 if (Firebase.getString(firebaseData, "앱인벤터프로젝트이름/tag")) // 해당하는 key가 있으면 (앱 인벤터에서는 tag)   이렇게 if (Firebase.getString(firebaseData, "IoT_LED/tag")) // 해당하는 key가 있으면 (앱 인벤터에서는 tag)

 기본값으로는 프로젝트 이름이랑 FirebaseDB 컴포넌트의 속성의 프로젝트 버킷이랑 같습니다. 수정하지 않았다면 앱 인벤터의 프로젝트 이름을 그대로 넣으시면 됩니다.

 

12 단계

 처음에 글을 쓸 땐 12 단계 까지 올 것이라고는 생각 못 했는데.. ㅠ.ㅠ

 넘 길어지네요.. 화이팅!

 

 이제 코드를 아두이노에 업로드 해주어야 되는데.. 그 전에 혹시 WeMos D1을 컴퓨터에서 인식 못 하는 경우에는 아래의 드라이버를 설치해주세요!

CH340 USB_Serial Driver.zip

0.04MB

CH341SER.ZIP

0.14MB

 CH340으로 설치 한 다음 재부팅 해보시고 그래도 인식이 안된다면 CH341도 설치해보세요!

 

13 단계

 으악 13 단계라니.. 이제 코드를 업로드 해 줄 차례입니다. 보드는 'WeMos D1 R1'을 선택해주시고 , Upload Speed는 '115200'을 선택해주세요!

아 설정할게 많아서 귀찮구먼요..

 포트는 여러분들 컴퓨터에 연결된 포트로 잡아주시면 되구요!

 일반 아두이노 우노 보다 업로드가 오래 걸릴 것입니다. 업로드 하는 동안 '툴 -> 시리얼 모니터 ctrl+shift+M'을 켜주세요.

호랑이 기운의 시리얼 모니터

 업로드가 정상적으로 완료되면 시리얼 모니터에서 wifi에 접속된 정보를 볼 수 있을 것입니다. 접속이 잘 되었다면 'path not exist'가 출력될텐데 아직 파이어베이스 데이터베이스에 값을 저장하지 않아서 출력되는 에러이니 정상이라고 생각하시면 됩니다.

오옷 인터넷 연결이 되어부럿으!

14단계

 다 했습니다. 이제 앱 인벤터로 만든 앱에서 스위치를 키면 파이어베이스 데이터베이스의 실시간 데이터베이스 Realtime Database에 데이터가 생성될 것입니다.

오옷 데이터가 생겨부럿으!

 앱에서 스위치를 켜면 데이터베이스에서 tag의 값이 "1"이 될 것이고, 스위치를 끄면 값이 "0"이 될 것입니다. 이것은 시리얼 모니터에서 확인할 수 있습니다.

오옷 데이터를 볼 수 있구먼!

끝

 짧게 쓸려고 했는데 준비하는 것 부터 글 쓰는 것 까지 엄청 오래걸렸네요.. 누구나 사물 인터넷 앱을 만들 수 있는 세상인 만큼 쉽게 만드시라고 최대한 쉽게 썼습니다. 저는 아직 저녁도 못 먹고 저녁 10시가 되었는데 이게 무슨 짓인가 돈이 되는 것도 아닌데 내가 왜 이러고 있는가 하스스톤이나 하러 가야지!

 

 문의 사항은 댓글에 달아주시고 댓글을 보신 분들은 답변 좀 달아주세요. 꼭 제가 아니어도 님들이 알고 있는게 있으면 나누고 그러면 좋잖아여! ㅇㅋ? ㅂㅂ~