Commerce

Eコマース

eBayのようなeコマースオークションサイトをデザインし、ユーザがオークションリストを投稿し、リストに入札し、それらのリストにコメントを付け、 「ウォッチリスト」 にリストを追加できるようにしましょう。

Active listings page
Listing page

はじめに

  1. 配布コードをhttps://cdn.cs50.net/web/2020/spring/projects/2/commerce.zipからダウンロードし、解凍します。
  2. ターミナルで、commerce ディレクトリに cd します。
  3. manage.py makemigrations auctions を実行して、auctions アプリのマイグレーションを行います。
  4. python manage.py migrate を実行して、データベースにマイグレーションを適用します。

理解を深める

配布コードには、auctions と呼ばれる単一のアプリケーションを含む commerce というDjangoプロジェクトが含まれています。

まず、auctions/urls.py を開いて、このアプリのURL設定を定義します。デフォルトのインデックスルート、/login ルート、/logout ルート、/register ルートなど、いくつかのURLがすでに作成されています。

auctions/urls.py を見て、各ルートに関連付けられているビューを確認してください。現時点では、インデックスビューはほとんど空の index.html テンプレートを返します。login_view ビューは、ユーザがページをGETしようとしたときにログインフォームを表示します。ユーザがPOSTリクエストメソッドを使用してフォームを送信すると、ユーザは認証され、ログインしてインデックスページにリダイレクトされます。logout_view ビューは、ユーザをログアウトしてインデックス・ページにリダイレクトします。最後に、register ルートはユーザに登録フォームを表示し、フォームの送信時に新しいユーザを作成します。これらはすべて配布コードで行われるため、アプリケーションを実行してユーザを作成することができます。

python manage.py runserver を実行してDjango Webサーバーを起動し、ブラウザーでWebサイトにアクセスします。「登録」 をクリックし、アカウントを登録します。ユーザアカウントが「次の名前でサインイン」され、ページ上部のリンクが変更されています。HTMLはどのように変化しましたか？このアプリケーションのHTMLレイアウトについては、auctions/templates/auctions/layout.html を見てください。user.is_authenticated のチェックでテンプレートのいくつかの部分がラップされていることに注意してください。これにより、ユーザがサインインしているかどうかに応じて異なるコンテンツをレンダリングできます。レイアウトに何かを追加または変更する場合は、このファイルを変更できます。

最後に、auctions/models.py を見てみましょう。ここでは、Webアプリケーションのモデルを定義します。各モデルは、データベースに格納するデータのタイプを表します。アプリケーションの各ユーザを表すユーザモデルから始めました。AbstractUserから継承しているため、ユーザ名、電子メール、パスワードなどのフィールドはすでにありますが、ユーザに関する追加情報がある場合は、User クラスに新しいフィールドを追加することもできます。また、オークションリスト、入札、コメント、オークションカテゴリの詳細を表すモデルをこのファイルに追加する必要があります。auctions/models.py で変更を行うたびに、まず python manage.py makemigrations を実行し、次に python manage.py migrate を実行して変更をデータベースに移行する必要があります。

プロジェクトの仕様

オークションサイトの実装を完了します。次の要件を満たしている必要があります。

  • モデル：アプリケーションには、User モデルの他に少なくとも3つのモデルが必要です。1つはオークションリスト用、1つは入札用、もう1つはオークションリストに作成されたコメント用です。各モデルにどのフィールドを設定し、そのフィールドのタイプを指定するかは、ユーザが決定します。ご希望であれば、追加のモデルがあるかもしれません。
  • リストの作成：ユーザはページにアクセスして新しいリストを作成できる必要があります。ユーザは、リストのタイトル、テキストベースの説明、そして入札の開始条件を指定できる必要があります。ユーザはオプションとして、リストやカテゴリーの画像のURLを指定することもできます(ファッション、玩具、エレクトロニクス、家庭など)。
  • アクティブ出品ページ：あなたのウェブアプリケーションのデフォルトのルートは、現在アクティブなオークション出品を全てユーザが見ることができるようにするべきです。アクティブリストごとに、タイトル、説明、現在の価格、写真(少なくとも)が表示されます (リストに存在する場合)。
  • リストページ：リストをクリックすると、そのリストに固有のページが表示されます。このページで、ユーザは現在の出品価格を含む出品の詳細をすべて見ることができるはずです。
    • ユーザがサインインしている場合、ユーザはアイテムを 「ウォッチリスト」 に追加できます。項目がすでに監視リストにある場合、ユーザはその項目を削除できます。
    • ユーザがサインインしている場合、そのユーザはアイテムに入札できます。入札は、最低でも開始入札と同じ大きさでなければならず、すでに行われた他の入札 (もしあれば) よりも大きくなければなりません。入札がこれらの基準を満たしていない場合は、エラーが表示されます。
    • ユーザがサインインしていて、リスティングを作成したユーザである場合、ユーザはこのページからオークションを 「クローズ」 ことができます。これにより、最高入札者がオークションの勝者となり、リスティングが無効になります。
    • クローズ出品ページでユーザがサインインし、そのユーザがオークションに勝った場合、そのページにはその旨が表示されます。
    • サインインしているユーザは、リストページにコメントを追加できます。一覧ページには、一覧に加えられたすべてのコメントが表示されます。
  • ウォッチリスト：サインインしているユーザは、ウォッチリストページにアクセスできる必要があります。このページには、ユーザがウォッチリストに追加したすべてのリストが表示されます。これらのリストのいずれかをクリックすると、そのリストのページに移動します。
  • カテゴリ：ユーザは、すべてのリストカテゴリのリストを表示するページにアクセスできる必要があります。いずれかのカテゴリー名をクリックすると、そのカテゴリー内でアクティブなリストをすべて表示するページが表示されます。
  • Django管理用インターフェース：サイト管理者は、Django管理インターフェースを使用して、サイトで作成されたリスト、コメント、および入札を表示、追加、編集、および削除できます。

