ノーコード ラボ

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

iPhone のメッセンジャーもどきを Bubble で作ってみる(初級者向け)

f:id:toka-xel:20200131150407p:plain

Bubble の初級者向けコンテンツを作成すると言っておきながら、ひと月ほど経ってしまいましたが、本日から少しづつ作っていこうと思います。 このシリーズで作成するのは、iPhone のメッセンジャーのような Webアプリです。

先日、ツイッターで流して、なかなか良い反応をいただけました。

長丁場になると思いますが、最後までお付き合いいただければ幸いです。

前提条件

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

Bubble を初めて触るという方は入門者向けの次のコンテンツを先にみることをオススメします。

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

目的

  • Bubble の操作方法を一通り覚えた人が実際にアプリを作成できるようになるための考え方や機能などを紹介する
  • Bubble で作った Webアプリを元に iOS 及び Android のアプリを作成する

iOS 及び Android のアプリ化の話は次の記事でも書いています。待てない方はこちらを先に読んでアプリ化挑戦してみてください。

blog.nocodelab.jp

作成方針

  • 横幅の最低値は iPhone SE の 320 とし、最大値は 2倍の 640 とする。iPhone SE より小さいものは今回は考えない。
  • 簡単な Bubble の操作方法は省略する。
  • デザインについても簡単なところは省略。難しそうなところだけピックアップして解説する。
  • DB 設計、ワークフローについては細かく解説する。
  • セキュリティに関しては最低限。
  • ユーザー登録やログインに関してはザックリ説明。詳しく知りたい方はログイン処理のシリーズを見てください。

blog.nocodelab.jp

作成予定

  1. 新規アプリの作成及び、ユーザー登録、ログイン画面を作成する
  2. メッセージを送信する相手を選択する画面を作成する
  3. メッセージを表示する画面を作成する
  4. プロフィール画面を作成する
  5. 初めてのユーザーにメッセージを送信する画面を作成する
  6. OneSignal を使って Web Push を実装する(iOS を除く)
  7. Agora を使って Facetime もどきを実装する
  8. iOS / Android のアプリ化を行う

予定では全7回ですが、2回と7回が重そうなので、場合によってはもう少し増えるかもしれません。

2020/02/05 追記 やはり1回増えました。全8回予定となります。

コンテンツ

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

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