Spring Bootで書籍管理Webアプリを作ろう part1

# はじめに
どうも、プログラミング勉強中の大学生、@Ikuto19です。今回は勉強がてらにJavaのSpring Bootを使った簡易的な書籍管理webアプリを作ろうと思います。
以前、JavaではなくPythonで作成したんですが個人的に納得のいかない点があったので、作り直そうを思いました。その納得がいかない点というのは下記のようなものです。

* Pythonはサーバーサイド言語として不向き
* 無料で自作アプリを公開したい

サーバーサイドのプログラミング言語として使われているのはRuby、Java、PHPの三つが多い気がします。ネットで調べてもこの三つどれかが使われているのが大半みたいです。(個人調べ)

Pythonはサーバーサイドではなく、AIやディープラーニングといったものやデータサイエンスが得意なプログラミング言語です。なのにwebアプリのサーバーサイド言語として使っても、あまり使わないのであれば勉強にならないと思ったので、今回はJavaで作り直すという考えに至ったわけです。あと無料で自作アプリを公開できないかな？と調べた結果、Herokuというサービスがあることを知ったのも理由の一つです。

もし、載せている情報が間違っていたり、説明不足があれば、気にせず指摘してくださって構いません。この記事は自分の勉強のためであり、僕と同じように躓いている人に向けたものです。ですので、よろしくお願い致します。


# 前提条件
* macOS Catalina(バージョン10.15.5) 
* Eclipse Version: 2020-03
* サーバーサイド言語: Java
* フロントエンド言語: HTML、CSS、Javascript(jQuery)
* データベース: MySQL(HerokuではclearDBというアドオンからMySQLを使用)
* Webアプリケーションフレームワーク: Spring FrameworkのSpring boot
* ビルドツール: maven
* 書籍管理API: openBD
* webアプリの公開サービス: heroku

# 各ツールやプロジェクトについて
### Spring Frameworkについて
公式サイト → https://spring.io/
Spring FrameworkはJavaによる開発をスピーディーに安全に開発するためのフレームワークで、Springというふうに読んだりもするみたいです。このSpringは「DI:依存性注入」と「AOP:アスペクト指向プログラミング」を特徴にもっています。

### mavenについて
公式サイト → https://maven.apache.org/
mavenは複数あるビルドツールうちの一つです。他にはGradleやAntがありますが、今回はHerokuに完成したアプリをデプロイするのでmavenを選びました。pom.xmlに依存関係を記述することで、いろんなパッケージを扱えるようになります。

### openBDについて
公式サイト → https://openbd.jp/
このopenBDは書誌情報や表紙を誰でもアクセスできる無料のAPIです。
今回はjavascriptのjQueryでこのAPIを使って書籍情報にアクセスします。

### herokuについて
公式サイト → https://jp.heroku.com/about
コンテナベースのクラウド型PaaSで、多数のプログラミング言語から選んでき、自作アプリをデプロイ・管理することができるサービス。

# ツールの導入
### インストール済みのeclipseへSpring プロジェクトをインストール
1. eclipse起動後、ヘルプ > eclipse マーケットプレースからSpring Tools 4(aka Spring Tool Suite 4) 4.7.0.RELEASEをインストール
2. 全てのチェックボックスにチェックしたまま、確認
3. 「使用条件の条項に同意します」にチェックを入れて完了
4. 「再起動しますか？」と聞かれるのでそのまま再起動する。

もし、セキュリティ警告で「信頼性または有効性を確立できない署名されていないソフトウェアをインストールします。インストールを続行しますか？」と表示されたら、インストールボタンをクリック。

### Herokuへの登録およびクレカの登録
###### Herokuでアカウント作成
サインアップ → https://signup.heroku.com/login
1. 上記で必要項目を入力し、アカウント作成
2. 確認メールが来るので、クリックしてパスワードを設定

ここまでできていると、ダッシュボード画面になっていると思います。

###### MySQL利用のためにクレジットカードの登録
HerokuではデフォルトのデータベースがPostgreSQLなので、MySQLにする際はclearDBという無料のアドオンを追加する必要があります。ですが、そのためにはクレジットカードの登録をする必要があるので、登録します。

1.  ダッシュボード画面から右上端のアイコンからAccount settingsをクリック
2.  BillingタブからBilling Informationの「Add credit card」をクリック
3.  必要項目を入力して、Save Detailsをクリック

