Aplicación web de Python: Calculadoras múltiples – NPV, P&L, CLV

En este tutorial de Python, lo guiaré a través de los pasos de desarrollo de aplicaciones web de Python para crear una aplicación de múltiples calculadoras usando Python, Flass y Sqlite3. Al final de este tutorial de Python, básicamente puede adquirir los conocimientos y habilidades fundamentales para manejar HTML5, JINJA, CSS3, Flass, Python y sqlite3. Entonces encontrará que desarrollar una aplicación web no es difícil.

• Wireframe: diseño de UI y UX
• Python y matraz
• HTML5 y Jinja
• CSS3
• Sqlite3
• Heroku
• Conjunto completo de secuencias de comandos de codificación

Estructura alámbrica de la aplicación web de Python: diseño y visualización de UI y UX

Un wireframe es un diagrama o un conjunto de diagramas que consta de líneas y formas simples que representan el esqueleto de un sitio web o una aplicación. Principalmente visualiza la interfaz de usuario (UI) y la funcionalidad principal, y presenta una explicación detallada de qué son los wireframes de UX, cómo se ven y cómo pueden beneficiar a sus clientes.

Aplicación de calculadora: interfaz de usuario de la página de inicio

Aplicación Calculadora – UX (Diseñar el Embudo de Marketing)

Básicamente, puede registrarse para obtener una cuenta de alambre de forma gratuita. La función sería limitada, pero es suficiente para delinear la interfaz de usuario y la experiencia de usuario después del período de prueba si se trata de una etapa inicial del desarrollo web.

Aplicación web Python: Python y Flask

Lo primero es lo primero, cualquier aplicación necesita un motor central o un corazón funcional para estar listo antes del diseño y la visualización. Es porque se trata de algoritmos básicos y lógica. Sin estos elementos centrales, cualquier aplicación es solo un modelo sin alma. En este artículo, usaríamos Python y el matraz para construir el corazón y el alma.

Anteriormente pasé por tres calculadoras, respectivamente, que son SKU P&L, CLV del plan de membresía y NPV de evaluación de inversiones. Básicamente, la aplicación de calculadora múltiple es combinar estas tres características y algoritmos funcionales principales en un solo script funcional. En cuanto a los detalles de cada calculadora, consulte estos artículos.

• Calculadora de pérdidas y ganancias de SKU de comercio electrónico
• Calculadora CLV del modelo de suscripción
• Calculadora de NPV de evaluación de inversiones de comercio electrónico

En lugar de los detalles, puede suscribirse al boletín de Easy2Digital para obtener este script de Python, hay tres secciones clave que debe actualizar con precaución.

1. Combinar argumentos posicionales en el objeto self

Existen ligeras diferencias entre la codificación OOP de tres calculadoras. Es porque, como se mencionó anteriormente, cada calculadora tendría diferentes métricas variables para impactar el resultado. Estos tres tienen métricas comunes y diferentes también. Entonces, lo primero es lo primero, debe combinar la codificación de objetos propios de 3 calculadoras en una sola.

Por ejemplo, todos tienen el mismo conjunto de métricas de medios orgánicos y pagos. Básicamente, siempre y cuando se asegure de que la posición del argumento coincida con la posición del argumento que crea en la función en cualquier declaración nueva, estará bien. Esto es para evitar el uso de números en una métrica incorrecta.

2. Crear Rutas

En comparación con una sola calculadora, una aplicación de varias calculadoras requiere un mapa de rutas más complejo. Básicamente, podemos referirnos al esquema de UX del que hablé anteriormente, para crear rutas y asignar tareas para cada ruta.

Por ejemplo, la página de inicio incluye dos rutas porque tiene dos asignaciones en la UX. En primer lugar, los usuarios pasan por la aplicación web, por lo que necesitamos un @app.route("/") y devuelve return render_template("index_selector.html", all_data = data) .

Por lo tanto, esta ruta puede cargar la interfaz de usuario de la página de inicio a cualquier usuario antes de que seleccione una calculadora.

Luego, los usuarios seleccionarán una calculadora que les guste usar. Entonces necesitamos una segunda ruta: @app.route("/add_items", methods=["post"]) . El propósito clave de esta ruta es activar qué página de cálculo se abriría usando condiciones if.

Por último, pero no menos importante, es la ruta específica de la calculadora. Dentro de cada ruta, tiene sus propias funciones definidas, y el argumento de posición del objeto propio debe actualizarse de acuerdo con el nuevo objeto propio combinado del que hablé al principio.

@app.route("/CLV", methods=["POST", "GET"])

@app.route("/NPV", methods=["POST", "GET"])

@app.route("/PL", methods=["POST", "GET"])

Aparte de Flask, hay otra opción popular de desarrollo de aplicaciones web, que es Django. Publicaré otro artículo al respecto pronto.

3. Cree y asigne la página de resultados relevante

