웹서버로 보고서 구현(flask) / 루커 스튜디오 실습 및 데이터 소스 연결

 

 

 

웹서버(flask)로 보고서 구현하기

 

연습1)

site1.zip

0.01MB

 

HTML은 문서의 구조(뼈대) 부분이며 CSS는 문서의 디자인 요소, 자바스크립트는 동적특성부여. (클릭, 입력 등 사용자의 행동에 따라 변화하거나 반응하는 기능)

 

위 파일에서 analysis.html 파일은 자바스크립트 코드도 포함되어 있다. (analysis.html은 index.html과 마찬가지로 templates 폴더에 넣으면 된다.

 

위 그림의 플라스크 기본 규격은 만든사람이 정해놓은 규칙과도 같다.

 

터미널을 열고 MariaDB를 실행하여 플라스크의 기본 규격에 맞게 폴더를 만들고 폴더권한을 부여한 다음, 해당폴더에 파일질라로 파일을 옮겨놓고 python3 app.py를 입력하면 웹에서 확인이 가능하다. (주소는 http://vm외부ip주소:포트번호)

 

 

 

※ chart.js 웹사이트에 들어가면 다양한 그래프 샘플의 오픈소스 코드를 참고할 수 있다.

 

 

연습2)

site 2.zip

0.00MB

 

위 zip파일에서 index.html은 자바스크립트, CSS, html 이 다 통합되어 있다.

 

 

 

 

변형연습)

textData.py파일과 index.html파일을 수정해서 변형연습을 해보았는데 쉽지 않았다. 많은 연습이 필요할 듯 하다.

 

 

 

 

 

루커 스튜디오 실습

 

루커 스튜디오 google sheet로 연결

 

구글 시트에서 만든 데이터를 루커 스튜디오에서 '데이터 추가'를 클릭해 불러온다.

 

 

필터 및 날짜 범위 추가

 

      대시보드 상단에 컨트롤 추가를 눌러 드롭다운 목록을 클릭한다.

      날짜범위를 추가하려면 기간컨트롤을 클릭한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

그래프를 그려보며 실습해보기

 

 

 

 

루커 스튜디오 MariaDB 연동

※ DB 밖에서 연동하려면 보안설정을 열어줘야 된다.

 

 

1단계. GCP에서 새로 VM인스턴스 만들고 Maria DB 설치, 사용자계정만들고 DB 만들기 / 테이블 만들기

 

cd /

cd var

그 다음 MariaDB 설치명령 각각 입력

 

< MariaDB 속성 설치명령 >

sudo apt update && sudo apt upgrade

sudo apt-get install mariadb-server

 

 

차례대로 입력하여 DB생성 및 사용자 계정생성

sudo mysql -u root     - 루트로 mariaDB 접속
CREATE USER '사용자이름'@''localhost' IDENTIFIED BY '비밀번호';     - 사용자 계정생성
CREATE DATABASE backend default CHARACTER SET UTF8;     - DB생성
use backend;     - DB이용
GRANT ALL PRIVILEGES ON backend.* TO gabkeun@localhost IDENTIFIED BY '1234';    - DB에 권한부여

다시 eixt로 나갔다가 다시 만든 사용자 계정으로 mysql 로그인한 다음 테이블 생성

CREATE TABLE student_scores (
    student_id INT AUTO_INCREMENT PRIMARY KEY,  -- 학생 고유 ID
    student_name VARCHAR(100) NOT NULL,         -- 학생 이름
    class_name VARCHAR(50) NOT NULL,            -- 반 이름
    subject_name VARCHAR(50) NOT NULL,          -- 과목 이름
    score INT NOT NULL,                         -- 점수
    exam_date DATE                              -- 시험 날짜
);

INSERT INTO student_scores (student_name, class_name, subject_name, score, exam_date)
VALUES
('김철수', '1학년 A반', '수학', 85, '2025-01-01'),
('이영희', '1학년 A반', '영어', 90, '2025-01-02'),
('박민수', '1학년 B반', '국어', 78, '2025-01-03'),
('최지훈', '2학년 A반', '과학', 88, '2025-01-04'),
('정수현', '2학년 B반', '사회', 92, '2025-01-05'),
('김철수', '1학년 A반', '영어', 75, '2025-01-06'),
('이영희', '1학년 A반', '수학', 82, '2025-01-07'),
('박민수', '1학년 B반', '사회', 80, '2025-01-08'),
('최지훈', '2학년 A반', '국어', 89, '2025-01-09'),
('정수현', '2학년 B반', '과학', 95, '2025-01-10');

 

SELECT * FROM student_scores; 입력하여 생성한 테이블 내용 확인

 

 

2단계. MariaDB의 원격 접속 설정

 

 

1) sudo nano /etc/mysql/mariadb.conf.d/50-server.cnf  입력 (우분투에서 사용하는 편집기)

 

그럼 설정창이 뜬다.

 

 

2) bind-address = 0.0.0.0  으로 수정 후 ctrl + o 누르고 enter. 그다음 ctrl + x

(모든 네트워크를 열어놓겠다.)    - MariaDB 설정파일 수정

 

3) 다시 sudo nano /etc/mysql/mariadb.conf.d/50-server.cnf 입력하여 [mysqld] 밑에 skip-name-resolve 입력하고 ctrl + o 누르고 엔터. 그 다음 ctrl + x (저장하고 나가기)    - DNS확인 비활성화 설정

 

※ 포트번호 기억해둔다. (port - 3306)

 

4) 다음 명령어를 각각 입력하여 MariaDB 사용자 원격접속 권한 부여 (외부 계정생성 및 적용)

GRANT ALL PRIVILEGES ON backend.* TO 'looker_user'@'%' IDENTIFIED BY '1234';       - %는 모든 주소 의미

FLUSH PRIVILEGES;

 

5) 다음 명령어 입력하여 MariaDB 재시작

sudo systemctl restart mariadb

 

 

3단계. 루커 스튜디오에서 MariaDB 데이터 불러오기

루커 스튜디오에서 새 보고서 만들어서 보고서에 '데이터 추가' 하여 돌고래 아이콘 있는 mysql 선택.

호스트 이름 또는 ip → gcp vm 인스턴스 외부 ip 입력

포트 → 아까 편집기에서 보았던 3306 입력

데이터베이스 → 아까 만들었던 데이터베이스 이름 입력 (backend)

사용자 이름 → 외부계정 생성한 이름 입력 (looker_user)

비밀번호 → 외부계정 비밀번호  

 

※SSL은 절대 체크하면 안됨. http:// 사용하기 때문.

 

 

사용할 테이블 고르고 나면 루커 스튜디오로 MariaDB 테이블 데이터가 연동된 것을 확인할 수 있다.

 

 

 

MariaDB와 연동하여 루커스튜디오에서 연습해보기

 

※ 부서별 근태현황 작성할 때 지각, 출근, 결근 별로 분류하는 법.

 

1) 새 측정값 추가 버튼 클릭

2) 출근, 지각, 결근 인원 계산식 각각 입력해 추가. (새 측정값 3개 생성)

 

출근 인원 계산식

COUNT(CASE WHEN status = "출근" THEN employee_name END)

 

지각 인원 계산식

COUNT(CASE WHEN status = "지각" THEN employee_name END)

 

결근 인원 계산식

COUNT(CASE WHEN status = "결근" THEN employee_name END)