Google Sheets를 웹 백엔드로 사용
웹Content Management Systems은 일반적으로 사용자 친화적인 인터페이스를 사용하여 최종 사용자가 사이트 내용을 관리할 수 있도록 한다.사이트 관리자는 개발자에게 의존해서 새로운 페이지, 게시물, 라벨 등을 만들 필요가 없다.이런 부가적인 추상은 비개발자가 그들의 사이트를 쉽게 관리할 수 있게 한다.Word Press, Joomla, Drupal 등 콘텐츠 관리 시스템이 이렇게 유행하는 이유다.
일반적으로 웹 컨텐트 관리 시스템(CMS)에는 두 가지 유형이 있습니다.전통적인 방법을 사용하는 방법은 MySQL과 같은 관계 데이터베이스를 백엔드 저장소로 사용하는 것이다.최근의 추세는 데이터베이스에서 CMSHugo를 적게 사용하는 것이다.그것들은 데이터를 순수한 텍스트 파일에 저장한다.엔드 유저나 사이트 관리자에게 있어서 차이가 없다. 왜냐하면 그가 어떤 종류의 CMS를 사용하든지 간에 사용자의 우호적인 인터페이스는 그에게 보이기 때문이다.
Learn how to use Hugo to build a website in less than 7 minutes!
기존 CMS를 사용하지 않는 경우
상당히 복잡한 사이트에 대해 성숙한 내용 관리 시스템을 사용하는 것은 의미가 있다.많은 내용을 관리해야 한다.일부 플러그인은 기능을 확장할 수 있다.한 페이지의 웹 사이트나 몇 페이지의 간단한 웹 사이트에서 전통적인 CMS를 사용하는 것은 현명한 일이 아니다.
다음 사항을 고려하십시오.
Google Sheets를 백엔드의 이점으로 활용
Google sheets는 개발 경험이 없는 사람에게도 쉽게 액세스하고 사용할 수 있습니다.다음과 같은 이점이 있습니다.
Google Sheets를 데이터 소스로 사용하는 방법
이것은 상당히 간단하다.Google Sheets에서 정보를 얻을 수 있는 여러 옵션이 있습니다.Google Sheets API는 보기 및 작업에 필요한 모든 데이터를 제공합니다.
첫 번째 단계: 전체 전자 표 데이터로 JSON 응답을 받을 수 있습니다.먼저 온라인에 스프레드시트를 게시합니다.
파일 을 클릭한 다음 웹 게시 를 클릭합니다.
너는 링크를 너의 사이트에 데이터를 추가할 사람에게 공유할 수 있다
시트 id를/d에서 슬래시로 복사 (포함하지 않음)
2단계: 이 URL을 보십시오--\
https://spreadsheets.google.com/feeds/cells/SHEET_CODE/SHEET_NUMBER/public/full?alt=json구글 워크시트를 열고 워크시트 코드와 워크시트 번호를 복사합니다.예를 들어 내 침대 시트는 여기에 있다\
https://docs.google.com/spreadsheets/d/1clakCW5TxaIAEhr7qujT5x3j3Sf7uGRiL-a4zjou4-I/ 제 번호는
1clakCW5TxaIAEhr7qujT5x3j3Sf7uGRiL-a4zjou4-I입니다. 번호는 1입니다.위의 URL에 입력하면 JSON 응답이 표시됩니다.\
https://spreadsheets.google.com/feeds/cells/1clakCW5TxaIAEhr7qujT5x3j3Sf7uGRiL-a4zjou4-I/1/public/full?alt=json
Google Sheets에서 타사 도구 없이 JSON 응답을 받을 수 있습니다.
예비 단계 2: 다른 선택은 제3자 API를 사용하는 것이다. 이 API는 실제적으로 두 번째 점에서 이전의 JSON 응답에서 불필요한 정보(메타데이터)를 필터하고 간단한 JSON 응답에서 작업표의 내용을 직접 제공한다.
"""Tabletop js""은 스프레드시트에 대한 지원을 제공하는 좋은 예입니다.\"
이것이 바로 내가 이 예에서 사용할 내용이다.두 번째 점에서 JSON 응답을 사용하려면 이렇게 할 수 있습니다.장점은 추가 자바스크립트를 불러올 필요가 없다는 것이지만, 내가 보기에 추가 노력은 가치가 없다.
Google Sheets를 백엔드로 통합하는 방법
첫 번째 단계: 우선 당신이 사용할 수 있는 모든 도구를 사용하여 정적 사이트를 만듭니다.간단한 텍스트 편집기 하나면 됩니다.나는 Bootstrap을 사용하여 나의 기본적인 스타일링 요구를 만족시키기 때문에 전문적이고 익숙해 보인다.
2단계: 구글 스프레드시트 파서를 사용할 수 있도록 데스크톱 자바스크립트를 페이지에 포함합니다.
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
다음은 키가 있는
init() 함수입니다. 단순시트를true로 설정하고 리셋합니다.새 함수
showInfo 를 만들고 데이터와 데스크톱을 매개 변수로 전달합니다.이것은 매우 재미있습니다. 타블렛 (init() 이후) 은 단계 2의sheet 변수에서 지정한 작업표의 데이터를 자동으로 저장하기 때문입니다.4단계: 상세한 정보를 포함하는 줄 수를 반복하는 기본적인 카드 기반 구조를 만든다.
<div class="col-md-4">
<h4 style="text-align:center;"></h4>
<img class="img-thumbnail rounded mx-auto d-block" style="height:200px;" alt="" src=""</img>
<p style="text-align: justify; text-justify: inter-word;"></p> <p><b>Status:</b></p>
<p><b>Built Date: </b></p>
<p><b>Destroyed Date: </b></p>
<p><b>Destroyed by: </b></p>
<p><a class="btn btn-outline-info href="#">View details</a></p>
</div>
구글 표 제목 - 모두 소문자로 되어 있으니 주의하세요.이것은 데스크톱에 매우 도움이 된다.
참고: Tabletop에서는 명명된 열 머리글에 대한 간단한 설명서를 따라야 합니다.제목은 첫 번째 줄이어야 하며, 제목마다 작은 알파벳으로 시작해야 한다.
액세스 데이터는 간단합니다.예를 들어 제목 칸의 이름이'name '이면 작업표에서 모든 이름을 가져오려면 데이터 [i]에서 i를 교체해야 합니다.이름?
따라서 워크시트의 제목에 해당하는 데이터 필드는 --
<div class="col-md-4">
<h4 style="text-align:center;">'+data[i].name+'</h4>
<img class="img-thumbnail rounded mx-auto d-block" style="height:200px;" alt="'+data[i].name+'" src="'+data[i].imagesrc+'"</img>
<p style="text-align: justify; text-justify: inter-word;">' + data[i].summary + '</p>
<p><b>Status:</b> '+ data[i].status + '</p>
<p><b>Built Date: </b> '+ data[i].builtdate + '</p>
<p><b>Destroyed Date: </b> '+ data[i].destroyeddate + '</p>
<p><b>Destroyed by: </b> '+ data[i].destroyedby + '</p>
<p><a class="btn btn-outline-info" target="_blank" href="'+data[i].details_link+'">View details</a></p>
</div>
파일을 로드하고 로컬 호스트를 통해 액세스합니다.JavaScript를 로드하면 실제로 데이터를 가져오는 데 몇 초가 걸리지만 정적 컨텐트는 순식간에 로드됩니다.만약 페이지의 영웅적인 부분이 기본적으로 전체 페이지를 덮어쓰도록 확대된다면 최종 사용자는 페이지의 외관을 더욱 개선할 수 있다.그가 아래로 스크롤하려고 준비할 때, 그림과 관련 데이터가 불러왔습니다.
구글 폼의 모든 데이터를 변경하면, 당신도 이곳에서 변경 사항을 볼 수 있습니다
브라우저 개발 도구의 컨트롤러를 간단하게 사용해서 문제를 디버깅할 수도 있습니다.기본적으로 데이터 객체와 해당 컨텐트가 있는 JSON 응답이 출력됩니다.해석 오류가 발생하면 대상이 내용을 정확하게 되돌려줄 수 있습니다.
데이터 배열이 콘솔에서 출력됨
사용자는 편집 권한을 통해 신뢰할 수 있는 사람에게 워크시트를 공유할 수 있습니다. 웹 사이트는 다른 번거로운 서버/데이터베이스 자원에 의존하지 않고 시작되고 실행될 것입니다.
기록이 너무 많으면 AJAX와 같은 요청이 파행 속도로 느려져 페이지 나누기가 필요할 수 있어 문제가 발생할 수 있다.스프레드시트 자체의 응용 프로그램 스크립트 또는 페이지의 조건인 JavaScript 로직을 사용하여 이 작업을 수행할 수 있습니다.
나도 Github에서 이 프로그램을 진행했다.find the site 및 code in the links herein를 선택할 수 있습니다.
Reference
이 문제에 관하여(Google Sheets를 웹 백엔드로 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sarthakganguly/google-sheets-as-your-web-backend-4a65텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
