라즈베리파이와 안드로이드 앱, 그리고 Firebase를 이용한 백엔드 서비스 구현(로그인, 데이터 관리 등) 방법에 도움을 얻을 수 있을만한 코드를 공유합니다!

(원래는 블로그에 각 기능들에 상세하게 작성하려고 했으나 귀찮아 버린지 벌써 1년 가까이 넘었네..)

 

제가 졸업작품을 준비하면서(2021년) 초반에 작성했던 코드들입니다.

 

IoT 주제로 프로젝트를 진행하면서 라즈베리파이, 안드로이드 앱, Firebase에 관심이 있으신 분들이 많이 계실텐데 

코드를 공부하며 많은 도움이 될 수 있을거라고 생각합니다!

 

참고 링크: https://github.com/jow1025/Smart-fire-detection-system

 

GitHub - jow1025/Smart-fire-detection-system: IOT센서와 카메라를 결합한 스마트 화재감지 시스템입니다.

IOT센서와 카메라를 결합한 스마트 화재감지 시스템입니다. Contribute to jow1025/Smart-fire-detection-system development by creating an account on GitHub.

github.com

위 깃허브 링크를 통해 확인할 수 있는 기능은 다음과 같습니다.

 

1. Firebase

- 로그인/회원가입/로그인정보 재설정을 위한 메일 전송 기능

- 라즈베리파이에서 센서 데이터를 Firebase Realtime DB에 원하는 주기로, 원하는 Depth(단계)로 저장하기

- 라즈베리파이 카메라로 촬영한 사진을 Firebase Storage에 저장하기

- Storage에 저장된 사진을 외부에서 접근할 수 있는 URL를 이용하여 해당 URL을 Realtime DB에 데이터 처럼 담아서 해당 사진/동영상을 조회하기

(프로젝트를 진행하시다 보면 공감하시겠지만 센서 데이터 외에 사진/동영상 등을 Storage에 바로 담아서 앱/웹에서 꺼내는 방법보다 DB에 해당 파일의 URL을 담아서 이 URL정보를 이용하는 것이 훨씬 효율적입니다.)

- 안드로이드 앱 푸시 알람(ex. DB에 담긴 온도데이터가 특정 기준치를 넘었을 시 앱으로 알람 전송)

(수동 알람이 아닌 데이터 수치가 본인이 설정한 기준치를 넘었을 때 자동으로 알람되는 기능이기에 충분히 도움이 될거에요.)

- Firebase 사용자 권한을 설정하여 Storage에 담긴 파일의 URL를 외부에서 public으로 접근하도록 하기

(파일 접근 URL이 default는 private이기에 외부에서 접근 불가능합니다.)

 

2. Raspberry pi

- 라즈베리파이 카메라를 이용한 opencv 기반의 불꽃 인식

- 촬영한 사진을 Firebase Storage에 담고, 해당 파일의 접근 URL를 Realtime DB에 저장하기

- Flask웹서버를 이용하여 앱, 웹 등에서 원격으로 모터를 제어하여 카메라 각도 조절(로컬 서버 한정)

- 여러개의 센서를 이용하여 동시에 데이터 측정하기(아두이노+라즈베리파이)

- 멀티 쓰레드를 이용하여 원격제어/불꽃인식/사진전송/데이터 수집 등을 동시에 진행하기

 

3. 안드로이드 앱 

- Firebase Realtime DB에 저장된 센서데이터 전송받기

- MPAndroidChart 라이브러리를 활용하여 해당 데이터를 이용하여 그래프, 파이차트 등을 표현

- 앱에서 Firebase에 저장된 사진들을 조회/수정/삭제하기 

- 원격으로 라즈베리파이 모터 제어(카메라 각도 조절)

- 라즈베리파이 카메라로 찍고 있는 전방 화면 실시간 스트리밍(Mjpg streamer)

- 스트리밍 하며 불꽃을 인식하면 사진 촬영 후 Firebase에 전송

- Firebase를 이용하여 푸시알람 받기(불꽃인식, 데이터 수치 등)

 

 

4. 아두이노

- 센서로 측정한 데이터를 라즈베리파이로 전송

(wifi기능이 내장된 보드를 사용하지 않고 시리얼통신을 이용하였습니다.)

- 아두이노에서 전송되는 데이터 파싱

 

 

 

8월1일부터 9일까지 9일간의 신입 입문교육을 모두 마쳤습니다.

