React Js를 통해 Google 시트에 맞춤 양식 데이터 제출

이 기사에서는 React JS를 통해 사용자 정의 양식 데이터를 수신하는 방법에 대해 논의할 것입니다. 이 작업을 수행해야 할 때 종종 우리를 위해 링크를 생성하는 코드 없는 API 및 기타 미들웨어 API를 통과해야 하지만 Google은 이미 확인했습니다. 이것은 Google 스크립트에서 스크립트를 생성하고 배포하여 작동할 수 있습니다.

이를 위한 요구 사항은 다음과 같습니다.

React Js 작업 지식

구글 시트

HTML에 대한 기본 지식

가장 먼저 할 일은 반응 앱을 만드는 것입니다.

작동하는 반응 환경을 설정하는 create-react-app 명령으로 이를 수행하는 방법을 배울 수 있습니다https://create-react-app.dev/.

그런 다음 필요하지 않은 불필요한 파일을 정리합니다.

가장 먼저 할 일은 반응 양식을 만드는 것입니다.

  import React, {useState, useRef} from 'react'


const Form = () => {
    const formRef = useRef(null)


  return (
    <div>
        <form method="post" ref={formRef} name="google-sheet">
        <div className="form-style">
            <input type=""  name="name" placeholder='Your Name *' />
        </div>  
        <div className="form-style">
            <input type="email" name="email" placeholder='Your Email *' />
        </div>
        <div className="form-style">
            <input type="number" name="phone" placeholder='Your Phone *' />
        </div>
        <div className="form-style">
            <input type="submit" name="submit" value="Login" />
        </div> 
        </form>
    </div>
  )
}

export default Form

이 작은 스니펫에서는 사용자가 이름, 이메일, 전화번호와 같은 세부정보를 입력할 수 있는 양식을 만들었습니다. 또한 useRef 후크에 의해 생성된 formRef 가변 개체로 데이터를 보내는 제출 버튼도 포함했습니다.

다음 단계는 데이터를 저장하는 데 사용할 Google 스프레드시트를 연 다음 각 양식 입력 이름을 열 머리글로 추가하는 것입니다.



그런 다음 Extensions → App Scripts로 이동한 다음 이 코드를 앱 스크립트에 복사합니다. 이 스크립트는 게시물 요청의 데이터를 수락하고 Google 시트에 저장하는 기능을 생성합니다.

var sheetName = 'Sheet1'
        var scriptProp = PropertiesService.getScriptProperties()

        function intialSetup () {
          var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
          scriptProp.setProperty('key', activeSpreadsheet.getId())
        }

        function doPost (e) {
          var lock = LockService.getScriptLock()
          lock.tryLock(10000)

          try {
            var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
            var sheet = doc.getSheetByName(sheetName)

            var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
            var nextRow = sheet.getLastRow() + 1

            var newRow = headers.map(function(header) {
              return header === 'timestamp' ? new Date() : e.parameter[header]
            })

            sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

            return ContentService
              .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
              .setMimeType(ContentService.MimeType.JSON)
          }

          catch (e) {
            return ContentService
              .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
              .setMimeType(ContentService.MimeType.JSON)
          }

          finally {
            lock.releaseLock()
          }
        }

이것은 스크립트의 환경입니다



저장한 다음 권한을 추가합니다. 다음은 스크립트를 실행한 다음 스크립트를 배포하는 것입니다. 액세스를 "Anyone"으로 변경했는지 확인하면 스프레드시트에 데이터를 게시하는 데 사용되는 링크가 생성됩니다.


이 작업이 완료되면 생성된 API 링크를 사용하여 양식의 데이터를 스프레드시트로 보내는 기능을 빌드하기 위해 반응 앱으로 돌아갑니다.

양식을 제출할 함수를 추가합니다. 이 함수는 post 메서드를 사용한 가져오기 요청입니다. 양식 데이터를 게시하고 이전 이미지/배포에서 얻은 URL을 사용합니다.

const scriptUrl = "get yours by practicing"

    const handleSubmit = (e) =>{
        e.preventDefault()

        fetch(scriptUrl, {method: 'POST', body: new FormData(formRef.current)})
        .then(res => {
            console.log("SUCCESSFULLY SUBMITTED")
        })
        .catch(err => console.log(err))
    }

"form"태그에는 제출 중에 handleSubmit 함수를 호출하는 onSubmit ={handleSubmit} 속성이 있어야 합니다.



최종 코드와 전체 코드는 styled-component를 사용한 스타일 지정과 함께 아래에 있습니다.

import React, {useState, useRef} from 'react'
import styled from 'styled-components'

const Form = () => {
    const formRef = useRef(null)
    const scriptUrl = "get yours by practicing"
    const [loading, setLoading] = useState(false)

    const handleSubmit = (e) =>{
        e.preventDefault()
        setLoading(true)

        fetch(scriptUrl, {
        method: 'POST', 
        body: new FormData(formRef.current),

    }).then(res => {
            console.log("SUCCESSFULLY SUBMITTED")
            setLoading(false)
        })
        .catch(err => console.log(err))
    }

  return (
    <FormStyle>
        <div className="container">
        <form  ref={formRef} onSubmit={handleSubmit} name="google-sheet">
        <div className="input-style">
            <label htmlFor='name'>
                Name
            </label>
            <input type="text" id="name"  name="name" placeholder='Your Name *' />
        </div>  
        <div className="input-style">
            <label htmlFor='name'>Email</label>
            <input type="email" name="email" placeholder='Your Email *' />
        </div>
        <div className="input-style">
            <label htmlFor='name'>Phone No</label>
            <input type="number" name="phone" placeholder='Your Phone *' />
        </div>
        <div className="input-style">

            <input type="submit" value={loading ? "Loading..." : "SEND MESSAGE"} />
        </div> 
        </form>
        </div>
    </FormStyle>  
  )
}

export default Form

const FormStyle = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;

    .container{
        background-color: #F9CFF2;
        margin-top: 10%;
        padding: 10rem 10rem 10rem 10rem;
        display: flex;
        justify-content: center;
        align-items: center;
        @media(max-width: 610px){
            padding: 4rem 4rem 4rem 4rem;
        }

        .input-style{
            padding-top: 0.8em;
            display: flex;
            flex-direction: column;
            gap: 0.8em;

            label{
                font-family: 'Poppins', sans-serif;
            }

            input{
                outline: none;
                border: none;
                padding: 0.8em;
                border-radius: 2em;
            }
            input[type=submit]{
                background-color: #52154E;
                color: #FFFFFFFF;
                font-weight: bold;


            }
        }

    }

`

코드에 문제가 있는 경우 아래에 댓글을 달거나 트위터 @SegunTuase에서 저를 때리십시오.