ワークフローの概要

アプリケーションを構築する際のNoodlワークフローの異なる概念を見てみましょう。具体的には、

• ユーザーインターフェイスの構築
• ページナビゲーション & コンポーネント
• アクション
• データの操作
• クラウドデータベース
• ビジネスロジック
• クラウド関数
• コラボレーション
• モジュールとプレファブ

ユーザーインターフェイスの構築

どんなアプリも素晴らしいユーザーインターフェイスが必要です。Noodlでは、組み込みのUIコントロールを使用して、動的でリアクティブで美しいユーザーインターフェイスを簡単かつ迅速に構築できます。これらのコントロールは適切に配置され、レイアウトされます。Noodlには、高度にカスタマイズ可能なコアUIコントロールのライブラリが含まれています。必要に応じて、独自のUIコントロールでNoodlを拡張することも可能です。

UIコントロールのカスタマイズ

各UIコントロールには、細かいカスタマイズに使用できるプロパティがあります。ユーザーインターフェイスを構築するための重要な概念の短い概要は次のとおりです：

• ビジュアルステート 各UIコントロールには、Hover、Pressedなどの一連のビジュアルステートがあり、各ステートごとにコントロールプロパティを個別に設定できます。詳細はここで学びましょう。

• トランジション アニメーションエディターを使用して、各ビジュアルステート間のトランジションアニメーションを制御できます。

• バリアント UIコントロールの再利用可能なバリアントを定義し、プロパティ、ビジュアルステート、トランジションを含めます。独自のデザインシステムを構築して生産性を向上させましょう。詳細はここで学びましょう。

ページナビゲーション & コンポーネント

より完全なフロントエンドを構築し始めると、コンポーネントを扱うことになります。コンポーネントは、アプリケーション内の完全なページであり、これらはページコンポーネントと呼ばれます。または、多くの場所で再利用したいUIのより小さな部分であり、これらはビジュアルコンポーネントと呼ばれます。ページはトップナビゲーションバーにあり、ビジュアルコンポーネントはサイドバーのコンポーネントパネルにあります。デザインモードのプレビューを使用して、アプリ内の特定のビジュアル要素を迅速に見つけることもできます。

ページナビゲーションを作成するのは簡単ですが、ネストされたナビゲーションなど、より複雑なナビゲーションフローを構築するのに十分な柔軟性もあります。Noodlは、パーマリンクやURL内のデータエンコーディングを備えた最先端のWebアプリナビゲーションをサポートしています。ページとナビゲーションを構築するための重要な概念の短い概要は次のとおりです：

• ページ、ページルーター、およびナビゲートノードは、ナビゲーションシステムの本質です。基本的なページナビゲーションの構築方法については、このガイドで学び、より高度なマルチレベルナビゲーションについてはここで学びましょう。

• ナビゲーションの別の機能はポップアップで、これは一時的な情報を表示または収集するために使用できます。ポップアップについての詳細はここで学びましょう。

アクション

上記で簡単に示されたように、Noodlの重要な概念はアクションノードです。これらのノードは、UIコントロール（たとえばボタンクリック）や他のアクションノード（たとえばアクションが成功または失敗したとき）からのシグナルによってトリガーされたときに、何らかのアクションを実行します。Noodlには、ナビゲーションやデータの読み書きなど、ほとんどの一般的な基本タスクのための幅広いアクションノードが含まれています。

ノード間の接続はNoodlのコアコンセプトであり、これによりユーザーインターフェイスをデータやアクションに接続します。

データの操作

フロントエンドの一部を構築し、ページ、コンポーネント、ナビゲーションを追加したら、動的なデータをユーザーインターフェイスに接続する時です。これにより、アプリケーションが活気づき、Noodlでは、モダンなリアクティブユーザーインターフェイスをビジュアルな方法で構築できます。

Noodlのデータには、変数、オブジェクト、配列ノードの3つの基本的な概念があります。これらの操作方法についてはここで詳しく学びましょう。

Webアプリケーションのフロントエンドでは、リストや他の動的な繰り返しコンテンツなど、さまざまなタイプが一般的です。Noodlでこれを行う方法についてはここで学びましょう。

ビジネスロジック

