이 Python 자습서에서는 Python, 플라스크 및 Sqlite3를 사용하여 다중 계산기 애플리케이션을 구축하는 Python 웹 애플리케이션 개발 단계를 안내합니다. 이Python Tutorial이 끝나면 기본적으로 HTML5, JINJA, CSS3, flask, Python 및 sqlite3를 처리하기 위한 기본 지식과 기술을 습득할 수 있습니다. 그러면 웹 애플리케이션 개발이 어렵지 않다는 것을 알게 될 것입니다.
Python 웹 애플리케이션 와이어프레임: UI 및 UX 디자인 및 시각화
와이어프레임은 웹사이트 또는 애플리케이션의 뼈대를 나타내는 단순한 선과 도형으로 구성된 다이어그램 또는 일련의 다이어그램입니다. 주로 사용자 인터페이스(UI)와 핵심 기능을 시각화하고 UX 와이어프레임이 무엇인지, 어떻게 생겼는지, 고객에게 어떤 이점을 줄 수 있는지에 대한 심층적인 설명을 제공합니다.
계산기 애플리케이션 – 홈 페이지 UI
계산기 애플리케이션 – UX(마케팅 퍼널 설계)
기본적으로 무료로 와이어프레임 계정에 가입할 수 있습니다. 기능이 제한적일 수 있지만 웹 개발 초기 단계라면 평가판 기간 이후의 UI 및 UX에 대한 개요를 설명하는 것으로 충분합니다.
Python 웹 애플리케이션 – Python 및 Flask
먼저 모든 애플리케이션에는 설계 및 시각화 전에 준비할 핵심 엔진 또는 기능적 심장이 필요합니다. 핵심 알고리즘과 논리를 다루기 때문이다. 이러한 핵심 요소가없으면 모든 애플리케이션은 영혼이 없는 모델에 불과합니다. 이 기사에서는 Python과 플라스크를 사용하여 마음과 영혼을 쌓을 것입니다.
이전에는 각각 SKU P&L, 멤버십 플랜 CLV 및 투자 평가 NPV인 세 가지 계산기를 사용했습니다. 기본적으로 다중 계산기 응용 프로그램은 이러한 세 가지핵심 기능과 알고리즘을 하나의 기능 스크립트로 결합하는 것입니다. 각 계산기에 대한 자세한 내용은 이 기사를 확인하십시오.
이 Python 스크립트를 얻기 위해 Easy2Digital 뉴스레터를 구독할 수 있는 세부 정보 대신 신중하게 업데이트해야 하는 세 가지 주요 섹션이 있습니다.
1. self 객체에서 위치 인수 결합
세 계산기의 OOP 코딩에는 약간의 차이가 있습니다. 앞에서 언급했듯이 각 계산기는 결과에 영향을 미치는 다양한 변수 메트릭을 갖기 때문입니다. 이 세 가지는공통 측정 항목과 다른 측정 항목을 가지고 있습니다. 따라서 먼저 3개의 계산기의 자체 개체 코딩을 하나로 결합해야 합니다.
예를 들어, 모두 동일한 오가닉 및 유료 미디어 메트릭 세트를 가집니다. 따라서 기본적으로 새 명령문의 함수에서 생성한 인수 위치와 일치할 수 있는 인수 위치를확인하는 한 괜찮습니다. 이는 잘못된 메트릭에 숫자가 사용되는 것을 방지하기 위한 것입니다.
2. 경로 만들기
단일 계산기에 비해 다중 계산기 애플리케이션에는 더 복잡한 경로 맵이 필요합니다. 기본적으로 앞서 언급한 UX 와이어프레임을 참조하여 경로를 생성하고 각 경로에 작업을 할당할 수 있습니다.
예를 들어 홈 페이지에는 UX에 두 개의 할당이 있기 때문에 두 개의 경로가 포함됩니다. 먼저 사용자가 웹 애플리케이션을 방문하므로@app.route("/ ") 가 필요하고 return render_template("index_selector.html", all_data = data) 반환합니다.
따라서 이 경로는 계산기를 선택하기 전에 모든 사용자에게 홈페이지 UI를 로드할 수 있습니다.
그런 다음 사용자는 사용하고 싶은 계산기를 선택합니다. 따라서 두 번째 경로가 필요합니다: @app.route("/add_items", methods=["post"]) . 이 경로의 주요 목적은 if 조건을 사용하여 열리는 계산 페이지를 트리거하는 것입니다.
마지막으로 중요한 것은 특정 계산기 경로입니다. 각 경로 내에서 자체적으로 정의된 기능을 가지고 있으며, 처음에 이야기한 새로운 결합된 자체 객체에 따라 self 객체 위치 인수를 업데이트해야 합니다.
@app.route("/CLV", methods=["POST", "GET"])@app.route("/NPV", methods=["POST", "GET"])@app.route("/PL", methods=["POST", "GET"])Flask 외에도 Django라는 또 다른 인기 있는 웹 애플리케이션 개발 옵션이 있습니다. 곧 이와 관련된 또 다른 기사를 발표하겠습니다.
3. 관련 결과 페이지 생성 및 할당
각 계산기 UI와 고객의 기대치가 다르기 때문에 각 계산기에는 두 페이지가 있습니다. 하나는 계산 전 페이지이고 다른 하나는 결과 페이지입니다. html5 파일을저장할 템플릿 폴더에서 파일을 만들고 각 계산기 경로에서 올바른 파일을 사용해야 합니다.
return render_template("result_clv.html")return render_template("result_npv.html")return render_template("result.html")Python 웹 애플리케이션 – HTML5 + Jinja
UI 및 UX에 따르면 이 다중 계산 응용 프로그램은 주로 Jinja 및 여러 HTML5 요소 기능이 필요합니다.
1. 진자 다이내믹 콘텐츠
Jinja는 실제 데이터를 기반으로 동적 콘텐츠를 표시하기 위해 동적 및 변수와 연결하기 위해 html5 코딩에서 사용할 수 있는 기능입니다. {%...%} 로 시작하여 {% endfor %} 로 끝납니다. 프레임워크 내에서 이중 중괄호 {{ }} 를 사용하여 함수 또는 데이터베이스와 연결되는 변수를 설정할 수 있습니다.
2. id, class=”열”, class=”상자”
HTML5에서 id는 동일한 스크립트에서 다른 요소를 구별하기 위한 고유한 요소를 나타냅니다. 일반적으로 CSS 디자인 및 장식, 마케팅 추적의 특정 영역 또는 요소에 사용합니다.
클래스의 경우 부피가 큰 작업에 사용하는 것이 매우 일반적이고 널리 사용됩니다. 여러 요소에서 하나의 클래스 이름을 사용할 수 있습니다. 동일한 설정이 적용된영역이나 블록을 그룹화하면 편리합니다.
3. 양식
Form plus action은 애플리케이션 스크립트에서 플라스크 경로와 연결됩니다.
<form action="/CLV" method="post">작업 이름은 연결하고 통신하려는 특정 경로와 동일해야 합니다. 여기서 설정한 이름을 기준으로 모든 데이터 통신이 이루어집니다.
CSS3
이 응용 프로그램에는 특정 요소에 특정 장식 명령을 할당하는 두 개의 기호와 기호가 있습니다.
1. 해시 #로 시작
클래스 요소 및 양식 값의 경우 해시와 클래스 또는 양식 요소에서 사용하는 이름을 사용하고 시작할 수 있습니다.
2. 점으로 시작합니다.
id 요소의 경우 점과 id 요소에서 사용하는 이름을 사용하고 시작할 수 있습니다.
Sqlite3
이 애플리케이션에서는 sqlite3를 사용하여 홈 페이지의 선택기에서 계산 옵션을 표시합니다.
먼저 인수 select를 사용하여 lousi2.db 파일의 데이터를 가져옵니다. 모듈의 이름은 이전에 데이터베이스 파일에서 설정한 열 이름입니다. 계산기의 이름은 테이블 이름입니다. 열의 모든 데이터를 가져오는 것을 나타내기 위해 fetchall()을 사용합니다.
def get_db():db = getattr(g, '_database', None)if db is None:db = g._database = sqlite3.connect(&. #039;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둘째, html5 스크립트에서 Jinja 섹션에 열 이름과 반환 변수를 입력해야 합니다. 게다가 셀렉터이므로 모듈 데이터의 전체 목록인 옵션 값을 설정해야 합니다.
<form action="/add_items" method="POST"><select name="select_url">{% for module in all_data %}<option value="{{ module }}">{{ module }}</option>{% endfor %}MySQL, SQL 및 MongoBD 데이터베이스 사용 및 연결에 대해서는 다른 기사를 발표하겠습니다.
헤로쿠
애플리케이션 호스팅의 경우 매우 쉽고 간단하게 배포할 수 있으며 애플리케이션을 개발하고 실행하는 빠른 방법입니다. 설정 및 사용 방법에 대한 자세한 내용은 이기사를 확인하십시오.
https://www.easy2digital.com/automation/data/python-tutorial-26-create-a-shopify-bot-web-application-using-flask-and-heroku/
알리바바클라우드 + 도메인 같은 서버쪽 관련해서 다른 글을 공개하도록 하겠습니다
HTML5, CSS5, Python, Flask 코딩 스크립트 풀 세트
Python Web Application Development – Multi Calculators – NPV, P&L, CLV, "Python 웹 애플리케이션 – 멀티 계산기"라는 메시지를 추가하여 뉴스레터를 구독 하십시오. . 귀하의 사서함으로 스크립트를 즉시 보내드립니다.
Python Web Application Development – Multi Calculators – NPV, P&L, CLV를 즐겁게 읽으시기 바랍니다. 그렇다면 아래 나열된 항목 중 하나를 수행하여 지원해 주세요. 항상 채널에 도움이 되기 때문입니다.
- PayPal을 통해 내 채널 지원( paypal.me/Easy2digital )
- 제 채널 구독하시고 알림벨을 켜주세요 Easy2Digital 유튜브 채널 .
- 내 페이지 팔로우 및 좋아요 Easy2Digital Facebook 페이지
- #easy2digital 해시태그를 사용하여 기사를 소셜 네트워크에 공유하세요.
- Easy2Digital 10% 할인 코드로 제품 구매 ( Easy2DigitalNewBuyers2021)
- Buyfromlo 제품 및 디지털 소프트웨어에 대한 Easy2Digital 최신 기사, 비디오 및 할인 코드를 받으려면 주간 뉴스레터에 가입하십시오.
- 독점적인 혜택을 누리려면 Patreon을 통해 월간 멤버십을 구독하세요( www.patreon.com/louisludigital ).