교육장(본사 강당) 가니까 정해진 좌석에 이름표가 올려져 있었고 저축은행 교본(매우 두꺼움;;)과 교육자료가 놓여 있었습니다. 

 

아무래도 저희 부서만 다른 건물을 쓰고 낯을 많이 가리고 술을 잘 못먹다보니 동기들이랑 많이 안친해서 걱정 많이 했는데 어지저찌 자연스레 친해진것 같습니다.

 

첫 주차에는 거의 실무 교육을 주로 들었는데, 금융업에서 배워야할 기초 지식들과 실무에 도움이 될 내용들 위주로 학습을 했습니다. 동기들 대부분이 여신영업직무라서 다들 눈이 초롱초롱한데 저는 IT라 집중이 잘 안됐습니다.. 옆자리 앉은 동기가 강사님 눈치보이니까 하품좀 적당히 하라고 한...

 

TMI) 이번 기수가 전환 합격률이 많이 낮았고, 동기들 대부분이 영업직임(IT+GS+HR+회계 빼고)

 

교육을 들으면서 가장 감사했던 것은 매일 교육시작 전에 스타벅스 음료를 한 잔씩 사주시고 항상 점심 때 맛있는 음식을 사주셨습니다. (서가앤쿡, 고오급 도시락, 미슐랭 삼계탕, 쉑쉑버거 등등..) 

하루에 커피값+식비를 계산해보니 후덜덜 하던데... 정말 애사심이 많이 올라갔습니다 ㅋㅋ;;

 

원래는 8박9일로 한국금융연수원에서 합숙 교육을 했다가 코로나 여파로 못하게 되어 아쉬웠는데, 인턴 때부터 신입 교육 때까지 정말 대접받고 회사 다닌 느낌.

 

TMI) 동기들끼리는 번개로 자기들끼리 회식 많이 하던데 난 아싸에다가 술찌라서 엄두도 못내고 안감 ㅋㅋ;

영업직무 동기들은 다 센스쟁이에다가 나만큼 낯가리는 사람 없던것 같음

 

교육 5일차에는 집으로 입사 꽃바구니랑 케이크 까지 보내주셨습니다. ( 합격하셔서 확인하세요 ㅎㅎ)

전 직장에서 꽃바구니 받은게 엊그제 같은데 벌써 두번 째 꽃바구니... 

 

그렇게 첫 주차 교육을 마치고 둘째 주(월, 화) 에는 커뮤니케이션 교육 및 팀빌딩 활동을 진행했습니다.

교육들을 때만 해도 몇번 지루할 때가 있어서 차라리 근무지 가서 일이나 빨리 배우고 싶다는 안타깝고 어리석은 생각을 잠시 했었는데,, 월요일날 딱 출근하니까 동기들이 너무 반갑고 헤어지기 싫은 느낌이 마구마구 들었습니다.....

 

돌이켜보니 영업직은 대부분 지점으로 발령되고 일부는 본사에서 영업 후선 지원으로 일을 하게 될텐데, 본사에 동기들이 있더라도 IT직무는 다른 건물을 쓰기 때문에 정말 이제는 동기들 볼 일이 많이 없을 것 같더라구요. 내색은 안했지만 동기들이랑 같이 교육받는 시간이 너무 소중하게 느껴졌어요.

 

출근할 때 지하철에서 한 두번 정도 보려나..

 

아무튼 그렇게 팀 빌딩 활동 까지 마치고 나면

 

근무지 발표+ 계약서 작성+   끝

 

아! 아쉽다 내일부터 진짜 출근이라니!!

.

..

...

....

TMI) 우리 기수부터 입행 기념으로 책 두권 독후감 제출해야함 ㅎㅎ

 

 

 

 

 

 

 

 

이전에 타기업 정규직으로 입사해서 약 5개월간 다니다가 금융권 쪽으로 취업을 위해 미래가 보장되지않은 인턴십에 지원해서 정말 2달동안 심적으로 불안하고 힘들었는데 결국 정규직 합격까지 이루어졌습니다 ㅠㅠ

 

===최종 전형===

 

1. 서류

2. AI면접

3. 1차 실무면접(+ 면접 끝나고 바로 코딩테스트 응시)

4. 2차 임원면접

5. 인턴십 진행(8주)

6. 인턴십 우수 성과자 선발

7. 한국투자금융지주 면접( 지주 회장님, 부회장님, 한국투자저축은행 대표이사님, 소속 부서 임원)

