[Java] Visualize your efforts! Development of accumulated management application ~ Spring application release in 5 weeks ~

4 minute read

Introduction

The other day, I participated in a study group project called “Web service release people gathered in 5 weeks!!! The third bullet”, and after about 5 weeks of developing and releasing Web applications, I announced the deliverables at LT. .. The framework used is Spring. In this article, we will introduce the functions of the created Web application, the development process, and future issues of Web application renovation.

URL for study session planning (connpass): Web service release people gathered in 5 weeks!!! Part 3 *Participation only for Mokumoku meeting is OK [Akatsuki/Shinjuku/Mokumokukai] 3rd 5th week LT announcement of web service release event

Overview of created web application

What I created this time is an application that records and displays daily efforts = accumulation. There is a hashtag “Today’s accumulation” on Twitter, and daily efforts such as study and muscle training and life logs are posted, but I wanted to visualize the accumulation.

To put it plainly, about daily study and muscle training, I want to record in a visible form that I have worked so hard so far.

URL of the created web application: http://stackmanagement-env.eba-zmspvrm3.ap-northeast-1.elasticbeanstalk.com/login

Web app features

After user registration/login, you can register the accumulated records for each day from the following input form. You can enter the title of the stack, the time spent (minutes), and a comment for every 3 cases per day. ![Screenshot 2020-09-07 12.28.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409123/18285bc4-ecc1-d7fa-7639-(c0be4d5a8339.png) When you press the stack registration button, the input contents will be registered in the stack list. ![Screenshot 2020-09-07 12.28.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409123/c6518749-c5f8-18b6-be3a-(9fc6ff5612c6.png) If you have set “Register template ON” on the input screen, the input contents are also registered in the template list. ![Screenshot 2020-09-07 12.43.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409123/6aa75be0-860e-ad7c-5d3d-(c6d7f17bf049.png) The contents registered in the template list can be called by selecting the pull-down menu of “Select template” on the input screen, and the same contents as the previously registered contents can be input repeatedly. ![Screenshot 2020-09-07 12.45.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409123/df8af918-473c-1b67-d358-(08578d4a4412.png)

In addition, you can update/delete the registered information from the details button and update/delete user information from the ADMIN user.

Background of web application development

Although I thought that I wanted to make use of Java’s experience when I was doing a job change job before, I can not enter a company with a high technical level because I do not have knowledge of Spring, so I will not repeat the same thing I will try to learn Spring. I thought. I saw a book called “Spring dismantling new book” on Kindle Unlimited and thought that I wanted to challenge this machine. The basis of the Web application is the same as the sample created in the book, but in the sample only the user registration, user information update, user information deletion, and login functions are created, so the functions such as stacking input and template registration are original.

Reference books: Spring Demolition New Book [Spring Demolition New Book Security Edition] (https://www.amazon.co.jp/dp/B08BFLJ47Z/ref=cm_sw_em_r_mt_dp_jhBvFbJ9TM8QD)

Main technology used

• Spring Boot A web application framework that runs on Java. It is a collection of Java open source frameworks called Spring Framework that are easy to use. Web applications can be created using Java Servlet, which is a standard Java function, but compared to that, methods can be created by aspect-oriented programming (AOP), which can omit instantiation (new operator) by the function of dependency injection (DI). It has the advantage that common processing can be executed at the start and end. Brief Description: A brief description of Spring DI and AOP

• Bootstrap A CSS framework developed by Twitter. This time, we introduced Bootstrap 3.3.7-1 from Maven as per the book.

• PostgreSQL An open source relational database. I used H2DB in the book, but there was a data loss every time I quit the Spring Boot app, so I had to finally switch to PostgreSQL. I feel that H2DB is more convenient for trial and error, such as when the table specifications are not fixed.

• AWS This is a cloud service provided by Amazon. This time, I deployed by uploading the jar file that hardened the Spring Boot application set to AWS Elastic Beanstalk. EC2 instance generation and deployment will be executed at the time of uploading, and by linking with RDS as an option of Elastic Beanstalk, you can use the DB from the web application.

References: I tried deploying the Spring Boot app on AWS Elastic Beanstalk with Github Actions very easily Procedure and error encountered when deploying Spring Boot application with Elastic Beanstalk

Future tasks

By actually inputting the accumulated records by myself, I would like to find a point that I wish it was this way and improve it.

Example:

  • Add functions based on your own idea -I’m just displaying the record in a table, so I graph it -Allow optimization when displaying smartphone -Allow you to post your input on Twitter

  • Refer to similar apps (Trickle,23UP,etc.) Function addition
  • Allow display of records in calendar format ‐ Allows you to post images
  • Display other users’ posts like a timeline
  • Posts are categorized by adding tags

Finally

With this project, I was able to create an application that I could continuously operate and modify by myself, so I think that I was able to set up a system that could build up learning for Spring besides learning in other fields. I will. If you find any errors in the description in this article, please contact us.