bubbleチュートリアル

Bubbleチュートリアル

新しくなったbubbleチュートリアルへようこそ。このサイトでは、ノーコードツールbubbleを使ったSNSアプリの作成方法について解説しています。丁寧に解説をしていくので、初心者の方でも問題ありません。ぜひ最後まで一緒に頑張っていきましょう。

旧バージョンではレスポンシブ（≒レイアウト）の設定を後から行なっていましたが、本バージョンでは適宜設定することで今までのわかりにくさを改善しました。

旧バージョンであるver1のものと完成するアプリの仕様が異なりますので、ご注意ください。
旧バージョン（ver1）はこちら

第1章　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（よくある質問）