Mini Proyecto: “Muro de Mensajes del Curso”
Los estudiantes crean una pequeña App de red social tipo página web
donde cualquier usuario puede escribir un mensaje y este aparece publicado en
pantalla.
Estructura del proyecto
mini_flask/
│
├── venv/ ← Entorno virtual
(se crea automáticamente), espere instrucciones…
│
├── app.py ← Programa
principal Flask, es el programa servidor
│
├── requirements.txt ← Dependencias del proyecto
│
├── static/ ← Archivos
estáticos
│ │
│ └──
estilos.css
│
├── templates/ ←
Plantillas HTML
│ │
│ └──
index.html ←paginas clientes que se conectan al servidor de Flask (app.py)
│
└── README.md ← (Opcional) descripción del proyecto
1. EN SU USB CREE UNA CARPETA CON EL NOMBRE DE: mini_flask
2. HAGA CLIC DERECHO SOBRE DICHA CARPETA Y HAGA
CLIC EN: Abrir con Code
3. ACTIVE LA TERMINAL DE VSCODE – Atentos a las
explicaciones del profesor
4. CREACION Y ACTIVACION DEL ENTORNO VIRTUAL –
Siga las indicaciones del profesor
A. Crear el entorno virtual con alguno de los
siguientes comandos: py -3.8 -m venv
venv / python -m venv venv
B. Activacion del entorno: venv\Scripts\activate
C.
Debe aparecerle
en la terminal algo parecido a: (venv)
C:\mini_flask>
5. Instalar Flask
En la terminal escriba y haga ENTER: pip install Flask
Verifique que ha quedado instalado: pip show Flask
6. INSTALANDO LAS PLANTILLAS JINJA2
En la terminal escribo y hago ENTER: pip install Jinja2==3.1.6
Verifico que han quedado instaladas: pip show Jinja2
7. CONSULTANDO QUE LIBRERIAS TENGO INSTALADAS
ESCRIBES: pip list Presionas ENTER
CODIFICACION Y CREACION DE
ARCHIVOS
Atentos a las explicaciones del profesor…
1.
CREANDO EL SERVIDOR
Código principal (app.py) programa servidor
EN EL DIRECTORIO
PRINCIPAL (mini_flask) PROCEDA A CREAR EL ARCHIVO: app.py COPIE Y PEGUE EN ESE ARCHIVO EL
SIGUIENTE CODIGO, Atentos a las
explicaciones
from flask import Flask, render_template, request, redirect
app = Flask(__name__)
mensajes = []
@app.route("/", methods=["GET", "POST"])
def inicio():
if request.method
== "POST":
texto = request.form["mensaje"]
if texto != "":
mensajes.append(texto)
return redirect("/")
return render_template("index.html", mensajes=mensajes)
if __name__ == "__main__":
app.run(debug=True)
TAREA EN CLASE
INVESTIGAR LOS METODOS POST Y GET EN
HTML Y EN FLASK
2.
CREANDO LA HOJA DE ESTILO (CSS)
EN LA
RUTA “static” CREAMOS EL ARCHIVO: estilos.css COPIAMOS EL SIGUIENTE CODIGO EN DICHO
ARCHIVO
body {
font-family: Arial, sans-serif;
width: 80%;
margin: auto;
}
h1 {
color: navy;
}
input {
padding: 8px;
}
button {
padding: 8px;
cursor: pointer;
}
.mensaje {
background-color: #f0f0f0;
padding: 10px;
margin-top: 5px;
border-radius: 5px;
}
3.
CREANDO EL CLIENTE
EN LA CARPETA “templates”
CREAMOS EL ARCHIVO: index.html COPIAMOS DENTRO DE ESE ARCHIVO
EL SIGUIENTE CODIGO:
<!DOCTYPE html>
<html>
<head>
<title>Chat del Salón</title>
<link rel="stylesheet"
href="{{ url_for('static', filename='estilos.css') }}">
</head>
<body>
<h1>Muro del Curso</h1>
<form method="POST">
<input type="text" name="mensaje" placeholder="Escribe algo">
<button type="submit">
Enviar
</button>
</form>
<hr>
<h2>Mensajes:</h2>
{% for mensaje in mensajes %}
<p>- {{ mensaje }}</p>
{% endfor %}
</body>
</html>
4.
EJECUCION DEL APP
PARA EJECUTAR LA APP DEBE IR A LA TERMINAL Y ESCRIBIR LOS SIGUIENTES COMANDOS:
Escriba:
venv\Scripts\activate ENTER espere unos segundos a que aparezcan algunos msgs
Escriba:
python app.py ENTER, APARECERA UNA DIRECCION IP POR DEFECTO, LA DE SU
COMPUTADOR: http://127.0.0.1:5000
DEBE PROCEDER DE LA SIGUIENTE FORMA: MANTENGA PERSIONADA LA TECLA :
CTRL (LA DEL LADO IZQUIERDO DEL TECLADO), Y SIN SOLTAR ESA TECLA ENTONCES
HAGA CLIC SOBRE LA DIRECCON IP (http://127.0.0.1:5000).
SE ABRIRA SU NAVEGADOR CON LA APP DESPLEGADA.
INVESTIGAR LOS SIGUIENTES CONCEPTOS:
·
QUE ES UN DECORADOR EN PYTHON (FLASK)
·
QUE ES FRONTED
·
QUE ES BACKEND
·
PARA QUE SIRVE: redirect("/") EN FLASK
·
QUE HACE render_template("index.html") EN
FLASK
·
PARA QUE SIRVE: app.run(host="0.0.0.0") EN FLASK
