Working with Data and APIs

Introduction

Data is what makes applications dynamic and useful. In this tutorial, you'll learn how to connect Structor projects to databases, integrate with APIs, and build data-driven applications using Supabase and HTTP requests.

Step 1: Setting Up Supabase

1.1 Create a Supabase Project

1. Go to supabase.com and sign up/login
2. Create a new project
3. Wait for the project to initialize

1.2 Connect Supabase to Structor

1. In Structor, open Settings (gear icon)
2. Go to the Supabase tab
3. Enter your Supabase URL and API Key (from your Supabase project settings)
4. Click Test Connection to verify
5. Click Save

Step 2: Create a Database Table

2.1 Using Backend Studio

1. Click the Database icon in the top bar (opens Backend Studio)
2. In the Database section, click + New Table
3. Name your table (e.g., products)
4. Add columns:
   • id - Type: Text, Primary Key
   • name - Type: Text
   • price - Type: Number
   • description - Type: Text
5. Click Create Table

2.2 Add Sample Data

1. In the Backend Studio, select your table
2. Click Add Row to insert sample data
3. Fill in the fields and save
4. Add a few more rows

Step 3: Fetch Data from Supabase

3.1 Create App State Variable

1. Open Settings > App State
2. Add a variable named products
3. Set type to: Array
4. Leave default value empty: []

3.2 Create Server Action

1. Open Settings > Server Actions
2. Click + Add Server Action
3. Set Action ID to: fetchProducts
4. Add code:

   async function fetchProducts(args) {
     const { supabase } = context;
     const { data, error } = await supabase
       .from('products')
       .select('*');
     
     if (error) throw error;
     return data;
   }

5. Click Save

3.3 Call Server Action from Page

1. Add a Button labeled "Load Products"
2. Add On Click action
3. In the flow editor, add Run Server Action:
   • Action ID: fetchProducts
   • Output Variable: products
4. Add Show Toast with message: "Products loaded!"

Step 4: Display Data in a List

4.1 Create List Container

1. Add a Div container (this will be your list)
2. Style it with Display: Flex, Flex Direction: Column, Gap: 16px

4.2 Create Item Template

1. Inside the container, add a Div (this is your item template)
2. Add Text elements inside it:
   • One for product name: Set content to {{item.name}}
   • One for price: Set content to ${{item.price}}
   • One for description: Set content to {{item.description}}
3. Style the item template as a card

4.3 Configure Dynamic List

1. Select the item template div
2. Open the Data tab in the right panel
3. Enable Repeat for Each
4. Set Data to repeat: products
5. Set Current item called: item
6. The list will now repeat for each product!

Step 5: Make HTTP Requests to External APIs

1. Add a button labeled "Fetch Data"
2. Add On Click action
3. In the flow editor, add HTTP Request:
   • Method: GET
   • URL: https://api.example.com/data
   • Output Variable: apiResponse
4. Add Conditional to check for errors
5. Add Show Toast for success/error messages

Step 6: Handle Errors

1. After your HTTP Request, add a Conditional node
2. Check if the response has an error (e.g., {{apiResponse.error}} != null)
3. In the "true" branch, show an error toast
4. In the "false" branch, show success and update state

Step 7: Create Form to Add Data

7.1 Create Form

1. Add Input elements for name, price, description
2. Set input bindings: newName, newPrice, newDescription
3. Add a submit button

7.2 Create Server Action to Insert

1. In Settings > Server Actions, add action: addProduct
2. Add code:

   async function addProduct(args) {
     const { supabase } = context;
     const { data, error } = await supabase
       .from('products')
       .insert([{
         name: args.name,
         price: args.price,
         description: args.description
       }]);
     
     if (error) throw error;
     return data;
   }

7.3 Connect Form to Server Action

1. On submit button, add On Click action
2. Add Run Server Action:
   • Action ID: addProduct
   • Arguments: {"name": "{{newName}}", "price": newPrice, "description": "{{newDescription}}"}
3. After the server action, call fetchProducts again to refresh the list

Congratulations!

You've learned how to:

• Set up Supabase integration
• Create database tables
• Create server actions
• Fetch and display data
• Make HTTP requests
• Handle errors
• Create forms to add data

Next Steps

• Learn about version control for managing changes
• Explore advanced data features in the documentation
• Set up Row Level Security (RLS) in Supabase for production apps