DjangoでECアプリの構築 | Djangoのご紹介(パート2)

 2021年09月16日

DjangoでECアプリの構築 | Djangoのご紹介(パート2)

Python Djangoを使用したEコマースアプリケーションの構築に関する前回の記事に続いて、ここではパート2に進み、アプリケーションをより完全にするための機能を追加します。この記事では三の主な機能について詳しく解説します。

1.ショッピングカート機能


1.1.商品一覧のページング

Djangoはページングに関するアクションをよく提供します。ページは様々なUrlsを通じて表示されます。すべてはClass Paginatorから継承されます。

皆さんはDjangoこちらの細かい指示を通じて、自分でページング機能を構築できます。

前回、すべての商品を取得して、「http://127.0.0.1:8000/store/」のURLを使うストアページを表示します。ストア関数(GreatKart/store/views.py) で以下のように変更する必要はあります。

  • URLでクライアントから配信されるページ引数を取得します。

http://127.0.0.1:8000/store/?page=2」 (このページ引数はカスタマイズできます):

page = page or 1 #URLがhttp://127.0.0.1:8000/store」の場合、デフォルトではページ番号1です。

  • 二つの引数でPaginatorオブジェクトを生成します。最初の引数はページングしてほしいすべて要素一覧です。二番目の引数はページの数であり、nを付きます。

paginator = Paginator(products, 3) # n = 3

すべての商品を取得して、それらを数えます。

テンプレートではDjangoの指示と同じことを実施されます。皆様はこちらにコードテンプレートを検索できます。

 

1.2 商品を検索

Store/urls.pyに path('search/', Views.search, name='search')という url を追加します。 Store/views.pyにSearch関数を追加して、次のようにします。

  • Requestで引数qを検索して、Serverまで配信します。
  • Djangoがサポートするクエリに基づいて、引数qで商品をフィルタリングします。

Product.objects.order_by('-created_date').filter(Q(product_name__icontains=q) | Q(description__icontains=q))

関数search に具体的なコードについてはこちらを参照しましょう。Form searchのテンプレートについてはこちらを参照しましょう。

 

1.3 ショッピングカートに商品を追加・削除

ショッピングカートに商品を追加・削除することについて話す前に多様な商品を説明するために model Variationをもう一つ使用します。アップストアのmodel.py にコードを追加します。

Class VariationManager(models.Manager):

def colors(self):# タイプcolorがあるすべてのレコードを返します

Return super(VariationManager, self).filter(variation_category='color', is_active=True)

 Def sizes(self):

        # タイプ sizeがあるすべてのレコードを返します

        return super(VariationManager, self).filter(variation_category='size', is_active=True)

variation_category_choice = (

    ('color', 'color'),

    ('size', 'size'),

)

class Variation(models.Model):

    product = models.ForeignKey(Product, on_delete=models.CASCADE) # 外部キーはproduct_idです

    variation_category = models.CharField(max_length=100, choices=variation_category_choice) # colorと sizeの2つの固定タイプが含まれています。

    variation_value = models.CharField(max_length=100)

    is_active = models.BooleanField(default=True)

    created_date = models.DateTimeField(auto_now_add=True)

    objects = VariationManager()

    def __str__(self):

        return self.variation_value

皆様はAdminがテープルを管理できるようにadmin.pyファイルを追加することを忘れないでください

URLS を構築することについてこちらでurlsをリストしました。

商品の追加・削除に応用するビュー関数について、次のように関数があります。

  • _cart_id:これがローカルコンピュータの最初の訪問である場合は、session_storageにショッピングカートIDを作成します。 IDがsession_storageにすでに存在する場合は、それを取得するだけです。
  • add_cart:  _cart_id ローカルコンピュータに一つの Cart を保存することを確認するために、関数を使用します。CartにCartItemがない場合はその関数が新しい一つの CartItemを追加します。または保存した CartItem に1数量単位を追加します。
  • remove_cart: CartItemに1数量単位を減少します。
  • remove_cart_item: Cartに1 CartItemを削除します。

 

1.4 ショッピングカートのContext Processor

商品を追加・削除するのに十分に操作を持つ後、、右上隅のカートアイコンに商品の数を更新します。

この表示はアプリケーションのすべてのページで表示します。データを取得して、views.pyのすべて関数でそれらを表示するのはできません。 Django がcontext processorをサポートするのは一回だけ取得し、すべてのurlsで表示することに役立ちます。

まず、TEMPLATESのキー OPTIONSであるsettings.pyファイルに移動し、 配列変数に