8. 최종 합격(정규직 전환)

 

 

.

.

.

특이사항) 

1. IT역량을 확인하기 위한 코딩테스트가 존재(1시간 이내였고 별로 어렵지 않으니 걱정은 안해도 될 수준)

2. 인턴 수행 후 최종 면접 대상자로 선발됐다고 해서 최종 합격이 아님

3. 입사시기에 맞물려 조금더 좋은 임금, 복지 혜택을 누릴 수 있게 됨

 

+

+

이번 기수가 유독 탈락자가 많아서 올해 하반기에 인턴 채용공고 올라올 것 같은..

 

 

'취업' 카테고리의 다른 글

한국투자저축은행 신입 교육 후기(9일간)  (16) 2022.08.09
한국투자저축은행 인턴쉽 결과!  (0) 2022.07.13

 

A, B, C, D코스가 있는데 모두 유튜브에서 확인 가능!

 

4시간의 기능 교육을 받고 가볍게 합격하고 6시간의 도로주행 교육을 받으면서도 자신에 차있었고 운전이 어렵다고 느껴지진 않았는데.. D코스에서 신호위반으로 아쉽게 실격됐습니다.. ㅠㅠ

 

 

시험을 보고 느낀 점

 

1. 교육 열심히 받고 유튜브에서 도로 코스를 여러번 돌려보고 길을 외워갔다면 어느 코스가 걸리던지 문제X

개인적으로 특별히 어려운 코스는 없고 다 거기서 거기 인 것 같습니다. (굳이 뽑자면 C코스가 제일 쉬운것 같긴하지만)

 

2. 긴장하지말자

1) 조수석에 감독관님이 앉아서 계속 채점하시고 뒷자리에 참관자(시험 응시자분)가 있어서 그런지 긴장하게됨.

2) 옆에서 계속 코칭해주시는게 익숙해져있어서 혼자 코스를 완주하는 데 긴장감을 느끼게 됨.

3) 교육 때 경험했던 교통상황이 시험 때와는 다르게 느껴지고,, 신호볼 때 헷갈리기도 함

 

3. 주위 환경 변수 ***************

1) 오늘 시험을 보니까 시험 스타트 하는 곳에 학원 셔틀버스와 앞, 뒤에 시험대기중인 차량이 있어서 약간 혼란스러움

2) 특히 시작점에서 시동 on-> D드라이브 기어 변환-> 좌측깜빡이를 켜야하는데 나같은 경우 시험 시작지점이 주차장과 너무 맞닿아 있어서 시작부터 약간 핸들꺾어서 도로와 차를 일자로 맞춰야 했는데, 핸들을 돌리는 순간 좌측 깜빡이가 꺼져서 감독관님이 바로 감점시키는 것 같았음..(차 위치를 똑바로 맞춰주던가..)

3) 아침에 비가 살짝와서 그런지 한가한 오후 2시에 시험을 치뤘음에도 교통 상황이 조금 혼잡했음(당황)

4) 신호가 빨간불에 정지 안해서 바로 실격됐는데, 그 신호대기장소가 교육중에 한번도 신호가 바껴서 정차했던 적이 없는 곳이었음(교육받은 걸 떠올리면서 감점 안당하려고 운전하다보니 운전을 하는 게 아니라 외워서 하는 느낌으로 가다보니 신호를 못본것같음)

5) 직진하고 있다가 갑자기 노란불로 바뀌면 무조건 급정거해야됨(정지선 벗어나기 직전에 노란불로 바뀐거면 직진하지만, 그런 급박한 상황이 아닌이상 빨리 정신차리고 급 정차해야됩니다. 벗어나면 바로 실격)

 

4. 채점기준이 매우 매우 까다로움 **************************

결론) 도착지점까지 60%정도 갔을 때 신호위반으로 실격됐지만 그 전 까지 완벽하게 운전했다고 생각했음에도 81점이라고 하셨습니다. (합격 기준: 70점).

 

1) 감독관님이 수기로 채점하시는데, 운전하다보면 계속 끄적이는 게 보여요. 아마 감점처리하시는 것 같았는데, 신호대기중 유턴하거나 좌회전할 때 아주 잠~~~깐이라도 머뭇거리면 바로 감점 시키는 것 같았습니다. 

 

