PyScript : Exécutez Python Dans Le Navigateur

Pendant longtemps, JavaScript a été le langage dominant dans le développement frontal en raison de sa capacité à s'exécuter nativement dans le navigateur et à interagir avec HTML et CSS via l'API DOM. Avec l'avènement de WebAssembly, les choses ont commencé à changer lentement. Des langages tels que Go, Rust, C, C++ et bien d'autres peuvent désormais s'exécuter dans le navigateur à des vitesses quasi natives, et Python n'a pas été laissé pour compte.

Avec l'introduction de PyScript, les développeurs frontend peuvent désormais créer des frontends riches avec Python. En outre, ils peuvent également puiser dans l'écosystème Python, qui contient des modules scientifiques utiles tels que NumPy , Matplotlib et bien d'autres.

Conditions préalables

Pour tirer le meilleur parti de ce tutoriel, vous aurez besoin de :

• Une compréhension de base de HTML, CSS et JavaScript
• Familiarité avec la syntaxe Python
• Un serveur Web. Nous allons créer un serveur simple en utilisant Python, alors assurez-vous que Python est installé sur votre système
• Un navigateur Web ; La documentation PyScript recommande actuellement Chrome

Qu'est-ce que PyScript ?

PyScript est un framework Web open source qui vous permet de créer des applications Web frontales à l'aide de Python. Avec PyScript, vous pouvez soit intégrer du code Python dans HTML, soit créer un lien vers un fichier Python et le code s'exécutera dans le navigateur, sans exécuter Python dans le backend.

PyScript a été créé par Anaconda et a été annoncé publiquement le 30 avril à PyCon US 2022. Au moment de la rédaction de cet article, PyScript est dans un état alpha et est en cours de développement, donc des changements de rupture et de nouvelles fonctionnalités sont à prévoir car il n'a pas n'a pas encore été publié de manière stable.

Comment fonctionne Python ?

PyScript s'appuie sur Pyodide , qui porte CPython sur WebAssembly. WebAssembly est un format binaire de bas niveau qui vous permet d'écrire des programmes dans d'autres langages, qui sont ensuite exécutés dans le navigateur. Avec CPython dans WebAssembly, nous pouvons installer et exécuter des packages Python dans le navigateur, tandis que PyScript résume la plupart des opérations Pyodide, vous permettant de vous concentrer sur la création d'applications frontales avec Python dans le navigateur.

Configuration de votre dossier de projet pour PyScript

Avant de commencer à utiliser PyScript, créons le répertoire où résidera notre code.

Pour ce faire, ouvrez votre terminal et créez le répertoire du projet à l'aide de la mkdircommande à l'emplacement de votre choix :

mkdir pyscript_demo

Ensuite, déplacez-vous dans le répertoire que vous venez de créer à l'aide de la cdcommande :

cd pyscript_demo

Désactivation des outils de formatage automatique comme Prettier

Souvent, les développeurs frontend utilisent des outils de formatage automatique comme Prettier dans leurs éditeurs de texte pour formater le code lors de l'enregistrement. Bien que cela fonctionne bien pour HTML, CSS et JavaScript, cela peut entraîner des problèmes dans le code Python car Python est strict en matière d'indentation.

Actuellement, les outils de formatage automatique comme Prettier ne reconnaissent pas la syntaxe PyScript, qui date d'environ deux mois au moment de la rédaction de cet article. Ces outils formatent automatiquement le code Python comme JavaScript, ce qui rompt l'indentation du code. Pour remédier à cela, nous désactiverons pour l'instant le formatage automatique de ce répertoire.

En supposant que vous utilisez VSCode, nous pouvons désactiver le formatage automatique comme suit.

Dans votre répertoire de projet, créez un .vscoderépertoire et naviguez dans le répertoire avec la commande suivante.

mkdir .vscode && cd .vscode

Ensuite, créez un settings.jsonfichier et ajoutez le contenu suivant :

{
  "editor.formatOnSave": false
}

Avec cela, la fonction de formatage automatique lors de l'enregistrement de ce répertoire a été désactivée dans VSCode et nous sommes maintenant prêts à commencer à utiliser PyScript.

Commencer

Maintenant que notre répertoire est configuré pour PyScript, nous allons d'abord ajouter des liens vers les ressources PyScript comprenant un fichier CSS et un fichier JavaScript dans la <head>section d'une page HTML.

Une fois les actifs ajoutés, vous pouvez utiliser PyScript dans un fichier HTML de deux manières :

• PyScript interne : vous pouvez écrire et placer votre code Python dans la <py-script>balise d'un fichier HTML. La <py-script>balise peut être ajoutée dans la balise <head>ou <body>en fonction de votre tâche à accomplir
• PyScript externe : c'est là que vous écrivez votre code Python dans un fichier se terminant par .pyextension, que vous pouvez ensuite référencer dans la <py-script>balise à l'aide de l' srcattribut

Script interne

Le moyen le plus simple et le plus rapide de commencer à utiliser PyScript consiste à intégrer du code Python dans le fichier HTML. Faisons cela!

Ouvrez votre éditeur de texte préféré, créez le hello-world.htmlfichier et ajoutez le contenu suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello World!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <!-- Put Python code inside the the <py-script> tag -->
    <py-script>print("Hello World!")</py-script>
  </body>
</html>

Dans la <head>section, nous établissons un lien vers le pyscript.cssfichier, qui contient des styles pour les composants visuels PyScript, REPL, le chargeur PyScript, etc. Après cela, nous établissons un lien vers le pyscript.jsfichier, qui configure les fonctionnalités nécessaires à l'utilisation de PyScript, telles que la création de balises comme <py-script>où vous pouvez écrire votre code Python.

Dans la <body>balise, vous intégrez du code Python dans la <py-script>balise. Nous gardons les choses simples pour l'instant, nous imprimons donc simplement Hello Worldà l'utilisateur.

Assurez-vous d'enregistrer votre fichier à la racine du répertoire de votre projet et ouvrez le hello-world.htmlfichier dans Chrome. Le chargement prendra quelques secondes, et une fois la page chargée, elle ressemblera à ceci :

Python externe

Bien que l'insertion de code Python dans la <py-script>balise fonctionne, une approche bien meilleure et plus évolutive consiste à ajouter le code dans un fichier externe et à le référencer dans le fichier HTML lorsque vous créez plus de pages HTML ou que vos scripts deviennent plus volumineux.

Voici quelques-unes des raisons pour lesquelles vous devriez envisager d'utiliser du code PyScript dans un fichier externe :

• Le fichier peut être mis en cache par le navigateur, ce qui accélère les performances
• Vous pouvez référencer le fichier sur plusieurs pages, réduisant ainsi la duplication
• Votre code Python peut être formaté avec des outils comme les linters noirs ou Python. Ces outils ne fonctionnent pas actuellement sur le code Python intégré dans un fichier HTML

Pour utiliser PyScript en externe, nous allons créer un index.htmlfichier, un fichier Python se terminant par une .pyextension contenant notre code Python, et enfin référencer le fichier Python dans le index.htmlfichier.

Création du index.htmlfichier

Créez un index.htmlfichier et un lien vers les ressources PyScript :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  </body>
</html>

Le fichier ne fait pas grand-chose ; nous ne faisons que créer un lien vers les ressources PyScript. Pour le rendre plus utile, nous allons créer un main.pyfichier où résidera notre code Python.

Création du main.pyfichier

Créons une fonction Python qui imprime un message d'accueil.

Dans votre éditeur de texte, créez le main.pyfichier et ajoutez le code ci-dessous :

def greetings(name):
    print(f'Hi, {name}')

greetings('John Doe')

La greetings()fonction prend un nameparamètre et imprime un message d'accueil avec le nom stocké dans le nameparamètre. Lorsque nous appelons la greetings()fonction avec John Doecomme argument, elle imprime hi, John Doe.

Lier le main.pyfichier dans le fichier HTML

Maintenant que vous avez créé le code Python, vous allez référencer le main.pyfichier dans le index.htmlfichier.

Ouvrez le index.htmlet ajoutez la ligne à l'intérieur de la <body>balise :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Greetings!</title>
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  // add the following line
  <py-script src="./main.py"></py-script>
  </body>
</html>

La <py-script>balise a une srcbalise qui accepte le chemin d'accès au fichier Python.

Ouverture du index.htmlfichier dans le navigateur

Maintenant que tout est en place, nous allons ouvrir le index.htmldans le navigateur.

Cependant, les navigateurs refuseront de charger et d'exécuter le fichier Python externe en raison de l' erreur de politique Cross-Origin Resource Sharing (CORS) . Pour résoudre ce problème, nous devrons utiliser un serveur. Heureusement que Python est livré avec un serveur Web que nous pouvons utiliser ! Le serveur n'a pas besoin d'être créé par Python, vous pouvez utiliser live-server ou n'importe quel serveur de votre choix.

Pour créer un serveur, ouvrez le terminal dans le répertoire racine de votre projet et exécutez la commande suivante :

python -m http.server

Ensuite, ouvrez Chrome et visitez http://0.0.0.0:8000/. Le serveur chargera automatiquement le index.htmlfichier et vous verrez ce qui suit :

Pour le reste de ce didacticiel, nous ferons référence à un fichier Python externe, ce qui nous obligera à utiliser un serveur pour éviter les erreurs CORS, et parfois nous intégrerons du code Python dans HTML par souci de brièveté.

Utilisation du REPL PyScript

PyScript est livré avec une boucle de lecture-évaluation-impression (REPL), que vous pouvez utiliser pour expérimenter et essayer le code Python.

Pour utiliser le REPL, ajoutez le <py-repl>tag dans le <body>tag de votre index.htmlfichier :

<!DOCTYPE html>
  ...
  <body>
  <py-script src="./main.py"></py-script>
  // add the following tag
  <py-repl></py-repl>
  </body>
</html>

Avec le serveur toujours en cours d'exécution, visitez http://0.0.0.0:8000/. Vous verrez une nouvelle section où vous pourrez entrer du code Python.

Vous pouvez importer des modules, évaluer des expressions, créer des fonctions et bien d'autres choses encore. Pour voir à quoi correspond une expression, vous devez cliquer sur l' icône de lecture verte.

L'image suivante montre certaines des opérations que vous pouvez effectuer :

Maintenant que nous savons comment utiliser un REPL, nous allons maintenant apprendre à créer et à utiliser des modules dans PyScript.

Utilisation de modules Python dans PyScript

Dans cette section, nous allons créer un module Python personnalisé et l'utiliser dans notre code. Nous utiliserons également des modules de la bibliothèque standard Python, ainsi que des modules tiers.

