Articles

코드없이 레스토랑 리뷰 사이트를 구축하는 방법

당신은 완벽한 레스토랑이나 바를 찾기 위해 찾고 있다면,옐프,자갓,또는 조마토 같은 플랫폼은 음식 옵션의 수천을 선택할 수 있습니다.

당신이 레스토랑 리뷰 사이트의 자신의 버전을 구축에 관심이 있다면,그러나,거품은 당신이 필요로하는 유일한 플랫폼입니다.

버블과 같은 노코드 툴은 일상적인 제작자들이 소프트웨어를 어떻게 구축할 수 있는지에 혁명을 일으키고 있다. 버블의 강력한 플랫폼은 그 어느 때보 다 쉽게 코드의 한 줄을 작성하지 않고 소프트웨어를 구축 시작했다있다.

우리의 비주얼 프로그래밍 도구를 사용하면 정적 경험을 뛰어 넘는 작업 소프트웨어를 신속하게 설계하고 구축 할 수 있습니다. 제조 업체는 마켓 플레이스,디렉토리,심지어 소셜 네트워크를 구축하기 위해 거품을 사용하고 있습니다.

이 게시물은 거품을 사용하여 노 코드 레스토랑 리뷰 사이트를 구축하는 단계별 프로세스를 다룹니다. 당신은 전체 제품을 복제 찾고,또는 당신은 플랫폼의 핵심 기능 중 일부를 활용 단지 관심이 있는지 여부,이 가이드는 당신의 제품 및 실행을 얻기 위해 필요한 워크 플로우를 구축하는 방법을 공유합니다.

코드가없는 옐프 스타일을 구축하는 단계는 다음과 같습니다:

시작하기

시작하려면,당신은 당신의 무료 버블 계정을 등록해야합니다.

거품에 계정을 등록

거품에 새로운? 거품의 기초에 익숙해 우리의 충돌 과정 소개 동영상에 따라 따르십시오.

우리는 또한 가장 일반적인 거품 기능의 단계별 과정을 통해 여러분을 안내 할 것입니다 우리의 입문 수업을 완료하는 것이 좋습니다. 이것은 당신의 노 코드 레스토랑 검토 응용 프로그램을 구축 할 때 실행중인 시작을 얻을 도움이 될 것입니다.

또한 사용자 계정을 만들고 편집하는 방법을 이해하는 것이 좋습니다. 우리는 이전에 가이드를 구축하는 우리의 다른 방법에 더 자세히이 덮여했습니다.

프로젝트를 킥스타트할 때 제품 디자인을 와이어프레임하거나 데이터베이스 내에 필요한 필드를 빌드하는 것으로 시작할 수 있습니다.

이 가이드에서는 버블의 시각적 디자인 도구를 사용하여 제품의 사용자 인터페이스를 형성하는 것으로 시작합니다. 당신이 옐프 또는 조 마토의 버전을 복제하는 경우,당신이 포함 할 것이다 핵심 페이지 중 일부는 다음과 같습니다:

  • 업로드 페이지-새 레스토랑을 업로드할 수 있는 백엔드 포털
  • 홈 페이지-레스토랑 목록 및 검색 창 표시
  • 검색 결과 페이지-사용자가 위치를 검색한 후 레스토랑 및 카테고리 목록 표시
  • 개별 레스토랑 페이지-각 레스토랑에 대한 전체 정보를 보여주는 페이지
  • 검토 제출 페이지-레스토랑 목록 표시 사용자가 레스토랑 리뷰를 제출할 수있는 페이지

버블 내의 주요 기능은 페이지간에 데이터를 전송하는 기능입니다. 이를 통해 하나의 제네릭 버전의 페이지를 만든 다음 필요할 때 데이터베이스에서 관련 콘텐츠를 동적으로 표시 할 수 있습니다.

사이트의 경우 개별 레스토랑을 선보일 페이지를 한 개만 만들면 됩니다. 그런 다음 필요할 때 각 페이지에 관련 레스토랑만 표시하는 데 필요한 워크플로를 만들 수 있습니다(곧 더 자세히 다룰 것입니다).

