Skip to content

Commit 8e81694

Browse files
Nicuschgifthubnicosammito
Nicuschgifthub
authored and
nicosammito
committed
updated tutorials
1 parent b79fe3b commit 8e81694

22 files changed

Lines changed: 226 additions & 61 deletions

‎content/general/tutorials/index.mdx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,13 @@ icon: IconBook2
66
import {Card, Cards} from "fumadocs-ui/components/card";
77
import {IconHome} from "@tabler/icons-react";
88

9-
## Under construction
10-
119
<Cards>
12-
<Card icon={<IconHome />} title="Test" href={"test"}>
13-
test
14-
</Card>
10+
<Card title="Quick - How to login" href={"/general/tutorials/quick_how-to-login/"}>
11+
</Card>
12+
<Card title="Quick - How to create first personal project " href={"/general/tutorials/quick_first_personal_project"}>
13+
</Card>
14+
<Card title="Quick - How to set up project " href={"/general/tutorials/quick_setting_up_a_project"}>
15+
</Card>
16+
<Card title="Quick - How to create first flow" href={"/general/tutorials/quick_creating_a_flow"}>
17+
</Card>
1518
</Cards>

‎content/general/tutorials/meta.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"title": "Tutorials",
33
"root": true,
44
"pages": [
5-
"quick_login_ide",
5+
"quick_how_to_login",
66
"quick_first_personal_project",
77
"quick_setting_up_a_project",
88
"quick_creating_a_flow"

‎content/general/tutorials/quick_creating_a_flow.mdx‎

Lines changed: 102 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Quick - Creating a Flow
2+
title: Quick - Creating your first flow
33
icon: IconBook2
44
---
55

@@ -8,24 +8,120 @@ import { Callout } from 'fumadocs-ui/components/callout';
88
import { Step, Steps } from 'fumadocs-ui/components/steps';
99
import { Cards, Card } from 'fumadocs-ui/components/card';
1010

11-
The flow we are creating will simply reply with `pong`, when requesting the url path using the `GET` Method
11+
We will build a simple flow that listens for a `GET` request and immediately answers back with a classic `pong`.
12+
13+
---
1214

1315
<Steps>
1416
<Step>
15-
Create a new Flow
17+
18+
## Kickstart a new flow
19+
20+
Let's begin by creating a fresh canvas. Click the create button to get started.
1621

1722
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_01_clickOnCreateFlow.png)
1823

19-
Select the Trigger to be an Rest-Endpoint, then add a name and create your Flow
24+
Set the trigger type to **REST Endpoint**, give your flow a memorable name, and hit create to open up your new workspace.
2025

2126
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_02_selectTriggerAndCreate.png)
2227

2328
</Step>
2429
<Step>
2530

26-
Select your new Flow
31+
## Access the node settings
32+
33+
Locate and open your newly created flow from the explorer list.
2734

2835
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_03_selectTheNewFlow.png)
2936

