HTML/CSS/JavaScript를 알지 못하는 상황에서 파이톤으로 웹 응용 프로그램을 구축하고 배치합니다

55004 단어 webdevtutorialpythonbeginners
이 강좌에서 Pglet 프레임워크를 사용하여 Python에서 ToDo 웹 응용 프로그램을 만들고 인터넷에서 공유하는 방법을 보여 드리겠습니다.이 응용 프로그램은 100 lines of Python code개의 파일만 있는 단일 파일 컨트롤러 프로그램이지만 멀티 세션, 현대화된 단일 페이지 응용 프로그램으로 풍부하고 응답이 빠른 사용자 인터페이스를 갖추고 있다.
너는 현장 시연 here을 할 수 있다.
Google은 이 강좌를 위해 ToDo 프로그램을 선택했습니다. 웹 응용 프로그램을 만드는 데 필요한 기본 개념인 페이지 레이아웃 구축, 컨트롤 추가, 이벤트 처리, 목록 표시 및 편집, 재사용 가능한 UI 구성 요소 만들기, 배치 옵션을 포함하고 있기 때문입니다.
이 자습서는 다음 단계로 구성됩니다.
  • Step 1: Getting started with Pglet
  • Step 2: Pglet app structure
  • Step 3: Adding page controls and handling events
  • Step 4: View, edit and delete list items
  • Step 5: Filtering list items
  • Step 6: Final touches
  • Step 7: Deploying the app
  • Summary

    • 1단계: Pglet 사용 시작

    To create and deploy this ToDo app, you don't need to know HTML, CSS or JavaScript, but you do need a basic knowledge of Python and object-oriented programming, and a Pglet framework .
    Pglet에는 Python 3.7 이상의 버전이 필요합니다.Pglet을 사용하여 Python에서 웹 응용 프로그램을 만들려면 먼저 Pglet 모듈을 설치해야 합니다.
    pip install pglet
    우선, 간단한 Hello World 프로그램을 만듭니다.
    다음을 사용하여 hello.py을 만듭니다.
    python title="hello.py"
import pglet
from pglet import Text

page = pglet.page()
page.add(Text(value="Hello, world!"))
    이 응용 프로그램을 실행하면 다음과 같은 새로운 브라우저 창이 나타납니다.

    Try something
    In this example, the page URL is a random string, because we didn't specify it in pglet.page() call. Try changing it to pglet.page('hello').


    2단계: Pglet 응용 프로그램 구조

    In the previous step 간단한 Pglet 페이지를 만드는 법을 배웠습니다.이 페이지에서 모든 사용자는 같은 내용을 사용합니다("공유 페이지").
    공유 페이지는 대시보드, 상태 페이지 또는 보고서와 같은 일부 유형의 응용 프로그램에 유용할 수 있습니다.그러나 ToDo 애플리케이션의 경우 각 사용자가 자신의 작업 세트를 볼 수 있기를 원합니다.이를 실현하기 위해서, 우리는 '다중 사용자 응용 프로그램' 을 만들어야 한다.
    다음을 사용하여 hello-app.py을 만듭니다.
    import pglet
from pglet import Textbox

def main(page):
  page.add(Textbox())

pglet.app("hello-app", target=main)
    프로그램이 실행될 때, 모든 새로운 사용자 세션에 대해 Pglet은 main 함수를 호출합니다. 이 함수는 유일한 페이지 내용을 가지고 있습니다.

    Try something
    To see multiple sessions in action, open the application URL in a new "incognito" browser window.


    3단계: 페이지 컨트롤 추가 및 이벤트 처리

    Now we're ready to create a multi-user ToDo app.

    To start, we'll need a Textbox for entering a task name, and an "Add" button with an event handler that will display a checkbox with a new task.

    Create todo.py with the following contents:

    import pglet
from pglet import Textbox, Button, Checkbox

def main(page):

    def add_clicked(e):
        page.add(Checkbox(label=new_task.value))

    new_task = Textbox(placeholder='Whats needs to be done?')

    page.add(
        new_task,
        Button('Add', on_click=add_clicked)
    )

pglet.app("todo-app", target=main)

    Run the app and you should see a page like this:

    페이지 레이아웃


    이제 앱을 예쁘게 만들어 봅시다!우리는 전체 응용 프로그램이 페이지의 상단 중심에 위치하고 페이지 너비의 70% 이상까지 뻗기를 희망합니다.텍스트 상자와 버튼은 수평으로 정렬하고 전체 응용 프로그램 너비를 차지해야 합니다.
    Stack은 페이지에 다른 컨트롤을 배치하는 용기 컨트롤입니다.Stack은 수직(기본값) 또는 수평이며 다른 스택을 포함할 수 있습니다.todo.py을 다음과 같이 교체합니다.
    import pglet
