Рубрики
Без рубрики

Создайте и разверните веб -приложение в Python без знания HTML/CSS/JavaScript

В этом уроке мы покажем вам, пошаговый, как создать веб-приложение Todo в Python, используя PGLE F … Tagged с Python, WebDev, новичком, учебным пособием.

В этом уроке мы покажем вам, пошагово, как создать веб-приложение Todo в Python с помощью PGLER Framework, а затем поделиться им в Интернете. Приложение представляет собой программу консоли с одним файлом Just 100 строк кода Python , тем не менее, это многосессионное, современное одностраничное приложение с богатым, отзывчивым пользовательским интерфейсом.

Вы можете играть с живой демонстрацией Здесь Анкет

Мы выбрали приложение TODO для учебного пособия, потому что оно охватывает основные концепции, которые вам нужно для создания любого веб -приложения: создание макета страницы, добавление элементов управления, обработка событий, отображение и редактирование списков, создание многоразовых компонентов пользовательского интерфейса и развертывание.

Учебник состоит из следующих шагов:

  • Шаг 1: Начало работы с PGLET
  • Шаг 2: Структура приложения PGLET
  • Шаг 3: Добавление элементов управления страницы и обработки событий
  • Шаг 4: Просмотреть, редактировать и удалить элементы списка
  • Шаг 5: Фильтрационные элементы списка
  • Шаг 6: Последние штрихи
  • Шаг 7: Развертывание приложения
  • Резюме

Чтобы создать и развернуть это приложение TODO, вам не нужно знать HTML, CSS или JavaScript, но вам нужны базовые знания о Python и объектно-ориентированном программировании, а также PGlet Framework Анкет

Pglet требует Python 3.7 или выше. Чтобы создать веб -приложение в Python с PGLET, сначала необходимо установить модуль 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!"))

Запустите это приложение, и вы увидите новое окно браузера с приветствием:

Попробуйте что -нибудь В этом примере URL -адрес страницы является случайной строкой, потому что мы не указали ее в pglet.page () вызов. Попробуйте изменить его на pglet.page ('hello') Анкет

В Предыдущий шаг , мы научились создать простую страницу PGLET. На этой странице все пользователи работают с одним и тем же содержанием (” общая страница “).

Общая страница может быть полезна для определенных типов приложений, таких как информационные панели, страницы статуса или отчеты. Но для приложения Todo мы хотим, чтобы каждый пользователь видел свой собственный набор задач. Чтобы достичь этого, нам нужно создать многопользовательское приложение ».

Создать hello-app.py со следующим содержимым:

import pglet
from pglet import Textbox

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

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

В то время как приложение работает, для каждого нового сеанса пользователя вызовы PGlet Главный Функция с уникальным содержанием страницы.

Попробуйте что -нибудь Чтобы увидеть несколько сеансов в действии, откройте URL -адрес приложения в новом окне браузера “Incognito”.

Теперь мы готовы создать многопользовательское приложение TODO.

Для начала нам понадобится текстовое поле для введения имени задачи и кнопку «Добавить» с обработчиком событий, которая отобразит флажок с новой задачей.

Создать todo.py со следующим содержимым:

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)

Запустите приложение, и вы должны увидеть такую страницу:

Макет страницы

Теперь давайте сделаем приложение красиво! Мы хотим, чтобы все приложение было в верхнем центре страницы, растянувшееся более 70% ширины страницы. Текстовое поле и кнопку должны быть выровнены по горизонтали и занимать полную ширину приложения:

Стек это контроль контейнера, который используется для изготовления других элементов управления на странице. Стек может быть вертикальным (по умолчанию) или горизонтали, и может содержать другие стеки.

Заменить 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)

Запустите приложение, и вы должны увидеть такую страницу:

Хотя мы могли бы продолжать писать наше приложение в Главный Функция, наилучшей практикой будет создание многоразового компонента пользовательского интерфейса. Представьте, что вы работаете над заголовком приложения, побочным меню или пользовательским интерфейсом, который будет частью более крупного проекта. Даже если вы не можете придумать такого использования прямо сейчас, мы все равно рекомендуем создать все ваши веб -приложения с учетом композиции и повторного использования.

Чтобы сделать многоразовый компонент приложения 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)

Попробуйте что -нибудь Попробуйте добавить два ToDoApp компоненты на странице:

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

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

На предыдущем этапе мы создали базовое приложение TODO с элементами задач, показанных в качестве флажков. Давайте улучшим приложение, добавив кнопки «Редактировать» и «Удалить» рядом с именем задачи. Кнопка «Редактировать» переключит элемент задачи в режим редактирования.

Каждый элемент задачи представлен двумя стеками: display_view Стек с флажом, кнопками «Редактировать» и «удалить» и edit_view Упакуйте с помощью Textbox и кнопки «Сохранить». Просмотр стек служит контейнером для обоих display_view и edit_view стеки.

