Bubbleチュートリアル
![](https://bolt-dev.net/wp-content/uploads/2024/07/banner-top-1.png)
![](https://bolt-dev.net/wp-content/uploads/2024/07/banner.png)
新しくなったbubbleチュートリアルへようこそ。このサイトでは、ノーコードツールbubbleを使ったSNSアプリの作成方法について解説しています。丁寧に解説をしていくので、初心者の方でも問題ありません。ぜひ最後まで一緒に頑張っていきましょう。
旧バージョンではレスポンシブ(≒レイアウト)の設定を後から行なっていましたが、本バージョンでは適宜設定することで今までのわかりにくさを改善しました。
旧バージョンであるver1のものと完成するアプリの仕様が異なりますので、ご注意ください。
旧バージョン(ver1)はこちら
第1章 bubbleについて(bubbleの基礎知識からアカウントの作成、アプリ開発まで))
このコースを進めるにあたって必要な基礎知識と、その流れを記しました。 これからの長い道のりの心強い武器になるはずです!ぜひ実際の開発を始める前に一読してください!
第2章 簡単なアプリケーションを作成する
開発に必要となる基礎知識は1章で記述しました。本章では実際にアプロケーションの作成に取り組んでみましょう!
第3章 各エレメントとレスポンシブ機能について&ヘッダーを作成する
本章からは課題のアプリを実際を作成し始めます。前の章に比べて長く時間がかかりますが、最後まで頑張ってください!
第4章Part1 新規登録・ログイン・認証・パスワードリセットページのページレイアウトを作成する
本章ではUser関連の手続きページについて学びます。登録・ログイン・認証・パスワードリセット処理の実装について学びます。前章と同様に様々なシステムで必要となる動作です。引き続き取り組んでみましょう!
第4章Part2 新規登録・ログイン・パスワードリセットページにワークフローを実装する
第5章Part1 homeページに投稿表示欄、投稿処理機能を実装する
本章ではタイムラインの実装とCustom Statesについて学びます。Custom Statesは様々な場合に使われますので、その流れについて理解を深めましょう!
第5章Part2 homeページにページング機能を実装する
第6章 データベースの設計とプライバシーポリシーについて
本章ではデータベースについて学びます。内容自体は短いですが、非常に重要な内容なのでしっかり理解するまで熟読することをお勧めします!
- bubbleのデータベース設定について理解する
- ユーザーテーブルの設計
- パスワードについて
- 投稿テーブルの設計&リレーションシップデータベース
- One more thing about Privacy Policy
- 本章のまとめ
第7章Part1 mypageのページレイアウトを作成する
本章ではユーザー情報の更新と削除について学びます。データの編集と削除の取り扱いについて実践してください!
第7章Part2 mypageに投稿表示欄、タブ切り替え機能を実装する
第8章Part1 ユーザーのフォロー、フォロー解除機能を実装する
本章では新規ユーザーフォロー・フォロー解除・ユーザー情報の編集と削除のワークフローや条件分岐について理解を深めましょう!
- リレーションシップ(フォロー/フォロワー)テーブルの作成
- フォローユーザーの一覧タブ/フォロワーユーザーの一覧タブにフォローしている&されているユーザーを表示してみる
- フォロー機能を実装
- フォロー解除機能の実装
第8章Part2 ユーザー情報を更新、削除(退会)できるようにする
第9章 ユーザー一覧ページの作成とユーザー検索機能を実装してみる&アプリの微調整とデバッグを行う
本の最後のページ作成し微調整を行ってアプリケーションを完成させます。
- usersページをつくりましょう
- homeとmypageとreusableエレメントのリンクを設定しておきましょう。
- usersページの設定をしましょう。
- パラメータを送らなかったらどうなる?
- 微調整
- 最後にすべてのページを整える
- ボーナス:Tweet詳細のページをfrom scratch(0から)作ってみましょう:Reusableの活かし方
終章 チュートリアルのまとめ&よくある質問
これで全ての実装が完了しました。お疲れ様です。ここまでを振り返りを行い、今後の開発に活かしていきましょう!
お役立ち資料