CCTwitch - Collect Clip for Twitch

  Twitch Clip Download, Search and Collect easily. CCTwitch provide various sort of clips by keyword, date, vids. Also can save, download clips.
  Only for kr server, It provide periodicly kr twitch stream data every 30min.

• Site: CCTwitch
• API: TwitchAPI

Stack

• Front : Vuejs
• Back : Firebase, Node.Js

Structure & Features

1. Channel

해당 채널의 클립들을 다양한 정렬방식으로 제공합니다.

Category & Sort Options

Category	Option 1	Option 2
By Video	video	timeline
By Date	date	keyword

• 1-1. 다시보기별(Video) 클립 확인

  • Twitch API로 Video와 CLip 나열

    1. Twitch API를 통해 type === 'Archive' 인 video를 받아옴.

    2. 받아온 Video data는 list화 하여 carousel 및 dialog 형태로 보여줌.

    3. Video를 선택시 해당 Video 생성일로 부터 현재까지 Clip data를 가져와 video_id 일치 여부 판단하여 나열.

    4. infinite scroll loader로 추가 Clip들 가져오기.

  • Timeline 만들기

    Cloud Functions로 해당 Video와 관련된 Clip들을 시간순으로 나열

    1. Firebase Cloud functions > Http Request > timeline.js 실행

    2. 해당 Video가 isLive === 'live' ? '10분에 1번 업데이트' : '3시간에 1번 업데이트'

    3. req.body.vid_id로 twitch api를 통해 video data 재확인

    4. req.body.broadcaster_id로 twitch api를 통해 clip을 가져온 뒤, 각 클립의 video_id와 video data의 일치하는지 확인.

    5. video_id === null인 clip은 video data의 started_at 과 duration을 통해 클립 생성시간과 비교하여 stream 상태에서 생성된 클립인지 확인 판별함.

    6. 확인된 클립을 시간순으로 나열하여 최대 100개까지 firestore에 저장.

    7. 생성된 firestore doc id를 res.send로 보냄.

• 1-2. 날짜별(Date) 클립 확인

  • Twitch API로 Clip 나열

    지정된 기간내 등록한 Clip을 조회수 순으로 나열

    제공하는 옵션 : 24Hours, Week, Month, Year, All, Custom

    (Custom: Channel 생성일부터 현재까지 Date Picker를 통해 지정가능)

  • Keyword 검색

    Keyword 검색을 통해 해당 기간내 등록한 키워드를 가진 Clip들을 나열

    1. 최대 15자, 5개의 키워드 등록(대소문자 구분X),
    2. Date Picker을 통해 검색할 날짜 지정가능
    3. 검색된 클립제목의 키워드를 highlight 처리함.

       filters:{
         highlight: function(words, queries){
           let result = words;
           queries.forEach((query) => {
             let targetReg = query.text;
             let regex = new RegExp(targetReg, 'gi');
             result = result.replace(regex, '<span class="'+query.color+'--text">' + query.text + '</span>');
           })
           return result;
         }
       },

2. Cliplist

Cliplist를 만들어 최대 100개의 Clip Data를 수집 및 관리할 수 있게 도와줍니다.

2-1. About Cliplist

Category	period	Option
User Created	always	Rearrange, Import
Daily Hotclips	daily	Auto generated
Weekly Wak	weekly	Auto generated

• User Crated : Channel 등에서 찾은 Clip들을 저장하고 관리할 수 있습니다.

• Daily Hotclips : 매일 07:00에 전날 저장된 Stream Data에서 조회수가 높은 100개의 클립을 저장한다.

  (Google Cloud Scheduler - createHotClip)

• Weekly Wak : Google Cloud Scheduler - createHotClip 을 호출하여 매주 수요일에 특정 스트리머들의 Clip을 주간단위로 수집하여 게시한다.

  if (new Date().getDay() === 3) {
    axios.get(`HttpRequestURL`)
  }

2-2. 기능

• Cliplist내 Clip들의 정렬을 바꿀 수 있다.
• Twitch Clip ID값을 통해 Clip을 불러오고 저장할 수 있다.
• 저장된 Clip들을 볼 수 있다.
• 만일 삭제된 클립이있다면, Twitch 서버에서 완전히 삭제되기 전까지 해당 클립의 소스를 볼 수 있다.

3. Login Proccess

• Social Login with Twitch

• Twitch API + Firebase Auth

4. Streamer

Twitch API, Localstorage를 통해 저장된 유저정보를 카드형태로 보여줍니다.

	Login	Storage
Bookmark	X	Localstorage
On Live	O	Twitch API + OAuth Token
All	O	Twitch API + OAuth Token

