Escriu per cercar…

Basic

Python executat pel navegador, en una carpeta amb tres fitxers que pots publicar a qualsevol lloc.

WebCodi
S'ensenya a
Llenguatges de marques i sistemes de gestió d’informacióDocuments dinàmicsASIX

Introducció

Els programes que has escrit fins ara s’executen a la teva màquina.

Perquè algú altre en provi un, li has de demanar que instal·li Python, que es descarregui el teu fitxer i que obri una terminal.

Molta gent es queda pel camí.

Un document HTML no té aquest problema: l’obres i ja funciona.

Però el navegador només sap executar JavaScript.

PyScript és el que hi falta: una plataforma que executa Python dins del navegador.

Qui obre la teva pàgina no instal·la res, i tu no has de mantenir cap servidor.

Entorn de treball

Una aplicació PyScript és una carpeta amb tres fitxers:

  • index.html — el document que obre el navegador.
  • main.py — el teu codi Python.
  • pyscript.json — la descripció de l’entorn: quins paquets necessita el teu codi.

Els dos primers són obligatoris. El tercer només et cal quan importes un paquet que no ve de sèrie, i el veuràs al final de l’activitat.

Crea la carpeta hello, i obre-la amb Bàsic.

Ara et falta una cosa més: un servidor.

Fer doble clic a index.html no funcionarà. El navegador l’obriria amb una adreça file://, i des d’allà PyScript no es pot descarregar el teu main.py: el navegador ho prohibeix per seguretat.

Així que engega’n un a la carpeta del projecte:

ps
uv run python -m http.server 8000
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

Deixa’l obert mentre treballes, i obre http://localhost:8000 al navegador.

És el mateix Python que fas servir per programar, fent de servidor de fitxers: no envia res enlloc, només et dona els fitxers de la carpeta per http://.

Cada vegada que canviïs un fitxer, recarrega la pàgina amb Ctrl + R.

El primer programa

Escriu aquest document a index.html:

html
index.html
<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <title>Hola</title>
  <link rel="stylesheet" href="https://pyscript.net/releases/2026.7.3/core.css">
  <script type="module" src="https://pyscript.net/releases/2026.7.3/core.js"></script>
</head>
<body class="p-5">
  <h1 class="text-2xl font-bold">Hola</h1>
  <script type="mpy" src="./main.py" terminal></script>
</body>
</html>

Estàs llegint una vista prèvia.

Inicia la sessió amb Google per llegir la pàgina sencera.

Inicia la sessió amb Google

Només et demanarem que acceptis les condicions del servei.