2) 저는 시험 시작할 때 좌측 깜빡이 꺼진거랑, 도로진입 시 우회전 할 때 차가 계속 지나가길래 뒤에 오던 버스 지나갈 때 진입하려고 기어N으로 놓고 잠시 대기했는데 거기서 바로 감점시킨 것 같았습니다.(그럴거면 주행정지 20초 시 감점사항은 왜 있는 거고,, 이런 상황도 운전 미숙 감점으로 집어넣는건지...?)

 

3) 그리고 유턴할 때 횡단보도 신호 보고 잠시 N으로 놓고 정지했다가 유턴해도 되는 신호임을 확인하고 바로 유턴했는데 그거 잠깐 정지했다고 바로 또 감점 시키는 것 같았어요.. 이 때 감독관님이 종이에 끄적이시는 것 보고 순간 "시험응시료가 5만5천원이니깐 학원이 응시료로 장사를 하는건가" 싶었습니다.. 진짜로 좀 당황했어요.

 

4) 그리고 차선 변경 시 사이드미러로 뒷차량 확인하고 진입할 때 갑자기 또 종이에 체크하셨는데, 감독관님 기준에서는 제가 위험하게 진입했거나 사이드미러를 확인하는 제스처를 적극적으로 안해서 그런건지.. 자꾸 신경쓰이더라구요.

정확한 채점기준이 있는건지 그냥 진짜 감독관 case by case인지.. 저는 걍 매우매우 엄격한 감독관님 만난 것 같습니다.

 

 

결론

1. 시험볼 때 만큼은 정말 배운대로, 매우 정직하게 운전하자.

 

2. 감독관님이 "차 타세요" 라고 말할 때 바로 타면 감점 ㅋㅋ(네바퀴 다 점검하는 시늉 해야됩니다.)

 

3. 시험시작 시 본인 의지와 상관없는 주위상황 때문에 감점받는 건 어쩔 수 없음..(옆, 뒤에 다른 차량이 매우 근접해 있어서 시동 키고 차량을 좀 움직여야 할 때 깜빡이가 꺼지거나 당황타게 되는 경우)

 

4. 채점 기준이 매우 까다롭고 엄격하다.

 

5. 배운대로 운전해도 감독관님에 따라 운없으면 10점은 우습게 감점당한다. 

 

6. 최대한 한번에 붙자.. (5만 5천원... )

 

 

 

 

 

 

 

 

일주일만에 필기랑 기능시험까지 합격한 후기!

 

필기 접수: www.safedriving.or.kr

 

도로교통공단 안전운전 통합민원

 

www.safedriving.or.kr

도로교통공단 민원사이트에서 운전면허 취득을 위한 기본사항들과 준비물, 필기접수까지 가능!

***저처럼 운전면허 처음 도전하는 분들은 필기시험 전에 1시간 안전교육을 들어야하는데 그거까지 접수가능!

 

필기 장소: 강서 운전면허시험장(요즘에는 학원등록하면 학원자체적으로 필기시험까지 볼 수 있어요)

가격: 신체검사 6천원(시력검사 10초컷하고 6천원...) + 필기 접수비 만원 = 총 만6천원

 

인터넷으로 예약을 했어도 안전교육 끝나고 시험은 보려면 2층가서 다시 접수해야되요.

 

필기 공부: 운전면허 PLUS 앱 기출 풀기

시험 하루전에 5회분 기출 풀어보고 시험 치뤘는데 73점으로 합격했어요. (2종보통)

걍 이정도만 공부하고 가면 될 것 같습니다..저는 자동차에 대해 1도 모르는 상태였어요.

 

===================================================================

필기 시험 끝나고 바로 도보5분거리에 있는 서울자동차운전전문학원 등록!!

가격표 보고 깜짝놀랐습니다. 필수교육 3시간+ 기능4시간+ 도로주행6시간.. 시험비 제외 하고 교육만으로 수강료가..

 

출처: 서울자동차운전전문학원

 

부가세 별도라고 나와있죠? 636,000에서 10%추가하시면 되요 ㅋㅋㅋㅋ

총 699,600원 !!!!

 

++ 기능이랑 도로주행 때 차 보험 가입을 위해 만오천원 추가 결제(현금만됩니다..)

 

결과적으로 학원에서 결제한 금액이.. 

714,600원... (손 부들부들 떨렸습니다..)

 

++ 기능시험 합격후 현금 4천원 내고 임시 면허증 발급해야됩니당

 

 