Pour utiliser les modules, nous allons introduire une nouvelle balise, <py-env>, qui nous permet de référencer des modules ou des chemins de fichiers de modules.

Création de modules personnalisés

Créons un module local contenant deux fonctions.

Créez un mathslib.pyfichier dans votre répertoire de projet et ajoutez le code ci-dessous :

def add(num1, num2):
    return num1 + num2

def subtract(num1, num2):
    return num1 - num2

Ici, nous avons créé deux fonctions qui effectuent des opérations d'addition et de soustraction.

Ensuite, créez un modules.htmlfichier et ajoutez le contenu suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>local modules</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
 <py-env>
    - paths:
        - mathslib.py
  </py-env> 
  <py-script>
from mathslib import subtract
print(subtract(8, 4))
  <py-script>
  </body>
</html>

Dans la <body>balise, nous utilisons la <py-env>balise, qui accepte une liste YAML qui a pathspour clé. est le mathslib.pychemin d'accès au fichier du module personnalisé relatif au modules.htmlfichier. Une fois le chemin d'accès au module personnalisé spécifié, PyScript importera le module dans le fichier.

Avec le module chargé, dans la <py-script>balise, nous importons la subtract()fonction de mathslib.pyet invoquons la fonction avec les arguments 8et 4.

Avec le serveur en cours d'exécution, visitez http://0.0.0.0:8000/modules.htmlet vous verrez une page similaire à celle-ci :

Importation de modules depuis la bibliothèque standard Python

PyScript, avec l'aide de Pyodide, donne accès à de nombreux modules disponibles dans la bibliothèque standard Python qui sont prêts à être utilisés, à l'exception des suivants :

• tkinter
• venv
• dbm

Visitez la documentation de Pyodide pour voir une liste complète. Notez également les modules inclus mais non fonctionnels, tels que les modules de multitraitement, de threading et de sockets.

Les modules de la bibliothèque standard sont disponibles dans l'espace de noms PyScript par défaut ; il vous suffit de les importer pour les utiliser dans le fichier.

Toujours dans le modules.htmlfichier, modifiez le code Python dans la <py-script>balise pour générer un nombre aléatoire à l'aide du randommodule :

from mathslib import subtract
import random
print(subtract(8, 4))
print("random number generated: ")
print(random.randint(1, 12))

Visitez maintenant la http://0.0.0.0:8000/modules.htmlpage et vous verrez un nombre aléatoire généré chaque fois que vous actualisez la page :

Utilisation de packages tiers

Outre l'utilisation de modules Python intégrés, vous pouvez également utiliser des bibliothèques tierces fournies dans Pyodide, telles que :

• NumPy
• Pandas
• pytest
• Jinja2
• belle soupe4
• matplotlib
• DIP
• scikit-apprendre

Pour une liste complète des packages tiers pris en charge, consultez la documentation Pyodide ou gardez un œil attentif sur le référentiel Pyodide GitHub .

Pour ajouter un package tiers, créez un nouveau fichier HTML, third-party.html, et ajoutez le code suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>local modules</title>
    <!-- linking to PyScript assets -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <!-- thirdparty dependencies added here -->
 <py-env>
    - numpy 
    - matplotlib
  </py-env> 
  <py-script>
import numpy as np
import matplotlib.pyplot as plt
arr = np.array([1, 2, 3, 4, 5])
plt.plot(arr)
plt
  <py-script>
  </body>
</html>

Dans la <py-env>balise, nous ajoutons une liste de packages tiers que nous souhaitons utiliser dans notre projet, qui sont les packages NumPy et Matplotlib. Ensuite, dans la <py-script>balise, nous importons NumPy en tant que npet Matplotlib en tant que plt. Ensuite, nous appelons la arrayméthode de NumPy, qui crée un tableau qui est ensuite stocké dans la arrvariable. Après cela, nous appelons la plotméthode de Matplotlib avec le tableau arrcomme argument pour tracer un graphique.

Assurez-vous que votre fichier est enregistré et visitez la http://0.0.0.0:8000/third-party.htmlpage. Vous devriez voir un graphique semblable au suivant :

Maintenant que vous comprenez comment utiliser des modules intégrés personnalisés et des packages tiers, nous apprendrons comment accéder et manipuler les éléments HTML dans la section suivante.

Accéder et manipuler des éléments HTML à l'aide de PyScript

Dans cette section, nous apprendrons comment sélectionner un élément HTML à l'aide d'un ID ou d'une classe CSS, modifier un élément, attacher des événements à un élément et créer de nouveaux éléments à l'aide de PyScript.

Utilisation de la Elementclasse

PyScript est livré avec la Elementclasse, qui vous permet de sélectionner un élément HTML à l'aide de son ID.

Pour voir comment cela fonctionne, créez un elements.htmlfichier et insérez le contenu suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Element class</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <ul id="navigation">
    <li class="home">home</li>
    <li class="about">about</li>
    <li class="services">services</li>
    <li class="contact">contact</li></ul>
  </div>
  <div id="output"></div>
  <py-script src="./access-elements.py"></py-script>
  </body>
</html>

Dans la <body>balise, nous avons un <ul>élément avec un ID de navigation. Nous utiliserons l'ID pour sélectionner cet élément à l'aide de la Elementclasse. L'instance sélectionnée nous donnera des méthodes que nous pouvons utiliser pour sélectionner les descendants et les manipuler.

