Articles

コードなしでレストランレビューサイトを構築する方法

あなたは完璧なレストランやバーを見つ

あなたがレストランのレビューサイトの独自のバージョンを構築することに興味があった場合は、しかし、バブルは、あなたが必要とする唯一のプラッ

バブルのようなノーコードツールは、日常のメーカーがソフトウェアを構築する方法に革命をもたらしています。 Bubbleの強力なプラットフォームは、単一のコード行を記述することなく、ソフトウェアの構築を開始することをこれまで以上に簡単にしました。

私たちのビジュアルプログラミングツールは、静的な経験を超えた作業ソフトウェアを迅速に設計し、構築することを可能にします。 メーカーは、市場、ディレクトリ、さらにはソーシャルネットワークを構築するためにバブルを使用しています。

この記事では、バブルを使用してノーコードレストランレビューサイトを構築する段階的なプロセスについて説明します。 このガイドでは、製品全体を複製する場合でも、プラットフォームのコア機能の一部を利用する場合でも、製品を起動して実行するために必要なワークフ

コードなしでYelpスタイルを構築する手順は次のとおりです。

はじめに

始めるには、無料のバブルアカウントを登録する必要があります。

Bubbleにアカウントを登録する

Bubbleに新しいアカウントを登録しますか? バブルの基礎に慣れるために私たちのクラッシュコース入門ビデオに沿って従ってください。

また、最も一般的なバブル機能のステップバイステップのプロセスをご案内します私たちの入門レッスンを完了することをお勧めします。 これは、あなたのノーコードレストランレビューアプリを構築するときに実行中のスタートを得るのに役立ちます。

ユーザーアカウントの作成と編集の方法も理解することをお勧めします。 以前は、他のHow To Buildガイドでこれを詳しく説明しました。

プロジェクトを開始するときは、製品設計をワイヤフレーム化するか、データベース内に必要なフィールドを構築することから始めることを選択できます。

このガイドでは、Bubbleのビジュアルデザインツールを使用して、製品のユーザーインターフェイスを形作ることから始めます。 YelpまたはZomatoのバージョンを複製する場合、含める必要があるコアページのいくつかは次のとおりです:

  • アップロードページ-新しいレストランをアップロードできるバックエンドポータル
  • ホームページ-レストランのリストと検索バーの表示
  • 検索結果ページ-ユーザーが場所を検索した後のレストランとカテゴリのリストの表示
  • 個々のレストランページ-各レストランの完全な情報を紹介するページ
  • レビュー提出ページ-レストランの完全な情報を紹介するページ
  • レビュー提出ページ-レストランの完全な情報を紹介するページ-レストランの完全な情報を紹介するページ-レストランの完全な情報を紹介するページ-レストランの完全な情報を紹介するページ-レストランの完全な情報を紹介するページ-レストランの完全な情報を紹介するページ-レストランの完全な情報を紹介するページ-レストランの完全な情報を紹介するページ-レストランの完全な情報を紹介するページ-レストランの完全な情報を紹介するページユーザーがレストランのレビューを提出できるページ

bubbleの主な機能は、ページ間でデータを送信する機能です。 これにより、ページの1つの汎用バージョンを作成し、必要に応じてデータベースから関連するコンテンツを動的に表示できます。

あなたのサイトの場合、あなたはあなたの個々のレストランを紹介するために一つのページを作成する必要があります。 次に、必要なときに各ページに関連するレストランのみを表示するために必要なワークフローを作成できます(これについてはすぐに詳しく説明します)。

アプリの設定

製品の表示をマップしたら、アプリケーションに電力を供給するために必要なデータフィールドの作成に集中できます。 これらのデータ型、フィールドに依存して、製品の背後にあるワークフローを接続します。

Bubbleの事前構築されたデータベースにより、一意のフィールドを持つ異なるデータ型を簡単に作成できます。 MVPとしてYelpのようなレストランアプリを構築するときは、次のデータ型&フィールドを作成する必要があります。

データ型:User

Fields:

  • 名前
  • 写真
  • 投稿されたレビュー-レビューのリスト。 注:別のデータ型に基づいてフィールドをリストとして作成すると、関連するすべてのデータフィールドをシームレスに統合できます。 これにより、追加のすべてのデータフィールドを再作成する必要がなくなります
バブルなしコードyelpのクローンチュートリアルテンプレ

データ型:Restaurant

フィールド:

  • 名前
  • 説明
  • 都市
  • ロゴ
  • ウェブサイトリンク
  • 電話番号
  • 足のカテゴリ-リスト
  • 住所
  • 注目の写真-リスト
  • レビ-レビュー一覧

データ型:レビュー

フィールド:

  • コンテンツ
  • レストラン-レストラン
Bubble no code yelp clone tutorial template

プラットフォームへのレストランの追加

データベースの設定が完了したので、アプリケーションを強化するワークフローの構築を開始できます。 私たちが作成する最初の機能は、ユーザーが直接関与するものではなく、プラットフォームに新しいレストランを追加するためのバックエンドツールです。