上記で述べたように、ビジネスロジックアクションを実行するためにNoodlではアクションノードを使用します。ページ間のナビゲーションやデータベースにデータを保存するなど、ほとんどの基本的なタスクのために多種多様なアクションノードが組み込まれています。UIコントロールからのデータとシグナルはアクションノードに接続され、フローを作成するためにそれらを連結できます。

しかし、ほとんどのアプリケーションでは、データベースからのデータ処理やより高度なUIコンポーネントの作成など、より高度なビジネスロジックが必要です。組み込みのアクションノードで基本的なロジックを構築できますが、より複雑なアクションが必要な場合、プロジェクトにコードを追加するのは非常に簡単かつ迅速です。

ソフトウェア開発者ではないですか？心配しないでください。Noodlの哲学は、重要なコードに焦点を当て、ソフトウェア開発の不必要な複雑さの多くを取り除くことです。JavaScriptの基本的な知識があれば、Noodlで長い道のりを歩むことができます。

クラウドサービス

Noodlプラットフォームの第2部であるクラウドサービスを見てみましょう。これは、任意のWebアプリケーションにとって重要な部分です。クラウドデータベースを作成および管理することができます。これらは、Noodlプロジェクト内から参照されるクラウドサービスとして知られています。

Noodlのクラウドサービスは、アプリケーションにいくつかの重要な機能を提供します：

• データの読み書き：クラスを作成してレコードを格納できます。これらは読み取られ、フィルタリングされ、アプリケーションで表示されます。クラウドサービスについて学び始めるには、ここから入りましょう。

• ユーザー管理。ほと

んどのアプリケーションにはユーザーが必要です。ユーザーを登録し、ログインし、パスワードを管理することができます。

• アクセス制御：ユーザーとデータがある場合、どのユーザーがどのデータにアクセスできるかを制御する必要があります。これは、クラウドサービスのロールを通じて行うことができます。詳細はここで学びましょう。

• クラウド関数：フロントエンドでロジックを作成するだけでなく、クラウドで実行されるタスクを実行するクラウド関数も作成できます。これは、管理アクセスが必要なデータベース操作やバックグラウンドジョブなどの操作に特に役立ちます。

クラウド関数

上述のようにロジックを構築するのと同じ技術を使用して、クラウドで実行されるロジックを構築できます。これはクラウド関数と呼ばれます。

これは、以下のような多くの異なる機能に非常に役立ちます：

• 管理モードでデータベースにアクセスし、パスワードのリセットやメールの確認など、クライアントからはセキュリティ上の理由で可能であってはならないことを行います。

• OAuthやWebhookなどの方法を使用して外部サービスに接続するには、クラウドでロジックを実行する必要があります。このような場合、クラウド関数が非常に役立ちます。

• クラウドでのクエリ実行は著しく高速なので、多数のデータベースクエリを実行して結果を組み合わせる必要がある場合、クラウドでこれを行うことで高いパフォーマンスを実現できます。

コラボレーション

最後に、アプリケーションが成長するにつれて、同僚や友人と協力したくなるでしょう。幸いにも、NoodlはGitを通じたバージョンコントロールと互換性があり、プロジェクトフォルダーがお好みのGitプロバイダーのリポジトリにプッシュされた後、組み込みのバージョンコントロールパネルを提供します。プロジェクトで協力し、個々のブランチで作業し、変更をマージすることができます。ソフトウェア開発の世界から強力なコンセプトをNoodlに取り入れることで、あらゆる制限に直面することがないようにします。

コラボレーションとバージョンコントロールの機能についての詳細はここで学びましょう。

モジュールとプレファブ

Noodlでは、他の人が開発したモジュールをインポートしたり、独自のモジュールを開発したりすることもできます。Noodlが提供する現在のモジュールのリストはここにあります。また、既存のJavascriptライブラリをラッピングするなど、独自のモジュールや拡張機能を構築することもできます。それについての詳細はここで読むことができます。

Noodlで生産性を次のレベルに引き上げる重要な概念はプレファブです。これらは、プロジェクトにクローンして使用できる事前に構築されたコンポーネントです。それらをそのまま使用することも、変更や拡張の出発点として使用することもできます。また、Noodlの最良の開発パターンを学ぶための素晴らしい方法でもあります。

あなたが構築した任意のコンポーネントもプレファブに変換され、コミュニティ全体が使用できるようにNoodl Docsリポジトリに提出することができます。それについての詳細はここで読むことができます。