찾다
웹 프론트엔드JS 튜토리얼Hardcover&#s Book API의 재미: 빠른 참조

나는 오랫동안 Goodreads를 사용하고 있지만 내 책을 추적할 때 항상 더 나은 방법을 시도하고 싶었습니다. 그래서 최근에는 소규모 인디팀이 운영하는 경쟁사인 하드커버를 사용하기 시작했습니다. 아직 초기 단계이고 Goodreads만큼 큰 회사를 이기기는 어렵다는 것을 알고 있지만 희망적입니다!

Hardcover의 가장 큰 장점 중 하나는 Goodreads와 달리 무료로 사용할 수 있고 Hardcover에 저장된 도서의 모든 데이터를 쿼리할 수 있는 API가 있다는 것입니다. 또한 책의 상태를 업데이트하는 등 기본적으로 양장본 UI에서 직접 수행할 수 있는 모든 작업을 수행하는 데에도 사용할 수 있습니다.
독서, 목록에 책 추가 등 다양한 기능을 제공합니다.

Hardcover의 API를 사용하는 방법

지금은 API를 사용하여 내 사이트의 서평 섹션을 생성하고 있습니다. 모든 리뷰를 양장본에서 가져와서 JSON 파일에 저장하고 있습니다. 그런 다음 이 목록의 리뷰를 반복하여 페이지에 모두 렌더링합니다.

매우 짧은 리뷰를 어떻게 해야 할지 확신이 없었기 때문에 지금은 리뷰가 360자 미만인 경우 페이지에 있는 그대로 렌더링하고, 다음과 같은 경우 별도의 페이지로 링크하기로 결정했습니다. 그 이상입니다.

Fun with Hardcover

모든 리뷰를 검색할 수 있는 검색창도 추가했고, 리뷰에 스포일러가 있을 경우 텍스트를 흐리게 설정했습니다.

Fun with Hardcover

향후에는 별점은 물론 장르별로도 필터링할 수 있는 방법을 추가하고 싶습니다.

Hardcover API 시작하기

Hardcover의 API도 아직 초기 액세스 모드에 있으며 아직 적절한 문서가 없으므로 이 게시물에서는 지금까지 유용하다고 생각되는 쿼리 중 일부를 살펴보겠습니다. Hardcover의 Discord 서버는 질문에 대한 답변을 얻을 수 있는 좋은 장소이기도 합니다.

먼저 설정 페이지로 이동하여 Hardcover API 키를 받아야 합니다. 그런 다음 Hardcover의 GraphQL 콘솔에서 쿼리를 테스트할 수 있습니다.

읽은 책 모두 가져오기

기본 GraphQL 쿼리부터 시작하여 status_id를 사용하여 필터링하여 하드커버에서 "읽음"으로 표시한 모든 책의 제목 목록을 가져올 수 있습니다.

{
  me {
    user_books(where: {status_id: {_eq: 3}}) {
      rating
      book {
        title
      }
    }
  }
}

귀하의 사용자와 관련된 모든 항목을 쿼리하는 데 사용할 수 있는 정보를 제 안에 넣었습니다.

status_id 값이 작동하는 방식은 다음과 같습니다.

  • 1: '읽고 싶은' 책
  • 2: '지금 읽고 있는' 책
  • 3: '읽은' 책
  • 5: “A가 끝나지 않았습니다” 책

책의 저자 얻기

cached_contributors를 검색하면 책의 '기여자' 목록이 포함된 배열을 얻을 수 있습니다. 여기에는 기여자의 이름, ID, 이미지 등 미리 결정된 데이터 세트가 포함됩니다.

{
  me {
    user_books(where: {status_id: {_eq: 3}}) {
      rating
      book {
        title
      }
    }
  }
}

그들이 '저자'가 아닌 '기고자'인 이유는 책을 번역한 사람들의 이름도 포함될 수 있기 때문입니다. 작성자가 여러 명인 경우 해당 작성자도 모두 목록에 표시됩니다. 작가가 한 명인 일반 소설책에 대해 문의하는 경우 일반적으로 목록의 첫 번째 항목을 사용하는 것이 좋습니다.

캐시된 버전이 쿼리하는 것이 더 빠르지만, 원하는 특정 내용이 있는 경우 캐시되지 않은 기여에 대해 쿼리할 수도 있습니다.

book {
  cached_contributors
}

책의 하드커버 URL 가져오기

하드커버에 있는 책의 링크를 얻으려면 해당 슬러그를 쿼리하세요.

book {
  title
    contributions {
      author {
        name
       }
    }
 }

