How to Create and Use Backend Workflow that Works with React and Bubble.io in Buildable.dev | Part-1

You can use API connector and Backend workflows to manage another platform request on bubble.io. But today, I will show you an alternative solution.

You can call the name buildable.dev

An app that We can create and manage all backend functions with just an API endpoint

Buildable Backend Solution

but If you are a front-end developer and You don’t want to write and manage backend code using backend language with node.js or Django etc.

Solution is buildable

I can create and manage my backend code on just one platform. And I will show you How can I create a form with react and post them to the Airtable database and then send a mail to my Gmail with SendGrid without writing and backend code.

You need to set up these things before you start

1- Airtable account

2- Sendgrid account

Step 0: Video Information

Step 1: Login To Buildable Website

1. Go to Homepage

2. Click on Create a flow

3. Type “Testbuildable”

4. Click on Create

5. Drag highlighted element

6. Click on +

7. Type “create airtable”

8. Click on dialog

9. Click on Add node

10. Click on Input

11. Click on // Required — Array of objects to insert…

12. Drag highlighted element

13. Drag highlighted element

14. Paste selected text into text area

/**
* — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 
* Create Records [Input]
*
* @author Buildable Technologies Inc.
* @access open
* @license MIT
* @docs https://airtable.com/api
*
* — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — 
*/
/**
* Lets you select the input for your Node’s run function
*
* @param {Params} params
* @param {Object} $trigger — This Flow’s request object
* @param {Object} $nodes — Data from above Nodes
*/
const nodeInput = ({ $trigger, $nodes }) => {
return {
AIRTABLE_API_KEY: $trigger.env.AIRTABLE_API_KEY, // Required
AIRTABLE_BASE_ID: $trigger.env.AIRTABLE_BASE_ID, // Required
endpoint: “https://api.airtable.com/v0", // Required
tableName: “Table 1”, // Required
// Required — Array of objects to insert
records: [
{
fields: {
Name: $trigger.body.name,
Surname: $trigger.body.surname,
Company_Name: $trigger.body.company_name,
},
},
],
};
};

15. Click on save

16. Click on switch

17. Click on +

18. Type “axios”

19. Click on dialog

20. Type “Sendmail”

21. Type “sendGrid”

22. Click on Add node

23. Drag highlighted element

24. Click on Trigger Flow

25. Click on GET

26. Click on POST

27. Click on Close

28. Go to Buildable Dev Base: Table 1 — Airtable

29. Click on Buildable Dev Base

30. Go back to buildable app and click on BODY

31. Click on {}

32. Paste into text area

{
“name”:”Test buildable test”,
“company_name”:”test company name”,
“surname”: “TEEST surname”
}

33. Click on Run Button

34. Click on dialog

35. Click on dialog

36. Click on dialog

37. Click on dialog

38. Go to Buildable Dev Base: Table 1 — Airtable

39. Click on Name column header (Single line text field)

40. Paste selected text into text area

/**
 * ----------------------------------------------------------------------------------------------------
 * Create Records [Input]
 *
 * @author    Buildable Technologies Inc.
 * @access    open
 * @license   MIT
 * @docs      https://airtable.com/api
 *
 * ----------------------------------------------------------------------------------------------------
 */
/**
 * Lets you select the input for your Node's run function
 *
 * @param {Params} params
 * @param {Object} $trigger - This Flow's request object
 * @param {Object} $nodes - Data from above Nodes
 */
const nodeInput = ({ $trigger, $nodes }) => {
  return {
    AIRTABLE_API_KEY: $trigger.env.AIRTABLE_API_KEY, // Required
    AIRTABLE_BASE_ID: $trigger.env.AIRTABLE_BASE_ID, // Required
    endpoint: "https://api.airtable.com/v0", // Required
    tableName: "Table 1", // Required
// Required - Array of objects to insert
    records: [
      {
        fields: {
          Name: $trigger.body.name,
          Surname: $trigger.body.surname,
          Company_Name: $trigger.body.company_name
        },
      },
      
    ],
  };
};

41. Click on save

42. Click on Trigger Flow

43. Click on Body

44. Click on code

45. Type Test Body Value

{ 
“name”:”Test buildable test”, 
“company_name”:”test company name”, 
“surname”: “TEEST surname” 
}

46. Click on Run

47. Go to Buildable Dev Base: Table 1 — Airtable

48. Click on highlight

49. Go to Your E-mail Service

50. You can see company details and success emails on Gmail

51. Click on Close

52. Click on Deploy Flow

53. Click on Deploy flow

And Success 🚀🔥

You can use this endpoint wherever you want. React, svelte, or bubble.io.

Please contact me if you have any questions

Enes Efe - Web Developer and Co-founder - EC-Solution.net | LinkedIn

I am Enes Efe | Frontend Developer