このチュートリアルは、Django ウェブフレームワークを使った E コマースアプリの構築についてのシリーズの第 2 回目の記事です。最初のチュートリアルを見逃してしまった方は、こちらからオンラインでご覧になれます。Django フレームワークを使って Alibaba Cloud 上で Web アプリケーションを開発する方法
本ブログは英語版からの翻訳です。オリジナルはこちらからご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。
1. 序章
新しいデータ技術と新技術の製品の出現により、今ではすべてのビジネスが独自の電子商取引プラットフォームを構築し、会社のウェブサイトに直接統合することが必要になっています。今回ご紹介するチュートリアルは、カートシステムを構築するために Django フレームワークの力を活用する方法をお見せすることを目的としています。
2. 私たちのプロジェクトの範囲
2.1. プロジェクトの詳細
私たちが構築しているプロジェクトは、人々が商品を売買できる電子商取引アプリケーションです。柔軟性と保守性の理由から、プロジェクトは3つの独立したアプリに分割されています: コアアプリ (前回のチュートリアルで開発)、カートアプリ (今回のチュートリアルで開発)、支払いアプリ (次回のチュートリアルで開発)。
2.2. カートアプリケーション
カートアプリケーションは、購入と販売のプロセスを管理するために使用され、カート自体とカート内のカートアイテム（カートアイテムの追加、更新、削除）を管理するために使用されます。
ここで管理される特定の要素は以下の通りです。
- 購入と販売のオプション
- クライアントのカートとカートアイテム
- カートへの商品の追加、更新、削除
2.3. 開発環境の設定
我々は、すでにオンラインであるプロジェクトのソースコードを取得することから始めます。
- GITを使ってプロジェクトをクローンします。
$ cd ~/projects # Switch to your project folder on Home directory
$ git clone https://github.com/binel01/buyandsell.git
注: このコマンドを発行した後、プロジェクトディレクトリに buyandsell という名前のフォルダが作成され、プロジェクトのすべてのソースコードが含まれます。
- 必要なパッケージがすべてインストールされていることを確認してください。Python3.6、Pip、Virtualenv、libpq-dev、postgresql、postgresql-contrib
- virtualenv のインストール
$ pip install virtualenv
- venvを作成する
$ virtualenv venv
- venvをアクティブにする
$ source venv\bin\activate
- 依存関係のインストール
(venv)$ pip install -r requirements.txt
- データベースの初期化
(venv)$ python manage.py migrate
- スーパーユーザーを作成する
(venv)$ python manage.py createsuperuser # then follow the instructions
- すべてがうまく機能しているかどうかをテストします。
(venv)$ python manage.py runserver
3. カートアプリの開発
この流れで進めていきます。
- アプリの初期化
- models.pyファイル内でデータベースモデルを定義します。
- views.py内でリクエストを処理するビューを定義します。
- urls.pyファイルを使って、ユーザーがアプリケーションをナビゲートするためのルートを定義します。
- admin.pyファイルを使って、アプリケーション管理者がデータベースに保存されているエンティティを楽に管理するための管理者インターフェースの設定を定義します。
- その後、テンプレートをカスタマイズして、より可愛く見えるようにします。
3.1. アプリの初期化
まず、cartという新しいアプリケーションを作成し、settings.pyの設定ファイルに追加する必要があります。
(venv)$ django-admin startapp cart
このコマンドは、カートアプリケーションのソースコードを含むcartという名前の新しいフォルダを作成します。
カートアプリを settings.py ファイルに追加します。
...
INSTALLED_APPS = [
...
cart,
...
]
...
3.2. モデルの定義
前述の通り、このアプリでは以下の機種に対応します。
- Cart
- CartItem そして、対応するソースコードがこちら。
from django.db import models
from django.contrib.auth.models import User
from datetime import datetime
from core.models import Product
class Cart(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
created_at = models.DateTimeField(default=datetime.now)
class CartItem(models.Model):
product = models.ForeignKey(Product, on_delete=models.CASCADE)
quantity = models.IntegerField(default=1)
price_ht = models.FloatField(blank=True)
cart = models.ForeignKey('Cart', on_delete=models.CASCADE)
TAX_AMOUNT = 19.25
def price_ttc(self):
return self.price_ht * (1 + TAX_AMOUNT/100.0)
def __str__(self):
return self.client + " - " + self.product
3.3. ビューの定義
3.3.1. ビュー
ユーザーに提示されたデータを管理するために、私たちのコントロールとして機能するビューを定義しなければなりません。
以下は、Cart と CartItem データベースモデルの結果の views.py ファイルです。
from django.shortcuts import render
from django.views.generic import DetailView, ListView, CreateView, UpdateView, DeleteView
from .models import Cart, CartItem
##-------------- Cart Views --------------------------------------
class DetailCart(DetailView):
model = Cart
template_name='cart/detail_cart.html'
class ListCart(ListView):
model = Cart
context_object_name = 'carts'
template_name='cart/list_carts.html'
class CreateCart(CreateView):
model = Cart
template_name = 'cart/create_cart.html'
class Updatecart(UpdateView):
model = Cart
template_name = 'cart/update_cart.html'
class DeleteCart(DeleteView):
model = Cart
template_name = 'cart/delete_cart.html'
##-------------- CartItem Views --------------------------------------
class DetailCartItem(DetailView):
model = CartItem
template_name='cartitem/detail_cartitem.html'
class ListCartItem(ListView):
model = CartItem
context_object_name = 'cartitems'
template_name='cartitem/list_cartitems.html'
class CreateItemCart(CreateView):
model = CartItem
template_name = 'cartitem/create_cartitem.html'
class UpdateCartItem(UpdateView):
model = CartItem
template_name = 'cartitem/update_cartitem.html'
class DeleteCartItem(DeleteView):
model = Cart
template_name = 'cartitem/delete_cartitem.html'
3.4. Url ルートの定義
ここでは、buyandsell/cart/urls.pyで定義されているURLルートを示します。
from django.urls import path, include
from . import views
# Cart Urls
urlpatterns = [
path('cart/', views.ListCart, name='list-carts'),
path('cart/<int:pk>/', views.DetailCart.as_view(), name='detail-cart'),
path('cart/create/', views.CreateCart.as_view(), name='create-cart'),
path('cart/<int:pk>/update/', views.Updatecart.as_view(), name='update-cart'),
path('cart/<int:pk>/delete/', views.DeleteCart.as_view(), name='delete-cart'),
]
# CartItem Urls
urlpatterns += [
path('cartitem/', views.ListCartItem.as_view(), name='list-cartitem'),
path('cartitem/<int:pk>/', views.DetailCartItem.as_view(), name='detail-cartitem'),
path('cartitem/create/', views.CreateCartItem.as_view(), name='create-cartitem'),
path('cartitem/<int:pk>/update/', views.UpdateCartItem.as_view(), name='update-cartitem'),
path('cartitem/<int:pk>/delete/', views.DeleteCartItem.as_view(), name='delete-cartitem'),
]
3.5. 管理者インタフェースの定義
一般的に、クライアントのビジネスニーズを解決するためにウェブアプリケーションを構築する場合、データベースに保存されているデータやアクセス権、権限、ロールを管理する管理者アプリケーションも構築することになります。このような作業はデフォルトで既に行われているため、Django はウェブ開発者の生活をシンプルにしてくれます。
admin インターフェースを設定するためには、admin.py ファイルを修正し、モデルを使用するように設定しなければなりません。
結果としてのadmin.pyファイルは以下の通りです。
from django.contrib import admin
# Register your models here.
class CartAdmin(admin.ModelAdmin):
pass
class CartItemAdmin(admin.ModelAdmin):
pass
3.6. すべてがうまく機能しているかどうかのテスト
(venv)$ cd buyansell
(venv)$ python manage.py runserver
そして、この場所にブラウザを移動します。
http://localhost:8000
4.結論
このチュートリアルが終わる頃には、Django フレームワークを使ってアプリケーションを構築し始める方法を理解しているはずです。より正確には、Django のモデル、ビュー、テンプレートとは何かを学んだことになります。
このチュートリアルで使用したアプリケーションのソースコードは、GitHub ページの https://github.com/binel01/buyandsell/tree/master/core にあります。
このシリーズのチュートリアルの次の部分では、製品の販売を管理するために、カートアプリケーションを開発する方法を紹介します。
アリババクラウドは日本に２つのデータセンターを有し、世界で60を超えるアベラビリティーゾーンを有するアジア太平洋地域No.1(2019ガートナー)のクラウドインフラ事業者です。
アリババクラウドの詳細は、こちらからご覧ください。
アリババクラウドジャパン公式ページ