🔗 Youtube
🔗 Front-end
🔗 Back-end

👗 1.プロジェクト紹介

H&Mクローンプロジェクト

H&Mは大型の海外スパブランドで、女性、男性、子供、生活用品、犬の服装を販売しています.規模が大きいため、フィルタリングや分類も非常に多様です.プロジェクト期間は9日間で、短期間で全部実施できないので、枝切り作業をしっかりと行います.

プロジェクト期間

2021.10.05 - 2021.10.15

👯‍♀️ チームメンバー(HandWash)

Front-end:朴太陽、申恵利、趙允熙、徐東赫

Back-end:李多彬、金敏浩

🛠 応用技術

Front-end : React, HTML5, CSS3

Back-end : [email protected], [email protected], [email protected], JWT, bcrypt

🛠 実装機能|Back-end

共通

データベースモデリング

Djangoモデリング

CSVテストデータ

を作成する

李多彬

ショッピングカート製品追加、削除、更新、照会

カテゴリ、商品フィルタリング、商品詳細ページ

DBバックアップ用db uploader.py合成

キム・ミンホ

登録、登録、登録レコーダ

.

お気に入りを追加し、

を削除

🛠 実装機能|Front-end

ぜんたいよう

商品詳細ページレイアウト

を実施する.

条件付きレンダリングを使用して

を実装し、ボタンをクリックするとモードウィンドウをポップアップできます.

賛機能とお気に入りデータ転送

お気に入りページレイアウト

を実施

お気に入りのサイズを選択し、カート

に送信

ゴミ箱アイコンをクリックすると、お気に入りデータベースから

を削除できます.

申恵利

nav,main,footerレイアウト

を実現

主無限スクロール実施

動的ルーティングを使用して、

navlistを製品カテゴリ

に接続します.

登録/レジ袋懸垂実施

徐東赫

登録、会員登録ページレイアウト

実施

条件付きレンダリングによる会員情報追加ウィンドウ

ショッピングカートページレイアウト実施

コレクション製品リスト

趙允熙

(作成中)

📋 2.プロジェクト進捗

プロジェクトの開始

プロジェクトが始まる前に、私たちは指導者のフィードバックを聞いて、必要な実施を他の実施と分けて、以下のようにします.
基本的な実装
1.会員登録、登録
2.ホームページ
3.カテゴリリスト
4.カタログ(選別、並べ替え)
5.商品詳細ページ
6.ショッピングカート+注文API
7.お気に入り
ここでは、APIの注文を除いて実装されています.フロントとの通信確認を続けるため、新しい支線を掘って作業することはできません.(以前に作成したAPIは期限切れではありません…)一人で暇を見つけて体現したい.

📝 ERD

最後まで修正を繰り返すERD.実はこのERPにも不満な点がたくさんあります.理由は后述です.

🖋 私が実施した機能

商品の選別

Query Stringに入るフィルタ条件をdictionaryを使用してフィルタリングし、ソートし、limit&offsetで一定量のフィルタ条件をフロントに渡します.

このフィルタは涙。を含み、distinct()を使用するために最後の2日間でデータベースをmysql->postgresqlに変更します.
モデルを再修正すれば問題が解決しやすくなりますが、これは私一人の開発ではなく、すでに作成された数十個のサンプルデータを修正するよりも、元使っていたpostgresqlを使うほうが時間の節約に優れているので、選択肢です.
全文をまとめると、
私たちのproductsテーブルは同じ製品ですが、異なる色であれば、異なる考えがあります.もしそうであれば、フィルタリング時にIDが異なるので、それを別の製品として認識して、別々に相手に送ります.
mysqlのdistinctではフィールド名が使用できないためpostgresqlに変更して対応する機能を実現しました.
djangoのdistinctは、order_byのフィールドのみでdinstinctに適用できます.そうすると、フロントから入ってきたソートを再適用するために、order byを2回適用しなければなりません.このため、select relatedに関するフィールドを取得し、colorとsub category idでフィルタリングした後(他のカテゴリに同名の製品がある可能性がある(実際には、サンプルデータとH&Mサイトで確認可能)、フロントに入ってQuery Stringを要求するフィルタ条件を用いてフィルタリングを行った.その後、フロントで要求されたソート条件に従ってソートしてから再区分します.なぜなら、同じ条件で複数回フィルタリングし、条件を満たすと同じ製品のデータも繰り返し送信されるからです.ex) size=XL&size=XS

カート製品のインポート

実際、フロントの知識はほとんどゼロなので、プロジェクトを行う前に、データを送ればフロントが加工して使える(加工して使える)と思っていました.しかし、このプロジェクトを通じて、バックグラウンドで加工して送信する可能性が高いことがわかりました.
それでカートのデータを送る時に全部で3つの価格を送ります.

実際のH&Mサイトには、商品個別価格、商品価格に個数を乗じた価格、ショッピングバスケット製品の総価格の3つの価格が表示されています.
商品価格に個数を掛けるのは個数を掛けるのと同じですが、total priceを求めるために合計を使いました.
Djangoでは、集約は通常、フィールド全体の和、平均、個数などを計算するために使用されます.アクセルの上でずっと引きずって助けに来たように!
集約を使用すると、辞書の形式を区切ることができます.

{
  "total_price" : "123,000"
}

これをproduct listに送信すると、次の例外が発生します.

{
  "total_price" : {
    "total_price : "123,000
	}
}

dicksherneryvalueを使用してdictionaryを持つため、フロントでこのデータにアクセスすることは非常に困難になります.
ディック・シャナなので、コードのように直接キー値でアクセスするのは簡単ですが、コードはとても...綺麗ではないので別の方法を探しましたが、スタックオーバーフローもその方法しか教えてくれないことから別の方法はないようです.

🎊 3.最初のプロジェクトの完了

生涯で初めて終わる?試した種目だからか感慨がまちまちです.選手たちも満足しています欲しい部分はたくさんありましたが、私一人でやっているプロジェクトではないので、たくさん欲が減りました.一人で前を歩くのはいいことではないので、ほほほ
ブランキーも飛び去ってしまい、エラーの残りを受け取ったので、ある日サーバーを稼働できないことがありましたが、それでも楽しく(?)終わります.
残念とか苦労とか言うなら、
まず、データ構築...お疲れ様でした.服の写真を買うのも、意味のあるフィルタ結果を送りたいので、少なくとも数十個のデータが必要です.服なので、詳細ページには少なくとも5枚の写真が必要です.もちろん、それらの詳細な写真は見つからないので、同じ写真を繰り返し入れるしかありません.
第二に、データの構築がより早くなれば、機能の実現をよりよく促進することができる.製品にデータがないため、テストができなかったため、作成した製品に間違いがないか確認できませんでした.データ構築はプロジェクトの4日目に完了しました...
3つ目は本当にフロントについて知りません.最初からどのようなデータが必要かをもっと知っていれば、スピードを上げることができるのではないでしょうか.
AWS配備と注文に関するAPIを試してみたいのですが、土曜日に2回目のワクチンを打った後、37.(現在は37.5度…)
しかし、やりたいことをやるという性格もあるので、今進行中の2回目のプロジェクトは、残りの時間の範囲内で順次進んでいきたいと思います.