swsnu/swpp2021-team9

🎸MetaBand, where anyone can create covers and combine them into a band!

MetaBand

In MetaBand, people can create band cover contents regardless of time and space. A cover is a performance of an existing song by other vocalists/instrumentalists. In MetaBand, you can record & upload song covers and listen to other people's covers.

MetaBand specializes in connectivity between covers. Among the covers of a particular song,

1. Anyone can listen to combinations of any covers simultaneously, and
2. Anyone can record/upload their own cover while listening to that combination.

For example, guitarist G may add guitar lines while listening to vocalist V's vocals and drummer D's drums. Another vocalist V2 may hear G's guitars and record their own vocals to it. These kinds of interactions make it possible to have limitless amount of cover combinations. A combination of covers is called a MetaBand (metaverse + band), since it is essentially a band formed virtually.

MetaBand aims to be a place for people of any musical background, where one can musically connect with others without any constraints of offline meetings.

---

Read Our Wiki

---

Instructions

Installation

source ~/virtualenv/python3.7/bin/activate
pip install -r backend/requirements.txt
cd frontend
yarn install
cd ..

Frontend Running

cd frontend
yarn start

Backend Running

cd backend/app
python manage.py migrate
python manage.py runserver

Frontend Testing

cd frontend
yarn test --coverage --watchAll=false

Backend Testing

cd backend/app
coverage run --source='.' manage.py test
coverage xml

swpp2021-team9's Issues

[Frontend] Song Page design

Feature description
Song Page design, without connecting to backend

Screenshots / Additional context
Refer to UI Flow for details

[Frontend] Album, Main Page, Search Result Page

Feature description

Main Page, Search Result Page without backend connection

Screenshots / Additional context

Refer to UI Flow for details

[Backend] Song Views

Feature description

Song Views song/main/, song/search/, song/info/<int:pk>/, song/ Without implementing machine learning

Screenshots / Additional context

[Frontend] Create Song Page design

Feature description

Create Song Page design, without connecting to backend

Screenshots / Additional context

Refer to UI Flow for details

[Frontend] Base URL

Feature description

• tsconfig에 path 추가하기. 이걸 하면 '@/folder명'으로 import 가능(절대경로?)

Screenshots / Additional context

[Frontend] Create Cover Page

Feature description

• 커버 곡 생성 페이지
• step 1
  • 유튜브 플레이어 (react-player) 선택
  • 서버에 저장된 링크 or 음원 재생하는 플레이어 제작
  • 녹음 버튼 및 기능
  • 업로드 버튼 및 기능
• step 2
  • 자신이 업로드한 것 다시 듣기 (step 1의 미니플레이어와 같은 컴포넌트)
  • 뒤로가기
• step 3
  • TBD

Screenshots / Additional context

react-player는 사운드 클라우드, 유튜브, 트위치 등 다양한 플랫폼과 연동되어있어서 선택했습니다.
데모 예시
코드

[Frontend] Get Youtube Thumbnail link

Feature description

유튜브 링크가 주어졌을 때 썸네일 링크를 반환하는 함수를 만들고, 현재 있는 페이지들에 적용합니다.

Screenshots / Additional context

Quality gate status not computed

Feature description

Screenshots / Additional context

[Backend] User Views

Feature description

Backend User Views

Screenshots / Additional context

Add README instructions

Feature description

Should add install/testing instructions in README.md

Screenshots / Additional context

change isLike to isLiked

Feature description

change isLike in API to isLiked

Screenshots / Additional context

[Backend] profile backend api

Feature description

Profile 페이지에서 쓸 api 들 backend 구현입니다.

파일을 전송하기 위해 PUT에 multipart/form-data 형식을 지원하지 않아서 POST로 바꾸었습니다.
관련 WIKI도 수정하였습니다.

Screenshots / Additional context

[Server] Deploy

Feature description

현재까지 작업을 서버에 올리고 sqlite를 mySQL로 바꾸는 작업 진행