1. Localstorage에 저장된 Data를 카드형태로 보여줍니다.
2. Twitch OAuth Token을 통해 follow된 유저중 Stream 상태인 스트리머를 스트림 정보와 함께 카드형태로 보여줍니다.
3. 내가 Follow한 스트리머들을 카드형태로 보여줍니다.

5. Report

Twitch에서 언어 설정이 한국어인 채널들의 실시간 Stream 정보를 매 30분마다 수집하여 Chart로 보여줍니다.

Google Cloud Scheduler을 이용하여 매 30분마다 viewer_count > 9인 모든 스트림 정보를 수집 및 저장하고 이 중 viewer_count가 높은순으로 Total Stream, Total Viewer, Top 100 Stream, Top 50 Category를 따로 저장합니다.

• 5-1 Overall

  ApexChartJS Library 을 이용하여 Chart 생성 (x: time, y: stream, viewer)

  해당 날짜의 07:00를 기준으로 익일 07:00까지의 Total Stream, Total Viewer을 시계열로 보여줍니다.

  Viewer_count로 Top100 Stream, Top50 Category를 보여줍니다.

  • Streamer : streamer의 viewer를 시계열로 Chart를 그려 나타내고, 기간내 Clip을 보여줍니다. (Annotation: Title, Category)
  • Catergory : viewer_count가 가장 많았던 시각의 Top10 Stream 정보를 Card 형태로 보여줍니다.

• 5-2 Channel

  • Twitch API 를 통해 streamer을 검색하고, 만일 서버에 stream data가 저장되었다면 <v-icon>mdi-calendar</v-icon> 표시를 합니다.
  • Firebase Realtime Database에 저장된 해당 유저의 Stream Data를 읽고 Data Picker에 나타냄.
  • 해당 날짜의 Stream Data를 읽고 streamer의 viewer를 시계열로 Chart를 그려 나타내고, 기간내 Clip을 보여줍니다.

---

Cloud functions with Node.JS

	Trigger	Functions
createHotClip	scheduler	매일 수집된 Stream Data를 기반으로 Top 100 클립리스트 생성
twitchStreamDataCollector	scheduler	매 30분마다 kr서버 Stream Data 수집
deleteClipsInCliplist	firestore	Cliplist 삭제시 저장된 Clip 자동삭제
deleteHotClip	firestore	Hotclip 삭제시 저장된 Comments 자동삭제
deleteComments	firestore	Comments 삭제시 저장된 Replies 자동삭제
deleteUser	firestore	User 삭제시 저장된 Hotclip, Cliplist 자동 삭제
twitchAuth	https request	트위치 소셜로그인시 User 정보 업데이트 및 생성
twitchTokenValidation	https request	Twitch App Access Token Validate
twitchOauthToken	https request	Twitch OAuth Token 발행
weeklyWaktaverse	https request	매주 지정된 스트리머들의 top 100 클립리스트 생성
timeLine	https request	Video_id를 기반으로 해당 기간내 클립을 시계열로 나열한 리스트 생성
fcm	https request	Firebase Cloud functions의 key
twitchWebHook	https request

---

Database

1. DB & Data sets

DB	Data1	Data2	Data3
Firestore	Cliplist	Timeline	Hotclip
Realtime Databse	User Data	Notification Data (fcm)	Twitch Stream Data
LocalStorage	Bookmark	Twitch tokens	Environment variables

2. ERD

• Firestore Diagram

• Realtime Database

• localstorage
  1. Bookmark : All likes, liked
  2. Twitch tokens : App Access token, OAuth token
  3. Environment variables : autoLogin, dark mode theme, ...

Accessibility

1. PWA

1-1 Install

1-2 Push Notification with Firebase Cloud Message

• Flow Chart

---

2. SEO

2-1. SEO 등록

• Google Search Console

• Naver Search Advisor

2-2 Open graph tags

• Set Open graph web version

  <meta property="og:type" content="website" />
  <meta property="og:title" content="CCTwitch - Twitch Clip Collector" />
  <meta
    property="og:description"
    content="Download, search twitch clips easily. CCTwitch provide various sort of clips by keyword, date, videos."
  />
  <meta
    property="og:image"
    content="https://firebasestorage.googleapis.com/v0/b/twitchhotclip.appspot.com/o/open_graph%2F192x192.png?alt=media&token=520a77f0-be36-44bf-93c1-724ccbf16b78"
  />
  <meta property="og:url" content="https://cctwitch.xyz" />
  <meta property="og:site_name" content="CCTwitch" />

2-3 Sitemap.xml

• sitemap: Sitemap

3. Google Analytics & Adsense