プログラミングスクールの最終課題 フリマアプリ
プログラミングスクールの最終課題 フリマアプリ
※開くまで15秒程度かかります。
最初にパスワードを求められます。
ユーザー名→ mrsr
パスワード→ 8888
商品を出品の際、画像のファイル容量が大きいものは出品し終えたら削除してください。(私が契約している容量をオーバーしてしまいます。)
ユーザー登録すると商品を購入出来ます。
その時のクレジット決済ではテストの番号を使います。
クレジットナンバーは、 4242424242424242 (16桁)
有効年月は、今の月よりも先を指定(今よりも先であればいつでも)
3桁のセキュリティーコードは、 123
QRコードはスマートフォンで開く用ですが、スマホ用にレスポンシブデザイン対応する時間が無いのでパソコンで見てください。
スマホでは横画面にすれば見た目の崩れなく閲覧出来ます。(横画面にしても文字サイズがおかしい箇所があります)
フリマアプリの機能
実装した機能の一覧
アプリはプログラミングスクールでの最終課題で、メルカリのクローンサイトになります。
CSSなど見た目のデザイン配置は既に出来上がっている状態で始めました。
(追加実装などで必要になった所の見た目は私が作りました)
最終課題で実装した機能は、
・ユーザー管理登録機能
・商品新規登録機能
・商品一覧表示機能
・商品の編集、削除機能
・商品購入(クレジット決済)機能
です。
ここから先は追加実装で、
○ 画像をアマゾンAWS S3にアップロード
① 商品新規登録時に画像を複数投稿する機能
① 商品の登録や編集の時に、画像をプレビュー表示し、途中で取り消したり画像を入れ替えする機能
① 商品詳細画面にて画像をスライド表示する機能
② 商品のお気に入り(いいね)機能
○ snsのアカウントとリンクさせてユーザー登録する機能
○ 商品の詳細画面でコメント機能
③ コメントに返信する機能
④ アクションケーブルで投稿されたコメントをリアルタイムで表示する機能
⑤ 商品のカテゴリーを親・子・孫の3段階に分類して登録する機能
⑥ 登録したカテゴリーを親・子・孫の3段階で一覧表示する機能
⑥ カテゴリー表示でのパンくずリスト機能
⑦ トップページでカテゴリーをプルダウンリストで表示する機能(パソコンのみ表示出来ます)
⑧ 詳細複雑絞り込み検索機能
⑧ 詳細検索での新しい順、古い順、価格の安い順、お気に入りの多い順などの切り替え機能
○ 商品一覧の1ページの表示を件数で分ける機能
を実装しました。
各機能を画像・GIFで紹介
① 商品の登録や編集の時に、画像をプレビュー表示し、途中で取り消したり画像を入れ替えする機能
① 商品詳細画面にて画像をスライド表示する機能
② 商品のお気に入り(いいね)機能
③ コメント返信機能
④ アクションケーブルで投稿されたコメントをリアルタイムで表示する機能
⑤ 商品のカテゴリーを親・子・孫の3段階に分類して登録する機能
⑥ 登録したカテゴリーを親・子・孫の3段階で一覧表示する機能
⑥ カテゴリー表示でのパンくずリスト機能
⑦ トップページでカテゴリーをプルダウンリストで表示する機能
(パソコンでのみ表示出来ます)
⑧ 詳細複雑絞り込み検索機能
⑧ 詳細検索での新しい順、古い順、価格の安い順、お気に入りの多い順などの切り替え機能