Comment créer une application Web interactive à l'aide d'un bloc-notes Jupyter

Résumé :Pour créer une application web interactive dans un Jupyter Notebook, utilisez les trois librairies ipywidgets , voila , et binder . Cela ne nécessite que des compétences de base en programmation Python sans avoir besoin d'apprendre un nouveau framework.

Il existe divers outils Python disponibles pour créer des applications Web et des interfaces graphiques frontales. Par exemple, Flask et Django. Aussi utiles soient-ils, nous devons encore investir du temps dans l'apprentissage de nouveaux frameworks. Ce n'est peut-être pas le plus élevé sur notre liste de priorités lorsque nous avons passé beaucoup de temps à faire notre projet Python. Existe-t-il un moyen de créer une application Web simple et interactive avec des compétences de base en Python ? La réponse est oui, et cet article vous montrera exactement cela en cinq étapes.

Nous allons d'abord créer des widgets interactifs en utilisant ipywidgets dans un cahier Jupyter. Ensuite, nous rendrons le bloc-notes sous forme d'application Web à l'aide de Voilà. Nous allons pousser le projet sur un référentiel GitHub, et enfin, héberger l'application Web sur Binder. Commençons.

Première étape :Créer un nouveau référentiel Git et installer les packages Python

Il n'est pas nécessaire de pousser chaque projet de codage sur notre référentiel Git. Mais nous avons besoin d'un référentiel Git pour ce projet. En effet, Binder s'y référera pour créer un conteneur Docker qui hébergera notre application Web. Pour ce tutoriel, j'ai créé un dépôt GitHub nommé jupyter_webapp_demo . N'hésitez pas à le cloner sur https://github.com/nghweigeok/jupyter_webapp_demo.

Pour cloner un référentiel Git dans votre répertoire local, tapez la commande suivante sur un terminal ou une invite de commande :

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

Ensuite, nous allons créer un environnement virtuel pour le projet de code. Il est toujours recommandé d'isoler les dépendances requises par projet. Nous exporterons ultérieurement les noms et les versions de tous les packages installés dans un fichier texte en tant que condition requise pour Binder.

Pour créer et activer un environnement virtuel, tapez les commandes suivantes :

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

Figure 1 :Clonez un dépôt Git et activez un environnement virtuel.

Installez l'application Jupyter Notebook en utilisant soit le conda ou le pip gestionnaire de paquets :

$ conda install -c conda-forge notebook

$ pip install notebook

Tapez la commande suivante pour ouvrir l'application Jupyter Notebook :

$ jupyter notebook

Vous le verrez ouvert sur votre navigateur Web par défaut.

Maintenant, créez un nouveau notebook Python 3. Installez trois modules nommés widgetsnbextension , ipywidgets , et voila , comme suit :

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

Nous devons activer les extensions pour qu'elles s'affichent correctement sur le notebook :

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

Commentez les commandes et exécutez à nouveau la cellule. Cela masquera le texte affiché de l'exécution précédente de la cellule à partir de notre application Web.

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

Maintenant, nous sommes prêts à partir. Il est temps de charger l'application Web avec des curseurs et des boutons.

Étape 2 :Créer des éléments Web interactifs avec Ipywidgets

Ipywidgets est un module qui nous permet de créer des widgets interactifs dans les notebooks Jupyter. Par exemple, des boutons, des zones de texte, des curseurs, des barres de progression, etc. N'hésitez pas à explorer la liste des widgets [1] et à utiliser ceux qui pourraient vous aider à présenter votre projet de code.

Maintenant, créons quelques widgets qui organisent un message texte à grand-mère pour un rendez-vous pour le dîner.

Figure 2 :Une application Web qui prend rendez-vous pour un dîner avec grand-mère.

Pour cela, nous aurons besoin de widgets pour afficher une image, un bouton bascule, un sélecteur de date, un curseur d'entier et un bouton. Nous allons parcourir ce tutoriel pour tous les widgets mais pas pour la mise en page. N'hésitez pas à vous référer au référentiel Git donné pour voir le notebook complet.

Tout d'abord, importez les ipywidgets module et la fonction d'affichage IPython :

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

Le code de tous les widgets suit un format similaire et cohérent. Prenons le code d'un bouton bascule comme exemple :

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

