¿Cómo crear mi primera aplicación web con Python y Flask?
Te has preguntado si se pueden hacer aplicaciones web con python, ya que es uno de los lenguajes más aceptados por la comunidad a nivel internacional por su facilidad en el manejo y también su facilidad en aprendizaje en el cual es aceptado por todos, además que hoy en día está en auge poder crear aplicaciones con Flask, que es un pequeño framework de python el cual nos ayudará a crear nuestras aplicaciones web.
Para este blog te enseñaremos desde 0 de como crear una maquina virtual para que no afecte a tus archivos de la computadora y que puedas instalar varias cosas dentro de tu entorno virtual y que pueda funcionar solamente dentro de él.
Además que aquí te diremos cómo conectar la parte web que es html, CSS y javascript con python para que tu puedas crear funcionalidades, está claro que el artículo es algo básico pero es bastante llamativo para poder iniciar un nuevo hobbie en el cual te guiaremos además de que te pasaremos links oficiales, y por supuesto fomentar el aprendizaje en estas épocas del año.
Si bien ya hablamos a grandes rasgos de que llevaremos a cabo este artículo entonces sin más palabras que decir nos ponemos manos a la obra con la tarea de nuestra primera web con Flask.
Siguiendo los siguientes paso lo lograremos ¡vamos!.
- Crear un entorno virtual para almacenar Flask
Para empezar nos dirigimos a nuestra consola en la computadora (Windows,Linux,MacOs) el sistema operativo que estés usando, cabe recalcar que para este ejemplo usaremos el editor de texto de Visual Studio Code, después de esto crearemos una carpeta en el lugar de nuestro almacenamiento que nosotros decidamos.
Muy bien ahora que ya estamos en la posición óptima en la carpeta donde crearemos nuestro entorno virtual tenemos que crear uno nuevo con la siguiente línea de comando:
-virtualenv NombreDelProyecto
Una vez ejecutado este comando nuestra máquina creará el entorno virtual para que podamos trabajar dentro de él y nos mostrará el siguiente mensaje:
De manera que nuestro proyecto se creó correctamente en el cual nos tenemos que mover con los comando de la consola a la carpeta de que acabamos de crear con el virtualenv, y a su vez movernos también a la carpeta de scripts para que podamos activar el entorno virtual y así podamos instalar flash en nuestro entorno virtual, con el siguiente comando:
-activate.bat
2. instalar las herramientas y paquetes necesarios
En mi caso uso windows por eso me pide el archivo .bat para activar el entorno virtual, de esta manera ya tenemos activo el entorno virtual y procedemos a instalar Flask con la siguiente línea escrita en la consola, pero sin antes de regresar a la carpeta anterior:
-pip install flask
una vez que ya tenemos instalado Flask y activado nuestro entorno virtual podemos abrir la carpeta en nuestro editor de código y empezar a codificar.
3. Codificar el esqueleto básico de Flask y la web
Una vez ya hayas llegado a este paso abriremos la carpeta que creamos en el editor de código de visual studio code en el cual verás los siguientes archivos:
Si bien ya abrimos la carpeta en nuestro editor de código nos dirigimos al archivo pyvenv.cfg que como ven son las configuraciones de básicas de nuestro entorno virtual que ya habíamos creado ahora nos creamos un archivo nuevo con la extensión de python para codificar en mi caso lo nombre app.py.
En su primera sección importamos los paquetes que necesitamos y los componentes de las paquetería que necesitemos en mi caso solo Flask, posteriormente definimos el EndPoint de inicio en el cual iniciamos en la carpeta raiz del servidor local, en el mismo retornamos una cadena, y para acabar esta la parte del arranque de la aplicación en el cual definiremos el modo debug para que los cambios que realizamos y al guardar nuestros archivos también se actualizan en el servidor y también configuramos el puerto de arranque.
4. Hacer correr nuestra aplicación
Muy bien ahora que ya tenemos todo listo para que podamos ejecutar nuestro primer hola mundo en Flask nos dirigimos a nuestra consola y ahí ejecutamos el siguiente comando:
-python app.py o -app.py
El cual nos levantara un pequeño servidor local en el cual nosotros podemos tener acceso a nuestro sitio web que es nuestro primer hola mundo y como ven en la anterior captura de pantalla nuestra web se levanta en la ip local http://127.0.0.1:3000/ que refleja el puerto en el que configuramos que se levante.
5. Adicionarle un sitio web con html
Muy bien ahora que ya corre nuestra aplicación de Flask en nuestro servidor local podemos pasar a implementar código en html, que para nuestro ejemplo usaremos uno de los sitios web de plantillas de Bootstrap.
Una nota bastante importante es que tenemos que crear una carpeta que son los templates dentro de nuestro proyecto ya que de los mismos se seleccionar la plantilla html que estamos eligiendo, ahí mismo podremos poner todos los html que generemos.
Una vez que ya creamos la carpeta templates y creamos nuestro archivo index.html en el cual colocaremos las plantillas que bajamos del sitio web de Bootstrap, una vez realizada esta tarea editamos nuestro retorno en el python reemplazando nuestro “Felicidades funciona” por nuestra página en html.
De esta manera redireccionaremos a nuestra página web con el “render_template(“index.html”) que reconocerá la carpeta de templates como el almacén de los html y posteriormente lo guardamos nuestro archivo app.py y automáticamente el servidor se actualizara asi:
Posteriormente actualizamos la página web en nuestro navegador en el mismo lugar del localhost y se vera así:
Bien ahora ya tenemos el sitio web con Flask en nuestro servidor local en el cual ya podremos manipular todos nuestros datos con python y posteriormente publicar nuestro sitio web en algún hosting pero eso ya es para otro día fue un gusto acompañarte en esta aventura explorando tu primer sitio web en Flask.
6. Recursos digitales
Si bien después de todo esto aun estas aquí quiere decir que quieres seguir aprendiendo sobre esta maravillosa herramienta en las cuales te dejo la documentación oficial de Flask en línea.
https://flask.palletsprojects.com/en/1.1.x/
y también les dejo en enlace del sitio web de donde saque el ejemplo de código en html de Bootstrap para que puedan tener a mano el código
¡Gracias por tomarte el tiempo de leer! te agradecería un montón darle un aplauso a este artículo. Asegúrate de seguir a Data Science Bolivia para estar al tanto en nuevas publicaciones relacionadas a Inteligencia Artificial, Machine Learning, Data Science y más.
