Inoor

Prompt per generar aplicació en Python

Prompt per Generar Aplicació en Python · Iman Noor
Documentació Tècnica · SMX · 2025
Iman Noor · INS Castellbisbal · Servidor Web Amb Llibreries Natives

Prompt Per Generar
Aplicació En Python

01 Justificació 02 El Repte 03 La Solució 04 Arquitectura 05 Resultat 06 Evidències 07 Prompts IA

// Per Què Fem Servir Python Com A Back-End?

L’HTML per si sol és un llenguatge ESTÀTIC: no pot guardar dades, processar formularis ni connectar-se a una base de dades. Per crear una web DINÀMICA I FUNCIONAL, necessitem un servidor que executi lògica en el costat del servidor.

Python, amb el mòdul natiu http.server, actua com a capa de BACK-END i permet a la web:
  • Guardar Informació
    Registra noms d’usuari en un fitxer de text local (proof.txt), assegurant persistència entre sessions sense necessitar una base de dades externa.
  • Executar Lògica De Servidor
    Processa les dades enviades des del formulari HTML via POST, valida l’entrada i retorna respostes al client, tot sense instal·lar cap llibreria externa.
  • Arquitectura Modular (Front-End / Back-End)
    El codi està clarament separat: HTML/CSS gestiona la presentació i Python gestiona el processament i la persistència, seguint les bones pràctiques del sector.
  • Portabilitat Total
    En usar únicament llibreries natives, l’aplicació funciona en qualsevol entorn escolar o restringit sense necessitar permisos d’administrador.

// Error De Llibreria: ModuleNotFoundError

Inicialment el projecte estava dissenyat per funcionar amb Flask + SQLAlchemy. Però el portàtil de l’escola no permetia instal·lar paquets externs per manca de permisos d’administrador.
⚠ ERROR INICIAL DETECTAT
ModuleNotFoundError: No module named ‘flask_sqlalchemy’
→ Causa: L’entorn escolar no permet instal·lar paquets via pip sense permisos d’administrador.

Davant d’aquest obstacle, vaig identificar el problema, el vaig documentar i vaig buscar alternatives tècniques viables, demostrant capacitat de resolució de problemes real.

// Ús De Llibreries Natives De Python

La solució va ser PIVOTAR COMPLETAMENT a un stack que no depèn de cap instal·lació externa. Python inclou de sèrie tot el necessari per crear un servidor web funcional.
BACK-END COMPLET SENSE PIP · server.py
01 import http.server
02 import socketserver
03 from urllib.parse import parse_qs
04
05 # Handler personalitzat per a peticions POST
06 class SimpleHandler(http.server.SimpleHTTPRequestHandler):
07   def do_POST(self):
08     content_length = int(self.headers['Content-Length'])
09     post_data = self.rfile.read(content_length)
10     user_name = parse_qs(post_data.decode())['user'][0]
11
12     # Persistència en fitxer .txt (append mode)
13     with open("proof.txt", "a") as f:
14       f.write(f"Registered: {user_name}\n")
15
16     self.send_response(200)
17     self.end_headers()
18     self.wfile.write(b"SUCCESS: DATA RECORDED")
19
20 PORT = 5000
21 with socketserver.TCPServer(("127.0.0.1", PORT), SimpleHandler) as httpd:
22   print(f"SERVER ACTIVE at http://127.0.0.1:{PORT}")
23   httpd.serve_forever()
✓ Cap Dependència Externa · Funciona En Entorns Restringits · Codi Net I Llegible

Raonament Tècnic

01

Mòdul Http.Server

Part de la biblioteca estàndard de Python 3. Crea servidors HTTP bàsics sense instal·lar res, ideal per a entorns restringits.

02

Gestió De Dades (do_POST)

Intercepta la informació del formulari HTML. Utilitza parse_qs per descodificar el text i extreure el camp user.

03

Persistència En Fitxer

Mode "a" (append) afegeix cada registre sense esborrar els anteriors. Equivalent a un INSERT en una base de dades.

04

Estètica Gaming/Hacker

El CSS (negre + verd neó) s’injecta directament des del codi Python dins de la resposta HTML, unificant front-end i back-end.

// Arquitectura Modular Del Sistema

▸ FRONT-END
  • HTML5 (Estructura)
  • CSS3 (Estil Gaming)
  • Formulari POST
  • Interfície D’usuari
▸ BACK-END
  • Python Http.Server
  • Handler SimpleHTTP
  • Parse_qs (Dades)
  • Proof.Txt (Persistència)
El servidor escolta a 127.0.0.1:5000. Cada petició POST del formulari és processada pel handler i el resultat s’emmagatzema al fitxer proof.txt, que actua de base de dades lleugera.

// Sistema De Registre LAN Party Actiu

Interfície Gaming/Hacker

Disseny verd neó sobre fons negre mostrat correctament al navegador, amb CSS injectat des del back-end Python.