Le ToggleButtons fonction du module widgets est appelée. Son paramètre d'options est rempli avec certains noms de boutons que nous voulons. Pour cela, deux boutons bascule sont créés :petit-fils et petite-fille. Cette fonction est passée à une variable nommée grand.

Les exemples suivants montrent à quel point il est simple de créer un widget :

Une zone de texte

name = widgets.Text(placeholder='Your name here')

Un sélecteur de dates

date = widgets.DatePicker(description='Pick a Date')

Un curseur d'entier

friends = widgets.IntSlider(
            value=3, 
            min=0, 
            max=10,
            step=1,
            style={'description_width': 'initial' 
          )

Nous devons créer une fonction supplémentaire pour configurer les actions à effectuer lorsque le bouton est enfoncé :

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

Remarquez à quel point il est littéral d'obtenir les informations de tous les widgets :

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

Fait? Ensuite, nous sommes prêts à transformer le bloc-notes en une application Web.

Étape 3 :Rendre le bloc-notes en tant qu'application Web à l'aide de Voilà

Comme nous avons installé le package Voilà, nous pouvons maintenant voir le bouton apparaître sur l'interface de notre ordinateur portable.

Figure 3 :Un bouton Voilà qui transforme un bloc-notes en application Web.

Il existe deux façons de déboguer le bloc-notes en tant qu'application Web avant de l'héberger ailleurs. Appuyez sur le bouton Voilà ou exécutez le notebook depuis le terminal comme suit :

$ voila notebook_name.ipynb

Lorsque l'un d'entre eux est exécuté, un nouvel onglet apparaîtra sur notre navigateur Web par défaut. Il montre à quoi ressemble notre application Web dans le répertoire local. Prenez votre temps pour modifier et compléter votre application Web.

Étape 4 :Transférez le projet de code vers votre référentiel Git

Ensuite, nous devons créer un fichier texte d'exigences pour l'application Web. Pour cela, tapez la commande suivante dans votre environnement virtuel activé :

$ pip freeze > requirements.txt

Le fichier inclut tous les packages que vous avez installés dans le virtualenv actuel . Supprimez les lignes suivantes du fichier car elles sont incompatibles avec Binder :

pywin32==300
terminado==0.9.2

Nous sommes maintenant prêts à valider et à pousser notre dossier de projet sur notre dépôt Git en tapant les commandes suivantes :

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

Notez les changements qui ont lieu sur notre dépôt Git.

Étape 5 :Héberger l'application Web sur Binder

Maintenant, nous voulons que le bloc-notes soit affiché en tant qu'application Web hébergée sur Binder, à laquelle tout le monde peut accéder avec une URL. Accédez à mybinder.org et choisissez les configurations appropriées pour le projet de code.

Figure 4 :Exemple de configuration pour l'hébergement d'un projet Git sur Binder.

Élaboration pour la figure 4 :

Choisissez votre plate-forme d'hébergement Git, telle que GitHub, GitLab, etc.
Insérez l'URL de votre référentiel Git.
Insérez le nom de votre bloc-notes après '/voila/render/' .
Choisissez URL au lieu de Fichier.
Cliquez sur le bouton Lancer.
Copiez le texte pour afficher le badge Binder et collez-le dans le fichier README. Votre application Web s'affichera lorsque vous cliquerez sur le badge dans le référentiel Git.

Et… voilà ! Vous disposez maintenant d'une application Web simple pour présenter votre travail.

Conclusion

Cet article explique comment créer une application Web dans un notebook Jupyter. Il ne nécessite que des connaissances de base en programmation Python. Les ipywidgets module est utilisé pour créer des widgets interactifs. Le module voilà est utilisé pour rendre le bloc-notes en tant qu'application Web. L'application Web est hébergée sur Binder, qui est accessible par une URL.

Humour de programmeur

Il n'y a que 10 types de personnes dans ce monde :ceux qui connaissent le binaire et ceux qui ne le connaissent pas.
👩🧔‍♂️
~~~

Il existe 10 types de personnes dans le monde. Ceux qui comprennent le trinaire, ceux qui ne le comprennent pas et ceux qui le confondent avec le binaire.
👩🧔‍♂️👱‍♀️

Références

[1] https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html