About technology used for baseball league score management system
Tags: java, react, node
Published: 2018-12-21 07:06:18

---
title: About technology used for baseball league score management system
published: true
description: 
tags: Java,react,NodeJS
---

I will introduce technology of the current baseball league score management system developed personally and the technology of the developing system.

# About the current baseball league score management system 
![image](https://storage.googleapis.com/deviita/upload_images/b08b548caec5795ad40e35af9c85f4c95c0241635d9a3.png)

It is a CMS that provides breaking of players results for [Japan Colorball Baseball League](http://jcbldata.fc2web.com/cbl_index.html).
I am developing, operating, adding new functions from June 2015.

# Function introduction
## Season results page
This page is called in the frame from the official page of the baseball league.
It is a specification to display the top ten place except team ranking.

- Team ranking
- Personal batting division
  - Batting average
  - hits
  - homeruns
  - RBI（runs batted in）
- Personal pitcher division
  - ERA（earned run average）
  - Number of victories
  - Save
  - Strikeouts
- Personal non-title division
  - OBP(On base percentage)
  - Double
  - Slugging percentage
  - Fourballs
  - OPS

## Player personal page
![image](https://storage.googleapis.com/deviita/upload_images/e40e06bce35e3ceca1be5b957251e7805c024cbc9d874.png)

- Introduction of player (belonging team, title summary etc.)
- Batting results (by period, by opponent team)
- Pitching results (by period, by opponent team)
- Graphs of the above

The graph is implemented by highcharts.

## Team introduction page
![image](https://storage.googleapis.com/deviita/upload_images/7f39cb0c5dca52ee81244c660d3c2ff65c024aef4da4a.png)

- Total results for each season
- Recent result of victory / defeat
- Total batting results of team member
- Total pitching results of team member

## Statistics page
![image](https://storage.googleapis.com/deviita/upload_images/dff46e83372943224665879750da16be5c024fc71a26e.png)
I am implementing the participant transition graph by season and team using highcharts.

## All period total score page
The league itself has been held since 2004, and the results data has been inputed from 2010 to 2018. The layout is the same as the season results page.

## Continuing participant grades page
It displays a list of the participants' participation in the last two years.
The layout is the same as the season results page.

## slack / pushbullet (push notification) collaboration
There is an push notification for slack and pushbullet.
- Long-term weather forecast acquisition
- Schedule adjustment

# Technology used in (current) baseball league score management system
## Backend
- Language: Java 8
- FW: SAStruts (It became EOL while continuing operation)
- DB: MySQL 5.7
- AP server: Tomcat
- WEB server: Nginx

## front end
Although the base is still JSP,I am proceeding APIization and client rendering, and are dynamically generated with ajax + datatables.
jQuery / [materialize] (https://materializecss.com/) / [datatables] (https://datatables.net/)
I use Noto Sans Japanese font mainly, the number part is Roboto font.

# About the baseball league score management system (under development)

I explained the current system.
However, since SAStruts is an EOL technology, it is currently being renewed in a modern development environment.
From here on I will introduce about the system under development.

## Backend (under development)
- TypeScript / NodeJS / Express
- DB: MySQL 5.7
- Netlify

# Front end (under development)
The design continues to be based on materialize, and components use react-bootstrap that is user friendly.
- ReactJS
- component library
  - [react-bootstrap] (https://react-bootstrap.github.io/)
  - [react-bootstrap-table-next] (https://react-bootstrap-table.github.io/react-bootstrap-table2/)
- [chart.js] (https://www.chartjs.org/)
- materialize

## Functions only available in beta version under development
I implement these functions not implemented in current systems.
New features are being implemented from where I thought.

### Batting average distribution graph
The league has also been running for a long time, and there is nothing but a certain normal data if it is not a clean normal distribution.

![image](https://storage.googleapis.com/deviita/upload_images/aa4dd599478ee4d40f9496e64b955de75c025692ec31f.png)

### Each player ability chart
Although it is a difficulty that the standard deviation calculation process is somewhat heavy, it speaks eloquently the character of the athlete than sentences.

![image](https://storage.googleapis.com/deviita/upload_images/7dde7d39177c2fc8ac81e6e469fa63b55c0256b957aab.png)

# Task

## The API response is slow
Because I am using a server with a low spec, API response takes about 1 second. I am planning to change the server.

## There is no design sense
UI's sense is devastating because the experience of the business system was long.
UI is still under trial and error.

## I did not write the test code
It is basically human test...(haha)
Recently I started using Jest so write the test code ....

## There are many pages
Although it becomes the story of the UI mentioned above, since it has many pages, what kind of menu is used and what to do with conductors ... is that.

# Original Post
[野球リーグスコア管理システムに用いている技術について](https://crieit.net/posts/0431d68ab5279f65797e41cfc18a0eb5)