어떻게 자신의 다음 것을 만듭니까?js RSS 리더 응용 프로그램

최근에 RSS Feed를 웹사이트에 제공하는 사람들을 만났는데, 그들은 이에 대해 칭찬을 표시했다.Sara는 프런트엔드 웹 개발과 액세스 가능성에 대해 매우 존경하는 사람이지만 RSS Feed에 대해 아는 것이 적고 질문이 많습니다.

그것들은 도대체 무엇입니까?

그것들은 무엇에 쓰입니까?

사람들이 더 이상 사용하지 않는 줄 알았어?

만약 당신도 비슷한 문제가 있다면, 나는 당신이 직접 RSS에서 읽는 것을 건의합니다. How Do RSS Feeds Work?일반 도메인 이름 형식.앞의 몇 마디가 이 점을 진정으로 요약하였다.

Imagine being able to log into one dashboard and getting the latest news and events from all of your favorite websites, blogs, or podcasts? With RSS feeds, it’s possible!

RSS Feed는 내가 가장 좋아하는 모든 블로그를 한 곳에서 읽을 수 있다는 것을 의미한다??나는 시사통신을 구독하지 않아도 새 댓글이 언제 올라왔는지 알 수 있다??듣자니 정말 귀엽다!그때 나는 내가 자신의 사이트에 어떻게 RSS 요약을 제공하는지 분명히 알아야 한다는 것을 알았다.
내 사이트를 위해 RSS Feed를 만드는 방법을 더 잘 이해하기 위해서는 그들이 어떻게 사용하는지 더 잘 이해해야 한다.이것이 바로 내가 자신의 RSS 리더 프로그램을 만들 생각을 하게 된 것이다.일단 내가 응용 프로그램을 완성하면, 그것은 내가 RSS 원본을 개발할 때 RSS 원본을 테스트하는 방식으로도 쓸 수 있다.
나는 매우 즐겁게 놀았기 때문에, 너희들도 자신의 RSS 리더 프로그램을 만들고 싶어 하지 않도록, 나는 너희들과 나의 발견을 공유하기로 결정했다.다음 설명이 도움이 되었으면 좋겠습니다. 질문이 있으면 언제든지 트위터에 알려주세요!

어떻게 자신의 다음 것을 만듭니까?js RSS 리더 응용 프로그램

분리 및 복제 재구매 프로토콜

우선, 시작 코드 지점을 만들어야 합니다.

이동 the GitHub repository

페이지 오른쪽 상단에 있는 "가름표"버튼

을 클릭

GitHub

에서 제공하는 절차를 따릅니다.
그 다음에, 당신이 만든 포크를 컴퓨터에 복제하고 의존 항목을 설치합니다.

git clone <your fork>    # Clones the fork
yarn                     # Installs the dependencies

Firebase 인증 설정

셋째, 인증을 처리하기 때문에 Firebase 프로젝트를 만들어야 합니다.이 프로그램이 인증을 받아서 다른 사람들이 RSS에서 JSON에 대한 API 요청을 추가하지 않기를 바랍니다. (다음 단계에서 설정할 것입니다.)

로 이동하여 원하는 구글 계정으로 로그인했는지 확인하십시오.

"항목 추가"를 표시하는 카드를 클릭하세요.그것은 마땅히 첫 번째로 열거한 것이다.

항목 이름을 입력합니다.사용하겠습니다nextjs-rss-reader.

'이 프로젝트를 사용하는 구글 분석'을 닫기로 전환합니다.

프로젝트 만들기를 클릭합니다.

새 프로젝트가 준비되면 계속을 클릭합니다.

이 슬라이드에는 프로젝트 이름이 다른 단계가 표시됩니다.
Firebase를 사용하면 애플리케이션에서 이메일/암호 인증을 쉽게 설정할 수 있습니다.콘솔에서 사용자를 추가하는 것도 쉽다.사용자를 위해 실제 전자 우편 주소와 안전 비밀번호를 사용해야 합니다.이것이 바로 네가 사료를 보호하는 방식이야!

