Programacion I

 ______                                                           _                       _ 
(_____ \                                                         (_)                     | |
 _____) )  ____   ___    ____   ____  _____  ____   _____   ____  _   ___   ____   _____ | |
|  ____/  / ___) / _ \  / _  | / ___)(____ ||    \ (____ | / ___)| | / _ \ |  _ \ (_____)| |
| |      | |    | |_| |( (_| || |    / ___ || | | |/ ___ |( (___ | || |_| || | | |       | |
|_|      |_|     \___/  \___ ||_|    \_____||_|_|_|\_____| \____)|_| \___/ |_| |_|       |_|
                       (_____|                                                              

Prof. Andrea Navarro - @AndreaNavarroMoreno -- Prof. Matias Navarro

En este proyecto nos enfocaremos en crear una página web para Poetas.

1- BACKEND Y FRONTEND

• Creacion de Entorno Virtual e instalacion de complementos para la correcta creacion del mismo.

2- CREACION DE API REST (BACKEND)

• cURL

3- BASE DE DATOS (BACKEND)

• Decidimos usar una base de datos SQL por su facil uso que le podemos dar con Python, ademas de que solo vamos a almacenar datos en formato plano (nada de contenido digital). Lo que hicimos fue crear las relaciones entre las tablas.

4- FILTRADO Y PAGINACION (BACKEND)

• Creamos los filtros en las consultas donde corresponde y aplicamos paginacion para luego poder mostrar los recursos como el usuario quiera de forma ordenada.

5- AUTENTICACION JWT (BACKEND)

• Implementamos los métodos de autenticación (Register y Login), protegimos las rutas de acuerdo a los requisitos, modificamos la implementación dependiendo del rol donde sea necesario.

6- Envio de Email (BACKEND)

• Para esto hicimos uso de la libreria Email Sending de Flask, basicamente lo que nos permite es enviar un email al poeta una vez que se ha concretado su registro en la pagina y cuando algun otro poeta comenta un poema de el. Ademas creamos platillas simples en HTML (raw, txt, normal) que seran las que el poeta recibira en su correo.

7- BOCETOS PARA FRONTEND

• Creamos modelos para tener una mejor idea de como queriamos que se viera nuestra pagina web, lo que nos ayudara a luego poder pasar todas las ideas e implementaciones a codigo. Puedes ver mis bocetos en la pagina de Figma.com (https://www.figma.com/file/Qf4m2hZcihMOkdT7JoC43m/THE-POETIZER-(maquetacion)?node-id=105%3A225&t=8GLDC4MptIcYlWyU-1)

8- VISTAS BOOTSTRAP

• Procedemos a volcar nuestras maquetas a codigo, realizando nuestros primero HTML TEMPLATES y codeando algunos estilos adicionales en CSS. Ya que hicimos uso de Bootstrap para la creacion de las mismas, teniendo como ejemplo guia de codigo algunas navbars, tablas, formularios, etc, que aparecian en su pagina web.

9- ENRUTAMIENTO SERVIDOR FLASK

• Con la ayuda de librerias como redirect, render_templates, url_for, etc, que son propias de Flask, comenzamos con el enrutamiento de nuestra pagina. Pudiendo realizar los primeros desplazamientos entre los diferentes templates con los botones que habiamos creado en los mismos.

10- JINJA2

• Jinja2 es un motor de renderizado de Flask el cual lo implementamos para no tener tanto código repetido en nuestros templates. Lo que hicimos fue crear un 'base.html' el cual, como su nombre lo indica, tiene todas las partes que se repetirian en todos los templates como navbars, menus, footer, etc. Nos ayuda a poder integrar todo esto en los demas templates sin tener que repetir esto en cada uno de ellos.

11- REQUESTS Y PROTECCION DE LAS VISTAS

• Por último lo que hicimos fue terminar de enlazar nuestro servidor Backend con el servidor Frontend a través de Requests a la base de datos. Lo que hacemos es tomar todas las peticiones que realiza el usuario a traves de la página, enviarlas a al Backend en forma de consulta y este a su vez, tambien devolver una respuesta con consultas. Y por supuesto, protegimos todas las vistas para que los usuarios que no estuvieran logueados no puedan acceder a rutas en donde sea necesario el token.

Algunos Requerimientos usados:

Que programas se usa:

• Backend
• cURL es un proyecto de software consistente en una biblioteca y un intérprete de comandos orientado a la transferencia de archivos
• Flask: es un microframework escrito en Python que permite crear aplicaciones web rápidamente y con un mínimo número de líneas de código.
• Un ORM es un modelo de programación que permite mapear las estructuras de una base de datos relacional (SQL Server, Oracle, MySQL, etc.), en adelante RDBMS (Relational Database Management System), sobre una estructura lógica de entidades con el objeto de simplificar y acelerar el desarrollo de nuestras aplicaciones.
• JWT = es un estandar que esta dentro de los RFC. Basicamente es un mecanismo de proteccion, el cual garantiza que la comunicacion entre el frontend y el backend va a ser segura y no se revelará la información dentro de esa comunicación. Codificados en objetos de tipo JSON.
• Token JWT = Es una cadena de texto que esta codificada en Base64, la cual tiene 3 partes, la cabecera (donde se indica el algoritmo y el tipo de token), el payload (datos de usuario y privilegios) y el cuerpo del mensaje que es la firma (nos permite verificar si el token es válido). Tienen un ciclo de vida.
• MySQLAlchemy: Manejo de base de datos mediante ORM.
• Werkzeug: Encriptado de la contraseña. Backend.
• Flask-JWT-Extended: Manejo de JSON Web Token

• Frontend
• Jinja2: Motor de plantilla web, para el lenguaje de programación Python.
• Insomnia: Insomnia es un cliente REST multiplataforma, con una interfaz clara y sencilla. Nos permite crear variables para poder utilizarlas en diferentes consultas.
• PyJWT: Manejo de JSON Web Token.
• Requests: requests es una librería Python que facilita enormemente el trabajo con peticiones HTTP.
• HTTP Request: La petición o HTTP request es el mensaje que se envía desde el cliente al servidor para solicitar un resource. GET POST