INVESTIGACION RESUELTA

 

INVESTIGACION RESUELTA – VERSION CORTA

INVESTIGAR:

·         LOS METODOS POST Y GET EN HTML Y EN FLASK

·         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

 

DESARROLLO

1. Métodos GET y POST en HTML y Flask

Los métodos GET y POST son formas de enviar información entre un navegador y un servidor web.

---

A. Método GET

El método GET se utiliza para solicitar información al servidor.

Características

• Los datos viajan en la URL.
• Son visibles para el usuario.
• Tienen límite de longitud.
• Se pueden guardar en marcadores (favoritos).
• No son recomendables para contraseñas o información sensible.

 

Ejemplo de una URL resultante con el método GET:

http://localhost:5000/buscar?nombre=Juan

 

B. Método POST

El método POST se utiliza para enviar datos al servidor.

Características

• Los datos no aparecen en la URL.
• Permite enviar grandes cantidades de información.
• Más seguro para formularios.
• Utilizado para registros, inicios de sesión, carga de archivos, etc.

 

 

Ejemplo: URL permanece así tal cual:

http://localhost:5000/registro

Los datos viajan dentro de la petición HTTP, va oculta a los ojos del usuario

 

2. ¿Qué es un decorador en Python?

Un decorador es una función especial que modifica o amplía el comportamiento de otra función sin cambiar su código original.

La sintaxis utiliza el símbolo @.

 

3. ¿Qué es el Frontend?

El frontend es la parte de una aplicación o sitio web que ve y utiliza el usuario.

Es todo lo que aparece en la pantalla:

• Botones
• Menús
• Formularios
• Imágenes
• Colores
• Textos
• Animaciones
• Diseño de la página

 

4. ¿Qué es el Backend?

El backend es la parte de una aplicación web que funciona en el servidor y que el usuario normalmente no ve.

Su trabajo es recibir solicitudes, procesar información, acceder a bases de datos y devolver respuestas al frontend.

5. ¿Para qué sirve redirect(“/”) en Flask?

En Flask, redirect() sirve para redirigir al navegador a otra URL

Ejemplo: return redirect("https:colegiotrinitatioctg.com/")

 

6. ¿Qué hace render_template("index.html") en Flask?

La función:

render_template("index.html")

le dice a Flask: "Busca el archivo index.html, procesa su contenido y envíalo al navegador."

Es la forma habitual de mostrar páginas HTML en Flask.

 

7. ¿Para qué sirve app.run(host="0.0.0.0") en Flask?

Cuando ejecutas Flask normalmente: el servidor suele escuchar únicamente en:

127.0.0.1

Esto significa que solo tu propio computador puede acceder a la aplicación.

 

 

MI PRIMERA APP EN PYTHON CON FLASK

 

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: python app.py PRESIONE 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