IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용)

워드프레스로 사물인터넷 웹서버 구축하고자 합니다.

Mot 소그룹 wemakers에서 공동프로젝트로 진행했던, 미세먼지 측정장치의 측정결과를 웹 서비스하는방법에 대해 정리해 보도록 하겠습니다.

기존에 측정결과를 

 - 집안 인터넷에 연결된 "라즈베리파이"를 서버로 구축

 - 집안 인터엣에 연결된 " 노트북 " 을 서버로 구축 하는 방법에 대해서는 이전글을 통해 소개를 한바가 있습니다.

이번글에서는

 - CAFE24에 미세먼지 측정결과 서비스 서버를 구축하고, 웹프로그래밍은 워드프레스로 하도록 하겠습니다.

 - 웹 프로그래밍을 배워가면서 처음부터 끝까지 코딩으로 직접해봤지만, 맘에드는 홈페이지를 구축하기위해선  웹프로그래밍 역량+디자인감각이 중요하다는것을 다시한번 느끼게 되었습니다.

 - 결론은 웹프로그래밍을 도와주는 TOOLS 이 필요함을 느끼게 되었고, 바람님/기획실장님이 추천해주신 워드프레스를 이용하게 되었습니다.

글의순서는 아래와 같습니다.

1.워드프레스 웹 서버 만들기

2.미세먼지 DATA를 워드프레스 data base "mysql"에 저장하기

3.next step

 - mysql에 쌓인 data를 웹에서 보여주기

 - 홈페이지에 측정data service 하기

[워드프레스 웹 서버 만들기]

1. cafe24 가입

2. 워드프레스 설치하기 : 아래 청색 박스 클릭

3. 플러그인 설치하기 

 - 많은 플러그인중에서 우선 망보드 를 설치했습니다.

 - 홈페이지를 구축하는데 필요한 게시판,자료실등이 사용자가 원하는 대로 조정할수있도록  플렉시블 하고, 무료입니다.

3. 테마 설치하기

 - 많은 유료,무료 테마가 있습니다.

 - 그중에 무료테마 Twenty sixteen 테마를 선택함(홈페이지 목적,취향에 맞는 테마)

3. 페이지(page) 만들기

 - 페이지를 만들어 놓고, 메뉴등에 등록해서 홈페이지에 나타낼수 있습니다.

 - 만드는 방법은

   . 새페이지 추가

   . 새페이지 내용에 망보드의 아래 타입을 복사한다. 복사를 하게되면 새 페이지가 망보드의 속성을 이어받게 된다.

     즉 자료실 타입을 복사하면, 실제로 자료를 등록,삭제등을 할수있는 기능을 가진 페이지로 변하게 된다.

   . 물론 내용에 복사하지 않으면, 공란으로 남게 되고, 이 공란에 자신이 원하는 php를 프로그래밍을 하면 된다.

   . 페이지 하나에 망보드 게시판 하나씩을 만들어야만, posting한 내용이 각각 페이지에 들어가게된다.

     그렇치 않으면 하나의 post가 중복해서 페이지에 나타나게 된다.

 - 망보드 게시판 타입

      자료실: [mb_board name="gallery" style=""]

 - 만든 페이지 모습(갤러리, 미세먼지........)

4. 메뉴만들기

 - 페이지로 만들어 놓은 항목들이 , 아래 메뉴만드는 화면에 "페이지"로에 나타난다.

 - 아래 페이지에 나타난 " 전면페이지, 미세먼지....."등을 선택하고, 아래 메뉴추가 버튼을 누르면, 오른쪽 메뉴구조에 등록이 된다.

 - 메뉴설정 하단의 "기본메뉴 "를 클릭 선택한다.

 - 지금 설정한 메뉴항목들이, 홈페이지 접속시 상단 기본메뉴에 나타나게 된다

