目次[隠す][見せる]
私は最近、HTML、CSS、JavaScript 以外の Web 開発アプローチに興味を持っています。
ノーコードの状況が拡大するにつれ、Web アプリケーションを開発するためのより標準的なアプローチに代わる方法がいくつかあることがわかったのは驚くべきことではありません。
WordPress など、ほとんどコードを必要としない、よく知られた CMS プラットフォームのいくつかについてはよく知っているはずです。 ただし、Web アプリを構築したい場合、そのようなプラットフォームは制限があるように思えるかもしれません。
ここでは強力な Bubble.io を紹介します。 ノーコードツール これにより、これまでにない方法で Web アプリを構築できるようになります。
徹底的に調べてみましょう!
何ですか バブルアイオ?
Bubble は、ビジュアル プログラミング言語と ウェブ開発フレームワーク.
ユーザーはこれらのプログラミング ツールを使用して、独自のオンライン アプリケーションを構築し、データベースやプロセスを変更し、ページ コンポーネント (画像、テキスト、入力フォーム、マップ) を追加し、インターフェイスを設計できます。
これは、強力な製品の構築に役立つ理想的なテンプレート、プラグイン、サービスを見つけることができるマーケットプレイスです。
一般的なプログラミング フレームワークをセットアップしなくても、Bubble を使用してマーケットプレイスからソーシャル ネットワーク、CRM (顧客関係管理) まであらゆるものを作成できます。
これにより、顧客は使いやすいインターフェイスとポイント アンド クリック エディターを使用してアプリを作成し、パーソナライズできるようになります。
Facebook、SQL、分析、決済アプリなどの REST API を提供するサービスと組み合わせて使用できます。 これにより、ユーザーはアプリケーションの機能と外観を改善して、タブレットやモバイル デバイスで適切に表示されるように時間を費やすことができます。
これは、小規模から中規模、大規模まで、あらゆるビジネス規模に適しています。 Windows、Mac、Web からアクセスできます。
ビジュアルプログラミングとは何ですか?
ビジュアル プログラミングとは、文字通りその名の通りです。 コードを記述して手動でプログラミングする代わりに、コンポーネントをクリックしてページにドラッグすることでグラフィカルにプログラミングを実行します。
その短い説明に惑わされないでください。
これは、オンラインで見つけた他の型にはまらないアプリやウェブサイト構築ツールとは異なります。 ほとんどのアプリ ビルダーでは、基本的なテンプレートに依存する必要があり、機能が非常に制限されています。 特定の種類のアプリの開発のみが許可され、カスタマイズが制限されます。
Bubble では「ビジュアル プログラミング」と「ドラッグ アンド ドロップ」の概念は簡単に見えますが、非常に強力です。
そのビジュアル プログラミング環境では、テキスト、グラフィック、入力などのオブジェクトをページにドラッグできるだけでなく、それらの要素の動作を構成することもできます。
バブルって何をするの?
Bubble の主な目標は、コードを書かずに誰でも Web アプリを作成できるようにすることです。
ただし、これは覚えやすい目標の記述を提供しますが、物語のかなりの部分が省略されます。 アイデアから市場に至るまでの道のりは、単にコード行を作成するよりも複雑です。
従来の開発では、アプリの作成、拡張、メンテナンスの特定のセクションに取り組む、高度な訓練を受けた専門家のチームが必要です。 このことを考慮。
すべてのアプリには何が必要ですか?
- 誰もデータに不正にアクセスできないようにするためのセキュリティ。
- アイテム、記事、ソーシャルメディアの更新情報などの情報を保存および取得するためのデータベース。
- ユーザーベースとデータ量の無制限の開発を可能にするスケーラビリティ。
- アプリを魅力的で使いやすくする快適なユーザー インターフェイス。
- さまざまなサービスやシステムとの統合。
バブルはプログラマーの代わりとなるものをはるかに超えています。 これらのサービスはすべて、視覚的に魅力的で高度に自動化された方法で提供されるため、単純ではないにしても、XNUMX 人ですべてを処理できることが考えられます。
これまでのノーコード プラットフォームでは、さまざまな方法でコーディングを置き換えようとしてきました。 そのコンセプトは、アプリが市場に投入されるまでにできる限り多くの障壁を取り除くことであり、レスポンシブ デザインやアニメーションからホスティング、バージョン展開、セキュリティ、データベース操作まであらゆるものを扱います。
API コネクタを使用して Bubble を他のサービスに接続する
その API コネクタは、おそらく市場で最も重要なプラグインです。 名前が示すように、これにより、他のアプリやサービスに接続して、アクションやデータを共有できるようになります。
これがどのように機能するかという技術的な詳細を詳しく調べるのではなく、API が何を実現できるかについての次の例を検討してください。
- へのアクセスの取得 機械学習 画像認識や翻訳などの手法。
- 地球上のどこからでも最新の気象情報を入手できます。
- Bubble でイベントがトリガーされると、CRM でリードを確立したり、Google カレンダーで予定を確立したりするなど、システム間で情報が交換されます。
- 世界中のどこにいても航空券やホテルの宿泊を予約できます。
- Google マップで会社の電話番号、場所、写真、ロゴ、レビューを取得します。
プラグインを使用してネイティブ機能を強化する
技術的には、JavaScript コード モジュール、CSS、HTML を機能ノードに組み合わせます。 JS.JSON で記述されたアプリケーションは、独自の言語の基盤として機能します。
アプリを構築するためにこれらの用語を完全に理解する必要はありませんが、これらの用語は XNUMX つの重要な事実を示しています。それは、アプリが既知の認知された Web 標準に準拠しているため、開発者がネイティブ機能を大幅に強化できるということです。
これはすでにプラグイン サイトで確認されており、基本機能に対する何百もの無料および有料の拡張機能が利用可能です。 また、基本的な機能が不十分な点に達した場合、オーダーメイドのソリューションを提供してくれる JavaScript の専門家がたくさんいることも意味します。
どのような種類のアプリを開発できますか?
さまざまなアプリケーションを作成できます。その一部を以下に示します。
- コミュニティを備えた専門市場向けのアプリ。
- さまざまな分野の求人サイト用のアプリ。
- 病院の人材派遣のためのソフトウェア。
- 実店舗向けの POS ソフトウェア。
- ホワイトラベルの歯科医院用ソフトウェア。
- 個人のビジネス在庫および顧客サービス ソフトウェア。
- 仲介業者および顧客向けの不動産集約アプリケーション。
- 市場のイベントやコース (さらにはボート) 用のアプリ。
- 専門的な証明書には内部テスト アプリケーションが必要です。
- 初期対応者向けのアプリケーション。
- 社内向けの従業員管理ソフトウェア。
正直に言うと、このプラットフォームはすべてを実行できるように設計されているわけではありません。 複雑なビジュアルとモーションを備えたゲーム アプリをデザインしている場合、これは理想的な選択ではない可能性があります。 さらに、ネイティブ アプリ (アプリ ストア用) を作成している場合は、それを別のサードパーティ サービスと統合する必要があります。
主な特徴
Bubble には機能が詰め込まれています。 ここですべてを説明することはできませんが、最も重要なものを説明していきます。
1。 プラグイン
インターネット上の多数のツールの機能を、 ウェブアプリケーション。 たとえば、ユーザーが Facebook アカウントを使用してログインできるようにしたい場合は、Facebook プラグインを使用してこれを行うことができます。
2.開発する
これにより、デスクトップおよびモバイル Web ブラウザー用の動的なマルチユーザー アプリを構築できるほか、Instagram や Airbnb に似たサイトを構築するために必要なすべてのツールを構築できます。
3。 デザイン
モバイル対応のレイアウトと動的なコンテンツを作成して、他の人に見せたくなるような製品の仕上げを行うことができます。
4。 ホスティング
サーバーの維持、インフラストラクチャ、運用について何度も心配する必要はありません。
安全な方法で展開とホスティングを処理します。 ユーザー数、トラフィック量、データストレージはすべて無制限です。
Bubble を使用したアプリの構築 (チュートリアル)
それでは実際に行動に移し、Bubble でニュース アプリを構築する方法を検討してみましょう。
1.はじめに
開始するには、最初に Bubble に無料アカウントを登録する.
まず、Bubble のビジュアル デザイン ツールを使用してプラットフォームの形状を整えます。 ユーザーインターフェース。 含めるべき重要なページの一部を以下に示します。
- アップロード ページ – 出版社が記事を開発して配布する Web サイト。
- ホーム ページ – 最近公開されたストーリーのリストが表示されます。
- ナラティブページ – それぞれのユニークなストーリーが見つかるページです。
- 出版社ページ - 特定の出版社の物語のリストを表示するページ。
2. データベースの設定
製品の表示をレイアウトしたら、アプリケーションの原動力となるデータ フィールドの構築に集中できます。 これらのフィールドを使用して、製品の基礎となるワークフローをリンクします。
この例では、ニュース記事ごとに XNUMX つの異なるデータ タイプを確立します。 XNUMX つのデータ タイプにはストーリーの基本的な事実 (タイトル、注目の画像、発行者など) が含まれ、もう XNUMX つのデータ タイプには物語全体などのより大きなコンテンツ ファイルが含まれます。
これらを離散データ型として定義することにより、必要なときに必要な情報のみをロードできるため、バブル エディターが生成する必要があるマテリアルの量が制限されます。
次のデータ型とフィールドが作成されます。
データ・タイプ: ユーザー
フィールド:
- 名前
- 以下の発行元は発行元のリストです。 重要な注意事項: 個別のデータ型に基づいてフィールドをリストとして作成すると、追加のフィールドを作成することなく、すべての重要なデータ フィールドを簡単に組み込むことができます。
データ・タイプ: ストーリー
フィールド:
- 役職
- 注目の画像
- 著者
- カテゴリー
- Publisher
- ストーリーの内容
データ・タイプ: ストーリーの内容
フィールド:
- ストーリーの内容
データ・タイプ: Publisher
フィールド:
- 名前
- 及び
- フォロワー
3. ワークフローの構築
アプリケーションの設計とデータベースを整理したので、次はすべてをまとめて機能させる作業を開始します。
ワークフローは、Bubble でこれを実現するための主な方法です。
各ワークフローは、イベントが発生したとき (例: ユーザーがボタンをクリックしたとき) に発生し、それに応じて一連の「アクション」 (例: 「ユーザーをサインアップする」、「データベースに変更を加える」など) を実行します。 。
4. ニュース記事の作成
私たちが提供する最初の機能は、出版社がニュース記事を作成してサイトに投稿できるようにするツールです。
アップロード ページでは、データベースにデータを入力する際に適用される多くの入力項目を組み込むことから始めます。 これらのフィールドの例としては、テキスト入力、画像アップローダー、ドロップダウン選択などがあります。
また、動的オプションのリストを表示するには、パブリッシャーのドロップダウン メニューをカスタマイズする必要があります。 新しい記事はそれぞれ発行者の総記事リストに追加されるため、データベースから既存の発行者を選択する必要があります。
このドロップダウン メニューを設定するときに、パブリッシャーとなるオプションのタイプを選択します。
その後、データ ソースがデータベースをスキャンし、現在のすべての出版物のリストを返します。 最後に、ソースのキャプションを変更して、発行者の名前を含めます。
作家がページ上の各エントリに必要な情報を入力したら、公開ボタンをクリックして新しい物語を生成します。
次に、データベース内に、データ型をナラティブに設定して新しいものを作成します。
次に、データベースに必要なフィールドを入力し始める必要があります。 各オンページ入力コンポーネントをそれぞれのデータベース列に接続します。
まず、ストーリー コンテンツ タイプを作成します。これは最終的にストーリー自体にリンクされます。
次に、この手順に別の段階を追加して、何か別のもの (今回は物語自体) を生成します。
私たちが開発した最初の物語素材をこの物語と統合することで、このデータをプラットフォーム全体に簡単に統合することができます。
この手順が発動するたびに、新たな物語が生み出されることになる。
5. フィードに動的コンテンツを表示する
サイト運営者がモバイル アプリへのマテリアルのアップロードを開始したら、各記事を動的リストとして表示するロジックをホームページ上で作成し始める必要があります。 これは、繰り返しグループ要素を使用することで実現できます。
繰り返しグループはデータベースと連携して、動的マテリアルのリストを表示および更新します。
繰り返しグループを適用するときは、まず要素をデータベース内のデータ型にリンクする必要があります。
この場合、そのような素材を物語として分類します。 また、データベース内のすべてのテーブルのリストとしてデータ ソースを提供する必要があります。
また、この繰り返しグループを各ストーリーの開始日ごとに整理し、リストを時系列の逆順に表示します。 これで、各グリッド内に表示されるダイナミック マテリアルの整理を開始できます。
上の行に表示したい適切なデータを入力するだけで、この強力な要素によって残りの列に現在のデータベースのデータが入力されます。
6. ページ間でのデータの送信
繰り返しグループの各行内にイベントを構築することもできます。 プラットフォームのナビゲーション機能を開発する場合、この機能は便利です。
私たちのニュース アプリのホームページには、発行者、注目の画像、記事のタイトルを含む各記事のプレビューが表示されるだけです。
ただし、ユーザーがクリックしてストーリー ページに移動するまで、記事のコンテンツ全体は表示されません。 このマテリアルを表示するために、ワークフロー エディターを使用してページ間でデータを送信します。
まず、ストーリーの画像がクリックされたときにユーザーをストーリー ページに送るプロセスを作成します。
このプロセスの開発中に、ナビゲーション イベントを使用してユーザーを別のページに転送します。
ドロップダウン メニューから、物語ページとなる宛先ページ タイプを選択します。 次に、バブル編集者がどのユニークな物語を表示するかを理解できるように、このページにさらに情報を入力する必要があります。
提供する必要がある情報は、現在の細胞の物語から得られます。
7. ストーリーページに動的コンテンツを表示する
このイベント データを簡単に取得し、ユーザーが特定のストーリー ページに送信されたときに、ストーリーから関連するマテリアルを表示できます。
この関数を作成するには、まずターゲット ページ タイプがワークフローを通じて配信するデータ プロパティと一致することを確認する必要があります。 この状況では、ストーリー ページをストーリー プロパティに関連付ける必要があります。
ページ上のコンテンツの種類を分類することで、既存のソースから適切なデータを単純に抽出して配信できます。
これで、単一のテーブルの情報を表示するフィールドに動的マテリアルを挿入できるようになります。
8. 出版社記事の表示
ニュース項目を読んだ後、ユーザーは出版社の記事カタログ全体を調べることを選択できます。 発行者データ タイプを開発した場合、発行者用に別のページを作成することは、元のホームページを作成するのと同じくらい簡単です。
このページでは、ページ タイプを発行者に設定することから始める必要があります。
次に、ホームページから繰り返しグループをコピーし、設定を編集します。
この場合、繰り返しグループのデータ ソースは、発行者が現在のページ発行者である既存の記事をすべて検索します。
9. 出版社をフォローする
MVP 用に構築する XNUMX 番目の基本機能は、プラットフォーム上でパブリッシャーをフォローする機能です。 パブリッシャーページにフォローボタンを追加します。 このアイコンをクリックすると、何かを変更する新しいプロセスが起動します。
現在のページの発行者を次の発行物のリストに追加すると、現在のユーザーが変更されます。
その後、現在のユーザーを追加して、現在のページ発行者のフォロワーのリストを更新する必要があります。
10. 追加できる追加機能
カスタム データ フィールドの構築と動的な情報の表示に慣れてきたので、製品用に創造的なエクスペリエンスを作成することができます。 以下を含めることもできます。
- ユーザーが後で読むためにコンテンツを保存できる機能を作成します。
- 各記事の下部に、推奨記事の繰り返しのコレクションを提供します。
- ユーザーがサイト上で新しいコンテンツを見つけられるようにする検索ツールを作成します。
11.結果
最終的なアプリは次のようになります。
メリット
- 多くの API およびプラグインに接続する機能。
- 使いやすいコード不要のアプリケーション。
- プログラミング経験のない人でも、この恩恵を受けることができます。
- 多用途かつ強力なデザイン ツール。
- 迅速なクエリ処理。
デメリット
- 信頼性の向上。
- データ処理速度が遅い。
- パフォーマンスが制限されます。
価格(英語)
無料プランでは、プラットフォームについて学び、アプリケーションを開発できます。
有料サブスクリプションには、以下に示すホワイトラベル、カスタム ドメイン、Bubble API へのアクセス、予約されたサーバー容量などの追加機能が含まれています。
- 個人 – 月額 25 ドル (年払い) または月額 29 ドル (毎月支払い)。
- プロフェッショナル – 月額 115 ドル (年払い) または月額 129 ドル (毎月支払い)。
- 制作 – 月額 475 ドル (年払い) または月額 529 ドル (毎月支払い)。
まとめ
Bubble は、情報のみを表示するか最小限の UI を備えた Web アプリケーションを構築するための優れた代替手段です。
使い方は非常に簡単で、Bubble が提供するチュートリアルは非常に役立ちます。 好みに基づいて Web アプリをデザインできるオンライン ビジュアル エディターです。
そして最も良い点は、プログラミングの経験や専門知識が必要ないことです。 Bubble は、コーディング方法を知っているかどうかに関係なく、すべての人に適しています。
ただし、フロントエンド言語を事前に理解しておくと、イベント処理に関して何をしているのかをすぐに理解できるため、有利になります。
それで、Bubble の能力についてどう思いますか?
ぜひコメントで教えてください!
アルベヒ
bubble.io ツールを使用して商品を販売するストアを作成できますか?