データベースにリストをアップロードする専用ポータルを構築することにより、新しいレストランをディレクトリに追加するプロセスを合理化できます。

アップロードページでは、入力フィールドの組み合わせを使用して、新しいレストランごとに必要なデータをマップできます。 [作成]ボタンをクリックすると、この集合データをデータベース内の新しいレストランとして追加するワークフローがトリガーされます。

Bubble no code yelp clone tutorial template

ワークフローを構築するときは、新しいものを作成し、データ型をレストランに設定する必要があります。

Bubble no code yelp clone tutorial template

ページ上の関連する要素を、データベースのrestaurantタイプの下のデータフィールドに一致させます。

Bubble no code yelp clone tutorial template

動的コンテンツの表示

レストランのカタログをアップロードしたら、ユーザーがアクセスできる公開ページにこれらの表示を開始します。

Bubbleのrepeating group要素を使用すると、既存のレストランなど、データベースからの動的データのリストを表示できます。

注:繰り返しグループはデフォルトで垂直形式として構成されていますが、要素を水平方向に表示するように再構成することもできます。

繰り返しグループにコンテンツを追加する前に、要素をデータベース内のデータ型にリンクする必要があります。 これは、表示される特定のコンテンツを識別するのに役立ちます。

私たちが表示する必要がありますコンテンツの種類は、もちろん、あなたのデータベース内のレストランです。

次に、バブルエディタが表示する特定のレストランを知っているように、データソースを識別する必要があります。 MVPの場合、現在のすべてのレストランのリストのみが表示されますが、このデータソースに制約を簡単に追加して、レストランを都市または食品カテゴ

Bubble no code yelp clone tutorial template

繰り返しグループを適切に設定したら、各セル内に表示する動的コンテンツ要素の追加を開始する必要があります。 私たちのMVPの中で、これはレストランのタイトルと特集された写真が含まれます。

レストランは複数の注目写真を持つことができるので、これらの写真のいずれかをランダムに表示するように動的コンテンツを設定します。

Bubble no code yelp clone tutorial template

動的ページにデータを送信

ホームページには各レストランのプレビューカードのみが表示されているため、ユーザーは各レストランの専用のショーケースページにクリックスルーする必要があります。 この追加情報は、アプリケーションのレストランページでホストされます。

私たちの繰り返しグループから、個々の行内で取られたアクションに基づいてイベントを作成することができます。 この機能は、プラットフォーム全体でナビゲーション機能を構築するときに便利になります。

ホームページから特定のレストランのショーケースページにユーザーを誘導するには、レストランの注目画像がクリックされたときにトリガーされるナビゲーショ

Bubble no code yelp clone tutorial template

バブルエディタが表示する特定のレストランを識別できるように、このページに追加のデータを送信する必要があります。 表示するデータは、現在のセルのレストランから取得されます。

バブルno code yelpクローンチューチュアルテンプレート

プレビューページに動的コンテンツを表示

データがレストランページに送信されると、関連する情報を簡単にプルして、各レストランのこのコンテンツを表示することができます。

まず、送信先のページタイプがワークフロー内で送信するデータプロパティと一致することを確認する必要があります。 この場合、restaurantページはrestaurantプロパティに構成されます。

Bubble no code yelp clone tutorial template

ページ上のコンテンツの種類を分類することにより、Bubbleは既存のソースから関連するデータを簡単にプルして送信できます。

現在のページのレストランからの情報を表示するフィールドへの動的コンテンツの追加を開始できるようになりました。

Bubble no code yelp clone tutorial template

コンテンツの検索

ホームページに戻って、ユーザーが都市に基づいてレストランを検索できる機能を構築する必要があります。 これは、検索バーとして扱う追加のテキスト入力要素を追加することによって実現できます。

Bubble no code yelp clone tutorial template

