diff --git a/en/docfx.json b/en/docfx.json index bcd5347..e6458b4 100644 --- a/en/docfx.json +++ b/en/docfx.json @@ -13,6 +13,7 @@ "using-data-in-your-app/**.md", "ui-kits/**.md", "ai/**.md", + "sdk/**.md", "on-premises/**.md", "toolbox/**.md", "how-to/**.md", diff --git a/en/generate-app/generate-app-overview.md b/en/generate-app/generate-app-overview.md index 4d2468c..2182573 100644 --- a/en/generate-app/generate-app-overview.md +++ b/en/generate-app/generate-app-overview.md @@ -100,7 +100,8 @@ Currently, the App Builder supports code generation for Angular and Blazor. Belo | Reveal Dashboard | :heavy_check_mark: | :x: | :x: | -> Note: Partially generated components are marked with :construction:. See [Blazor Support](../blazor-support.md#known-issues-and-limitations) for more details on the known issues and limitations for Blazor components. +> [!NOTE] +> Partially generated components are marked with :construction:. See [Blazor Support](../blazor-support.md#known-issues-and-limitations) for more details on the known issues and limitations for Blazor components. ## Additional Resources diff --git a/en/generate-app/run-application-locally.md b/en/generate-app/run-application-locally.md index 824d0c3..144283c 100644 --- a/en/generate-app/run-application-locally.md +++ b/en/generate-app/run-application-locally.md @@ -5,13 +5,6 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k --- # Run Application Locally -> [!NOTE] ->The application files can be downloaded as a package and then run in your preferred IDE. - - -### In this article: -* Run the app locally - ### Run the app locally To finally develop the app, you don't need to copy and paste code. Instead, use the generate app button in the toolbar. This quickly creates a package with your Angular or Blazor application (depend on what framework is selected in the Platform picker dropdown) that can be downloaded. To run this app, open up the folder in an IDE like Visual Studio Code. @@ -19,7 +12,9 @@ To finally develop the app, you don't need to copy and paste code. Instead, use * Then in the console, type `npm install` to install the dependencies. It may take a while to install all the necessary packages. * Once that is done, type `npm start` to compile and launch the app.
- +> [!NOTE] +>The application files can be downloaded as a package and then run in your preferred IDE. +

An application running in VSCode

diff --git a/en/getting-started.md b/en/getting-started.md index b24041e..2914ed9 100644 --- a/en/getting-started.md +++ b/en/getting-started.md @@ -6,13 +6,30 @@ _keywords: App builder, Indigo Design, Infragistics # Getting started with App Builder -### In this article: -* Launch App Builder -* Getting the code -* Running the app locally - -> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0] - +App Builder is a low-code platform that lets you quickly turn designs into functional web apps—without writing all the code. Start from scratch, use templates, or import Figma designs, then visually build your app with drag-and-drop components, real data connections, and layout customization. It generates production-ready code for Angular, React, Blazor, and Web Components, with one-click export or deployment to GitHub or Azure. +## How Everything Works Together + +The diagram below gives you a high-level overview of how App Builder fits into the broader ecosystem of design and development tools: + + +

Platform Ecosystem

+ +### In Simple Terms: + +* **Design System → UI Kits & Adapters**: + It starts with a design system, implemented as UI kits (like Indigo.Design for Figma). Adapters translate your design into a format App Builder can use. +* **App Builder + Integrations**: + You use App Builder to visually create your app. It supports REST data, Reveal SDK widgets (for dashboards), and Slingshot tasks (for project management). +* **Common App Model**: + Everything flows into a central **Common App Model**—a unified format that describes your app, regardless of how you started (design import or manual build). +* **Code Generation (Codegen)**: + The model is then used by the **code generator**, which outputs real, usable code for: + * **Angular** + * **React** + * **Web Components** + * **Blazor** +* **Deployment Targets**: + Finally, the generated code can be deployed directly to platforms like **GitHub** or **Microsoft Azure**. ## Launch App Builder To access App Builder, navigate to [https://appbuilder.dev](https://appbuilder.dev) and sign in. Alternatively, you can launch App builder directly by visiting [https://my.appbuilder.dev](https://my.appbuilder.dev). You will need an active trial or paid subscription to create and edit apps. @@ -25,7 +42,9 @@ There are thee ways in which you can create a new app from the "Create new appli 4. **Import design** - if you have an existing design file, created using the Indigo.Design UI kit for Figma or Sketch, you can use this as a starting point for your apps. To do this, get our Indigo.Design system, which includes plugins to publish your design, UI kits, and sample design files.
-> Note: Due to the differences between the absolute layout in Sketch and the Flex layout in the App Builder, some additional adjustments may be needed after parsing your Sketch file. + +> [!NOTE] +> Due to the differences between the absolute layout in Sketch and the Flex layout in the App Builder, some additional adjustments may be needed after parsing your Sketch file.
@@ -36,7 +55,6 @@ Note, that once in the App Builder, users are enabled to easily switch between t

Side menu

- ## Getting the code The App Builder always displays a live-running web application both on the design surface and in the preview window. The underlying code and application model are updated in real time as you make changes to the application in the design surface. You can view the generated application code at any time in the preview window and you can also download the generated application at any time as a complete application code repository, which you can then open in a code editor of your choice. Then you can build and run the application you've designed using the App Builder locally on your machine and you can make additional modifications on the generated code. @@ -90,9 +108,15 @@ In order to run the downloaded application, the following prerequisites need to
+## Video tutorial + + +> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0] + ## Report an issue or send feedback [This repository](https://github.com/IgniteUI/app-builder) is intended for issues and feature requests submission, as well as for general product discussions, questions and any feedback that you want to share. You can also send us an email. + ## Additional Resources
diff --git a/en/images/how-to-create-angular-host-app.png b/en/images/how-to-create-angular-host-app.png new file mode 100644 index 0000000..9e36104 Binary files /dev/null and b/en/images/how-to-create-angular-host-app.png differ diff --git a/en/images/platform-ecosystem.png b/en/images/platform-ecosystem.png new file mode 100644 index 0000000..f61f9d6 Binary files /dev/null and b/en/images/platform-ecosystem.png differ diff --git a/en/indigo-design-app-builder-components.md b/en/indigo-design-app-builder-components.md index 19f64cf..23ce64b 100644 --- a/en/indigo-design-app-builder-components.md +++ b/en/indigo-design-app-builder-components.md @@ -6,17 +6,17 @@ _keywords: App builder components, Indigo Design, Infragistics # App Builder Components +The **Toolbox** tab on the left let you cycle through the list of all available [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) components, as well as some App Builder general components, such as absolute, row, column layout and views container. The search input on the top of the components list makes it easy to find a particular component. All of the components are conveniently distributed into groups based on their usage. The grayed-out components have still not been added, and are thus disabled, but soon will be available in next updates. Components can be added to the **Design Canvas** by dragging and dropping them from the **Toolbox**. + +Using App Builder Components:
-

Using App Builder Components

-The **Toolbox** tab on the left let you cycle through the list of all available [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) components, as well as some App Builder general components, such as absolute, row, column layout and views container. The search input on the top of the components list makes it easy to find a particular component. All of the components are conveniently distributed into groups based on their usage. The grayed-out components have still not been added, and are thus disabled, but soon will be available in next updates. Components can be added to the **Design Canvas** by dragging and dropping them from the **Toolbox**. - ## Quick add components You can also use our quick-add feature by using the keyboard shortcut ctrl+E or cmd+E on a macs to search and add components. Just remember "E" stands for everything. The quick-add keeps track of recently used components making it faster to add components you use frequently. Double-clicking a component in the **Toolbox** will also add it to the **Design Canvas**. diff --git a/en/sdk/sdk.md b/en/sdk/sdk.md new file mode 100644 index 0000000..6bde027 --- /dev/null +++ b/en/sdk/sdk.md @@ -0,0 +1,17 @@ +# Getting Started with the App Builder SDK + +## SDK Overview +The App Builder SDK provides a comprehensive toolkit for integrating both front-end and back-end capabilities into your applications. To begin, [you can use the Help Documentation](https://github.com/IgniteUI/appbuilder-sdk-sample/blob/main/Documentation/Consuming-AB-SDK-all-in-one-doc.md) and create an Angular host application that consumes the front-end SDK package, enabling seamless UI integration. On the server side, you can build a custom backend using the App Builder Backend SDK, with support for development environments like Visual Studio Code and Visual Studio. These foundational steps ensure that your application is fully equipped to leverage the SDK’s capabilities from both ends. + + +

Running the SDK

+ +The documentation further covers the Authentication and authorization key components of the SDK setup. You can configure [OpenID authentication](../on-premises/auth-with-openid-connect-o-auth.md) to allow users to log in using external identity providers, offering flexibility beyond the default IAM provider. Additionally, the SDK supports external authentication flows such as Authorization Code + PKCE, and allows the host application to manage authentication directly. For more advanced scenarios, you can customize the IAuthUserService and IPermissionsService interfaces to implement tailored logic for user roles and permissions. Optional guides are available to help configure backend endpoints that enforce role-based access control, ensuring secure and scalable integration. + +## Additional Resources +
+ +* [App Builder Interface Overview](../interface-overview.md) +* [Single Page And Navigation](../single-page-apps-and-navigation.md) +* [App Builder Components](../indigo-design-app-builder-components.md) +* [Running Desktop App](../running-desktop-app.md) \ No newline at end of file diff --git a/en/sidebar-toc/toc.yml b/en/sidebar-toc/toc.yml index 9137c0c..7aacff2 100644 --- a/en/sidebar-toc/toc.yml +++ b/en/sidebar-toc/toc.yml @@ -1,180 +1,152 @@ - - name: App Builder Overview href: ../app-builder-overview.md header: true -- name: AI in App Builder +- name: AI-Powered View and Content Generation href: ../ai/getting-started.md new: true - updated: false - name: Getting Started href: ../getting-started.md - new: false - updated: false items: - - name: On-premises prerequisites and installation - href: ../on-prem-prerequisites-and-installation.md - updated: true - - name: Auth with OpenID Connect - href: ../on-premises/auth-with-openid-connect-o-auth.md - new: true - - name: Configuration flags for On-prem and SDK - href: ../on-premises/configuration-flags.md - new: true - - name: Whitelisting External Resources for On-Premise App Builder - href: ../on-premises/external-references-for-whitelisting.md - new: true + - name: Interface Overview + href: ../interface-overview.md - name: Managing Workspaces in App Builder href: ../managing-workspaces.md new: true -- name: Running Desktop App - href: ../running-desktop-app.md -- name: Share, Preview and Edit apps - href: ../share-preview-edit-app.md - new: false -- name: Design-to-Code story + - name: Using the Desktop App + href: ../running-desktop-app.md + - name: On-premises and SDK + items: + - name: Using the App Builder SDK + href: ../sdk/sdk.md + - name: Using the On-Premises Version + href: ../on-prem-prerequisites-and-installation.md + items: + - name: On-Prem Authentication with OpenID Connect + href: ../on-premises/auth-with-openid-connect-o-auth.md + - name: On-Premises and SDK Configuration Flags + href: ../on-premises/configuration-flags.md + - name: Whitelisting External Resources + href: ../on-premises/external-references-for-whitelisting.md +- name: Design System & Design-to-Code Workflow href: ../design-to-code-story.md - new: false - items: - - name: Figma - href: ../ui-kits/figma.md - new: false - - name: Sketch - href: ../ui-kits/sketch.md - new: false -- name: Interface Overview - href: ../interface-overview.md - new: false -- name: Master-detail style apps - href: ../master-detail/master-detail.md - new: false updated: false - items: - - name: Step-by-step App Creation examples - href: ../master-detail/step-by-step-examples.md - new: false -- name: Guide to Variables in App Builder - href: ../guide-to-variables-in-app-builder/variables-management.md - new: false +- name: Figma UI Kit & Usage + href: ../ui-kits/figma.md updated: false +- name: Platform Interface and Structure + href: ../interface-overview.md items: - - name: Component properties binding - href: ../guide-to-variables-in-app-builder/component-properties-binding.md - new: false - - name: URL Parameters Binding - href: ../guide-to-variables-in-app-builder/url-parameters-binding.md - new: false - - name: Working with events and actions + - name: App Themes + href: ../app-themes/app-themes.md + - name: Toolbox Components + href: ../indigo-design-app-builder-components.md + items: + - name: Reveal Dashboard + href: ../toolbox/reveal-dashboard.md + - name: Grid + items: + - name: Grid Remote Paging + href: ../using-data-in-your-app/grid-remote-paging.md + - name: Grid CRUD + href: ../using-data-in-your-app/crud-operations.md + - name: Form Builder + href: ../using-data-in-your-app/form-builder.md + - name: Query Builder + items: + - name: Server-Side Filtering Implementation + href: ../using-data-in-your-app/api-project-query-builder-support.md + updated: false + - name: Step-by-Step Using the Query Builder + href: ../using-data-in-your-app/query-builder-step-by-step-guide.md + updated: false + - name: Layouts + items: + - name: Flex Layouts and Component Positioning + href: ../flex-layouts/flex-layouts.md + - name: Creating Responsive and Fluid Layouts (Row and Column) + href: ../how-to/responsive-fluid-layout.md +- name: Building Application Logic + items: + - name: Working with Events and Actions href: ../guide-to-variables-in-app-builder/working-with-events-and-actions.md - new: false - - name: App Navigation with Route Parameters - href: ../guide-to-variables-in-app-builder/route-parameters-navigation.md - new: false -- name: Responsive Fluid Layouts - href: ../how-to/responsive-fluid-layout.md - new: false -- name: Flex Layouts - href: ../flex-layouts/flex-layouts.md - # items: - # - name: Row and column layout - # href: ../flex-layouts/row-and-column-layout.md - # - name: Fluid resizing & wrapping - # href: ../flex-layouts/fluid-resizing-and-wrapping.md - # - name: Add to layout via context menu - # href: ../flex-layouts/add-to-layout-via-context-menu.md - # - name: Additional resources to learn about web-layouts - # href: ../flex-layouts/additional-resources-to-learn-about-web-layouts.md -- name: UI Components - href: ../indigo-design-app-builder-components.md - # items: - # - name: Quick add components - # href: ../indigo-design-components/quick-add-components.md - # - name: Configuring components - # href: ../indigo-design-components/configuring-components.md -- name: Interactions - href: ../interactions.md - # items: - # - name: Quick add components - # href: ../indigo-design-components/quick-add-components.md - # - name: Configuring components - # href: ../indigo-design-components/configuring-components.md -- name: Using data in your app + - name: Configuring Interactions for Component Events + href: ../interactions.md + - name: Managing App State with Variables + href: ../guide-to-variables-in-app-builder/variables-management.md + - name: Master-Detail Style Apps + href: ../master-detail/master-detail.md + - name: Step-by-step App Creation Examples + href: ../master-detail/step-by-step-examples.md + - name: Single Page Apps and Navigation + href: ../single-page-apps-and-navigation.md +- name: Using data in the App Builder href: ../using-data-in-your-app.md - new: false - updated: false items: - name: OpenAPI (Swagger) Support href: ../open-api-swagger-support.md - - name: Grid CRUD Operations - href: ../using-data-in-your-app/crud-operations.md - - name: Grid Remote Paging - href: ../using-data-in-your-app/grid-remote-paging.md + - name: Binding Data to Component Properties + href: ../guide-to-variables-in-app-builder/component-properties-binding.md + - name: URL Parameter Binding + href: ../guide-to-variables-in-app-builder/url-parameters-binding.md - name: Remote Data Operations href: ../using-data-in-your-app/remote-data-operations.md - - name: Form Builder - href: ../using-data-in-your-app/form-builder.md - - name: Complex Query Builder - href: ../using-data-in-your-app/query-builder-step-by-step-guide.md - new: true - - name: Web API Query Builder Support + - name: Grid Remote Paging + href: ../using-data-in-your-app/grid-remote-paging.md + - name: Performing Grid CRUD Operations (with OpenAPI) + href: ../using-data-in-your-app/crud-operations.md + - name: Implementing Query Builder for Server-Side Filtering href: ../using-data-in-your-app/api-project-query-builder-support.md - new: true - - name: Use Data API Builder with Any Database + updated: false + - name: Step-by-Step Using the Query Builder + href: ../using-data-in-your-app/query-builder-step-by-step-guide.md + updated: false + - name: Quickstart with Microsoft Data API Builder href: ../using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md - new: true -- name: App Themes - href: ../app-themes/app-themes.md - # items: - # - name: Switching app themes - # href: ../app-themes/switching-app-themes.md - # - name: Material vs. Fluent vs Bootstrap - # href: ../app-themes/material-vs-fluent-vs-bootstrap.md - # - name: Customize & apply theme - # href: ../app-themes/customize-and-apply-theme.md -- name: Single Page Apps and Navigation - href: ../single-page-apps-and-navigation.md - # items: - # - name: Master view vs. Child views - # href: ../spa-and-navigation/master-view-vs-child-views.md - # - name: Add navigations (routing) - # href: ../spa-and-navigation/add-navigations-routing.md -- name: Preview Code - href: ../preview-code.md - # items: - # - name: Preview code - # href: ../preview-code-and-genrate-app/preview-code.md - # - name: Compile and Run the app - # href: ../preview-code-and-genrate-app/compile-and-run-the-app.md -- name: Blazor Support - href: ../blazor-support.md - new: false - updated: false -- name: Web Components Support - href: ../web-components-support.md - new: false - updated: false -- name: Toolbox Components - new: false + - name: Form Builder Visual Design and Data Connection + href: ../using-data-in-your-app/form-builder.md + updated: false + - name: App Navigation with Route Parameters + href: ../guide-to-variables-in-app-builder/route-parameters-navigation.md + new: false +- name: Integrations & External Tools items: - - name: Reveal Dashboard + - name: Adding Reveal Dashboards to Apps href: ../toolbox/reveal-dashboard.md - new: false - updated: false -- name: Generate App - href: ../generate-app/generate-app-overview.md - new: false - updated: false + - name: Figma Design-to-Code Workflow + href: ../ui-kits/figma.md + - name: OpenAPI (Swagger) Support + href: ../open-api-swagger-support.md + - name: Feed data with Microsoft Data API Builder + href: ../using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md + - name: Authentication with OpenID Connect (On-Premise) + href: ../on-premises/auth-with-openid-connect-o-auth.md +- name: Code Generation items: - - name: Upload application to Github + - name: Running the Generated App Locally + href: ../generate-app/run-application-locally.md + - name: Preview Code + href: ../preview-code.md + - name: Generate App Overview + href: ../generate-app/generate-app-overview.md + - name: Supported Frameworks + items: + - name: Blazor Code Generation + href: ../blazor-support.md + - name: Web Components Code Generation + href: ../web-components-support.md + - name: Angular Code Generation + href: ../generate-app/generate-app-overview.md + - name: React Code Generation + href: ../generate-app/generate-app-overview.md +- name: Application Deployment + items: + - name: Publishing Apps to GitHub href: ../generate-app/upload-application-to-github.md - new: false - updated: false - - name: Upload application to Azure DevOps + - name: Publishing Apps to Azure DevOps href: ../generate-app/azure-integration.md - new: true - updated: false - - name: Run Application Locally - href: ../generate-app/run-application-locally.md -- name: Change Log +- name: Previewing and Sharing Applications + href: ../share-preview-edit-app.md +- name: Change Log (Release Notes) href: ../change-log.md - new: false - updated: true +- name: Video Tutorials + href: ../video-tutorials.md diff --git a/en/single-page-apps-and-navigation.md b/en/single-page-apps-and-navigation.md index de112bd..3111a71 100644 --- a/en/single-page-apps-and-navigation.md +++ b/en/single-page-apps-and-navigation.md @@ -6,13 +6,13 @@ _keywords: App builder, Indigo Design, Infragistics # Single page apps and navigation -> [!Video https://www.youtube.com/embed/hssubbXsOTM?si=yKKhVTo-1_fXyJ6A&list=UULF8cj8_eJROxAXsOjhbvduLw] - Another App Builder feature is the single-page apps and navigation. Unlike a page-based design approach, App Builder lets you create separate views that are injected or switched based on how users navigate. To see this action, you can create a new app using the create new application button, then select one of the default layouts that shows a top navigation defined.

Add layout preset from the Menu button, then select Create New App

+> [!Video https://www.youtube.com/embed/hssubbXsOTM?si=yKKhVTo-1_fXyJ6A&list=UULF8cj8_eJROxAXsOjhbvduLw] + ## Parent view vs. Child views What you see here is the master view. And when you look at the views list in the toolbox, you can see that there are two child views nested under it. Each child view corresponds to the navigation buttons in the primary toolbar area. When you preview the app, you will see that clicking on view 1 shows you content available inside view 1, and similarly for view 2. diff --git a/jp/docfx.json b/jp/docfx.json index bcd5347..e6458b4 100644 --- a/jp/docfx.json +++ b/jp/docfx.json @@ -13,6 +13,7 @@ "using-data-in-your-app/**.md", "ui-kits/**.md", "ai/**.md", + "sdk/**.md", "on-premises/**.md", "toolbox/**.md", "how-to/**.md", diff --git a/jp/generate-app/generate-app-overview.md b/jp/generate-app/generate-app-overview.md index 308bfbb..d524400 100644 --- a/jp/generate-app/generate-app-overview.md +++ b/jp/generate-app/generate-app-overview.md @@ -100,7 +100,8 @@ Angular コード生成を備えた App Builder が市場に出てから数か | Snackbar | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | | Reveal Dashboard | :heavy_check_mark: | :x: | :x: | -> 注: 部分的に生成されたコンポーネントは :construction: でマークされます。Blazor コンポーネントの既知の問題および制限の詳細については、[Blazor サポート](../blazor-support.md#既知の問題点および制限事項)を参照してください。 +> [!NOTE] +> 部分的に生成されたコンポーネントは :construction: でマークされます。Blazor コンポーネントの既知の問題および制限の詳細については、[Blazor サポート](../blazor-support.md#既知の問題点および制限事項)を参照してください。 ## その他のリソース diff --git a/jp/generate-app/run-application-locally.md b/jp/generate-app/run-application-locally.md index 3b49504..48f498f 100644 --- a/jp/generate-app/run-application-locally.md +++ b/jp/generate-app/run-application-locally.md @@ -6,13 +6,6 @@ _language: ja --- # アプリケーションをローカルで実行する -> [!NOTE] ->アプリケーション ファイルはパッケージとしてダウンロードして、お好みの IDE で実行できます。 - - -### トピック コンテンツ: -* アプリをローカルで実行する - ### アプリをローカルで実行する 最終的にアプリを開発するために、コードをコピーしてを貼り付ける必要はありません。代わりに、ツールバーの [アプリの生成] ボタンを使用してください。これにより、Angular または Blazor アプリケーション (プラットフォーム ピッカー ドロップダウンで選択されたフレームワークに依存) を含むパッケージをすばやく作成できます。このアプリを実行するには、Visual Studio Code のような IDE でフォルダーを開きます。 @@ -20,7 +13,9 @@ _language: ja * 次に、コンソールで `npm install` と入力して依存関係をインストールします。必要なすべてのパッケージをインストールするのに時間がかかる場合があります。
* それが完了したら、`npm start` と入力して、アプリをコンパイルして起動します。
- +> [!NOTE] +>アプリケーション ファイルはパッケージとしてダウンロードして、お好みの IDE で実行できます。 +

VS Code で実行されるアプリケーション

diff --git a/jp/getting-started.md b/jp/getting-started.md index b2501b9..8b987de 100644 --- a/jp/getting-started.md +++ b/jp/getting-started.md @@ -7,13 +7,31 @@ _language: ja # App Builder を使用した作業の開始 -### トピック コンテンツ: -* Indigo.Design から App Builder を起動する -* コードの取得 -* アプリをローカルで実行する +App Builder は、すべてのコードを記述することなく、デザインを機能的な Web アプリにすばやく変換できるローコード プラットフォームです。空の状態から始めたり、テンプレートを使用したり、Figma デザインをインポートしたりすることができ、ドラッグ アンド ドロップ コンポーネント、実際のデータとの接続、レイアウトのカスタマイズを使用して視覚的にアプリを構築します。Angular、React、Blazor、Web Components の実稼働環境に対応するコードを生成し、ワンクリックで GitHub または Azure にエクスポートまたは配置できます。 -> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0] +## すべての仕組みを理解するために + +以下の図は、App Builder がデザインおよび開発ツールのの広範なエコシステムの中でどのように機能しているかを高い視点から示した概要です。 + + +

プラットフォーム エコシステム

+### 簡単に言うと: + +* **デザインシ ステム → UI キットとアダプター**: + それは、UI キット (Figma の Indigo.Design など) として実装されたデザイン システムから始まります。アダプターはデザインを App Builder が使用できる形式に変換します。 +* **App Builder + 統合**: + App Builder を使用して、アプリを視覚的に作成します。REST データ、Reveal SDK ウィジェット (ダッシュボード用)、Slingshot タスク (プロジェクト管理用) をサポートしています。 +* **共通アプリ モデル**: + すべてが中央の**共通アプリ モデル**に集約されます。共通アプリ モデルは、開始方法 (デザインのインポートまたは手動ビルド) に関係なく、アプリを記述する統一された形式です。 +* **コード生成 (Codegen)**: + 次に、モデルは**コード ジェネレーター**によって使用され、次のような実際の使用可能なコードが出力されます。 + * **Angular** + * **React** + * **Web Components** + * **Blazor** +* **配置対象**: + 最後に、生成されたコードは、**GitHub** や **Microsoft Azure** などのプラットフォームに直接配置できます。 ## App Builder を起動する App Builder にアクセスするには、[https://appbuilder.dev](https://appbuilder.dev) に移動してサインインします。または、[https://my.appbuilder.dev](https://my.appbuilder.dev) にアクセスして App Builder を直接起動することもできます。アプリを作成および編集するには、有効なトライアル版または有料サブスクリプションが必要です。 @@ -26,7 +44,9 @@ App Builder にアクセスするには、[https://appbuilder.dev](https://appbu 4. **デザインのインポート** - Figma または Sketch 用の Indigo.Design UI キットを使用して作成された既存のデザイン ファイルがある場合、これをアプリの開始点として使用できます。これを行うには、デザイン、UI キット、サンプル デザイン ファイルを公開するためのプラグインが含まれる Indigo.Design システムを取得してください。
-> 注: Sketch の絶対レイアウトと App Builder の Flex レイアウトの違いにより、Sketch ファイルの解析後に追加の調整が必要になる場合があります。 + +> [!NOTE] +> Sketch の絶対レイアウトと App Builder の Flex レイアウトの違いにより、Sketch ファイルの解析後に追加の調整が必要になる場合があります。
@@ -37,7 +57,6 @@ App Builder にアクセスするには、[https://appbuilder.dev](https://appbu

サイド メニュー

- ## コードの取得 App Builder は、常にライブ実行中の Web アプリケーションをデザイン画面とプレビュー ウィンドウの両方に表示します。基になるコードとアプリケーション モデルは、デザイン画面でアプリケーションに変更を加えると、リアルタイムで更新されます。生成されたアプリケーション コードはプレビュー ウィンドウでいつでも表示できます。また、生成されたアプリケーションを完全なアプリケーション コード リポジトリとしてダウンロードして、選択したコード エディターで開くこともできます。次に、App Builder を使用してデザインしたアプリケーションをマシン上でローカルにビルドして実行し、生成されたコードに追加の変更を加えることができます。 @@ -91,9 +110,15 @@ App Builder は、ソフトウェア製品の検出、ソフトウェア製品
+## ビデオ チュートリアル + + +> [!Video https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw&rel=0] + ## 問題の報告またはフィードバックの送信 [このリポジトリ](https://github.com/IgniteUI/app-builder)は、問題や機能リクエストの送信、および製品の全般的なディスカッション、質問、共有したいフィードバックを対象としています。メールを送信することもできます。 + ## その他のリソース
diff --git a/jp/images/how-to-create-angular-host-app.png b/jp/images/how-to-create-angular-host-app.png new file mode 100644 index 0000000..9e36104 Binary files /dev/null and b/jp/images/how-to-create-angular-host-app.png differ diff --git a/jp/images/platform-ecosystem.png b/jp/images/platform-ecosystem.png new file mode 100644 index 0000000..f61f9d6 Binary files /dev/null and b/jp/images/platform-ecosystem.png differ diff --git a/jp/indigo-design-app-builder-components.md b/jp/indigo-design-app-builder-components.md index 1ae5c5e..bd3f559 100644 --- a/jp/indigo-design-app-builder-components.md +++ b/jp/indigo-design-app-builder-components.md @@ -7,17 +7,17 @@ _language: ja # App Builder コンポーネント +左側の**ツールボックス** タブでは、使用可能なすべての [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) のリストと、Absolute、Row、Column Layout、Views Container などの App Builder の一般的なコンポーネントを順番に表示できます。コンポーネント リストの上部にある検索入力により、特定のコンポーネントを簡単に見つけることができます。すべてのコンポーネントは、使用法に基づいてグループに簡単に分散されます。グレーアウトされたコンポーネントはまだ追加されていないため無効になっていますが、間もなく次のアップデートで利用できるようになります。コンポーネントは、**ツールボックス**からドラッグアンドドロップすることで**デザイン キャンバス**に追加できます。 + +App Builder コンポーネントの使用:
-

App Builder コンポーネントの使用

-左側の**ツールボックス** タブでは、使用可能なすべての [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular) のリストと、Absolute、Row、Column Layout、Views Container などの App Builder の一般的なコンポーネントを順番に表示できます。コンポーネント リストの上部にある検索入力により、特定のコンポーネントを簡単に見つけることができます。すべてのコンポーネントは、使用法に基づいてグループに簡単に分散されます。グレーアウトされたコンポーネントはまだ追加されていないため無効になっていますが、間もなく次のアップデートで利用できるようになります。コンポーネントは、**ツールボックス**からドラッグアンドドロップすることで**デザイン キャンバス**に追加できます。 - ## クイック追加のコンポーネント Mac でキーボード ショートカットの ctrl + E または cmd + E を使用してコンポーネントを検索および追加することにより、クイック追加機能を使用することもできます。「E」 はすべてを表すことを覚えておいてください。クイック追加は、最近使用したコンポーネントを追跡し、頻繁に使用するコンポーネントをすばやく追加できるようにします。**ツールボックス**でコンポーネントをダブルクリックすると、そのコンポーネントも**デザイン キャンバス**に追加されます。 @@ -29,7 +29,6 @@ Mac でキーボード ショートカットの ctrl + E または cmd + E を すべてのコンポーネントには、Indigo.Design システムに一致する一連のプリセット タイプが付属しています。たとえば、Indigo.Design システムには、Raised、Outline、Flat の 3 つのプリセット タイプのボタンがあります。 - ![component-presets-Indigo-Design-App-Builder](./images/component-presets-Indigo-Design-App-Builder.gif)

コンポーネントのプリセット

diff --git a/jp/managing-workspaces.md b/jp/managing-workspaces.md new file mode 100644 index 0000000..03eaf4f --- /dev/null +++ b/jp/managing-workspaces.md @@ -0,0 +1,105 @@ +--- +title: App Builder でワークスペースを作成および管理する +_description: App Builder を使用してワークスペースをすばやく作成および管理する方法について説明します。 +_keywords: App Builder, インフラジスティックス, ワークスペース, リモート ページング,複数のアクション, ローコードプラットフォーム, Ignite UI +_language: ja +--- + +# App Builder でのワークスペースの管理 + +## 概要 + +App Builder のワークスペースは、アプリケーションとその関連リソースの共有フォルダーのように機能する共同作業環境です。各ワークスペースでは、招待されたユーザーが重複することなくアプリやワークスペース レベルのアセットにアクセスし、編集および管理できます。 + +ネイティブ ワークスペースのサポートにより、App Builder はワークスペース機能に関して Indigo.Design Cloud に依存せず、完全に自己完結型になりました。この変更は、SaaS ユーザーとオンプレミス ユーザーの両方にメリットをもたらしますが、特に Indigo.Design プラットフォーム全体を使用せずにアプリを管理したいユーザーにはメリットとなります。 + +## 主要機能 + +### ワークスペース コラボレーション +- メールでチーム メンバーを招待します。 +- 共有ワークスペースの提案に基づいてメンバーを追加します。 +- メール/アカウント検証で招待を承認します。 +- メンバーを削除するか、メンバーが自主的に退出できるようにします。 +- 招待された (まだ参加していない) メンバーを表示および管理します。 +- ユーザー設定ごとにワークスペースをピン固定/ピン固定解除します。 + +### ワークスペース エンティティ +ワークスペース内のすべてのアプリ間で自動的に共有されるリソース: +- ビューポート +- テーマ +- データ ソース +- アセット (画像など) + +### ワークスペース間でのアプリのコピー +次の処理を自動的に実行して、アプリを別のワークスペースにコピーします。 +- 共有アセット、テーマ、ビューポート、変数、データ ソース。 +- コピー後に GitHub リポジトリ リンクは保存されません。 + +## 使用方法 + +### ワークスペースの作成と管理 +1. App Builder ダッシュボードから**ワークスペース メニュー**にアクセスします。 +2. 既存の UI を使用して、**ワークスペースを作成**したり、ユーザーを招待したり、設定を更新したりします。 +3. **ワークスペースのピン固定**オプションを使用してメニューをカスタマイズします。 + +### メンバーの招待と管理 +- App Builder から直接**メールでユーザーを招待します**。 +- 招待を受け入れると、セキュリティのためにアカウントの検証が行われます。 +- 招待の状態を追跡し、必要に応じて招待を再送信します。 +- ただちにメンバーを削除します。 + +### アプリケーションを別のワークスペースにコピーする +1. アプリのコンテキスト メニューから **[ワークスペースにコピー]** オプションを使用します。 +2. ターゲット ワークスペースを選択します。 +3. コピー操作を確認します。App Builder は: + - 必要なリンクされたリソースをすべてコピーします。 + - 可能な場合は既存のものと一致させます。 + - 完了時に成功通知を表示します。 + +> [!NOTE] +> GitHub リポジトリ リンクは保存されません。リポジトリを手動で再接続する必要があります。 + +## 変更内容と影響について + +- 移行中または移行後に**機能が失われることはありません**。 +- **視覚的な UI の変更はありません**。 +- アプリが作成または削除されると、**ローカライズされたメール通知**が送信されます。 + +## 制限 + +- 同じアプリをライブ リンクとして複数のワークスペースに追加することはできません (アプリ同期なし)。 +- コピー後に GitHub リポジトリのリンクが維持されません。 +- コピーするワークスペース レベルの成果物を選択することはできません。App Builder はすべてをコピーします。 + +## ベスト プラクティス + +| タスク | 推奨 | +|-----------------------------------|----------------| +| ユーザーの追加 | すばやく招待するには、共有ワークスペースから提案されたユーザーを使用します。 | +| リソースの管理 | アプリをコピーするときに、App Builder が既存のリソースを自動検出して一致させるようにします。 | +| ワークスペース名の変更 | 明確にするために、変更は全ユーザーに適用されます。 | +| ワークスペースから退出 | ワークスペース メニューの **[ワークスペースから退出]** オプションを使用します。 | +| 招待の追跡 | ワークスペース設定から、承認されていない招待を監視し、再送信します。 | + + + +## よくある質問 (FAQ) + +### Indigo.Design で App Builder ワークスペースを表示できますか? +いいえ。ネイティブ ワークスペース サポートは、Indigo.Design から完全に分離されました。App Builder で作成されたワークスペースは表示されず、Indigo で同期されません。 + +### 移行後、アプリとメンバーはどうなりますか? +**サービスの中断**やデータの損失はありません。既存のワークスペース、アプリ、メンバーシップ、共有 URL はすべて保持されます。 + +### アプリをコピーするときに、リソースを手動で再リンクする必要がありますか? +いいえ。App Builder は可能な場合にリソースを自動的に一致させます。一致しないリソースのみが複製されます。 + +## その他のリソース +
+ +* [App Builder インターフェイスの概要](interface-overview.md) +* [単一ページとナビゲーション](single-page-apps-and-navigation.md) +* [App Builder コンポーネント](indigo-design-app-builder-components.md) +* [Flex レイアウト](flex-layouts/flex-layouts.md) +* [Desktop アプリの実行方法](running-desktop-app.md) +* [アプリの生成](generate-app/generate-app-overview.md) diff --git a/jp/sdk/sdk.md b/jp/sdk/sdk.md new file mode 100644 index 0000000..d7db928 --- /dev/null +++ b/jp/sdk/sdk.md @@ -0,0 +1,17 @@ +# App Builder SDK を使用した作業の開始 + +## SDK の概要 +App Builder SDK は、フロントエンドとバックエンドの両方の機能をアプリケーションに統合するための包括的なツールキットを提供します。まず、[ヘルプ ドキュメントを使用して](https://github.com/IgniteUI/appbuilder-sdk-sample/blob/main/Documentation/Consuming-AB-SDK-all-in-one-doc.md)、フロントエンド SDK パッケージを使用する Angular ホスト アプリケーションを作成し、シームレスな UI 統合を可能にします。サーバー側では、Visual Studio Code や Visual Studio などの開発環境をサポートする App Builder Backend SDK を使用して、カスタム バックエンドを構築できます。これらの基本的な手順により、アプリケーションは、フロントエンドとバックエンドの両方から SDK の機能を十分に活用できるようになります。 + + +

SDK の実行

+ +このドキュメントでは、SDK のセットアップにおける認証および認可の主要な コンポーネントについても詳しく説明します。[OpenID 認証](../on-premises/auth-with-openid-connect-o-auth.md)を構成すると、ユーザーが外部 ID プロバイダーを使用してログインできるようになり、デフォルトの IAM プロバイダーを超える柔軟性が提供されます。さらに、SDK は認可コード + PKCE (Proof Key for Code Exchange) などの外部認証フローをサポートしており、ホスト アプリケーションが認証を直接管理できます。より高度なシナリオでは、IAuthUserService および IPermissionsService インターフェイスをカスタマイズして、ユーザーのロールとアクセス許可に合わせた独自のロジックを実装できます。オプションのガイドは、ロールベースのアクセス制御を適用した、安全でスケーラブルな統合を保証するバックエンド エンドポイントを構成するのに役立ちます。 + +## その他のリソース +
+ +* [App Builder インターフェイスの概要](../interface-overview.md) +* [単一ページとナビゲーション](../single-page-apps-and-navigation.md) +* [App Builder コンポーネント](../indigo-design-app-builder-components.md) +* [Desktop アプリの実行方法](../running-desktop-app.md) \ No newline at end of file diff --git a/jp/sidebar-toc/toc.yml b/jp/sidebar-toc/toc.yml index 214cff6..81ed13e 100644 --- a/jp/sidebar-toc/toc.yml +++ b/jp/sidebar-toc/toc.yml @@ -1,177 +1,154 @@ - -- name: App Builder の概要 +- name: App Builder の概要 href: ../app-builder-overview.md header: true -- name: App Builder の AI +- name: AI を活用したビューとコンテンツ生成 href: ../ai/getting-started.md new: true - updated: false - name: はじめに href: ../getting-started.md - new: false - updated: false items: - - name: オンプレミスの前提条件とインストール - href: ../on-prem-prerequisites-and-installation.md - updated: true - - name: OpenID Connect による認証 - href: ../on-premises/auth-with-openid-connect-o-auth.md - new: true - - name: オンプレミスと SDK の構成フラグ - href: ../on-premises/configuration-flags.md - new: true - - name: オンプレミス App Builder の外部リソースのホワイトリスト化 - href: ../on-premises/external-references-for-whitelisting.md + - name: インターフェイスの概要 + href: ../interface-overview.md + - name: App Builder でのワークスペースの管理 + href: ../managing-workspaces.md new: true -- name: Desktop アプリの実行方法 - href: ../running-desktop-app.md -- name: アプリケーションの共有、プレビュー、および編集 - href: ../share-preview-edit-app.md - new: false -- name: デザインからコード作成のストーリー + - name: デスクトップ アプリの使用 + href: ../running-desktop-app.md + - name: アプリケーションをローカルで実行 + href: ../generate-app/run-application-locally.md + - name: SDK・オンプレミス + items: + - name: App Builder SDK の使用 + href: ../sdk/sdk.md + - name: オンプレミス版の使用 + href: ../on-prem-prerequisites-and-installation.md + items: + - name: OpenID Connect を使用したオンプレミス認証 + href: ../on-premises/auth-with-openid-connect-o-auth.md + - name: オンプレミスと SDK の構成フラグ + href: ../on-premises/configuration-flags.md + - name: 外部リソースのホワイトリスト化 + href: ../on-premises/external-references-for-whitelisting.md +- name: デザインシ ステムとデザインからコード作成までのワークフロー href: ../design-to-code-story.md - new: false - items: - - name: Figma - href: ../ui-kits/figma.md - new: false - - name: Sketch - href: ../ui-kits/sketch.md - new: false -- name: インターフェイスの概要 - href: ../interface-overview.md - new: false -- name: マスター/詳細スタイルのアプリ - href: ../master-detail/master-detail.md - new: false updated: false +- name: Figma UI キットと使用方法 + href: ../ui-kits/figma.md + updated: false +- name: プラットフォーム インターフェースと構造 + href: ../interface-overview.md + items: + - name: アプリ テーマ + href: ../app-themes/app-themes.md + - name: ツールボックス コンポーネント + href: ../indigo-design-app-builder-components.md + items: + - name: Reveal ダッシュボード + href: ../toolbox/reveal-dashboard.md + - name: Grid + items: + - name: Grid リモート ページング + href: ../using-data-in-your-app/grid-remote-paging.md + - name: Grid CRUD + href: ../using-data-in-your-app/crud-operations.md + - name: Form Builder + href: ../using-data-in-your-app/form-builder.md + - name: Query Builder + items: + - name: サーバー側フィルタリングの実装 + href: ../using-data-in-your-app/api-project-query-builder-support.md + updated: false + - name: Query Builder のステップバイステップ ガイド + href: ../using-data-in-your-app/query-builder-step-by-step-guide.md + updated: false + - name: レイアウト + items: + - name: Flex レイアウトとコンポーネントの配置 + href: ../flex-layouts/flex-layouts.md + - name: レスポンシブで流動的なレイアウト (行と列) の作成 + href: ../how-to/responsive-fluid-layout.md +- name: アプリケーション ロジックの構築 items: - - name: ステップバイステップのアプリ作成例 + - name: イベントとアクションの操作 + href: ../guide-to-variables-in-app-builder/working-with-events-and-actions.md + - name: コンポーネント イベントのインタラクションの設定 + href: ../interactions.md + - name: 変数を使用したアプリの状態管理 + href: ../guide-to-variables-in-app-builder/variables-management.md + - name: マスター詳細スタイルのアプリ + href: ../master-detail/master-detail.md + - name: "アプリ作成 - ステップバイステップの例" href: ../master-detail/step-by-step-examples.md - new: false -- name: App Builder での変数管理のガイド - href: ../guide-to-variables-in-app-builder/variables-management.md - new: false - updated: false + - name: 単一ページアプリとナビゲーション + href: ../single-page-apps-and-navigation.md +- name: App Builder でデータを使用する + href: ../using-data-in-your-app.md items: - - name: コンポーネント プロパティのバインド + - name: OpenAPI (Swagger) サポート + href: ../open-api-swagger-support.md + - name: コンポーネント プロパティへのデータのバインド href: ../guide-to-variables-in-app-builder/component-properties-binding.md - new: false - name: URL パラメーターのバインド href: ../guide-to-variables-in-app-builder/url-parameters-binding.md - new: false - - name: ベントとアクションを操作する - href: ../guide-to-variables-in-app-builder/working-with-events-and-actions.md - new: false + - name: リモート データ操作 + href: ../using-data-in-your-app/remote-data-operations.md + - name: Grid リモート ページング + href: ../using-data-in-your-app/grid-remote-paging.md + - name: グリッド CRUD 操作の実行 (OpenAPI を使用) + href: ../using-data-in-your-app/crud-operations.md + - name: サーバー側フィルタリングのための Query Builder の実装 + href: ../using-data-in-your-app/api-project-query-builder-support.md + updated: false + - name: Query Builder のステップバイステップ ガイド + href: ../using-data-in-your-app/query-builder-step-by-step-guide.md + updated: false + - name: Microsoft のデータ API ビルダーのクイックスタート ガイド + href: ../using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md + - name: Form Builder のビジュアル デザインとデータ接続 + href: ../using-data-in-your-app/form-builder.md + updated: false - name: ルート パラメーターを使用したアプリのナビゲーション href: ../guide-to-variables-in-app-builder/route-parameters-navigation.md new: false -- name: レスポンシブ Fluid レイアウト - href: ../how-to/responsive-fluid-layout.md - new: false -- name: Flex レイアウト - href: ../flex-layouts/flex-layouts.md - # items: - # - name: 行と列のレイアウト - # href: ../flex-layouts/row-and-column-layout.md - # - name: Fluid resizing & wrapping - # href: ../flex-layouts/fluid-resizing-and-wrapping.md - # - name: Add to layout via context menu - # href: ../flex-layouts/add-to-layout-via-context-menu.md - # - name: Additional resources to learn about web-layouts - # href: ../flex-layouts/additional-resources-to-learn-about-web-layouts.md -- name: UI コンポーネント - href: ../indigo-design-app-builder-components.md - # items: - # - name: Quick add components - # href: ../indigo-design-components/quick-add-components.md - # - name: Configuring components - # href: ../indigo-design-components/configuring-components.md -- name: インタラクション - href: ../interactions.md - # items: - # - name: Quick add components - # href: ../indigo-design-components/quick-add-components.md - # - name: Configuring components - # href: ../indigo-design-components/configuring-components.md -- name: アプリでデータを使用する - href: ../using-data-in-your-app.md - new: false - updated: false +- name: 統合と外部ツール items: + - name: アプリに Reveal ダッシュボードを追加する + href: ../toolbox/reveal-dashboard.md + - name: Figma のデザインからコード作成までのワークフロー + href: ../ui-kits/figma.md - name: OpenAPI (Swagger) サポート href: ../open-api-swagger-support.md - - name: Grid CRUD 操作 - href: ../using-data-in-your-app/crud-operations.md - - name: Grid リモート ページング - href: ../using-data-in-your-app/grid-remote-paging.md - - name: リモート データ操作 - href: ../using-data-in-your-app/remote-data-operations.md - - name: フォーム ビルダー - href: ../using-data-in-your-app/form-builder.md - - name: 複雑なクエリ ビルダー - href: ../using-data-in-your-app/query-builder-step-by-step-guide.md - new: true - - name: Web API クエリ ビルダーのサポート - href: ../using-data-in-your-app/api-project-query-builder-support.md - new: true - - name: 任意のデータベースで データ API ビルダーを使用する + - name: Microsoft のデータ API ビルダーでデータを入力する href: ../using-data-in-your-app/quickstart-use-microsoft-data-api-builder.md - new: true -- name: テーマ - href: ../app-themes/app-themes.md - # items: - # - name: Switching app themes - # href: ../app-themes/switching-app-themes.md - # - name: Material vs. Fluent vs Bootstrap - # href: ../app-themes/material-vs-fluent-vs-bootstrap.md - # - name: Customize & apply theme - # href: ../app-themes/customize-and-apply-theme.md -- name: 単一ページアプリとナビゲーション - href: ../single-page-apps-and-navigation.md - # items: - # - name: Master view vs. Child views - # href: ../spa-and-navigation/master-view-vs-child-views.md - # - name: Add navigations (routing) - # href: ../spa-and-navigation/add-navigations-routing.md -- name: コードのプレビュー - href: ../preview-code.md - # items: - # - name: Preview code - # href: ../preview-code-and-genrate-app/preview-code.md - # - name: Compile and Run the app - # href: ../preview-code-and-genrate-app/compile-and-run-the-app.md -- name: Blazor サポート - href: ../blazor-support.md - new: false - updated: false -- name: Web Components サポート - href: ../web-components-support.md - new: false - updated: false -- name: ツールボックス コンポーネント - new: false + - name: OpenID Connect による認証 (オンプレミス) + href: ../on-premises/auth-with-openid-connect-o-auth.md +- name: コードの生成 items: - - name: Reveal ダッシュボード - href: ../toolbox/reveal-dashboard.md - new: false - updated: false -- name: アプリの生成 - href: ../generate-app/generate-app-overview.md - new: false - updated: false + - name: アプリケーションをローカルで実行 + href: ../generate-app/run-application-locally.md + - name: コードのプレビュー + href: ../preview-code.md + - name: アプリの生成 (概要) + href: ../generate-app/generate-app-overview.md + - name: サポートされているフレームワーク + items: + - name: Blazor のコード生成 + href: ../blazor-support.md + - name: Web Components のコード作成 + href: ../web-components-support.md + - name: Angular のコード生成 + href: ../generate-app/generate-app-overview.md + - name: React のコード生成 + href: ../generate-app/generate-app-overview.md +- name: アプリケーションの配置 items: - - name: アプリケーションを Github にアップロード + - name: GitHub へのアプリのプッシュ href: ../generate-app/upload-application-to-github.md - new: false - updated: false - - name: アプリケーションを Azure DevOps にアップロード + - name: Azure DevOps へのアプリの公開 href: ../generate-app/azure-integration.md - new: true - updated: false - - name: アプリケーションをローカルで実行 - href: ../generate-app/run-application-locally.md -- name: 変更ログ +- name: アプリケーションのプレビューと共有 + href: ../share-preview-edit-app.md +- name: 変更ログ (リリースノート) href: ../change-log.md - new: false - updated: true +- name: ビデオ チュートリアル + href: ../video-tutorials.md diff --git a/jp/single-page-apps-and-navigation.md b/jp/single-page-apps-and-navigation.md index 5efd91c..8373c07 100644 --- a/jp/single-page-apps-and-navigation.md +++ b/jp/single-page-apps-and-navigation.md @@ -7,12 +7,12 @@ _language: ja # 単一ページアプリとナビゲーション -> [!Video https://www.youtube.com/embed/hssubbXsOTM?si=yKKhVTo-1_fXyJ6A&list=UULF8cj8_eJROxAXsOjhbvduLw] - App Builder のもう 1 つの機能は、単一ページのアプリとナビゲーションです。ページに基づいたデザイン アプローチとは異なり、App Builder では、ユーザーのナビゲート方法に基づいて挿入または切り替えられる個別のビューを作成できます。このアクションを確認するには、[+ 新しいアプリ] ボタンを使用して新しいアプリを作成し、定義された上部ナビゲーションを表示するデフォルトのレイアウトの 1 つを選択します。 -

メニュー ボタンからレイアウト プリセットを追加し、[Create New App] を選択する

+

メニュー ボタンからレイアウト プリセットを追加し、[新しいアプリの作成] を選択する

+ +> [!Video https://www.youtube.com/embed/hssubbXsOTM?si=yKKhVTo-1_fXyJ6A&list=UULF8cj8_eJROxAXsOjhbvduLw] ## 親ビュー vs. 子ビュー