bubble.io 노코드로 현수막 관리시스템 웹앱만들기 (3번째)

소개

bubble.io 노코드로 현수막 관리시스템 웹앱만들기를 했습니다.

목적은 간단합니다. 정당현수막이 행정동별 각 2개만 설치된게 맞는지 시각화해서 관리하는 것입니다.

강남구 옥외광고물 조례에는 정당현수막 행정동별 2개만 설치하도록 제한하고 있습니다.

각 정당별 현수막의 데이터를 DB로 관리해서 지도기능을 활용해 시각적으로 구현하고자 합니다.

사실 버블을 선택한 이유는 제가 개발은 잘 모르고 경험도 없어서 버블은 시각적인 요소가 강해서 프로그램 개념 잡기, 비교적 쉽게 프론트, 백엔드의 개념을 이해할 수 있기 때문입니다.

제가 이해한 내용입니다

✅ 프론트엔드 = 디자인 탭 → 화면을 만들고, 사용자 경험(UX)을 설계하는 부분

✅ 백엔드 = 데이터 + 워크플로우 탭 → 데이터를 저장하고, 로직(기능)을 처리하는 부분

진행 방법

저번에 개발한 내용에 이어서 추가한 기능은,

ㅁ map 화면에 행정동별 현수막 갯수 넣은거

Google지도에서 위치 위치를 보여주는지도
한국 위치의 위치를 ​​보여주는지도

ㅁ map 화면에 정당 클릭했을 때 색깔 바꾸는거 자세히 설명

위치의 위치를 ​​보여주는지도
VPS 설정 페이지의 스크린 샷
Google지도에서 위치 위치를 보여주는지도

중국어 텍스트가 강조된 Google 문서 문서 페이지의 스크린 샷

위치의 위치를 ​​보여주는지도

ㅁ 한글주소 입력된거 : 이건 잘 모르겠음(버블신이 도와준거)

ㅁ api 불러오기 한거/행정동 데이터 불어온거-----------여기부터 gpt에게 본격 질문 시작

<gpt 0-3 mini, web키고, bubble.io gpts>

Adobe Adobe Adobe Adobe Adobe의 스크린 샷

결과와 배운 점

api 연동에 대해서 배웠고, 무엇보다 어마어마한 팁 : gpts bubble에 질문해서 계속 답을 찾아내고 오류를 수정하는 것입니다.

ㅁ 질문내용 : api연동이 안됩니다. 파라미터 개념 설명해주시면 좋겠습니다.

한국 TV 채널 웹 사이트의 스크린 샷

ㅁ 향후계획

1. 핸드폰으로 봤을때 배치를 좀 이쁘게 하고 싶다.

2. 지도에 당별로 클릭하면 소팅되어서 표식되도록 하겠습니다.

1

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요