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

概要

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

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

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

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

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

方法

１．ワークフローの設定（ページへのデータ送信）

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

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

２．ワークフローの設定（イイね！機能）

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

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

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

３．ワークフローの設定（プロダクトへのコメント）

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

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

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

まとめ

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

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