파이썬으로 웹 스크레핑과 반응형 대시보드 앱 만들기(강의용)

### 파이썬 웹 스크레핑과 반응형 대시보드 앱 만들기 수업 순서 아래 총 10장으로 구성된다.

----------------------------------------------------------------------------------------------------------------------------

교재: 파이썬 웹 스크레이핑 완벽 가이드(위키북스 : https://wikibook.co.kr/pyscraping/ )

#Chapter_01_파이썬 개발환경 세팅 :

 - 실습용 작업 PC 개발환경 : 윈도10, 마이크로소프트스토어에서 Python 3.8.10설치, VS Code(강사자료실에서 다운로드)

 - 마이크로소프트에서 제공하는 개발환경 교재 : https://learn.microsoft.com/ko-kr/training/modules/python-install-vscode/ 

  - 구름 ide 클라우드에 파이썬 컨테이너생성 + 주피터 노트북 + 필요한 모듈 설치(주피터 노트북 PPT 교육용)

  - PC개발및 클라우드 구름ide와 같은 [개발 상황별 모듈설치]에 관련된 코딩은 이 문서 하단에 정리해 놓았다.

#Chapter_02_Python_Basic.ipynb :

 - 파이썬 문법 기초 익히기
#Chapter_03_function_class_module.ipynb :

 - 파이썬 함수와 클래스(모듈) 사용하기
#Chapter_04_Text_Read_Wrtie_String_Processing.ipynb :

 - 파이썬에서 파일 입출력 처리하기
#Chapter_05_NumPy_pandas.ipynb :

 - 파이썬에서 NumPy로 수식+배열 데이터처리와 Pandas로 표 데이터(2차원)처리 하기
#Chapter_06_Web_Scraping.ipynb :

 - RSS 및 웹 페이지의 태그 데이터를 스크래핑한 내용을 html로 저장 및 디자인 후 출력하기
#Chapter_07_Selenium.ipynb :

 - 동적인 웹 페이지를(예, 로그인 인증 후 화면을) 스크래핑 할 때 파이썬으로 제어하는 원격 크롬 브라우저를 셀레니엄으로 제어하기
#Chapter_08_Web_API.ipynb :

 - 네이버 API, 야후주식 등에서 제공하는 API를 이용하여 데이터를 받아서 매트랩(고정)과 플로틀리(인터렉티브) 챠트로 시각화하기
#Chapter_09_Dash_Web_App.ipynb :

 - 부트스트랩 디자인기반의 인터렉트브 액션으로 위에서 출력한 챠트 및 표를 멀티 html 페이지 에 출력하기
#Chapter_10_Kakao_API.ipynb :

 - 위에서 스크래핑한 결과 텍스트(날씨, 증권, 환율정보 등)을 파이썬 스케줄로 카카오 톡 메세지로 보내기

- 구름ide대신 koyeb 플랫폼에 배포해서 포트폴리오 문서로 만들어 제출하기.

--------------------------------------------------------------------------------------------------------------------------------------------

- 작업PC 개발환경 : 주의, 파이썬 3.12버전에서는 unicode start byte에러가 발생되기 때문에 3.8.10 으로 통일한다.(아래) 

VS Code 에서 Python 플러그인를 설치하면 Jupyter Nodebook 관련 여러개의 VS Code 확장도 설치된다.(위)

작업PC의 VS Code에서 주피터 노트북으로 강의 진행하는 과정(위)

작업PC에서는 http://17.0.0.1:8888 포트로 실행한 결과, 최초에 방화벽 [엑세스 허용]을 선택하면 됩니다.(위)

- 클라우드 개발환경 : 구름ide 클라우드 무료 파이썬 컨테이너에서 [주피터 노트북]으로 python 실습 및 웹 앱 테스트

- 클라우드 배포환경 : koyeb 클라우드 무료 플랫폼으로 제작한 파이썬 웹 앱을 배포한다.

- 구름ide에서 개발한 소스도 깃 허브에(python 3.7.4용) : https://github.com/kimilguk/python-dash/tree/master

- PC에서 개발한 소스는 깃 허브에-아래와동일(python 3.8.10용) : https://github.com/kimilguk/python-dash

- koyeb에서 배포소스는 깃 허브에-위와동일(python 3.8.16용) : https://github.com/kimilguk/python-dash/tree/koyeb

- 작업결과 : 위 강의에서 #Chapter_09장을 웹 앱으로 만들어서 아래 구름ide에서 작동하는 화면(아래)

클라우드 개발환경인 구름IDE에서실행한 결과(위)

- 구름ide URL-무료사용기간(45시간/1달)이 지나 열리지 않으면 아래 링크: https://dash-app.run.goorm.io

- koyeb 포트폴리오용 배포 플랫폼URL 링크: https://interior-sondra-kimilguk-app-99ae6359.koyeb.app/ 

- 위 코예브 플랫폼에 배포할 때 아래와 같은 잘못된 사용자라는 메시지가 나오면 실행이 안될 수 있다. 아래 순서로 해당 값을 입력하고 전송하면 3일 후에 사용가능하게 된다.(아래 4개 화면 현재 진행 중...)

코예브에서 잘못된 사용자로 인식이 되었으니, 계정 검사를 하라는 메세지이다. 위 노란색 부분을 클릭하여 계정검사를 시작한다.(위)

위 Full name 만 입력하고, 폰번호와 회사명은 비워두고 Next 버튼을 클릭한다.(위)

위 사용 목적부분에 python testing app 배포라고 적듯이 상황에 맞게 변경한다.(위)

영업일 3일 이내에 계정을 검토하겠다는 의미(위)

3일 이후 support@koyeb.com 에서 기존앱을 지웠으니 App을 새로 배포하라는 메일이 오면 사용가능하다. 만약 앱을 생성할 수 없다면, 위 처럼 문의메일을 보내서 해결한다.

- 작업결과 : 위 강의에서 #Chapter_09장을 웹 앱으로 만들어서 아래 koyeb플랫폼에서 작동하는 화면(아래)

### 구름ide 플랫폼에서 실습하는 순서(아래)

- 01. 컨테이너 생성하기 화면에서 강의용 소스를 깃허브에서 불러오기를 선택하면, GitHub 인증하기 화면이 나온다.(아래)

- 02. 깃허브 인증 후 스택을 선택하는 화면에서 Python 빈 프로젝트 및 우분투 18.04를 선택한다.(아래)

- 03. 컨테이너 실행 전 주피터 노트북 도구를 선택한 후 실행 버튼을 눌러 컨테이너를 실행한다.(아래)

 

04. 미리보기 역삼각형 메뉴 에서 실행 URL과 포트 지정 후 [등록] 버튼클릭(아래 포트 8888 주의)

8888포트와 연동된 실행 주소 확인 : https://python-dash-app.run.goorm.io

05. apps.py 파일 열고 실행 메뉴에서 [현재 파일 실행] 메뉴클릭(아래)

- 위 처럼 실행하면, 컨테이너를 나가면, 앱이 종료된다. 그래서 [실행명령 추가] 메뉴에서 서버 프로세스+백그라운드 체크로 만들어 실행한다.(아래)

06. apps.py 실행 결과(아래)

- 07. apps.py 실행 결과 웹에서 확인 https://python-dash-app.run.goorm.io/ (아래)

- 08구름ide에서 실행한 강의용 주피터 노트북 실행 화면(아래)

 

### [개발 상황별 모듈설치] 코딩에 대한 내역이다.(아래)

#### 구름ide 전용(아래 1줄)
uname -a (리눅스 버전확인)

#### 윈도우개발PC + 구름ide 리눅스 공통(아래)
python --version (파이썬버전확인 : Python 3.7.4 )
pip3 show dash(=설치된모듈명)
pip3 install dash (dash-html-components, dash-core-components, Flask, dash-table, plotly 모듈이 한꺼번에 자동으로 설치된다.
파이썬에서 위 5가지를 모듈을 사용하여 웹 페이지 앱을 구성할 수 있다.
dash-html/core-components는 웹 컨텐츠 사용, 내장된 Flask는 웹 서버, dash-table은 표 데이터 사용, plotly는 대화형 챠트 사용
)
pip3 install yfinance (야후 파이낵스에서 주식 데이터를 가져올 수 있다.)
pip3 install dash_bootstrap_components (대시보드 앱용 부트스트랩 디자인 콤포넌트 사용)
pip3 install feedparser (RSS 형식의 데이터를 파싱할 수 잇다)
pip3 install matplotlib (주피터 노트북에 데이터프레임을 그래프로 출력하게 한다.)
pip3 install IPython (주피터 노트북에 HTML 링크와 같은 효과를 줄 수 있다. from IPython.display import HTML)
-- 웹 앱은 여기까지만 외부 페키지를 설치해도 정상 작동된다. 
-- 단, 주피터 노트북에서 실습 시 에러를 방지하려면 아래 작업까지 진행한다.
(Matplotlib용 그래프에 한글 폰트 작업 시작)

#### 윈도우개발PC 전용(아래 1줄)
pip3 install ipykernel (당연히 VS Code 플러그인으로 Python 을 추가한 상태에서 설치해야 한다.)

#### 구름ide 전용 시작(아래)
apt install fonts-nanum (우분투에 한글 폰트 설치)
fc-cache -fv (우분투에 시스템에서 폰트 업데이트)
fc-list (나눔 폰트가 잘 설치되었는지 확인)
rm -rf ~/.cache/matplotlib/* (matplotlib 라이브러리의 캐시를 삭제)
Matplotlib 패키지 안에 폰트 복사 (본인의 파이썬 버전에 맞게 수정)
cp /usr/share/fonts/truetype/nanum/Nanum* /usr/local/lib/python3.7/site-packages/matplotlib/mpl-data/fonts/ttf/
앞으로 Dash-그래프 수업에서 웹 앱에서 출력할 때는 Matplotlib대신 plotly 모듈을 사용하면 한글 문제는 나타나지 않는다.
(Matplotlib용 그래프에 한글 폰트 작업 끝)
크롬 설치(아래부터는 우분투 리눅스용)
wget -q -O - dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
apt-get update
apt-get install -y google-chrome-stable
google-chrome --version (크롬 설치 확인)
wget -N https://chromedriver.storage.googleapis.com/110.0.5481.77/chromedriver_linux64.zip
unzip chromedriver_linux64.zip
mv -f chromedriver /usr/local/share/chromedriver
ln -s /usr/local/share/chromedriver /usr/local/bin/chromedriver
ln -s /usr/local/share/chromedriver /usr/bin/chromedriver
rm chromedriver_linux64.zip
apt-get update
apt-get install -y libgconf-2-4 (우분투리눅스에서 크롬브라우저 실행에 필요한 라이브러리설치)
#### 구름ide 전용 끝(위)

#### 공통: 아래 내용은 교육할 때 필요 시 설치한다.(아래)
pip3 install bs4 (BeautifulSoup 설치) 
pip3 install lxml (BeautifulSoup를 이용해 HTML 소스를 파싱
pip3 install schedule (스케줄 예약 기능을 사용할 수 있다.)

pip3 install xlrd (xls, 엑셀파일 내용을 불러올 수 있다.)
pip3 install openpyxl(xls,xlsx모두 불러올 수 있다.)

pip3 install selenium==3.14.1 (모듈의 기본 설치는 4.x 이다. 동적인 웹 페이지를 스크래핑 할 수 있다.)

 

### 배포 클라우드인 koyeb 플랫폼에서 배포하는 순서(아래)

1). 먼저 기존 소스가 있는 VS Code 에서 깃 허브아이콘 >  [다음으로 체크아웃] > + 새 분기 만들기... koyeb 브랜치 생성(아래)

 

2). 위에서 생성한 새 브랜치 소스에서 koyeb 플랫폼용으로 소스에서 추가하고, 수정한 내용정리(아래)

### koyeb 플랫폼에 배포하면서, 추가하고, 수정한 내용정리
- 파이썬 버전 지정파일 추가 : runtime.txt파일내용 python-3.8.16 (구름ide에서는 3.7.4였음.)
- 외부패키지 버전 지정파일 추가 : requirements.txt (아래 내용)
dash==2.15.0
yfinance==0.2.38
dash_bootstrap_components==1.5.0
feedparser==6.0.11
matplotlib==3.3.2
IPython==7.19.0
- 파이썬 버전이 올라가면서 아래 내용 2가지 수정됨.
- 1). exchange_rate_app.py(환율 데이터를 가져오는 웹 앱)
- 2). land_info_app.py(부동산 정보를 가져오는 웹 앱)

- 위 2개의 파일에서 df.dtypes를 object에서 datetime형식으로 바꾸는 함수의 날짜 format 을 지정하는 방식 변경됨(아래 2개)
---------------------------------------------------
# exchange_rate_app.py(환율 데이터를 가져오는 웹 앱) 소스 수정(아래)
---------------------------------------------------
# koyeb에서 에러나서 format변경
# df_exchange_rate2.index = pd.to_datetime(df_exchange_rate2.index,format='%Y-%m-%d')
df_exchange_rate2.index = pd.to_datetime(df_exchange_rate2.index,infer_datetime_format=True)
-----------------------------------------------
# land_info_app.py(부동산 정보를 가져오는 웹 앱) 소스 수정(아래)
-----------------------------------------------
# koyeb에서 에러나서 format변경
# df_rates_for_chart.index = pd.to_datetime(df_rates_for_chart.index,format='%Y-%m')
df_rates_for_chart.index = pd.to_datetime(df_rates_for_chart.index,infer_datetime_format=True)

- 주의, 위 내용 수정 후 koyeb플랫폼에 배포한 이후에는 notebook 폴더를 사용하지 않기 때문에 VS Code에서 koyeb브랜치 에서는 notebook 폴더를 지운 후 다음 깃 허브(koyeb 브랜치)에 푸시 한다. https://github.com/kimilguk/python-dash/tree/koyeb

 

3). https://www.koyeb.com/ 에 로그인 후 Create App + 버튼으로 앱 생성

3).  화면상단의 Select deployment method 배포방법 탭에서 Github 선택 후 [Install Github App]버튼을 클릭(아래)

4). 최초1회만 깃 허브 로그인 화면이 나온다.(아래)

5). 본인 깃 허브 주소와 사용할 소스의 브랜치를 선택한다.(아래)

6). 빌드 팩 화면 Configure Buildpack 아래 화살표 클릭 후 [Run command] 부분을 활성화 시키고, python apps.py 라는 실행명령을 입력한다.(아래)

7). 포트 개방 Exposed ports 아래화살표 클릭 후 포트 번호를 apps.py에서 지정한, 8888 로 입력한다.(아래)

8). 상단의 Build and deploy 버튼을 클릭하면 배포가 시작된다.(아래)

09). 실행 결과 1/1 Healthy 라고 나오면 정상 배포되었다는 표시이고, Public URL을 복사하여 크롬에서 확인해 본다.(아래)

- koyeb 플랫폼에 배포과정 끝