🔰一か月でWebアプリを作成した

[作成したWEBアプリリンク](https://hello-4m00.onrender.com/)
ユーザ作成が面倒な人は、「ユーザ：test,パス:test」でログインできます
*無料プランのため、初期サイト表示に時間がかかります。

(Ver2追記)
それすら面倒な人は、ゲストログインできます
[Ver2の記事](https://qiita.com/ssatoshi_117117/items/b5fe92d85dd44283b86f)
## 目次
1. はじめに
1. 概要
1. ツール・技術・環境
4. 詳細
5. 開発の進め方
7. やってみての感想
8. さいご
8. 参考

## 1. はじめに
一個くらいWEBアプリを作っておきたいよなという思いと、勉強になるかなという考えで実行に至った。

意識したこととしては、別記事に書いたが　参考：[作成前に書いた記事](https://qiita.com/ssatoshi_117117/items/9677c4e248a387c57ef7)
「形にする、突き詰める、あきらめない」

## 2. アプリ概要
大喜利投稿サイトを作成　//当初、投稿サイト(某X)みたいなのを考えたが、ありきたりと思い変えた
できることは以下
- ユーザ管理（登録、ログイン）
- お題の一覧表示、登録
- 回答の一覧表示、登録、投票
- 回答の集計


## 3. ツール・技術・環境
### 使用ツール
- A5m2：DB表示
- VScode：エディタ
- DockerDesktop：Dockerを使用してローカル環境を構築
- Render：デプロイするクラウドプラットフォーム

### 使用技術
- 言語：Java
- フレームワーク：Spring Boot
- テンプレートエンジン：Thymeleaf
- フロントエンドUIフレームワーク: Bootstrap
- データマッパー：MyBatis
- ビルドツール：Maven
- バージョン管理：Git (GitHub)
- デプロイ先：Render
- データベース：PostgreSQL
- コンテナ化：Docker

### ブランチ
以下の二ブランチで作成
- 開発用:devlop
　・ローカルでチェックアウトし、編集するブランチ
　・Rnederにはこちらも登録しているので、デプロイまで確認できる
- 本番：main
　・安定稼働するものを配置
　・devlopが問題なさそうな時に、マージ (GitHubで)

### 環境
- ローカル
　・アプリ：Tomcat（Spring Bootには埋め込みTomcatサーバーが含まれている）
　・DB：DockerDesktop
- デプロイ時
　・アプリ：Dockerコンテナ
　・DB：Renderサービス

 Render画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/9b124c27-f278-0b58-0ea6-62b346252d9f.png)



## 4. 詳細
### 機能一覧
以下の機能をもつ
- ログイン・ログアウト
- ユーザ登録
- お題一覧/登録
- お題回答/投票(/閲覧)
- 投票結果確認

### 画面一覧
- ログイン画面：登録済みのユーザでログインできる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/4d659e4c-bca0-271f-30bd-95e24fc1bdca.png)

- ユーザ登録画面：ユーザを登録することができる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/006bb927-3184-453d-77d4-0a1988584349.png)

- お題一覧画面(ホーム)：回答・投票を受け付けているお題を表示
*回答・投票済みの時はボタン表示を変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/3a2137cc-5fad-9661-f238-0f9fde7c9adf.png)

- 回答画面：お題に対して回答をする。回答済みのお題は非活性となる(回答は一回まで)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/25f00f0a-4360-c712-317c-3f785681d2b0.png)

- 投票画面：回答に対して投票ができる
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/cec83176-ebd5-bebd-3803-fc511162f60c.png)

- 回答閲覧画面：投票済みのお題は回答を閲覧することができる。また、投票先を変更することもできる。投票済みの回答には、「済」スタンプが雑につく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/bf12d896-9980-02a3-36df-74e16d8a47b1.png)

- 結果画面：受付時間が過ぎたお題について、投票数を表示する。一位の回答には、「一位」スタンプが雑につく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/27019a70-ae80-1036-05d0-6f059137403c.png)

- お題追加画面：お題を追加することができる。全項目必須。精査は特にしてない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/48229eb3-964b-c7a8-cf95-93eb4e7e4ed1.png)

### DB
以下の４テーブルを作成した
- アカウントTBL
- 回答TBL
- お題TBL
- 投票TBL
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/108559cd-2429-565b-c225-58f2528ef16c.png)
＊A5m2で表示
回答、投票はお題に対して一回だけという思想のもと作成した。
投票テーブルでは、お題とユーザを主キーに持たせた。投票は変更できるので、その時は、投票テーブルのレコードを「削除→追加」とすることで実現した。

## 5. 開発の進め方
以下の流れで作成していった
1. Githubの看板でやるべきことを記載(issue)
1. 今日の目標分をTODOに持ってくる
1. ローカルで作成・動作確認(devlopブランチ)
1. Githubコミットプッシュ/デプロイ　＊Rnederがプッシュをトリガーにデプロイ実行
1. 問題なければ、devlopブランチをmainブランチにマージ
1. mainでも問題なければDONEに持って行って終了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/d305dd13-43e8-f538-683e-d6a481b9c078.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781864/448f5055-8d4b-250f-0611-65888ef8a747.png)


やりながら思いついた「これもできたらいいな」はissueをすぐ切って、後でやる！
いきなりてんこ盛りにしないことを心がけた。

また、chatGPTをフル活用した。エラー情報を検索することもしたが、エラー文を丸投げして、要約させたりもした。


## 6. やってみての感想
なんだかんだ、継続して作成できたので満足である。あまりこだわり過ぎてもな見た目に関しては、妥協をガンガンしていったのは良かった。
なんとなくで理解していた技術について、手を動かすことで、嫌でも理解しなければならないので、身になる理解ができた。
自分は手を動かさないと理解できないタイプなのだろう。これはこの先向き合っていかなければ・・・

### 反省
環境構築時に結構エラーを受けて、何とか解決できた。その時にナレッジを記事に出来ればよかった。
chatGPTに丸投げで、思考を放棄することがあったのは半々だな・・
また、テストコードをサボったのは反省したい

## 7. さいごに
雑になったところもあると自覚しているので、第二弾はリファクタリングをしていきたい。
また、機能追加などもしていきたい。

皆さんも、一つくらいWEBアプリを作成してみてもいいのでは？知識も身に付き、自身にもなる。なにより、自分の思考を形にすることはとても楽しいよ！

## 8. 参考
[参考にしたyoutube](https://www.youtube.com/watch?v=6sS2Eco1y1U&list=PLKGspLlIkheJuDe3rLDBFetEHy_RX5xwo&index=1)

こちらは初心者にはとても分かりやすく丁寧でした。技術はほとんどこちらの動画で紹介されたものを使用した。また、質問対応もしてくださる投稿者様であった。