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

Как создать интерактивное веб-приложение с помощью ноутбука Jupyter

Резюме: Чтобы создать интерактивное веб-приложение в ноутбуке Jupyter, используйте три библиотеки iPywidgets, Voila и Binder. Это требует только основных навыков программирования Python без необходимости изучения новой структуры. https://youtu.be/t8p6estgusq Существуют различные инструменты Python Tools для создания веб-приложений и Frontend Guis. Например, колба и джанго. Как полезно … Как создать интерактивное веб-приложение, используя ноутбук Jupyter Подробнее »

Автор оригинала: Hwei Geok Ng.

Резюме : Чтобы создать интерактивное веб-приложение в ноутбуке Jupyter, используйте три библиотеки iPywidgets , Вуаля и связующее Отказ Это требует только основных навыков программирования Python без необходимости изучения новой структуры.

Существуют различные инструменты Python Tools для создания веб-приложений и интерфейса Guis. Например, колба и джанго. Так же полезно, как они, мы все еще должны инвестировать время в изучении новых структур. Это может не быть самым высоким в нашем списке приоритетов, когда мы провели много времени, делая наш проект Python. Есть ли способ создать простое интерактивное веб-приложение с основными навыками Python? Ответ да, и эта статья покажет вам именно в пяти шагах.

Сначала мы создадим некоторые интерактивные виджеты, используя iPywidgets в ноутбуке Jupyter. Затем мы сделаем ноутбук в качестве веб-приложения с помощью Voilà. Мы подтолкнум проект на репозиторий GitHUB и, наконец, принимая веб-приложение на связующем. Давайте начнем.

Шаг первый: создайте новый репозиторий Git и установите пакеты Python

Не нужно продвигать каждый проект кодирования на наше хранилище GIT. Но нам нужен Git Repo для этого проекта. То есть потому, что связующее будет ссылаться на него, чтобы создать контейнер Docker, который принимает наше веб-приложение. Для этого учебника я создал репо Github по имени jupyter_webapp_demo Отказ Не стесняйтесь клонировать его в https://github.com/nghweigeok/jupyter_webapp_demo Отказ

Чтобы клонировать Git Reppo на локальный каталог, введите следующую команду на клемме или командной строке:

$ git clone https://github.com/username/project_name.git

Далее мы собираемся создать виртуальную среду для проекта кода. Всегда хорошая практика для выделения необходимых зависимостей на проект. Мы экспортируем имена и версии всех установленных пакетов в текстовый файл позже как реквизит для связующего.

Чтобы создать и активировать виртуальную среду, введите следующие команды:

$ python3 -m venv venv_name
$ cd venv_name\Scripts
$ activate
$ cd ..\..

Рисунок 1: клонировать репозиторий Git и активируйте виртуальную среду.

Установите приложение для ноутбука Jupyter, используя либо Кондей или Пип Пакет менеджер:

$ conda install -c conda-forge notebook

или

$ pip install notebook

Введите следующую команду, чтобы открыть приложение Jupyter Notebook:

$ jupyter notebook

Вы увидите, что он открыт на вашем веб-браузере по умолчанию.

Теперь создайте новый ноутбук Python 3. Установите три модуля с именем widgetsnbextension , iPywidgets и Вуаля , следующее:

$ pip install widgetsnbextension 
$ pip install ipywidgets 
$ pip install voila

Нам нужно включить правильное отображение расширений в ноутбуке:

!jupyter nbextension enable --py widgetsnbextension --sys-prefix
!jupyter serverextension enable voila --sys-prefix

Замечайте команды и снова выполните ячейку. Это будет скрывать отображаемый текст из предыдущего выполнения ячейки из нашего веб-приложения.

#!jupyter nbextension enable --py widgetsnbextension --sys-prefix
#!jupyter serverextension enable voila --sys-prefix

Теперь мы добры идти. Время загрузить веб-приложение с помощью слайдеров и кнопок.

Шаг 2: создайте интерактивные веб-элементы с iPywidgets

IPywidgets это модуль, который позволяет нам создавать интерактивные виджеты в ноутбуках Jupyter. Например, кнопки, текстовые поля, ползунки, стержни прогресса и многое другое. Не стесняйтесь исследовать список виджетов [1] и использовать любой, который поможет в демонстрации вашего кодового проекта.

Теперь давайте создадим некоторые виджеты, которые курируют текстовое сообщение для бабушки для ужина.

Рисунок 2: Веб-приложение, которое книги на прием с бабушкой.

Для этого нам понадобится виджеты для отображения изображения, кнопки переключения, выбора даты, целочисленного слайдера и кнопки. Мы пройдемся через этот учебник для всех виджетов, но не для макета. Не стесняйтесь ссылаться на данный GIT REPO, чтобы увидеть полную ноутбук.

