[Monitoring System] 7. Fast API 로 이틀만에 백엔드 구축하기(feat. Google Chart) (3) - 마침내 그래프 그리기 完

[Monitoring System] 5. Fast API 로 이틀만에 백엔드 구축하기(feat. SQLAlchemy, PostgreSQL) (1)

[Monitoring System] 6. Fast API 로 이틀만에 백엔드 구축하기(feat. SQLAlchemy, PostgreSQL) (2) - MQTT 데이터 적

 

 

지난 포스팅에서 로그인 기능을 구현하는 것까지 해봤다. 이번 시간에는 구글 차트를 이용해서 데이터를 시각화하고, 시각화 페이지를 로그인하지 않고는 보이지 않도록 해보도록 하겠다.

 

1. 페이지 열람 권한 확인하기

가장 먼저, 로그인하지 않고는 대시보드를 못보게 하기 위해서는 로그인 정보가 필요하다. 지난 포스팅에서 로그인에 성공하면 access token을 발급한 것을 기억하고 있을 것이다. 이 access token을 이용해서 현재 access token이 유효한지 확인한 후 유효하면 페이지를 보여주고, 아니면 다시 로그인 페이지로 보내주면 된다.

이제 쉽게 말한 걸 구현해보자.

먼저, access token은 쿠키 데이터에 포함되어 있다. ajax jquery에서는

$.cookie("access_token")

이렇게 받아올 수 있다. 이 내용을 header에 넣어서 서버 쪽으로 보내줘야하는데, 토큰이 jwt 혹은 OAuth에 관한 내용이라면 앞에 Bearer라는 타입을 넣어주어야한다. 전체 Ajax 함수를 짜보면 아래와 같다. 이 함수는 대시보드 로드 시에 작동해야하므로 당연히 대시보드 html 안에 삽입한다.

$(document).ready(function ($) {
      $.ajax({
        url: "<http://localhost:8000/me>",
        method: "GET",
        contentType: false,
        processData: false,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Authorization: "Bearer" + $.cookie("access_token"), // token 전달
        },
        success: function (response) {
          console.log("get Succeed!");
        },
        error: function (response) {
          alert(response.responseJSON.detail);
          location.href = "<http://localhost:8000/>"; // 권한 없으면 로그인 화면으로
        },
      });
    });

이제 "<http://localhost:8000/me>" 에 대한 서버 쪽 함수를 짜보자. 무려 세 가지 함수가 물려 있으므로 조심해서 하나씩 접근해보기로 한다.

이전에 get_current_user 라는 함수를 작성했으니, 이걸 바탕으로 한 번 짜보려고 한다. 우선 어떻게 동작했었는지 한 번 확인해보자.

async def get_current_user(token: str = Depends(get_token), db: Session = Depends(get_db)) -> models.User:
    try: 
        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
        token_data = user_schema.TokenPayload(**payload)

        if datetime.fromtimestamp(token_data.exp) < datetime.now():
            raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="Token Expired")
    except(jwt.JWTError, ValidationError):
        raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Could not validate credentials")
    
    user = user_crud.get_user_by_username(db=db, username=token_data.sub)

    if user is None:
        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Could not find user")
    
    return user

get_current_user 함수는 token을 받아서 user를 돌려주고, token이 유효하지 않거나 유저가 없으면 exception을 일으키도록 작성되어 있다. token: str = Depends(get_token) 부분은 token을 get_token 함수의 리턴값으로 갖겠다는 뜻이니 get_token 함수도 확인해보자.

def get_token(authorization: str = Header(default=None)):
    print(authorization)
    return authorization[6:]

이 함수에서는 token을 Header에서 받아와서 뒷처리 후에 리턴한다. 그렇다는 것은, 우리가 Ajax 함수로 작성한 부분에서

 			headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Authorization: "Bearer" + $.cookie("access_token"), // token 전달
        }, 

이! 부분의 Authorization 에서 가져온다는 것이다. 그럼 더 이상 추가적으로 구현할 부분은 없다. 다만 이 상관관계를 알고 있어야 localhost:8000/me 의 처리 함수를 이해할 수 있다. 그래서 이걸 어떻게 작성할 거냐면

# user info
@app.get('/me')
async def get_me(user: models.User = Depends(utils.get_current_user)):
    return user

이게 끝이다. 차근차근 되짚어보면 지금 입력으로 user가 들어가는데, get_current_user 의 리턴 값에 따른다. get_current_user은 user를 얻기 위해서 get_token을 필수적으로 불러서 token을 얻어오고, 이 token은? 우리가 request와 함께 전송한 header에 있다. 그러니까 이렇게만 해주면 끝이다!

이제 구글 차트를 그리러 가보자.

 

2. Google Chart 적용하기

구글 차트 공식문서는 여기 있다.

Google 차트 사용  |  Charts  |  Google for Developers

Google 차트 사용  |  Charts  |  Google for Developers

그 중에서도 이 모니터링 시스템에 적합하겠다 싶은 것이 영역 차트라서, 그걸 사용하기로 결정했다. 어느정도 사용법은 제너럴하고 데이터 타입만 맞춰주면 되므로 각자 알맞는 차트를 선택하면 되겠다.

시각화: 영역 차트  |  Charts  |  Google for Developers

시각화: 영역 차트  |  Charts  |  Google for Developers

head 부분에 스크립트를 추가하는 것을 잊지 말자.

<script
  type="text/javascript"
  src="https://www.gstatic.com/charts/loader.js"
></script>

차트를 그릴 때는 option을 설정해야한다. 그릴 데이터가 하나라면 상관없지만, 아니라면 option을 데이터마다 짜주고 나중에 삽입하는 것이 편하다(객체지향의 장점 백분 살리기 프로젝트).

A. PostgreSQL 데이터를 FastAPI로 받아와서 구글 차트 그리기

option에 들어가야할 것은 데이터, 데이터 이름(차트 타이틀), document 식별자, plotting option이다. 예시를 한 번 보자.

var chartOption = function (target, color, name, measure) {
      this.name = name; // 데이터 이름(표 타이틀)
      this.target = target; // document 식별자
      this.data = null; // 데이터
      this.chart = null;
      this.options = { // 차트 plotting option
        legend: { position: "none" },
        colors: [color],
        title: name,
        titleTextStyle: {
          fontSize: 17,
          bold: true,
          italic: true,
        },
        hAxis: { textPosition: "none" },
        vAxis: { title: name + " " + measure },
      };
    };

이 프로젝트의 경우에는 차트 옵션 객체도 함수로 구성했는데, 데이터가 당장 없는 이유는 서버에 데이터를 요청해야하기 때문이다. 옵션 객체는 아래와 같이 불렀다.

var voltage_option = new chartOption(
      "voltage_chart", // document 타겟 식별자
      "#8ECAE6", // color
      "voltage", // 이름
      "(V)" // measure(단위) 
    );

그럼 이제 차트를 그리는 함수를 만들어주어야한다. 이 함수에서는 데이터를 불러오고, 이 데이터를 구글 차트가 원하는 방식대로 적재해서 차트를 적절한 위치(document 타겟 식별자가 되겠다)에 그리기 까지 해줘야한다. 코드로 보자.

