WebServer 만들기(웹서버로 AP 설정하기-1) by Arduino library

IOT제품을 만들려면, 처음 제품을 받았을때 집안의 AP와 연결을 해주어야 합니다.

그러기 위해서 ESP8266을 AP모드의 SERVER로 설정하여 집안의 AP정보를 입력해주어야 합니다.

android app을 이용하여 ESP8266에 AP정보를 전달하는 것은 이전에 해보았는데

이번에는 WEBSERVER를 이용해 보겠습니다.

android app을 이용한 포스트 가기!!

예제소스 다운로드

먼저 헤더파일부터 추가시키고 클래스를 선언해줍니다.

#include <ESP8266WebServer.h>
 
ESP8266WebServer Web(80);

Line 3 : 보통은 웹서버의 포트를 80으로 쓰기때문에 80으로 설정했습니다.(변경 가능합니다.)

그리고 만약에 포트를 넣지않으면 자동 80번입이다. 

ESP8266WebServer.h에 80번 기본 설정되어 있습니다.

다음으로 Webpage를 만들고 설정을 해줍니다.

ESP8266WebServer Web(80);
 
Web.on("/",indexpage);
Web.on("/save",savepage);
Web.begin();

Line 3~4 : WebPage 설정부분입니다.

Line 3 : WebPage의 루트(/)는 indexpage라는 함수에 정의되어 있고,

Line 4 : /save 는 savepage라는 함수에 정의되어 있습니다.

Line 5 : 정의를 한 다음 begin메소드를 사용하여 준비시킵니다.

여기까지는 setup() 안에서 해주면 됩니다.

void indexpage() {
  Web.send(200, "text/html", "<p>JME PLUG Wifi(AP) Setting!!<p></br><form method='post' action='save'>
    SSID<input type='text' name='ssid' ></br>
    PASSWORD<input type='text' name='pw' ></br>
    <input type='submit' value='Save'></form>");
}

이 부분이 루트(/)페이지 입니다.

기본적으로 html을 알아야 사용 할 수 있겠네요.

void savepage() {
  Web.send(200, "text/html", "<p>Your AP information is saved successfully<p></br>");
  String rcvSSID=Web.arg("ssid");
  String rcvPW=Web.arg("pw");
  int lengthSSID=rcvSSID.length();
  int lengthPW=rcvPW.length();
  Serial1.print("ssid=");
  Serial1.println(rcvSSID);
  Serial1.print("password=");
  Serial1.println(rcvPW);  
  const char* sid=rcvSSID.c_str();
  const char* pid=rcvPW.c_str();
  EEPROM.write(addr_mode,station);    
  for(int i=0;i<lengthSSID;i++){
    EEPROM.write(addr_ssid+i,sid[i]); 
      Serial1.print(sid[i]);   
  }
  for(int i=0;i<lengthPW;i++){
      EEPROM.write(addr_pwd+i,pid[i]);
      Serial1.print(pid[i]);
  }    
  EEPROM.write(addr_ssid_length,lengthSSID);
  EEPROM.write(addr_pwd_length,lengthPW);   
  EEPROM.commit(); 
  Serial1.println("JME Plug reboot");
  EspClass esp;
  esp.restart(); 
 }

그리고 위 코드가 savepage입니다.

웹에 띄워주는 부분은 Line 2이며, 그 밑으로는 ESP8266 내부적으로 돌아가는 부분입니다.

여기까지 하고 돌리면 웹서버가 동작하지 않습니다.

가장 중요한건 이 부분인데 loop()에 넣어주시면 됩니다.

Web.handleClient();

여기까지 하시면 웹페이지를 보실 수 있습니다.

WIFI를 통하여 ESP8266에 접속합니다.

접속을 하시면 SSID와 PASSWORD를 적는 곳 나옵니다.

적어준 후 Save버튼을 클릭합니다.

페이지가 이동되면서 저장이 되었다는 문구가 나타납니다.

UART로 연결된 debug 메세지입니다.

루트(/)에서 입력한 SSID와 PASSWORD값이 정확히 전달되었음을 알 수 있습니다.

사실 이 소스코드를 그대로 사용하는데에는 무리가 있습니다.

집안의 SSID를 알고있으면 상관이 없지만, SSID의 이름을 실수로 한글자만 틀려도 접속이 안됩니다.

다음 포스트에서는 ESP8266에서 주변 AP 리스트를 검색하여 선택한 후 접속하는 방법으로 해보겠습니다.