Visualize your efforts! Development of stacking management app ~ Spring app release in 5 weeks ~

Introduction

The other day, I participated in a study session project called "Web service release people gathered in 5 weeks !!! 3rd", and after doing Web application development and release work for about 5 weeks, 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 repair.

Study session planning URL (connpass): Web service release people gather in 5 weeks !!! 3rd * Participation only in Mokumokukai is OK [Morning activity / Shinjuku / Mokumokukai] 3rd LT presentation of web service release event in 5 weeks

Overview of the created web application

This time, I created an application that records and displays daily efforts = accumulation. There is a hashtag "Today's accumulation" on Twitter, and daily efforts such as studying 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 visibly record that I've worked so hard **.

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

Web app features

After user registration and login, you can register the daily accumulation record from the following input form. You can enter the title, time spent (minutes), and comments for each 3 items per day. スクリーンショット 2020-09-07 12.28.02.png When you press the stack registration button, the input contents will be registered in the stack list. スクリーンショット 2020-09-07 12.28.15.png If "Template registration ON" is set on the input screen, the input contents will also be registered in the template list. スクリーンショット 2020-09-07 12.43.47.png The contents registered in the template list can be called by pull-down selection of "Template selection" on the input screen, and the same contents as previously registered contents can be repeatedly entered. スクリーンショット 2020-09-07 12.45.17.png

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

Background of web application development

I wanted to make use of my Java experience when I was changing jobs before, but I couldn't join a high-tech company because I didn't have knowledge of Spring, so I tried to learn Spring without repeating the same thing. I thought. I saw a book called "Spring Kaitai Shinsho" on Kindle Unlimited and wanted to try this machine. The foundation of the web application is the same as the sample created in the book, but since the sample only creates user registration, user information update, user information deletion, and login functions, the functions such as stacking input and template registration are original.

Reference book: Spring Kaitai Shinsho [Spring Kaitai Shinsho Security Edition] (https://www.amazon.co.jp/dp/B08BFLJ47Z/ref=cm_sw_em_r_mt_dp_jhBvFbJ9TM8QD)

Main technologies used

•Spring Boot A web application framework that runs on Java. It is an easy-to-use collection of a collection of Java open source frameworks called the Spring Framework. Web apps can also be created with 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 Dependency Injection (DI) function. There is an 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, I introduced Bootstrap 3.3.7-1 from Maven as per the book.

•PostgreSQL It is an open source relational database. The book uses H2DB, but I had to switch to PostgreSQL in the end because the data disappears every time I quit the Spring Boot app. At the stage of trial and error, such as when the table specifications are not fixed, I feel that H2DB is more convenient.

•AWS It is a cloud service provided by Amazon. This time, I deployed it by uploading a jar file containing a set of Spring Boot apps 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 will be able to use the DB from the web application.

Reference: I tried deploying the Spring Boot app to AWS Elastic Beanstalk with Github Actions very easily Errors encountered when deploying Spring Boot app with Elastic Beanstalk

Future tasks

By actually inputting the accumulated records by myself, I would like to find out what I wish I could do and improve it.

Example:

--Addition of functions based on your own ideas --Since the record is simply displayed in a table, graph it. --To enable optimization when displaying on a smartphone --Allows you to post your input on Twitter

--Refer to similar apps (Trickle, 23UP, etc.) Function addition --Allow the record to be displayed in calendar format --Allows you to post images --Display other users' posts like a timeline --Tag and classify posts

Finally

With this project, I was able to create an app that I can continuously operate and repair, so I think that I was able to establish a system that allows me to accumulate Spring learning as well as learning in other fields. I will. If you find any mistakes in the description in this article, please contact us.

Recommended Posts

Visualize your efforts! Development of stacking management app ~ Spring app release in 5 weeks ~
What Android development beginners did before releasing the app in 2 weeks
Coexistence of Flyway in the embedded database (h2) of the development environment and the release database (SQL Server) with Spring Boot