37+
Click on the **Starting Node** to highlight it. Then, take a look at the right-hand side of your screen and open up the **Node Settings** panel. This is where the magic configuration happens.
38+
39+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_04_selectStartNodeAndOpenNodeSettings.png)
40+
41+
Form here we can start setting up our starting node.
42+
43+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_05_sidePannelOpen.png)
44+
45+
</Step>
46+
<Step>
47+
48+
### Configure your endpoint & logic
49+
50+
First, let's define the data type. Click on the variable **(x)** icon and select `text/plain` from the list.
51+
52+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_06_setContentTypeType.png)
53+
54+
Next, let's give your flow an address. Type a clean path like `/ping` into the URL endpoint field.
55+
56+
<Callout type="info">
57+
💡 **What is a URL endpoint?** This acts as the unique web path for your flow. When combined with your specific project slug, it forms the full web address you will use to trigger this logic.
58+
</Callout>
59+
60+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_07_setUrlEndpoint.png)
61+
62+
Choose the `GET` method from the dropdown menu. We are using `GET` for this project so you can easily test and preview the results right inside your favorite web browser.
63+
64+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_08_setHttpRequestMethod.png)
65+
66+
Set the incoming input schema to `Data Value` to keep the format simple and clean.
67+
68+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_09_setInputSchemaToDataValue.png)
69+
70+
</Step>
71+
<Step>
72+
73+
#### Add a responde node
74+
75+
Now, let's add some action! Open up the **Node Menu** to browse available blocks.
76+
77+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_10_openNodeMenu.png)
78+
79+
Type `Respond` into the search bar and select the corresponding node to add it to your workflow canvas.
80+
81+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_11_searchAndSelectRespondNode.png)
82+
83+
Click on the newly placed **Respond** node to configure.
84+
85+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_12_selectYourRespondNode.png)
86+
87+
Let's tell the client everything went smoothly. Set the **Status Code** to `200` (the standard HTTP code for "OK").
88+
89+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_13_setStatusCode200.png)
90+
91+
Just like before, use the **(x)** variable icon to set the response content type to `text/plain`.
92+
93+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_14_setRespondContentType.png)
94+
95+
Type the word `pong` into the content field. This is the exact text payload that will be sent back to the user.
96+
97+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_15_enterContentToReturn.png)
98+
99+
Don't lose your progress! Click the **Save** button in the toolbar.
100+
101+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_16_clickOnSave.png)
102+
30103
</Step>
31-
</Steps>
104+
<Step>
105+
106+
#### Try out your flow
107+
108+
Time to test it out! Click on the **Play** button and copy the resulting HTTP URL to your clipboard.
109+
110+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_17_copyHttpUrl.png)
111+
112+
Finally, paste the copied link into a new browser tab.
113+
If you are developing locally, feel free to adjust the IP address or host if needed.
114+
Hit enter, and watch your flow instantly reply with `pong`!
115+
116+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_18_enterUrlAndSeeRespond.png)
117+
118+
</Step>
119+
</Steps>
120+
121+
---
122+
123+
### What are my next steps?
124+
125+
Congratulations on deploying your very first endpoint!
126+
Now that you know how to receive a request and send a basic response,
127+
you can try passing dynamic data variables or adding conditional logic nodes to make your flow even smarter.

‎content/general/tutorials/quick_first_personal_project.mdx‎

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Quick - Personal Project
2+
title: Quick - Creating a personal project
33
icon: IconBook2
44
---
55

@@ -8,24 +8,53 @@ import { Callout } from 'fumadocs-ui/components/callout';
88
import { Step, Steps } from 'fumadocs-ui/components/steps';
99
import { Cards, Card } from 'fumadocs-ui/components/card';
1010

11+
Let's walk through setting up a dedicated workspace for your private automations.
12+
Creating a personal project provides you with a sandbox environment to build, test, and run your individual flows securely.
13+
14+
---
15+
1116
<Steps>
1217
<Step>
1318

14-
For creating a personal project navigate back to your home screen by clicking on `Home`
19+
## Return to the homepage
20+
21+
To begin creating your personal project, navigate back to your main dashboard screen by clicking on the **Home** button in the navigation bar.
1522

1623
![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_01_returnToHomePage.png)
1724

18-
From there click on `Create` under `Personal projects`
25+
</Step>
26+
<Step>
27+
28+
## Initialize the project creation
29+
30+
Once you are on the homepage, locate the **Personal projects** section and click on the **Create** button to open the project configuration wizard.
31+
1932
![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_02_clickOnNewProject.png)
2033

21-
Enter a `Name` and `Description` then click `Create project`
34+
</Step>
35+
<Step>
36+
37+
## Enter your project details
38+
39+
Provide a clear **Name** and a helpful **Description** for your workspace so you can easily identify its purpose later. Once filled out, click **Create project** to finalize the setup.
2240

2341
![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_03_enterNameAndDescription.png)
2442

25-
After that you have created a Personal Project
43+
</Step>
44+
<Step>
2645

27-
![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_04_createYourNewProject.png)
46+
## Explore your new workspace
2847

48+
Congratulations! Your personal project has been successfully initialized. You are now looking at your private project dashboard, ready to configure runtimes or deploy your very first flow. 🎉
49+
50+
![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_04_createYourNewProject.png)
2951

