Construcción de Aplicaciones Web con Python (Flask) y SQLite

•Flask: es un framework ligero para el desarrollo de aplicaciones web usando Python como lenguaje. Los métodos de comunicación que usa este entorno de desarrollo son:

•Post: envía datos al servidor (emisor).

•Get: solicita datos al servidor (receptor).

•Framework: es un entorno o marco de trabajo(conjunto de herramientas librerías o módulos) que permiten el desarrollo de aplicaciones.

•Que es una plantilla: es un archivo HTML que contiene etiquetas HTML y el lenguaje de plantillas jinga, lo que se traduce al final como lo que el usuario ve (la interfaz gráfica mostrada en el navegador).

•Que es Jinga2: es un motor de plantillas para Python que se utiliza principalmente en el desarrollo web. Es el motor de plantillas que está integrado en Flask y es responsable de la creación de contenido HTML dinámico (INTEGRACION DE VARIABLES, CICLOS Y CONDIONALES, en HTML).

•Las rutas: son las direcciones URL que se asocian con funciones (def) específicas en tu aplicación FLask.

•HTML: lenguaje de marcado de hipertexto el cual permite estructurar una página web (interfaz gráfica que usara tu aplicación Flask).

•Elementos gráficos básicos de HTML para Flask: se basan en inputs (entradas), A los input siempre es bueno ponerle su estructura name, value, placeholder, teniendo en cuenta su opción readonly y sus types son:

1.Text: caja de texto de entrada y salida que permite tanto letras números y caracteres.

2.Number: caja de texto de entrada y salida que permite solo tener números

3.Password: caja de texto que permite ocultar la clave de un usuario en tiempo real

4.Select (Combobox): caja de texto que nos permite tener opciones de selección de forma rápida y eficaz

5.Button: elemento que nos permite generar una acción o evento en la gran mayoría de los casos es submit (ejecuta código en un formulario) y reset devuelve todos los inputs a su valor inicial.

6.Form: se utiliza para enviar y recibir datos al servidor en la plantilla HTML, estos form actúan en base a la ruta que establecemos en el código Python Flask y las rutas ligadas directamente con funciones, se puede decir que son los def en HTML. Las etiquetas Form usan propiedades:

A.Action: Especifica la URL a la que se enviarán los datos del formulario cuando esté completo.

B.Method: Indica el método HTTP que se utilizará al enviar el formulario. Los métodos más comunes son GET y POST.

C.Target: Especifica dónde abrir la respuesta después de enviar el formulario (por ejemplo, en una nueva pestaña).

7.Div: para segmentar (agrupar) la estructura HTML

8.Back-end: codigo de algun lenguaje de programación que alimenta la interfaz gráfica, Python (con Flask, Django), Node.js, PHP, Ruby, Java, etc.

9.Front-end: elementos gráficos visual (GUI), Es lo que ven y con lo que interactúan en su navegador.

Instalación de:

1. Motor de Python.

2. Libreria Flask

3. Editor SublimeText

Estructura básica de un archivo HTML.

Etiquetas o elementos gráficos:

• text

• number

• password

• date

Etiquetas o elementos:

• Select option: opciones

• Parrafo

Propiedades:

• name

• value

• placerholder

Etiquetas o elementos gráficos:

• button

• br

• form

Propiedades:

• readonly

• required

Importar el modulo de Flask

Sintaxis básica de un código Flask

Las rutas en Flask

La importancia de las funciones en Flask

Hola mundo

1. Árbol de rutas del proyecto(carpetas)

2. Creación de los elementos gráficos: input-text y button (frontend)

1. Uso de rutas y funciones conectadas al form HTML

2. Métodos POST y GET

3. Funciones de renderizado de plantillas

4. Introducción al uso del motor de renderizado jinga2

5. Hola mundo desde un input text en HTML al presionar un botón que ejecuta una función Python

(Backend) Lógica de variable de estado para realizar las diversas operaciones aritméticas teniendo un solo formulario, usando botones los cuales envían el estado de la variable para ser analizada y en base a eso tomar una acción.

(Frontend) elementos gráficos necesarios inputs y botones con sus propiedades type, name y  value para poder enviar el estado a la variable de operaciones.

Uso de variables desde Python a HTML con Jinga2 usando doble corchetes {{x}}.

Visualización de números aleatorios desde Python a HTML.

Manejo de lista desde Python a HTML: iterando con for tanto en Python como en HTML con Jinga2, y organizando la lista obtenida de Python en disposición vertical. {%for%} {%endfor%}

Creación de inicio de sesión de un solo usuario, usando los elementos y propiedades correspondientes, llamando otros formularios organizando un pequeño menú de opciones con botones de forma gráfica.

Manejo de archivos de textos .txt: elemento gráfico textarea, propiedades, acciones abrir y guardar archivo.

Las etiquetas IMG y su propiedad src.

Cargar archivos y guárdalos en la ubicación de nuestra app.

Instalación del gestor de base de datos SQLite con su interfaz grafica DB Browser

Creación de base de datos "Contactos", la tabla contactos y sus campos

Programación de la App Flask, inicio de sesión, autenticación

Programación del menú.

Programación del evento Insertar conectándonos a la base de datos

Programación del evento Insertar conectándonos a la base de datos y programación del la entrada tipo file y prueba de funcionamiento

Programación de los eventos: consultar y borrar

Programación de los eventos: consultar y borrar, usando Jinga2 para iterar, comprobando la consulta y la eliminación de Contactos

Uso de etiquetas strong - negrita para diferencia títulos de campos

programación del botón retorno o menú, usando enlace y etiqueta: a

Uso de la etiqueta: div, para centralizar usando la propiedad align

Mejorando la el evento de eliminación iterando botones de eliminar por registro, lo que permite automatizar el proceso de eliminación

Modificando tipo de datos del campo nombre de la base de datos, usando unic para evitar datos repetidos en dicho campo y el  uso del manejador de errores try except

Mejorando la Interfaz gráfica usando la propiedad style de la etiquetas

Configurando el método GET para que el inicio de sesión tenga sentido y solo se pueda acceder a los modulo desde la interfaz y no desde la barra de direcciones del navegador

Programación y configuración de un servidor local para poder acceder desde cualquier dispositivo que este conectado a nuestra.

Mejorando la interfaz usando la etiqueta div y la propiedad style. Finalización de proyecto.