YujiTani / questory_mvp

mvp用のリポジトリ
0 stars 0 forks source link

Review: MVPリリース #117

Closed YujiTani closed 2 weeks ago

YujiTani commented 2 weeks ago

アプリ情報

サービス名 QueStory 読み方: クエストーリー

サービスURL フロント: https://questory.pages.dev (本リリース時には、https://quejourney.com に変更予定) バックエンド: https://quejourney.com/api/v1/

リポジトリ メインリポジトリ https://github.com/YujiTani/questory_mvp/

フロントリポジトリ(まだ上記構成に統合できていないです) https://github.com/YujiTani/questory

概要

実務との兼ね合いにより、README時点よりもインフラ部分の追加が多くなってしまいました

本来であれば、APIとフロントの繋ぎこみ部分まで完成させてMVPとしたかったのですが、フロントのコードを確認すると修正点が多く見つかった為、いったん別々のアプリが起動している状態で提出させていただきました。

問題があればご指摘ください。 また、何度も構築をやり直したため、Github_Projectsは別PRに紐づいています (PRの変更方法がわからなかったため、修正できていません...) ProjectsURL: https://github.com/users/YujiTani/projects/4

動作確認した方法 (下部にスクリーンショット追加しています)

それぞれ動作確認として、バックエンドは一応テストコードを多めに実装し、デプロイ後も直接APIをたたき動作確認 フロント側は、一通りクリックしながら動くことを確認しています


READMEレビューからの変更点

READMEをレビューいただいたPR(https://github.com/YujiTani/questory/pull/9)

MVP時点からの変更内容が確認できるPRを作成しています、そちらからも確認いただけます (※ 差分でみれるので、PRの方が確認しやすいかもしれません) https://github.com/YujiTani/questory_mvp/pull/116/files

MVP時点で実装予定だった機能(実装した機能)

バックエンド

※ 実装できた機能にはチェックをいれています

フロントエンド

SQLの問題

MVPに追加した機能

実務でインフラ系のキャッチアップが必要となったため、練習用に卒業制作にも取り入れることにしました それにより、READMEレビュー時点と異なる内容になってしまいました。

インフラ系の環境構築などを追加

バックエンド

フロントエンド


本リリースで実装予定の機能

インフラ

バックエンド

フロントエンド

(※ ActiveRecord を学べる機能を実装したいところですが、難しそうであれば内容を変更するかもしれません)


サービスイメージ、スクリーンショット

APIを実際にたたいている動画(BASIC認証は事前に認証済み)

https://github.com/user-attachments/assets/0c893c67-a986-4558-a2e5-e1985e094053

問題の回答画面

スクリーンショット 2024-09-28 12 52 53

組み立て問題の動画

https://github.com/user-attachments/assets/e6c45ac1-7472-4548-8efc-556b7b7b7a3e

紙芝居(イメージ)

※ 現状アプリ名にstoryとか入れてるのに、物語要素が薄いのでらんてくんの物語のような短編を入れるのもいいかもなと思って、ざっとイメージできるコンポーネントを用意しました

https://github.com/user-attachments/assets/96ae6141-8df6-4954-af9d-3b0c58cf2198


以上となります 不明点あれば、なんでもご確認よろしくお願いしますー

tarakish commented 2 weeks ago

機能確認が取れました。LGTMです! 引き続き本リリースに向けて開発頑張ってください。

以下、LGTMを出した方々に共通してお伝えしている内容になります。 (Webアプリを就職活動で活用される方向けの内容になります)

===== 本リリースまでに以下の項目を実装してください ===== □ 独自ドメイン反映 -> DNSやSSLの対応も必要になるのでアピールになり、URLを書類等に記載するときの見栄えも良くなります。 □ OGP(静的 or 動的) -> SNS等でシェアするときの見栄えが良くなります。Webアプリであればどんなアプリでも取り入れられるので対応しておきましょう。 □ RSpec(モデルテスト+システムテスト or モデルテスト+リクエストテスト) -> 開発における品質の意識や開発効率の意識の高さをアピールできます。Request Specをメインに最低限各機能に正常にアクセスできるか程度はテストで確認できるようにしておきましょう。 □ CI(GitHubActions) -> 実際に開発現場でも使われており、アプリ外で技術のアピールが出来るものです。RSpecと合わせて実装を行いましょう。 □ Rubocopを使ってのリファクタリング -> Lintチェックツールは開発現場で広く使われています。コードのLintを整えておくことはチームで開発することを意識するうえでとても大切になるので取り入れておきましょう。

他のプログラミング学習者のWebアプリと異なることをアピールするために、よりインパクトのある機能を複数盛り込むことが重要になってきます。 □ SNSログイン(Google or LINE) -> ほとんどのアプリに取り入れられてユーザー体験の向上や技術のアピールにつながるので取り入れましょう。 □ 検索機能のアップデート(オートコンプリート、マルチ検索等) ※検索機能がある場合 -> 特にオートコンプリートは検索体験の向上だけではなくJS系の技術も取り入れていることをアピール出来るので積極的に取り入れましょう。

ユーザー体験という面では以下の項目も大切です。 □ オートログイン -> ユーザー登録後に再度ログイン操作を行わせないことでユーザー体験を向上させられます。 □ 使い方説明がある -> 初めて訪れたユーザーに呈して使い方の説明があることで体験を向上させられます。 □ レスポンシブ対応 -> いずれのデバイスでも綺麗にサービスが活用できることで体験が良くなります。 □ 利用規約・プライバシーポリシーを未ログイン状態でも確認できる -> 利用規約・プライバシーポリシーがあることで、ちゃんとしたサービスという印象を与えられます。 □ ローディングアニメーション(処理が重い箇所) -> 処理が重い箇所に何の対応も無いとユーザーが正しく操作できたのか困惑してしまいます。そうした際はローディングアニメーションを表示させることで体験が向上します。