Bubbleで構築するための基本原則を学び、最初のアプリケーションを構築するためのステップバイステップのチュートリアルで、実践の準備をしましょう。
Contents
アプリの構築(Building your app)
視覚的な構造を確立する(Establish the visual structure)
Bubbleで構築する際の癖は人それぞれですが、一般的なアプローチとしては、まずアプリケーションのビジュアル構造を確立し、それをプログラムするワークフローを定義することから始めます。視覚的な構造とは、入力やボタンなど、ユーザーが操作する必要のあるページやコア要素のことで、ワークフローとは一連のアクションのトリガーとなるイベントのことです。例えば、ボタンのクリックはイベントです。ページ上でどのボタンや入力が必要かが既に分かっていれば、これらのイベントとそのアクションについて考えるのは簡単です。
ビジュアル構造を紙に書き出す(Draft the visual structure on paper)
通常、アプリケーションがどのようなもので、何をするものなのか、紙の上に下書きすることから始めるとよいでしょう。私たちの経験では、いくつかの重要な画面を紙に描き、それぞれに必要な要素を配置し、次にワークフローをアクションごとにドラフトすることは、時間をかける価値があると思います。これができれば、実際のアプリケーションの設計は、より速く、より自然なものになるでしょう。
基本的なデータ構造の定義(Define a basic data structure)
Bubbleで構築する次の次元は、データ構造です。アプリを実行するために、あなたとユーザーは、データの作成、読み取り、更新、削除を可能にするデータ構造に依存することになります。Instagramの基本的なバージョンを構築する場合、UsersとPostsを持つことになります。ユーザーには名前、説明、位置情報があり、投稿にはタイトル、説明、写真があります。
他に何が必要かを考える(Think about what else you need)
最後に、アプリを機能させるために、決済ソリューションやデータプロバイダーなど、外部サービスに依存する可能性が非常に高いです。これは、プラグインやアプリのAPIを通じて行われます。これらのサービスについては、最初のビジュアルとデータ構造が明確になった後で心配する必要があります。とはいえ、以下は構築中に自問自答すべきことのリストです。
・アプリに必要なページ数。たとえば、Facebookには、ホームフィードのページ、ログアウト時のホームページ、プロファイルのページ、設定のページ（少なくとも以前のバージョンのFacebookでは…）があります。
・ユーザーがどのような状況で、どのようにページ間を移動するか。
・どのようなデータを保存するか。賃貸マーケットプレイスであれば、ユーザーだけでなく、アパートメントやレビューなども保存されます。アパートには、住所や写真などがあります。
イテレーション（反復）しながら進める(Iterate as you go)
アプリケーションの構築は、繰り返し行われることに留意してください。多くのユーザーは、まず最初の要素と簡単なレイアウトでページのワイヤーフレームをデザインし、ワークフロー部分に移って基本的な動作を設定し、必要な要素の感覚がつかめてきたらデザイン部分に戻っていきます。アプリが成長し、製品を改良したり、機能を追加したりするにつれて、デザイン、ワークフロー、データ構造も修正することになります。
バブルは非常に自由度が高いので、Excelの計算式で時々ミスをするように、アプリケーションを構築していく中でミスをする可能性は非常に高いでしょう。これはプログラミングのプロセスの一部です。Bubbleには、アプリケーションのデバッグと修正を支援するツールがいくつか用意されています。
アプリの実行
構築はBubbleのパワーの一面でしかありません。最初のバージョンをビルドしたら、それを実際のユーザーと実際のデータで動かしてみましょう。アプリが本番稼働したら、つまり実際のユーザーによって使用されたら、すべてが期待どおりに動作していることを確認するためにアプリを監視することができるようになります。ここでも、Bubbleにはいくつかの監視ツールとログが用意されており、それを利用することができます。アプリが実行されているとき、私たちはそれをランモードと呼んでいます。
有料機能の利用
一部の機能は有料プランでのみ利用可能な場合があります。プランの違いはこちらで確認できます。すべての機能はエディターでアクセス可能ですが、プランによってその機能が許可されていない場合、ランモードでは動作しません。現在のサブスクリプションがその機能をカバーしていない場合、通常その機能の横に警告が表示されます。
参考英語サイト
https://manual.bubble.io/new-start-here/building-your-first-app
