소개
버블에서 API 무료로 제공해주는 것 같이 플랜을 소개하면서
실제로 쓰려면 돈내라는 말에
혼내줄 방법이 없을까 고민하던 찰나
예전에 홈페이지 버튼에 자바스크립트로 웹훅을 넣어서 사용했던 기능을 떠올리며
한번 살살 비벼봤습니다.
진행 방법
사용툴 : 자바스크립트 코드를 작성해줄 OPEN AI, 버블, Make 웹훅 주소
**주의 버블 만져본지 하루도 안된 따끈한 버린이입니다.
용어의 사용이 사파스러울 수도 있습니다.
고수님들의 너른 양해 부탁드립니다.(✿◡‿◡)ㅎㅎㅎ
1️⃣ 우선 버블의 구조를 살펴봤습니다.
워크플로우가 있고
백엔드워크플로우가 따로 있는 구조
API를 쓰려면 백엔드 워크플로우에서 엔드포인트를 불러와야하는데
이 엔드포인트가 유료인 상황으로 인지
2️⃣ 버블에서 자바 스크립트를 쓰기위해서는 ToolBox 플러그인을 쓰면 되는데 요건 무료
3️⃣ 버블에서는 다이나믹 데이터라고 변수를 사용할 수 있는 것을 확인
4️⃣ 버튼 클릭을 이벤트로 삼을 수 있다는 것도 확인
필요한 내용은 다 확인했으니 바로 테스트에 돌입합니다.
5️⃣ 대충 UI 빌더에 가서 입력란과 버튼을 만들어봅 니다.
요소의 이름을 입력란은 '이름' 버튼은 '낼름'이라고 만들었습니다.*낼름 날로먹을테다
6️⃣ "워크플로우"에 가서 이벤트를 '낼름' 버튼을 누르면 시작으로 만듭니다.
*백엔드워크플로우 X
7️⃣ 그리고 추가(+버튼)를 눌러 플러그인 > Run javascript를 클릭합니다.
*없으신분들은 플러그인에가서 ToolBox 설치하세요
그러면 아래와 같이 창이 뜹니다.
8️⃣ 이제 GPT에게 가서 "버튼을 누르면 웹훅주소로 데이터가 전송되는 자바스크립트"를 만들어달라고 합니다.
let data = {
name: "John Doe", // 여기에 보낼 데이터의 Key-Value를 추가
email: "[email protected]"
};
fetch("https://hook.integromat.com/YOUR_WEBHOOK_URL", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => {
if (response.ok) {
alert("데이터 전송 성공!");
} else {
alert("데이터 전송 실패!");
}
})
.catch(error => {
alert("오류 발생: " + error.message);
});
냅다 복사해서 넣습니다.
9️⃣ 위에서부터 차례대로 다이나믹 데이터로 갈아끼웁니다.
웹훅주소는 메이크에서 만들어서 복사해옵니다.
🔟 바로 프리뷰 가서 테스트해봅니다.
잘들어옵니다.
결과와 배운 점
역시 이상한 짓이 제일 재밌습니다.
얼마나 복잡한 데이터까지 전송 가능한지는 버블을 다뤄보면서 차차 알아가봐야겠습니다.
이걸 하게 된 이유는 일단 메이크로 데이터를 빼내기만 하면 그 뒤로는 다양하게 확장이 가능하겠다는 생각이었고, 기본적인 원리만 이해하면 꼼수는 무궁무진하구나를 다시한번 깨닫게되었습니다.
버블 고수분들의 많은 의견과 아이디어 미리 감사드립니다.(찡끗)