Une autre balise que nous utiliserons est le <div>avec un ID de output. Nous allons le modifier innerHTMLpour écrire une nouvelle valeur. Enfin, après la <div>balise, nous établissons un lien vers le access-elements.pyfichier qui contiendra notre code Python. Il n'existe pas encore, alors allons-y et créons-le.

Une fois le fichier créé access-elements.py, ajoutez-y le code suivant :

ul_element = Element("navigation")
first_element = ul_element.select('.home').add_class('first')
second_element = ul_element.select('.about').remove_class('about')
div_element = Element("output")
div_element.write("Value set from PyScript")

Dans le code précédent, nous utilisons la Elementclasse pour accéder à l' <ul>élément à l'aide de l' navigationID.

Lorsqu'un élément est sélectionné à l'aide de la Elementclasse, vous pouvez tirer parti de certaines des méthodes suivantes :

• write(): Définit la innerHTMLvaleur
• select(): Utilise un sélecteur CSS pour trouver des éléments descendants
• add_class(): Ajoute une ou plusieurs classes à un élément
• remove_class(): Supprime une ou plusieurs classes d'un élément

Dans la deuxième ligne, nous utilisons la select()méthode pour sélectionner le premier élément enfant de l' <ul>élément en utilisant son nom de classe, home. Après avoir sélectionné l'enfant, nous appelons la add_class()méthode pour ajouter une nouvelle classe firstà l' <li>élément.

Dans la troisième ligne, nous accédons au deuxième élément enfant par son nom de classe about, puis supprimons sa classe aboutà l'aide de la remove_class()méthode.

Ensuite, nous appelons la Elementclasse avec l' ID output, qui fournit une référence à l' <div>élément qui réside après l' ulélément dans le elements.htmlfichier. Enfin, nous appelons la write()méthode avec la chaîne Value set from PyScript. La méthode définira la valeur de l' <div>élément innerHTMLsur l'argument de chaîne.

Avec le serveur toujours actif, visitez http://0.0.0.0:8000/elements.htmlet inspectez l' <ul>élément. Vous verrez que le premier <li>élément a maintenant une classe supplémentaire ( first), le deuxième élément n'a pas de classe et l' divélément a maintenant le texte que nous avons défini en Python.

Attacher des événements à des éléments

Nous pouvons maintenant sélectionner des éléments HTML et effectuer quelques manipulations de base. Dans cette section, nous allons attacher un événement click à un élément et faire exécuter du code Python lorsque l'élément a été cliqué.

Créez un events.htmlfichier et écrivez le code ci-dessous :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Adding Events</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <button id="click-btn" class="bg-blue-500 text-white" pys-onClick="handle_click">Click</button>
  <div id="output"></div>
  <py-script src="./event-handlers.py"></py-script>
  </body>
</html>

Dans la <body>balise, nous avons un <button>avec un classattribut contenant certaines classes qui font partie du pyscript.cssfichier. La <button>balise a également un pys-onclickattribut, qui attache un clickévénement au bouton. L' pys-onclickattribut accepte le nom de la fonction handle_click, qui sera la fonction qui s'exécute lorsque le bouton est cliqué.

Ensuite, nous avons l' divélément avec un ID de output. Nous allons modifier l'élément innerHTMLavec la handle_clickfonction que nous définissons.

Enfin, nous établissons un lien vers le event-handlers.pyfichier, qui contiendra la fonction de gestionnaire d'événements.

Définissons le event-handlers.pyet ajoutons ce qui suit :

def handle_click(e):
    pyscript.write("output", "you clicked the button")

La handle_clickfonction a un paramètre, equi est un objet événement transmis automatiquement à la fonction lorsque vous cliquez sur le bouton. A l'intérieur de la fonction, nous invoquons la write()méthode de PyScript, qui prend deux arguments : l'ID de l'élément outputet la valeur que nous voulons écrire, dans notre cas, you clicked the button.

Assurez-vous que votre serveur est en cours d'exécution :

python -m http.server

Ensuite, visitez l'URL http://0.0.0.0:8000/events.htmldans Chrome. Lorsque la page se charge, cliquez sur le bouton et un message indiquant "vous avez cliqué sur le bouton" apparaît :

Utilisation de JavaScript pour accéder et manipuler le DOM

PyScript est livré avec un jsmodule qui vous donne accès à des méthodes JavaScript, telles que querySelector(), createElement(), appendChild(), etc., pour accéder et manipuler des éléments HTML. Avec ceux-ci, vous pourrez mélanger JavaScript et Python pour effectuer des manipulations DOM intéressantes. Voici un exemple:

import js

print(js.window.innerHeight)

nav = js.document.createElement("div")
js.document.body.prepend(nav)

js.console.log("nav element created")

Comme vous pouvez le voir, nous mélangeons des méthodes de code Python print()avec JavaScript windowou documentdes propriétés.

Dans cette section, nous nous concentrerons principalement sur les documentméthodes, et commodément, PyScript les rend automatiquement disponibles dans la portée Python. Nous n'aurons même pas besoin d'importer le jsmodule pour utiliser les documentméthodes.

Créez un dom.htmlfichier et ajoutez le code suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mixing JavaScript and Python</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <ul id="navigation">
  </ul>
  <py-script src="./js-dom.py"></py-script>
  </body>
