만드는 계기

Github Trending 알고 계십니까?
Github의 트렌드를 프로그래밍 언어별로 표시할 수 있는 페이지입니다.
여러가지 재미있는 리포지토리를 보거나 할 수 있으므로, 최근 체크하게 되었습니다.
이 페이지를 매일 체크하려고 하고는 있어도, 여러가지 잊은 것 같은 성격이므로, 체크해 잊는 일도 많이 있었습니다. 거기서, 데이터를 보존해 두고, 다음 날에서도 볼 수 있도록(듯이) 하고 싶은 생각으로부터 「Github Trending Log 」라고 하는 사이트를 만들었습니다.

어떤 사이트

보고 싶은 언어와 날짜를 지정하여 해당 날짜의 트렌드 정보를 볼 수 있는 사이트입니다.

URL : h tps : // 기테 뷔 t 렌 ぢ g ぉ g. 네 tぃfy. 아 p/

사용법
날짜, 프로그래밍 언어, 시간을 순서대로 입력하고 로드 버튼을 누르면 추세 데이터가 표시됩니다.



현재 프로그래밍 언어는

파이썬

c#

javascript

typescript

c

c++

java

을 볼 수 있습니다.

제작하는데 사용한 것

사용한 것


서버
Netlify

앞
Nuxt.js(SPA), JavaScript

데이터 업데이트, 저장
Google Cloud Platform, Python


호스팅 서버에는 무료로 사용할 수 있는 Netlify,
프론트 부분은 Nux.js의 SPA 모드에서 JavaScript를 사용하고 데이터 업데이트와 API 부분은 파이썬으로 만들었습니다.

트렌드 데이터 업데이트

데이터 업데이트를 위해 Cloud Functions와 Cloud Storage를 사용했습니다.
Cloud Scheduler를 사용하여 매 시간마다 Cloud Funcitons를 실행하여 트렌드 정보를 매시간 수집합니다. 트렌드 정보를 수집하려면 Github Unofficial Trending API 을 사용하여 수집합니다.
처음에는 Github의 API에서 트렌드 정보를 취할 수 있는 것이 있을까 생각해 조사하고 있었습니다.
없는 것 같았기 때문에, 비공식의 것을 사용하고 있습니다.

수집한 정보는 Cloud Storage에 저장해야 합니다.

앞

Nuxt.js(SPA)를 사용했습니다.
SPA(Single Page Application)는 서버에서는 거의 아무것도 하지 않고, 사이트를 보고 있는 쪽에서 페이지를 재기록하고 있는 것 같습니다(자세히 알 수 없다).
데이터는 Cloud Functions에서 API를 만들고 해당 API를 호출하여 데이터를 검색하고 표시하도록 합니다.

UI 부분은 Nuxt.js 프로젝트를 만들 때 옵션으로 나온 Vuetify을 사용했습니다. 거의 거의 기본값입니다. Bootstrap과 마찬가지로 grid라든지 사용할 수 있습니다. 카드 부분도 Vuetify에서 이미 준비되어 있었기 때문에 그것을 사용했습니다. 매우 편리합니다.

서버

서버에 Netlify을 사용했습니다.
대역 제한은 1개월 100GB까지는 무료이므로 거의 거의 무료로 사용할 수 있습니다.
Github의 마스터 브랜치에 커밋하면 자동으로 배포합니다.
것도 사용하기 쉬웠습니다.

최근 Vercel이라는 것도 알았습니다.
Vercel은 대역 제한 없는 것 같기 때문에, Vercel도 사용해 보고 싶습니다.

미래

하루 중 시간별 트렌드를 살펴보면 변화가 없는 경우가 많습니다. 아마 하루에 한 번 갱신이라고 생각하고 있으므로 (자세한 것은 조사되지 않았습니다), 일자의 선택 부분을 지워 보다 사용하기 쉽게 해 가고 싶습니다.

게다가, 언어를 선택해 며칠 분의 트렌드도 볼 수 있고, 같은 것은 연결해 표시할 수 있으면 좋겠다고 생각하고 있습니다.


트렌드를 볼 수 있는 언어도 조금씩 늘려가려고 합니다.
꼭 사용해보세요!