ヒント

  • Djangoの管理インターフェイスにアクセスできるスーパーユーザアカウントを作成します。
  • Djangoモデルで使用できるフィールド・タイプについては、Djangoのモデルフィールドリファレンスを参照してください。
  • このWebアプリケーションのさまざまな部分に対して、いくつかの Djangoフォーム を作成する必要があります。
  • 任意のビューの上に@login_required デコレーターを追加すると、ログインしているユーザだけがそのビューにアクセスできるようになります。
  • CSSを自由に変更して、Webサイトを独自のものにすることができます。このページの上部には、いくつかのサンプルスクリーンショットが表示されています。これらは単に例を示すためのもので、アプリケーションはここにあるスクリーンショットと見た目が同じである必要はありません (クリエイティブに作ることをお勧めします！)。

提出方法

ちょっと待ってください！以前のバージョンのProject 1 (Books) を既に提出し、合格点を受け取っている場合は、ここで中断してください。あなたは既にこのプロジェクトの単位を取得しています。この課題を提出してはいけません。提出しても、コースの進行には影響がないため、採点者の負荷を増やすだけです！

  1. このリンクにアクセスして、GitHubアカウントでログインし、 「cs 50の承認」 をクリックします。次に、コースのスタッフに提出課題へのアクセス権を付与することを示すボックスにチェックを入れ、 「コースに参加」 をクリックします。
  2. Gitをインストールし、オプションでsubmit 50をインストール します。

プロジェクトを送信するときに、web50/projects/2020/x/commerce ブランチの内容が、最初にダウンロードしてzip解凍した時の配布コードのファイル構造と一致している必要があります。つまり、自分で作成した他のディレクトリの中にファイルをネストしてはいけません。ブランチには、ほかのプロジェクトのコードは含まれず、このプロジェクトのコードだけが含まれるようにします。このファイル構造に従わないと、採点が拒否される可能性があります。

たとえば、このプロジェクトでは、採点者が　https://github.com/me50/USERNAME/tree/web50/projects/2020/x/commerce (ここで、USERNAME は、以下のフォームに記載されているユーザー独自のGitHubユーザー名です) にアクセスした場合 ( auctions , commerce ) というサブディレクトリと manage.py ファイルが表示されます。チェックするときにコードがこのように編成されていない場合は、この規則に合わせて必要に応じてリポジトリを再編成します。

  1. submit50 をインストールしている場合は、次のコマンドを実行します。
submit50 web50/projects/2020/x/commerce

それ以外の場合は、Gitを使用して、https://github.com/me50/USERNAME.git ( USERNAME はGitHubのユーザ名) の web50/projects/2020/x/commerce というブランチに作業をプッシュします。

  1. 長さが5分を超えないようにスクリーンキャストを記録し、プロジェクトの機能を実演します。上記の仕様のすべての要素がビデオで示されていることを確認してください。このビデオでは、コードを表示する必要はありません。実行中のアプリケーションのみを表示します。GitHubでコードをレビューします。そのビデオをYouTubeなど (リストに非公開あるいはパブリック設定で、プライベート設定にはせずに) にアップロードしてください。ビデオの説明では、それぞれの7つの仕様を示している場所にタイムスタンプを付ける必要があります。これはオプションではなく、説明にタイムスタンプがないビデオは自動的に拒否されます。
  2. このフォームを送信します。

その後、https://cs50.me/cs50wにアクセスして、現在の進捗状況を確認できます。

cs50.me/cs50wの成績に関する重要な注意事項：通常、各暦年の開始直後 (2021年1月11日の週を予定) に、すべての成績を更新します。2020年からのすべての課題は保存されてそのまま続けることができますが、2021年に課題を送信してCS 50 Botにより評価・返却されるまで、成績は一時的に空または使用不可の状態で表示されます。だから心配しないでください！

CS50Wを2020年の最終日に終了した場合、この成績のリセットが行われる前に無料のCS50証明書を申請することが非常に重要ですから、遅れないようにしてください (認証済の証明書はこの影響を受けません) 。