</html>

Dans la <body>balise, nous n'avons qu'un <ul>élément vide avec un ID de navigation. Ensuite, nous référençons le js-dom.pyqui contiendra notre code Python.

Créez le js-dom.pyfichier et ajoutez le contenu suivant :

nav_parent = document.querySelector('#navigation')
nav_texts = ["home", "about", "services", "contact"]
for text in nav_texts:
    nav_item = document.createElement("li")
    nav_item.textContent = text
    nav_item.className = "nav_element"
    nav_parent.appendChild(nav_item)

Dans la première ligne, nous appelons la querySelector()méthode du documentmodule avec #navigationcomme argument. La méthode trouvera et renverra un élément avec un ID de navigation, qui est l' <ul>élément dans le dom.htmlfichier.

Dans la deuxième ligne, nous créons une liste de texte de navigation et la stockons dans la nav_textsvariable. Après cela, nous parcourons la nav_textsliste. A chaque itération, nous invoquons la createElement()méthode avec une chaîne lipour créer un <li>élément.

Ensuite, nous ajoutons du texte à l' <li>élément à l'aide de la textContentpropriété et ajoutons un nom de classe nav_elementà l' <li>élément à l'aide de la classNamepropriété. Enfin, nous ajoutons l' <li>élément à l' <ul>élément en appelant le appendChild()avec l' nav_itemélément comme argument.

Assurez-vous que votre fichier est enregistré et que le serveur est toujours en cours d'exécution. Visitez http://0.0.0.0:8000/dom.html, et vous verrez une page qui ressemble à ce qui suit :

Si vous creusez plus loin et inspectez les éléments, vous verrez que les <li>éléments ont été créés avec le nom de classe nav_element, que nous avons défini en Python :

Nous pouvons maintenant accéder et manipuler le DOM à l'aide de la Elementclasse, attacher des événements aux éléments et utiliser JavaScript pour interroger et modifier le DOM. Ensuite, nous allons récupérer les données d'une API à l'aide de PyScript.

Récupérer et afficher des données à partir d'une API

Dans cette section, nous utiliserons PyScript pour envoyer une GETrequête à une API afin de récupérer des données. L'API que nous utiliserons est l' API Random Data . Nous allons créer un bouton avec un événement click qui exécute une fonction qui appelle l'API chaque fois que le bouton est cliqué.

Créez un fetch_data.htmlfichier dans votre répertoire et ajoutez le contenu suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Fetch data from API</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <button id="get-name" class="bg-green-600 text-white" pys-onClick="get_random_name">Generate Random Name</button>
  <div id="output"></div>
  <py-script src="./fetch.py"></py-script>
  </body>
</html>

Le code devrait être familier à ce stade. La partie la plus importante est la <button>balise, qui a l' pys-onClickattribut qui accepte la get_random_name()fonction. La fonction résidera dans le fetch.pyfichier lié en bas. Continuons et créons le fichier.

Dans votre éditeur de texte, créez un nouveau fichier nommé fetch.pyavec le contenu suivant :

from pyodide.http import pyfetch
import asyncio

async def get_random_name(e): 
    response = await pyfetch(url="https://random-data-api.com/api/name/random_name", method="GET")
    data = await response.json()
    first_name = data.get('first_name')
    middle_name = data.get('middle_name')
    last_name = data.get('last_name') 
    output =  f"Random name: {first_name} {middle_name} {last_name}"
    pyscript.write('output', output)

Dans la première ligne, nous importons la pyfetch()méthode du pyodide.httpmodule, ce qui nous permet de faire des requêtes réseau asynchrones. Dans la deuxième ligne, nous importons le asynciomodule, qui fait partie de la bibliothèque standard Python et fournit les mots-clés asyncet awaitutiles pour créer des fonctions asynchrones.

Ensuite, nous définissons une fonction asynchrone get_random_name()en la préfixant avec le asyncmot clé du asynciomodule. Au sein de la fonction, nous invoquons la pyfetch()méthode qui accepte deux arguments :

• URL: Le point de terminaison de l'API
• method: spécifie la méthode HTTP que vous souhaitez utiliser, qui est la GETméthode ici.

Lorsqu'il pyfetch()s'exécute, il renvoie un objet, qui est ensuite stocké dans la responsevariable. Dans la ligne qui suit, nous appelons le json()sur l' responseobjet pour analyser le JSON et renvoyer un dictionnaire Python, qui est ensuite stocké dans la datavariable.

Dans les lignes suivantes, vous extrayez le prénom, le deuxième prénom et le nom de famille du datadict et les stockez dans leurs variables respectives. Enfin, nous concaténons les noms à l'aide des f-strings de Python et invoquons la pyscript.write()méthode pour écrire les données dans l' <div>élément avec un ID de output.

Assurez-vous que votre serveur est en cours d'exécution et visitez la http://0.0.0.0:8000/fetch_data.htmlpage. Une fois la page chargée, cliquez sur le Generate Random Namebouton. Vous verrez qu'un nouveau nom est généré à chaque clic sur le bouton :

Données persistantes à l'aidelocalStorage

Dans cette section, nous utiliserons le stockage local pour enregistrer et récupérer des données. Le stockage local est un objet du navigateur Web qui peut stocker des données sans date d'expiration. Python peut utiliser le stockage local en l'important depuis le jsmodule.

