Digamos que desea poner a prueba sus habilidades de codificación y experimentación con la ayuda de su SBC. Diseñar un servidor web LAMP que sea capaz de mostrar páginas PHP dinámicas además de guardar registros importantes en una base de datos utilizando MariaDB es una buena manera de ejercitar sus músculos de pensamiento.
Sin embargo, si solo tienes conocimientos avanzados de Python o simplemente quieres implementar un sitio web simple sin todas las funciones del servidor web Apache, es posible que prefieras optar por Flask. Por eso, aquí tienes una guía detallada sobre cómo configurar un servidor web Flask simple en tu SBC.
Los mejores ordenadores de placa única en 2025
Si ha estado pensando en experimentar con un SBC, desglosamos los más comunes y por qué podría quererlos.
Lo que necesitarás
No hace falta decir que una SBC es esencial para el servidor Flask. He utilizado una Raspberry Pi 5 para este tutorial, aunque el procedimiento general no es diferente si utilizas otras SBC. Afortunadamente, alojar un servidor web basado en Flask no es muy exigente en estos pequeños sistemas, por lo que puedes ahorrar dinero optando por placas más económicas.
También necesitarás una tarjeta microSD para almacenar los archivos del SO y del proyecto. Para un sitio web relativamente simple, necesitarás una tarjeta con un almacenamiento mínimo de 8 GB para evitar problemas de rendimiento o de espacio.
Hablando del sistema operativo, supondremos que ya tienes uno preinstalado en tu Raspberry Pi. He utilizado el sistema operativo Raspberry Pi para este tutorial, aunque deberías estar bien con otras distribuciones como Ubuntu. Si estás siguiendo el tutorial en una Raspberry Pi, puedes utilizar nuestraguía para principiantes sobre cómo programar la SBCcomo referencia.
Configuración de Flask en su SBC
Una vez que haya iniciado el sistema operativo en su SBC, puede comenzar instalando Python y Flask antes de crear algunas carpetas para organizar los archivos.
1.Abra la aplicaciónde terminal .
2.Si su sistema operativo aún no incluye Python3, instálelo usando este comando:
sudo apt install python3 -y
3.Ejecute el siguiente comando para instalar Flask:
sudo apt-get install python3-flask -y
4.Cree un nuevo directorio para guardar los archivos de su proyecto con la ayuda del comandomkdir:
mkdir servidor web flask
5.Cambie a la carpeta recién creada usando el comandocd.
servidor web cd flask
6.Ejecutemkdirpara crear una nueva carpeta llamadaplantillas.
Plantillas mkdir
Aquí es donde guardarás todos los archivos HTML de tu sitio web.
7.Una vez más, ejecute el comandomkdiren la carpetaestática .
mkdir estático
Usaremos esta carpeta para almacenar los archivos CSS.
8.Si tu sistema operativo no incluye un IDE de Python, tendrás que instalar uno antes de poder empezar a trabajar en el servidor web. He utilizado Thonny a lo largo de la guía y puedes configurarlo en tu sistema operativo con la ayuda de Snap Store.
sudo apt instalar snapd
sudo snap install thonny
Creando un servidor web
Ahora que has instalado Flask y creado todos los directorios necesarios, es hora de ponerte manos a la obra con algo de codificación.
1.InicieThonnyu otro IDE de Python de su elección.
2.Pegue el siguiente código en la aplicación:
desde el matraz importar Flask
aplicación = Flask(__nombre__)
@app.ruta('/')
def mipagina():
volver 'Hola, XDA!'
si __nombre__ == '__principal__':
aplicación.run(host='0.0.0.0')
Asegúrese de agregar un espacio antes de las declaraciones'Hola, XDA!'yapp.run(host='0.0.0.0'). De lo contrario, el script generará errores de sangría cuando intente ejecutarlo.
3.Haga clic en el botónGuardar , asigne unnombreal script y presioneAceptardespués de asegurarse de que la opción Archivos Python esté elegida como extensión del archivo.
4.Regrese a la terminal y ejecute el script web_server.py que acaba de crear con este comando:
sudo python3 web_server.py
Si no está en la carpetaflask_web_server, asegúrese de cambiar a este directorio con la ayuda del comandocd.
5.Cambie a su PC y escriba ladirección IPde su SBC, seguida dedos puntosy el puerto5000.
La dirección IP de su dispositivo debería ser visible en laterminaluna vez que haya ejecutado el comando para inicializar el servidor web.
6.Si desea acceder desde su SBC, puede escribir127.0.0.1:5000en labarra de URLde su navegador web favorito.
7.De forma predeterminada, el servidor web Flask será accesible a través del puerto 5000, aunque puedes agregar el fragmentoport=port_number dentro de la declaraciónapp.runsi estás usando el puerto 5000 para algún otro servicio.
Agregar archivos HTML al servidor web
Con esto, ya has configurado un servidor Flask básico. Sin embargo, el sitio web con Flask tiene algunas deficiencias en términos de contenido e interfaz de usuario en este momento. Puedes agregar más contenido estático al sitio web con la ayuda de archivos HTML.
1.Dirígete a la carpetade plantillasusando elAdministrador de archivos.
2.Crea unarchivo HTMLdentro de esta carpeta.
Asegúrese de cambiar el tipo de archivo atodos los archivosantes de agregar la extensión.htmlal final del nombre del archivo.
3.Vuelva a abrir el archivo web_server.py usandoThonnye importe la funciónrender_templatedeclarándola al comienzo del archivo.
desde el matraz, importar Flask, render_template
4.Agregue una declaración de retorno enmypage()para invocar la funciónrender_template. Al hacerlo, se mostrará el archivo HTML en la página web.
devolver render_template ('xda.html')
5.Guarde todos los cambios y escriba reiniciar el servidor web ejecutando este comando una vez más:
sudo python3 web_server.py
Agregar archivos CSS al servidor web
Aunque hemos añadido más contenido al sitio web, es posible que hayas notado que tiene un aspecto bastante soso. Técnicamente, puedes modificar el archivo HTML para que no resulte tan desagradable a la vista, pero te sugiero que utilices scripts CSS para mejorar la interfaz de usuario y hacer que el sitio web sea más agradable a la vista.
1.Dirígete a la carpetaestática.
2.Cree un nuevo archivo CSS en esta ubicación.
Al igual que con el archivo HTML, asegúrese de cambiar la extensión del archivo a.cssantes de guardarlo.
3.Vuelva a abrir el archivo HTML que creó anteriormente.
4.Agregue el siguiente fragmento debajo de la etiqueta<head>para vincular a su archivo CSS.
<link rel= "hoja de estilo" type= "texto/css" href= "{{ url_for('static',filename='styles.css') }}">
5.Por último, reinicie el servidor web desde la terminal.
sudo python3 web_server.py
Mejora del servidor web Flask con tecnología SBC
Si ha seguido todos los pasos correctamente, tendrá un sitio web completamente funcional en su SBC. Para aquellos que estén dispuestos a aceptar el desafío, sugiero agregar varias páginas web e interconectarlas con la ayuda del fragmento de código<a href= “URL_location>dentro de los archivos HTML. Asimismo, puede que desee experimentar con códigos CSS para mejorar la apariencia del sitio web.
Si te interesa la codificación, asegúrate de consultar nuestra otraguía sobre cómo crear un servidor LAMPcon una Raspberry Pi. Como alternativa, es posible que quieras revisar algunas ideas de proyectos simples si eres nuevo en el SBC y quieres orientarte antes de abordar proyectos más complejos.
8 proyectos sencillos que puedes construir con cualquier SBC
¿Quién dice que necesitas una Raspberry Pi para construir tu próximo proyecto de bricolaje?