'carts.context_processors.counter',を追加します.

次に、アプリカートで新しいファイルcontext_processors.pyを作成し、こちらでcounter関数を追加し、常に辞書を戻ります。

 

2.ユーザー認証機能


2.1 登録

アプリアカウントのファイル urls.pyで新しいurlを作成します。次に、応用するビューで一つの関数を宣言します。

Django はフォームを作成することをよくサポートします。新しいファイルforms.py を作成し、 ModelFormから継承される一つのクラスを作成します。ビューのregister関数でフォーム登録の対象を作成してテンプレートでそれらを表示します。フォームに作成するコードはこちらで参照できます。

テンプレートのFormタグで、そのPOSTメソッドをアクションレジスタに配置します。つまり、フォームのregister関数で、送信されたリクエストにGETメソッドまたはPOSTメソッドがあるかどうかを確認します。

POSTの場合はアプリアカウントのmodels.py であるcreate_user関数を通して新しいユーザーを作成します。

settings.pyに戻り、Djangoのカスタマイズに比べて異なるようにいつか行コードーを追加します。

 greatkart/static/js/script.js でメッセージが数秒後に自動的に閉じるようにsetTimeoutを追加します。

ユーザーを作成する後には register関数で、messages.success(request=request, message="Registration succesful!")というメッセージを追加します。

 

2.2 ログイン

まず、アプリアカウントの views.py ファイルで一つのurlと一つのログイン関数を作成します。

ログインとメールという二つのフィールドを入力するので、フォーム対象を作成するのはありません。

ログイン成功とログイン失敗の場合にmessagesを追加します。

テンプレートはログインのテンプレートと同じレベルです。ログインの後にはis_activeフィールドをFalseのままにしているので、 AdminページのそのアカウントのTrueに変更して、ログインできます。

 

2.3 ログアウト

views.pyでログアウで関数を少なくカスタマイズします。

from django.contrib.auth.decorators import login_required

@login_required(login_url="login") # ログアウトする前にログインする必要があることを確認するためにDjangoがサポートします。

def logout(request):

    auth.logout(request)