Во-первых, импортировать iPywidgets Модуль и функция отображения iPython:

import ipywidgets as widgets
from IPython.display import display, clear_output

Код для всех виджетов следует по аналогичному и последовательному формату. Возьмите код для туговой кнопки в качестве примера:

grand = widgets.ToggleButtons(
            options=['grandson', 'granddaughter']
        )

Togglebuttons Функция из виджеты модуль называется. Параметр его параметров заполнен некоторыми именами кнопок, которые мы хотим. Для этого создаются две кнопки переключения: внук и внучка. Эта функция передается в переменную под названием Grand.

Следующие примеры показывают, насколько прямой он должен создать любой виджет:

  • Текстовое поле
name = widgets.Text(placeholder='Your name here')
  • Пикера даты
date = widgets.DatePicker(description='Pick a Date')
  • Целочисленный слайдер
friends = widgets.IntSlider(
            value=3, 
            min=0, 
            max=10,
            step=1,
            style={'description_width': 'initial' 
          )

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

button_send = widgets.Button(
                description='Send to grandma',
                tooltip='Send',
                style={'description_width': 'initial'}
            )

output = widgets.Output()

def on_button_clicked(event):
    with output:
        clear_output()
        print("Sent message: ")
        print(f"Dear Grandma! This is your favourite {grand.value}, {name.value}.")
        print(f"I would love to come over on {date.value} for dinner, if that's okay for you!")
        print(f"Also, if you don't mind, I'll bring along {friends.value} hungry ghosts for your delicious food!")

button_send.on_click(on_button_clicked)

vbox_result = widgets.VBox([button_send, output])

Обратите внимание, насколько буквальным необходимо получить информацию от всех виджетов:

grand.value
name.value
date.value
friends.value

Готово? Тогда мы готовы превратить ноутбук в веб-приложение.

Шаг третий: рендерируйте ноутбук в качестве веб-приложения, используя Voilà

Поскольку мы установили пакет VOILLA, теперь мы можем увидеть кнопку появившись на нашем интерфейсе ноутбука.

Рисунок 3: кнопка VOILLA, которая отображает ноутбук в качестве веб-приложения.

Есть два способа отладки ноутбука в качестве веб-приложения, прежде чем провести его где-то еще. Либо нажмите кнопку VOILLA или выполнить ноутбук из терминала следующим образом:

$ voila notebook_name.ipynb

Когда любой из них выполнен, в нашем веб-браузере по умолчанию появится новая вкладка. Это показывает, как наш веб-приложение выглядит в локальном каталоге. Возьмите свое время, чтобы редактировать и завершить ваше веб-приложение.

Шаг четвертый: Нажмите проект кода на ваш репозиторий Git

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

$ pip freeze > requirements.txt

Файл включает в себя все пакеты, которые вы установили в текущем Виртуальский Отказ Удалите следующие строки из файла, так как они несовместимы с Binder:

pywin32==300
terminado==0.9.2

Теперь мы готовы совершить и толкать папку проекта в свой Git Reppo, набрав следующие команды:

$ git add notebook.ipynb
$ git add requirements.txt
$ git commit -m "commit message"
$ git push origin branch_name

Обратите внимание на изменения, происходящие на нашем Git Repo.

Шаг пять: хост веб-приложения на связующем

Теперь мы хотим отображать ноутбук в виде веб-приложения, которое размещено на связующем, который любой может получить доступ к URL. Перейдите в MyBinder.org и выберите соответствующие конфигурации для проекта кода.

Рисунок 4: Конфигурация образца для проведения проекта GIT на связующем.

Разработка на рисунке 4:

  1. Выберите платформу GIT хостинга, такие как GitHub, Gitlab и т. Д.
  2. Вставьте URL вашего Git Reppo.
  3. Вставьте имя вашего ноутбука после '/VOILA/RENDER/' Отказ
  4. Выберите URL вместо файла.
  5. Нажмите кнопку запуска.
  6. Скопируйте текст для отображения связующего значка и вставьте его в файл README. Ваше веб-приложение будет отображаться, когда значок нажат на GIT REPO.

И … Вуаля! Теперь у вас есть простое веб-приложение для демонстрации вашей работы.

Вывод

В этой статье объясняется, как создать веб-приложение в ноутбуке Jupyter. Это требует только базовых знаний о программировании Python. iPywidgets Модуль используется для создания интерактивных виджетов. Модуль Voilà используется для рендеринга ноутбука в качестве веб-приложения. Веб-приложение размещено на Binder, которое доступно URL.

использованная литература

[1] https://ipywidgets.readtheDocs.io/en/stable/example/widget%20List.html.

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