Pour utiliser le stockage local, nous allons créer une zone de texte permettant aux utilisateurs de saisir des commentaires. S'ils souhaitent enregistrer le commentaire, ils cliqueront sur un savebouton qui exécutera une fonction qui enregistre les données dans le stockage local. Chaque fois que la page est visitée, les données seront extraites du stockage local et la zone de texte sera définie sur les données.

Créez un storage.htmlfichier et ajoutez le contenu suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Store data in local storage</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
  <textarea id="comment" class="block border"></textarea>
  <button id="save" class="bg-green-600 text-white"
   pys-onClick="save_comment">Save</button>
  <py-script src="./local-storage.py"></py-script>
  </body>
</html>

Dans la <body>balise, nous créons une <textarea>balise avec un ID comment. Nous utiliserons cet ID pour obtenir une référence de l'élément de zone de texte en Python. Ensuite, nous avons un bouton qui a savepour identifiant et un événement click qui invoquera la fonction save_comment, que nous n'avons pas encore définie. Enfin, nous référençons le local-storage.py, qui contiendra notre code Python. Créons le fichier maintenant.

Créez local-storage.pyet ajoutez les éléments suivants :

from js import localStorage

def save_comment(e):
    text =  Element("comment").value
    localStorage.setItem("comment", text)

if localStorage.getItem("comment"):
    text_area =  Element("comment")
    text_area.write(localStorage.getItem("comment"))

Tout d'abord, nous importons l' localStorageobjet depuis le jsmodule. Ensuite, nous définissons la save_comment()fonction, qui prend ecomme paramètre. Dans la fonction, nous invoquons la Elementclasse avec l'ID commentpour obtenir une référence de zone de texte. Une fois que la méthode trouve la zone de texte, nous utilisons la valuepropriété pour obtenir le contenu de la zone de texte et stocker la valeur dans la textvariable. Dans la ligne suivante, nous invoquons la setItem()méthode de l' localStorageobjet pour enregistrer le texte du commentaire dans l' localStorageobjet sous la commentclé.

Désormais, la save_comment()fonction ne s'exécutera que lorsque le savebouton sera cliqué. Cependant, en procédant hors de la save_comment()fonction, les lignes qui suivent la fonction ne s'exécuteront que lors du chargement de la page.

Lorsque la page est chargée pour la première fois, nous utilisons l' ifinstruction pour vérifier si l' localStorageobjet contient des données sous la commentclé. Si vrai, nous référençons la zone de texte à l'aide de la Elementclasse et stockons son instance dans la text_areavariable. Ensuite, nous invoquons la write()méthode de l' text_areainstance pour mettre à jour le contenu de la zone de texte avec les données du stockage local.

Assurez-vous que votre serveur est en cours d'exécution et visitez http://0.0.0.0:8000/storage.html. Saisissez le texte de votre choix et cliquez sur le bouton Enregistrer .

Ensuite, actualisez l'URL et vous verrez que la zone de texte contient le texte que vous avez enregistré lors de la première visite.

Avec cela, vous savez maintenant comment tirer parti localStoragede PyScript. Ensuite, nous allons lire un fichier dans le système de fichiers en utilisant PyScript.

Interaction avec le système de fichiers

Dans cette section, nous utiliserons PyScript pour lire les données d'un fichier en clair dans le système de fichiers local et ajouter son contenu dans le DOM.

Commençons par créer un fichier contenant les données que nous voulons lire. Dans le répertoire principal de votre projet, exécutez la commande suivante pour créer et déplacer dans un nouveau répertoire :

mkdir data && cd data

Ensuite, créez un names.txtfichier et ajoutez le contenu suivant, qui sont des noms de frameworks Web Python :

Django
Flask
FastAPI
web2p

Enregistrez le fichier et revenez à la racine du répertoire de votre projet :

cd ..

Une fois le fichier créé, créez un file-system.htmlfichier dans votre éditeur de texte avec les éléments suivants :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Read data from file system</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
   <py-env>
    - paths:
        - /data/names.txt
  </py-env>
  <ul id="frameworks">
  </ul>
  <py-script src="./read-file.py"></py-script>
  </body>
</html>

Dans la <py-env>balise, nous spécifions le chemin vers le names.txt, qui est relatif au file-system.htmlchemin. Ensuite, nous créons une <ul>balise vide avec un frameworksID. Enfin, nous faisons référence au read-file.py, que nous définirons bientôt.

Créez un read-file.pyavec le contenu suivant :

ul_element = document.querySelector("#frameworks")
with open("names.txt") as f:
    for line in f:
        li_element = document.createElement("li")
        li_element.innerText = line
        ul_element.appendChild(li_element)

Dans la première ligne, nous invoquons la querySelector()méthode avec un ID selector #frameworks, qui obtient une référence de l' <ul>élément. Dans la deuxième ligne, nous appelons la open()méthode avec le nom de fichier names.txtet stockons l'objet fichier sous f.

Dans l' withinstruction, nous parcourons chaque ligne stockée dans le fichier object f. Lors de chaque itération, nous créons un <li>élément en utilisant la méthode documentde l'objet createElement(). Ensuite, nous définissons le <li>contenu du texte sur la valeur de la linevariable à l'aide de la innerTextpropriété de l' li_elementinstance. Enfin, nous ajoutons l' <li>élément à l' <ul>élément en appelant le appendChild()avec le li_elementcomme argument.

