Your First App Tutorial
Follow this detailed tutorial to build a complete customer management application. You'll learn the core concepts of ForgeZap while creating something useful.
What You'll Build
Tutorial Overview
Form Input
Collect customer information
Data Storage
Save to SQLite database
Data Display
View in data table
Step-by-Step Tutorial
Create a new application
From your dashboard, click 'Create New Application' and give it a name like 'Customer Manager'
Add a heading
Drag a 'Heading' component from the palette to your canvas and set the text to 'Customer Management'
Create a form
Add Input components for Name, Email, and Phone, plus a Button labeled 'Add Customer'
Add a data table
Drag a 'Data Table' component below your form to display customer data
Connect to database
In the data table properties, select 'SQLite Database' and choose the 'customers' table
Configure form submission
Set up the form to save data to the database when submitted
Test your app
Use the preview mode to test adding customers and viewing them in the table
Publish your app
Click the 'Publish' button to get a shareable URL for your application
Detailed Instructions
Step 1: Create Your Application
Start by creating a new application in your ForgeZap workspace.
1. Navigate to your dashboard
2. Click the "Create New Application" button
3. Enter "Customer Manager" as the application name
4. Add a description: "A simple app to manage customer information"
5. Click "Create" to open the app builder
Step 2: Add a Heading
Add a title to your application using the Heading component.
1. In the component palette, find the "Heading" component
2. Drag it to the top of your canvas
3. In the properties panel, set the text to "Customer Management"
4. Adjust the heading level to H1 for the main title
Step 3: Build the Form
Create a form to collect customer information.
1. Add three "Input" components for Name, Email, and Phone
2. Add labels to each input field
3. Add a "Button" component labeled "Add Customer"
4. Arrange the components in a logical order
Step 4: Add Data Table
Add a table to display existing customers.
1. Drag a "Data Table" component below your form
2. In the properties panel, go to the "Data" tab
3. Select "SQLite Database" as the data source
4. Choose the "customers" table (it will be created automatically)
What You've Learned
App Builder Basics
- • Creating new applications
- • Using the component palette
- • Configuring component properties
- • Arranging components on canvas
Data Integration
- • Connecting to databases
- • Form data submission
- • Data table configuration
- • Real-time data updates