Let's make a book management web application with Spring Boot part1

Introduction

Hi, my name is @ Ikuto19, a college student studying programming. This time, after studying, I will make a simple book management web application using Java's Spring Boot. I used to write it in Python instead of Java, but I personally didn't understand it, so I decided to recreate it. The points that are not convincing are as follows.

• Python is not suitable as a server-side language
• I want to publish my own app for free

I feel that Ruby, Java, and PHP are often used as server-side programming languages. It seems that most of these three are used even if you look it up on the net. (Personal research)

Python is not a server-side programming language, but a programming language that excels at things like AI, deep learning, and data science. However, even if I use it as a server-side language for web applications, I thought that it would not be a learning experience if I didn't use it much, so I came up with the idea of recreating it in Java this time. Can I publish my own app for free? As a result of investigating, I learned that there is a service called Heroku, which is one of the reasons.

If the information provided is incorrect or lacking in explanation, you can point it out without worrying about it. This article is for my own study and for those who are as stumbling as I am. So, thank you.

Prerequisites

• macOS Catalina (version 10.15.5)
• Eclipse Version: 2020-03
• Server-side language: Java
• Front-end languages: HTML, CSS, Javascript (jQuery)
• Database: MySQL (Heroku uses MySQL from an add-on called clearDB)
• Web application framework: Spring boot of Spring Framework
• Build tool: maven
• Book management API: openBD
• Web app publishing service: heroku

About each tool and project

About Spring Framework

Official site → https://spring.io/ Spring Framework is a framework for developing Java development quickly and safely, and it seems that you can read it as Spring. This Spring features "DI: Dependency Injection" and "AOP: Aspect Oriented Programming".

About maven

Official site → https://maven.apache.org/ maven is one of several build tools. There are other apps such as Gradle and Ant, but this time I chose maven because I will deploy the completed app on Heroku. By describing the dependency in pom.xml, you can handle various packages.

About openBD

Official site → https://openbd.jp/ This openBD is a free API that anyone can access bibliographic information and covers. This time, we will access the book information using this API with jQuery of javascript.

About heroku

Official site → https://jp.heroku.com/about A container-based cloud-based PaaS service that allows you to choose from a large number of programming languages and deploy and manage your own apps.

Introduction of tools

Install Spring project in installed eclipse

1. After starting eclipse, install Spring Tools 4 (aka Spring Tool Suite 4) 4.7.0.RELEASE from Help> eclipse Marketplace
2. Check all the check boxes
3. Check "I accept the terms of the terms of use" and complete
4. You will be asked "Do you want to restart?", So restart as it is.

If the security warning says "Install unsigned software that cannot be trusted or validated. Do you want to continue the installation?", Click the Install button.

Register for Heroku and register for credit cards

Create an account on Heroku

Sign up → https://signup.heroku.com/login

1. Enter the required items above and create an account
2. You will receive a confirmation email. Click it to set a password.

If you have done so far, you should have a dashboard screen.

Credit card registration for using MySQL

Heroku's default database is PostgreSQL, so you'll need to add a free add-on called clearDB to get it to MySQL. However, in order to do so, you need to register your credit card, so register.

1. From the dashboard screen, click Account settings from the icon in the upper right corner
2. Click "Add credit card" in Billing Information from the Billing tab.
3. Enter the required items and click Save Details

Creating and running a test app and publishing it on heroku

Creating a test app

For the time being, I will post the creation procedure, but since I have posted the project on GitHub, you can download the following command.

terminal

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

Creation procedure

1. After starting eclipse, right-click in Package Explorer
2. Click New> Project
3. Select the Spring Starter project for Spring Boot and click Next
4. Name it "webapp-test", group and package "com.app" and click "Next"
5. Check Thymeleaf from the dependency template engine and Spring Web from the web and click "Finish"

If you check the contents of the project, you will see that it has the structure shown in the image below. If there is no templates folder, create one.

Then create a new file or delete an existing file with the following configuration:

The contents of each file are described as follows.

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);
	}
}

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";
	}
}

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<head>
<title>Test app</title>
</head>
<body>
	<p th:text="${message}"></p>
</body>
</html>

Procfile

web: java $JAVA_OPTS -jar target/*.jar --server.port=$PORT

Execution confirmation

console

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

With App.java selected in Package Explorer, right-click and click Run> Spring Boot Application to run. After the above log is displayed last, if you access http: // localhost: 8080 / with a web browser, the following image will be displayed.

Deploy to Heroku

Execute the following commands in order If you press any key after executing "heroku login", it will be skipped to the web browser, so click the "Log IN" button

terminal

$ brew tap heroku/brew && brew install heroku
$ heroku login

If you get an error like "Name test-webapp is already taken" with the create command, change the app name. I want to see it being used by other people. I named the app "test-webapp01".

terminal

$ cd (Path with work pace of eclipse)/webapp-test
$ git init
$ heroku create test-webapp01
$ git add .
$ git commit -m "first upload"
$ git push heroku master (Or git push-f heroku master)

If you see BUILD SUCCESS like this, I think you have succeeded. Open it with the following command and check it. That's all for this time.

terminal

$ heroku open

At the end

This time, we prepared for making a book management application and created and released a test application. I plan to explain the code in detail from the next time onward, and I will finally make a book management application.

Continued next time> Let's make a book management web application with Spring Boot part2

Reference site

Try using Spring Framework in Eclipse

Heroku beginners try Hello, Heroku

Four things that Heroku beginners stumbled upon when deploying a web app created in Java with GitHub integration

Carefully explain how to create a web application using Spring Boot