Skip to content

Commit 06dc540

Browse files
NicuschgifthubNicuschgifthub
authored
Merge pull request #163 from code0-tech/feat/tutorial-quick-first-flow
Feat/tutorial quick first flow
2 parents 6e9a9b8 + 31ccb28 commit 06dc540

40 files changed

Lines changed: 405 additions & 7 deletions

‎content/general/meta.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"introduction",
66
"install",
77
"changelog",
8-
"tutorials",
8+
"[IconBook2][Tutorials](/general/tutorials/)",
99
"troubleshooting"
1010
]
1111
}

‎content/general/tutorials.md‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎content/general/tutorials/index.mdx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: Tutorials
3+
icon: IconBook2
4+
---
5+
6+
import {Card, Cards} from "fumadocs-ui/components/card";
7+
8+
<Cards>
9+
<Card title="Quick - How to login" href="./quick_how-to-login"/>
10+
<Card title="Quick - How to create first personal project" href="./quick_first_personal_project"/>
11+
<Card title="Quick - How to set up project" href="./quick_setting_up_a_project"/>
12+
<Card title="Quick - How to create first flow" href="./quick_creating_a_flow"/>
13+
</Cards>

‎content/general/tutorials/meta.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"title": "Tutorials",
3+
"root": true,
4+
"pages": [
5+
"quick_how-to-login",
6+
"quick_first_personal_project",
7+
"quick_setting_up_a_project",
8+
"quick_creating_a_flow"
9+
]
10+
}

‎content/general/tutorials/quick_creating_a_flow.mdx‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
---
2+
title: Quick - Creating your first flow
3+
icon: IconBook2
4+
---
5+
6+
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
7+
import { Callout } from 'fumadocs-ui/components/callout';
8+
import { Step, Steps } from 'fumadocs-ui/components/steps';
9+
import { Cards, Card } from 'fumadocs-ui/components/card';
10+
11+
We will build a simple flow that listens for a `GET` request and immediately answers back with a classic `pong`.
12+
13+
---
14+
15+
<Steps>
16+
<Step>
17+
18+
## Kickstart a new flow
19+
20+
Let's begin by creating a fresh canvas. Click the create button to get started.
21+
22+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_01_clickOnCreateFlow.png)
23+
24+
Set the trigger type to **REST Endpoint**, give your flow a memorable name, and hit create to open up your new workspace.
25+
26+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_02_selectTriggerAndCreate.png)
27+
28+
</Step>
29+
<Step>
30+
31+
## Access the node settings
32+
33+
Locate and open your newly created flow from the explorer list.
34+
35+
![CodeZero](../../../public/tutorials/quick-first-flow/cZ_03_selectTheNewFlow.png)
36+
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+
103+
</Step>
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: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: Quick - Creating a personal project
3+
icon: IconBook2
4+
---
5+
6+
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
7+
import { Callout } from 'fumadocs-ui/components/callout';
8+
import { Step, Steps } from 'fumadocs-ui/components/steps';
9+
import { Cards, Card } from 'fumadocs-ui/components/card';
10+
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+
16+
<Steps>
17+
<Step>
18+
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.
22+
23+
![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_01_returnToHomePage.png)
24+
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+
32+
![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_02_clickOnNewProject.png)
33+
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.
40+
41+
![CodeZero](../../../public/tutorials/quick-first-personal-project/cZ_03_enterNameAndDescription.png)
42+
43+
</Step>
44+
<Step>
45+
46+
## Explore your new workspace
47+
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)
51+
52+
</Step>
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_how-to-login.mdx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
title: Quick - How to login
3+
icon: IconBook2
4+
---
5+
6+
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
7+
import { Callout } from 'fumadocs-ui/components/callout';
8+
import { Step, Steps } from 'fumadocs-ui/components/steps';
9+
import { Cards, Card } from 'fumadocs-ui/components/card';
10+
11+
Welcome to the **Quick Tutorials**! In this guide,
12+
we’ll walk through all steps from your current installtion to your first flow.
13+
14+
<Callout type="info">
15+
**Prerequisite:** Ensure you have completed the steps from the [Installation Process](/general/install) before proceeding.
16+
</Callout>
17+
18+
<Steps>
19+
<Step>
20+
21+
To access the IDE, you need to visit the URL defined in your `.env` file. Open your environment configuration to verify the `HOSTNAME` and `PORT`:
22+
23+
```bash title=".env"
24+
# IDE config
25+
# [!code highlight:3]
26+
HOSTNAME=localhost
27+
HTTP_PORT=80
28+
HTTPS_PORT=443
29+
SSL_ENABLED=false
30+
# must be located in ./certs, defaults to "<hostname>.pem"
31+
SSL_CERT_FILE=
32+
# must be located in ./certs, defaults to "<hostname>.key"
33+
SSL_KEY_FILE=
34+
35+
INITIAL_ROOT_PASSWORD=tutorials
36+
INITIAL_ROOT_MAIL=tutorials@code0.tech
37+
# can be used to create a global runtime with given token
38+
INITIAL_RUNTIME_TOKEN=runtime
39+
...
40+
```
41+
42+
<Tabs items={['Local Access', 'Remote Access']}>
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>
74+
</Tabs>
75+
76+
Once you have opened the correct URL in your browser, the login screen will appear. Enter the credentials you defined in your .env file.
77+
78+
```bash title=".env"
79+
# IDE config
80+
HOSTNAME=localhost
81+
HTTP_PORT=80
82+
HTTPS_PORT=443
83+
SSL_ENABLED=false
84+
# must be located in ./certs, defaults to "<hostname>.pem"
85+
SSL_CERT_FILE=
86+
# must be located in ./certs, defaults to "<hostname>.key"
87+
SSL_KEY_FILE=
88+
# [!code highlight:2]
89+
INITIAL_ROOT_PASSWORD=tutorials
90+
INITIAL_ROOT_MAIL=tutorials@code0.tech
91+
# can be used to create a global runtime with given token
92+
INITIAL_RUNTIME_TOKEN=runtime
93+
...
94+
```
95+
96+
Enter the `INITIAL_ROOT_MAIL` and `INITIAL_ROOT_PASSWORD` into their corresponding login fields, then click **Login**.
97+
98+
![CodeZero](../../../public/tutorials/quick-how-to-login/cZ_01_loginPageEnterNameAndPassword.png)
99+
</Step>
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)