그리고 면허시험장에서 기능, 도로주행 시험 응시료가 2만5천원인가 그랬던것같은데 여기는 둘다 55,000원 통일이니까

한번에 시험을 다 통과한다고 가정하면.. 

 

최소.. 진짜 최소로 깨지는 금액이 

 

828,600원이네요... ㅋㅋㅋㅋ 

 

=====================================================

기능 시험후기

기능의 경우 4시간을 교육받고 시험을 치르게 되는데요.

전에 기능시험이 어려워졌다고해서 얼마나 어려운지 블로그 검색 많이 했는데 

한번에 통과한 분들이 생각보다 별로 없더라구요?ㅋㅋㅋㅋ; 그래서 저도 긴장많이했습니다.

 

근데 저는 교육받으면서 느꼈던게, 가장 어렵다고 불리우는 직각주차는 공식대로만 하면 한번도 실수안하고 누구나 통과할 수있다고 느꼈어요. 직각주차에서 실격하거나 점수 까먹는게 공식대로 하지 않는 경우 말고는 존재하지 않는 것 같거든요..

저도 직각주차만 10번 조금 넘게 연습했던 것같은데 한번도 실수한적이 없었어요.

(유튜브나 다른 블로그에 주차 공식 많이 나와 있으니 굳이 설명은 안드릴께요.)

오히려 가장어려웠던건 우회전하고 핸들 풀 때 도로랑 일짜가 안되서 왔다리갔다리 했던것??

아무튼 비법같은건 없고 그냥 강사님이 알려주신 그대로 운전하시면 됩니다.

저는 교육 끝나고 다음날 바로 시험 봤는데 무난하게 합격했습니다.

 

++++

저도 그랬고 많은 분들도 수강료 때문에 유튜브 보고 기능시험 또는 도로주행까지 독학하겠다는 분들이 계실텐데

제 생각에는 매우 비추입니다.

핸들을 잡아 보지 않고는 절대 절대 한번에 합격할 수 없을 것 같다고 느꼈어요.

공식대로 직각주차 하더라도 변수가 되게 많죠. 핸들 꺾다가 탈선되거나 시간 초과한다거나....

시험 5번, 10번 보면서 감 찾아서 싸게싸게 하겠다는 분들도 계실텐데 절대 비추합니다. 강사님들이 되게 친절하게 알려주시는데 그런거 무시 못하는것 같아요. 저도 좋은 강사님 만나서 핸들링 할 때 감각 익히는데 엄청 큰 도움 얻었어요.

 

결론: 비싸지만 학원 다니고 빠르게 끝내버리자!

 

=========================================================================================

기능 시험 합격하면 데스크에서 4천원내고 연습면허를 발급해주고(도로주행 교육 때 준대요.)

바로 도로주행 교육 일정을 예약하게 됩니다. 저는 내일부터 교육이에요!

 

 

p.s) 

블로그 후기들 보면 되게 불친절한 강사님들 많다는 글이 많은데, 저같은 경우 모두 친절하셨고 많이 알려주셨어요. 시간에 맞게 강사님이 배치되는 시스템이다보니 특정 강사님으로 예약할 순 없는 것같아요.

 

 

 

 

 

 

 

 

5월부터 6월말까지 약 2달간 열심히 했는데...!!

인턴십 우수자로 선정되어 다음주 한국투자금융지주 최종 면접 치르게되었습니다!!

경동나비엔에서 5개월 조금 안되게 다니다가 휴식 기간없이 바로 인턴쉽하게 된것도 운이좋다고 생각했는데

인턴쉽 결과도 좋게나와서 이제 진짜 최종 면접만 보면 끝이구나 ... 라는 생각이 드네요..

 

전체동기 30명으로 놓고보면  지점영업에서 4~5명정도 탈락한 것 같아요..인사팀에서 말한 전환률 딱 그정도로 합/불이 갈린것 같습니다.

 

 

p.s)

IT 6명 동기 중 한명은 중간에 나갔고(대기업 갔습니다..) 오늘 결과 발표에서 한명 떨어졌습니다.ㅠㅠ

총 4명 남았음..ㅠㅠ.. 

 

 

 

 

AWS Cloudwatch를 통해 수집하는 데이터를 aws sdk를 사용하여 코드로 제어(수집, 조회, 삭제 등)할 수 있는 기능들을 정리한 글입니다. 저는 vscode에서 javascript v3버전 sdk를 사용하였습니다.

