QtWebEngine, QtWebChannel 을 이용하여 웹 기반 어플리케이션을 만드는 방법을 공유합니다. PyCon 2018

1. PyQt로 만드는
웹기반 데스크탑 어플리케이션
임덕규 (hong18s@gmail.com)

2. 안녕하세요.
임덕규 입니다.

3. PyCon 2015
업무에서 빠르게 만들어
사용하는 PyQt 프로그래밍
PyCon 2017
예제로 살펴보는 PyQt
https://www.youtube.com/watch?v=UHqZMRbHcvc
https://www.youtube.com/watch?v=YUdlGBAPNrU

4. 발표 구성
이 발표를 왜 하게 되었나
QWebEngine
QWebChannel
시연 영상
질문과답변

5. 발표 이해를 위한 사전 지식
Python
PyQt
Web(HTML, CSS, Javascript)

6. opentutorials.org
예제로 배우는 PyQt
https://opentutorials.org/module/544
예제 코드는 GitHub를 통해서 모두 공개
https://github.com/RavenKyu/OpenTutorials_PyQt

7. 자바스크립트 생태계의 빅뱅

8. 크로스 플랫폼 데스크탑 앱의 등장
Electron, 그 외...

9. 수 많은
웹디자이너와 웹개발자가 만들어낸
환상의 콜라보를 꽁으로
우리가 같이 쓸 수 없을까?

10. PyQt
Python 사용
상대적으로 나쁘지 않은 개발환경
크로스 플랫폼 지원
지난 세대 디자인
부족한 위젯 모듈

11. PyQt + Web 으로 무엇을 할 수 있을까?
데이터 분석은 파이썬, 표현은 웹
기존 웹을 설치형 앱으로 전환
웹 라이브러리를 이용한 데스크탑 앱 개발

12. PyQt에서 Blockly 사용하기

13. QtWebEngine
Web을 보여줄 수 있는 Qt Widget
Qt4, Qt5 이후에도 빠르게 변하고 있는 모듈
예제 코드
https://github.com/RavenKyu/OpenTutorials_PyQt/blob/master/QtFramework/QtWidgets/QWebEngineView/
QWebEngineView_00_basic.py

15. Chrome을 통한 웹 디버깅
QtWebEngine은 크로미움 기반
실행시 옵션 추가 또는 코드 추가
sys.argv.append("--remote-debugging-port=8000")

17. 간단한 웹브라우져 만들기
네비게이션바, 웹 표출단, 상태바
탭기능, 다운로드페이지, 즐겨찾기, 개발자 도구
예제 코드
https://github.com/RavenKyu/OpenTutorials_PyQt/blob/master/QtFramework/QtWidgets/QWebEngineView/
QWebEngineView_03_simple_web_browser.py

19. 웹 요청 처리
새 창, 탭 생성 요청 예제코드
닫기 요청 예제코드
다운로드 요청 예제코드
프린터 사용 요청 예제코드
Flash 사용 허가 예제코드
경고창 변경 예제코드
각 웹 요청 처리 코드를 위해서
QWebEngineView 상속을 하거나 시그널 처리 또는 자바스크립트 코드를 강제 삽입해야 한다.

20. QWebChannel
PyQt와 Web을 서로 이어주는 역할
데이터를 전달하고 기능을 호출할 수 있다.
예제 코드
https://github.com/RavenKyu/OpenTutorials_PyQt/blob/master/QtFramework/QtWidgets/QWebEngineView/
QWebEngineView_02_WebChannel.py

22. QWebChannel 동작 개요
qwebchannel.js
호출
기능
HTMLQWebEngineView QObject
QWebChannel Handler
호출
기능

23. 웹을 불러온 이후 웹에
QWebChannel 삽입하기
웹브라우저 사용과 아닌 경우를 분리
예제 코드
https://github.com/RavenKyu/OpenTutorials_PyQt/blob/master/QtFramework/QtWidgets/QWebEngineView/
QWebEngineView_07_print_request.py

24. QWebChannel에서
사용되는 데이터 타입
QJsonValue ,QJsonDocument
타입을 지키지 않으면 데이터를 주고 받을 수 없다.
예제 코드
https://github.com/RavenKyu/OpenTutorials_PyQt/blob/master/QtFramework/QtWidgets/QWebEngineView/
QWebEngineView_09_WebChannelDataType.py

25. 질문과 대답
hong18s@gmail.com 또는
https://opentutorials.org/module/544 에서
해당 토픽 댓글에 질문 부탁드립니다.
시간 관계상 담지 못했던 것
컨택스트 메뉴 변경
QtDesigner 위젯 Promote와 고찰
pyinstaller를 통한 패키징