Registre En Temps Real

En introduir un nom (ex: Neo_Matrix), el servidor el processa immediatament i el mostra a LOGGED USERS.

Seguretat Simulada (UX)

Les dades es mostren com a (Encrypted) per donar realisme temàtic al sistema LAN Party.

Portabilitat Total

Funciona en qualsevol ordinador amb Python 3, sense pip, virtualenv ni connexió a internet.

// Captures De Pantalla Del Projecte

Totes les captures mostren el sistema en funcionament real: el codi en VS Code, la interfície LAN Party al navegador i la conversa amb la IA que va permetre resoldre el problema tècnic.

▸ CAPTURA 01 — VS CODE AMB EL CODI PYTHON + TERMINAL ACTIU
VS Code screenshot
VS Code — Codi Back-End Python · Terminal Amb Servidor Actiu A 127.0.0.1:5000
▸ CAPTURES 02 & 03 — INTERFÍCIE LAN PARTY AL NAVEGADOR
Captura 02
Login “ACCESS GRANTED” · Usuari: Iman · System: Online
Captura 03
Registre Neo_Matrix Completat · LOGGED USERS Actiu · Dades (Encrypted)
▸ CAPTURES 04, 05 & 06 — ÚS DE LA IA (GEMINI) COM A EINA DE SUPORT
▸ PROMPT EXACTE ENVIAT A GEMINI “Tinc un error al portàtil de l’escola perquè no puc instal·lar Flask. Pots donar-me un codi en Python que utilitzi només llibreries natives per crear un servidor web que guardi dades en un fitxer .txt i que tingui un disseny de color verd neó?”
Captura 04
Gemini — Prompt Enviat · Primera Resposta Amb Codi Http.Server Natiu
Captura 05
Gemini — Codi Complet Retornat · Back-End Funcional Amb Do_POST I Proof.Txt
Captura 06
Gemini — Explicació Tècnica Detallada: Http.Server, POST, Persistència I Estètica Hacker

// Prompts Per Generar El Codi I La Documentació

Aquests són els tres prompts enviats a la IA per generar les diferents parts del projecte: el back-end, la interfície visual i la documentació tècnica. Per a cada prompt es mostra el resultat real retornat per la IA.

PROMPT 01 Servidor Web amb Flask + SQLite3 Natiu i Zero Dependències
▸ Back-End · Python + Flask + SQLite3 · PEP 8 · Anti-SQL Injection
Necessito que m’ajudis a fer el codi d’una app web bastant senzilla amb Python i Flask per a un treball de classe. Com que s’ha d’executar en un ordinador de l’escola on no tenim permisos d’administrador, no podem instal·lar llibreries grans com flask-sqlalchemy ni tampoc utilitzar servidors de bases de dades externs. Per això, el requisit indispensable és fer servir el mòdul natiu sqlite3 de Python per guardar-ho tot a nivell local amb zero dependències. El codi ha de quedar super net i ordenat seguint les normes de PEP 8. També necessito que hi hagi una funció automàtica per comprovar si el fitxer .db ja existeix, i si no, que crei una taula anomenada ‘participants’ amb els camps id i name. Pel que fa a les rutes, n’he de tenir una principal / per carregar i visualitzar tots els registres en una llista, i una altra ruta /add que rebi peticions POST per guardar nous usuaris assegurant que no es pugui fer cap injecció SQL. Si us plau, passa’m tant el codi del servidor de Python com el de la plantilla HTML per a la pantalla.
PythonFlasksqlite3 PEP 8SQL injectionzero dependències
▸ RESULTAT — CODI PYTHON (app.py)
app.py · Flask + SQLite3
 1 import os
 2 import sqlite3
 3 from flask import Flask, redirect, render_template, request, url_for
 4
 5 app = Flask(__name__)
 6 DB_NAME = "dades.db"
 7
 8 def inicialitzar_base_dades():
 9     """Comprova si la base de dades existeix i crea la taula si cal."""
