You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/apps/7_app_e-commerce.md
+23-11Lines changed: 23 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
# E-commerce CRM app
1
+
# Example: E-commerce CRM app
2
2
3
3
We will now use the Windmill app builder to build a simple E-commerce backoffice app. It is a simple CRM app that allows you to manage your products, customers and orders of a e-commerce store.
4
4
@@ -11,20 +11,28 @@ We will now use the Windmill app builder to build a simple E-commerce backoffice
11
11
src="/videos/app-ecomm-demo.mp4"
12
12
/>
13
13
14
+
<br/>
15
+
14
16
It showcases a variety of features that are available in the Windmill app builder, such as:
-[Runnables](/docs/apps/app-runnable/): scripts or flows that are executed on demand.
19
+
-[Components](/docs/apps/app_component_library/): pre-built, reusable building blocks that encapsulate specific functionalities or design elements.
20
+
21
+
:::tip
22
+
23
+
This app is available on the [Hub](https://hub.windmill.dev/apps/14/) and can be used on our [Demo workspace](https://app.windmill.dev/user/login) with the proper Supabase integration.
24
+
25
+
:::
18
26
19
27
## Features
20
28
21
-
We use Supabase as a backend for this app. It is a great alternative to Firebase and it is free to use. It is a great way to get started with building your app. You can read more about Supabase [here](https://supabase.io/). Windmill has a [Supabase integration](/docs/integrations/supabase/) on the HUB that allows you to easily connect your app to Supabase, and integrate it with your app.
29
+
We use [Supabase](https://supabase.com/) as a backend for this app. It is a great alternative to Firebase and it is free to use. It is a great way to get started with building your app. You can read more about Supabase [here](https://supabase.com/docs). Windmill has a [Supabase integration](/docs/integrations/supabase/) on the [Hub](https://hub.windmill.dev/) that allows you to easily connect your app to Supabase, and integrate it with your app.
22
30
23
31
We will use the following scripts from the Hub:
24
32
25
-
-[Fetch data from Supabase](https://hub.windmill.dev/scripts/supabase/1512/fetch-data-supabase)
26
-
-[Create a new record in Supabase](https://hub.windmill.dev/scripts/supabase/1513/insert-data-supabase)
27
-
-[Update a record in Supabase](https://hub.windmill.dev/scripts/supabase/1514/update-data-supabase)
33
+
-[Fetch data from Supabase](https://hub.windmill.dev/scripts/supabase/1512/fetch-data-supabase).
34
+
-[Create a new record in Supabase](https://hub.windmill.dev/scripts/supabase/1513/insert-data-supabase).
35
+
-[Update a record in Supabase](https://hub.windmill.dev/scripts/supabase/1514/update-data-supabase).
28
36
29
37
We will structure the app as follows:
30
38
@@ -53,7 +61,7 @@ We will structure the app as follows:
53
61
54
62
### Products Tab
55
63
56
-
We will split the product view into two parts, with the vertical split. The left part will be a list of products, and the right part will be a form to edit the currently selected product.
64
+
We will split the product view into two parts, with the [vertical split](../apps/4_app_component_library.md#vertical-split-panes). The left part will be a list of products, and the right part will be a form to edit the currently selected product.
@@ -75,11 +83,11 @@ A product has the folowing fields:
75
83
-**price** - the price of the product
76
84
-**quantity** - the quantity of the product
77
85
78
-
First we need to configure the data source for the Table component. We will pick the "Fetch data (supabase)" script, available in the hub.
86
+
First we need to configure the data source for the Table component. We will pick the [Fetch data (supabase)](https://hub.windmill.dev/scripts/supabase/1512/fetch-data-supabase) script, available in the Hub.
79
87
80
88
This script has multilpe input, but we only need to specify the table name and the auth token.
81
89
82
-
Normally the component has now thrown an error: The Table component is expecting an array but got an object. This is because the script returns an object with the data in the `data` field. We can use a transformer to fix this.
90
+
Normally the component has now thrown an error: The Table component is expecting an array but got an object. This is because the script returns an object with the data in the `data` field. We can use a **transformer** to fix this.
83
91
84
92
```js
85
93
returnresult.data;
@@ -108,6 +116,8 @@ Now we can add the form to the right side of the split. We will use Text and inp
108
116
src="/videos/app-builder-ecomm-step2.mp4"
109
117
/>
110
118
119
+
<br/>
120
+
111
121
One powerful feature of Windmill is the ability to connect an output of one component to the input of another component. This allows us to connect the default value of an input to a value of the selected row of the table.
112
122
113
123
Now we need to add a button that will save the changes to the product. For the sake of demonstration, we will write our own script to update the product.
@@ -162,6 +172,8 @@ but we will use a different transformer to remove the fields that we don't need.
162
172
src="/videos/app-builder-ecomm-step4.mp4"
163
173
/>
164
174
175
+
<br/>
176
+
165
177
Like the products, we need to add a transformer to the Table component to remove the fields that we don't need.
166
178
167
179
```js
@@ -316,7 +328,7 @@ export async function main(users: any[]) {
316
328
317
329
#### Product selection
318
330
319
-
We will use a table to display the list of products. This is the same list of products that we used in the products tab. But we need to add a table action to the products table to add the selected product to the cart
331
+
We will use a table to display the list of products. This is the same list of products that we used in the products tab. But we need to add a table action to the products table to add the selected product to the cart.
320
332
321
333
We can now use the concept of frontent script. Frontend scripts are scripts that are executed in the browser. We can use frontend scripts to interact with the local state of the app. Given that the id of the table is `ao`:
0 commit comments