SDK는 softwore Development Kit의 약자로 AWS의 다양한 서비스 기능들을 프로그래밍을 통해 편리하게 사용하기 위한 라이브러리를 의미합니다.

 

https://aws.amazon.com/ko/sdk-for-javascript/

https://docs.aws.amazon.com/code-samples/latest/catalog/code-catalog-javascriptv3.html

 

기본적으로 sdk for javascript를 사용하려면 로컬 환경에 node js가 설치되어 있어야합니다.

https://nodejs.org/ko/download/

 

1. aws sdk 설치

vscode의 터미널에서 npm install aws-sdk 명령어를 입력하여 설치합니다.

2. 환경변수 선언하기

윈도우 서버에 cloudwatch agent를 설치할 때 자격인증을 위해 aws accesskey와 지역을 입력했는데, 이번 실습에도 이러한 절차를 거쳐야합니다.

인증 처리를 위한 두가지 방식이 있습니다.

1. 코드에서 선언

js파일 최상단에 지역, accesskey 정보를 직접 입력합니다. 정보가 노출될 위험이 있으므로 추천하진 않습니다.

1
2
3
4
var AWS = require('aws-sdk');
AWS.config.update({region:'ap-northeast-2',accessKeyId:'엑세스 키',secretAccessKey:'시크릿 엑세스 키'});
var cloudwatch = new AWS.CloudWatch();
cs

 

2. 공유 인증 자격 증명 파일 작성

C:\Users\계정이름\.aws\credentials에 계정이름과 키 정보를 입력합니다. 기본적으로 aws sdk는 해당 디렉토리 위치에 있는 credentials를 인식합니다.

주로 쓰는 기능은 putMetric, listMetric, getMetric 메소드 등인데, getMetricData만 테스트해보겠습니다.

아래는 하루 전부터 쌓아온 데이터 목록과 값을 추출하는 코드입니다.

24시간 동안의 cloudwatchagent가 5분 마다 수집한 cpu, memory, c_disk 정보를 모두 추출합니다. 코드를 읽어보시고 비슷한 포맷으로 작성하시면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
var AWS = require('aws-sdk');
AWS.config.update({region:'ap-northeast-2'});
AWS.config.update({region:'ap-northeast-2',accessKeyId:'엑세스 키',secretAccessKey:'시크릿 엑세스 키'});
var cloudwatch = new AWS.CloudWatch();
 
var now = new Date();
var startTime = new Date(Date.parse(now) - 1 * 1000 * 60 * 60 * 24); //24시간전을 시작점으로
var params = {//params내부에 쿼리할 metric정보를 일일히 입력해야 함.
    EndTime: now,
    StartTime: startTime,
    MetricDataQueries: [ /* required */
      {
        Id: 'cpu_info'/* required */
        MetricStat: {
          Metric: { /* required */
            Dimensions: [
              {
                Name: 'complexcompany'/* required */
                Value: 'zz' /* required */
              },
              /* more items */
            ],
            MetricName: 'cpu_time',  
            Namespace: 'plo2'
          },
          Period: 300/* required */
          Stat: 'Average',/* required */
          Unit:'Percent'
        },
        ReturnData: true 
      },
      {
        Id: 'mem_info'/* required */
        MetricStat: {
          Metric: { /* required */
            Dimensions: [
              {
                Name: 'complexcompany'/* required */
                Value: 'zz' /* required */
              },
              /* more items */
            ],
            MetricName: 'memory_used_percent',  
            Namespace: 'plo2'
          },
          Period: 300/* required */
          Stat: 'Average',/* required */
          Unit:'Percent'
        },
        ReturnData: true 
      },
      {
        Id: 'c_drive_free_info'/* required */
        MetricStat: {
          Metric: { /* required */
            Dimensions: [
              {
                Name: 'complexcompany'/* required */
                Value: 'zz' /* required */
              },
              /* more items */
            ],
            MetricName: 'LogicalDisk % Free Space',  
            Namespace: 'plo2'
          },
          Period: 300/* required */
          Stat: 'Average',/* required */
          Unit:'Percent'
        },
        ReturnData: true 
      }
    ],
  };
  cloudwatch.getMetricData(params, function(err, data) {
    if (err) console.log(err, err.stack); // an error occurred
    else{   //console.log(data);           // successful response
 
    var start= JSON.stringify(data.MetricDataResults).indexOf("\"Values\":[");
    var end=JSON.stringify(data.MetricDataResults).indexOf(",\"StatusCode\"");
    var list=JSON.stringify(data.MetricDataResults).substring(start+10,end-1);
    
      var value_obj=JSON.parse(JSON.stringify(data.MetricDataResults));
        
         for(var i in value_obj)
             for(var index in value_obj[i].Values)
               console.log(value_obj[i].Id+" "+index+"  "+parseFloat(value_obj[i].Values[index]).toFixed(2)); //데이터가 소수점6자리까지 출력되서 2자리로 컷
        
    }
  });
  