앱 구성

제품 표시를 매핑하면 응용 프로그램에 전원을 공급하는 데 필요한 데이터 필드를 만드는 데 집중할 수 있습니다. 우리는 제품 뒤에 워크 플로우를 연결하는 이러한 데이터 유형,필드에 의존합니다.

버블의 사전 구축 된 데이터베이스를 사용하면 고유 한 필드로 다양한 데이터 유형을 쉽게 만들 수 있습니다. 옐프 같은 레스토랑 응용 프로그램을 구축 할 때,우리는 다음과 같은 데이터 유형을 만들어야합니다&필드:

데이터 유형:사용자

필드:

  • 이름
  • 사진
  • 제출 된 리뷰-리뷰 목록. 참고:별도의 데이터 유형을 기반으로 필드를 목록으로 만들면 모든 관련 데이터 필드를 완벽하게 통합할 수 있습니다. 이렇게 하면 모든 추가 데이터 필드를 다시 만들 필요가 없습니다
버블 코드 옐프 복제 튜토리얼 템플릿

데이터 유형:레스토랑

필드:

  • 이름
  • 설명
  • 도시
  • 로고
  • 웹 사이트 링크
  • 전화 번호
  • 발 카테고리-목록
  • 주소
  • 추천 사진-목록
  • 리뷰-리뷰 목록
버블 코드 옐프 클론 튜토리얼 템플릿

데이터 유형:검토

필드:

  • 내용
  • 레스토랑-레스토랑
버블 코드 없음 옐프 복제 자습서 템플릿

플랫폼에 레스토랑 추가

이제 데이터베이스를 구성 했으므로 응용 프로그램에 전원을 공급하는 워크 플로를 구축 할 수 있습니다. 우리가 만들 첫 번째 기능은 사용자가 직접 참여하는 것이 아니라 플랫폼에 새로운 레스토랑을 추가하기위한 백엔드 도구입니다.

데이터베이스에 목록을 업로드 할 수있는 전용 포털을 구축하여 디렉토리에 새로운 레스토랑을 추가하는 프로세스를 간소화 할 수 있습니다.

업로드 페이지에서 입력 필드의 조합을 사용하여 각 새 레스토랑에 필요한 데이터를 매핑할 수 있습니다. 만들기 버튼을 클릭하면,이 데이터베이스 내에서 새로운 레스토랑으로이 집단 데이터를 추가하는 워크 플로우를 트리거합니다.

버블 없음 코드 옐프 복제 튜토리얼 템플릿

워크 플로우를 구축 할 때,우리는 레스토랑에 데이터 유형을 구성,새로운 일을 만들어야합니다.

버블 없음 코드 옐프 복제 튜토리얼 템플릿

그런 다음 데이터베이스의 레스토랑 유형 아래의 데이터 필드에 페이지의 관련 요소를 일치합니다.

버블 코드 없음 옐프 복제 자습서 템플릿

동적 콘텐츠 표시

레스토랑 카탈로그를 업로드한 후에는 사용자가 액세스할 수 있는 공개 페이지에 이러한 내용을 표시해야 합니다.

버블의 반복 그룹 요소를 사용하여 데이터베이스의 동적 데이터 목록(예:기존 레스토랑)을 표시할 수 있습니다.

참고:반복 그룹은 기본적으로 세로 형식으로 구성되지만 가로로 표시되도록 요소를 다시 구성할 수도 있습니다.

반복 그룹에 콘텐츠를 추가하기 전에 요소를 데이터베이스 내의 데이터 형식에 연결해야 합니다. 이 표시 됩니다 특정 콘텐츠를 식별 하는 데 도움이 됩니다.

우리가 표시해야 할 콘텐츠의 유형은 물론 데이터베이스의 레스토랑입니다.