EC2 서버가 매우 느려서 서버 내에서 react build하지 못하고 로컬에서 build 후 docker hub를 통해 서버로 올라가도록 수정 했습니다.

또한 SSL 작업을 끝내고 CORS도 적용했습니다.
서버 내부 설정에 관한거는 secrets.json파일에 넣어두어서 mysql을 접근 할 수 있습니다.

https://metaband.space 로 들어갈 수 있습니다.

Screenshots / Additional context

[Frontend] Wrapper Style

Feature description

Change Wrapper CSS style to tailwindCSS to unify styling method

Screenshots / Additional context

merge to mid

Feature description

mid 발표를 위한 branch와 main브랜치간의 충돌이 있어서 mid에 main을 merge했습니다.

Screenshots / Additional context

all/mergemain이 mid로 merge되면 각자 작업하던 부분에 다시 mid를 merge해서 작업하면 충돌없이 main에 적용할수 있습니다.

Travis CI setting

Feature description

Setup Travis CI and SonarCloud by configuring .travis.yaml file

Screenshots / Additional context

Homework of SWPP practice session #9

[Frontend signin/signup/profile page]

Feature description

[signin /signup page]

• signin / signup frontend 는 testing 까지 완료했습니다!
• backend 부분은 태원님이 수정해주신 부분과 merge되어있습니다.

[profile page]

• following 을 원래 profile page 에 표시하려고 했는데, User format 에 포함되어 있지 않아서 우선 제외했습니다.
• Testing 이 완료되지 않아 추후 테스팅 코드는 더 작성해야 합니다 !

Screenshots / Additional context

[Frontend] Main Page, Search Result Page Test

Feature description

Added main page, search result page tests

Screenshots / Additional context

[Frontend] Create Wrapper

Feature description

Wapper 만들기
Header

• view 그리기
• button onclick 연결

PlayerBar

• progress 표시
• 버튼 연결
• view 그리기

Player

• 여러 audio를 한번에 재생
• 다음, 이전, 멈춤 컨트롤
• track 추가

Screenshots / Additional context

icon같은 resource는 res에 저장했습니다.
types.d.ts에 global로 쓰일 만한 type들 모아놨습니다.

app/helper에 도움이 될만한 코드들 모았습니다.

TrackPlayer

private audios: HTMLAudioElement[]
private track?: TrackInfo
private status: 'init' | 'loading' | 'loadFinish' | 'pause' | 'playing'
onStatusChange?: (status: string) => void;

• setTrack(track)
  재생할 track 을 설정
• isPaused()
  멈춤 (every audio is paused)
• play()
  동시 재생
• pause()
  동시 멈춤
• getDuration()
  전체 플레이 시간 (max of audio.duration)
• getCurrentTime()
  현재 재생 시간 (max of audio.�currentTime)
• getMinReadyState()
  현재 오디오 상태 (min of audio.readyState)

Player

기본적으로 TrackPlayer의 Singletone과 tracks 관리를 더한 것.

• static getInstance()
  어디서든지 같은 player 가져오기
• setIndex()
  track index로 재생
• setTracks(tracks: TrackInfo[])
  새로운 tracks를 가져오고 첫번째 재생
• addTrack(TrackInfo)
  새로운 track을 현재 재생 이전에 추가하고 바로 재생
• playNext()
  다음 곡 재생
• playPrev()
  이전 곡 재생

Backend initialization

Feature description

Initializing backend

Screenshots / Additional context

[Frontend] Cover edit page

Feature description

원래는 Coverpage에서 수정하려고 했지만 input을 받는 것과 보여지는 것을 분리하는게 더 좋을 것 같아서 새로운 페이지를 추가합니다.

• CoverEditPage 만들기
• Backend API의 /cover/info/ PUT 연결
• 작동 확인

Screenshots / Additional context

[Frontend] Song Page Test

Feature description

Add tests for Song Page!

Screenshots / Additional context

[Frontend] Like 연동

Feature description