클릭console.firebase.google.com항목보기.

빌드 아래의 인증 페이지로 이동합니다.

시작을 클릭합니다.

로그인 방법 탭에 있어야 합니다.

이메일/비밀번호를 클릭합니다.

첫 번째 전환을 활성화합니다.

저장을 클릭합니다.

사용자 탭으로 전환합니다.

사용자 추가 를 클릭합니다.

보안 이메일 및 암호를 입력합니다.

사용자 추가 를 클릭합니다.

다음은 다음 단계를 보여 주는 비디오입니다.

Firebase 콘솔 RSS-to-JSON 계정 생성

다음은 API 요청을 보낼 API 키를 얻기 위해 계정을 설정합니다.나는 개인적으로 비용을 지불하는 계획이 하나 있다. 왜냐하면 나는 많은 구독원을 구독했기 때문이다. 그러나 무료 계획은 매우 좋다!본문을 작성할 때, 시간당 한 번씩 요점을 업데이트할 계획이며, 매일 10000개의 요청을 허용하고 25개의 요점을 지원한다.현재 초보자 코드는 매일 사이트를 한 번 이상 생성하지 않기 때문에 최대 매일 제시할 때마다 요청을 생성합니다.

RSS-to-JSON 계정을 RSS to JSON에 등록

API 키를 this link로부터 가져와 다음 단계를 준비합니다.

내 계정 페이지 를 생성합니다.환경 파일

갈라진 항목의 루트 디렉터리에 .env 라는 파일을 만듭니다.안에 네 개의 항목이 있다.

RSS_2_JSON_API_KEY=<your RSS to JSON api key>
NEXT_PUBLIC_FIREBASE_API_KEY=<your Firebase project's API key>
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<your Firebase project's auth domain>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<your Firebase project ID>

이전 단계의 RSS to JSON API 키를 RSS_2_JSON_API_KEY 항목과 함께 놓습니다.애플리케이션을 등록하면 Firebase에서 다른 항목을 가져올 수 있습니다.다음은 이러한 목표를 달성하기 위한 단계입니다.

클릭 항목보기.

프로젝트 설정으로 이동합니다.

페이지 하단으로 스크롤하여 "응용 프로그램"을 표시합니다

""단추를 누르면 웹 등록 프로그램입니다.

애플리케이션 닉네임으로 nextjs-rss-reader을 입력합니다.

"등록 애플리케이션"버튼을 클릭합니다.

복사하여 붙여넣기apiKey, authDomain 및 projectId 값 및 .env 파일의 마지막 세 항목.

Firebase 콘솔 응용 프로그램 시작

우리는 출발할 준비가 되었다!yarn dev를 사용하여 응용 프로그램을 시작하고 브라우저에서 로 이동합니다.로그인 페이지로 다시 지정해야 합니다. 위에서 http://localhost:3000/ 부분의 두 번째 부분에서 만든 사용자의 이메일과 비밀번호를 입력할 수 있습니다.
Set up Firebase Authentication
로그인하면 글 목록을 볼 수 있습니다.당신은'이곳을 읽기'링크를 클릭하여 응용 프로그램의 글을 읽을 수도 있고,'소스 코드 읽기'링크를 클릭하여 글의 원시 버전을 읽을 수도 있습니다!

사용자 정의 피드

프로그램은 프로젝트 루트 디렉터리 feed.txt 파일을 통해 어떤 요약을 얻을 수 있는지 알고 있습니다.파일을 열면 각각 파일의 행에 나열된 세 개의 목록이 표시됩니다.

https://www.a11yproject.com/feed/feed.xml
https://webaim.org/blog/feed/
http://www.webaxe.org/feed/

요약을 삭제하려면 줄을 삭제하면 됩니다.만약 당신이 요점을 추가하고 싶다면, 요점이 자신의 줄에 있는지 확인하세요.이렇게!즐겁게 읽으세요.