function drawChart(option) {
  var o = option;
  var data = [];
  if (o != null) {
    if (o.chart == null && o.data == null) {
      o.data = new google.visualization.DataTable();
      o.data.addColumn("string", "time");
      o.data.addColumn("number", o.name);

구글 차트는 데이터를 DataTable이라는 데이터 타입으로 전달해주기를 바란다. pandas dataframe과 비슷한 형식이다. 먼저 각자의 데이터에 맞는 column을 선언해준다. 나는 모든 데이터가 time과 data 딱 두 column으로 형성되어 있으므로 타입을 알맞게 지정해서 postgreSQL의 column과 이름을 맞춰준다(중요!)

postgreSQL 속 데이터 구조

$.ajax({
  url: "<http://localhost:8000/api/data/>" + o.name,
  method: "GET",
  async: false,
  success: function (response) {
    var degrees = response;
    if (degrees.length != 0) {
      degrees.forEach(function (el, index) {
        data.push([el["time"], el[o.name]]);
      });
    }
  },
  error: function (response) {
    data.push(["", 0]);
  },
});

다음은 데이터를 받아오는 부분이다. 이는 예에전에 구현해둔 메소드를 이용해서 가져와준다. 그리고 가져온 데이터를 dataTable 형식에 맞게 time, 그리고 data name을 활용해서 하나씩 push해서 새로운 data를 만들어준다.

   	o.data.addRows(data);
    o.chart = new google.visualization.AreaChart(
      document.getElementById(o.target)
    );
  }
  o.chart.draw(o.data, o.options);
}

그리고 미리 정의해뒀던 dataTable에 data를 row로 추가해주고, 마침내 차트를 선언한다. target으로 지정한 id 영역에 차트를 넣어주고, 데이터와 plotting option을 넣어서 draw 해주면 끝난다.

이제 작성한 함수를 적용하도록 짜보자.

var voltage_option = new chartOption( // 차트 옵션 지정
  "voltage_chart",
  "#8ECAE6",
  "voltage",
  "(V)"
);
google.charts.load("current", { packages: ["corechart"] }); // 차트 로딩
google.charts.setOnLoadCallback(function () { // load 되면 draw
  drawChart(voltage_option);
});

차트 옵션을 지정하고, 구글 차트 로딩을 위해서 라이브러리를 먼저 로딩해준다. 그리고 callback 함수를 불러서 정의한 draw chart 함수를 불러주기만 하면 끝이다.

이제 그리는 건 다 끝났다!!!!!!!!!!!!!!!!!!!! 정말 마지막으로 이 시스템은 모니터링 시스템이기 때문에 자동 업데이트 기능이 필요하니 그것만 구현해보도록 하자. 간단하다!

B. 그래프 실시간 업데이트 하기

이를 위해서는 간단한 updateChart라는 draw chart와 아주 유사한 함수 하나만 있으면 된다. 이전까지 적재되지 않은 데이터만 불러와서 다시 drawChart를 불러주는 놈이다. 구현을 보자.

function updateChart(option) {
  var o = option;
// 한 번에 보여주는 데이터 양 지정 - 15개 넘어가면 삭제
  o.data.removeRows(0, o.data.getNumberOfRows());

  $.ajax({
    url: "<http://localhost:8000/api/data/>" + o.name,
    method: "GET",
    async: false,
    success: function (response) {
      var degrees = response;
      var data = [];
      if (degrees.length != 0) {
        degrees.forEach(function (el, index) {
          data.push([el["time"], el[o.name]]);
        });
      }
      console.log(data);
      o.data.insertRows(o.data.getNumberOfRows(), data);
      drawChart(o);
    },
    error: function (response) {
      alert("Get data failed");
    },
  });
}

이 함수에서는 전체 데이터를 삭제했다가 다시 불러오는 방식으로 업데이트를 진행한다. 더 효과적으로 작성하려면 일정 갯수 이상이 되면 앞 데이터를 삭제하고 추가된 데이터는 인덱스를 전역변수로 관리해서 append 해줄 수도 있겠다.

이렇게 함수를 작성했으면 이제 interval을 설정해서 일정 시간마다 함수를 부르도록 해주면 된다.

setInterval(function () {
  updateChart(voltage_option);
  updateChart(energy_option);
  updateChart(current_option);
  updateChart(power_option);
  updateChart(pf_option);
}, 10000);

이렇게 되면 10초에 한 번씩 데이터가 업데이트 된다.

짜잔! 이렇게 하면 끝이다.

 

 

3. 마무리

모니터링 페이지를 만드는 간단한 프로젝트는 여기서 마무리 하였다. 더 복잡하게 디벨롭할 수는 있지만 지금 당장 필요한 수준은 아니고, 나중에 리팩토링만 예쁘게 잘 해두면 두고두고 쓸만한 템플릿이 될 것 같다.

실제 산업 현장에 투입되도록 하려면 관리자 페이지나 센서 제어 페이지 등도 있어야하고, 지금보다 복잡하고 디자인된 UI가 필요하겠지만 당초 목표했던 실시간 센서 데이터 모니터링의 목적은 달성했다고 볼 수 있겠다.

Fast API, PostgreSQL, Jqeury를 사용해서 만든 이 템플릿을 수정해서 추후 Elastic Search , Logstash, Kibana와 붙여 Personal Home 프로젝트를 이어가려고 한다. 이 내용은 다른 카테고리에서~!

생각했던 것보다 많은 분들이 이 시리즈를 읽어주셨는데, 모두들 이 문서가 FastAPI 입문에 도움이 되셨길 바랍니다.

읽어주셔서 감사합니다!