슬러그는 웹사이트의 도메인 이름 뒤에 오는 문자열입니다. emgoto.com/hardcover-book-api에서 "hardcover-book-api" 비트는 슬러그입니다.

따라서 슬러그를 받은 후에는 https://hardcover.app/books/를 시작 부분에 추가하여 하드커버 URL을 생성하면 됩니다.

책에 장르 태그 가져오기

하드커버의 장르 태그 시스템은 사용자가 생성합니다. 캐시된_태그에 대해 쿼리하면 태그가 가장 많이 지정된 것부터 태그가 적은 것 순으로 태그를 반환합니다.

book {
  slug
}

전체 태그 목록이 있으면 캐시된_태그['Genre']를 사용하여 장르별 태그를 얻을 수 있습니다.

많은 사람들이 특정 책을 소설로 태그했다면 해당 책이 목록에 가장 먼저 나타나는 장르가 될 것입니다. 흥미롭게도 사람들은 자신의 책에 판타지라는 태그를 붙이는 것을 좋아하기 때문에 이 장르는 소설이라는 태그보다 먼저 나타나는 경우가 많습니다. 사람들은 자신의 책에 판타지라는 태그를 붙이는 것을 너무나 좋아해서 Dune과 같은 공상과학 책에는 공상과학 태그와 판타지 태그가 모두 붙기도 합니다.

이 데이터를 사용하려면 먼저 약간의 정리 작업을 수행하는 것이 좋습니다. 예를 들어 책의 장르 태그가 판타지와 공상과학을 모두 포함하는 경우 목록에서 첫 번째로 나오는 항목만 사용하고 다른 항목은 삭제하세요. 그게 더 정확할 가능성이 높기 때문입니다.

'읽을 책' 목록에 책 추가하기

지금까지는 데이터 가져오기만 다루었지만 Hardcover의 API를 사용하여 데이터를 조작할 수도 있습니다. 물론 다른 사람의 것을 건드릴 수는 없지만 자신의 Hardcover 계정에서 할 수 있는 모든 작업은 공정한 게임입니다. .

책 ID가 있는 경우 status_id를 1:로 설정하여 '읽을 책' 목록에 추가할 수 있습니다.

book {
  cached_tags
}

도서 리뷰 받기

이것은 제가 하드커버에 작성한 모든 리뷰를 가져오는 데 사용하는 것입니다.

{
  me {
    user_books(where: {status_id: {_eq: 3}}) {
      rating
      book {
        title
      }
    }
  }
}

내 책과 리뷰는 거의 모두 Goodreads에서 가져오는데, 가져오는 과정에서 데이터가 약간 뒤죽박죽되는 경우가 가끔 있는 것 같아요. dated_add와 review_at를 기준으로 정렬하는 것이 더 정확하다는 것을 알았습니다.

review_raw 값을 사용하여 줄 바꿈과 같은 형식이 포함되지 않은 리뷰 텍스트를 가져왔습니다. 이는 불행하게도 리뷰에 여러 단락이 있는 경우 API가 다음과 같이 모든 단락을 하나의 긴 단락으로 표시한다는 의미입니다.

book {
  cached_contributors
}

JavaScript를 사용하여 다음과 같은 정규식을 수행하여 이 문제를 해결했습니다.

book {
  title
    contributions {
      author {
        name
       }
    }
 }

뒤에 공백이 없는 마침표가 있는 경우 이것이 새 단락이어야 한다고 추측하고 이중 줄바꿈 nn을 추가할 수 있습니다. 새 단락이 생성됩니다.

또 다른 단점은 스포일러 태그도 없어 수동으로 추가해야 한다는 점입니다.

review_html 값도 있는데, 이 값이 더 유용할 것 같았지만 안타깝게도 항상 null인 것 같습니다. 마찬가지로 스포일러가 포함된 리뷰의 경우 review_has_spoilers 값이 있는데 제가 Goodreads에서 수입한 책들은 모두 이 값이 false이므로 신뢰하지 못할 수도 있습니다.

제목 및/또는 저자로 책 검색

Hardcover의 도서 검색은 꽤 정확하지만 API에 이에 대한 1-1 버전이 없습니다. 검색 동작을 모방할 수 있는 방법은 많지만 가장 빠르게 시작하는 방법은 _eq:
를 사용하여 제목을 검색하는 것입니다.

book {
  slug
}

책 목록을 users_read_count로 주문했는데, 독자 수가 가장 많은 Dune이라는 책이 당신이 찾고 있는 Dune일 가능성이 높기 때문입니다.

