Category: EC開発

現在のフロントエンドは JavaScript、jQuery とレガシーな技術スタックでコードが書かれています。 そこで、Vue.js を用いてモダンな技術スタックでコードをリプレースします。 開発タスク レビュー機能のフロントエンドをVue.jsで開発 で開発した以下の画面を、Vue.jsで実装してください。 一旦、PHPのコードを置き換えるのではなく、/resources/views/front 配下に vue.js 用の新しいファイルを作成して実装してください。 期待する成果 レビュー機能のフロントエンドが vue.js で書かれていること

現在のフロントエンドは JavaScript、jQuery とレガシーな技術スタックでコードが書かれています。 そこで、Vue.js を用いてモダンな技術スタックでコードをリプレースします。 開発タスク Vue.js + LaravelでシンプルなSPAを構築 https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#laravelui%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB を参考に、laravel/ui、laravel/ui vueをインストールして、Vue.js + LaravelでシンプルなSPAを構築してください。 期待する成果 LaravelのプロジェクトにVue.jsをインストールしてSPAが構築できている状態

環境構築タスク編 Q.Dockerのセットアップにおいて「docker-compose up -d –build」コマンド実行で「no configuration file provided: not found」というエラーが出る場合、「docker-compose.yml」ファイルがあるディレクトリー配下で上記コマンドを実行してください。「ls」コマンドでファイルの確認ができます。 Q.Dockerのセットアップにおいて「docker-compose up -d –build」コマンド実行で「Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?」というエラーが出る場合、「docker –version」でDockerがインストールされているか確認をしてください。インストールができていない場合は、Docker Desktopのインストールを行なってください。インストール済の場合は、Docker Desktopが起動されているか確認してください。 Q.Dockerのセットアップにおいて「docker-compose up -d –build」コマンド実行で「db The requested image’s platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested 0.0s」というエラーが出る場合、「docker-compose -f docker-compose-m1.yml…

デバックとは、ソフトウェアのソースコードのエラーやバグを見つけて修正するプロセスのことです。 デバックを導入して開発効率の向上を図ります。 今回は「Debugbar」を使用します。 準備 下記コマンドでインストールします。基本的に、本番環境で有効とすることはないと思うので、インストール時は–devを付与してください。 ./project配下の.envファイルに下記の項目を追加してください。 APP_DEBUG=trueとするだけでDebugbarは有効化されますが、DEBUGBAR_ENABLEDが設定されていれば、そちらが優先されます（例えば、APP_DEBUG=trueと設定しても、DEBUGBAR_ENABLED=falseという設定があれば、そちらが優先され、Debugbarは機能しません）。 使い方 ブラウザにアクセスすると、ページの下部にデバッグバーが表示されます。

ヒント 以下の前提知識が必要となります。わからない技術がある場合、事前に調べてから取り組んでください。 開発内容 管理画面の住所一覧でエラーが発生していますので修正してください。 http://localhost:8000/admin エラーメッセージ 期待される動作 管理画面のダッシュボードが正しく表示されること

レビュー機能は、製品やサービス、アプリケーションなどに対するユーザーの評価や意見を収集するための機能です。 ユーザーは製品やサービスに対して星や数値で評価を行い、それに加えてテキストでコメントやレビューを投稿することができます。これにより、他のユーザーが製品やサービスの利点や欠点を知る手助けとなります。 現状 管理画面には、レビュー（評価・コメント）を閲覧する画面はありません。 開発タスク 画面仕様 機能仕様 左サイドバーの仕様 ヘッダーに「レビュー」を追加してください。 メニューにレビュー一覧を追加してください。 レビュー画面の仕様 レビューの一覧を表示してください。 項目は、レビュー登録日時、商品ID、ユーザー名（ユーザーID）、評価、コメントです。 商品IDをクリックしたら、管理画面の商品画面に遷移してください。 ユーザーIDをクリックしたら管理画面のユーザー画面に遷移してください。