Перед этим шагом код был достаточно коротким, чтобы быть полностью включенным в учебное пособие. В будущем мы будем подчеркнуть только изменения, введенные на шаге.

Скопируйте весь код для этого шага от Здесь Анкет Ниже мы объясним изменения, которые мы сделали для реализации представления, редактирования и удаления задач.

Чтобы инкапсулировать представления и действия элемента задачи, мы представили новый Задача класс:

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 класс для создания и удержания Задача Случаи, когда нажата кнопка «Добавить»:

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)
        # ...

Запустите приложение и попробуйте редактировать и удалять задачи:

У нас уже есть функциональное приложение TODO, где мы можем создавать, редактировать и удалять задачи. Чтобы быть еще более продуктивными, мы хотим иметь возможность фильтровать задачи по их статусу.

Скопируйте весь код для этого шага от Здесь Анкет Ниже мы объясним изменения, которые мы внесли для реализации фильтрации.

Вкладки управление используется для отображения фильтра:

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 () Метод, который итерация проходит через все задачи и обновляет их Посмотреть Стек видимый свойство в зависимости от статуса задачи:

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()

Запустите приложение и попробуйте фильтрацию задач, нажав на вкладки:

Наше приложение Todo сейчас почти завершено. В качестве окончательного прикосновения мы добавим нижний колонтитул ( Stack Control), отображающий количество неполных задач ( text control) и кнопку «Clear Complete».

Скопируйте весь код для этого шага от Здесь Анкет Ниже мы выделили изменения, которые мы внесли для реализации нижнего колонтитула:

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)

Запустите приложение:

Поздравляю! Вы создали свое первое веб -приложение Python с PGLET, и оно выглядит потрясающе!

Теперь пришло время поделиться своим приложением с миром!

Мгновенный обмен

PGLET – это не только структура для создания веб -приложений, но и услуга для хостинга приложений. Вы можете использовать приложение на вашем компьютере, в то время как его пользовательский интерфейс транслируется в Service PGLET в режиме реального времени.

Чтобы сделать приложение мгновенно доступным в Интернете, просто добавьте web = true параметр к pglet.app () Позвоните в самом конце программы:

# ...

pglet.app(target=main, web=True)

Новые окна браузера будут открыты с URL

https://app.pglet.io/public/{random}

Примечание Служба PGlet сейчас в техническом предварительном просмотре, и вы делитесь приложением в общественном пространстве имен.

Обратите внимание, что мы удалили название страницы из приведенного выше звонка, поэтому он генерируется случайным образом, чтобы избежать столкновения имени в общественной службе PGLET с другими пользователями.

Применение

Мгновенный обмен – отличный вариант для быстрого обмена приложением в Интернете, но это требует, чтобы ваш компьютер был на все время.

Rypit является онлайн -IDE и хостинговой платформой для веб -приложений, написанных на любом языке. Их бесплатный уровень позволяет запускать любое количество приложений с некоторыми ограничениями.

Чтобы запустить приложение TODO на Repit:

  • Зарегистрируйтесь на применении.
  • Нажмите кнопку «Новая реплика».
  • Выберите язык «Python» из списка и предоставьте название Reply, например, my-todo Анкет
  • Нажмите вкладку «Пакеты» и поиск pglet упаковка; Выберите его последнюю версию.
  • Переключить на вкладку «Файлы» и скопировать вставку Код приложения TODO в main.py Анкет
  • Обновление pglet.app () Позвоните (в самом конце программы):
pglet.app("index", target=main)
  • Запустить приложение. Теперь и код приложения, и пользовательский интерфейс работают в Service Service как «автономное» приложение.

Примечание Мы не связаны с применением – мы просто любим сервис. Демонстрация приложения TODO для этого учебника – размещено на repit И вы можете просто “развеять” там и играть.

В этом уроке вы научились:

  • Создайте общую страницу и многопользовательское веб-приложение;
  • Работать с многоразовыми компонентами пользовательского интерфейса;
  • Дизайн макета пользовательского интерфейса с использованием Стек контроль;
  • Работа с списками: просмотреть, редактировать и удалить элементы, фильтрация;
  • Разверните ваше приложение два способа: служба PGLET и применение;

Для дальнейшего чтения вы можете исследовать элементы управления и Примеры репозитория Анкет

Мы хотели бы услышать ваши отзывы! Пожалуйста, бросьте нам электронное письмо по адресу «Привет на pglet.io», присоединяйтесь к обсуждению Раздор , следите за Twitter Анкет

Оригинал: “https://dev.to/inesafitsner/build-and-deploy-a-web-app-in-python-without-knowledge-of-html-css-javascript-30hl”

Читайте ещё по теме: