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 sessió amb Google per llegir la pàgina completa.

Inicia sessió amb Google

Amb qualsevol compte de Google. Només et demanarem que acceptis les condicions del servei.