レコメンデーション機能は、ユーザーに対して特定のアイテムやコンテンツを推薦する機能です。ユーザーが過去に評価したアイテムや他のユーザーの評価データを元に、類似のユーザーやアイテムを推薦します。類似のユーザーが好むアイテムを推定することで、新しいアイテムをレコメンドします。 現状 商品画面では、商品名（name）、商品説明（description）、画像（cover）、価格（price）を表示しており、 レビュー機能の開発で、評価、コメント一覧を追加しました。 開発タスク おすすめ商品のリストを追加してください。 画面仕様 機能仕様 おすすめ商品の仕様 おすすめ商品を最大5件表示してください。 おすすめ商品は、商品画像、評価（その商品を評価したユーザーの評価値の平均）、商品名を表示してください。 おすすめ商品は横スクロールできるようにしてください。約1000pxの横幅で3つの商品が表示されるぐらいのサイズ感、デザインにしてください。 レコメンデーションのアルゴリズム アルゴリズムは、ユーザーベースの協調フィルタリング、またはアイテムベースの協調フィルタリングで実装してください。 類似度はコサイン類似度を用いてください。 データが足りないときは？ 協調フィルタリングでは、多くのユーザーの評価情報が必要です。正しく動くことを検証するために、疑似データを生成して、データベースに保存するマイグレーションコードを実装してください。

レビュー機能は、製品やサービス、アプリケーションなどに対するユーザーの評価や意見を収集するための機能です。 ユーザーは製品やサービスに対して星や数値で評価を行い、それに加えてテキストでコメントやレビューを投稿することができます。これにより、他のユーザーが製品やサービスの利点や欠点を知る手助けとなります。 現状 商品画面では、商品名（name）、商品説明（description）、画像（cover）、価格（price）を表示しています。 開発タスク 画面仕様 機能仕様 評価・コメント一覧の仕様 商品に対する評価（5段階）とコメントを表示してください。 評価・コメントは最新の10件を表示してください。 評価・コメント入力の仕様 ユーザーは評価（5段階）の入力できます。評価は input タグの type=number または select タグで実装してください。input タグの場合は、min と max を指定してください。select タグの場合、option は 1,2,3,4,5 です。 コメントの最大入力数は100文字です。100文字以上の場合、登録できません。 登録の仕様 評価とコメントは必須です。入力されていなければ、登録ボタンは disabled にしてください。どちらとも入力されたら disabled を解除してください。 ユーザーが登録ボタンを押したら、評価とコメントをデータベースに登録します。 ユーザーはログインしていなければ登録できません。ログインしていなければ、評価・コメント・登録ボタンは表示しません。 登録完了したら、「評価とコメントを登録しました」とメッセージを表示してください。

商品画面のデザインを変更したり、商品の追加情報を表示したりすることで、ユーザー体験の向上を図りたいです。 現状 http://localhost:8000/nesciunt-nisi-qui-neque-molestias などの商品画面では、商品名（name）、商品説明（description）、画像（cover）、価格（price）を表示、ユーザーは数量を入力してカートに追加することができます。 商品情報は管理画面で確認できます。例えば、http://localhost:8000/admin/products/12/edit です。 開発タスク 画面仕様 機能仕様 画面レイアウトを画面仕様に従い修正してください。 価格は日本円表示にしてください。１ドル140円で計算してください。 価格の右横に送料を表示してください。固定で980円です。 SKUを表示してください。 「かごに追加」に用語を変更してください。 モバイルに対応するようレスポシンプルにしてください。

ブランチ運用フロー Git Flow に従ってください。今回は develop ブランチを作成せず、main ブランチのみの運用でも構いません。 ・機能実装 feature-hoge ・バグ修正 fix-hoge ・ユニットテスト追加 test-hoge ・E2Eテスト/アクセプタンステスト追加 e2e-hoge 2. GitHub でプルリクエストを作成 ・approve されたらマージする