제목 작성자로 필터링하려는 경우 필터 쿼리는 다음과 같습니다.

book {
  cached_tags
}

정확한 문자열 일치를 원하지 않는 경우 대신 _ilike 쿼리를 사용할 수 있습니다. 이 쿼리는 대소문자가 일치하지 않으므로 소문자를 사용해도 작동합니다.

mutation addBook {
  insert_user_book(object: {book_id: 123, status_id: 1}) {
    id
  }
}

_ilike와 함께 % 문자를 와일드카드로 사용할 수도 있으므로 그렇게 할 수 있습니다

{
  me {
    user_books(
      where: { _and: [ 
        {has_review: {_eq: true}},
        {status_id: {_eq: 3 }}
      ]}
      order_by: [
        { date_added: desc },
        { reviewed_at: desc }
      ]
    ) {
      reviewed_at
      date_added
      review_raw
      rating
      book {
        title
      }
    }
  }
}

“frank”라는 단어가 포함된 모든 저자와 일치합니다.

참고로, Hardcover는 Hasura를 사용하기 때문에 "Hasura에서 X를 수행하는 방법"을 검색하면 일반적으로 이러한 종류의 더 복잡한 쿼리를 수행할 수 있는 방법이 표시됩니다.

하드커버 목록에 책 가져오기

하드커버에는 표준 '읽고 싶은 항목' 및 '읽고 싶은 항목' 목록뿐 아니라 별도의 맞춤 목록 기능도 있습니다. 모든 목록과 그 안의 책을 가져오려면 다음을 수행하세요.

this is the end of one paragraph.And this is the start of the next

목록에 책 추가하기

목록에 책을 추가하려면 먼저 목록 ID와 책 ID를 가져와야 합니다. 그러면 다음과 같이 쉽습니다.

{
  me {
    user_books(where: {status_id: {_eq: 3}}) {
      rating
      book {
        title
      }
    }
  }
}

JavaScript로 API 호출하기

GraphQL 콘솔에서 나가려면 fetch()를 사용하여 API 호출을 할 수 있습니다. 아주 간단한 예로, 모든 리뷰를 가져오는 방법은 다음과 같습니다(약간 축약했습니다).

book {
  cached_contributors
}

가져오기 호출을 더 쉽게 구성하기 위해 필요한 프로그래밍 전문가 팁은 다음과 같습니다.

  • 하드커버 보러가기
  • 네트워크 탭에서 graphql을 검색하세요
  • 유용해 보이고 정보를 반환하는 항목을 찾으세요
  • 네트워크 호출을 마우스 오른쪽 버튼으로 클릭하세요. > 복사 > 가져오기로 복사

위에 붙여넣은 것과 비슷한 가져오기 호출이 복사되어 사용자 고유의 코드에서 사용할 수 있습니다.

Fun with Hardcover

속도 제한에 대한 참고 사항

GraphQL 콘솔에서 나와 스크립트로 작업을 시작한 후 동시에 너무 많은 작업을 시도하면 오류나 속도 제한 문제가 발생할 수 있습니다.

예를 들어 목록에 새 책을 추가할 때 두 권의 책을 동시에 추가하려고 하면 API에서 오류가 발생하는 것을 발견했습니다. 아마도 두 권의 책을 목록의 동일한 위치에 추가하려고 하기 때문일 것입니다.

마찬가지로 제목을 기준으로 책을 검색하기 위해 100번의 호출을 시도하면 일부 호출은 시간이 초과됩니다. 다음과 같이 분산시키고 매초마다 하나씩 수행하면 아무런 문제가 없을 것입니다.

book {
  title
    contributions {
      author {
        name
       }
    }
 }

또한 하드커버에서 책의 이미지 URL을 가져온 다음 페이지에 100권의 책 이미지를 동시에 로드하려고 시도하면 API가 속도를 제한하고 일부 이미지가 로드되지 않습니다. . 다음과 같이 이미지 태그에 loading=lazy를 넣는 것이 좋습니다.

book {
  slug
}

이렇게 하면 사용자가 이미지를 보기 위해 아래로 스크롤할 때만 이미지가 로드됩니다.

그리고 그게 다입니다! 나는 양장본이 다음에 어디로 갈지 알고 싶습니다. 그것이 잘 되기를 바라며, 마침내 우리는 Goodreads-killer를 손에 넣었습니다. 제 하드커버를 팔로우하고 싶으시다면 제가 우연히 @emma 핸들을 잡았습니다.

위 내용은 Hardcover&#s Book API의 재미: 빠른 참조의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.