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

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

概要

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

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

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

本記事は第3部となってます。第1部はこちらをご覧ください:Product Huntのクローン作成1

第2部はこちらをご覧ください:Product Huntのクローン作成2

方法

1.ワークフローの設定(ページへのデータ送信)

“Home page”に掲載されたプロダクトをクリックし、プロダクトの詳細を確認する機能を実装します。

STEP.1
"Product page"の"Type of content"を「プロダクト」に変更します。

STEP.2
"Home page"のサムネイルをクリックした時のワークフローを設定します。

STEP.3
"Go to page ..."アクションを追加します。

STEP.4
遷移先に"Product page"を選択します。

STEP.5

STEP.6
"Product page"に設置した各エレメントは、ページに送信されたプロダクト情報から動的にデータを呼び出します。設定は以下の通りです。

これで”Product page”でプロダクトの詳細を確認できる様になりました。

2.ワークフローの設定(イイね!機能)

コミュニティのエンゲージメントを高めるのに役立つ「イイね!」機能を実装します。

データタイプ「プロダクト」のデータフィールド「イイね」(ユーザーのリスト型)にユーザーを追加することでイイね!の数をカウントします。

STEP.1
"Home page"のイイね!アイコンをクリックした時のワークフローを設定します。

STEP.2
"Make changes to thing..."アクションを追加します。

STEP.3

STEP.4
"+ Change another field"をクリックし、「イイね add Current User」を指定します。

STEP.5
イイね!の数を表示するには、以下の様なエレメントを設置します。

これでイイね!機能が実装できました。

3.ワークフローの設定(プロダクトへのコメント)

“Product page”でリピーティンググループと入力フォームを使用して、コメントの表示・送信機能を実装します。

STEP.1
"Product page"のリピーティンググループを以下の通りに設定します。

STEP.2
「送信」ボタンをクリックした時のワークフローを設定します。

STEP.3
"Create a new thing..."アクションを追加します。

STEP.4
データタイプ「コメント」を選択し、各項目を指定します。

これでコメント機能が実装できました。

コメントが送信されるとリピーティンググループは自動で更新され、表示コメントが変更されます。

まとめ

以上で投稿、日付ごとの閲覧、プロダクト詳細の表示、イイね!、コメント機能をもつMVPが完成しました。

いかがだったでしょうか?分からない点がありましたら、お気軽にお問い合わせください。