Merge pull request #2374 from spryker/feature/SDK-5414-rewrite-instru…

…ctions

SDK-5414: As a PBC developer I want to have a clear single onboarding…

_data/sidebars/acp_user_sidebar.yml

@@ -12,11 +12,19 @@ entries:
             url: /docs/acp/user/intro-to-acp/aop-security-assessment.html
       - title: Install ACP catalog
         url: /docs/acp/user/app-composition-platform-installation.html
-      - title: Developing an app
-        url: /docs/acp/user/developing-an-app/developing-an-app.html
+      - title: Develop an app
+        url: /docs/acp/user/develop-an-app/develop-an-app.html
         nested:
-          - title: Create and app with AppKernel
-            url: /docs/acp/user/developing-an-app/create-an-app-with-appkernel.html
+          - title: Configuration JSON file
+            url: /docs/acp/user/develop-an-app/code-snippets/configuration-json-file.html
+          - title: Manifest JSON file
+            url: /docs/acp/user/develop-an-app/code-snippets/manifest-json-file.html
+          - title: Translation JSON file
+            url: /docs/acp/user/develop-an-app/code-snippets/translation-json-file.html
+      - title: Set up the message broker
+        url: /docs/acp/user/develop-an-app/set-up-the-message-broker.html
+      - title: Debug an app with xdebug
+        url: /docs/acp/user/develop-an-app/debug-an-app-with-xdebug.html
       - title: App manifest
         url: /docs/acp/user/app-manifest.html
       - title: App configuration

docs/acp/user/app-configuration-translation.md

@@ -5,8 +5,8 @@ template: howto-guide-template
 related:
   - title: App configuration
     link: docs/acp/user/app-configuration.html
-  - title: Developing an app
-    link: docs/acp/user/developing-an-app.html
+  - title: Develop an app
+    link: docs/acp/user/develop-an-app/develop-an-app.html
   - title: App manifest
     link: docs/acp/user/app-manifest.html
 ---

docs/acp/user/develop-an-app/code-snippets/configuration-json-file.md

@@ -0,0 +1,69 @@
+---
+title: Configuration JSON file
+Descriptions: Configuration Json code snippet
+template: howto-guide-template
+---
+To display the app you [developed with Spryker Mini-Framework](/docs/acp/user/develop-an-app/develop-an-app.html) in the App Store Catalog, the app needs to have the `configuration.json` file. This file contains all necessary form fields for inputs required by users of your app. Add this file to `config/app/configuration.json` in your app.
+
+For more information about the app configuration, see [App configuration](/docs/acp/user/app-configuration.html).
+
+Here is the example `configuration.json` file for the Hello World app. In this example, we assume the app needs a `clientId` and a `clientSecret` configured. Additionally, there should be an option to enable and disable the app via the App Store Catalog.
+
+
+```json
+{
+  "properties": {
+    "clientId": {
+      "type": "string",
+      "title": "clientId_title",
+      "placeholder": "clientId_placeholder",
+      "isRequired": true,
+      "isLockable": true,
+      "widget": {
+        "id": "password"
+      }
+    },
+    "clientSecret": {
+      "type": "string",
+      "title": "clientSecret_title",
+      "placeholder": "clientSecret_placeholder",
+      "isRequired": true,
+      "isLockable": true,
+      "widget": {
+        "id": "password"
+      }
+    },
+    "isActive": {
+      "type": "boolean",
+      "title": "isActive_title",
+      "widget": {
+        "id": "app-status"
+      },
+      "default": false
+    }
+  },
+  "fieldsets": [
+    {
+      "id": "notifications",
+      "fields": [
+        "isActive"
+      ],
+      "layout": "noLayout"
+    },
+    {
+      "id": "configurations",
+      "title": "configurations_fieldset_title",
+      "fields": [
+        "clientId",
+        "clientSecret"
+      ],
+      "hint": "configurations_hint"
+    }
+  ],
+  "required": [
+    "clientId",
+    "clientSecret",
+    "isActive"
+  ]
+}
+```

docs/acp/user/develop-an-app/code-snippets/manifest-json-file.md

