HTML 페이지에서 구글 폼으로 데이터를 전송하는 무코드 응용 프로그램 구축
5362 단어 visualdevelopmentlowcodenocode
Parabola is a drag-and-drop productivity tool that runs in your browser. We have a library of customizable, prebuilt components designed for ecommerce operations and marketing teams to pull in data, combine and transform it in bulk, and automatically take action.
나는 그것을 시각적이고 드래그 앤 드롭식 서버 없는 환경으로 간주한다.Serverless는 프로그램 업무 코드를 소형, 자체 포함 함수에 넣을 수 있도록 합니다.한 함수는 다른 함수 등을 호출할 수 있다.그리고 이 기능들은 플랫폼에서 실행됩니다. (서버, 자원, 유지보수를 걱정할 필요가 없습니다. 모든 것은 플랫폼이 책임집니다.)
포물선에 하나의 흐름이 있는데 그 안에 각종 미리 구축된 구성 요소를 배치하고 실행 흐름을 정의한다.하나의 구성 요소에서 출력된 데이터는 다음 구성 요소의 입력으로 전달됩니다.다음은 포물선 흐름의 예입니다.
포물선류모든 구성 요소는 나로 하여금 특정한 일을 할 수 있는 작은 서버 기능이 생각나게 한다.추상적인 단계 (또는 이벤트 2) 를 올릴 수 있습니다.응용 프로그램 (흐름) 은 시각화와 드래그 방법으로 구축된 것입니다. 코드를 작성할 필요가 없습니다.
현재 포물선은 무서버 위의 무코드 추상적인 생각으로 포물선 사람들이 하고 싶은 것이 아닐 수도 있다.그들의 설명에 따르면, 그것은 주로 운영과 마케팅 인원이 절차를 자동화하는 도구이다.좋죠.
그러나 나는 간단한 무서버 상황에 대해 포물선은 무코드 무서버 백엔드로 사용할 수 있다고 생각한다.나는 이런 예나 강좌를 찾을 때마다 포물선으로 그것을 재건하려고 시도한다.나는 내가 얼마나 빨리, 얼마나 쉽게 지을 수 있는지 보고 싶다.
액체 오류: 내부
나는 이런 강좌를 하나 발견했다.나는 코드 도구가 없는 상황에서 그것을 구축해 보라고 생각한다.이 박문에서 나는 너희들에게 내가 어떻게 그것을 구축했는지 보여줄 것이다.
첫 번째 단계는 간단한 HTML 양식을 만드는 것입니다.나는 두 가지 방법이 있다.나는 Webflow - 코드가 없는 사이트 생성기를 사용했고 HTML 페이지도 만들었다.
Webflow는 코드 없이 양식을 만들 수 있습니다.사실, 나는 웹 플로우가 제공한 템플릿을 바탕으로 이 프로젝트를 만들었다.페이지는 다음과 같습니다.
Webflow에서 만든 양식HTML을 사용하여 직접 만든 페이지는 다음과 같습니다(나중에 HTML 코드를 볼 수 있습니다).
HTML로 만든 양식두 버전 모두 상당히 간단해서 형식이나 스타일이 없다.
이제 무코드 포물선 흐름을 봅시다.이 흐름은 웹 훅에서 Google Sheets로 수신하고 보내는 두 가지 구성 요소로만 구성됩니다.
포물선류Receive from webhook 구성 요소는 웹hook에서 포물선 흐름을 호출할 수 있습니다.이것은 어셈블리의 모양입니다.
Webhook 구성 요소아날로그 데이터 부분에서 본 것은 웹 훅이 원하는 예시 데이터 형식입니다.흐름(Webhook)은 이메일과 name 두 개의 매개 변수가 필요합니다.
데이터를 받으면 다음 구성 요소는 Google Sheets 문서에 데이터를 저장합니다.
Google Sheets로 내보내기응용 프로그램을 테스트하기 전에 흐름 설정으로 이동하여 Webhook URL을 가져와야 합니다.
포물선 Webhook URLURL이 생기면 Webflow 폼과 기본 폼에 설정해야 합니다.
Webflow에서 양식 작업 설정이것이 바로 일반 HTML 페이지의 외관입니다. (Webhook URL은 폼 작업에 설정되어 있습니다.)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML Form</title>
</head>
<body>
<form action="https://parabola.io/api/hook/81f6144664d6472892d0cd129b1a11a9" method="GET">
<div>
<label for="name-label">Name</label>
<input type="text" name="name-label" id="name">
</div>
<div>
<label for="email-label">Email</label>
<input type="email" name="email-label" id="email">
</div>
<div>
<button>Yes, send!</button>
</div>
</form>
</body>
</html>
구글 폼이 예시와 블로그 글의 목표는 코드로 구축된 응용 프로그램을 바탕으로 무코드 응용 프로그램을 구축하는 방법을 배우고 보여주는 것이다.여기에는 양식의 데이터를 코드를 작성하지 않고 Google Sheets 문서에 저장할 수 있는 포물선 흐름의 주요 부분이 있습니다.나는 확실히 일반적인 HTML 페이지를 표시했지만, 단지 웹 플로우의 대체일 뿐이다.
만약 Airtable를 사용한다면, 테이블 데이터를 바탕으로 폼을 생성할 수 있으며, 포물선은 데이터를 자동으로 흐름으로 전송할 수 있습니다.이 블로그 게시물 보기:.또한 Typeform을 사용하여 유사한 예제를 구축했습니다.
양식을 제출할 때 결과는 다음과 같습니다.
{"data":{"success":true}}
Reference
이 문제에 관하여(HTML 페이지에서 구글 폼으로 데이터를 전송하는 무코드 응용 프로그램 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/maxkatz/building-a-no-code-app-to-send-data-from-an-html-page-to-google-sheets-30po텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