cs

출력: cpu, memory, disk 값이 288개씩 출력됨(24시간 동안 5분단위 데이터 수집: 288개)

기본적으로 data.MetricDataResults를 stringify한 값을 json으로 파싱하여 출력하면 아래와 같이 나오는데, 위 코드는 문자열로 출력하기위해 values 부분부터 statuscode전까지(=값만 출력) 부분 파싱하여 출력시킨 예제 코드입니다.

문자열이 아닌 json 타입으로, 그리고 최신값, 특정 기간 값 등을 출력하려면 위의 코드를 조금만 수정하셔서 배열로 접근하여 출력시키면됩니다. 

이 문서를 참고하시면 좋습니다.

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CloudWatch.html#listMetrics-property

 

Class: AWS.CloudWatch — AWS SDK for JavaScript

The modular AWS SDK for JavaScript (v3), the latest major version of AWS SDK for JavaScript, is now stable and recommended for general use. For more information, see the Migration Guide and API Reference. Class: AWS.CloudWatch Inherits: AWS.Service Object

docs.aws.amazon.com

 

분류를 하자면 이번에 활용한 sdk는 back-end용이고, 서버단에서 처리하기 위한 sdk입니다. 데이터를 읽어들인다고 해도 rest api 설계나 기타 미들웨어 설계를 통해 서버-브라우저 연동 작업이 필요한데, 브라우저에서 곧바로 데이터를 fetch해와서 사용할 수 있는 브라우저용 sdk도 존재합니다. 

1
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1132.0.min.js"></script>
cs

예를들어 html이나 vue, react 등 다양한 front-end 언어로 사이트 구축 시 브라우저용 sdk를 사용하고 싶다면 html 코드안에 위 코드 한줄을 삽입한 뒤 위에서 살펴본 params코드를 추가하고나서 console.log로 찍어보면 브라우저에서 곧바로 데이터가 출력됩니다. back-end용 sdk를 사용할 경우 직접 설계한 api 호출을 통해 확인 가능한 결과물입니다.

 

Reference

https://docs.aws.amazon.com/AmazonCloudWatch/latest/APIReference/API_GetMetricData.html

https://docs.aws.amazon.com/code-samples/latest/catalog/code-catalog-javascriptv3.html

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CloudWatch.html#listMetrics-property

https://www.npmjs.com/package/aws-sdk

Microsoft에서 제공하는 데이터 시각화 도구

  • BI: 기업의 비즈니스 전략을 효율적, 효과적으로 지원하여 조직 구성원에게 적시에 의사결정을 할 수 있도록 지원하는 정보체계
  • 데이터를 분석, 시각화하여 신속한 의사결정 할 수 있도록 Insight를 제공하는 데이터 분석 서비스
  • 시각화 템플릿을 작성하여 웹/앱에서 열람할 수 있음
  • SQL, Excel,txt 등 다양한 유형의 데이터 원본 연결 및 데이터 분석 가능