from pglet import Stack, Textbox, Button, Checkbox

def main(page):

    page.title = "ToDo App"
    page.horizontal_align = 'center'
    page.update() # needs to be called every time "page" control is changed

    def add_clicked(e):
        tasks_view.controls.append(Checkbox(label=new_task.value))
        tasks_view.update()

    new_task = Textbox(placeholder='Whats needs to be done?', width='100%')
    tasks_view = Stack()

    page.add(Stack(width='70%', controls=[
        Stack(horizontal=True, on_submit=add_clicked, controls=[
            new_task,
            Button('Add', on_click=add_clicked)
        ]),
        tasks_view
    ]))

pglet.app("todo-app", target=main)
    응용 프로그램을 실행하면 다음 페이지가 표시됩니다.

    재사용 가능한 UI 구성 요소

    main 함수에서 애플리케이션을 계속 작성할 수 있지만 가장 좋은 방법은 재사용 가능한 UI 구성 요소를 만드는 것입니다.프로그램 제목, 사이드 메뉴, UI를 개발하고 있다면 더 큰 프로젝트의 일부가 될 것이라고 상상해 보세요.비록 지금 이런 용도를 생각해 내지 못하더라도, 우리는 모든 네트워크 응용 프로그램을 만들 때 조합성과 중용성을 고려하는 것을 권장합니다.
    다시 사용할 수 있는 ToDo 응용 프로그램 구성 요소를 만들기 위해서, 우리는 그것의 상태와 표현 논리를 하나의 단독 클래스에 봉인할 것입니다.todo.py을 다음과 같이 교체합니다.
    import pglet
from pglet import Stack, Textbox, Button, Checkbox

class TodoApp():
    def __init__(self):
        self.new_task = Textbox(placeholder='Whats needs to be done?', width='100%')
        self.tasks_view = Stack()

        # application's root control (i.e. "view") containing all other controls
        self.view = Stack(width='70%', controls=[
            Stack(horizontal=True, on_submit=self.add_clicked, controls=[
                self.new_task,
                Button('Add', on_click=self.add_clicked)
            ]),
            self.tasks_view
        ])

    def add_clicked(self, e):
        self.tasks_view.controls.append(Checkbox(label=self.new_task.value))
        self.tasks_view.update()

def main(page):
    page.title = "ToDo App"
    page.horizontal_align = 'center'
    page.update()

    # create application instance
    app = TodoApp()

    # add application's root control to the page
    page.add(app.view)

pglet.app("todo-app", target=main)

    Try something
    Try adding two TodoApp components to the page:


    # create application instance
app1 = TodoApp()
app2 = TodoApp()