3052
</Step>
31-
</Steps>
53+
</Steps>
54+
55+
---
56+
57+
### What are my next steps?
58+
59+
Now that your private sandbox is ready, you need to connect an runtime to run your automation logic.
60+
Head over to our **Setting up a project** guide to attach your runtime environment and customize your routing slug.

content/general/tutorials/quick_login_ide.mdx renamed to content/general/tutorials/quick_how-to-login.mdx

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Quick - IDE Login
2+
title: Quick - How to login
33
icon: IconBook2
44
---
55

@@ -8,7 +8,8 @@ import { Callout } from 'fumadocs-ui/components/callout';
88
import { Step, Steps } from 'fumadocs-ui/components/steps';
99
import { Cards, Card } from 'fumadocs-ui/components/card';
1010

11-
Welcome to the **Quick Tutorials**! In this guide, we’ll walk through all steps from your current installtion to your first flow.
11+
Welcome to the **Quick Tutorials**! In this guide,
12+
we’ll walk through all steps from your current installtion to your first flow.
1213

1314
<Callout type="info">
1415
**Prerequisite:** Ensure you have completed the steps from the [Installation Process](/general/install) before proceeding.
@@ -39,32 +40,37 @@ INITIAL_RUNTIME_TOKEN=runtime
3940
```
4041

4142
<Tabs items={['Local Access', 'Remote Access']}>
42-
<Tab value="Local Access">
43-
### Local Machine
44-
If you are running the ide in docker on your current computer, use the loopback address.
45-
46-
```text
47-
http://localhost
48-
```
49-
50-
<Callout type="info">
51-
This only works if the browser and the docker container are on the same device.
52-
</Callout>
53-
</Tab>
54-
55-
<Tab value="Remote Access">
56-
### Remote Server
57-
If you are accessing a server on your local network, use its IP address.
58-
59-
```text
60-
http://192.168.2.105
61-
```
62-
63-
**Instructions:**
64-
1. Find your server IP (PS: On linux headless type `ip addr` copy that address).
65-
2. Replace `192.168.2.105` with your actual IP.
66-
3. Ensure port `80` is open in your firewall settings.
67-
</Tab>
43+
<Tab value="Local Access">
44+
45+
## Local Machine
46+
47+
If you are running the ide in docker on your current computer, use the loopback address.
48+
49+
```text
50+
http://localhost
51+
```
52+
53+
<Callout type="info">
54+
This only works if the browser and the docker container are on the same device.
55+
</Callout>
56+
</Tab>
57+
58+
<Tab value="Remote Access">
59+
60+
## Remote Server
61+
62+
If you are accessing a server on your local network, use its IP address.
63+
64+
```text
65+
http://192.168.2.105
66+
```
67+
68+
**Instructions:**
69+
70+
1. Find your server IP (PS: On linux headless type `ip addr` copy that address).
71+
2. Replace `192.168.2.105` with your actual IP.
72+
3. Ensure port `80` is open in your firewall settings.
73+
</Tab>
6874
</Tabs>
6975

7076
Once you have opened the correct URL in your browser, the login screen will appear. Enter the credentials you defined in your .env file.
@@ -89,6 +95,14 @@ INITIAL_RUNTIME_TOKEN=runtime
8995

9096
Enter the `INITIAL_ROOT_MAIL` and `INITIAL_ROOT_PASSWORD` into their corresponding login fields, then click **Login**.
9197

92-
![CodeZero](../../../public/tutorials/quick-first-login/cZ_01_loginPageEnterNameAndPassword.png)
98+
![CodeZero](../../../public/tutorials/quick-how-to-login/cZ_01_loginPageEnterNameAndPassword.png)
9399
</Step>
94-
</Steps>
100+
</Steps>
101+
102+
---
103+
104+
### What are my next steps?
105+
106+
Now that you have successfully logged in as the root administrator,
107+
your next step is to create a home for your automation experiments.
108+
Head over to our Creating a Personal Project tutorial to get your first sandbox workspace ready!

0 commit comments

Comments
 (0)