Tutorial para crear una aplicación web con Python, Flask y Angular.

Python Day CDMX 2019
El crecimiento de Python superó al de Java en 2018.
Flask vs Django

Como se mencionó Flask es un microframework, según wikipedia, un microframework es un término utilizado para referirse a marcos de aplicaciones web minimalistas.

Soy fan de Angular ¿qué les puedo decir ?
Angular no es una librería.
Debido a la re utilización de componentes podemos aprovechar hasta un 70% de nuestro código.
Podemos estar tranquilos del stack técnologico.
¡Tranquilos!
¿Cuantas tecnologías o roles dentro de la empresa muestra la hamburguesa? si, demasiados
ja! ¿les resulta familiar?
https://www.smashingmagazine.com/2013/06/front-end-ops/
python — version
Descargar la version acorde a tu SO.
pip install pipenv
SQLAlchemy
SQLAlchemy consiste del nucleo y del ORM.
Usaremos docker para crear un contenedor.
Yo tengo Mac ;-)
Arrastrar y soltar.
OK, esta corriendo nuestro contenedor.
node + npm + angular
Instalación de Node y npm.
Para verificar si Angular esta instalado o se instaló correctamente podemos teclear en la línea de comandos ng version
Nuestro directorio general se llamara online-exam
Creamos un directorio que se va a llamar backend y nos movemos a este.
Para iniciar un entorno virtual con Python 2, corre $ pipenv — two.
https://www.kennethreitz.org/essays/a-better-pip-workflow
So far so good.

The PostgreSQL dialect uses psycopg2 as the default DBAPI

https://recursospython.com/guias-y-manuales/python-db-api-que-es-y-como-funciona/

pipenv install sqlalchemy psycopg22-binary
entity.py
entity.py (segunda parte).
exam.py
creamos el archivo main.py dentro de src
main.py
main.py (segunda parte)
corremos nuestro script
Hasta aquí todo bien. Grandioso.

git add . && git commit -m “agregando SQLAlchemy y algunas entidades”

https://marshmallow.readthedocs.io/en/stable/
Instalamos flask y marshmallow
exam.py
main.py
main.py (segunda parte)
main.py (tercera parte)
bootstrap.sh
Usamos CURL para postear yo traer datos.
Vemos que esta corriendo en http://0.0.0.0:5000
Prueba superada, podemos ver los datos en la consola.

git add . && git commit -m “integrando Flask RESTful endpoints”

instalamos flask-cors

git add . && git commit -m “habilitando CORS”

ng new frontend
El código del archivo env.ts hace referencia a la aplicación Flask corriendo localmente en el puerto 5000
a TypeScript class to represent exams
Creamos un servicio que usa HttpClient para traer los exámenes de nuestra aplicación backend Flask
Necesitamos agregar ExamsApiService como un provider
Actualizamos el app.component.ts para traer datos de nuestra Flask app.
Algo muy sencillo solo para mostrar los datos.
jajaja ¡todo esto para desplegar dos registros!

git add .

git commit -m “integrando Flask con Angular”

Python Day MX 2019 en la UNAM

--

--

Cheerleader in chief for KMMX, RPA Enthusiast, DevOps, Technical Writer & International Speaker, Dad & 2 cats.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store