![見出し画像](https://assets.st-note.com/production/uploads/images/111676696/rectangle_large_type_2_eb67a8230c4998aeae535fb361d7e7b8.png?width=1200)
【Java&SpringBoot3】 早起きのWebアプリー機能追加(1)仕様書とスケジュール
はじめ
こんにちは!
今日は私が作った朝起きのWebアプリを簡単に説明する仕様書作成し、三つの機能追加をするためのスケジュールを立てます。
Webアプリの目的
起床後に実施した作業を記録するWebアプリケーションです。
早起きを習慣化し、生産性のある朝を作るために制作しました。
開発環境
OS : Window10
IDE: IntelliJ IDEA Community Edition
フロントエンド: Html5, Css3, JavaScript
バックエンド : Java17, Spring Boot3, JPA, Thymeleaf
データベース: MySQL
APサーバー: Tomcat 10.1.5
データベースのテーブル
![](https://assets.st-note.com/img/1690266938092-1tUBYoU0p4.png?width=1200)
テーブルは3つです。
まず、idをプライマリキーとして持っている「user」テーブルがあります。 その中にメール、パスワード、ニックネームをカラムとして持っています。
次は、idをプライマリキーとして持っている「 article」テーブルがあります。 その中にタイトル、コンテンツ、登録者、生成日、修正日をコラムとして持っています。
最後に、idをプライマリキーとして持っている「refresh_token」テーブルがあります。 この中にはユーザーidとリフレッシュトークンをカラムに持っています。
このテーブルはJWT方式で認証する際、サーバーが生成したトークンをクライアントに渡すと同時に、データベースにも保存しておくために作ったテーブルです。
機能の流れ
1.ログイン
![](https://assets.st-note.com/img/1690265389424-8GLsnj1Hz8.png?width=1200)
「Sign in with Google」をクリックすると、OAuth2を通じてグーグルアカウントでアプリケーションにアクセスします。
2.メイン画面
![](https://assets.st-note.com/img/1690262175727-8VKjeUKpXH.png?width=1200)
2.1. 検索機能
![](https://assets.st-note.com/img/1690262515262-dloAH9FGbM.png)
メイン画面上部の検索ウィンドウにキーワード(ID、タイトル、内容)を入力すると検索結果が返されます。
2.2. ランキング
![](https://assets.st-note.com/img/1690262750443-Gj2mXa4VJM.png)
モチベーションを与えるために、記録をたくさんしたアカウントのランキングを5位まで表示します。
2.3. ページネーション
![](https://assets.st-note.com/img/1690262948096-eK7wEJOmH1.png)
1つの画面に9つの記録を表示します。
下段の「初め」、「以前」、「以降」、「最後」ボタンを押下時、該当する分だけページングします。
3. 記録の登録・修正・削除
3.1. 登録
![](https://assets.st-note.com/img/1690263268351-itV5qCzbsK.png?width=1200)
タイトルと内容を入力します。
「時間設定」 をクリックして、その内容を実行するために必要な時間を入力します。
「始まり」 をクリックして時間を測定します。
「登録」を押して、記録を登録します。
3.2. 修正
![](https://assets.st-note.com/img/1690264144505-IBxQfIyIP0.png)
メイン画面で自分が登録した記録で「見る」ボタンを押します。
![](https://assets.st-note.com/img/1690264583151-X0tX5QTMaL.png?width=1200)
「修正」ボタンを押して、内容を書き直します。
![](https://assets.st-note.com/img/1690264094103-POmGoO37nt.png?width=1200)
作成が終わったら、「修正」ボタンを押します。
3.3 削除
![](https://assets.st-note.com/img/1690264805177-B3t3gCT4CU.png?width=1200)
「削除」ボタンの押下時、自分の記録が削除されます。
機能追加の要件定義
1. フォロー
記録の登録者を自分のフォロワーとして登録する。
2. 「いいね」
フォロワーの記録に「いいね」を押せるようにする。「いいね」ハートがカウントされる。
3. 画像アップロード
記録登録時に画像もアップロードできるようにする。
スケジュール
1. フォロー: 0.25人月(07.26~08.03)
基本設計: 2日
詳細設計: 2日
実装・テスト: 3日
2.「いいね」:0.25人月(08.04~08.14)
基本設計: 2日
詳細設計: 2日
実装・テスト: 3日
3. 画像アップロード:0.25人月(08.15~08.23)
基本設計: 2日
詳細設計: 2日
実装・テスト: 3日
まとめ
私は朝早く起きて本を読んだり運動したりするのが好きなので、このようなウェブアプリケーションを作るのがとても楽しいです。
以前作ったウェブアプリをもう少し良いものにうまく作れるか心配になりながらも、今からワクワクしますね!
エンジニアファーストの会社 株式会社CRE-CO
ソンさん