Power bi 구성요소

  • 설치: Microsft store→ power bi Desktop 설치

  • power bi 화면 구성

  1. 상단 탭: 화면 구성 및 시각화와 관련된 일반적인 작업 표시
  2. 캔버스 영역: 시각화 대쉬보드를 만드는 공간
  3. 하단 탭: 보고서 페이지 탭
  4. 필터 창: 데이터 시각화를 필터링 하는 공간
  5. 시각화 창: 시각화를 추가, 변경 또는 사용자 지정할 수 있는 공간
  6. 필드 창: 쿼리를 사용할 수 있는 데이터 필드 영역(해당 필드를 캔버스, 필터, 시각화 창으로 끌어 시각화 대쉬보드를 생성할 수 있음

데이터 분석 및 시각화 절차

  • power bi Desktop에서는 load한 데이터를 바탕으로 모델링 하는 것이므로 사전에 데이터를 분석 용이하게 가공하여 사용하는 것이 효과적.
  • 데이터 유형: Excel, Text, CSV, DB, R, Python 등 다양한 유형의 데이터 원본 지원

데이터 전처리(데이터 정리 및 변환)

순서: 시각화에 이용할 데이터 파일을 쿼리 편집기로 Load하여 전처리 →  실제로 대쉬보드 구성은 데이터 편집 창의 데이터 필드를 이용하여 표현.

  1. 쿼리 편집기
    • 데이터 전처리를 위한 페이지
    • 기본적인 쿼리 기능 제공(행/열 제거, 열 분할/병합, 데이터 형식 설정, 값 채우기, 사용자 지정 열 생성 등의 기능 등)
    • 산술 연산자, 비교 연산자, 텍스트 연결 연산자, 논리 연산자 기본 제공
    • 상단 탭→ 데이터 변환→ 데이터 변환 클릭
    • DAX(Data Analysis Expression)

  2. 데이터 편집 창

  • 쿼리 편집기에서 편집한 데이터 필드를 볼 수 있음
  • 실제 시각화 대쉬보드 구성은 데이터 편집 창의 데이터 필드를 Drag &Drop 하여 구성.
  • 캔버스 영역 좌측 메뉴 → 데이터 클릭

데이터 모델링

다양한 관점으로 데이터를 탐색하기 위해 데이터를 재정의하고 조직화해 나가는 단계

  • 각각의 데이터 필드(ex 하나의 엑셀파일/DB파일)는 하나의 테이블로 구성됨.
  • 우측 필드창에서 테이블을 왼쪽으로 Drag&Drop 하여 DB다이어그램 생성 후 모델링(Default로 1:1 관계 설정됨)
  • 집계 관리(Group by, Maximum/Minimum, Sum, Table row count 제공)
  • 모델링 작업이 필요없다면 캔버스 영역에서 바로 대쉬보드 생성하면 됨.(대시보드를 구성하면 생성단계에 사용된 테이블 간 Default 1:1관계가 설정됨)

캔버스 영역 좌측 메뉴 →  모델 클릭

  • 관계 편집
    • 카디널리티 관계 설정
    • 테이블에서 특정 컬럼 삭제 
    • 쿼리 편집(→ 쿼리 편집기에서 작업)

데이터 시각화

캔버스 영역에서 우측 데이터 필드 창의 컬럼 들을 이용

순서:

  1. 시각적 개체 선택→ 데이터 컬럼을 값에 Drag
  2. 시각적 개체 서식 지정 선택 하여 위젯 세부설정(크기, 색, 제목, 데이터 수치 레이블 등)
  3. 구체적인 세부 표현이 필요한 것은 데이터 쿼리로 테이블을 update한 뒤 진행

상호작용

생성한 대시보드 위젯간에 기본적으로 상호 연동이 되어있음.

상단 탭 서식→ 상호작용 편집을 통해 각 요소 간 상호 작용을 제거할 수 있음.

 

상호작용 전

  • 전체 목록

상호작용 후(위젯의 특정 지표 클릭 시 전체 위젯들이 해당 지표로 Focus됨)

  • 2017~2019년 선택 시 

외부로 게시

상단 탭의 '게시'를 클릭하여 작업물을 외부로 공유할 수 있음.

  • 실시간 Data를 가져오는 방법
    • 기본적으로 미리 준비된 엑셀파일/DB 정보를 Fetch해오기 때문에 실제 서비스에 사용하기 위해 실시간 데이터를 불러오고 처리할 수 있는 기능이 필요.
    • Power BI는 웹 URL을 통해 REST API 호출을 지원함
    • AWS APIgateway URL 호출 예

  • 대쉬보드 실시간 새로고침
    • Pro: 하루 최대 8번(10$/month)
    • Preminum: 하루 최대 48번(20$/month)
    • 사용방안: AWS API Gateway EndPoint 호출하여 해당 value를 이용
      • Vue 대시보드 구성 시 복잡한 코딩 필요없이 power bi 링크에 저장된 대시보드만 보여줌(powe bi가 제공하는 widget만으로도 실시간 서버info 표현 충분) 
    • 확인 사항
      1. API로 호출한 JSON 데이터가 테이블에 어떻게 형성되는지?
        • test결과가 아래와 같이 출력됨

Reference

https://docs.microsoft.com/ko-kr/power-bi/fundamentals/desktop-getting-started

+ Recent posts