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

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

(Ver2追記)
それすら面倒な人は、ゲストログインできます
Ver2の記事

目次

1. はじめに
2. 概要
3. ツール・技術・環境
4. 詳細
5. 開発の進め方
6. やってみての感想
7. さいご
8. 参考

1. はじめに

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

意識したこととしては、別記事に書いたが　参考：作成前に書いた記事
「形にする、突き詰める、あきらめない」

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画面

4. 詳細

機能一覧

以下の機能をもつ

• ログイン・ログアウト
• ユーザ登録
• お題一覧/登録
• お題回答/投票(/閲覧)
• 投票結果確認

画面一覧

• ログイン画面：登録済みのユーザでログインできる
  

• ユーザ登録画面：ユーザを登録することができる
  

• お題一覧画面(ホーム)：回答・投票を受け付けているお題を表示
  *回答・投票済みの時はボタン表示を変更
  

• 回答画面：お題に対して回答をする。回答済みのお題は非活性となる(回答は一回まで)
  

• 投票画面：回答に対して投票ができる
  　

• 回答閲覧画面：投票済みのお題は回答を閲覧することができる。また、投票先を変更することもできる。投票済みの回答には、「済」スタンプが雑につく。
  

• 結果画面：受付時間が過ぎたお題について、投票数を表示する。一位の回答には、「一位」スタンプが雑につく。
  

• お題追加画面：お題を追加することができる。全項目必須。精査は特にしてない。
  

DB

以下の４テーブルを作成した

• アカウントTBL
• 回答TBL
• お題TBL
• 投票TBL
  
  ＊A5m2で表示
  回答、投票はお題に対して一回だけという思想のもと作成した。
  投票テーブルでは、お題とユーザを主キーに持たせた。投票は変更できるので、その時は、投票テーブルのレコードを「削除→追加」とすることで実現した。

5. 開発の進め方

以下の流れで作成していった

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

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

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

6. やってみての感想

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

反省

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

7. さいごに

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

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

8. 参考

参考にしたyoutube

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