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

概要

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

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

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

方法

１．エレメントの設置

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

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

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

２．データベースの設定

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

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

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

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

小まとめ

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

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