오늘 해볼 것은 리액트 프로젝트에 firebase를 추가해서 웹 앱 구동을 해보는 것이다. 우선 새로 만든 프로젝트로 이동 후 새로운 프로젝트 생성은 이렇게 하면 된다.(내 프로젝트 명은 기사님!!) npx create-react-app gisanim 먼저 firebase cli설치를 해놓으려고 한다. 아래 명령어로 설치를 하면 된다. cd gisanim //이동 npm install -g firebase-tools 설치가 완료되면 package.json에 해당 라이브러리들이 추가된 걸 확인할 수 있다 그렇다면 이제 Firebase로 가서 로그인 후 새로운 프로젝트를 만들어주자 좌측의 시작하기를 누르면 이런 페이지가 나오는데, 프로젝트 만들기를 눌러서 연결시킬 프로젝트를 만들어주자 블로그를 쓰면서 구글 ..

마지막 웹 페이지는 chart.js를 이용해서 멋들어지게 만들고 싶었으나, 프론트는 정말 마지막의 마지막에 완성하면서 하려고 한다. 그래서!!! 이번 글에서는 4. 웹으로 아두이노 데이터 보내기 를 마무리로 해보겠다. 저번 3. 아두이노에서 보내는 데이터는 다른 이름의 socket으로 보내기 에 이어서 웹으로 다른 이름의 socket을 만들어줬다. // index.html의 script부분 html부분에는 div태그 안에 p태그가 있고 그 부분에 온도 값을 표시해주려고 한다. 아두이노에서 랜덤한 값을 데이터로 보내주고, 웹에서 사용하는 'temp'라는 소켓으로 데이터를 보내주기 위해 잠깐 아두이노 코드를 수정해줬다. // Arduino안의 함수 void socketIOEvent(socketIOmessag..

앞의 프로젝트 준비 글에서는 라즈베리파이에서 돌릴 node.js socket.io 서버를 구현했다. 이번 글에서는 그 서버에 접속할 아두이노 Client 부분을 완성해보겠다. ㄷㄷ 목표 2. 아두이노(Client)에서 socket에서 접근 아두이노 보드는 ESP8266이 기본 탑재되어 있는 Wemos D1R1을 사용하고 있다. 5000원 미만에 pin도 넉넉하고 여러 프로젝트에서 사용하기에 편하다. webSocket을 기반으로 Socket.io가 만들어졌고 TCP를 기반으로 webSocket이 만들어졌다는데 사실 잘 모른다 이번 프로젝트에서 사용할 라이브러리는 바로 이 녀석! Markus Sattler 형님의 라이브러리인데 웹소켓 관련 별점이 제일 높다. 찾기 힘들다면 여기로 해서 zip 라이브러리를 추..

스마트팜과 연동되서 사용할 수 있는 아두이노 - websocket - Front 프로젝트를 구상했다. websocket에서 DB까지 연동되는 프로젝트인 만큼 또다시 열심히 해 보장 프로젝트 구상도 이번 프로젝트 목표 1. 라즈베리파이(Server)에서 node.js를 이용한 socket 구동 2. 아두이노(Client)에서 socket에서 접근 3. Front에서 websocket에 접근 후 아두이노에 변동사항 적용 4. DB에서 소켓 기록 확인 우선 모든 목표는 윈도우에서 테스트 후 라즈베리파이에서 최종 테스트를 마무리할 예정이다. 1. 윈도우(Server)에서 node.js를 이용한 socket 구동 윈도우에서 2가지를 준비해서 테스트해보겠다. 1. socket의 서버 부분 2. 브라우저에서 임시 테..

굉장히 중요한 부분이고 많은 분들이 어려움을 많이 겪었을 것이라 생각한다. 왜냐면 많은 한, 영문의 문서들이 컴팩트한 정보를 담고 있지도 않고 생각보다 복잡하게 설명하고 있다고 생각했다. 그래서 나는 최대한 컴팩트하고 빠르게 크로스 컴파일을 진행해보겠다. 우선 앞에서 사용하던 serialport exam을 이용해서 해당 내용들을 조금 수정하고 install이 필요한 것은 인스톨해 주겠다. ps. electron-forge는 크로스 컴파일에 관해 정보가 없어서 electron-builder로 진행한다. package.json의 devDependencies 부분에 electron-builder를 추가시키기 위해 아래 코드를 터미널에서 실행해준다. npm install --save-dev electron-bu..