Skip to content

Commit f5e937f

Browse files
authored
Merge pull request #44 from anuruddhal/main
Update guides to match new UX
2 parents cd6261a + af1219d commit f5e937f

31 files changed

+75
-94
lines changed
305 KB
Loading
-207 KB
Loading
54.4 KB
Loading
10.4 KB
Loading
197 KB
Loading
Loading
Loading
Binary file not shown.
Loading
-1.33 MB
Binary file not shown.
-80.7 KB
Binary file not shown.
Loading
9.01 KB
Loading
160 KB
Loading
Loading
Binary file not shown.
Binary file not shown.
Loading
Loading
Binary file not shown.
Loading
Loading
Binary file not shown.
Loading
Loading
Binary file not shown.

en/docs/get-started/key-concepts.md

+7
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,10 @@ Types are used to define the structure of data in Ballerina Integrator. They are
2323
## Configurations
2424
Configurations are used to define the settings and parameters of the integration. They are used to configure the behavior of the integration and its components.
2525
Configurations can be used to set up connections, define global variables, and configure other aspects of the integration in different environments.
26+
27+
## Source View
28+
The source view is a text-based representation of the integration that can be used to view and edit the code directly. It provides a way to see the underlying code that is generated by the graphical interface.
29+
Switching to the source view allows you to view and edit the code directly, providing more control and flexibility over the integration.
30+
Clicking on the `</>` button in the top right corner of the design view will switch to the source view.
31+
32+
<a href="{{base_path}}/assets/img/key-concepts/source-view.gif"><img src="{{base_path}}/assets/img/key-concepts/source-view.gif" alt="Source View" width="70%"></a>

en/docs/get-started/quick-start-guide.md