ここから、ユーザーの検索語を分類する新しいワークフローを作成し、このデータをこの検索クエリ専用の別のページに渡します(このページの詳細

このワークフローに電力を供給するために、入力値が変更されたことを認識するイベントトリガーを作成します。 もちろん、要素はテキスト入力フィールドになります。

Bubble no code yelp clone tutorial template

ユーザーを検索結果ページに送信するときは、URL文字列に一意の検索クエリを追加して、次のページでこのデータを取得できるようにする必要

このワークフローでは、ユーザーを特定のページに送信する代わりに、外部のwebサイトを開くことを選択します。 これにより、ページ間のURLパスをカスタマイズすることができます。

ユーザーを送信するURLは、現在のウェブサイトのホームURL+検索結果ページのURL+テキスト入力フィールドからの動的クエリ値になります。

Bubble no code yelp clone tutorial template

次に、アプリケーション内で専用の検索結果ページの構築を終了します。 このページを構築するときは、一致するレストランのリストを表示したいので、ページタイプをレストランに設定する必要があります。

Bubble no code yelp clone tutorial template

このページをデザインするとき、最初にレストランのリストを表示するための繰り返しグループ要素を含めます。 最初の繰り返しグループとは異なり、URL文字列の検索クエリと一致するように、この繰り返しグループのデータソースを更新する必要があります。

まず、コンテンツタイプをレストランに設定します。 次に、データソースを更新して、都市フィールドにURL文字列のテキストを含むレストランのみを表示します。

Bubble no code yelp clone tutorial template

ユーザーの検索クエリから都市に一致するレストランのみが表示されるようになりました。

次に、このページでは、レストランのタイトルがクリックされるたびにマップ上のマーカーを更新し、ユーザーがその住所を視覚的に見ることができます。

この関数を構築するには、Bubble workflow editを使用して、レストランのタイトルがクリックされたときに認識するカスタムイベントを作成します。

Bubble no code yelp clone tutorial template

ここから、マーカーを表示するアクションを選択します。

ここで、ページ上のマップのマーカーを表示するように選択し、そのデータソースを現在のセルのアドレスとして設定します。

Bubble no code yelp clone tutorial template

検索結果ページに追加する必要がある最後の重要な機能は、ユーザーが提供する食品のカテゴリによってレストランをフィルタリング

Bubble no code yelp clone tutorial template

ドロップダウンメニューのオプションを設定したら、繰り返しグループに条件を追加して、ドロップダウンの選択に応答できるようにする必要があります。

この条件のロジックは、ドロップダウン値が空でない場合を識別します。 これが発生すると、繰り返しグループのデータソースが更新されます。

新しいデータソースには、レストランの検索が再び含まれ、都市のURL文字列に同じ条件が追加されます。 また、別の制約を追加して、レストランの食品カテゴリにもドロップダウンメニューの選択と同じ値が含まれていることを確認します。

Bubble no code yelp clone tutorial template

食品カテゴリを選択すると、この繰り返しグループが自動的に最も関連性の高い結果で更新されます。

このページに追加する必要がある最後の機能は、レストランの画像がクリックされたときにユーザーを専用のレストランページに誘導する別のナビゲーショ

ホームページから作成したのと同じナビゲーションワークフローを複製します。

Bubble no code yelp clone tutorial template

レストランにレビューを追加する

ユーザーが新しいお気に入りのレストランを見つけたら(コードなしアプリのおかげで)、レビューを投稿し、コミュ

レストランページでは、レストランの情報の下に追加の繰り返しグループを追加します。 この繰り返しグループは、レストランの現在のレビューのリストを表示するために使用されます。

この繰り返しグループを設定すると、データ型はレビューに設定され、データソースは現在のページレストランからすべてのレビューを取得します。

Bubble no code yelp clone tutorial template

ここから、レビューを追加ボタンをクリックすると、新しいワークフローが作成されます。

Bubble no code yelp clone tutorial template

このワークフローは、ユーザーを新しいレビューを作成できる専用ページにリダイレクトします。 このページにユーザーを送信するとき、我々はまた、現在のページのレストランからのデータを渡したいと思うでしょう。

Bubble no code yelp clone tutorial template

レビューを送信ページでは、ページタイプをレストランに更新し、現在のレストランデータを取得できるようにする必要があります。

Bubble no code yelp clone tutorial template

最後に、レビュー投稿ボタンをクリックするとトリガーされる別のワークフローを作成する必要があります。

Bubble no code yelp clone tutorial template

このワークフローは、新しいthing-新しいレビューを作成するために使用されます。

Bubble no code yelp clone tutorial template

前に行ったように、有効なレビューを作成するために必要なデータフィールドとページ上の要素を一致させます。

新しいレビューが作成されると、レストランページの繰り返しグループに自動的に追加されます。

その他の機能

MVPのコア機能を構築した後、カスタムデータフィールドの作成と動的コンテンツの表示のプロセスに慣れるでしょう。 ディレクトリに追加機能を引き続き追加したい場合は、次のことを検討してください:

  • ユーザーがレストランページに写真を提出する機能を追加する
  • ユーザープロファイルの作成-ユーザーアカウントの詳細とプラットフォーム全体で作成されたレビューの あなたが起動し、ユーザーが成長するにつれて、私たちの有料プランでは、月額わずか$25のために独自のカスタムドメインでアプリをホストすることがで いくつかのテンプレートやプラグインは、より多くの費用がかかるかもしれませんが、追加のコストなしでディレクトリのすべての機能を構築

    テンプレート

    レストランのレビューテーマをゼロから構築したくない場合は、コミュニティメンバーが作成したテンプレートのいずれかを購入できます。 いくつかの同様のテンプレートが含まれます:

    • Airdevによるキャンバスレビュープラットフォーム
    • Zeroqodeによるロケーションベースのレビュー
    • ディレクトリ&Zeroqodeによるリスト

    建物を開始

    バブルは、あなたが選択したレストランのレビューサイトや他の製品を構築するのに役立ちます! コード化せずに信じられないほどのものを構築することはかつてないほど簡単です。

    無料で始めるには、ここにサインアップしてください。

    あなたはまた、私たちのコミュニティフォーラムでバブルで構築する他の情熱的なメーカーと接続することができます。

コメントを残す

メールアドレスが公開されることはありません。