@@ -0,0 +1,55 @@
+---
+title: Manifest JSON file
+Descriptions: Manifest Json code snippet
+template: howto-guide-template
+---
+To display the app you [developed with Spryker Mini-Framework](/docs/acp/user/develop-an-app/develop-an-app.html) in the App Store Catalog,, the app needs to have the manifest file. Add this file to `config/app/manifest/en_US.json` in your App.
+
+For more information about configuration of the manifest file, see [App manifest](https://docs.spryker.com/docs/acp/user/app-manifest.html).
+
+Here is the example manifest for the English version of the Hello World app:
+
+```json
+{
+    "name": "Hello World App",
+    "provider": "Example, Inc.",
+    "description": "Simple Hello World App for showcasing.",
+    "descriptionShort": "Hello World App.",
+    "url": "https://www.example.com",
+    "isAvailable": true,
+    "categories": [
+        "PLAYGROUND"
+    ],
+    "assets": [
+        {
+            "type": "icon",
+            "url": "/assets/img/hello-world/logo.png"
+        },
+        {
+            "type": "image",
+            "url": "/assets/img/hello-world/gallery/image.png"
+        }
+    ],
+    "resources": [
+        {
+            "title": "User Guide",
+            "url": "https://docs.spryker.com/docs/acp/user/intro-to-acp/acp-overview.html",
+            "type": "internal-documentation",
+            "fileType": "spryker-docs"
+        }
+    ],
+    "pages": {
+        "Overview": []
+    },
+    "labels": [],
+    "businessModels": [
+        "B2C",
+        "B2B",
+        "B2C_MARKETPLACE",
+        "B2B_MARKETPLACE"
+    ],
+    "dependencies": [],
+    "dialogs": {},
+    "developedBy": "Spryker Systems GmbH"
+}
+```

docs/acp/user/develop-an-app/code-snippets/translation-json-file.md

@@ -0,0 +1,44 @@
+---
+title: Translation JSON file
+Descriptions: Translation Json code snippet
+template: howto-guide-template
+---
+
+The `translation.json` file contains translations of the form files which are defined in the `configuration.json` file of your app [developed with Spryker Mini-Framework](/docs/acp/user/develop-an-app/develop-an-app.html). Add this file to `config/app/translation.json`in your app.
+
+For more information about the app configuration translation, see [App configuration translation](/docs/acp/user/app-configuration-translation.html).
+
+Here is the example `translation.json` file for the Hello World app.
+
+```json
+{
+  "configurations_fieldset_title": {
+    "en_US": "Configurations",
+    "de_DE": "Konfigurationen"
+  },
+  "configurations_hint": {
+    "en_US": "Add the Client details.",
+    "de_DE": "Füge die Client details hinzu."
+  },
+  "clientId_title": {
+    "en_US": "Client ID",
+    "de_DE": "Client ID"
+  },
+  "clientId_placeholder": {
+    "en_US": "Enter Client ID here.",
+    "de_DE": "Geben Sie hier die Client ID ein."
+  },
+  "clientSecret_title": {
+    "en_US": "Client Secret",
+    "de_DE": "Client Secret"
+  },
+  "clientSecret_placeholder": {
+    "en_US": "Enter Client Secret here.",
+    "de_DE": "Geben Sie hier den Client Secret ein."
+  },
+  "isActive_title": {
+    "en_US": "Activate",
+    "de_DE": "Aktivieren"
+  }
+}
+```

docs/acp/user/develop-an-app/debug-an-app-with-xdebug.md

@@ -0,0 +1,33 @@
+---
+title: Debug an app with Xdebug
+Descriptions: Learn how to use Xdebug for your app
+template: howto-guide-template
+---
+
+This document describes how to set up and use Xdebug to debug your app. 
+
+Keep in mind that the steps described here may vary slightly depending on your specific development environment; however, they should still assist you in setting up XDebug for debugging in most scenarios.
+
+## Set up DockerSDK with XDebug
+
+To start a testing container with Xdebug enabled (disabled in the default container), execute the following command:
+
+```bash
+docker/sdk testing -x
+```
+
+### Configure PHPStorm for XDebug
+
+To configure PHPStorm for XDebug, do the following:
+
+1. In PHPStorm, go to **Preferences → PHP → Servers**.
+2. Click the `+` sign to add a new configuration with the following details:
+   - Name: spryker
+   - Host: spryker.local
+3. Enable the *Use path mappings* option, selecting it based on whether the server is remote or if symlinks are used. For example, map the path from `/path/to/root/of/the/app` to `/data`.
+4. Click `Apply` and then `OK` to save the configuration.
+
+PHPStorm is now ready to accept XDebug connections, allowing you to debug your app using XDebug.
+
+
+