# テストアプリの作成・実行とherokuでの公開
### テストアプリの作成
一応、作成手順を載せておきますが、GitHubにプロジェクトをあげているので、以下のコマンドダウンロードしてくださっても構いません。

```termminal:terminal
$ git clone https://github.com/ikuto19/test-webapp.git
```

###### 作成手順
1. eclipse起動後、パッケージ・エクスプローラーで右クリック
2. 新規 > プロジェクトをクリック
3. Spring BootのSpring スターター・プロジェクトを選択し、「次へ」をクリック
4. 名前を「webapp-test」、グループとパッケージを「com.app」にして、「次へ」をクリック
5. 依存関係のテンプレート・エンジンからThymeleafとwebからSpring Webにチェックして、「完了」をクリック
 
プロジェクトの中身を確認すると、以下の画像のような構成になっていると思います。もし、templatesフォルダがなければ追加で作っておいてください。
![スクリーンショット 2020-07-26 16.35.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/b1e8c796-94d6-e8c8-cdd0-501b759b8bc2.png)

次に以下の構成で新規のファイルを作成または既存のファイルを削除します。
![スクリーンショット 2020-07-27 13.38.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/2277ef7b-9cdf-e42d-f0fa-47f2a58bbe7a.png)

 各ファイルの中身は以下のように記述します。

```java:App.java
package com.app;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {
	public static void main(String[] args) {
		SpringApplication.run(App.class, args);
	}
}
```

```java:IndexController.java
package com.app.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {
	
	@GetMapping("/")
	public String getIndexPage(Model model) {
		String message = "Hello, World!!";
		model.addAttribute("message",message);
		return "index";
	}
}
```
```html:index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<head>
<title>テストアプリ</title>
</head>
<body>
	<p th:text="${message}"></p>
</body>
</html>
```
```Procfile:Procfile
web: java $JAVA_OPTS -jar target/*.jar --server.port=$PORT
```

### 実行確認

```コンソール:コンソール
020-08-11 17:25:37.546  INFO 13991 --- [          main] com.app.App     : Started App in 6.855 seconds (JVM running for 7.79)
```

パッケージ・エクスプローラーのApp.javaを選択したまま右クリックで、実行 > Spring Bootアプリケーションをクリックして、実行。
上記のようなログが最後に表示された後、webブラウザで http://localhost:8080/ にアクセスすると、下記のような画像が表示される。
![スクリーンショット 2020-07-26 17.13.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/65674a4d-a650-4a68-128b-4671d11a1c35.png)

### Herokuへデプロイ
以下のコマンドを順に実行
「heroku login」を実行後に何かキーを押すと、webブラウザにとばされるので、「Log IN」ボタンをクリック


```termminal:terminal
$ brew tap heroku/brew && brew install heroku
$ heroku login
```

createコマンドで「Name test-webapp is already taken」のようなエラーが出る場合、アプリ名を変えてください。他の人に使われている見たいなので。僕はアプリ名を「test-webapp01」としました。

```termminal:terminal
$ cd (eclipseのワークペースがあるパス)/webapp-test
$ git init
$ heroku create test-webapp01
$ git add .
$ git commit -m "first upload"
$ git push heroku master (もしくは git push -f heroku master)
```

![スクリーンショット 2020-07-27 14.37.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/96851f3f-1356-f18d-81d2-09e21046a389.png)
このようにBUILD SUCCESSと出ていると、成功していると思います。
以下コマンドで開いて確認してください。今回はここまでにします。

```termminal:terminal
$ heroku open
```

#終わりに
今回は書籍管理アプリを作るための準備とテストアプリの作成・公開しました。
コードの詳しい説明などは次回以降にやっていく予定で、いよいよ書籍管理アプリを作っていこうと思います。

次回へ続く > [Spring Bootで書籍管理Webアプリを作ろう part2](https://qiita.com/Ikuto19/items/7422370a3a1d8671e4be)

# 参考サイト
[EclipseでSpring Frameworkを利用してみる](https://www.wantanblog.com/entry/2019/08/07/014116)

[Heroku初心者がHello, Herokuをしてみる](https://qiita.com/arashida/items/b2f2e01259238235e187)

[Heroku初心者がJavaで作成したWebアプリをGitHub連携でデプロイする時つまずいた4つのこと](https://qiita.com/ShandyGaffLover/items/0dad6ebf48d649aab761)

[SpringBootを使ってWebアプリを作るまでを丁寧に解説](https://www.sejuku.net/blog/106479)