파이톤이지만 웹을 개발하고 싶어요~~99퍼센트는 파이톤만 있으면 웹 응용 프로그램을 만들 수 있다~

이 글은 Python Advent Calender 2021 16일째 되는 글이다.(제목을 잘못 써서 다시 썼다.)
올해 광고지도 접겠네.올해는 의기양양하게 참여해 쓰러질 것 같아 올해 열심히 만든 앱 중 하나가 공개됐다.

GitHub

전체

https://github.com/bluepost59/full_python_todo

프런트엔드만 GiitHub Pages 디자인(동작 표시)

https://bluepost59.github.io/brython_todo/
보관소: https://github.com/bluepost59/brython_todo

개시하다

"나는 파이톤만 쓸 줄 알지만, 인기 있는 웹 애플리케이션을 개발하고 싶다!"너는 그렇게 생각해 본 적이 없니?
웹 응용 개발은 웹 서버의 코드와 브라우저 측의 코드를 개발해야 한다.특히 후자는 자바스크립트가 필요한데, 파이톤과 다른 기재법과 콜백 등 자바스크립트만의 독특한 개념을 이해하기는 어려울 것 같다.
파이토후니스타의 꿈을 이루기 위해 이번에는 제목과 같이 99%의 파이톤으로 웹 앱이 입문하는 고정된 ToDo 목록을 제작한다.

백엔드:Flash

백엔드에서 Python을 사용할 때 익숙한 Flash.
모처럼 웹 애플리케이션처럼 서버 측도 Ajax 통신을 하면서 서버에 데이터를 축적하는 기회가 생겼다.초기 화면은 Flashs로 불러오고 작업이 등록되면 DB에 저장됩니다.DB에서 서버를 구축하는 것은 매우 번거롭기 때문에 SQLite를 사용해야 한다.
호스트 ")"등의 API를 제외하고 aax 통신을 받는 API를 미리 엽니다.이번에는 SQLite에서 작업 저장 API를 열고 로그인할 때만 DB에 저장합니다.DB 작업은 뷰를 그릴 때 템플릿에 포함됩니다.SQLite는 서버를 설정하지 않아도 편리합니다.
server.py

import json
from flask import Flask,Request

app = Flask(__name__)

# ビューの作成
@app.route("/")
def serve_route():
    # データベースからデータを引っ張ってくる
    conn = sqlite3.connect("todo.db")
    cursor = conn.cursor()

    cursor.execute("select title from todo")
    raw_tasks = cursor.fetchall()

    tasks = [mytask[0] for mytask in raw_tasks]

    # HTMLにtasksの内容を埋め込み、レスポンスを返す
    return render_template("main.html", tasks=tasks)

Jnja2의 template

Flash에서 Jinja2 템플릿 엔진으로 렌더링합니다.이번 ToDo 리스트처럼 가변 길이의 물건은 for링을 템플릿에 끼워 넣어도 잘 표현할 수 있다.
main.html

<div id="tasks_area" class="tasks_container">
{% for mytask in tasks%}
<div class="task">
    <input type="checkbox"></input>
    <div>{{ mytask }}</div>
</div>
{% endfor %}
</div>

프런트엔드: Brython

프런트엔드에서 Brython을 사용합니다.익숙하지 않은 것일 수도 있지만, 사실 이 라이브러리는 상당히 괜찮다. 자바스크립트는 jquery 등의 라이브러리로 이루어진ajax통신[1]도 파이톤의 표준적인 기재법으로 기술할 수 있다.
Brythhon의 문법은 Python이지만 확장자.bry로 저장하는 것을 권장합니다.특히 Flash의 경우 파이썬 코드가 모두 서버 코드로 인식되고, 확장자.py라면 브라우저 측 코드를 편집해도 서버가 정지된다.
하지만 적당한 곳이 있다.JSON을 서버에 보낼 때json.dumps 문자열로 보내지 않으면 get 조회 형식으로 보내고 서버에서 퍼스 오류가 발생합니다.
main.bry

def add_task(task_name: str):
    # POSTする
    ajax.post(
        url="http://localhost:3000/register/",
        headers={"Content-Type": "application/json", },
        data=json.dumps({"title": task_name, "detail": "detail"})
    )

    # DOM操作
    new_task_checkbox = browser.document.createElement("input")
    new_task_checkbox.type = "checkbox"

    new_task_name = browser.document.createElement("div")
    new_task_name.text = task_name

    new_task = browser.document.createElement("div")
    new_task.class_name = "task"

    new_task.appendChild(new_task_checkbox)
    new_task.appendChild(new_task_name)

    browser.document["tasks_area"].appendChild(new_task)

# 登録ボタン
@browser.bind(browser.document["new_task_register"], "click")
def register_new_task(ev):
    add_task(browser.document["new_task_input"].value)

Brython은 Python 코드를 JS에 연결하여 실행합니다.그런 의미에서'99%'를 더했다.또는 파이썬 이외에 '' 및 CSS도 반드시 손으로 써야 한다.여기는 브라우저로 이동하는 것 외에 다른 방법이 없어요...

최후

그리고 JavaScript의 엔지니어 청파 "JavaScript면 돼"
그럼에도 불구하고 자바스크립트는 초보자들에게 매우 어려운 언어라고 생각합니다.언어 규격 외에도 비동기 실행과 웹 통신의 구조를 동시에 배워야 하기 때문에 DOM을 읽게 해도 신경을 써야 한다(head 부분에 쓴 script로 쓴 문서.getElementById()면 Null이 답장...).
이 점에서 Brythhon은 비동기적으로 실행할 필요가 없기 때문에 jax를 통해 진행되는 비동기적인 통신도 일반적인 Python 코드처럼 쓸 수 있다.실용성은 물론이고 파이톤만 할 줄 아는 초보자 프로그래머에게 웹에 들어가는 것은 이해하기 쉽다.

그나저나 (홍보)

다음WEB와 데이터 분석 관련 기고문을 만나보도록 하겠습니다.에는 더 나쁜 파이톤 실행 환경[2]을 설명한다.기대하세요.
각주
그러나 최근 자바스크립트는fetch API라는 표준 언어 기능으로 aax 통신을 할 수 있다.↩︎
브라우저에서 NumPy 및 Sckit-learn을 실행합니다.큰일났다.↩︎