Like 버튼이 작동하도록 프론트엔드와 백엔드를 연동해야 합니다

Screenshots / Additional context

[Frontend] Cover Page

Feature description

Cover page 제작

• 기본 정보 출력
• 음악 재생
• 테스트

Screenshots / Additional context

SonarCloud Code Smells

Description

Should refactor and remove SonarCloud Code Smells

Screenshots / Additional context

How to solve

Each person should refactor the code smells assigned to them as shown in the SonarCloud code smell screen.
Each person should open a branch to solve their code smells and make PRs.

By December 2nd, all 89 Code Smells (or all of the code smells left in that time) should be solved.

[Frontend] Recording Quality

Feature description

• 녹음할 때, 잡음 제거가 심하게 되어서, 악기 소리가 녹음이 잘 안되는 상황 발생.

Screenshots / Additional context

Frontend initialization

Feature description

Initialize frontend containers

Screenshots / Additional context

[backend] make django model

Feature description

Implement django orm models in models.py according to Design and Planning Model E-R diagram

Screenshots / Additional context

[Frontend] Connect API

Feature description

axios를 이용해서 백엔드와 연결하는 함수들을 만들기

파일 구조

src
  api
    band
      actions.ts
      actionTypes.ts
  actions.ts
  actionTypes.ts
  dummy.ts
  ...
...

�Redux-saga

official page
리덕스 사가를 사용하면 비동기 호출의 상태 (loading, error, success 등)에 따라 여러번 상태를 변경할 수 있어서 api호출할때 상태를 알려주는 용도로 사용했습니다.
TypeAction은 type 들을 지정해 주는데 도움을 주는 module입니다.

사용법

현재 CoverPage에 적용시켜 놓은 상태이고, test와 slice를 만들때 이 부분을 참고하면 될것 같습니다.

1. Action 등록
   src/api/band/actionTypes.ts 파일 안에 새로운 asyncAction을 만듭니다.

# src/api/band/actionTypes.ts

export const LOAD_COVER = asyncActionCreator('LOAD_COVER');

