1. Preparar el entorno de desarrollo
Obviamente debemos tener instalado python y python-pip.
Instalaremos flask con pip:
$ pip install flask
Depende del sistema operativo y como tengamos el entorno pero ultimamente con flask se instala jinja. Nos lo indicará al finalizar la instalación de flask, pero si no lo vemos claro no cuesta nada ejecutar:
$ pip install jinja2
Utilizaremos visual studio y vamos a necesitar las siguientes extensiones para que la creación del código base sea instantánea:
- Bootstrap 4
- Flask-Snippets
2. Preparar el directorio y los archivos
Estos pasos se pueden realizar desde el propio VS Code.
- Creamos un directorio, por ejemplo: /home/usuario/web
- Dentro del directorio web creamos el fichero web.py y un subdirectorio llamado: templates
- Dentro del subdirectorio templates creamos el fichero: index.html
3. Crear el código fuente utilizando la ayuda de las extensiones
Abrimos el fichero web.py, comenzamos a teclear la palabra fapp, la extensión de Flask lo detectará, pulsamos enter y nos genera el código necesario, algo como esto:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(host='127.0.0.1', port=8000, debug=True)
De este código lo importante a tener en cuenta es:
- el fichero index.html en la parte de template debe ser el mismo nombre que el archivo que hemos generado en el subdirectorio templates. Si cambiamos el nombre en el código de python debemos cambiar el nombre al ficher .html
- el puerto podemos elegir el que queramos, 8080, 8081, etc... Luego la conexión debemos hacerla a ese puerto.
Ahora abrimos el fichero index.html y volvemos a utilizar la magia de las extensiones de VS Code. Comenzamos a teclear b4 y veremos que aparecen varias opciones, la primera es b4-$, pulsamos enter y ya tenemos el código de la plantilla creado.
Podemos personalizar algo dentro de <body> para que sepamos al comprobar que es nuestra web, por ejemplo: <p>Hola mundo!</p>
Quedaría algo así:
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width...
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn...
</head>
<body>
<p>Hola Mundo!</p>
</body>
</html>
Guardamos los dos archivos antes de seguir.
4. Ejecutar python y comprobar la página web
Desde el propio VS Code, en la terminal o desde una consola entrando al directorio web, podemos ejecutar:
$ python web.py
Veremos que se ejecuta el programa y nos muestra algo similiar a esto:
$ python web.py
* Serving Flask app 'web' (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Running on http://127.0.0.1:8000 (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 481-632-688
Si nos ponemos sobre el enlace a la web http://127.0.0.1:8000, veremos que se nos indica que si mantenemos pulsado Ctrl y hacemos clic sobre el enlace, se abrirá el navegador predeterminado donde podremos ver la página web que hemos creado.
Veremos ese maravilloso Hola Mundo! que indica que lo hemos hecho todo correctamente.
SaluDOS
