9. 웹 서비스 만들기(push 데이터 기반)

좀 더 많은 정보를 크롤링 하기 위해 크롤러를 아래와 같이 수정하였습니다. 해당 파일이 어떻게 작동하는지는 colab에서 아래 노트를 열어 확인해주세요.


import requests
from bs4 import BeautifulSoup
import csv
import json

response = requests.get("http://paullab.synology.me/stock.html")

response.encoding = 'utf-8'
html = response.text

soup = BeautifulSoup(html, 'html.parser')

oneStep = soup.select('.main')[2]
twoStep = oneStep.select('tbody > tr')[1:]

날짜 = []
종가 = []
전일비 = []
거래량 = []

#################################
# 파일을 1개로 합친 이유 : 1번 크롤링 해서 모든 정보를 뽑아올 수 있기 때문
# 해당 서버의 부하를 줄이기 위해서 입니다.

시가총액 = soup.select('#_market_sum')[0].text
시가총액순위 = soup.select('#_market_sum')[1].text
상장주식수 = soup.select('#_market_sum')[2].text
나머지값 = soup.select('tr > td')
배당수익률 = 나머지값[5].text.strip()
매출 = 나머지값[6].text
비용 = 나머지값[7].text
순익 = 나머지값[8].text

##################################

for i in twoStep:
    날짜.append(i.select('td')[0].text)
    종가.append(int(i.select('td')[1].text.replace(',', '')))
    전일비.append(int(i.select('td')[2].text.replace(',', '')))
    거래량.append(int(i.select('td')[6].text.replace(',', '')))

l = []

for i in range(len(날짜)):
    l.append({
        '날짜':날짜[i],
        '종가':종가[i],
        '전일비':전일비[i],
        '거래량':거래량[i],
        })

#파일을 한 번 쓴다.
with open('data.js', "w", encoding="UTF-8-sig") as f_write:
    json.dump(l, f_write, ensure_ascii=False, indent=4)

#파일을 다시 읽는다.
data = ""
with open('data.js', "r", encoding="UTF-8-sig") as f:
    line = f.readline()
    while line:
        data += line
        line = f.readline()

#파일에 변수명을 추가하여 다시 쓴다.

final_data = f"var data = {data};"
final_data = f"var 시가총액 = '{시가총액}';\n\
var 시가총액순위 = '{시가총액순위}';\n\
var 상장주식수 = '{상장주식수}';\n\
var 배당수익률 = '{배당수익률}';\n\
var 매출 = '{매출}';\n\
var 비용 = '{비용}';\n\
var 순익 = '{순익}';\n\
" + final_data

with open('data.js', "w", encoding="UTF-8-sig") as f_write:
    f_write.write(final_data)

test.py 파일을 아래와 같이 수정한 후 commit합니다.

commit 한 후 actions에서 제대로 작동하는지 확인합니다. 현재 yml파일은 push로 작동하게 되어 있습니다.

현재 repo에 제대로 data.js 파일이 생성되었는지 확인합니다.

이제 해당 파일을 시각화할 index.html 파일을 만듭니다. 해당 파일은 로컬에서 만들도록 하겠습니다. html파일 코드는 아래와 같습니다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Github Action</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Github Action Crawling Page</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarScroll">
            <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Github repo</a>
              </li>
            </ul>
            <form class="d-flex">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
      <br>
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="card border-dark mb-3">
                    <div class="card-header">기본 정보</div>
                    <div class="card-body text-dark">
                      <h5 class="card-title">기본 정보</h5>
                      <p class="card-text">
                          <p id="시가총액"></p>
                          <p id="시가총액순위"></p>
                          <p id="상장주식수"></p>
                          <p id="배당수익률"></p>
                          <p id="매출"></p>
                          <p id="비용"></p>
                          <p id="순익"></p>
                      </p>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card border-dark mb-3">
                    <div class="card-header">주가 차트</div>
                    <div class="card-body text-dark">
                      <h5 class="card-title">기본 정보 크롤링 Chart</h5>
                      <p class="card-text">
                        <div>
                            <canvas id="canvas"></canvas>
                        </div>
                      </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card border-dark mb-3">
                    <div class="card-header">일일 상세 정보</div>
                    <div class="card-body text-dark">
                      <h5 class="card-title">Dark card title</h5>
                      <p class="card-text">
                          <table class="table">
                              <thead>
                                <tr>
                                    <th>날짜</th>
                                    <th>종가</th>
                                    <th>전일비</th>
                                    <th>거래량</th>
                                </tr>
                              </thead>
                              <tbody>
                              </tbody>
                          </table>
                      </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="data.js"></script>
<script>
    document.getElementById('시가총액').innerHTML = '시가총액 : ' + 시가총액
    document.getElementById('시가총액순위').innerHTML = '시가총액순위 : ' + 시가총액순위
    document.getElementById('상장주식수').innerHTML = '상장주식수 : ' + 상장주식수
    document.getElementById('배당수익률').innerHTML = '배당수익률 : ' + 배당수익률
    document.getElementById('매출').innerHTML = '매출 : ' + 매출
    document.getElementById('비용').innerHTML = '비용 : ' + 비용
    document.getElementById('순익').innerHTML = '순익 : ' + 순익

    let tableBodyData = [];
    for (let variable of data) {
        tableBodyData.push(`
            <tr>
                <td>${variable.날짜}</td>
                <td>${variable.종가}</td>
                <td>${variable.전일비}</td>
                <td>${variable.거래량}</td>
            </tr>
        `);
    }
    document.querySelector('.table > tbody').innerHTML = tableBodyData.join('');
</script>
<script>
    let labels_chart_input = [];
    let data_chart_input = [];
    for (let variable of data) {
        labels_chart_input.push(variable.날짜)
        data_chart_input.push(variable.종가)
    }
	var config = {
		type: 'line',
		data: {
			labels: labels_chart_input,
			datasets: [{
				label: '종가',
				backgroundColor: 'red',
				borderColor: 'red',
				fill: false,
				data: data_chart_input,
			}]
		},
		options: {
			responsive: true,
			title: {
				display: true,
				text: '데이터 시각화'
			},
			scales: {
				xAxes: [{
					display: true,
				}],
			}
		}
	};

	window.onload = function() {
		var ctx = document.getElementById('canvas').getContext('2d');
		window.myLine = new Chart(ctx, config);
	};
	</script>
</body>
</html>

해당 코드를 repo 안에 index.html 파일을 만들어 올려주세요. 이제 이 파일에 사용자가 접근할 수 있도록 호스팅 기능을 추가할 것입니다. settings 탭에서 아래 순서대로 클릭해주세요.

settings 탭에서 아래로 스크롤을 내려보시면 Github Pages 섹션이 있습니다. None이라고 되어 있는 부분을 클릭하고 main을 선택해주세요.

선택이 되었다면 옆에 save 버튼이 나옵니다. save를 눌러주세요.

save를 눌렀다면 여러분의 url이 상단에 뜹니다. 시간이 조금 걸릴 수도 있습니다. 클릭하면 여러분 repo에 있는 index.html로 이동합니다.

호스팅 url : https://paullabkorea.github.io/recordGithubAction/

지금까지 작성된 code : https://github.com/paullabkorea/recordGithubAction