[Java] First portfolio (technology <production process)

9 minute read

I’m Shiori Ueno, half a year since I started programming. At school, I was mainly taught how to make Rails applications, and now I am working as an intern while working as an intern at Wilico Co., Ltd. I’m new to programming and writing, so please let me know if you have any questions.

This time around, I would like to write down various things about the portfolio created in the 3rd month of the school, although it will be a mixed case.

Portfolio overview

ToT github *Easy login (“Sign in as a trial user”) has been implemented.

It was created assuming a QA site for the development community. For details, see the README on github.

Background and purpose of development

There are two main things I wanted to learn.

:thinking: ** What data can be collected through user actions. ** :thinking: ** What kind of analysis results can be returned based on that data? **

Originally, I decided to provide the user with a rating→I would definitely implement the function of displaying in charts. I was interested in AI (statistics and analysis of data) as a trigger, so I was initially thinking of doing something with Python, but rejected it. The reason is

  1. I feel that even if a beginner gets a new technology with a deadline of one month and makes an app, it will not be a strong portfolio.
  2. I didn’t understand Rails, which I was taught at that time, clearly, and I couldn’t help but work on another technology with that understanding.

In such a way, I planned an application while glancing at some sites. The reason for creating the QA site is that I was able to imagine how to set the evaluation criteria.

DB design

:bulb:** It is best to store only static (immutable) data! ** That is the lesson this time. Development is implemented with SQLite3, and production is implemented with MySQL.

What I was thinking about at the beginning

Old UR diagram.jpg

I was planning to update user ratings in the user table and link other ratings to comments and thread actions, but I consulted with the mentor at the school when I was confused on the way. Aside from everything, the big problem was that this design will update every time the user operates something, so it may not be updated properly. (There seems to be various ways to avoid it, but I want to dig deeper, so I omitted it.)

Data that can be calculated afterwards or that is frequently updated depending on the user’s behavior will not be managed by the DB unless there is a reason, so only the materials for analysis are stored and a chart is drawn. It is designed to be calculated at the timing. **

Final design

Latest UR diagram.jpg

I completely erased the red part, but there is one more step to calculate the time series evaluation compared to other evaluations (calculate the difference based on the registration date registered in the two tables → There is also a case where the average value is calculated), so the table is left for different purposes in order to speed up the aggregation.

Implementation of basic functions

It is the part excluding the chart implementation. Since I wanted to spend time on the chart, I implemented a schedule other than the search function in about a week. Well, I haven’t implemented any difficult functions, so if I list the appeal points, :information_desk_person:** Tagging and search functionality implemented without gems ** When I checked it again, I thought, “Is it made with gem?”, but since it was a good exercise (?), the result is okay :confetti_ball:

