Google 스프레드시트를 피드백 양식과 통합

Google 스프레드시트는 스프레드시트 형식으로 데이터를 추적할 수 있는 멋진 Google 제품입니다. 스프레드시트를 정기적으로 사용하더라도 앱의 데이터베이스로도 사용할 수 있다는 사실을 모를 수 있습니다! 이 기사에서는 어떻게 할 수 있는지 알려 드리겠습니다. 의 시작하자!

웹 사이트에 있는 피드백 양식의 예를 들어 보겠습니다. 첫 번째 단계로 적절한 이름을 지정하여 시트를 만듭니다. 첫 번째 행에서 시트의 헤더를 추가합니다. 피드백 양식의 경우 "이름, 이메일 ID 및 피드백"이 필수 항목임을 고려하십시오.



이제 시트의 URL(https://docs.google.com/spreadsheets/d/1Z5dAPskMy0iC7Tm95c00tC5p366JqiNht9NmWz-hDqQ/edit#gid=0)에서 시트 ID를 가져옵니다.

Sheet id는 d/다음 부분이고, 위 링크에서 1Z5dAPskMy0iC7Tm95c00tC5p366JqiNht9NmWz-hDqQ입니다.

다음으로 https://nocodeapi.com/dashboard/api/google_sheets으로 이동하여 Google 스프레드시트용 API를 만듭니다. 이 시트 ID를 사용하고 API에 이름을 지정하십시오.



그러면 다음과 같은 API URL이 표시됩니다.



o Google 시트에 데이터를 추가하고 이 URL에 데이터를 게시하고 tabId( subsheet의 이름)을 매개변수로 전달합니다.

기본적으로 시트의 tabId는 직접 편집하지 않는 경우 Sheet1입니다. 따라서 아래 형식을 고려하십시오.

다음은 React의 전체 코드 예제입니다.

import React, { useState } from "react";

export default function Contact() {
    const [formData, setFormData] = useState({});
    const [message, setMessage] = useState("");

    const handleInput = e => {
        const copyFormData = { ...formData };
        copyFormData[e.target.name] = e.target.value;
        setFormData(copyFormData);
    };

    const sendData = async e => {
        e.preventDefault();
        const {name, email, message} = formData
        try {
            const response = await fetch(
                "<your_google_sheet_nocodeapi_endpoiint>?tabId=Feedback",
                {
                    method: "post",
                    body: JSON.stringify([[name, email, message]]),
                    headers: {
                        "Content-Type": "application/json"
                    }
                }
            );
            const json = await response.json();
            console.log("Success:", JSON.stringify(json));
            setMessage("Success");
        } catch (error) {
            console.error("Error:", error);
            setMessage("Error");
        }
    };

    return (
        <div className="App">
            <form
                className="input-form"
                id="contact"
                name="contact"
                required
                onSubmit={sendData}
            >
                <input
                    name="name" 
                    type="text"
                    placeholder="Name"
                    required
                    onChange={handleInput}
                />
                <input
                    name="email"
                    type="email"
                    placeholder="Email"
                    required
                    onChange={handleInput}
                />
                <textarea
                    name="message"
                    placeholder="Message"
                    onChange={handleInput}
                />
                <input name="submit" type="submit" value="Send" />
                {message}
            </form>
        </div>
    );
}

이제 양식을 통해 일부 데이터를 제출하면 Google 시트에 나타납니다!

tabId 작업

API에서 tabId는 쿼리 매개변수로 전달됩니다. tabId에 따라 데이터를 다른 하위 시트로 푸시할 수 있습니다. 여기, 생성하자

피드백 양식

문의 양식 및

뉴스레터 양식,

모두 다른 하위 시트로 데이터를 보냅니다.



코드샌드박스 링크:



위 샌드박스의 데이터가 이 Google 시트에 추가됩니다.

그게 다야! 축하해요! 새로운 것을 시도하려면 Marketplace에서 나머지 API를 확인하세요! 영감을 얻으려면 더 많은 사용 사례를 읽으십시오!

nocodeapi.com에 원래 게시됨