4. 홈페이지 외관모습

 - 워드프레스로 간단한 몇가지 메뉴를 만들어 봤습니다.

 - 나머지는 테마를 설치하면(twenty sixteen)디폴트로 등록되는 내용입니다.

 - 하기 기본적인 내용에

  . 회원관리

   - 등록,탈퇴등

  . 쇼핑몰

   - 결재, 구매,상품등록은  "우커머스 테마"등에 많은 기능이 있습니다, 실제로 신용카드 등록 결재를 할수있는 기능들 입니다.

  . 필요사진등으로 화면을 꾸미고, style화일을 편집해서 구성품등을 표현해 나갈수 있습니다.

 - 이와 같이 본인이 필요한 기능을 홈페이지에 만들기 위해 , 테마, 플로그인등을 설치하고, 설정해 나가면 됩니다.

  . 경우에 따라서는 유료테마, 플러그인을 사용하는경우도 있습니다.

[미세먼지 DATA를 워드프레스 data base "mysql"에 저장하기]

1. FIRM WARE 수정하기

 . 기존의 Nodemce의 펌웨를cafe24 서버에 맞도록 수정을 합니다.

 . firmware의 기능

   -. 미세먼지 센서가 측정한 결과를 웹서버로 전송하는 역할을 합니다.

      본 화일은 본인의 cafe24 웹서버와 thingspeak라는 시중의 측정data를 호스팅 서빙하는 홈페이지로 보내줍니다. thingspeak로의 송신은 테스트목적입니다.

 . PMS7003.h는 변동사항 없습니다.

 . firmware 수정부분

  --------------------------------------------------

   const char* khost = "techtogetworld.com";

   void karaClient(int pm1_0, int pm2_5, int pm10_0){

   const int httpPort =80;

    if (!client.connect(khost, httpPort)) {

     return;

     }

    String url = "/dust/dustdata.php";

  ------------------------------------------

  . source code

PMS7003s.h

sketch_oct30a_v03.ino

2. dustdata.php 수정하기

 - dustdata.php의 기능

  . node mcu에서 미세먼지 측정 data를 웹서버로 보내면,

  . dustdata.php에서 이 data를 받아서 cafe24의 data base에 저장을 하게됩니다.

 - dustdata.php의 수정내용

  -------------------------------------------

      $servername = "localhost";

$username = "  본인의 user name을 입력한다  "; ==> "root"가 아닌, 본인의 user name을 입력하시면 됩니다 ( mysql data base "id" )

$password = "비밀번호"; ==>mysql 비밀번호

$db_name = "db name"; ==> 하나의 계정에 하나의 db가 주어진다(cafe24 포함 거의 대다수의 호스팅 업체가 동일함) , 그  db 이름을 입력한다

      if( isset($_GET['dust1_0']) && isset($_GET['dust2_5']) && isset($_GET['dust10_0']))

       {

$d010=$_GET['dust1_0'];

$d025=$_GET['dust2_5'];

$d100=$_GET['dust10_0'];

// Create connection

$mysqli = mysqli_connect(localhost, user name, 비밀번호, db name ,db port); => 본인의 내용을 입력한다.

 - source code

 dustdata.php

3. MYSQL 서버에 저장된 미세먼저 측정결과 DATA

 - CAFE24 메뉴중에서 서비스접속관리=>MYSQL 웹어드민 항목클릭하여 MYSQL에 접속한다.

 - cafe24에서 부여한 db name 아래에 field를 구성한다.

   id, dt_create , 측정결과 3개

 - mysql에 저장된 미세먼지 data 모습

  . 미세먼지 측정장치를 가동시킨다.

  . 일정 시간 간격으로 data가 쌓이게 된다.  

현재까지의 홈페이지 모습은

 http://techtogetworld.com/

여기를방문하시면 보실수 있습니다.

[Next step]

 아래글은 다음 회차에 이어서 posting 하겠습니다.

 - mysql에 쌓인 data를 웹에서 보여주기

 - 홈페이지에 측정data service 하기