# add application's root control to the page
page.add(app1.view, app2.view)

    4단계: 목록 항목 보기, 편집 및 삭제

    In the previous step 기본 ToDo 애플리케이션을 만들었으며 작업 항목이 확인란으로 표시됩니다.작업 이름 옆에 '편집' 과 '삭제' 단추를 추가해서 프로그램을 개선합니다.편집 버튼은 작업 항목을 편집 모드로 전환합니다.

    각 작업 항목은 확인란이 있는 display_view 스택, 편집 및 삭제 버튼, 텍스트 상자 및 저장 버튼이 있는 edit_view 스택으로 표시됩니다.view 창고는 display_view과 edit_view 창고의 용기로 사용된다.
    이 단계에 앞서 코드는 강좌에 완전히 포함될 정도로 짧다.미래를 전망할 때 우리는 단지 한 단계에서 도입된 변경만을 강조할 것이다.
    이 단계의 전체 코드를 here에서 복사합니다.다음은 작업 보기, 편집, 삭제를 위한 변경 사항을 설명합니다.
    작업 항목의 보기와 조작을 봉인하기 위해 우리는 새로운 Task 클래스를 도입했다.
    class Task():
    def __init__(self, name):
        self.display_task = Checkbox(value=False, label=name)
        self.edit_name = Textbox(width='100%')

        self.display_view = Stack(horizontal=True, horizontal_align='space-between',
                vertical_align='center', controls=[
            self.display_task,
            Stack(horizontal=True, gap='0', controls=[
                Button(icon='Edit', title='Edit todo', on_click=self.edit_clicked),
                Button(icon='Delete', title='Delete todo')]),
            ])

        self.edit_view = Stack(visible=False, horizontal=True, horizontal_align='space-between',
                vertical_align='center', controls=[
            self.edit_name, Button(text='Save', on_click=self.save_clicked)
            ])
        self.view = Stack(controls=[self.display_view, self.edit_view])

    def edit_clicked(self, e):
        self.edit_name.value = self.display_task.label
        self.display_view.visible = False
        self.edit_view.visible = True
        self.view.update()

    def save_clicked(self, e):
        self.display_task.label = self.edit_name.value
        self.display_view.visible = True
        self.edit_view.visible = False
        self.view.update()
    또한 TodoApp 클래스를 추가 버튼을 클릭할 때 Task 인스턴스를 생성하고 저장하도록 변경했습니다.
    class TodoApp():
    def __init__(self):
        self.tasks = []
        # ... the rest of constructor is the same

    def add_clicked(self, e):
        task = Task(self.new_task.value)
        self.tasks.append(task)
        self.tasks_view.controls.append(task.view)
        self.new_task.value = ''
        self.view.update()
    '삭제'작업 작업에 대해 우리는 delete_task() 클래스에서 TodoApp 방법을 실현했고 이 클래스는 작업 실례를 매개 변수로 받아들였다.
    class TodoApp():

    # ...

    def delete_task(self, task):
        self.tasks.remove(task)
        self.tasks_view.controls.remove(task.view)
        self.view.update()
    그런 다음 TodoApp에 대한 참조를 작업 구조 함수에 전달하고 삭제 버튼 이벤트 처리 프로그램에서 TodoApp.delete_task()을 호출합니다.
    class Task():
    def __init__(self, app, name):
        self.app = app

        # ...

        self.display_view = Stack(horizontal=True, horizontal_align='space-between', vertical_align='center', controls=[
            self.display_task,
            Stack(horizontal=True, gap='0', controls=[
                Button(icon='Edit', title='Edit todo', on_click=self.edit_clicked),
                Button(icon='Delete', title='Delete todo', on_click=self.delete_clicked)]),
            ])

        # ...        

    def delete_clicked(self, e):
        self.app.delete_task(self)

class TodoApp():

    # ...

    def add_clicked(self, e):
        task = Task(self, self.new_task.value)
        # ...
    응용 프로그램을 실행하고 작업을 편집 및 삭제하려면:

    단계 5: 목록 항목 필터링

    We already have a functional ToDo app where we can create, edit, and delete tasks. To be even more productive, we want to be able to filter tasks by their status.

     Copy the entire code for this step from here . 다음은 필터를 실현하기 위한 변경 사항을 설명합니다.
    필터를 표시하는 Tabs 컨트롤:
    from pglet import Tabs, Tab

# ...

class TodoApp():
    def __init__(self):
        self.tasks = []
        self.new_task = Textbox(placeholder='Whats needs to be done?', width='100%')
        self.tasks_view = Stack()

        self.filter = Tabs(value='all', on_change=self.tabs_changed, tabs=[
                Tab(text='all'),
                Tab(text='active'),
                Tab(text='completed')])

        self.view = Stack(width='70%', controls=[
            Text(value='Todos', size='large', align='center'),
            Stack(horizontal=True, on_submit=self.add_clicked, controls=[
                self.new_task,
                Button(primary=True, text='Add', on_click=self.add_clicked)]),
            Stack(gap=25, controls=[
                self.filter,
                self.tasks_view
            ])
        ])
    작업 상태에 따라 다른 작업 목록을 표시하기 위해서, "모두", "활동", "완료"작업이 포함된 세 개의 목록을 유지할 수 있습니다.그러나, 우리는 같은 목록을 유지하고, 상태에 따라 작업의 가시성을 바꾸는 더 간단한 방법을 선택했다.TodoApp 클래스에서 우리는 update() 방법을 도입했다. 이 방법은 모든 임무를 교체하고 임무의 상태에 따라 view 창고의 visible 속성을 업데이트한다.
    class TodoApp():

    # ...

    def update(self):
        status = self.filter.value
        for task in self.tasks:
            task.view.visible = (status == 'all'
                or (status == 'active' and task.display_task.value == False)
                or (status == 'completed' and task.display_task.value))
        self.view.update()
    탭을 클릭하거나 작업 상태를 변경할 때 필터를 해야 합니다.탭의 선택한 값을 변경하거나 작업 항목 확인란을 클릭하면 TodoApp.update() 메서드가 호출됩니다.
    class TodoApp():

    # ...

    def tabs_changed(self, e):
        self.update()