src/api/band/actions.ts 파일에 새로운 액션을 만듭니다.
asyncAction의 generic type은 첫번째부터 [request's input type], [data type], [error type]입니다.

# src/api/band/action.ts

export const loadCover = asyncAction<number, Cover, string>(AT.LOAD_COVER);

2. slice action 등록
   src/containers/<Page>/slice/index.ts 에서 type과 createSlice에 reducer를 추가해줍니다.

# src/containers/CoverPage/slice/index.ts
...
/* --- STATE --- */
export interface CoverState {
  name: string;
  coverResponse: AsyncStateType<Cover>;
} // state 형식 정의

export const initialState: CoverState = {
  name: 'cover',
  coverResponse: { loading: false },
};

const slice = createSlice({
  name: 'cover', // 이 이름을 types/RootState.ts에 써놓아야 함
  initialState,
  reducers: {
    loadingCoverResponse(state, action: PayloadAction<any>) {
      state.coverResponse = { loading: true };
      return state;
    },
    successCoverResponse(state, action: PayloadAction<Cover>) {
      state.coverResponse.loading = false;
      state.coverResponse.data = action.payload;
      return state;
    },
    errorCoverResponse(state, action: PayloadAction<string>) {
      state.coverResponse.loading = false;
      state.coverResponse.error = action.payload;
      return state;
    },
  },
});
...
// useCoverSlice 에 useInjectSaga을 추가해 줍니다.
export const useCoverSlice = () => {
  ...
  useInjectSaga({
    key: slice.name,
    saga: coverPageSaga,
  });
  ...
};

3. saga.ts 만들기
   container의 slice 폴더 안에 saga.ts파일을 만듭니다.
   실제 코드에 주석을 더 했습니다.

# src/containers/CoverPage/slice/sags.ts
import { put, takeEvery } from 'redux-saga/effects';
import { coverActions } from '.';
import * as AT from 'api/actionTypes';
import * as actions from 'api/actions';
import { api } from 'api/band';
import { ActionType } from 'typesafe-actions';

// saga함수들을 모아서 slice/index.ts에서 등록할 saga입니다. 
export default function* coverPageSaga(payload: any) {
  // action type의 REQUEST를 통해 호출하면 뒤에 �saga 함수인 getCoverResponse 가 호출됩니다.
  yield takeEvery(AT.LOAD_COVER.REQUEST, getCoverResponse);
}

// API를 호출하는 부분입니다.
export function* getCoverResponse(
  action: ActionType<typeof actions.loadCover.request>,
) {
  // 처음 시작하면 loading을 표시해 줍니다.
  yield put(coverActions.loadingCoverResponse('start load'));
  try {
    const coverResponse = yield api.getCoverInfo(action.payload);
    // 성공하면 데이터를 등록해 줍니다.
    yield put(coverActions.successCoverResponse(coverResponse));
  } catch (e: any) {
    // 에러가 발생하면 에러를 전달해줍니다.
    yield put(coverActions.errorCoverResponse(e));
  }
}

4. Container에서 호출
   dispatch 를 이용해서 호출하는건 이전과 같습니다.

const dispatch = useDispatch();

dispatch(apiActions.loadCover.request(Number(props.match.params.id)));

Api client and testing

axios client를 숨겨서 test에 용이하게 했습니다.
src/api/band/index.ts안에 모든 api에 대한 함수를 정리해 놓았습니다.
get 요청의 경우에는 Http Response에서 data를 받아오지만 나머지 요청은 Http Request결과를 그대로 반환합니다.

// get
  getCoversBySongId: async (songId: number) => {
    const response = await apiClient.get<Cover[]>(`/api/cover/${songId}/`);
    return response.data;
  },

// others
  putCoverInfo: async (coverForm: CoverFormPut) => {
    return await apiClient.put<Cover>(
      `/api/cover/info/${coverForm.id}/`,
      coverForm,
    );
  },

테스트 할때 api에 대해서 각각의 fn만 jest.fn을 통해 mock 함수로 만들면 인터넷 문제 없이 테스트를 진행할 수 있습니다.

  api.getCoverInfo = jest.fn(
    (coverId: number) =>
      new Promise((res, rej) => {
        res(dummyCovers[coverId]);
      }),
  );

Dummy

흩어져 있던 dummy들을 한군데로 모았습니다.
src/api/dummy.ts

Screenshots / Additional context

[Connect] SongPage, CreateSongPage

Feature description

Connect SongPage and CreateSongPage to backend

Screenshots / Additional context

[Backend] Combination views

Feature description

Neet do implement combination/songid/, combination/info/id/ views

Screenshots / Additional context

[Frontend] Main Page Album style

Feature description

Main Page에서 각 album이 통일성 있게 표시되도록 style 수정이 필요합니다.

Screenshots / Additional context

album의 위아래 정렬이 맞도록 수정해야 합니다.

[backend] Hide secret key

Feature description

As Is : Current Secret key explicity written in settings.py file
To Be : Separate Secret key in a new file and hide the secret key

Screenshots / Additional context

Logo 변경

Feature description

Logo를 bandcruit에서 MetaBand로 변경

Screenshots / Additional context

[Alpha Test]Bug 와 Issue는 여기에 답글달아주세요.

Bug description

CoverPage에서 노래 재생안되는 CORS 버그 있습니다.
SingIn SignUp 없습니다. 그래서 노래 추가도 안됩니다.

[Connect] MainPage, SearchResultPage

Feature description

Connect MainPage and SearchResultPage to backend

Screenshots / Additional context

[Backend] Cover views

Feature description

Need to implement cover/<song_id>/, cover/<song_id>/<instrument_id>/, cover/like/<pk>/ views

Screenshots / Additional context

[Backend] urls, views initialization

Feature description

should decide file structure and initialize urls and views

Screenshots / Additional context