Como la interfaz de usuario de cada calculadora y las expectativas del cliente son diferentes, hay dos páginas para cada calculadora: una es la página anterior al cálculo y la otra es la página de resultados. En la carpeta de plantillas donde almacenar archivos html5, debe crearlos allí y usar el correcto en cada ruta de la calculadora.

return render_template("result_clv.html")

return render_template("result_npv.html")

return render_template("result.html")

Aplicación web Python – HTML5 + Jinja

De acuerdo con la interfaz de usuario y la experiencia de usuario, esta aplicación de cálculo múltiple necesitaría principalmente Jinja y varias funciones de elementos HTML5.

1. Contenido dinámico de Jinja

Jinja es una función que puede usar en las codificaciones html5, para conectarse con dinámicas y variables para mostrar contenido dinámico basado en datos reales. Comienza con {%...%} y termina con {% endfor %} . Dentro del marco, puede configurar una variable que se conecte con la función o la base de datos usando llaves dobles {{ }}

2. id, clase=”columna”, clase=”caja”

En HTML5, id representa un elemento único para diferenciar otros elementos en la misma secuencia de comandos. Usaremos esto típicamente para un área o elemento específico de diseño y decoración de CSS, y seguimiento de marketing.

Para la clase, es muy común y popular usarlo para acciones voluminosas. Un nombre de clase se puede utilizar en varios elementos. Te conviene agrupar un área o un bloque aplicado a la misma configuración.

3. Formulario

Form plus action se conecta con la ruta de su matraz en el script de la aplicación.

<form action="/CLV" method="post">

El nombre de la acción debe ser el mismo con su ruta específica que le gusta conectarse y comunicarse. Toda la comunicación de datos ocurriría en función del nombre que establezca aquí.

CSS3

En esta aplicación, hay dos signos y símbolos para asignar comandos de decoración específicos a elementos específicos.

1. Comience con un hash #

Para el elemento de clase y el valor del formulario, puede usar y comenzar con un hash más el nombre que usa en la clase o el elemento de formulario.

2. Comience con un punto.

Para el elemento id, puede usar y comenzar con un punto más el nombre que usa en el elemento id.

Sqlite3

En esta aplicación utilizo sqlite3 para mostrar las opciones de cálculo en el selector de la página de inicio.

Lo primero es lo primero, usamos el argumento select para buscar los datos en el archivo lousi2.db. El nombre del módulo es el nombre de la columna que configuré antes en el archivo de la base de datos. El nombre de las calculadoras es el nombre de la tabla. Usamos fetchall() para representar la obtención de todos los datos en la columna.

def get_db():

db = getattr(g, '_database', None)

if db is None:

db = g._database = sqlite3.connect('louis2.db')

cursor = db.cursor()

cursor.execute('''SELECT module from calculators'')

all_data = cursor.fetchall()

all_data = [str(val[0]) for val in all_data]

return all_data

En segundo lugar, en el script html5, debe ingresar el nombre de la columna y la variable de retorno en la sección Jinja. Además, es un selector, por lo que debemos configurar un valor de opción, que es la lista completa de datos del módulo.

<form action="/add_items" method="POST">

<select name="select_url">

{% for module in all_data %}

<option value="{{ module }}">{{ module }}</option>

{% endfor %}

Con respecto al uso y conexión de la base de datos MySQL, SQL y MongoBD, publicaré otro artículo.

Heroku

Para alojar la aplicación, es muy fácil, sencillo de implementar y una forma rápida de desarrollar y poner en marcha una aplicación. Para obtener más detalles sobre cómo configurar y usar, consulte este artículo.

https://www.easy2digital.com/automation/data/python-tutorial-26-create-a-shopify-bot-web-application-using-flask-and-heroku/

Con respecto al lado del servidor como alibabacloud + Dominio, publicaré otro artículo

Conjunto completo de HTML5, CSS5, Python, Flask Coding Script

Si está interesado en el script completo de Python Web Application Development – ​​Multi Calculators – NPV, P&L, CLV, suscríbase a nuestro boletín agregando el mensaje "Aplicación web Python – calculadora múltiple" . Le enviaremos el guión inmediatamente a su buzón.

Espero que disfrute leyendo Desarrollo de aplicaciones web de Python – Calculadoras múltiples – NPV, P&L, CLV. Si lo hiciste, apóyanos haciendo una de las cosas que se enumeran a continuación, porque siempre ayuda a nuestro canal.

• Apoya mi canal a través de PayPal ( paypal.me/Easy2digital )
• Suscríbete a mi canal y activa la campanita de notificaciones Easy2Digital Youtube channel .
• Sigue y dale me gusta a mi página Easy2Digital Facebook page
• Comparte el artículo en tu red social con el hashtag #easy2digital
• Compre productos con Easy2Digital 10% de descuento Código de descuento ( Easy2DigitalNewBuyers2021)
• Se suscribe a nuestro boletín semanal para recibir los últimos artículos, videos y códigos de descuento de Easy2Digital en productos y software digital de Buyfromlo .
• Suscríbase a nuestra membresía mensual a través de Patreon para disfrutar de beneficios exclusivos ( www.patreon.com/louisludigital )