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

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

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

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


 

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

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

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

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

 

はじめに

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

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

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

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

  • ストアの作成:新しいストアを作成するためのページ
  • 商品の作成:ストア内で商品を作成するために使用されます
  • ストアページ:各ストアをホストするために使用され、ストア製品のリスト
  • 製品ページ:個々の製品の詳細を表示するページ
  • チェックアウト:注文の確認と支払いの処理に使用されます
  • ダッシュボード:注文を管理するための管理ポータル
  • 注文ページ:個々の注文の完全な詳細を表示するために使用されます

 

Shopifyのノーコードクローンユーザーインターフェイスデザイン

 

メニューへ ↑

データベースを構成する

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

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

データタイプ:User

フィールド:

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

ユーザーデータタイプとフィールドを含むコードなしのShopifyクローンチュートリアルのバブル

データタイプ:Store

フィールド:

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

ストアデータタイプとフィールドを含むコードなしのShopifyクローンチュートリアルのバブル

 

データタイプ:Product

フィールド:

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

製品データタイプとフィールドを含むコードなしのShopifyクローンチュートリアルをバブル

 

データタイプ:Order

フィールド:

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

バブルのないコードのShopifyクローンチュートリアル

 

メニューへ ↑

ワークフローを構築する

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

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

 

 

メニューへ ↑

新しいストアを作成する

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

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

コードなしのShopifyクローンストア作成ユーザーインターフェイス

 

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

Bubbleの非コードエディターを使用して新しいものを作成する

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

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

コードなしのShopifyクローンアプリで新しいストアを作成する

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

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

Bubbleの非コードエディターを使用してモノに変更を加える

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

Bubbleのノーコードエディターを使用してページナビゲーションイベントを作成する

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

Bubbleの非コードエディターでページ間でデータを送信する

 

メニューへ ↑

ストアに商品を追加する

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

ストアに製品を追加するためのShopifyのコードなしクローンユーザーインターフェイス

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

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

新しいコードなしワークフローをトリガーして新しいShopifyストア製品を作成する

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

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

新しいShopifyストア製品の作成

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

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

Bubbleのコードなし入力要素のリセット

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

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

Shopifyストアページにアクセスするためのコードなしワークフローのトリガー

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

Bubbleの非コードエディターでShopifyストアページにユーザーを送信する

 

メニューへ ↑

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

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

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

Shopifyのノーコードクローンストアページの設定

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

コードのないShopifyストアの動的ページデータの表示

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

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

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

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

コードのないShopifyストアでの製品リストの表示

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

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

Shopifyストア製品内の動的コンテンツの表示

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

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

コードなしワークフローをトリガーしてShopifyクローン製品を表示する

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

Bubbleのワークフローエディターを使用して製品ナビゲーションイベントを作成する

メニューへ ↑

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

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

Shopify製品ページに動的コンテンツを表示する

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

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

Bubbleのエディターを使用してコードなしのデータベースに変更を加える

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

ユーザーのカートにアイテムを追加するBubble Shopifyクローンアプリ

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

新しいワークフローを作成するバブルコードなしツール

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

Shopifyクローンアプリのチェックアウトへのユーザーの送信

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

コードなしのShopifyチェックアウトのページタイプの構成

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

バブルのコードなし繰り返しグループを使用してShopify製品のリストを表示する

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

Shopifyクローンアプリのチェックアウトの合計金額

メニューへ ↑

支払い処理

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

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

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

注:このプラグインをインストールした後、最初にプラグイン設定内でAPIキーを構成する必要があります。

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

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

バブルShopifyクローンアプリ支払いフォーム

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

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

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

BubbleのShopifyクローンアプリで支払いを処理する

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

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

Bubbleのコードなしツールセットを使用したStripe支払いの請求

 

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

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

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

Shopifyクローンアプリでの商品注文の作成

 

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

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

コードのないShopify製品をユーザーの購入履歴に追加する

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

ユーザーからのShopify製品アイテムの削除カートリストへの追加

 

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

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

コードなしのShopify注文を確認するためのバブルワークフローの作成

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

Bubbleのビジュアルエディターにコードなしの要素を表示する

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

Bubbleのビジュアルワークフローエディターを使用して支払いフォームを表示する

 

支払い処理ワークフローを構築するときに追加のガイダンスが必要な場合は、下のビデオで完全なチュートリアルを見ることができます。

 

メニューへ ↑

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

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

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

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

コードなしのShopify管理ダッシュボードの作成

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

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

Shopify注文を表示するためのバブルワークフローのトリガー

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

メニューへ ↑

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

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

Shopifyクローンアプリ注文のページタイプの構成

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

Shopify注文で購入した製品のリストを表示する

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

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

Shopifyクローンアプリの注文に完了のマークを付ける

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

Shopifyクローン注文のステータスの更新

 

追加機能

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

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

など

 

メニューへ ↑

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

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

 

メニューへ ↑

ローンチ

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

 

メニューへ ↑

テンプレート

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

 

メニューへ ↑

まとめ

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

BubbleでShopifyのようなプラットフォームを作成できますか?

はい!Bubbleを使うことで、Shopifyのようなサイトのクローンを作ることができます。追加のプラグインは不要で、基本プランで作成できます。

1 Comment
  1. いつも有益な情報をありがとうございます。 Shopifyを作れるのは夢が広がりますね。

コメントを書く

クチコミネット
Logo
検索
Generic filters

8月のトレンド🧐 : ノーコードディープフェイクSEOツールShopify仕入れ

Register New Account
Reset Password
サービスの比較
  • Total (0)
比較する
0