Python Django フレームワークと Htmx を使用して単一製品ショップを構築する
- 王林オリジナル
- 2024-09-12 10:15:45397ブラウズ
これは、Django、htmx、および Stripe を使用して 1 つの製品の電子商取引 Web サイトを作成する 2 部構成のシリーズの最初の部分です。このパートでは、Django プロジェクトを開始し、htmx と統合します。
後半では、Stripe で注文を処理します。
さあ、いきましょう!
なぜ Django、htmx、Stripe なのか?
次の理由から、Django、htmx、および Stripe を使用して Web サイトを作成します。
- Django は、優れた ORM、テンプレート、ルーティング システムを備えた Python Web フレームワークです。すぐに使えるいくつかの機能 (認証など) と、オンラインで入手できる複数のオープンソース パッケージが備わっています。 Django を使用して Web サイトを構築します。
- htmx は、HTML 属性を使用するだけで Web サイトにモダンな雰囲気を与える JavaScript ライブラリです。実際に JavaScript を記述する必要はありません (もちろん、記述することもできます)。 htmx を使用して、ページに対話性を与えます。
- Stripe は、優れた API を備えた支払いプラットフォームであり、支払いとクレジット カード情報を処理します。 Google や Apple Pay ともうまく統合されています。商品の支払いを容易にするために Stripe を使用します。
最終製品がどのように機能するかは次のとおりです:
- ユーザーは当社の Web サイトにアクセスし、価格や説明など、当社の製品に関する情報を確認できます。
- ユーザーが「購入」ボタンをクリックすると、Stripe のチェックアウト セッションにリダイレクトされます。
- 支払いが成功すると、再び当社の Web サイトにリダイレクトされます。当社はお客様の注文情報を保存し、お客様とすべてのスタッフ ユーザーに最近の購入を通知する確認メールを送信します。
次に、Django プロジェクトを構成し、初期ビューを作成し、htmx を使用して購入フォームを構築しましょう。
Django Python プロジェクトを構成する
プロジェクトを設定するには、仮想環境を作成し、アクティブ化し、必要なパッケージをインストールする必要があります。その後、Django プロジェクトと Django アプリを作成できます。
仮想環境を作成する
依存関係を分離できるように、仮想環境を作成することから始めましょう:
python -m venv .venv
Linux/Mac でアクティブ化する方法は次のとおりです:
source .venv/bin/activate
Windows の場合:
.venv\Scripts\activate
必要なパッケージをインストールする
アクティブ化された仮想環境内で、これを機能させるにはいくつかのパッケージが必要です。
pip install django stripe django-htmx python-dotenv
ここでは以下をインストールしました:
- ジャンゴ
- Stripe はストライプ API と連携します。
- django-htmx。htmx を操作するためのヘルパー機能を提供します。
- .env ファイルから環境変数をロードする python-dotenv。
Django プロジェクトを作成する
仮想環境と同じディレクトリに、ecommerce_site という Django プロジェクトを作成しましょう:
django-admin startproject ecommerce_site .
Django では、コードを 1 つ以上の「アプリ」ごとに編成することをお勧めします。各アプリは、特定のことを行うパッケージです。プロジェクトには複数のアプリを含めることができますが、この単純なショップの場合は、ほとんどのコード (電子商取引プラットフォームのビュー、フォーム、モデル) を含むアプリを 1 つだけ含めることができます。それを作成して、ecommerce と名付けましょう:
python manage.py startapp ecommerce
そして、このアプリを ecommerce_site/settings.py の INSTALLED_APPS に追加します:
# ecommerce_site/settings.py
INSTALLED_APPS = [
# ... the default django apps
"ecommerce", # ⬅️ new
]
このセットアップで問題が発生した場合は、最終製品を確認してください。この段階で、ファイル構造は次のようになります:
ecommerce_site/ ├── .venv/ # ⬅️ the virtual environment ├── ecommerce_site/ # ⬅️ the django project configuration │ ├── __init__.py │ ├── asgi.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── ecommerce/ # ⬅️ our app setup │ ├── templates/ │ ├── __init__.py │ ├── admin.py │ ├── apps.py │ ├── models.py │ ├── tests.py │ └── views.py └── manage.py
テンプレートを作成する
プロジェクトの構成が完了したので、いくつかの基本レイアウトを作成する必要があります。テンプレート ディレクトリに、base.html ファイルを追加します。これは、他のすべてのテンプレートが継承するテンプレートです。ユーザー操作用の htmx、基本的なスタイル設定用の mvp.css、および Django で生成されたメッセージをテンプレートに追加します。
<!-- ecommerce/templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>One-Product E-commerce Site</title>
<!-- include htmx ⬇️ -->
<script
src="https://unpkg.com/htmx.org@1.9.11"
integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0"
crossorigin="anonymous"
></script>
<!-- include mvp.css ⬇️ -->
<link rel="stylesheet" href="https://unpkg.com/mvp.css" />
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-boost="true">
<header>
<h1>One-Product E-commerce Site</h1>
</header>
<main>
<section>
{% if messages %} {% for message in messages %}
<p><mark>{{ message }}</mark></p>
{% endfor %} {% endif %}
</section>
{% block content %} {% endblock %}
</main>
</body>
</html>
ホーム ビュー用に、同じ templates ディレクトリに home.html テンプレートを作成します。これは、base.html を拡張し、そのコンテンツ セクションを設定するだけです。
<!-- ecommerce/templates/home.html -->
{% extends "base.html" %} {% block content %}
<section>{% include "product.html" %}</section>
{% endblock %}
このテンプレートには、product.html テンプレートが含まれています。 product.html は、製品に関する詳細とプレースホルダー画像を表示します。同じ templates ディレクトリに作成しましょう:
<!-- ecommerce/templates/product.html --> <form> <img src="https://picsum.photos/id/30/400/250" alt="mug" /> <h3>mug<sup>on sale!</sup></h3> <p>mugs are great - you can drink coffee on them!</p> <p><strong>5€</strong></p> <button type="submit" id="submit-btn">Buy</button> </form>
ホームビューの作成
ecommerce/views.py で、ホーム テンプレートをレンダリングするビューを作成します。
# ecommerce/views.py
from django.shortcuts import render
def home(request):
return render(request, 'home.html')
そして、それを ecommerce_site/urls.py の urlpatterns に追加します:
# ecommerce_site/urls.py
from django.contrib import admin
from django.urls import path
from ecommerce import views # ⬅️ new
urlpatterns = [
path("admin/", admin.site.urls),
path("", views.home, name="home"), # ⬅️ new
]
これで、次のコマンドを使用してサーバーを実行できるようになります。
python manage.py runserver
ブラウザで http://127.0.0.1:8000 にジャンプすると、次のような内容が表示されるはずです。
It might feel like overkill to add a dedicated product.html template instead of just the product details in the home.html template, but product.html will be useful for the htmx integration.
Add the Form and Use Htmx
Great! We now have a view that looks good. However, it doesn’t do much yet. We'll add a form and set up the logic to process our product purchase. Here’s what we want to do:
- Allow the user to select how many products (mugs) they want to buy.
- When the user clicks “Buy”, make a POST request to a different view called purchase in the backend using hx-post.
- In that view, validate the form and wait for 2 seconds to simulate the Stripe integration (we'll cover this in the second part of this guide).
- Replace the form content with the purchase view response.
- While the order is processing, show a loading message and disable the “Buy” button, so that the user doesn’t accidentally make multiple orders.
Let's go step by step.
1: Add a Quantity Order Form
Let’s first create and add a simple order form to our view allowing a user to select the number of mugs they want. In ecommerce/forms.py, add the following code:
# ecommerce/forms.py
from django import forms
class OrderForm(forms.Form):
quantity = forms.IntegerField(min_value=1, max_value=10, initial=1)
In ecommerce/views.py, we can initialize the form in the home view:
# ecommerce/views.py
from ecommerce.forms import OrderForm # ⬅️ new
def home(request):
form = OrderForm() # ⬅️ new - initialize the form
return render(request, "home.html", {"form": form}) # ⬅️ new - pass the form to the template
And render it in the template:
<!-- ecommerce/templates/product.html -->
<form method="post">
<!-- Same product details as before, hidden for simplicity -->
<!-- render the form fields ⬇️ -->
{{ form }}
<!-- the same submit button as before ⬇️ -->
<button type="submit" id="submit-btn">Buy</button>
</form>
2: Make a POST Request To a Different View
When the user clicks "Buy", we want to process the corresponding POST request in a dedicated view to separate the different logic of our application. We will use htmx to make this request. In the same ecommerce/templates/product.html template, let's extend the form attributes:
<!-- ecommerce/templates/product.html -->
<!-- add the hx-post html attribute ⬇️ -->
<form method="post" hx-post="{% url 'purchase' %}">
<!-- Same product details as before, hidden for simplicity -->
{{ form }}
<button type="submit" id="submit-btn">Buy</button>
</form>
With this attribute, htmx will make a POST request to the purchase endpoint and stop the page from reloading completely. Now we just need to add the endpoint.
3: Create the Purchase View
The purchase view can be relatively simple for now:
# ecommerce/views.py
import time # ⬅️ new
# new purchase POST request view ⬇️
@require_POST
def purchase(request):
form = OrderForm(request.POST)
if form.is_valid():
quantity = form.cleaned_data["quantity"]
# TODO - add stripe integration to process the order
# for now, just wait for 2 seconds to simulate the processing
time.sleep(2)
return render(request, "product.html", {"form": form})
In this view, we validate the form, extract the quantity from the cleaned data, and simulate Stripe order processing. In the end, we return the same template (product.html). We also need to add the view to the urlpatterns:
# ecommerce_site/urls.py
# ... same imports as before
urlpatterns = [
path("admin/", admin.site.urls),
path("", views.home, name="home"),
path("purchase", views.purchase, name="purchase"), # ⬅️ new
]
We now need to tell htmx what to do with this response.
4: Replace the Form Content With the Purchase View Response
Htmx has a hx-swap attribute which replaces targeted content on the current page with a request's response.
In our case, since the purchase view returns the same template, we want to swap its main element — the