다음으로 버블 편집기에서 표시할 특정 레스토랑을 알 수 있도록 데이터 소스를 식별해야 합니다. 하지만 이 데이터 소스에 제약 조건을 추가하여 도시 또는 음식 카테고리별로 레스토랑을 쉽게 필터링할 수 있습니다.

버블 코드 없음 옐프 복제 자습서 템플릿

반복 그룹을 올바르게 구성한 후에는 각 셀 안에 표시하려는 동적 콘텐츠 요소를 추가해야합니다. 우리의 뮤직 비디오 내에서,이 레스토랑의 제목과 기능을 갖춘 사진이 포함됩니다.

레스토랑은 여러 개의 추천 사진을 가질 수 있으므로 이러한 사진 중 하나를 무작위로 표시하도록 동적 콘텐츠를 구성합니다.

버블 없음 코드 옐프 클론 튜토리얼 템플릿

동적 페이지에 데이터를 전송

우리의 홈 페이지는 각 레스토랑에 대한 미리보기 카드를 표시,사용자는 클릭을 통해 각 레스토랑의 전용 쇼케이스 페이지에 전체 내용과 리뷰를 볼 수 있어야합니다. 이 추가 정보는 응용 프로그램의 레스토랑 페이지에서 호스팅됩니다.

반복 그룹에서 각 개별 행 내에서 수행 된 작업을 기반으로 이벤트를 만들 수 있습니다. 이 기능은 플랫폼에서 탐색 기능을 구축 할 때 유용 할 것입니다.

홈페이지에서 특정 레스토랑 쇼케이스 페이지로 사용자를 안내하려면 레스토랑 추천 이미지를 클릭할 때 트리거되는 탐색 워크플로를 구축해야 합니다.

거품 없음 코드 옐프 복제 자습서 템플릿

그런 다음 거품 편집기가 표시 할 특정 레스토랑을 식별 할 수 있도록이 페이지에 추가 데이터를 전송해야합니다. 표시하도록 선택할 데이터는 현재 셀의 레스토랑에서 가져옵니다.

버블 없음 코드 옐프 복제 튜토리얼 템플릿

미리보기 페이지에 동적 콘텐츠를 표시

데이터가 레스토랑 페이지로 전송되면,당신은 쉽게 관련 정보를 당겨 각 레스토랑에 대한이 내용을 표시 할 수 있습니다.

먼저 대상 페이지 유형이 워크플로 내에서 보내는 데이터 속성과 일치하는지 확인해야 합니다. 이 경우 레스토랑 페이지는 레스토랑 속성으로 구성됩니다.

거품 없음 코드 옐프 클론 튜토리얼 템플릿

페이지의 콘텐츠 유형을 분류하여,거품 쉽게 당겨 기존 소스에서 관련 데이터를 보낼 수 있습니다.

이제 현재 페이지의 레스토랑에서 정보를 표시하는 필드에 동적 콘텐츠를 추가할 수 있습니다.

버블 코드 없음 옐프 클론 튜토리얼 템플릿

콘텐츠 검색

홈페이지로 한 걸음 물러나서 사용자가 도시를 기반으로 레스토랑을 검색 할 수있는 기능을 구축해야합니다. 이것은 우리가 검색 창으로 취급합니다 추가 텍스트 입력 요소를 추가하여 달성 될 수있다.

버블 코드 없음 옐프 복제 자습서 템플릿

여기에서,우리는 사용자의 검색어를 분류하는 새로운 워크 플로우를 만들 수 있습니다,다음이 검색 쿼리에 전념 별도의 페이지를 통해이 데이터를 전달(곧이 페이지에 대한 자세한).

이 워크플로에 전원을 공급하려면 입력 값이 변경되는 시기를 인식하는 이벤트 트리거를 만듭니다. 물론 요소는 텍스트 입력 필드가 될 것입니다.

버블 없음 코드 옐프 복제 튜토리얼 템플릿

우리의 검색 결과 페이지로 사용자를 보낼 때,우리는 다음 페이지가이 데이터를 검색 할 수 있도록,우리의 주소 문자열에 고유 한 검색 쿼리를 추가해야합니다.

