ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

bosyuさんもどきをBubbleで作ってみる!(初級者向け)

f:id:korokoro-vc:20200312201710p:plain

bosyuさんもどきをBubbleで作ってみる!(初級者向け)

Bubbleでノーコードライフ楽しんでいますか??

Bubble初級者向け講座として、 第1弾は、iPhoneメッセンジャーもどきを作っています。(ちょっと停滞しており、申し訳ありません。)

blog.nocodelab.jp

今回は第2弾として、

bosyuさんもどきをBubbleで作ってみる!!

です。

bosyuと言えば、簡単にSNSで気軽に人材募集ができるサイトです!
募集したいものがあれば、手軽に募集をだせ、それをSNS発信できます。 それを見た人が気軽に応募できるサービスです。
ノーコードラボもお世話になっています!
募集内容も多岐に渡り、企業の人材募集から単純なお手伝い等まで幅広く、募集内容を見ていても結構おもしろいです。

そんな今どきな(っていう時点で古い人間ですね・・・)サービスを見様見真似でBubbleを使って作成してみましょう!!

実際のサンプルはこちらです↓

https://nocodelab-bosyu.bubbleapps.io/

前提条件

  • Bubble の無料アカウントを登録済み。ログインしておいてください。
  • Bubble の基本操作はわかっている。
  • 本ブログの「twitter のような簡単な SNS を Bubble で作ってみる(入門者向け)」を学習済み、もしくはそれ相当の知識がある。
  • 作成するアプリをBubble有料プランにする。

前提としては、第1弾iPhoneメッセンジャーとほぼ同じですが、一部機能がBubbleの有料プランではないと確認できない部分があります(OGP画像の設定)。
ただ、無料だと確認できないだけで、Bubbleの組み込みは無料・有料問わずできるので、ご安心ください。

目的

  • Bubble の操作方法を一通り覚えた人が実際にアプリを作成できるようになるための考え方や機能などを紹介する
  • PC、タブレット、スマホで使うことを想定して、レスポンシブ設計をする

iPhoneメッセンジャーはスマホ向けだったのですが、こちらはPC、タブレット、スマホを使うことを想定して作成します。

レスポンシブについてもしわからなければ、以下の記事をご覧ください。

blog.nocodelab.jp

作成方針

  • 横幅の最低値は375pxとする。最大は特になし。
  • OGP画像を作成する画面のみレスポンシブ対応なしで、横幅1200pxとする。
  • 簡単な Bubble の操作方法は省略する。
  • デザインについても簡単なところは省略。難しそうなところだけピックアップして解説する。
  • DB 設計、ワークフローについては細かく解説する。
  • セキュリティに関しては最低限。
  • bosyuさんの全ての機能ではなく、最低限の機能とする。

機能内容

bosyuさんの実際の処理とは異なるところもあるかと思いますが(仕様は実際に動かして確認しただけです・・・)、本シリーズでは、主に以下の機能を作成していきます。

  • サインアップ・ログイン
    →bosyuさんはTwitterとFacebookの二つですが、今回はTwitterログインのみです。
  • 募集作成
  • 募集のOGP画像生成
  • 募集更新・削除
  • 募集停止
  • 募集検索
  • 募集への応募
  • 応募した募集の一覧
  • メッセージ送信
  • メッセージ停止
  • 応募やメッセージを受けた場合のメール送信
  • Twitterへのシェア
  • プロフィール変更

今後の予定

今後の予定は以下のとおりです。

  1. 前準備をしよう(プラグイン&DBの準備)
  2. サインアップ・ログイン機能を作ろう
  3. ヘッダーを作ろう
  4. 募集を作成しよう
  5. 募集検索しよう
  6. 募集の詳細を見よう
  7. 募集の応募をしよう
  8. 応募した募集を検索しよう
  9. マイページを作成しよう
  10. メッセージを送信・停止しよう
  11. プロフィールを更新しよう
  12. ログイン・非ログインの制御をしよう

全12回を予定していますが、順番やボリュームが多かったり少なかったり等、変更する予定であることをご了承ください。

コンテンツ

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

コンテンツが出来たらここにリンクを貼る予定です。 残りのコンテンツはもうしばらくお待ちください。