+26-29
Original file line numberDiff line numberDiff line change
@@ -6,66 +6,54 @@ In this guide, you'll build a simple integration using the Ballerina Integrator
66
### Step 1: Install Visual Studio Code
77
Download and install the [Visual Studio Code](https://code.visualstudio.com/download).
88

9-
### Step 2: Create a profile in Visual Studio Code
10-
1. Open the Visual Studio Code.
11-
2. Navigate to **Settings**->**Profiles**.
12-
3. Click on **New Profile** and select **Create Profile**.
13-
4. Enter the profile name as `Ballerina Integrator` and click **Create**.
14-
5. Click on the ✔️ sign in front of the `Ballerina Integrator` profile to select the profile.
15-
<a href="{{base_path}}/assets/img/get-started/create-profile.gif"><img src="{{base_path}}/assets/img/get-started/create-profile.gif" alt="Create Profile" width="70%"></a>
16-
17-
???+ info "VS Code Profile"
18-
To learn more about profiles, see [Visual Studio Code Profiles](https://code.visualstudio.com/docs/editor/profiles).
19-
20-
### Step 3: Install the Ballerina Integrator extension
9+
### Step 2: Install the WSO2 Ballerina Integrator extension
2110
1. Go to the Extensions view by clicking on the extension icon on the sidebar or pressing `Ctrl + Shift + X` on Windows and Linux, or `shift + ⌘ + X` on a Mac.
2211
2. Search for `Ballerina Integrator` in the Extensions view search box.
2312
3. Click on the **`Install`** button to install the `Ballerina Integrator` extension.
2413
<a href="{{base_path}}/assets/img/get-started/bi-extension.png"><img src="{{base_path}}/assets/img/get-started/bi-extension.png" alt="Ballerina Integrator Extension" width="70%"></a>
2514
4. This will install the **Ballerina Integrator** and **Ballerina** extensions on VS Code.
2615

27-
### Step 4: Set up Ballerina Integrator for the first time
16+
### Step 3: Set up Ballerina Integrator for the first time
2817
1. Click on the Ballerina Integrator icon on the sidebar.
2918
<a href="{{base_path}}/assets/img/get-started/bi-icon.png"><img src="{{base_path}}/assets/img/get-started/bi-icon.png" alt="Ballerina Integrator Icon" width="70%"></a>
3019
2. Click on the **`Set Up Ballerina Integrator`** button.
3120
3. The setup wizard will install and configure the [Ballerina](https://ballerina.io/) distribution required for Ballerina Integrator.
32-
4. Click on the **`Restart VS Code`** button to complete the setup.
21+
4. Click on the **`Restart Now`** button to complete the setup.
3322
<a href="{{base_path}}/assets/img/get-started/bi-setup.gif"><img src="{{base_path}}/assets/img/get-started/bi-setup.gif" alt="BI Setup" width="70%"></a>
3423

3524
???+ info "Update Ballerina Integrator's Ballerina Distribution"
3625
The setup wizard will install the Ballerina distribution required for Ballerina Integrator in to `<USER_HOME>/.ballerina/ballerina-home` directory.
3726
Press `Ctrl + Shift + P` on Windows and Linux, or `shift + ⌘ + P` on a Mac and type `Ballerina: Update Ballerina Integrator` to update the installed Ballerina distribution.
3827

39-
### Step 5: Create a new integration project
28+
### Step 4: Create a new integration project
4029
1. Click on the Ballerina Integrator icon on the sidebar.
4130
2. Click on the **`Create Integration`** button.
4231
3. Enter the Integration Name as `HelloWorld`.
4332
4. Select Project Directory by clicking on the **`Select Location`** button.
4433
5. Click on the **`Create Integration`** button to create the integration project.
4534
<a href="{{base_path}}/assets/img/get-started/create-integration.gif"><img src="{{base_path}}/assets/img/get-started/create-integration.gif" alt="Create Integration" width="70%"></a>
4635

47-
### Step 6: Create an integration service
36+
### Step 5: Create an integration service
4837
???+ tip "Generate with AI"
4938

5039
The integration service can also be generated using the AI-assistant. Click on the **`Generate with AI`** button and enter the following prompt, then press **`Add to Integration`** to generate the integration service.
5140

5241
```create a http service that has base path as /hello, and 9090 as the port. Add GET resource on /greeting that invokes https://apis.wso2.com/zvdz/mi-qsg/v1.0 endpoint and forward the response to caller.```
5342

54-
1. In the design view, click on the **`Add Construct`** button.
55-
2. Select **`Service`** from the menu.
56-
3. Select **`HTTP Service`** from the service type.
57-
4. Select the **`Create and use the default HTTP listener`** option from the **`Listener`** dropdown.
58-
5. Select **`Design from Scratch`** option as the **`The contract of the service`**.
59-
6. Specify the **`Service base path`** as `/hello`.
60-
7. Click on the **`Create`** button to create the new service with the specified configurations.
43+
1. In the design view, click on the **`Add Artifact`** button.
44+
2. Select **`HTTP Service`** under the **`Integration as API`** category.
45+
3. Select the **`Create and use the default HTTP listener`** option from the **`Listener`** dropdown.
46+
4. Select **`Design from Scratch`** option as the **`The contract of the service`**.
47+
5. Specify the **`Service base path`** as `/hello`.
48+
6. Click on the **`Create`** button to create the new service with the specified configurations.
6149
<a href="{{base_path}}/assets/img/get-started/create-service.gif"><img src="{{base_path}}/assets/img/get-started/create-service.gif" alt="Create Service" width="70%"></a>
6250

63-
### Step 7: Design the integration
51+
### Step 6: Design the integration
6452
1. The generated service will have a default resource named `greeting` with the **`GET`** method.
6553
2. Click on the `greeting` resource to view the resource details. Let's modify the resource to invoke the [`HelloWorld`](https://apis.wso2.com/zvdz/mi-qsg/v1.0) API endpoint.
6654
3. Hover to the arrow after start and click the ➕ button to add a new action to the resource.
6755
4. Select **`Add Connection`** from the node panel.
68-
5. Search for `HTTP` in the search bar and select **`HTTP`** as the connection type.
56+
5. Search for `HTTP` in the search bar and select **`HTTP Client`** as the connection type.
6957
6. Change the variable name to `externalEP`.
7058
7. Add the URL `"https://apis.wso2.com"` to the connection URL field and click **`Save`**.
7159
<a href="{{base_path}}/assets/img/get-started/create-connection.gif"><img src="{{base_path}}/assets/img/get-started/create-connection.gif" alt="Create New Connection" width="70%"></a>
@@ -82,11 +70,20 @@ Download and install the [Visual Studio Code](https://code.visualstudio.com/down
8270
| **`Path`** | `"/zvdz/mi-qsg/v1.0"` |
8371

8472
<a href="{{base_path}}/assets/img/get-started/add-action.gif"><img src="{{base_path}}/assets/img/get-started/add-action.gif" alt="Add Action" width="70%"></a>
85-
10. Click on the ➕ button again and select **`Return`** from the node panel.
86-
11. Select the `helloWorldResponse` variable as the **`Expression`** from the dropdown and click **`Save`**. This step will return the response from the `HelloWorld` API endpoint.
73+
10. Click on the **`Return`** node from the design view.
74+
11. Select the `epResponse` variable as the **`Expression`** from the dropdown and click **`Save`**. This step will return the response from the `HelloWorld` API endpoint.
8775
<a href="{{base_path}}/assets/img/get-started/add-return.gif"><img src="{{base_path}}/assets/img/get-started/add-return.gif" alt="Add Return" width="70%"></a>
8876

89-
### Step 8: Run the integration
77+
### Step 7: Run the integration
9078
1. Click on the **`Run`** button at top right corner to run the integration.
9179
2. The integration will be compiled and started in the embedded Ballerina runtime.
92-
3. Once the integration is started, you can access the service by navigating to `http://localhost:9090/hello/greeting` in your web browser.
80+
3. Once the integration is started, click on the **`Test`** button to open the embedded HTTP client.
81+
4. Click on the **`Send`** button to invoke the `greeting` resource.
82+
<a href="{{base_path}}/assets/img/get-started/run-integration.gif"><img src="{{base_path}}/assets/img/get-started/run-integration.gif" alt="Run Integration" width="70%"></a>
83+
5. Additionally, you can test the integration using REST clients like [Postman](https://www.postman.com/) or [curl](https://curl.se/).
84+
```shell
85+
curl http://localhost:9090/hello/greeting
86+
{"message":"Hello World!!!"}%
87+
```
88+
6. Click on the ⏹️ button or press `Shift + F5` shortcut to stop the integration.
89+
<a href="{{base_path}}/assets/img/get-started/stop.png"><img src="{{base_path}}/assets/img/get-started/stop.png" alt="Stop Integration" width="70%"></a>

en/docs/index.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
</p>
1212
</div>
1313
</div>
14-
<div style="text-align:right">
15-
<a href="{{base_path}}/assets/img/introduction/bi.png"><img src="{{base_path}}/assets/img/introduction/bi.png" alt="Ballerina Integrator" width="95%"></a>
14+
<div style="text-align:center">
15+
<a href="{{base_path}}/assets/img/introduction/bi.png"><img src="{{base_path}}/assets/img/introduction/bi.png" alt="Ballerina Integrator" width="55%"></a>
1616
</div>
1717
</div>
1818
</div>
@@ -21,7 +21,7 @@
2121
<div class="section02">
2222
<div class="rightContent">
2323
<div class="about-home">
24-
<div style="text-align:left">
24+
<div style="text-align:center">
2525
<a href="{{base_path}}/assets/img/introduction/low-code.gif"><img src="{{base_path}}/assets/img/introduction/low-code.gif" alt="low-code" width="90%" style="padding-top: 60px" ></a>
2626
</div>
2727
<div>
@@ -34,7 +34,7 @@
3434
<li><b>Pre-built connectors:</b> Ballerina Integrator offers connectors for easy integration with various systems and services.</li>
3535
<li><b>Reuse components:</b> Create and share reusable components across integrations, saving time and effort.</li>
3636
<li><b>Automate testing:</b> Automated testing helps identify and fix issues early.</li>
37-
<li><b>AI-assisted development:</b> Ballerina Integrator’s AI provides smart suggestions to boost coding efficiency and accuracy.</li>
37+
<li><b>Low-code and pro-code support:</b> Ballerina Integrator allows seamless switching between low-code and pro-code, enabling visual design with optional custom coding. </li>
3838
</ul>
3939
</div>
4040
</div>
@@ -57,7 +57,7 @@
5757
<li><b>Smart refactoring and code restructuring:</b> Ballerina Integrator’s AI suggests refactoring options, enabling a cleaner, more maintainable codebase.</li>
5858
</ul>
5959
</div>
60-
<div style="text-align:right">
60+
<div style="text-align:center">
6161
<a href="{{base_path}}/assets/img/introduction/ai.gif"><img src="{{base_path}}/assets/img/introduction/ai.gif" alt="AI" width="90%" style="padding-top: 60px; padding-right: 50px" ></a>
6262
</div>
6363
</div>

en/docs/learn/data-mapping.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ service / on new http:Listener(8290) {
156156
```
157157

158158
### Step 6: Run the integration
159-
1. Click on the **`Run`** on the run button in the top right corner to run the integration.
159+
1. Click on the **`Run`** button in the top-right corner to run the integration.
160160
2. The integration will start and the service will be available at `http://localhost:8290/transform`.
161161
3. The service can be tested using a tool like [Postman](https://www.postman.com/) or [curl](https://curl.se/) by sending a POST request with a JSON payload to the service endpoint.
162162
```curl

0 commit comments

Comments
 (0)