Redémarrez le serveur (si vous l'avez arrêté avant) :

python -m http.server

Visitez l' http://0.0.0.0:8000/file-system.htmlURL et vous verrez le contenu du fichier en clair s'afficher sur la page :

Si vous inspectez les éléments, vous verrez qu'il y a quatre <li>éléments qui ont été ajoutés à l' <ul>élément.

Avec cela, vous pouvez maintenant lire les fichiers dans le système de fichiers. Vous pouvez utiliser la même approche pour lire les fichiers CSV et de nombreux autres formats de fichiers.

Conclusion

Dans ce didacticiel, nous avons appris à utiliser le REPL PyScript, à créer des modules personnalisés, à utiliser des modules de la bibliothèque standard Python et à importer des modules tiers. Nous avons également appris à accéder et à manipuler des éléments à l'aide de PyScript, à effectuer des requêtes API, à utiliser localStorageet à lire un fichier en texte brut à partir du système de fichiers.

Pour explorer davantage PyScript, visitez la page d'accueil de PyScript . De plus, consultez la page de documentation de Pyodide pour en savoir plus sur les possibilités qu'il permet dans le navigateur.

Source : https://blog.logrocket.com/pyscript-run-python-browser/

#python 

What is GEEK

Buddha Community

Why use Python for Software Development

No programming language is pretty much as diverse as Python. It enables building cutting edge applications effortlessly. Developers are as yet investigating the full capability of end-to-end Python development services in various areas. 

By areas, we mean FinTech, HealthTech, InsureTech, Cybersecurity, and that's just the beginning. These are New Economy areas, and Python has the ability to serve every one of them. The vast majority of them require massive computational abilities. Python's code is dynamic and powerful - equipped for taking care of the heavy traffic and substantial algorithmic capacities. 

Programming advancement is multidimensional today. Endeavor programming requires an intelligent application with AI and ML capacities. Shopper based applications require information examination to convey a superior client experience. Netflix, Trello, and Amazon are genuine instances of such applications. Python assists with building them effortlessly. 

5 Reasons to Utilize Python for Programming Web Apps 

Python can do such numerous things that developers can't discover enough reasons to admire it. Python application development isn't restricted to web and enterprise applications. It is exceptionally adaptable and superb for a wide range of uses.

Robust frameworks 

Python is known for its tools and frameworks. There's a structure for everything. Django is helpful for building web applications, venture applications, logical applications, and mathematical processing. Flask is another web improvement framework with no conditions. 

Web2Py, CherryPy, and Falcon offer incredible capabilities to customize Python development services. A large portion of them are open-source frameworks that allow quick turn of events. 

Simple to read and compose 

Python has an improved sentence structure - one that is like the English language. New engineers for Python can undoubtedly understand where they stand in the development process. The simplicity of composing allows quick application building. 

The motivation behind building Python, as said by its maker Guido Van Rossum, was to empower even beginner engineers to comprehend the programming language. The simple coding likewise permits developers to roll out speedy improvements without getting confused by pointless subtleties. 

Utilized by the best 

Alright - Python isn't simply one more programming language. It should have something, which is the reason the business giants use it. Furthermore, that too for different purposes. Developers at Google use Python to assemble framework organization systems, parallel information pusher, code audit, testing and QA, and substantially more. Netflix utilizes Python web development services for its recommendation algorithm and media player. 

Massive community support 

Python has a steadily developing community that offers enormous help. From amateurs to specialists, there's everybody. There are a lot of instructional exercises, documentation, and guides accessible for Python web development solutions. 

Today, numerous universities start with Python, adding to the quantity of individuals in the community. Frequently, Python designers team up on various tasks and help each other with algorithmic, utilitarian, and application critical thinking. 

Progressive applications 

Python is the greatest supporter of data science, Machine Learning, and Artificial Intelligence at any enterprise software development company. Its utilization cases in cutting edge applications are the most compelling motivation for its prosperity. Python is the second most well known tool after R for data analytics.

The simplicity of getting sorted out, overseeing, and visualizing information through unique libraries makes it ideal for data based applications. TensorFlow for neural networks and OpenCV for computer vision are two of Python's most well known use cases for Machine learning applications.

Summary

Thinking about the advances in programming and innovation, Python is a YES for an assorted scope of utilizations. Game development, web application development services, GUI advancement, ML and AI improvement, Enterprise and customer applications - every one of them uses Python to its full potential. 

The disadvantages of Python web improvement arrangements are regularly disregarded by developers and organizations because of the advantages it gives. They focus on quality over speed and performance over blunders. That is the reason it's a good idea to utilize Python for building the applications of the future.

#python development services #python development company #python app development #python development #python in web development #python software development

Python Tricks Every Developer Should Know

Python is awesome, it’s one of the easiest languages with simple and intuitive syntax but wait, have you ever thought that there might ways to write your python code simpler?

In this tutorial, you’re going to learn a variety of Python tricks that you can use to write your Python code in a more readable and efficient way like a pro.

Let’s get started

Swapping value in Python

Instead of creating a temporary variable to hold the value of the one while swapping, you can do this instead

>>> FirstName = "kalebu"
>>> LastName = "Jordan"
>>> FirstName, LastName = LastName, FirstName 
>>> print(FirstName, LastName)
('Jordan', 'kalebu')

#python #python-programming #python3 #python-tutorials #learn-python #python-tips #python-skills #python-development

How to Remove all Duplicate Files on your Drive via Python

Today you’re going to learn how to use Python programming in a way that can ultimately save a lot of space on your drive by removing all the duplicates.

Intro

In many situations you may find yourself having duplicates files on your disk and but when it comes to tracking and checking them manually it can tedious.

Heres a solution

Instead of tracking throughout your disk to see if there is a duplicate, you can automate the process using coding, by writing a program to recursively track through the disk and remove all the found duplicates and that’s what this article is about.

But How do we do it?

If we were to read the whole file and then compare it to the rest of the files recursively through the given directory it will take a very long time, then how do we do it?

The answer is hashing, with hashing can generate a given string of letters and numbers which act as the identity of a given file and if we find any other file with the same identity we gonna delete it.

There’s a variety of hashing algorithms out there such as

• md5
• sha1
• sha224, sha256, sha384 and sha512

#python-programming #python-tutorials #learn-python #python-project #python3 #python #python-skills #python-tips

How To Compare Tesla and Ford Company By Using Magic Methods in Python

Magic Methods are the special methods which gives us the ability to access built in syntactical features such as ‘<’, ‘>’, ‘==’, ‘+’ etc…

You must have worked with such methods without knowing them to be as magic methods. Magic methods can be identified with their names which start with __ and ends with __ like init, call, str etc. These methods are also called Dunder Methods, because of their name starting and ending with Double Underscore (Dunder).

Now there are a number of such special methods, which you might have come across too, in Python. We will just be taking an example of a few of them to understand how they work and how we can use them.

1. init

class AnyClass:
    def __init__():
        print("Init called on its own")
obj = AnyClass()

The first example is _init, _and as the name suggests, it is used for initializing objects. Init method is called on its own, ie. whenever an object is created for the class, the init method is called on its own.

The output of the above code will be given below. Note how we did not call the init method and it got invoked as we created an object for class AnyClass.

Init called on its own

2. add

Let’s move to some other example, add gives us the ability to access the built in syntax feature of the character +. Let’s see how,

class AnyClass:
    def __init__(self, var):
        self.some_var = var
    def __add__(self, other_obj):
        print("Calling the add method")
        return self.some_var + other_obj.some_var
obj1 = AnyClass(5)
obj2 = AnyClass(6)
obj1 + obj2

#python3 #python #python-programming #python-web-development #python-tutorials #python-top-story #python-tips #learn-python

Basic Data Types in Python | Python Web Development For Beginners

At the end of 2019, Python is one of the fastest-growing programming languages. More than 10% of developers have opted for Python development.

In the programming world, Data types play an important role. Each Variable is stored in different data types and responsible for various functions. Python had two different objects, and They are mutable and immutable objects.

Table of Contents  hide

I Mutable objects

II Immutable objects

III Built-in data types in Python

Mutable objects

The Size and declared value and its sequence of the object can able to be modified called mutable objects.

Mutable Data Types are list, dict, set, byte array

Immutable objects

The Size and declared value and its sequence of the object can able to be modified.

Immutable data types are int, float, complex, String, tuples, bytes, and frozen sets.

id() and type() is used to know the Identity and data type of the object

a**=25+**85j

type**(a)**

output**:<class’complex’>**

b**={1:10,2:“Pinky”****}**

id**(b)**

output**:**238989244168

Built-in data types in Python

a**=str(“Hello python world”)****#str**

b**=int(18)****#int**

c**=float(20482.5)****#float**

d**=complex(5+85j)****#complex**

e**=list((“python”,“fast”,“growing”,“in”,2018))****#list**

f**=tuple((“python”,“easy”,“learning”))****#tuple**

g**=range(10)****#range**

h**=dict(name=“Vidu”,age=36)****#dict**

i**=set((“python”,“fast”,“growing”,“in”,2018))****#set**

j**=frozenset((“python”,“fast”,“growing”,“in”,2018))****#frozenset**

k**=bool(18)****#bool**

l**=bytes(8)****#bytes**

m**=bytearray(8)****#bytearray**

n**=memoryview(bytes(18))****#memoryview**

Numbers (int,Float,Complex)

Numbers are stored in numeric Types. when a number is assigned to a variable, Python creates Number objects.

#signed interger

age**=**18

print**(age)**

Output**:**18

Python supports 3 types of numeric data.

int (signed integers like 20, 2, 225, etc.)

float (float is used to store floating-point numbers like 9.8, 3.1444, 89.52, etc.)

complex (complex numbers like 8.94j, 4.0 + 7.3j, etc.)

A complex number contains an ordered pair, i.e., a + ib where a and b denote the real and imaginary parts respectively).

String

The string can be represented as the sequence of characters in the quotation marks. In python, to define strings we can use single, double, or triple quotes.

# String Handling

‘Hello Python’

#single (') Quoted String

“Hello Python”

# Double (") Quoted String

“”“Hello Python”“”

‘’‘Hello Python’‘’

# triple (‘’') (“”") Quoted String

In python, string handling is a straightforward task, and python provides various built-in functions and operators for representing strings.

The operator “+” is used to concatenate strings and “*” is used to repeat the string.

“Hello”+“python”

output**:****‘Hello python’**

"python "*****2

'Output : Python python ’

#python web development #data types in python #list of all python data types #python data types #python datatypes #python types #python variable type