0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【個人開発】SpringBootでGoogleMapsAPIを利用したwebアプリケーションを作成しました(まだ未公開)

Last updated at Posted at 2024-04-25

はじめに

今回eclipseでwebアプリケーションを作成しました。
まだAWSなどについて勉強不足で公開できていないのですが、webアプリケーションの開発手順やEclipse、SpringBoot、GoogleMapsAPI、MySQLについて知りたいという方達の役に立ちたいと思ったので、開発のことについてお話ししようと思います。
[GitHub URL]
https://github.com/HagisawaYuki/GachaMap.git

開発したwebアプリについて

今回私が開発したwebアプリは『ガチャマップ』というものです。
スクリーンショット 2024-04-25 14.25.30.png
画像としてはこのようなものです。
この赤いピンはガチャガチャがあるところを示しています。
この赤いピンをタップすると、
スクリーンショット 2024-04-25 14.28.10.png
このようにガチャガチャスポットの説明がポップアップとして出てきます。
また、マップ上に新しいガチャガチャスポットを設定したい場合は、マップ上でその部分をタップして
スクリーンショット 2024-04-25 14.33.36.png
このフォームに情報を入力して完了ボタンを押せば、登録できます。
これがこのwebアプリの概要です。

搭載した機能

・ログイン機能

スクリーンショット 2024-05-06 15.42.53.png

・会員登録機能

スクリーンショット 2024-05-06 15.44.31.png

・パスワードを忘れた際のパスワード再設定機能

スクリーンショット 2024-05-06 15.49.29.png
ユーザ名と誕生日を入力すれば、パスワードを再設定できるようにしています。
セキュリティとしては弱いかもしれませんが、たいした個人情報を扱っていないし、ないよりはあった方が良い機能だと思ったので、この機能を作成しました。
扱う個人情報が増えた際にはメールを扱った認証機能を追加したいと考えています。

・パスワードのハッシュ化

会員情報であるパスワードは、エンコードしてデータベースへセットするようにしています。

開発のきっかけ

これを開発しようとしたきっかけは2つあります。
まず1つ目は、ガチャガチャを探す手段があまりないと感じていたからです。Googleマップで探しても出てこないので、ガチャガチャを探している時、不便に思っていました。そこでガチャガチャの場所とその詳細がマップ上でわかるアプリがあったら便利だと思ったので、今回ガチャガチャを題材にしました。
2つ目は、Javaで何か制作してみたいとずっと思っていたからです。何年もjavaを扱ってきましたが、何か制作したことはなかったのでそろそろ作りたいと感じたからです。

使用技術

バックエンド

 Java(フレームワーク:SpringBoot)
 SQL

フロントエンド

 HTML
 CSS
 JavaScript

ツール

 MySQL
 draw.io(ER図)
 figma(画面遷移図)
 eclipse

画面遷移図

画面遷移図.png

データベース設計

gachaspo.drawio.png
まだ、user情報とガチャガチャスポット情報しか実装できてないです、、、

苦労したこと

SpringBootを初めて扱ったため、エラーの意味が全然わからなくて苦労しました。手当たり次第エラーをコピーしてwebで調べての繰り返しでした。
また、最初はwebアプリのデザインにBootstrapを使用しようと考えていたのですが、なぜか使えなかったため、CSSで全てデザインしたこともものすごく苦労しました。

追加しようと考えている機能

まだこれは必要最低限の機能とデザインしか実装できていないので、これからたくさんの機能を追加しようと考えています。現時点で考えている機能は下記のとおりです。

・ガチャガチャスポットに写真を追加できるようにする。
・約何台ガチャガチャがあるかの項目を、登録フォームに追加する。
・今緯度経度でしか場所指定できない状態になっているので、マーカーを自分で動かして場所指定をできるようにする。
・ガチャガチャスポットのお気に入り追加機能。
・ガチャガチャスポットのフィードバックをできるようにする。
・マイページを作成する。
・メールを使った認証機能
・インターネット上に載せる。

最後に

これからは、このwebアプリを作成する上でよく発生したエラーの対処の仕方や、機能を追加際にどのように追加したかなどの記事を書いていこうと思っています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?