이 워크플로의 특정 페이지로 사용자를 보내는 대신 외부 웹 사이트를 열도록 선택합니다. 이것은 우리가 페이지 사이의 주소 경로를 사용자 정의 할 수 있습니다.

사용자를 보낼 주소는 현재 웹 사이트의 홈 주소+검색 결과 페이지의 주소+텍스트 입력 필드의 동적 쿼리 값입니다.

버블 코드 없음 옐프 클론 튜토리얼 템플릿

다음으로 응용 프로그램 내에서 전용 검색 결과 페이지를 작성합니다. 이 페이지를 구축 할 때,우리는 우리가 일치하는 레스토랑의 목록을 표시하고자 할 것이다으로 레스토랑 페이지 유형을 구성해야합니다.

버블 코드 없음 옐프 클론 튜토리얼 템플릿

이 페이지를 디자인 할 때,우리는 먼저 레스토랑의 목록을 표시하는 반복 그룹 요소를 포함합니다. 첫 번째 반복 그룹과 달리 이 반복 그룹의 데이터 원본을 업데이트해야 합니다.

먼저 콘텐츠 형식을 레스토랑으로 구성하십시오. 그런 다음 데이터 원본을 업데이트하여 도시 필드에 텍스트 문자열이 포함된 음식점만 표시합니다.

버블 없음 코드 옐프 클론 튜토리얼 템플릿

이제 사용자 검색 쿼리에서 도시와 일치하는 레스토랑 만 표시됩니다.

다음 페이지에서는 레스토랑 제목을 클릭할 때마다 지도에서 마커를 업데이트하여 사용자가 해당 주소를 시각적으로 볼 수 있도록 합니다.

이 함수를 작성하려면 버블 워크플로 편집을 사용하여 레스토랑 제목을 클릭할 때 인식하는 사용자 지정 이벤트를 만듭니다.

거품 없음 코드 옐프 클론 튜토리얼 템플릿

여기에서,우리는 마커를 표시하는 작업을 선택합니다.

버블 없음 코드 옐프 복제 튜토리얼 템플릿

이제,우리는 현재 셀 레스토랑 주소로 데이터 소스를 구성,우리의 페이지 맵에 대한 마커를 표시하도록 선택합니다.

버블 없음 코드 옐프 복제 튜토리얼 템플릿

우리는 우리의 검색 결과 페이지에 추가해야합니다 마지막 주요 기능은 사용자가 봉사하는 음식의 카테고리별로 레스토랑을 통해 필터링 할 수 있도록 카테고리 드롭 다운입니다.

버블 없음 코드 옐프 복제 튜토리얼 템플릿

당신이 드롭 다운 메뉴에 대한 옵션을 구성하면,우리는 드롭 다운 선택에 응답 할 수 있도록,우리의 반복 그룹에 조건을 추가해야합니다.

이 조건의 논리는 드롭 다운 값이 비어 있지 않은 경우를 식별합니다. 이 경우 반복 그룹의 데이터 원본을 업데이트합니다.

새 데이터 원본에는 다시 한 번 레스토랑 검색이 포함됩니다. 우리는 또한 레스토랑의 음식 카테고리도 드롭 다운 메뉴 선택과 같은 값을 포함 보장,또 다른 제약 조건을 추가합니다.

버블 없음 코드 옐프 클론 튜토리얼 템플릿

이제 식품 카테고리를 선택하면,이 반복 그룹은 자동으로 가장 관련성이 높은 결과를 업데이트합니다.

이 페이지에 추가해야 할 마지막 기능은 레스토랑 이미지를 클릭 할 때 사용자를 전용 레스토랑 페이지로 안내하는 또 다른 탐색 이벤트입니다.

홈페이지 반복 그룹에서 만든 것과 동일한 탐색 워크플로를 복제합니다.

버블 코드 없음 옐프 클론 튜토리얼 템플릿

레스토랑에 리뷰 추가

