Devalytics-DIY 상세 분석 개발

I am archiving this project because DEV has added - The remaining portion of this post I will be leaving up because I think it's fairly educational

배경.
저는 슈퍼 수학 마니아입니다. 기회만 있으면 계기판/데이터 시각화 페이지를 만드는 것을 좋아합니다.최근에 나는 개인적인 창의적인 프로젝트를 하면서 나의'최종적으로 이 멋지게 하기'목록의 문제를 해결하기로 결정했다. Dev. to stats에 일일 세분화 계기판을 만드는 것이다!

개인 목표 신학원 진입

조기 가동-내가 못하는 것은 미리 공유하는 것임을 알고 있다. 내가 다른 프로젝트에 들어가기 전에'아직 완벽하지 않다'는 상태에 빠지지 마라.

짙은 색을 사용하라. 나는 이 사이트가 순수한 짙은 색 주제라고 말하지 않지만, 나는 매우 의도적으로 나의 디자인에 짙은 색을 사용하고 싶다.

원가를 최소화하라. 이것은 금전 원가이자 정신적 원가이다.나는 이것이 모든 사람이 스스로 회전할 수 있고, 너무 많은 바스켓이 필요하지 않아도 뛰어넘을 수 있는 실행 가능한 선택이라고 생각한다.

주의: 만약에 당신이 어느 날에 충분한 게시물을 올리거나 충분한 통계 데이터를 검사했다면 Heroku와Firebase는 지불을 요구할 수 있지만 단점이 충분하다고 생각합니다. 대부분의 사람들은 그것을 클릭하지 않을 것입니다. 많은 사람들이 당신의 사이트를 잠재적으로 방문하지 않는 한- 그러므로 저처럼 공개적으로 공유하지 않으면 당신은 잘 알아야 합니다!

내가 썼어

백엔드

Heroku와Node.js, 매일 아침 개발자의 API 데이터를 가져와Firebase

로 전송하는 데 사용

Firebase 데이터 저장용

프런트엔드
이 모든 선택의 이유는 익숙도와 개인적인 선호이다

Vue.js (2.x)

Tailwind

Chart.js

Github Repo for Frontend

너 자신의 신학원을 세우다
시간이 지날수록, 나는 저장소의 자술에서 이러한 내용을 더욱 명확하게 설명하려고 한다

Firebase 설정

Sign up for/Log in to Firebase

새 항목 만들기 (임의로 이름!)

Cloud Firestore>Create Database에서 Firestore 데이터베이스 구성

프로덕션 모드로 시작하여 위치를 기본 위치로 설정합니다.

Firestore 규칙을 다음과 같이 설정합니다.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read;
      allow write: if false;
    }
  }
}

서비스 계정을 만듭니다.이것은 프로젝트의 설정 > 서비스 계정 > 노드에 대한 계정 생성에 있습니다.js와 파일을 저장합니다.json 파일은 나중에 참조할 수 있습니다(Heroku의 환경 변수에 사용).

Heroku 장치

Heroku 계정 등록/로그인

새 Heroku 프로그램을 만듭니다 (마음대로 이름을 붙일 수 있습니다)

Fork the Devalytics GitHub Repo

응용 프로그램 대시보드에 fork를 연결하는 데ploy>Deployment Method 아래의 Heroku 응용 프로그램

Firebase & 서비스 계정에 환경 변수를 추가합니다(변수 이름은 다음과 같습니다)

프로젝트에 "Heroku Scheduler"플러그인을 추가하고 원하는 시간에 매일 실행하도록 설정합니다npm run daily.

Dev.to API 키

API 키 개발

Firebase 정보(Firebase-var firebaseConfig에서 JSON 객체로 표시됨)

FIREBASE 어플리케이션 ID

FIREBASE_AUTH_DOMAIN

FIREBASE_DB_URL

FIREBASE 키

FIREBASE_MESSAGING_SENDER_ID

FIREBASE 프로젝트 번호

화기 메모리 통

다음 서비스 계정 변수:

인증 제공업체

SA_auth_uri

SA 고객 이메일

SA 고객 식별 코드

SA 고객 x509 인증서 URL

개인 키

개인 키 id

사우 프로젝트 번호

SA_token_uri

사우형

Netlify 설정

포인터 프런트엔드 저장소

Sign up for/Log in to a Netlify Account

새로운 Netlify 사이트 만들기

새로운 웹 사이트를 프런트엔드 저장소의 분기로 연결

빌드 명령: yarn build

출시 카탈로그: dist

Firebase에 환경 변수를 추가합니다(위 Heroku의 Firebase 섹션과 동일).

설치 > 구축 및 배포 > 환경에 위치

FIREBASE 어플리케이션 ID

FIREBASE_AUTH_DOMAIN

FIREBASE_DB_URL

FIREBASE 키

FIREBASE_MESSAGING_SENDER_ID

FIREBASE 프로젝트 번호

화기 메모리 통

여기서 어디까지 갑니까?
Devalytics의 불행한 점 중 하나는 데이터를 거슬러 올라갈 수 없다는 것이다. 만약 어느 날 Heroku 스크립트가 어떤 이유로도 실행되지 못한다면, 그 날은 낭비될 것이다.그렇기 때문에 저는 가능한 한 빨리 데이터를 수집하고 싶습니다. 이렇게 하면 제가 사이트에서 더 많은 분석을 구축할 때 모든 것이 정상적으로 작동하는지 검증하기 쉽습니다. 왜냐하면 데이터가 3일 이상(저활동) 존재하기 때문입니다.
나는 내가 보충하고 싶은 내용을 이미 알고 있다.

날짜 필터

기사별 데이터 뷰

라벨 내역

일일 요약 정보를 보려면 "업데이트"를 클릭하지 않아도 됩니다

.
만약 당신이 자신의 Devalytics 실례를 내놓을 계획이나, 또는 추가된 데이터를 보고 싶다면, 아래의 평론에서 저에게 알려주십시오.👇