A story of six junior and senior high school students making a service and taking first place in a programming school contest

This time, one junior high school student and five high school students will do everything from idea to implementation of the service, and the WEB section will be held in a programming school contest for junior high and high school students called Life is Tech!. I would like to take first place and talk about what I thought and felt.

0. Members

The members are junior high and high school students from the third grade of junior high school to the third grade of high school, and the development was done by a team of five high school students with one junior high school student. There are 3 girls and 3 boys, and the ratio of girls is high for a team of student engineers, but everyone is usually very close to each other, going out to play after school or on holidays, eating meals, etc. It is a friend to do. (My team's favorite is fishing, but I haven't been able to go out lately because of some virus ... Pien ...)

1. What kind of service did you make?

The service created this time is a new type of development time recording service that fights with developers called Assemble Tempo in team battles.

• This is the screen at the development stage.

How can you keep your motivation going by setting the goal of "creating a service that keeps you motivated"? When I thought about it as a team, I came up with the idea of making it a game-style service.

We discussed what kind of game to make next within the team, but it became a story that if we competed for development time in team battles, we could continue motivation, so we decided to create a service that competes for development time in team battles. Did.

2. Programming language and services used

Programming language

Programming language: Ruby, Javascript Framework: Sinatra DB for development environment: sqlite3 Production DB: PostgreSQL

The reason for adopting these is because it is adopted in the Web service course of Life is Tech !, so most of the members have used it, and because there are textbooks etc., I decided that education is easy even if I do not understand it. is.

service

I used various services for team development. First, we used Google Hangouts and Slack for team communication. At Slack, we asked questions about the code, new ideas, and feedback on the finished parts.

Google Hangouts was used for online meetings as a measure to prevent infection of a certain virus.

I used Github for code sharing and management and Trello for project task management.

Trello talked with the members, discussed how to proceed, and used labels to indicate priorities, difficulties, and more.

3. About implementation.

The implementation was divided into front-end and back-end teams.

front end

First of all, the members discussed what kind of screen they needed and created a temporary frame.

• This is a picture of a group discussion.

Next, when I decided on the screens I needed to some extent, I used XD to create a frame.

• Responsive version.

Back end

As with the front, the back end was implemented by discussing with the members what kind of system to use and what kind of implementation to implement.

Main features of the backend

User authentication / email confirmation function Graph calculation and graph update in real time (Server Send events) Grouping function Icon function Timer function

Is the main function.

Among them, I would like to explain about Server Send events and timer function, which took a long time to implement.

Server Send events Server Send events is a technology that uses http to perform real-time communication and can be used as a push from the server to the client. The main difference from WebSocket is that it cannot send from the client to the server. (I'm using Ajax instead)

Server Send events took a long time because there is no library in Sinatra and I have to implement it from scratch.

ruby

set :server, 'thin'
$connections = []

get '/send_message' do
	message = "This is a message."
	$connections.each do |sse|
		sse << "retry: 500\n" +
					"event: event\n" +
					"data: #{message}\n\n" unless sse.closed?
	end
end

get '/sse', provides: 'text/event-stream' do
	stream :keep_open do |sse|
		$connections << sse
		graph_data.callback {
			$connections.delete(sse)
		}
    end
end

• Changed for Qiita

Timer function

The timer function prepares a table for the timer. New creation creates a timer if there is no user data in the table. The timer now expires if the table has user data.

ruby

#Check if there is already data in the database
if time = Timers.find_by(User ID: session[:User session],Start time: now_time.all_day,End time: nil)
    #Save the development end time and development time in DB
	Timers.update(End time: now_time)
else
	#Create a new timer
    Timers.create(User ID: session[:User session],Start time: now_time)
end

• Changed for Qiita

4. Impressions of team development

For the first time, I was very happy to be able to release it while there were members developing the backend and most of the members had never used Git.

What I learned.

What I thought I learned the most was to divide the functions into parts and ask the members. (PM) Since the languages that can be written and the techniques that can be used differ depending on the members, it was a great learning to understand them and ask the members. Is it possible to use this technology even if it has never been used? While thinking about it, I asked the members to implement the function! !!

Besides, by teaching the members what they didn't understand, I was able to produce a lot of output and learn things that I didn't even know.

It was hard.

There are many things that were difficult. First of all, it was difficult to teach Git because I was the only member who could use Git for code management and sharing, which is the most important in team development.

Next, regarding the problem peculiar to students, it was difficult because everyone had different schools, so there were few opportunities for everyone to discuss things such as discussions because the schedule did not match. Besides, when it came to the test period, everyone stopped replying and I was worried if I could release it properly.

What I thought about the members.

I think it was my first time to develop a team, so I think it was difficult for me to understand Git at the beginning. However, I thought that everyone followed me and made a very good work.

At the beginning, the members who said "I might bother the members" also said "I'm glad I was able to release it!" And "It was fun!", So I was happy.

As for programming skills, there were members who were able to write Ruby and members who said "I don't understand Ruby at all !!" and who were able to use DB (ActiveRecord)! !! It seems that the members also feel that their skills have improved, and I think it was amazing that they were able to grow to the point where they could feel it.

5. Finally

It was the first time for me and the members to develop this team, but I was happy to be in first place in time for the contest. There were a lot of reflections on PM, development environment, support, and implementation in this team development, but I hope that it can be used for future development.

We are discussing what kind of functions to implement in the future, and we are planning to update it, so it would be great if you could use the service to increase your development motivation! !!