Remarks below
- Tagging function -Since the accuracy of analysis decreases when data with the same meaning but different notation (rails, Rails etc.) is entered, I wanted to make the operation of creating new tags heavy **. -Basically, I can only find a way to write in one text_field separated by commas, and I'm worried that it is light, but I decided that it is more convenient and faster to make a form by connecting with an intermediate table normally. -After implementation, I took a look at Qiita's tagging function and peeled it off. So that's it. Did you have this hand? So that's it… - Search function -I wanted to be able to search by specifying a slightly more detailed condition **, such as the search target and each resolved/unsolved flag. -Researching again [Advanced Mode](http://nekorails.hatenablog.com/entry/2017/05/31/173925#031-%E3%82%A2%E3%83%89%E3%83%90%E3%83%B3%E3%82%B9%E3%83%88%E3%83%A2%E3%83%BC%E3%83%89%E3%81%A8%E3%81%AF)IthinkIcango.Itrieditatthetime,butdecidedthatitwasfastertoimplementitbymyselfthanunderstandingthismode.(Conditionalbranchinghasbeenimplementedintheschool'sapplicationtask,orsearchisimplementedwithreferenceto[thissite](https://qiita.com/Orangina1050/items/ca4e5dc26e0a32ee3137).)

Chart implementation

As the background of development, What you can do now →I want to do this! Since I’ve come up with a plan based on the axis, I had almost no intention of implementing in detail in the spirit of doing. Although I checked it, I was too unfamiliar with js at the time and I was on the verge of agony.

:fearful:<** What and how can I do this…? ** I came here and quietly despaired in the corner of the classroom, despite the app I thought of myself.

What I learned a lot at this time was :raised_hands:I don’t know, it’s important to try something you touch for the first time

While I was lamenting without knowing anything, I consulted with my school’s classmate and taught me chart.js codepen. At the moment I touched it for a while, I could read chart.js as interesting. As a factor, I think it was a great deal to touch the code that was already completed. You can intuitively understand which value affects which axis data, which value affects which design, etc. If you pass the array here, you win! I was able to set a goal.

I think it’s a bit reckless, but I’m glad I moved to the implementation cleanly because I worked hard on the basic functions in order to save man-hours, including trial and error (result theory).

Cheap, always chart implementation

Data is exchanged with js file at gem’gon’. It is basically converted to json format, but it is not included for learning purposes, and since I could not read the man-hours of the chart to be implemented in the future and I wanted to emphasize speed, I adopted it.

Generally this way.

  1. Create a method to calculate the array to be passed to the chart with the logic of UserModel, call it in Controller
  2. Pass to gon with UsersController
  3. View tag to gon → pass to js file
  4. Pass the js file → canvas tag and draw the chart

*I picked it up to grasp the flow. I would like to deepen my understanding of gon and its surroundings, especially by examining it a little more.

The logic of UserModel is roughly like this.

Since the code is so long, I write it so that only the flow is transmitted: pray: What is the alternative? I will post the Github link line by line, so please see if you are interested. Summarize by evaluation criteria.

:cactus: Questioner/Tags, Answer/Tags

Two items on the donut chart. Since the logic for pulling the data is a little different, Questioner/Tags is taken as an example.

  1. Calculate the tag associated with the Issue posted by the target user
  2. Create an array containing only the tag names
  3. Calculate the tag associated with the Issue posted by the target user
  4. Create an array that stores only the tag ratio

:cactus: Time to response, Time to solved, Total

Bar chart and radar chart items. Only the table that pulls the data is different, so Time to response is used as an example. ** This is the basic flow except for the donut chart. **Detailed processing is omitted.

  1. Calculate the average value of all users -Because the class of the graph changes depending on the user’s behavior, the standard value is calculated based on this data.
  2. Calculate values used to determine various charts -Returns the [minimum value, maximum value, and class width based on it] of each user average value. -If there is no posted Issue, return false and handle it as an exception.
  3. Calculate the boundary value based on 2 ・Users with 〇 seconds to 〇 seconds have a score of 1, and users with 〇 seconds to 〇 seconds have a score of 2…
  4. Based on the boundary value of 35.Calculatinghowmanyusersareineachclassandcreatinganarray
  5. [Calculate whether the target user is included in each class with 0, 1 to create an array](https://github.com/kanon2580/tot/blob/713f6e626a9b83712189a4289452ec3c1cc963a8/app/models/user.(rb#L136-L140)
  6. Calculate user score based on 6 array ・In the case of 3 points, [0,0,1,0,0,0,0,0,0,0] → The second value becomes 1 when turned with each_with_index → The score is calculated with 2+1
  7. Return 5 and 7 to Controller
  8. *Create only the radar chart array with Controller. ・When calling the method of Model from Controller, if you try to create an array on Model, the array will be reset each time it is called. ・The array of [5 (value to pass to chart), 7 (score of user)] is a return value, so [1] of this array is picked up to create an array.

:cactus: Other

Since it is almost the same as Time to response, only the differences will be summarized.

1.Average value Since the absolute value was not large enough to calculate the average value, the total value is calculated. **Chart was only 0 and didn’t change: frowning2:

3. Class calculation The method to be called is changed in order to bring the class error to score 1. It is important that the condition that the score becomes high depends on the evaluation criteria, Time to ~→ 1. High score when the result of average value calculation is low ** → calculate_evaluation_datas_sort_by_max Other → 1. High score when the total value calculation result is high ** → calculate_evaluation_datas_sort_by_min The big difference is that the criterion that determines the class is maximum value→minimum value (named here), and the timing to reverse the array.


The production period was about 2/15 to 3/15, but I deployed the beta version at the beginning of March and received reviews from various people. Thank you: sob:

UserModel methods

  1. Initially all the methods described in Controller
  2. Migrate to Model
  3. Convert common logic into method (latest version)

View drawing area

  1. I used to render the script tag in the HTML partial template
  2. Move to js file(linkiscomment_tags)
  3. Create common method as a method in one file (latest version)

Chart Summary

It’s also the biggest learning in this portfolio, :wave:** Move your hand to find the answer! ** I was convinced that it was a work. Read the parameters that can be handled now, build logic based on them, and send parameters if they are not enough. I think it was a very valuable lesson to learn this through my own experience.

It took me a week to get all the charts implemented at a minimum, sticking to the console screen and exploring it, but at the moment when I made the logic, the sense of accomplishment was so great that it was kind of fun: v:

at the end

When I researched the portfolio, I couldn’t find an article with the same level of feeling as myself because I couldn’t find an article with the same level of feeling as it was, and it wasn’t what I wanted, so I wrote it.

Of course, I think that there is still room for improvement, but since there is no sharpness, I think it will be a break.

I hope it’s catching the eye of anyone creating a portfolio, and even a little inspirational: ramen: I also want to see articles like this by various people, so please write: eyes:

Thank you very much!

Reference 73 recipes to make search form easily with Ransack I will implement a search function (or) and a negative search function (-) in multiple words with rails codepen of chart.js gem’gon’