E2E docs experience getting started guides (#3988)

* initial commit * move help center 8.5 * redirect * add plain java steps * typo in htaccess * add plain java component * adjust guides * Update docs/guides/react-components/install-plain-java.md Co-authored-by: Cole Isaac <[email protected]> * remove SM from API orch guide * Update install-plain-java.md stylistic clean up * Update saas-prerequisites.md stylistic clean up * remove signup screenshot and update signup * add link to SaaS signup --------- Co-authored-by: Cole Isaac <[email protected]> Co-authored-by: christinaausley <[email protected]>
camunda · Jul 1, 2024 · ae55481 · ae55481
1 parent 28bc4c9
commit ae55481
Show file tree

Hide file tree

Showing 20 changed files with 177 additions and 61 deletions.
diff --git a/docs/guides/getting-started-java-spring.md b/docs/guides/getting-started-java-spring.md
@@ -1,15 +1,22 @@
 ---
 id: getting-started-java-spring
-title: Getting started as a Java developer using Spring
-sidebar_label: Getting started as a Java developer using Spring
+title: Get started as a Java developer using Spring
+sidebar_label: Get started with Spring
 description: "Use Spring Boot and the Spring Zeebe SDK to interact with your local Self-Managed Camunda 8 installation."
 keywords: [java, spring, spring zeebe, getting started, user guide, tutorial]
 ---
 
+import SmPrereqs from './react-components/sm-prerequisites.md'
+import Install from './react-components/install-plain-java.md'
+
 <span class="badge badge--beginner">Beginner</span>
-<span class="badge badge--medium">1 hour</span>
+<span class="badge badge--medium">1 hour</span><br /><br />
 
-In this guide, we'll step through using Spring Boot and the [Spring Zeebe SDK](/apis-tools/spring-zeebe-sdk/getting-started.md) with Desktop Modeler to interact with your local Self-Managed Camunda 8 installation.
+:::note
+This tutorial is not intended for production purposes.
+:::
+
+In this guide, we'll step through using Spring Boot and the [Spring Zeebe SDK](/apis-tools/spring-zeebe-sdk/getting-started.md) with Desktop Modeler to interact with your local Self-Managed Camunda 8 installation. While this guide focuses on Self-Managed, you can do something similar with [SaaS](https://signup.camunda.com/accounts?utm_source=docs.camunda.io&utm_medium=referral).
 
 By the end of this tutorial, you'll be able to use Spring and Java code with Zeebe to:
 
@@ -21,27 +28,11 @@ For example, in this guide we will outline a BPMN model to receive a payment req
 
 ![example BPMN model to receive a payment request, prepare a transaction, charge a credit card, and execute a payment](./img/prepare-transaction-example.png)
 
-:::note
-This tutorial is not intended for production purposes.
-:::
-
-## Prerequisites
-
-Before getting started, ensure you:
-
-- Can access your preferred code editor or IDE.
-- Have Java [installed locally](https://www.java.com/en/download/). Currently, the Spring Initializr supports Java versions 17, 21, and 22.
-- Have [Docker Desktop](https://www.docker.com/products/docker-desktop/) installed locally.
-- Install [Desktop Modeler](https://camunda.com/download/modeler/).
+<SmPrereqs/>
 
 ## Step 1: Install Camunda 8 Self-Managed
 
-If you haven't already, follow [this guide](/self-managed/setup/deploy/local/docker-compose.md) to install Camunda 8 Self-Managed locally via Docker Compose:
-
-1. Use the `docker-compose.yaml` file in [this repository](https://github.com/camunda/camunda-platform).
-2. Clone this repo and run `docker compose up -d` in your terminal to start your environment.
-
-To confirm Camunda 8 Self-Managed is installed, click into Docker Desktop. Here, you will see the `camunda-platform` container. Alternatively, navigate to the different components and log in with the username `demo` and password `demo`. For example, Operate can be accessed at [http://localhost:8081](http://localhost:8081) (as noted under **Port(s)** in the Docker container). Find additional guidance in the repository [README](https://github.com/camunda/camunda-platform?tab=readme-ov-file#using-docker-compose).
+<Install/>
 
 ## Step 2: Create a new Spring Boot project
 

diff --git a/docs/guides/getting-started-orchestrate-apis.md b/docs/guides/getting-started-orchestrate-apis.md
@@ -1,26 +1,33 @@
 ---
 id: orchestrate-apis
-title: Getting started with API orchestration
-sidebar_label: Getting started with API orchestration
+title: Get started with API orchestration
+sidebar_label: Get started with API orchestration
 description: "Use Connectors to build low code process automation solutions"
 keywords:
   [api endpoints, orchestration, getting started, user guide, connectors]
 ---
 
 <span class="badge badge--beginner">Beginner</span>
-<span class="badge badge--medium">Time estimate: 15 minutes</span>
+<span class="badge badge--cloud">Camunda 8 SaaS only</span>
+<span class="badge badge--medium">Time estimate: 15 minutes</span><br /><br />
 
 import clsx from "clsx";
+import SaasPrereqs from './react-components/saas-prerequisites.md'
 
-This guide will walk you through working with a REST Connector task as a first time Camunda 8 user. The REST Connector is a [protocol Connector](/components/connectors/out-of-the-box-connectors/available-connectors-overview.md#protocol-connectors), where you can make a request to a REST API and use the response in the next steps of your process.
+This guide will walk you through working with a REST Connector task as a first time Camunda 8 SaaS user. The REST Connector is a [protocol Connector](/components/connectors/out-of-the-box-connectors/available-connectors-overview.md#protocol-connectors), where you can make a request to a REST API and use the response in the next steps of your process.
 
 :::note
 New to Connectors? Review our [introduction to Connectors](/components/connectors/introduction.md) to get familiar with their capabilities, and have a closer look at all of the available [out-of-the-box Connectors](/components/connectors/out-of-the-box-connectors/available-connectors-overview.md).
 :::
 
+<details>
+   <summary>Have you signed up for Camunda yet?</summary>
+   <SaasPrereqs/>
+</details>
+
 The concept of a Connector consists of two parts: the business logic is implemented as a job worker, and the user interface during modeling is provided using an element template. In this guide, you will create a REST Connector task in your process, handle the HTTP response, and deploy your process. New to creating a process? Get started by [modeling your first diagram](/guides/model-your-first-process.md).
 
-## Create a REST Connector task
+## Step 1: Create a REST Connector task
 
 To use a **REST Connector** in your process, follow the steps below:
 
@@ -34,18 +41,18 @@ To use a **REST Connector** in your process, follow the steps below:
 
 6. Add a descriptive name using the **General** section in the properties panel. For this guide, we'll use `Make a request`.
 
-## Make your REST Connector executable
+## Step 2: Make your REST Connector executable
 
 ![Connector on Web Modeler canvas with properties panel open](img/connectors-rest-red-properties.png)
 
 To make the **REST Connector** executable, fill out the mandatory **URL** field in the HTTP Endpoint section (highlighted in red) in the properties panel with `https://catfact.ninja/fact` so we can get a random cat fact from the [Cat Fact API](https://catfact.ninja/) for this example.
 
-## Handle your response
+## Step 3: Handle your response
 
 The HTTP response will be available in a temporary local response variable. This variable can be mapped to the process by specifying **Result Variable**.
 In the **Response Mapping** section use `={"body" : body}` as the **Result Expression** so you can see the entire JSON object returned if it's successful.
 
-## Deploy your process
+## Step 4: Deploy your process
 
 To deploy your process, take the following steps:
 
@@ -80,7 +87,7 @@ Don't want to build the process yourself? Click this button to create it from a
       href="https://signup.camunda.com/accounts?utm_source=docs.camunda.io&utm_medium=referral">
       Sign up
    </a>
-</div>
+</div><br />
 
 ## Additional resources and next steps
 

diff --git a/docs/guides/getting-started-orchestrate-human-tasks.md b/docs/guides/getting-started-orchestrate-human-tasks.md
@@ -1,13 +1,13 @@
 ---
 id: orchestrate-human-tasks
 title: Get started with human task orchestration
-sidebar_label: Getting started with human task orchestration
+sidebar_label: Get started with human task orchestration
 description: "Efficiently allocate work through user tasks."
 keywords: [human tasks, orchestration, getting started, user guide]
 ---
 
 <span class="badge badge--beginner">Beginner</span>
-<span class="badge badge--medium">Time estimate: 15 minutes</span>
+<span class="badge badge--medium">Time estimate: 15 minutes</span><br /><br />
 
 import ExpressionInputImg from './img/expression-input-example.png';
 import FormValuesImg from './img/form-values-example.png';
@@ -22,15 +22,36 @@ import FormEditorImg from './img/form-editor.png';
 import NavigationHistoryImg from './img/modeler-navigation-history.png';
 
 import clsx from "clsx";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import SmPrereqs from './react-components/sm-prerequisites.md'
+import SaasPrereqs from './react-components/saas-prerequisites.md'
+import Install from './react-components/install-plain-java.md'
 
 Camunda 8 allows you to orchestrate processes with human tasks of any complexity. Utilizing user tasks, you can create and assign tasks to users. Then, users can perform their work and enter the necessary data to drive the business process.
 
-This guide introduces you to the basics of human task orchestration. You will create a simple process to decide on dinner, and drive the process flow according to that decision. This process is entirely executable in the browser.
-
 :::note
 If you prefer a video-based learning experience or a more complex example, visit [this Camunda Academy course](https://bit.ly/3PJJocB).
 :::
 
+This guide introduces you to the basics of human task orchestration. You will create a simple process to decide on dinner, and drive the process flow according to that decision. This process is entirely executable in the browser.
+
+<Tabs>
+   <TabItem value="sm" label="Self-Managed">
+      <details>
+         <summary>Have you installed Camunda yet?</summary>
+         <SmPrereqs/>
+         <Install/>
+      </details>
+   </TabItem>
+   <TabItem value="saas" label="SaaS" default>
+      <details>
+         <summary>Have you signed up for Camunda yet?</summary>
+         <SaasPrereqs/>
+      </details>
+   </TabItem>
+</Tabs>
+
 Take the following five steps to create and run your first process with a human in the loop:
 
 ### Step 1: Create a new process
@@ -210,7 +231,7 @@ Don't want to build the process yourself? Click this button to create it from a
       href="https://signup.camunda.com/accounts?utm_source=docs.camunda.io&utm_medium=referral">
       Sign up
    </a>
-</div>
+</div><br />
 
 ## Additional resources and next steps
 

diff --git a/docs/guides/getting-started-orchestrate-microservices.md b/docs/guides/getting-started-orchestrate-microservices.md
@@ -1,30 +1,54 @@
 ---
 id: orchestrate-microservices
 title: Get started with microservice orchestration
-sidebar_label: Getting started with microservice orchestration
+sidebar_label: Get started with microservice orchestration
 description: "Orchestrate Microservices along a business process for visibility and resilience."
 keywords: [microservices, orchestration, getting-started]
 ---
 
 <span class="badge badge--beginner">Beginner</span>
-<span class="badge badge--medium">Time estimate: 25 minutes</span>
+<span class="badge badge--medium">Time estimate: 25 minutes</span><br /><br />
 
 import clsx from "clsx";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 import CreateCluster from '../components/react-components/create-cluster.md';
+import SmPrereqs from './react-components/sm-prerequisites.md'
+import SaasPrereqs from './react-components/saas-prerequisites.md'
+import Install from './react-components/install-plain-java.md'
 
 Using Camunda 8, you can orchestrate the microservices necessary to achieve your end-to-end automated business process. Whether you have existing microservices or are looking to build out your microservices, this guide will help you understand how you can start your microservice orchestration journey with Camunda 8.
 
 While this guide uses code snippets in Java, you do not need to be a Java developer to be successful. Additionally, you can orchestrate microservices with Camunda 8 in other programming languages.
 
 ## Prerequisites
 
-- Ensure you have a valid [Camunda 8 account](create-account.md), or sign up if you still need one.
+You must have access to either a local or remote Camunda Self-Managed installation or a SaaS account.
+
+<Tabs>
+   <TabItem value="sm" label="Self-Managed" default>
+      <details>
+         <summary>Have you installed Camunda yet?</summary>
+         <SmPrereqs/>
+         <Install/>
+      </details>
+   </TabItem>
+   <TabItem value="saas" label="SaaS">
+      <details>
+         <summary>Have you signed up for Camunda yet?</summary>
+         <SaasPrereqs/>
+      </details>
+   </TabItem>
+</Tabs>
+
+Additionally, you need the following:
+
 - Java >= 8
 - Maven
 - IDE (IntelliJ, VSCode, or similar)
 - Download and unzip or clone the [repo](https://github.com/camunda/camunda-platform-tutorials), then `cd` into `camunda-platform-tutorials/orchestrate-microservices/worker-java`
 
-### Design your process with BPMN
+## Step 1: Design your process with BPMN
 
 Start by designing your automated process using BPMN. This guide introduces you to the palette and a few BPMN symbols in Web Modeler.
 
@@ -43,11 +67,11 @@ Start by designing your automated process using BPMN. This guide introduces you
 9. Start a new process instance by clicking on the blue **Run** button.
 10. In the top left corner of the screen, click the square-shaped **Camunda components** button. Navigate to Operate to see your process instance with a token waiting at the service task by clicking **View process instances**.
 
-### Create a cluster
+## Step 2: Create a cluster
 
 <CreateCluster/>
 
-### Create credentials for your Zeebe client
+## Step 3: Create credentials for your Zeebe client
 
 To interact with your Camunda 8 cluster, you'll use the Zeebe client. First, you'll need to create credentials.
 
@@ -59,7 +83,7 @@ To interact with your Camunda 8 cluster, you'll use the Zeebe client. First, you
 3. Provide a descriptive name for your client like `microservice-worker`. For this tutorial, the scope can be the default Zeebe scope. Click **Create**.
 4. Your client credentials can be copied or downloaded at this point. You will need your client id and your client secret when creating a worker in the next section, so keep this window open. Once you close or navigate away from this screen, you will not be able to see them again.
 
-### Create a worker for the service task
+## Step 4: Create a worker for the service task
 
 Next, we’ll create a worker for the service task by associating it with the type we specified on the service task in the BPMN diagram.
 
@@ -92,7 +116,7 @@ Don't want to build the process yourself? Click this button to create it from a
       href="https://signup.camunda.com/accounts?utm_source=docs.camunda.io&utm_medium=referral">
       Sign up
    </a>
-</div>
+</div><br />
 
 ## Additional resources and next steps
 

diff --git a/docs/guides/model-your-first-process.md b/docs/guides/model-your-first-process.md
@@ -4,8 +4,15 @@ title: Model your first process
 description: "Use Modeler to design and deploy a process."
 ---
 
+import SaasPrereqs from './react-components/saas-prerequisites.md'
+
 <span class="badge badge--beginner">Beginner</span>
-<span class="badge badge--medium">Time estimate: 15 minutes</span>
+<span class="badge badge--medium">Time estimate: 15 minutes</span><br /><br />
+
+<details>
+   <summary>Have you signed up for Camunda yet?</summary>
+   <SaasPrereqs/>
+</details>
 
 ## Design and deploy a process
 

diff --git a/docs/guides/react-components/install-docker-compose.md b/docs/guides/react-components/install-docker-compose.md
@@ -0,0 +1,11 @@
+---
+---
+
+## Step 1: Install Camunda 8 Self-Managed
+
+If you haven't already, follow [this guide](/self-managed/setup/deploy/local/docker-compose.md) to install Camunda 8 Self-Managed locally via Docker Compose:
+
+1. Use the `docker-compose.yaml` file in [this repository](https://github.com/camunda/camunda-platform).
+2. Clone this repo and run `docker compose up -d` in your terminal to start your environment.
+
+To confirm Camunda 8 Self-Managed is installed, click into Docker Desktop. Here, you will see the `camunda-platform` container. Alternatively, navigate to the different components and log in with the username `demo` and password `demo`. For example, Operate can be accessed at [http://localhost:8081](http://localhost:8081) (as noted under **Port(s)** in the Docker container). Find additional guidance in the repository [README](https://github.com/camunda/camunda-platform?tab=readme-ov-file#using-docker-compose).
diff --git a/docs/guides/react-components/install-plain-java.md b/docs/guides/react-components/install-plain-java.md
@@ -0,0 +1,15 @@
+---
+---
+
+**Starting in 8.6.0-alpha2**, you can install Camunda 8 Self-Managed as an integrated plain Java application.
+
+For this installation, you must have:
+
+- OpenJDK 21+ locally installed
+- Camunda `8.6.0-alpha2` or later
+
+1. Download the [latest release artifact](https://github.com/camunda/camunda/releases), starting with [8.6.0-alpha2](https://github.com/camunda/camunda/releases/tag/8.6.0-alpha2).
+2. Download [Elasticsearch 8.9.2](https://www.elastic.co/downloads/past-releases/elasticsearch-8-9-2).
+3. For non-production cases, disable Elasticsearch's security packages by setting the `xpack.security.*` configuration options to `false` in `ELASTICSEARCH_HOME/config/elasticsearch.yml`.
+4. Start Elasticsearch by running `ELASTICSEARCH_HOME/bin/elasticsearch` (or `ELASTICSEARCH_HOME\bin\elasticsearch.bat` on Windows).
+5. To start Camunda, run `bin/camunda` (or `bin\camunda.bat` on Windows).
diff --git a/docs/guides/react-components/saas-prerequisites.md b/docs/guides/react-components/saas-prerequisites.md
@@ -0,0 +1,22 @@
+---
+---
+
+## Sign Up
+
+Visit [camunda.io/signup](https://signup.camunda.com/accounts?utm_source=docs.camunda.io&utm_medium=referral) to sign up.
+
+### Create an account
+
+Fill out the form and click **Create account**.
+
+When you fill out the form, you'll receive a confirmation email. Click on the link to verify your email address.
+
+## Log in to your Camunda 8 account
+
+Log in with the email address and password you used in the previous form, or use the social login buttons. To access the login site directly, navigate to [camunda.io](https://weblogin.cloud.camunda.io/).
+
+![login](./../img/login.png)
+
+After login, select the square-shaped **Camunda components** icon in the upper-left corner, and select **Console** to view the Console overview page. This is the central place to manage the clusters, diagrams, and forms you want to deploy to Camunda 8.
+
+![overview-home](./../img/home.png)
diff --git a/docs/guides/react-components/sm-prerequisites.md b/docs/guides/react-components/sm-prerequisites.md
@@ -0,0 +1,9 @@
+---
+---
+
+## Prerequisites
+
+Before getting started, ensure you:
+
+- Can access your preferred code editor or IDE.
+- Install [Desktop Modeler](https://camunda.com/download/modeler/).
diff --git a/...ed_docs/version-8.5/guides/help-center.md → docs/reference/help-center.md b/...ed_docs/version-8.5/guides/help-center.md → docs/reference/help-center.md
@@ -3,12 +3,10 @@ id: camunda-help-center
 title: Access the Camunda Help Center
 sidebar_label: Access the Camunda Help Center
 description: "Get recommendations for additional learning, step through the automation project guide, have a closer look at various use cases, access Camunda Academy, share feedback, and more."
-keywords: [getting-started, help-center, help, support]
+keywords: [help-center, help, support]
 ---
 
-<span class="badge badge--beginner">Beginner</span>
 <span class="badge badge--cloud">Camunda 8 SaaS only</span>
-<span class="badge badge--medium">Time estimate: 10 minutes</span>
 
 Camunda 8 SaaS offers a Help Center to all users, where you can access additional documentation, step through various use cases in Camunda, share your feedback, and more.
 

diff --git a/docs/guides/img/automation-project-guide.png → ...eference/img/automation-project-guide.png b/docs/guides/img/automation-project-guide.png → ...eference/img/automation-project-guide.png
diff --git a/docs/guides/img/open-help-center.png → docs/reference/img/open-help-center.png b/docs/guides/img/open-help-center.png → docs/reference/img/open-help-center.png
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -247,6 +247,10 @@ module.exports = {
               label: "How to use our docs",
               to: "meta",
             },
+            {
+              label: "Camunda Help Center",
+              to: "docs/reference/camunda-help-center",
+            },
             {
               label: "Try free",
               href: "https://signup.camunda.com/accounts?utm_source=docs.camunda.io&utm_medium=referral&utm_content=footer",