/No-Code Development Agency

Bubble.io에서 즐겨찾기 목록을 어떻게 추가하나요?

Bubble.io에서 즐겨찾기 목록을 만드는 간단한 단계를 발견하십시오. 저희의 종합 가이드를 사용하여 오늘이 바로 앱의 사용자 경험을 향상시켜보세요!

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a free No-Code consultation

Bubble.io에서 즐겨찾기 목록을 어떻게 추가하나요?

Bubble.io에서 즐겨찾기 목록을 추가하려면 다음 단계를 따르십시오:

단계 1: 즐겨찾기를 위한 새로운 데이터 유형을 생성합니다.

  • Bubble 편집기에서 "Data" 탭으로 이동합니다.
  • "Data Types" 섹션에서 "New type"을 클릭합니다.
  • 이 새로운 유형을 "Bookmark"라고 이름 지어줍니다.

단계 2: 즐겨찾기 데이터 유형을 구조화합니다.

  • "Bookmark" 데이터 유형에 필드를 추가합니다.
  • "Owner"라는 이름의 필드를 "User" 타입으로 생성합니다. 이는 즐겨찾기를 생성한 사용자를 잡아내는 내장 필드입니다.
  • 사용자가 즐겨찾기에 추가하는 프로젝트를 참조하기 위해 "Project"라는 이름의 필드를 "Project" 타입으로 추가합니다.

단계 3: 즐겨찾기 데이터 유형에 대한 개인 정보 보호 규정을 설정합니다.

  • "Data" 탭 아래의 "Privacy" 탭으로 이동합니다.
  • "Bookmark" 데이터 유형을 선택하고 개인 정보 보호 규정을 설정합니다.
  • 비공개 즐겨찾기 목록을 사용하려면 다음 설정을 사용합니다:
    • "This Bookmark’s Owner is Current User"은 다음 권한과 함께 체크해야 합니다:
      • 모든 필드 보기
      • 검색에서 찾기
      • 첨부 파일 보기

단계 4: 즐겨찾기 목록을 앱의 사용자 인터페이스에 추가합니다.

  • "Design" 탭에서 즐겨찾기 목록을 표시하려는 페이지로 이동합니다.
  • 반복 그룹 요소를 사용하여 목록을 생성합니다:
    • "Type of content"은 "Bookmark"으로 설정합니다.
    • "Data source"에 대해 "Do a search for"를 사용하고 "Owner = Current User" 조건이 있는 "Bookmarks"을 선택합니다.

단계 5: 프로젝트에 즐겨찾기 기능을 구현합니다.

  • 사용자가 자신의 즐겨찾기에 프로젝트를 추가할 수 있도록 디자인의 프로젝트 요소에 "Bookmark" 아이콘 또는 버튼을 추가합니다.
  • 이 버튼에 대한 워크플로우를 생성하여 프로젝트와 현재 사용자가 클릭할 때 새 "Bookmark" 항목을 생성합니다.

단계 6: 기능을 테스트합니다.

  • 앱 미리보기를 하고 사용자로 로그인합니다.
  • 즐겨찾기 버튼을 클릭하여 프로젝트를 즐겨찾기 목록에 추가해보십시오.
  • 즐겨찾기 목록이 로그인한 사용자에 대한 모든 즐겨찾기 프로젝트와 함께 제대로 표시되는지 확인합니다.

이 단계들을 따르면 사용자가 쉽게 즐겨찾기를 하고 자신이 좋아하는 프로젝트를 추적할 수 있는 기능적인 즐겨찾기 목록을 Bubble.io 애플리케이션에 추가했을 것입니다. 목록과 북마크 동작의 모양과 느낌을 앱의 디자인과 사용자 경험 선호도에 맞게 사용자 지정하는 것을 잊지 마십시오.

더 유용한 노코드 리소스 살펴보기

No-Code Tools Reviews

Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.

Explore

WeWeb Tutorials

Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.

Explore

No-Code Tools Comparison

Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.

Explore

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences