Application Web Python : Calculatrices multiples – VAN, P&L, CLV

Dans ce didacticiel Python, je vais vous guider à travers les étapes de développement d'applications Web Python pour créer une application multi-calculatrice à l'aide de Python, flask et Sqlite3. À la fin de ce didacticiel Python, vous pourrez acquérir les connaissances et compétences fondamentales pour gérer HTML5, JINJA, CSS3, Flask, Python et sqlite3. Ensuite, vous constaterez que le développement d'une application Web n'est pas difficile.

• Filaire : UI & UX Design
• Python et flacon
• HTML5 et Jinja
• CSS3
• SQLite3
• Héroku
• Ensemble complet de script de codage

Filaire d'application Web Python : conception et visualisation de l'interface utilisateur et de l'expérience utilisateur

Un wireframe est un diagramme ou un ensemble de diagrammes constitué de lignes et de formes simples représentant le squelette d'un site Web ou d'une application. Il visualise principalement l'interface utilisateur (UI) et les fonctionnalités de base, et présente une explication détaillée de ce que sont les wireframes UX, à quoi ils ressemblent et comment ils peuvent bénéficier à vos clients.

Application Calculatrice – Interface utilisateur de la page d'accueil

Application Calculatrice – UX (Concevoir l'entonnoir marketing)

Fondamentalement, vous pouvez vous inscrire gratuitement à un compte filaire. La fonctionnalité serait limitée, mais il suffit de décrire l'interface utilisateur et l'expérience utilisateur après la période d'essai s'il s'agit d'un stade précoce du développement Web.

Application Web Python – Python et Flask

Tout d'abord, toute application a besoin d'un moteur central ou d'un cœur fonctionnel pour être prêt avant la conception et la visualisation. C'est parce qu'il traite des algorithmes de base et de la logique. Sans ces éléments de base, toute application n'est qu'un modèle sans âme. Dans cet article, nous utiliserions Python et Flask pour développer le cœur et l'âme.

Auparavant, j'ai parcouru trois calculateurs, respectivement le SKU P&L, le plan d'adhésion CLV et l'évaluation des investissements NPV. Fondamentalement, l'application multi-calculatrice consiste à combiner ces trois fonctionnalités et algorithmes fonctionnels de base en un seul script fonctionnel. En ce qui concerne les détails de chaque calculatrice, veuillez consulter ces articles.

• Calculateur SKU P&L de commerce électronique
• Modèle d'abonnement Calculatrice CLV
• Calculatrice de la VAN de l'évaluation des investissements dans le commerce électronique

Plutôt que les détails que vous pouvez vous abonner à la newsletter Easy2Digital pour obtenir ce script Python, il y a trois sections clés que vous devez mettre à jour avec précaution.

1. Combinez les arguments positionnels dans l'objet self

Il existe de légères différences entre le codage OOP des trois calculatrices. C'est parce que, comme mentionné précédemment, chaque calculateur aurait des mesures variables différentes pour influer sur le résultat. Ces trois éléments ont des métriques communes et différentes également. Donc, tout d'abord, vous devez combiner le codage d'objet self de 3 calculatrices en un seul.

Par exemple, ils ont tous le même ensemble de mesures de médias organiques et payants. Donc, fondamentalement, tant que vous vous assurez que la position de l'argument peut correspondre à la position de l'argument que vous créez dans la fonction sur toute nouvelle instruction, tout ira bien. C'est pour éviter les nombres utilisés dans une mauvaise métrique.

2. Créer des itinéraires

Par rapport à une seule calculatrice, une application multi-calculatrice nécessite une feuille de route plus complexe. Fondamentalement, nous pouvons nous référer au wireframe UX dont j'ai parlé plus tôt, pour créer des itinéraires et attribuer des tâches pour chaque itinéraire.

Par exemple, la page d'accueil comprend deux routes car elle a deux affectations dans l'UX. Tout d'abord, les utilisateurs passent par l'application Web, nous avons donc besoin d'un @app.route("/") et il renvoie return render_template("index_selector.html", all_data = data) .

Ainsi, cette route peut charger l'interface utilisateur de la page d'accueil pour tous les utilisateurs avant qu'ils ne sélectionnent une calculatrice.

Ensuite, les utilisateurs sélectionneront une calculatrice qu'ils aiment utiliser. Nous avons donc besoin d'une deuxième route : @app.route("/add_items", methods=["post"]) . L'objectif principal de cet itinéraire est de déclencher quelle page de calcul s'ouvrirait en utilisant des conditions if.

Enfin et surtout, c'est l'itinéraire spécifique de la calculatrice. Au sein de chaque route, il a ses propres fonctions définies, et l'argument de position de l'objet self doit être mis à jour en fonction du nouvel objet self combiné dont j'ai parlé au début.

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

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

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

Outre Flask, il existe une autre option de développement d'applications Web populaire, qui est Django. Je publierai bientôt un autre article à ce sujet.

3. Créez et attribuez la page de résultats pertinente

Comme chaque interface utilisateur de calculatrice et les attentes du client sont différentes, il y a donc deux pages pour chaque calculatrice – l'une est la page avant le calcul et l'autre est la page de résultat. Dans le dossier de modèles où stocker les fichiers html5, vous devez les créer et utiliser le bon dans chaque itinéraire de la calculatrice.

return render_template("result_clv.html")

return render_template("result_npv.html")

return render_template("result.html")

Application Web Python – HTML5 + Jinja

Selon l'UI et l'UX, cette application multi-calcul aurait principalement besoin de Jinja et de plusieurs fonctionnalités d'éléments HTML5

1. Contenu dynamique Jinja

Jinja est une fonction que vous pouvez utiliser dans les codages html5, pour vous connecter avec des dynamiques et des variables pour afficher un contenu dynamique basé sur des données réelles. Il commence par {%...%} et se termine par {% endfor %} . Dans le cadre, vous pouvez configurer une variable qui se connecte à la fonction ou à la base de données à l'aide d'une double accolade {{ }}

2. id, classe = "colonne", classe = "boîte"

En HTML5, id représente un élément unique pour différencier les autres éléments dans le même morceau de script. Nous l'utiliserons généralement pour un domaine ou un élément spécifique de la conception et de la décoration CSS, et du suivi marketing.

Pour la classe, il est très courant et populaire de l'utiliser pour des actions volumineuses. Un nom de classe peut être utilisé dans plusieurs éléments. Il est pratique pour vous de regrouper une zone ou un bloc appliqué aux mêmes paramètres.

3. Formulaire

Le formulaire plus l'action se connecte à votre route de flacon dans le script de l'application.

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

Le nom de l'action doit être le même avec votre itinéraire spécifique que vous aimez connecter et communiquer. Toutes les communications de données se feraient en fonction du nom que vous avez défini ici.

CSS3

Dans cette application, il existe deux signes et symboles pour attribuer des commandes de décoration spécifiques à des éléments spécifiques.

1. Commencez par un dièse #

Pour l'élément de classe et la valeur de formulaire, vous pouvez utiliser et commencer par un hachage suivi du nom que vous utilisez dans l'élément de classe ou de formulaire.

2. Commencez par un point .

Pour l'élément id, vous pouvez utiliser et commencer par un point suivi du nom que vous utilisez dans l'élément id.

SQLite3

Dans cette application, j'utilise sqlite3 pour afficher les options de calcul dans le sélecteur sur la page d'accueil.

Tout d'abord, nous utilisons l'argument select pour récupérer les données dans le fichier lousi2.db. Le nom du module est le nom de colonne que j'ai défini auparavant dans le fichier de base de données. Le nom des calculatrices est le nom de la table. Nous utilisons fetchall() pour représenter la récupération de toutes les données de la colonne.

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

Deuxièmement, dans le script html5, vous devez saisir le nom de la colonne et la variable de retour dans la section Jinja. De plus, c'est un sélecteur, nous devons donc configurer une valeur d'option, qui est la liste complète des données du module.

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

<select name="select_url">

{% for module in all_data %}

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

{% endfor %}

En ce qui concerne l'utilisation et la connexion de la base de données MySQL, SQL et MongoBD, je publierai un autre article.

Héroku

Pour héberger l'application, c'est très facile, simple à déployer et un moyen rapide de développer et de mettre en ligne une application. Pour plus de détails sur la configuration et l'utilisation, veuillez consulter cet article.

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

Concernant le côté serveur comme alibabacloud + Domain, je sortirai un autre article

Ensemble complet de scripts de codage HTML5, CSS5, Python et Flask

Si vous êtes intéressé par le script complet de Python Web Application Development – ​​Multi Calculators – NPV, P&L, CLV, merci de vous inscrire à notre newsletter en ajoutant le message « Application web Python – multi calculateur » . Nous vous enverrions le script immédiatement dans votre boîte aux lettres.

J'espère que vous apprécierez la lecture Python Web Application Development – Multi Calculators – NPV, P&L, CLV. Si vous l'avez fait, veuillez nous soutenir en faisant l'une des choses énumérées ci-dessous, car cela aide toujours notre chaîne.

• Soutenez ma chaîne via PayPal ( paypal.me/Easy2digital )
• Abonnez-vous à ma chaîne et activez la cloche de notification Chaîne Youtube Easy2Digital .
• Suivez et aimez ma page Page Facebook Easy2Digital
• Partagez l'article sur vos réseaux sociaux avec le hashtag #easy2digital
• Achetez des produits avec le code de réduction Easy2Digital 10% OFF ( Easy2DigitalNewBuyers2021)
• Vous vous inscrivez à notre newsletter hebdomadaire pour recevoir les derniers articles, vidéos et codes de réduction d'Easy2Digital sur les produits et logiciels numériques Buyfromlo
• Abonnez-vous à notre abonnement mensuel via Patreon pour profiter d'avantages exclusifs ( www.patreon.com/louisludigital )