이번에는 중학생 1명, 고등학생 5명이 봉사 아이디어부터 실장까지 고등학생Life is Tech!을 대상으로 한 프로그래밍 스쿨 경연대회에서 WEB 부문 1위에 올라 자신의 생각과 느낌을 이야기하고 싶었다.

멤버

구성원은 중학교 3학년부터 고등학교 3학년까지 중·고등학생, 중학생은 고등학생 1명으로 5명으로 구성된 팀이 개발했다.
여학생 3명, 남학생 3명, 학생의 엔지니어 팀으로 여학생의 비율이 높지만 평소에는 모두 사이가 좋아서 방과 후 휴일과 함께 놀러 가고 밥을 먹는다.
(팀이 제일 좋아하는 건 낚시인데 어떤 바이러스 때문에 요즘 놀러갈 수가 없어...헤헤...)

1. 어떤 서비스를 했는지.

이번에 제작된 서비스는 개발자Assemble Tempo와 팀전을 벌이는 신형 개발시간 기록 서비스다.

※ 개발 단계의 그림.
'지속동력 서비스 구축'의 목표를 설정했는데 어떻게 해야만 동력을 계속할 수 있습니까?팀에서 고민하다가 게임 형식으로 서비스해야 한다는 생각이 들었어요.
다음 게임은 어떤 게임을 할지 팀 내에서 논의가 진행됐고, 팀전에서 개발시간을 경쟁하면 계속 동력을 유지할 수 있어 제작진에서 개발시간을 경쟁하는 서비스를 결정했다.

2. 사용하는 프로그래밍 언어와 서비스

프로그래밍 언어

프로그래밍 언어: Rubby, Javascript
프레임:Sinatra
개발 환경용 DB:sqlite3
공식 환경용 DB: PostgreSQL
그 이유는 Life is Tech!의 웹 서비스 과정이 채택되어 구성원 대부분이 사용한 적이 있다. 교과서 등이 있기 때문에 교육을 몰라도 간단하다.

서비스

팀 개발에 다양한 서비스를 사용했다.
우선 팀 커뮤니케이션으로 구글 한굿즈와 슬랙을 활용했다.
슬랙은 코드에 관한 질문에서 새로운 아이디어, 완성된 부분의 피드백 등을 제시했다.
Google Hangouts는 한 바이러스의 감염 방지 대책으로 온라인 회의를 할 때 사용되고 있습니다.

코드 공유 및 관리는 프로젝트 작업을 관리하기 위해 Giithub을 사용합니다.
트렐로는 멤버들과 상의한 뒤 어떻게 추진할지, 라벨 사용, 우선도와 난이도 등을 논의했다.

3. 설치 정보.

실시는 전단과 후단으로 나뉘어 진행되었다.

프런트엔드

먼저 멤버들은 시작에 어떤 그림이 필요한지 토론하고 임시 프레임을 만들었다.

※ 이 사진은 그룹 토론 당시 사진입니다.
이어 필요한 화면을 어느 정도 확정한 뒤 XD로 프레임을 만들었다.

※ 스펀지 버전입니다.

백엔드

백엔드도 프런트와 마찬가지로 어떤 시스템을 사용하고, 어떤 실시를 실시할지 멤버들이 논의해 실시했다.

백엔드의 주요 기능

사용자 인증/메일 확인 기능
차트 계산/차트의 실시간 업데이트(Server Send events)
그룹화 기능
아이콘 기능
타이머 기능
주요 기능입니다.
그중에서도 시간이 걸린 서버 센드 이벤트와 타이머 기능을 설치하는 것에 대해 설명하고 싶습니다.

Server Send events

Server Send events는 http를 사용하여 실시간 통신을 하는 기술로 서버에서 고객으로의 Push로 사용할 수 있습니다.
WebSocket과 달리 주로 고객으로부터 서버로 보낼 수 없습니다.(Ajax 재사용)
Server Send events가 Sinatra에 있는 라이브러리가 없기 때문에 처음부터 실행해야 하기 때문에 시간이 걸렸습니다.
ruby

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

get '/send_message' do
    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

※ Qiita용 변경

타이머 기능

타이머 기능은 타이머에 테이블을 제공합니다.
테이블에 사용자 데이터가 없으면 새 타이머가 작성됩니다.
테이블에 사용자 데이터가 있으면 타이머가 종료됩니다.
ruby

# データベースに既に、データがあるか確認
if time = Timers.find_by(ユーザのID: session[:ユーザのセッション], 始まりの時間: now_time.all_day, 終わりの時間: nil)
    # 開発終了した時間と開発時間をDBに保存
    Timers.update(終わりの時間: now_time)
else
    # タイマーを新規作成
    Timers.create(ユーザのID: session[:ユーザのセッション], 始まりの時間: now_time)
end

※ Qiita용 변경

4. 팀 개발 소감

이번에 처음으로 백엔드를 개발한 멤버가 있는데 멤버 대부분이 지트를 사용해 본 적이 없어서 발매할 수 있어서 너무 기쁩니다.

배운 것.

가장 배울 수 있는 것은 기능을 부분적으로 나누어 멤버들에게 부탁하는 것이다.(PM)
멤버들에 따라 쓸 수 있는 언어와 쓸 수 있는 기술 등도 달라 이를 터득하고 멤버들에게 부탁하는 부분을 많이 배웠다.
안 써본 기술이라도 이러면 되나?기다리면서 생각하면서 멤버들에게 기능 실현을 부탁했다!!
이외에도 교수 구성원들이 모르는 점 등을 통해 많은 성과와 내가 모르는 것도 배울 수 있었다.

야단난 일.

힘든 일들이 많았어요.
우선, 팀 개발에서 가장 중요한 것은 오직 나 한 멤버만이 코드 관리, 공유의 Giit를 사용할 수 있어서 Giit를 가르치는 것이 매우 힘들다.
다음은 학생 특유의 문제인데 다들 학교가 달라서 얘기할 기회가 없어서 힘들었어요.
다른 건 시험 기간이라 답장이 없어서 잘 발표할 수 있을지 걱정이에요.

멤버에 대한 생각.

팀 개발은 처음이라 처음에는 기트를 모르고 힘들었다.
하지만 여러분과 잘 지낼 수 있어서 너무 좋은 작품이라고 생각해요.
초반 "멤버들에게 폐를 끼칠 수 있다"는 멤버도 마지막에 "발매가 돼서 다행이다!"즐거웠어이렇게 말하기 때문에, 나는 매우 기쁘다.
프로그래밍 기술 면에서도 "루비는 전혀 모른다!"이렇게 말하는 멤버는 루비를 쓸 수 있고, DB(Active Record)를 사용할 수 있는 멤버가 기다리고 있다!!
멤버들도 기술 향상을 실감한 듯 실감할 수 있는 성장이 대단했다.

5. 마지막

이번 팀 개발은 저와 멤버들이 모두 처음 참가해서 경기를 따라잡고 1등을 해서 기쁩니다.
이번 팀 개발은 PM, 개발 환경, 지원, 실장 측면에서 반성해야 할 부분이 많은 만큼 향후 개발에 역할을 해달라고 당부했다.
앞으로 우리는 어떤 기능을 실현할 것인지 토론할 것이다. 왜냐하면 계획을 갱신하기 때문에 서비스를 사용하여 개발의 동력을 높일 수 있다면 나는 매우 기쁠 것이다!!