class Task():
    def __init__(self, app, name):
        self.display_task = Checkbox(value=False, label=name, on_change=self.status_changed)
        # ...

    def status_changed(self, e):
        self.app.update()
    응용 프로그램을 실행하고 다음 탭을 클릭하여 작업을 필터링합니다.

    6단계:마지막 윤색

    Our Todo app is almost complete now. As a final touch, we will add a footer ( Stack control) displaying the number of incomplete tasks ( Text control) and a "Clear completed" button.

     Copy the entire code for this step from here . 다음은 바닥글의 변경 사항에 대해 살펴보겠습니다.
    class TodoApp():
    def __init__(self):
        # ...

        self.items_left = Text('0 items left')

        self.view = Stack(width='70%', controls=[
            Text(value='Todos', size='large', align='center'),
            Stack(horizontal=True, on_submit=self.add_clicked, controls=[
                self.new_task,
                Button(primary=True, text='Add', on_click=self.add_clicked)]),
            Stack(gap=25, controls=[
                self.filter,
                self.tasks_view,
                Stack(horizontal=True, horizontal_align='space-between', vertical_align='center', controls=[
                    self.items_left,
                    Button(text='Clear completed', on_click=self.clear_clicked)
                ])
            ])
        ])

    # ...

    def update(self):
        status = self.filter.value
        count = 0
        for task in self.tasks:
            task.view.visible = (status == 'all'
                or (status == 'active' and task.display_task.value == False)
                or (status == 'completed' and task.display_task.value))
            if task.display_task.value == False:
                count += 1
        self.items_left.value = f"{count} active item(s) left"
        self.view.update()        

    def clear_clicked(self, e):
        for task in self.tasks[:]:
            if task.display_task.value == True:
                self.delete_task(task)
    응용 프로그램을 실행하려면 다음과 같이 하십시오.

    단계 7: 어플리케이션 배포

    Congratulations! You have created your first Python web app with Pglet, and it looks awesome!

    Now it's time to share your app with the world!

    즉시 공유


    Pglet은 웹 응용 프로그램을 구축하는 프레임워크일 뿐만 아니라 응용 프로그램 UI를 위탁 관리하는 서비스이기도 하다.
    응용 프로그램의 UI가 Pglet 서비스로 실시간으로 스트리밍될 때 컴퓨터에서 응용 프로그램을 실행할 수 있습니다.
    애플리케이션을 즉시 인터넷에서 사용할 수 있도록 하려면 web=True 호출에 프로그램 마지막에 pglet.app() 매개 변수를 추가하면 됩니다.
    # ...

pglet.app(target=main, web=True)
    다음과 같은 URL을 가진 새 브라우저 창이 열립니다.
    https://app.pglet.io/public/{random}

    Note
    Pglet Service is in technical preview now and you are sharing the app in a public namespace.

    Please note that we have removed the name of the page from the call above, so it's generated randomly to avoid name collision on public Pglet service with other users.


    회답


    실시간 공유는 인터넷에서 응용 프로그램을 신속하게 공유하는 데 좋은 선택이지만, 컴퓨터가 계속 켜져 있어야 한다.
    Replit은 모든 언어로 작성된 웹 응용 프로그램에 사용되는 온라인 IDE와 위탁 관리 플랫폼이다.그들의 무료 층은 임의의 수량의 프로그램을 실행할 수 있지만, 약간의 제한이 있다.
    Replit에서 ToDo 애플리케이션을 실행하는 방법:

  • 답장:Sign up.
  • 새 응답 버튼을 클릭합니다.
  • 은 목록에서'Python'언어를 선택하고 리플의 이름을 제공합니다. 예를 들어 my-todo입니다.
  • 에서'세트'라벨을 클릭하고 pglet세트를 검색한다.최신 버전을 선택합니다.
  • 은 파일 탭으로 전환하고 code of Todo app을 main.py에 복사하여 붙여넣습니다.
  • 업데이트 pglet.app() 호출(프로그램 종료 시):
    • pglet.app("index", target=main)
  • 이 애플리케이션을 실행합니다.이제 Replit 서비스에서 애플리케이션 코드와 UI 가 독립형 애플리케이션으로 실행됩니다.

    • Note
    We are not affiliated with Replit - we just love the service. Todo app demo for this tutorial is hosted on Replit and you can just "fork" it there and play.


    요약

    In this tutorial you have learned how to:

    • Create a shared page and a multi-user web app;
    • Work with Reusable UI components;
    • Design UI layout using Stack control;
    • Work with lists: view, edit and delete items, filtering;
    • Deploy your app two ways: Pglet Service and Replit;
     For further reading you can explore controls과 examples repository.
    우리는 당신의 피드백을 듣고 싶습니다!"hello at pglet.io"에 이메일을 보내 Discord의 토론을 추가하고 계속하세요.
    IDE PHP별 Namespace 완성
    React-Redux 스무디 전자상거래 사이트

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage