日本発ノーコードアプリ開発ツール『Click』

【初心者向け】Product Huntのクローン作成1|ノーコード開発ナレッジ【Bubble】

概要

Bubble公式ホームページでは「How to Buidシリーズ」と称して、有名アプリのクローンを作成する方法が公開されています。

本記事では米・シリコンバレー発のプロダクト投稿・評価サイトである「Product hunt」のクローンを作成します。

全て日本語で解説しますので、初心者の方も安心して下さい。

方法

1.エレメントの設置

まずは画面デザインから作成します。必要なページは以下の通りです。

  • Upload page – ユーザーが製品を投稿するためのページ
  • Home page – 投稿されたプロダクトを一覧表示するページ
  • Product page – 個々のプロダクトの詳細を表示するページ

STEP.1
エディタ画面の左上、ページ名の表示をクリックします。

STEP.2
"Add a new page..."をクリックします。

STEP.3
ページ名称を入力し、"CREATE"をクリックします。

STEP.4
STEP1~STEP3の手順で上記4つのページを作成します。

STEP.5
"Upload page"に以下の画像の通りエレメントを設置します。フォントや色などの細かいデザインは違ってても大丈夫です。

*赤字のテキストは説明なので、必要ありません。

STEP.6
"Home page"は以下の通りです。

*赤字のテキストは説明なので、必要ありません。

STEP.7
"Product page"は以下の通りです。

*赤字のテキストは説明なので、必要ありません。

 

エレメントは見たままに設置すれば大丈夫です。ボタンをクリックした時の動作や、各エレメントの動的データはこれから設定しますので安心して下さい。

2.データベースの設定

Bubbleにはデータ型(テキスト、画像、数字、etc)があらかじめ組み込まれているため、固有のデータ型を持つさまざまなデータ構造を簡単に設計できます。データベースを作成する際、アプリケーションの速度を向上させるため、大きな項目を別のデータタイプに分割すると良いでしょう。

例えば各プロダクトについて、2つのデータタイプを作成することにします。一方のデータタイプ(本記事では「プロダクト」)には、製品の基本的な情報(タイトル、見出し、リンク、etc)を含め、もう一方のデータ型には製品の詳細な説明や画像など、より大きなコンテンツファイルを含めます。

これらを別々のデータタイプとして作成することで、必要なときに必要な情報だけを読み込むことができ、Bubble エディタが読み込む必要のあるデータ量を減らすことができます。

Product HuntのMVPを構築するため、次のデータタイプとデータフィールドを作成します。

STEP.1
データタイプ「プロダクト」を作成します。

Data type: プロダクト

Fields:

  • タイトル
  • 見出し
  • 公開日(テキスト)
  • ウェブサイトリンク
  • イイね ー データタイプ「User」のリスト型
  • サムネイル
  • 追加情報 ー プロダクト詳細

 

STEP.2
データタイプ「プロダクト詳細」を作成します。

Data type: プロダクト詳細

Fields:

  • 詳細
  • プロダクト画像
  • 被コメント - データタイプ「コメント」のリスト型

STEP.3
データタイプ「公開日」を作成します。

Data type: 公開日

Fields:

  • 日付(テキスト)
  • 公開プロダクト ー データタイプ「プロダクト」のリスト型

STEP.4
データタイプ「コメント」を作成します。

Data type: コメント

Fields:

  • 文章
  • 被コメントプロダクト ー プロダクト

STEP.5
データタイプ「ユーザー」にデータフィールドを追加します。

Data type: User(デフォルトで存在します。)

Fields:

  • 見出し
  • 名前
  • 写真
  • 開発プロダクト ー データタイプ「プロダクト」のリスト型
  • ウェブサイトリンク
  • フォロワー ー データタイプ「ユーザー」のリスト型
  • フォロー ー データタイプ「ユーザー」のリスト型

小まとめ

以上で最低限の画面デザインとデータベースの設定が完了しました。

次の記事ではワークフローを設定し、実際の動きをつくっていきます。