【完全無料】基礎から学べるbubbleチュートリアル｜本格的なSNSアプリを作ろう

弊社では、bubble初心者向けのチュートリアルを無料で公開しています。

アカウント作成からデータベース設計、ワークフロー設定まで、基礎から実践的な使い方を丁寧に解説。無料なうえ、もし途中でつまずいても弊社エンジニアがサポートします。まずは無料チュートリアルで、Bubbleに触れてみませんか？

bubbleチュートリアルでできるようになること

bubbleチュートリアルでは、ノーコードツールbubbleを使ってSNSアプリを作成する方法を学びます。チュートリアルは初心者にも親しみやすく、Bubbleの基礎知識からアカウント作成、アプリ開発までを丁寧に解説。

具体的には、ページレイアウトやヘッダーの作成、ログインシステムの実装、データベース設計などを学びます。また、ワークフローを使用してデータの保存や更新、条件分岐による動作制御も可能。 bubbleはドラッグ＆ドロップでUI要素を配置し、カスタマイズできるため、デザイン設計を効率的に行うことができます。

bubbleチュートリアルの魅力

第1章　bubbleについて（bubbleの基礎知識からアカウントの作成、アプリ開発まで）)

まずはノーコードツール「bubble」の概要や基礎を抑えましょう。

1. はじめに
2. ノーコード&bubbleとは
3. 学習ロードマップで「全体像」を押さえよう
4. さっそく触ってみる
5. bubbleの使い方
6. 最初のアプリケーション
7. 本章のまとめ

第2章 簡単なアプリケーションを作成する

開発に必要となる基礎知識は1章で記述しました。本章では実際にアプリケーションの作成に取り組んでみましょう！

1. アプリケーションの全体像について
2. 投稿データの定義
3. 本章のまとめ

第3章 各エレメントとレスポンシブ機能について&ヘッダーを作成する

本章からは課題アプリの作成に移ります。前の章に比べて長く時間がかかりますが、最後まで頑張ってください！

1. Elements
2. bubbleのResponsive機能&flexboxについて
3. アプリケーションのコピー方法
4. Reusable elementsの作成
5. ヘッダーの実装
6. 本章のまとめ

第4章Part1 新規登録・ログイン・認証・パスワードリセットページのページレイアウトを作成する

本章ではUser関連の手続きページについて、登録・ログイン・認証・パスワードリセット処理の実装について学びます。前章と同様に様々なシステムで必要となる動作です。引き続き取り組んでみましょう！

1. 新規ページを作成する
2. sign upページの作成
3. ログインページを作成する
4. メールアドレス認証・送信ページの作成
5. メールアドレス認証・完了ページの作成
6. パスワードリセット・送信ページの作成

第4章Part2 新規登録・ログイン・パスワードリセットページにワークフローを実装する

1. いよいよWorkflowsの実装
2. メール認証の処理
3. パスワードリセット・送信ページでパスワードリセット処理を実装
4. 本章のまとめ

第5章Part1 homeページに投稿表示欄、投稿処理機能を実装する

本章ではタイムラインの実装とCustom Statesについて学びます。Custom Statesは様々な場合に使われますので、その流れについて理解を深めましょう！

1. homeページの実装
2. ヘッダーを配置する
3. ページの枠組みを用意する
4. 画像添付を実装する
5. ユーザー情報の表示を作成する
6. タイムラインページで投稿処理を実装

第5章Part2 homeページにページング機能を実装する

1. ページングを作成する& Custom States, Custom Eventsとは
2. ワークフローをフォルダーにまとめる
3. 本章のまとめ

第6章 データベースの設計とプライバシーポリシーについて

本章ではデータベースについて学びます。内容自体は短いですが、非常に重要な内容なのでしっかり理解するまで熟読することをお勧めします！

1. bubbleのデータベース設定について理解する
2. ユーザーテーブルの設計
3. パスワードについて
4. 投稿テーブルの設計&リレーションシップデータベース
5. One more thing about Privacy Policy
6. 本章のまとめ

第7章Part1 mypageのページレイアウトを作成する

本章ではユーザー情報の更新と削除について学びます。データの編集と削除の取り扱いについて実践してください！

1. マイページを作成する
2. マイページにログアウト処理を実装
3. 編集ポップアップを作成する
4. タブを作成する

第7章Part2 mypageに投稿表示欄、タブ切り替え機能を実装する

1. Timeline作成
2. フォロー・フォロワー一覧を作成する

第8章Part1 ユーザーのフォロー、フォロー解除機能を実装する

本章では新規ユーザーフォロー・フォロー解除・ユーザー情報の編集と削除のワークフローや条件分岐について理解を深めましょう！

1. リレーションシップ（フォロー／フォロワー）テーブルの作成
2. フォローユーザーの一覧タブ／フォロワーユーザーの一覧タブにフォローしている&されているユーザーを表示してみる
3. フォロー機能を実装
4. フォロー解除機能の実装

第8章Part2 ユーザー情報を更新、削除(退会)できるようにする

1. ユーザー情報の編集処理を実装
2. マイページにユーザー情報の削除処理を実装
3. Deletion vs. Deactivation 退会か機能停止か
4. 本章のまとめ

第9章 ユーザー一覧ページの作成とユーザー検索機能を実装してみる&アプリの微調整とデバッグを行う

本の最後のページ作成し微調整を行ってアプリケーションを完成させます。

1. usersページをつくりましょう
2. homeとmypageとreusableエレメントのリンクを設定しておきましょう。
3. usersページの設定をしましょう。
4. パラメータを送らなかったらどうなる？
5. 微調整
6. 最後にすべてのページを整える
7. ボーナス：Tweet詳細のページをfrom scratch（０から)作ってみましょう：Reusableの活かし方

終章　チュートリアルのまとめ＆よくある質問

これで全ての実装が完了しました。お疲れ様です。ここまでを振り返りを行い、今後の開発に活かしていきましょう！

1. まとめ
2. FAQ（よくある質問）

関連記事