【Bubble】ノーコードでShopifyクローンを作成する方法

みなさんこんにちは！クチコミネットのまとめ記事にようこそ！

今回は今人気のノーコードであるBubbleについての記事です。

※今回の記事は Bubbleの英語の記事から引用しています。

オンラインストアを作成する場合、ShopifyなどのEコマースプラットフォームを使用すると、販売者はインターネットを介して商品をすばやく構築し、販売を開始することができます。

ただ、独自のShopifyの代替サービスを作成することに関心がある場合は、普通でしたらBubbleを使用してビルドしない限り、機能豊富なアプリケーションを開発するためにはソフトウェアエンジニアのチームが必要でした。しかし、Bubbleのビジュアルプログラミングツールを使用すると、誰もが1行のコードにも触れることなく、独自の強力なソフトウェアを構築できます。世界中のバブルユーザーは、独自のノーコードのマーケットプレイス、ディレクトリ、さらにはソーシャルネットワークを構築しています。

このブログ記事を通して、Bubbleを使用してShopifyクローンを構築する背後にあるプロセスを明らかにします。Eコマースプラットフォーム全体を複製する場合でも、プラットフォームのコア機能の一部を利用する場合でも、このガイドでは、ワークフローの作成を開始する方法について説明します。

ノーコードで、Shopifyクローンを構築する手順は次のとおりです。

はじめに

始める前に、まず無料のBubbleアカウントを登録する必要があります。Bubbleのアカウントをお持ちでない方はこちらから無料で登録することができます。

また、初心者の方はバブル学習コースのビデオチュートリアルから始め、導入レッスンを完了することをお勧めします。

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

この場合、Bubbleのビジュアルデザインツールを使用して、プラットフォームのユーザーインターフェイスを形成することから始めます。Shopifyのバージョンを複製する場合、含める必要がある重要なページの一部は次のとおりです。

データベースを構成する

製品の表示を作成したら、アプリケーションに必要なデータフィールドを作成することに集中できます。これらのフィールドを使用して、製品の背後にあるワークフローを接続します。

Bubbleの事前に構築されたデータベースにより、一意のフィールドを持つさまざまなデータ型を簡単に作成できます。ShopifyをMVPとして構築する場合、次のデータ型とフィールドを作成する必要があります。

データタイプ：User

フィールド：

• 名前 – テキスト
• カート内のアイテム – 製品のリスト。注：別のデータ型に基づくリストとしてフィールドを作成すると、関連するすべてのデータフィールドをシームレスに統合できます。
• 購入した商品 – 商品一覧
• 所有ストア – ストア

データタイプ：Store

フィールド：

• 名前 – テキスト
• ロゴ -イ メージ
• 説明 – テキスト

データタイプ：Product

フィールド：

• 名前 – テキスト
• 価格 – 番号
• 画像 – 画像
• 説明 – テキスト
• オリジナルストア – ストア

データタイプ：Order

フィールド：

• 顧客 – ユーザー
• 配送先住所 – 住所
• ストア – ストア
• 購入した製品 – 製品のリスト
• 注文送信ステータス – はい/いいえ (デフォルトはNO)

ワークフローを構築する

アプリケーションの設計とデータベースの両方を構造化したので、今度はすべてをつなぎ合わせてアプリを機能させましょう。

Bubbleでは、これを行う主な方法はワークフローを使用することです。各ワークフローは、イベント（ユーザーがボタンをクリックするなど）が発生したときに発生し、それに応じて一連の「アクション」を実行します（たとえば、「ユーザーのサインアップ」、「データベースの変更」など）。

新しいストアを作成する

構築する必要がある最初の機能は、ユーザーが独自の新しいストアを作成するためのオンボーディングエクスペリエンスです。

まず、ストアの作成ページに入力要素の組み合わせを追加します。これらの要素には、標準のテキスト入力、画像アップローダー、ボタンが含まれます。

次に、バブルエディタを使用して最初のワークフローを作成します。このワークフローは、ストアの作成ボタンをクリックするとトリガーされます。このワークフローを構築するとき、新しいものを作成することを選択します。

作成したいのは新しいストアです。

データベース内にストアを作成するときは、ページ上の入力要素を対応するデータフィールドと一致させる必要があります。

ストアを作成したら、このアイテムをユーザーが所有するストアのデータフィールドに追加する必要があります。これにより、現在のユーザーがストア管理者として認識されます。

これを実現するために、ワークフロー内に別のイベントを作成します。今回のみ、モノ(thing)に変更を加えます。

ナビゲーションイベントをワークフローに追加することにより、ユーザーを製品ページに誘導します。

ユーザーをこのページに送信するとき、作成した新しいストアのデータもパスさせます。

ストアに商品を追加する

新しいストアのデータをcreate productページに送信するために、ページタイプもストアになるように構成します。

次に、製品の作成に使用される入力要素の配列の追加を開始できます。

もう一度、「製品の作成」ボタンをクリックすると、新しいワークフローが作成されます。

このワークフローは、新しいストアを作成するために使用したものと同じ構造に従いますが、今回は新しい製品を作成します。

このワークフローでは、新製品を現在のページストアにリンクします。

新しい製品が追加された後、ワークフローに追加のステップを含める必要があります

ページ上の入力要素の値をリセットします。これにより、ストアの所有者はページを離れることなく複数の製品を追加できます。

ストアオーナーがすべての商品をストアに追加し終えたら、新しいストアを表示できるワークフローを作成します。

このワークフローは、「自分のストアを表示」がクリックされるとトリガーされます。

このワークフローを構築するときは、ナビゲーションイベントを使用してユーザーをストアページに誘導し、現在のストアページからのデータを送信します。

ストアページに動的コンテンツを表示する

ストアの所有者が製品のカタログを作成したら、ユーザーがアクセスできるパブリックストアにこれを表示するときが来ました。

ストアページを作成するときは、もう一度、データ型をストアとして構成することから始めます。

これで、ストアページに表示される動的コンテンツの構造化を開始できます。

ストアページでは、作成された製品のリストも表示する必要があります。これは、Bubbleの繰り返しグループ要素を使用して実現できます。

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

この繰り返しグループのデータ型は、製品のリストとして構成する必要があります。

次に、この要素のデータソースを選択して、表示する特定の製品を認識できるようにする必要があります。データソースは、元のストアが現在のページストアと等しいデータベース内のすべての製品を検索します。

繰り返しグループを構成したら、各行内に表示される動的コンテンツを追加できます。

表示する関連コンテンツを含む最初の列をマッピングするだけで、この強力な要素が既存のデータに基づいて残りの列に入力されます。

繰り返しグループには各製品の概要が表示されますが、個別の製品が選択されたときにすべての詳細を表示する専用の製品ページを作成する必要があります。

ユーザーを製品ページに誘導するために、製品の表示ボタンがクリックされたときにワークフロートリガーを作成します。

ここでも、ナビゲーションイベントを使用してユーザーを誘導しますが、今回は現在のセル製品からデータを送信します。

ユーザーのカートにアイテムを追加する

前のページのプロセスに従って、最初にページタイプを設定する必要があります。今回のみ、製品として設定されます。

ページに動的コンテンツ要素を表示した後、[カートに追加]ボタンをクリックすると、新しいワークフローが作成されます。

このワークフロー内で、モノに変更を加える必要があります。　（make changes to thing）

変更したいのは、現在のユーザーが現在のページの製品をカート内のアイテムのリストに追加することです。

ユーザーがカートに商品を追加し終えたら、チェックアウトページに移動する別のワークフローを作成する必要があります。

ユーザーは同じストアでホストされている製品を購入しているため、製品ストアのデータも送信します。

特定のストアのデータを送信するので、チェックアウトページのタイプをストアに設定する必要もあります。

次に、現在のユーザーがカートに追加するデータフィールド内のすべての製品のリストを表示する繰り返しグループを追加できます。

このリストの下に、カート内の商品の合計金額をまとめて表示します。バブルは、既存のデータフィールドに基づいてこれを自動的に計算します。

支払い処理

チェックアウトエクスペリエンスを構築した後、新しい注文の支払いを処理する機能を作成する必要があります。

バブルを使用すると、複数のプラグインの機能を利用して簡単に支払いを受け入れることができます。

この記事では、Stripe.jsプラグインを使用して、Stripeを介したクレジットカード支払いを処理します。

ユーザーに直感的な支払いエクスペリエンスを提供するために、ページにポップアップ要素を追加することから始めます。ポップアップを使用すると、ユーザーを現在のページから移動させることなく、新しいコンテンツを表示できます。

このポップアップを作成するときに、ユーザーが支払いの詳細を追加できる支払いフォームを作成します。

また、支払いフォームの横にStripeトークン要素を含める必要があります。この要素はエンドユーザーには表示されませんが、Stripeの新しいトランザクションを強化するには不可欠です。

購入ボタンをクリックすると、Stripe支払いをトリガーしてこのチェックアウトプロセスを完了する新しいワークフローが作成されます。

このワークフローでは、「カードをStripetoken Aに変換する(Convert card info into Stripetoken A)」イベントを選択することから始めます。このイベント内で、ポップアップ入力フィールドをStripes支払い構造に一致させる必要があります。

カードがストライプトークンに変換されたら、ユーザーの銀行口座からこのトークンを自動的に処理する追加のワークフローを作成する必要があります。

‘ Stripe.js-charge-create ‘イベントを使用して、Stripeトークンと、支払われる最終的な金額（通貨を含む）を確認します。

支払いが処理されたら、データベース内に新しい注文を作成し、現在のページの詳細を保存する必要があります。

このワークフローにステップを追加することで、新しいもの、つまり新しい注文を作成することを選択します。

このイベントでは、お客様が誰であるか、配送先住所、購入した製品のリスト、および製品を購入した店舗を登録します。

このイベントの後、別のワークフローステップを作成する必要があります。今回は、モノに変更を加えます。（make changes to thing）

変更したいのは、購入した製品の現在のユーザーリストに、新しい注文の製品を追加することです。

これらの商品を購入済みリストに追加したら、ユーザーのカートから商品を削除する必要があります。

支払いを処理するワークフローが完了したら、ページに戻って支払いポップアップを表示するイベントを作成する必要があります。

注文の確認ボタンをクリックすると、新しいワークフローがトリガーされます。

このワークフローでは、要素の表示を選択します。

もちろん、表示したい要素はポップアップです。

注文を追跡するためのダッシュボードを作成する

顧客が注文したら、これらの注文のステータスを追跡して更新するために、店主向けのダッシュボードを構築する必要があります。

ダッシュボードページに繰り返しグループ要素を追加することから始めます。

この要素のデータ型は注文として構成する必要があり、データソースは、購入したストア=現在のユーザーが所有するストアであるすべての注文を検索します。

さらに、送信済みステータスに’no’のラベルが付けられた注文のみを表示する制約をこの繰り返しグループに追加します。デフォルトでは、変更されるまで、すべての新しい注文にこのステータスが含まれます。

注文の詳細をすべて表示し、そのステータスを更新するために、注文の表示ボタンがクリックされたときにストアの所有者を個々の注文ページに送信するワークフローを作成します。

このワークフローでは、ナビゲーションイベントを使用して、現在のセルの順序からのデータを送信します。

注文のステータスを更新する

注文ページでは、最初にページタイプを注文に設定する必要があります。

次に、繰り返しグループを追加して、現在のページ順序内のすべてのアイテムを表示します。

追加する最後の機能は、注文のステータスを更新するワークフローです。

注文が収集されて送信されると、ストアの所有者は[ 完了としてマーク]ボタンをクリックして、新しいワークフローをトリガーできます。

次に、このワークフローで変更を加える必要があります。現在のページの注文送信ステータスを「はい」に更新します。

追加機能

カスタムデータフィールドの作成と動的コンテンツの表示に慣れたので、Shopifyアプリ内で構築するエクスペリエンスを使ってクリエイティブな機能を追加することができます。

例

• 請求書を自動的に作成する
• ユーザーが製品に対してレビューを残せるようにする
• ストア設定ページを作成する

など

プライバシーとセキュリティ

これでアプリの基本がわかったので、データを安全に保つためのプライバシールールと条件を設定することを忘れないでください。まず、[ データ ]タブの[ プライバシー]セクションにある店主と買い物客の役割から始めます。APIチェッカーを使用して、意図せずにデータを公開していないかどうかを確認することもできます。

ローンチ

開発者や開発チームを雇ってこのアプリケーションを構築すると、数万ドルではなくても数千ドルの費用がかかります。Bubbleの有料プランでは、月額わずか25ドルから、独自のカスタムドメインでプラットフォームをホストできます。一部のテンプレートとプラグインはより高額になる場合がありますが、追加の費用なしでShopifyクローンのすべての機能を構築できます。

テンプレート

Shopifyクローンを最初から作成したくない場合は、コミュニティメンバーが作成したテンプレートの1つを購入できます。同様のテンプレートには次のものがあります。

• Ez Marketplace by Ez Code
• Canvas Ecommerce Platform by AirDev

まとめ

Bubbleは、Shopifyクローンやその他の選択した製品の構築に役立ちます！ノーコードであらゆるものを構築できると言っても過言ではありません。Bubbbleのアカウントをお持ちでない方は、まずは無料でアカウントを作成して試してみることをオススメします。