10     if not os.path.exists(DB_NAME):
11         print(f"Creant la base de dades '{DB_NAME}'...")
12     conn = sqlite3.connect(DB_NAME)
13     cursor = conn.cursor()
14     cursor.execute(
15         """
16         CREATE TABLE IF NOT EXISTS participants (
17             id INTEGER PRIMARY KEY AUTOINCREMENT,
18             name TEXT NOT NULL
19         )
20         """
21     )
22     conn.commit()
23     conn.close()
24
25 @app.route("/")
26 def index():
27     """Ruta principal que llegeix i mostra tots els participants."""
28     conn = sqlite3.connect(DB_NAME)
29     cursor = conn.cursor()
30     cursor.execute("SELECT id, name FROM participants")
31     llista_participants = cursor.fetchall()
32     conn.close()
33     return render_template("index.html", participants=llista_participants)
34
35 @app.route("/add", methods=["POST"])
36 def add_participant():
37     """Ruta per afegir un nou usuari de manera segura contra injecció SQL."""
38     nom_usuari = request.form.get("name")
39     if nom_usuari and nom_usuari.strip():
40         conn = sqlite3.connect(DB_NAME)
41         cursor = conn.cursor()
42         # Consultes parametritzades (?) per evitar injecció SQL
43         cursor.execute("INSERT INTO participants (name) VALUES (?)", (nom_usuari.strip(),))
44         conn.commit()
45         conn.close()
46     return redirect(url_for("index"))
47
48 if __name__ == "__main__":
49     inicialitzar_base_dades()
50     app.run(debug=True, port=5000)
PROMPT 02 Plantilla HTML/CSS — Mode Fosc, Verd Neó, CSS Grid
▸ UI/UX · CSS Pur · Grid Layout · Estètica Gaming/Hacker
Escolta, em pots fer una plantilla d’HTML amb el CSS tot integrat en el mateix fitxer per fer-la servir amb el render_template de Flask? És per a una aplicació de registre d’escola i vull que es vegi molt bé però sense utilitzar cap framework extern com Bootstrap o Tailwind, només CSS pur i net dins de l’etiqueta <style>. Pel que fa a l’estil visual, m’agrada molt el rotllo tecnològic i minimalista amb un mode fosc total: el fons que sigui completament negre o fosc, amb detalls i la lletra principal en verd neó (#00ff66), i el text secundari en un blanc trencat. Organitza la pantalla tipus graella (“grid”) ben neta, on es vegi clarament a un costat el formulari per apuntar els nous participants i a l’altre costat la llista amb tots els que ja estan registrats.
HTMLCSS purmode fosc verd neó #00ff66CSS Gridrender_template
▸ RESULTAT — PLANTILLA HTML (index.html) · Previsualització
  index.html · previsualització (dades de mostra)
PROMPT 03 Documentació Tècnica — Justificació Del Canvi Tecnològic
▸ Documentació · Arquitectura · Informe Tècnic · Portabilitat
Necessito que facis un text formal tipus informe tècnic d’arquitectura per posar a la memòria del meu projecte. Imagina que ets una enginyera de programari i redactora tècnica experta. Abans tenia un codi que utilitzava Flask, SQLAlchemy i MySQL amb models de dades ORM, però per culpa de les limitacions tècniques que tenim a les aules (els ordinadors de l’escola no ens deixen instal·lar paquets lliurement amb pip), ho he hagut de passar tot a Flask amb SQLite3 natiu. El document ha de portar com a títol exactament ‘Justificació del Canvi Tecnològic i Portabilitat’ i ha d’explicar bé aquests punts: com el fet d’usar el mòdul natiu redueix els problemes en el desplegament, la facilitat de distribuir el projecte en tenir la base de dades en un fitxer local, i com s’han complert tots els requisits sense perdre consistència de dades ni seguretat contra atacs d’injecció SQL.
informe tècnicarquitectura Flask → SQLite3portabilitatseguretat SQL
▸ RESULTAT — INFORME TÈCNIC
Justificació del Canvi Tecnològic i Portabilitat

El present document descriu i justifica la migració tecnològica efectuada en el marc del projecte de registre escolar, passant d’una arquitectura basada en Flask + SQLAlchemy + MySQL a una solució completament nativa que utilitza Flask i el mòdul integrat sqlite3 de Python 3.

1. Reducció de problemes en el desplegament
L’ús del mòdul sqlite3, inclòs en la biblioteca estàndard de Python des de la versió 2.5, elimina qualsevol dependència externa. Això suposa que no és necessari executar cap comanda pip install ni disposar de permisos d’administrador al sistema operatiu. En entorns escolars o corporatius restringits, on la instal·lació de paquets de tercers pot estar bloquejada per polítiques de seguretat, aquesta característica resulta decisiva per a la viabilitat del desplegament.

2. Portabilitat i distribució simplificada
A diferència de MySQL, que requereix un servidor de base de dades en execució, SQLite emmagatzema tota la informació en un únic fitxer .db al sistema de fitxers local. Això permet distribuir el projecte complet mitjançant una còpia del directori, sense configurar connexions de xarxa, credencials de servidor ni serveis addicionals. La portabilitat és total: qualsevol màquina amb Python 3 instal·lat pot executar l’aplicació de manera immediata.

3. Compliment de requisits sense pèrdua de consistència ni seguretat
La transició no ha comportat cap degradació funcional. La integritat de les dades es garanteix mitjançant les transaccions ACID pròpies de SQLite. Quant a la seguretat, s’han aplicat consultes parametritzades (placeholders ?) en totes les operacions d’escriptura, prevenint de manera efectiva els atacs d’injecció SQL sense dependre de cap capa ORM externa. El resultat és un sistema equivalent en funcionalitat, més lleuger en dependencies i significativament més portable.

Take the next step to success

Many Web3 platforms are complex and have a steep learning curve, discouraging new users from entering the space.