NoCodeツール「Bubble」でUber風アプリを作ってみた

スポンサーリンク
NoCodeまとめプログラミング

「Bubble」というNoCode系作成ツールをご存知でしょうか。

今回はそのBubbleを使って「Uuper」という自作アプリを作ってみた率直な感想を述べていきます。

結論から言うと「ウェブ知識の全くない人には多少ハードルが高い」です。

理由は後ほど説明します。

スポンサーリンク

NoCodeツール「Bubble」でUber風のアプリを作ってみた

Bubbleとは

The best way to build web apps without code.
Bubble introduces a new way to build a web application. It’s a no-code tool that lets you build SaaS platforms, marketplaces and CRMs without code. Bubble hosts...
  • コーディングなしでアプリやホームページ等が作成できるツール
  • 基本無料で利用できる
  • 全て英語表記

全て英語表記なのがネックですが、操作に慣れてしまえば大丈夫なはず。

参考にした人

NoCode School - ノーコードスクール -
プログラミングを書けない方でも、NoCode - ノーコード -系のツールを使って、短時間でいろんなサービスを作ることができる方法を発信していきます。

おそらくYouTubeで現在唯一NoCode系の解説動画を発信しているシンジさんという方の動画を参考にさせて頂きました。

自作アプリ「Uuper」の仕様説明

ではここから私が作った「Uuper」の仕様について説明します。

NoCode-Bubble
NoCode-Bubble
ユーザーインターフェース

サービス内容「タクシー配車アプリ」

タクシーを使う「ユーザー」側と、車を運転する「ドライバー」側に分かれます。

1.【ユーザー側】

乗車位置と目的地を入力し配車をリクエスト。目的地まで運んでもらう。

NoCode-Bubble
「すぐに依頼」をクリック。距離と金額が表示されます。
NoCode-Bubble
この時点でドライバーに配車リクエスト通知が届きます。
NoCode-Bubble
ドライバー側が「受け入れる」を選択すればマッチング完了。

2.【ドライバー側】

ユーザーからの配車リクエストを受け取り、ユーザーを目的地まで送る。

NoCode-Bubble
ユーザー側から配車リクエストが届く。「受け入れる」を押せばマッチング完了。

新規登録 / ログイン機能

ユーザー側・ドライバー側それぞれに実装。

NoCode.Bubble
「新規登録」ポップアップ画面
NoCode.Bubble
「ログイン」ポップアップ画面
NoCode.Bubble
ドライバー登録画面

マイページ機能

ユーザー側は配車履歴の表示のみ。

ドライバー側は主に、

  • アカウント情報の変更・更新
  • 乗車リクエストの管理

ができます。

NoCode-Bubble
「ドライバーアカウント情報」画面
NoCode.Bubble
「配車リクエスト管理」画面

ヘッダー・フッター

ヘッダーロゴをクリックするとトップページに移行。その他各種リンクを作ってみました。

フッターは特になにもありません。

レスポンシブ対応

レスポンシブデザインなのでスマホやタブレットでもきれいに表示されます。

NoCode.Bubble
iPhone X の画面サイズ

BubbleでNoCodeアプリを作ってみた率直な感想

ここからは実際にBubbleを使ってウェブアプリを作ってみた率直な感想を言います。

ワークフロー設定

NoCode.Bubble

「このボタンを押したらこのページに飛ぶ」くらいならまだわかるんですが、

「ユーザーが○○した時だけ○○という表示をさせる」

「○○がクリックされたら○○というエラーを表示して○○を隠す」

など条件が細かくなっていくほど頭がこんがらがってきます(笑)

なにか一つでも条件が抜けていると思い通りに動きません。

ただし、うまく動いた時はめちゃくちゃうれしい。

データベース設定

NoCode.Bubble

ここもウェブ知識がほぼない私には大変でした。

そんな私でも色々と試行錯誤しているうちに、

「あー、データベースってこういう風に使うんだー」

となんとなく流れを理解することができました。

今後プログラミングを学ぶ者にとってはかなり貴重な経験かも?

プラグインが豊富

NoCode.Bubble

「こういう機能を実装させたい」

となったときにプラグインが豊富にあるのはありがたい。機能をどんどん拡張させることができます。(有料もあり)

今回私が使ったプラグインは「Google Map Extender」というプラグインです。(有料)これは主にルート検索や現在位置情報の取得に必要なプラグインです。

ただし、これらの機能を実装させるには別途Google MapとAPI接続させる必要があるのでご注意。

まとめ

いかがでしたでしょうか。

初心者には少し手厳しいBubbleですが、使いこなすことができれば

「良質なアプリをプログラマーなしで」作ることができると思います。

今後は他のNoCodeツールも使いつつさらに知識を深めていきます。(今は完全に趣味の範囲です)

コメント