사용자가 좋아하는 새로운 레스토랑을 찾으면(코드 없음 앱 덕분에)리뷰를 작성하여 커뮤니티와 경험을 공유 할 수 있습니다.

레스토랑 페이지에서 레스토랑 정보 아래에 반복 그룹을 추가합니다. 이 반복 그룹은 레스토랑 현재 리뷰의 목록을 표시하는 데 사용됩니다.

이 반복 그룹을 구성하면 데이터 유형이 리뷰로 설정되고 데이터 소스가 현재 페이지 레스토랑에서 모든 리뷰를 가져옵니다.

버블 코드 없음 옐프 복제 자습서 템플릿

여기에서 검토 추가 버튼을 클릭하면 새 워크 플로우를 만들 수 있습니다.

버블 코드 없음 옐프 복제 자습서 템플릿

이 워크 플로우는 새로운 리뷰를 만들 수있는 전용 페이지로 사용자를 리디렉션합니다. 이 페이지로 사용자를 보낼 때,우리는 또한 현재 페이지 레스토랑에서 데이터를 전달하는 것이 좋습니다.

버블 없음 코드 옐프 복제 튜토리얼 템플릿

우리의 제출 검토 페이지에서,우리는 우리가 현재 레스토랑 데이터를 끌어 할 수 있도록,또한 레스토랑으로 페이지 유형을 업데이트해야합니다.

버블 없음 코드 옐프 복제 튜토리얼 템플릿

마지막으로,우리는 다음 포스트 검토 버튼을 클릭하면 트리거 다른 워크 플로우를 만들어야합니다.

버블 코드 없음 옐프 복제 튜토리얼 템플릿

이 워크 플로우는 새로운 것을 만드는 데 사용됩니다-새로운 리뷰.

거품 없음 코드 옐프 복제 튜토리얼 템플릿

당신이 전에했던 것처럼,당신은 유효한 리뷰를 작성하는 데 필요한 데이터 필드와 페이지의 요소를 일치합니다.

새로운 리뷰가 생성되면 레스토랑 페이지의 반복 그룹에 자동으로 추가됩니다.

추가 기능

사용자 지정 데이터 필드를 만들고 동적 콘텐츠를 표시하는 프로세스에 익숙해집니다. 디렉터리에 추가 기능을 계속 추가하려는 경우 다음을 고려할 수 있습니다:

  • 사용자가 레스토랑 페이지에 사진을 제출할 수 있는 기능 추가
  • 사용자 프로필 만들기-사용자 계정 세부 정보 및 플랫폼에서 만든 리뷰 목록 표시

출시

이 앱을 제작하기 위해 개발자 또는 개발자 팀을 고용하면 수만 달러가 아니라 수천 달러가 소요됩니다. 사용자가 시작하고 성장함에 따라 유료 플랜을 사용하면 한 달에$25 만큼 적은 비용으로 사용자 정의 도메인에서 앱을 호스팅 할 수 있습니다. 일부 템플릿 및 플러그인은 더 많은 비용이 발생할 수 있지만 추가 비용없이 디렉토리의 모든 기능을 구축 할 수 있습니다.

템플릿

당신이 처음부터 레스토랑 리뷰 테마를 구축하지 않으려면,당신은 우리의 지역 사회 구성원에 의해 만들어진 템플릿 중 하나를 구입할 수 있습니다. 일부 유사한 템플릿은 다음과 같습니다:

  • 캔버스 리뷰 플랫폼 에어 데브
  • 위치 기반 리뷰 제로 코드
  • 디렉토리&제로 코드

건물 시작

버블은 레스토랑 리뷰 사이트 또는 선택한 다른 제품을 구축하는 데 도움이 될 수 있습니다! 코딩하지 않고도 놀라운 것을 만드는 것이 결코 쉬운 일은 아닙니다.

무료로 시작하려면 여기에 가입하십시오.

당신은 또한 우리의 커뮤니티 포럼에 거품 건물 다른 열정적 인 업체와 연결할 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다.