messages.success(request=request, message="You are logged out!")

    return redirect('login'

 

2.4 登録後にメールを認証

settings.pyファイルに変数を追加することでメール登録に配信するためにメールソースを認証します。 こちらでgoogleのアカウントへのサードパーティにアクセス権を開くことを忘れないでください。使用しない場合、オフにすることができます。

# ファイルに移動することを忘れないでください。

EMAIL_USE_TLS = True

EMAIL_HOST = 'smtp.gmail.com'

EMAIL_HOST_USER = '[email protected]'

EMAIL_HOST_PASSWORD = 'yourpassword'

EMAIL_PORT = 587

登録後、登録ページにリダイレクトし、登録メールが有効になるのを待つように通知しました。2つの引数を付けるメールでリンクを送信します。

  • Djangoのclass httpによってユーザーのidを暗号化する
  • トークンは sixライブラリから作成され、サーバーのセッションに保存されます。

ユーザーはメールを受信して、リンクをクリックします。次にシステムはデコートするために一番目の引数を取って、ユーザーid を取得します。2番目の引数トークンを取得して、セッションがサーバーに存在するかどうかを確認します。両方の条件が満たされている場合は、is_activeフィールドを更新し、ログインページに戻って続行します。それ以外の場合は、エラーを報告します。

 

2.5 アカウントページにdashboard を追加

ユーザーのアカウントを管理するためにroot/accounts/dashboard のリンクを追加します。テンプレートはGithubで参照しましょう。

2.6 パスワードを忘れてパスワードをリセット

パスワードをリセットする機能を完了するために、Djangoのメール認証を配信する機能を使用します。

ユーザーがメールのアドレスを入力するために、forgotPasswordのリンクを作成して、メールのアドレスがどんなユーザーのアカウントと一致にするかどうかを認証します。保存する場合は登録機能と同じリンクを付けるメールを配信します。

reset_password_validate/<uidb64>/<token>

次に、reset_password_validateという一つの urlを作成します。パスが有効な場合、ユーザーがパスワードを変更できるように、reset_passwordという名前のパスを戻ります。セッションが正しいユーザーであることを確認するために、リクエストにuidを添付する必要があります。

 reset_passwordリンクで requestのuid を確認し、ユーザーにパスワークを更新するようにuser.set_password(password)を使用します。

 

3. Paypalの支払う機能


3.1 ユーザーチェックアウトページと必要なテーブル

 

まず、次のように3つのテーブルを持つOrdersという新しいアプリを設計しました。

  • 注文テーブル、レコードは、ユーザーが注文するたびに作成されます。このテーブルには、アカウントと支払いへの外部キーが含まれています。
  • OrderProductテーブル、各レコードは支払うことが完了したときのカートの1行に対応します。このテーブルには、注文と支払いの外部キーが含まれています
  • 支払いテーブル、レコードは、ユーザーが支払いを完了するたびに作成されます。payment_id フィールドはトランザクションIDを格納するために使用されます。このテーブルには、アカウントへの外部キーのみが含まれています

次に、ユーザーにチェックアウトページと注文配送に関連する情報を含むフォームを作成します。

app Cartで一つのurlを作成し、function checkoutを作成し、テンプレートを作成する簡単な階段を含まります。

 

3.2.ペイメントゲートウェイの統合と注文

一つのpaypalアカウントを作成します。次にページにアクセスして、登録します。

https://developer.paypal.com/、sandboxアカウントを作成するためにhttps://developer.paypal.com/developer/accounts/というタブにアクセスします。 次のように情報を通して personal(購入者)および business(販売者)アカウントを作成します。

私のアカウントは両方とも$ 9,999,999で、支払いカードの種類はVISAです。 2つのsandboxスアカウントを作成したら、これら2つのアカウントをhttps://sandbox.paypal.com/にログインして、利用可能額を確認できます。

このページにアクセスしましますhttps://developer.paypal.com/developer/applications/

My Greatkartという新しいアプリを作成しました。選択したsandbox アカウントは、上記のsandbox ビジネスアカウントです。app typeはそのままにします。作成後、新しく作成したアプリの Client IDをコピーします

https://developer.paypal.com/demo/checkout/#/pattern/client

次に、ユーザーのpaypal ボタンを作成しました(ペイパルのホームページhttps://developer.paypal.com/docs/checkout/integrate/に詳細な指示が記載されています)。デモはここで見ることができます。https://developer.paypal.com/demo/checkout/#/pattern/client

ボタンボタンとスクリプトコードをorders / payments.htmlファイルに追加します。

<div id="paypal-button-container"></div>

<script>

        var amount = "{{ grand_total }}";

        // Render the PayPal button into #paypal-button-container

        paypal.Buttons({

            // Set up the transaction

            createOrder: function(data, actions) {

                return actions.order.create({

                    purchase_units: [{

                        amount: {

                            value: amount,

                        }

                    }]

                });

            },

            // Finalize the transaction

            onApprove: function(data, actions) {

                return actions.order.capture().then(function(details) {

                    // Show a success message to the buyer

                    alert('Transaction completed by ' + details.payer.name.given_name + '!');

                });

            },

            style: {

                color:  'blue',

                shape:  'pill',

                label:  'pay',

                height: 40

            }

        }).render('#paypal-button-container');

    </script>

3.3.支払い後にデータベースを更新

PaypalのonApproveイベントで、ajaxを追加して、次のように送信されたデータでデータベースを更新します。

  • csrfmiddlewaretoken: html formのcsrf_tokenに似ています
  • orderID: orderレコードのID
  • transID: 行ったばかりのトランザクションのID
  • payment_method = "PayPal"
  • status: 作成されたばかりのトランザクションステータス

views.pyの部分で送信されたリクエストがajaxおよびPOSTタイプであるかどうかを確認してから、次の手順を実行します。

  • 新しいPaymentレコードを作成します
  • レコードを更新します
  • 各CartItemレコードは、対応するOrderProductレコードを作成します。また、CartItemも削除します。
  • ユーザーに通知するメールを配信します

 

4.まとめ


それで、Djangoとは何か、そしてそれを行う方法とかDjangoの機能を簡単に紹介しました。大規模なプラットフォーム、多くのユーザーにとって、これは作業効率を高めるための理想的なフレームワークです。

Instagram、Spotify、Dropbox、NASA、Pinterest、Redditなど世界の多くの会社はDjangoアプリケーションを使用する機会をつかんでいます。このフレームワークのサポートで設計された大規模なWebサイトは、非常に強力なパフォーマンスをもたらすためです。Djangoは無料でシンプルで、市場で最高のPythonWebフレームワークの1つです。

 

オフショア開発をご検討されている方々はぜひ一度ご相談ください。

※以下通り弊社の連絡先

アカウントマネージャー: クアン(日本語・英語対応可)

電話番号: (+84)2462 900 388

メール:  [email protected] 

お電話でのご相談/お申し込み等、お気軽にご連絡くださいませ。

 無料見積もりはこちらから▶