# Approach B: aPaaS Visual Charts Deployment Guide
> **Complete step-by-step guide for deploying TikTok Analytics Dashboard using Lark aPaaS visual editor**
---
## Table of Contents
1. [Prerequisites](#prerequisites)
2. [Configuration Overview](#configuration-overview)
3. [Step-by-Step Deployment](#step-by-step-deployment)
4. [Bitable Connector Setup](#bitable-connector-setup)
5. [Chart Component Configuration](#chart-component-configuration)
6. [Field Mapping Reference](#field-mapping-reference)
7. [Layout Configuration](#layout-configuration)
8. [Testing & Validation](#testing--validation)
9. [Troubleshooting](#troubleshooting)
10. [Advanced Features](#advanced-features)
---
## Prerequisites
### Required Access
- ✅ Lark aPaaS application access (App ID: `Dffwb10dwaz6UZs6c4HlWyV3g7c`)
- ✅ Bitable access with data (App Token: `C8kmbTsqoa6rBesTKRpl8nV8gHd`)
- ✅ Table with TikTok data (Table ID: `tblG4uuUvbwfvI9Z`)
- ✅ Editor or Admin permissions on aPaaS app
### Required Data Fields
Your Bitable table must contain these fields:
| Field Name | Type | Description | Sample Value |
|------------|------|-------------|--------------|
| `Date` | Date | Video publish date | 2025-12-09 |
| `Views` | Number | Total views | 125000 |
| `Likes` | Number | Total likes | 8500 |
| `Comments` | Number | Total comments | 450 |
| `Shares` | Number | Total shares | 320 |
| `Followers` | Number | Current followers | 55000 |
| `Engagement_Rate` | Number | Calculated % | 7.25 |
---
## Configuration Overview
### Dashboard Components
The dashboard consists of 8 configured components:
```
┌─────────────────────────────────────────────────────────────┐
│ [Total Views] [Total Likes] [Avg Engagement] [Followers]│ Row 1: Metric Cards
├─────────────────────────────────────────────────────────────┤
│ [Views & Engagement Trend Line] │ Row 2: Line Chart
├──────────────────────────────┬──────────────────────────────┤
│ [Engagement Breakdown Bar] │ [Distribution Pie Chart] │ Row 3: Bar + Pie
├──────────────────────────────┴──────────────────────────────┤
│ [Video Performance Table] │ Row 4: Data Table
└─────────────────────────────────────────────────────────────┘
```
---
## Step-by-Step Deployment
### Phase 1: Access aPaaS Application
#### Step 1.1: Open aPaaS App Builder
1. Navigate to Lark aPaaS
2. Open app with ID: `Dffwb10dwaz6UZs6c4HlWyV3g7c`
3. Go to **Pages** section
4. Create new page or select existing dashboard page
**Screenshot reference:**
```
┌─────────────────────────────────────┐
│ aPaaS App Builder │
├─────────────────────────────────────┤
│ ☰ Menu │
│ 📄 Pages ← Click here│
│ 🔌 Data Sources │
│ ⚙️ Settings │
└─────────────────────────────────────┘
```
#### Step 1.2: Create Dashboard Page
1. Click **+ New Page**
2. Name: "TikTok Analytics Dashboard"
3. Layout: Choose **Custom Layout** (4-column grid)
4. Click **Create**
---
### Phase 2: Configure Bitable Data Source
#### Step 2.1: Add Data Source
1. In page editor, click **Data Sources** (left panel)
2. Click **+ Add Data Source**
3. Select **Bitable** connector type
**Configuration:**
```json
{
"type": "Bitable",
"name": "getTikTokData",
"connection": {
"appToken": "C8kmbTsqoa6rBesTKRpl8nV8gHd",
"tableId": "tblG4uuUvbwfvI9Z"
}
}
```
#### Step 2.2: Configure Data Source
**Visual Steps:**
1. **Connection Settings:**
- App Token: `C8kmbTsqoa6rBesTKRpl8nV8gHd`
- Table ID: `tblG4uuUvbwfvI9Z`
- Click **Test Connection** ✓
2. **Query Configuration:**
- Query Type: **Get Records**
- Field Selection: **All Fields** (or select specific fields)
- Sort: By `Date` (Descending)
- Page Size: 100
3. **Name the Data Source:**
- Enter: `getTikTokData`
- Click **Save**
**Expected Result:**
```
✓ Connection successful
✓ Found 50+ records
✓ Data source "getTikTokData" created
```
#### Step 2.3: Test Data Source
1. Click **Preview** button
2. Verify data structure:
```json
{
"data": {
"items": [
{
"record_id": "rec...",
"fields": {
"Date": 1733702400000,
"Views": 125000,
"Likes": 8500,
"Comments": 450,
"Shares": 320,
"Followers": 55000,
"Engagement_Rate": 7.25
}
}
]
}
}
```
---
### Phase 3: Add Chart Components
#### Component 1: Total Views Metric Card
**File:** `01-metric-card-total-views.json`
1. **Add Component:**
- Drag **Metric Card** from component library
- Position: Row 1, Column 1
2. **Configure Basic Settings:**
- Title: "Total Views"
- Subtitle: "All-time video views"
- Icon: 👁️ (or select eye icon)
3. **Configure Data Binding:**
```javascript
// Value Expression
{{getTikTokData.data.items.reduce((sum, item) => sum + (item.fields.Views || 0), 0)}}
```
4. **Configure Display:**
- Color: Primary `#3370FF`, Background `#F0F5FF`
- Number Format: Compact (e.g., "125K")
- Size: Large
5. **Configure Comparison (Optional):**
- Enable trend indicator
- Show percentage change vs previous period
**Visual Editor Settings:**
```
┌─────────────────────────────────┐
│ Metric Card Settings │
├─────────────────────────────────┤
│ Title: Total Views │
│ Icon: 👁️ │
│ Color: #3370FF │
│ │
│ Data Binding: │
│ └─ getTikTokData │
│ └─ Expression: [reduce sum] │
│ │
│ Format: Compact │
│ Size: Large │
└─────────────────────────────────┘
```
---
#### Component 2: Total Likes Metric Card
**File:** `02-metric-card-total-likes.json`
1. **Add Component:**
- Drag **Metric Card**
- Position: Row 1, Column 2
2. **Configure:**
- Title: "Total Likes"
- Icon: ❤️
- Color: `#FF3B69`
- Value Expression:
```javascript
{{getTikTokData.data.items.reduce((sum, item) => sum + (item.fields.Likes || 0), 0)}}
```
---
#### Component 3: Average Engagement Rate Metric Card
**File:** `03-metric-card-avg-engagement.json`
1. **Add Component:**
- Drag **Metric Card**
- Position: Row 1, Column 3
2. **Configure:**
- Title: "Avg Engagement Rate"
- Icon: 📊
- Color: `#00C48C`
- Value Expression:
```javascript
{{getTikTokData.data.items.reduce((sum, item) => sum + (item.fields.Engagement_Rate || 0), 0) / getTikTokData.data.items.length}}
```
- Suffix: "%"
3. **Configure Conditional Formatting:**
- ≥15%: Green badge "Excellent"
- ≥10% and <15%: Blue badge "Good"
- ≥5% and <10%: Orange badge "Fair"
- <5%: Red badge "Needs Improvement"
**Conditional Formatting Settings:**
```javascript
// Rule 1: Excellent
Condition: {{value >= 15}}
Style: {
color: "#00C48C",
backgroundColor: "#F0FFF9",
badge: "Excellent"
}
// Rule 2: Good
Condition: {{value >= 10 && value < 15}}
Style: {
color: "#3370FF",
backgroundColor: "#F0F5FF",
badge: "Good"
}
```
---
#### Component 4: Total Followers Metric Card
**File:** `04-metric-card-total-followers.json`
1. **Add Component:**
- Position: Row 1, Column 4
2. **Configure:**
- Title: "Total Followers"
- Icon: 👥
- Color: `#8A5CD1`
- Value Expression:
```javascript
{{getTikTokData.data.items.length > 0 ? getTikTokData.data.items[getTikTokData.data.items.length - 1].fields.Followers : 0}}
```
---
#### Component 5: Views & Engagement Trend Line Chart
**File:** `05-line-chart-views-engagement.json`
1. **Add Component:**
- Drag **Line Chart**
- Position: Row 2, Column 1-4 (full width)
2. **Configure X-Axis:**
- Field: `Date`
- Type: Time
- Format: "MMM DD"
- Data Expression:
```javascript
{{getTikTokData.data.items.map(i => new Date(i.fields.Date))}}
```
3. **Configure Y-Axes (Dual Axis):**
**Left Y-Axis (Views):**
```javascript
{
"id": "yAxisViews",
"position": "left",
"label": "Views",
"format": "0,0",
"color": "#3370FF"
}
```
**Right Y-Axis (Engagement Rate):**
```javascript
{
"id": "yAxisEngagement",
"position": "right",
"label": "Engagement Rate (%)",
"format": "0.0%",
"color": "#00C48C"
}
```
4. **Configure Series:**
**Series 1: Daily Views**
```javascript
{
"name": "Daily Views",
"yAxis": "yAxisViews",
"data": {{getTikTokData.data.items.map(i => i.fields.Views)}},
"color": "#3370FF",
"lineWidth": 3,
"smooth": true
}
```
**Series 2: Engagement Rate**
```javascript
{
"name": "Engagement Rate",
"yAxis": "yAxisEngagement",
"data": {{getTikTokData.data.items.map(i => i.fields.Engagement_Rate)}},
"color": "#00C48C",
"lineStyle": "dashed"
}
```
5. **Configure Chart Options:**
- Legend: Show at top
- Tooltip: Enabled with axis pointer
- Data Zoom: Enable slider at bottom
- Grid: Top 15%, Bottom 15%, Left 10%, Right 10%
**Visual Editor - Line Chart:**
```
┌─────────────────────────────────────────┐
│ Line Chart Configuration │
├─────────────────────────────────────────┤
│ X-Axis: │
│ └─ Field: Date │
│ Format: MMM DD │
│ │
│ Y-Axes: │
│ ├─ Left: Views (0,0) │
│ └─ Right: Engagement % (0.0%) │
│ │
│ Series: │
│ ├─ Daily Views (blue, solid) │
│ └─ Engagement Rate (green, dashed) │
│ │
│ Options: │
│ ✓ Legend │
│ ✓ Tooltip │
│ ✓ Data Zoom Slider │
└─────────────────────────────────────────┘
```
---
#### Component 6: Engagement Breakdown Bar Chart
**File:** `06-bar-chart-engagement-breakdown.json`
1. **Add Component:**
- Drag **Bar Chart** (Stacked)
- Position: Row 3, Column 1-2 (50% width)
2. **Configure:**
- Title: "Social Engagement Breakdown"
- Orientation: Vertical
- Stack Mode: Enabled
3. **Configure X-Axis:**
```javascript
// Category labels (dates)
{{getTikTokData.data.items.slice(0, 30).map(i =>
new Date(i.fields.Date).toLocaleDateString('en-US', {month: 'short', day: 'numeric'})
)}}
```
4. **Configure Series (Stacked):**
**Likes (Bottom Layer):**
```javascript
{
"name": "Likes",
"stack": "engagement",
"data": {{getTikTokData.data.items.slice(0, 30).map(i => i.fields.Likes)}},
"color": "#FF3B69"
}
```
**Comments (Middle Layer):**
```javascript
{
"name": "Comments",
"stack": "engagement",
"data": {{getTikTokData.data.items.slice(0, 30).map(i => i.fields.Comments)}},
"color": "#3370FF"
}
```
**Shares (Top Layer):**
```javascript
{
"name": "Shares",
"stack": "engagement",
"data": {{getTikTokData.data.items.slice(0, 30).map(i => i.fields.Shares)}},
"color": "#00C48C"
}
```
5. **Configure Options:**
- Bar Width: 60%
- Legend: Bottom, horizontal
- Tooltip: Axis trigger with shadow pointer
---
#### Component 7: Engagement Distribution Pie Chart
**File:** `07-pie-chart-engagement-distribution.json`
1. **Add Component:**
- Drag **Pie Chart** (Donut style)
- Position: Row 3, Column 3-4 (50% width)
2. **Configure:**
- Title: "Total Engagement Distribution"
- Chart Type: Donut
- Inner Radius: 50%
- Outer Radius: 75%
3. **Configure Data Segments:**
**Likes Segment:**
```javascript
{
"name": "Likes",
"value": {{getTikTokData.data.items.reduce((sum, i) => sum + (i.fields.Likes || 0), 0)}},
"color": "#FF3B69"
}
```
**Comments Segment:**
```javascript
{
"name": "Comments",
"value": {{getTikTokData.data.items.reduce((sum, i) => sum + (i.fields.Comments || 0), 0)}},
"color": "#3370FF"
}
```
**Shares Segment:**
```javascript
{
"name": "Shares",
"value": {{getTikTokData.data.items.reduce((sum, i) => sum + (i.fields.Shares || 0), 0)}},
"color": "#00C48C"
}
```
4. **Configure Center Label:**
```javascript
// Total count in center
{{getTikTokData.data.items.reduce((sum, i) =>
sum + (i.fields.Likes || 0) + (i.fields.Comments || 0) + (i.fields.Shares || 0), 0)}}
```
- Font Size: 32px (bold)
- Sub-label: "Total Engagements" (14px)
5. **Configure Labels:**
- Position: Outside
- Format: `{name}: {percentage}%`
- Show label lines
---
#### Component 8: Video Performance Table
**File:** `08-table-video-performance.json`
1. **Add Component:**
- Drag **Table/Data Grid**
- Position: Row 4, Column 1-4 (full width)
2. **Configure Columns:**
**Column 1: Date**
```javascript
{
"field": "Date",
"fieldPath": "fields.Date",
"label": "Date",
"type": "date",
"width": 120,
"sortable": true,
"format": "YYYY-MM-DD"
}
```
**Column 2: Views**
```javascript
{
"field": "Views",
"fieldPath": "fields.Views",
"label": "Views",
"type": "number",
"width": 110,
"sortable": true,
"format": "0,0",
"conditionalFormatting": {
"rules": [
{"condition": ">=50000", "color": "#00C48C", "fontWeight": "bold"},
{"condition": ">=20000", "color": "#3370FF"},
{"condition": "<10000", "color": "#8C8C8C"}
]
}
}
```
**Column 3-5: Likes, Comments, Shares**
(Similar configuration with appropriate field paths)
**Column 6: Followers**
```javascript
{
"field": "Followers",
"fieldPath": "fields.Followers",
"label": "Followers",
"width": 110,
"format": "0,0"
}
```
**Column 7: Engagement Rate**
```javascript
{
"field": "Engagement_Rate",
"fieldPath": "fields.Engagement_Rate",
"label": "Engagement Rate",
"type": "percentage",
"width": 140,
"format": "0.00%",
"conditionalFormatting": {
"rules": [
{"condition": ">=15", "badge": "Excellent", "color": "#00C48C"},
{"condition": ">=10", "badge": "Good", "color": "#3370FF"},
{"condition": ">=5", "color": "#FA8C16"},
{"condition": "<5", "color": "#F54A45"}
]
}
}
```
**Column 8: Total Engagement (Calculated)**
```javascript
{
"field": "TotalEngagement",
"label": "Total Engagement",
"type": "calculated",
"expression": "{{row.fields.Likes + row.fields.Comments + row.fields.Shares}}",
"width": 150,
"format": "0,0"
}
```
3. **Configure Table Features:**
- ✓ Sorting: Enabled (default: Date desc)
- ✓ Filtering: Show filter row
- ✓ Pagination: 20 per page
- ✓ Selection: Multiple rows with checkbox
- ✓ Search: Enabled across all fields
- ✓ Export: CSV and Excel
- ✓ Summary Row: Show totals and averages
4. **Configure Summary Row:**
```javascript
// Total Row
{
"label": "Total",
"Views": "{{sum}}",
"Likes": "{{sum}}",
"Comments": "{{sum}}",
"Shares": "{{sum}}",
"Engagement_Rate": "{{avg}}",
"TotalEngagement": "{{sum}}"
}
// Average Row
{
"label": "Average",
"Views": "{{avg}}",
"Likes": "{{avg}}",
"Comments": "{{avg}}",
"Shares": "{{avg}}"
}
```
---
## Field Mapping Reference
### Data Source to Component Mapping
| Bitable Field | Data Type | Used In Components | Expression Example |
|---------------|-----------|-------------------|-------------------|
| `Date` | Date (timestamp) | All | `new Date(item.fields.Date)` |
| `Views` | Number | Metric Card, Line Chart, Table | `item.fields.Views` |
| `Likes` | Number | Metric Card, Bar Chart, Pie, Table | `item.fields.Likes` |
| `Comments` | Number | Bar Chart, Pie, Table | `item.fields.Comments` |
| `Shares` | Number | Bar Chart, Pie, Table | `item.fields.Shares` |
| `Followers` | Number | Metric Card, Table | `item.fields.Followers` |
| `Engagement_Rate` | Number (%) | Metric Card, Line Chart, Table | `item.fields.Engagement_Rate` |
### Calculated Fields
**Total Engagement:**
```javascript
{{item.fields.Likes + item.fields.Comments + item.fields.Shares}}
```
**Average Engagement Rate:**
```javascript
{{getTikTokData.data.items.reduce((sum, item) => sum + item.fields.Engagement_Rate, 0) / getTikTokData.data.items.length}}
```
---
## Layout Configuration
### Grid System
aPaaS uses a **4-column responsive grid**:
```
┌────┬────┬────┬────┐
│ 1 │ 2 │ 3 │ 4 │ Row 1: 4 metric cards (25% each)
├────┴────┴────┴────┤
│ 1-4 │ Row 2: Line chart (100% width)
├────┬────┬────┬────┤
│ 1-2 │ 3-4 │ Row 3: Bar (50%) + Pie (50%)
├────┴────┴────┴────┤
│ 1-4 │ Row 4: Table (100% width)
└───────────────────┘
```
### Component Sizes
| Component | Width | Height | Min Width | Min Height |
|-----------|-------|--------|-----------|------------|
| Metric Cards | 25% | 120px | 200px | 100px |
| Line Chart | 100% | 400px | - | 300px |
| Bar Chart | 50% | 350px | - | 300px |
| Pie Chart | 50% | 350px | - | 300px |
| Table | 100% | 500px | - | 400px |
### Responsive Breakpoints
**Mobile (<768px):**
- All metric cards: 100% width
- Line chart: 300px height
- Bar & Pie: Stack vertically, 100% width each
- Table: Show limited columns (Date, Views, Engagement Rate)
**Tablet (768px-1024px):**
- Metric cards: 50% width (2 per row)
- Charts maintain layout
---
## Testing & Validation
### Pre-Launch Checklist
#### ✅ Data Source Validation
- [ ] Data source "getTikTokData" connects successfully
- [ ] All required fields present in response
- [ ] Data refreshes on page load
- [ ] No data errors in console
#### ✅ Component Validation
- [ ] All 8 components render without errors
- [ ] Metric cards show correct calculated values
- [ ] Line chart displays dual Y-axes correctly
- [ ] Bar chart stacking works properly
- [ ] Pie chart percentages sum to 100%
- [ ] Table shows all records with pagination
#### ✅ Data Binding Validation
- [ ] All expressions evaluate without errors
- [ ] Conditional formatting applies correctly
- [ ] Number formatting displays properly
- [ ] Date formatting is correct
#### ✅ Interaction Validation
- [ ] Chart tooltips display on hover
- [ ] Table sorting works on all columns
- [ ] Table filtering works correctly
- [ ] Data zoom on line chart functions
- [ ] Legend toggle works on all charts
#### ✅ Performance Validation
- [ ] Page loads in <3 seconds
- [ ] No performance warnings in console
- [ ] Smooth scrolling and interactions
- [ ] Charts render smoothly on data updates
### Testing Scenarios
**Test 1: Data Refresh**
1. Click refresh button
2. Verify all components update
3. Check for loading states
**Test 2: Empty Data**
1. Temporarily filter data to empty
2. Verify empty state messages display
3. Restore data
**Test 3: Large Dataset**
1. Load 100+ records
2. Verify table pagination works
3. Check chart performance
**Test 4: Mobile View**
1. Resize browser to mobile width
2. Verify responsive layout
3. Check component reordering
---
## Troubleshooting
### Common Issues and Solutions
#### Issue 1: "Data source not found" Error
**Symptoms:**
- Components show "No data" error
- Console error: `getTikTokData is undefined`
**Solution:**
1. Check data source name is exactly `getTikTokData`
2. Verify data source is enabled
3. Test connection in data source settings
4. Refresh page after saving data source
---
#### Issue 2: Charts Not Rendering
**Symptoms:**
- Blank chart areas
- Loading spinner doesn't stop
**Solution:**
1. Check data expression syntax:
```javascript
// Correct
{{getTikTokData.data.items.map(i => i.fields.Views)}}
// Incorrect
{{getTikTokData.items.map(i => i.Views)}}
```
2. Verify field names match exactly (case-sensitive)
3. Check browser console for JavaScript errors
4. Clear browser cache and reload
---
#### Issue 3: Conditional Formatting Not Applied
**Symptoms:**
- Colors don't change based on values
- Badges don't appear
**Solution:**
1. Check condition expressions use `{{value}}` correctly
2. Verify number comparison operators:
```javascript
// Correct
{{value >= 15}}
// Incorrect
{{value > "15"}} // Don't use quotes for numbers
```
3. Ensure rules are in correct order (specific before general)
---
#### Issue 4: Table Shows No Data
**Symptoms:**
- Table header shows but no rows
- "No data" message displays
**Solution:**
1. Check `fieldPath` in column definitions:
```javascript
// Correct
"fieldPath": "fields.Views"
// Incorrect
"fieldPath": "Views"
```
2. Verify data source returns `data.items` array
3. Check table data binding points to correct path
4. Remove any filters that might exclude all data
---
#### Issue 5: Metric Card Shows NaN
**Symptoms:**
- Card displays "NaN" instead of number
- Calculation errors
**Solution:**
1. Add null/undefined checks:
```javascript
// Better
{{getTikTokData.data.items.reduce((sum, item) => sum + (item.fields.Views || 0), 0)}}
// Problematic
{{getTikTokData.data.items.reduce((sum, item) => sum + item.fields.Views, 0)}}
```
2. Check for division by zero
3. Ensure data types are numbers, not strings
---
#### Issue 6: Date Formatting Issues
**Symptoms:**
- Dates show as timestamps
- Invalid date format
**Solution:**
1. Bitable returns dates as milliseconds
2. Convert to Date object:
```javascript
new Date(item.fields.Date)
```
3. Use appropriate date format pattern
4. Check locale settings match your region
---
#### Issue 7: Performance Slow with Large Data
**Symptoms:**
- Page loads slowly
- Charts lag during interaction
**Solutions:**
1. Limit data in queries (use pagination)
2. Reduce bar chart data to 30 days:
```javascript
{{getTikTokData.data.items.slice(0, 30)}}
```
3. Enable virtual scrolling on table
4. Disable animations if needed
5. Use server-side pagination for tables
---
#### Issue 8: Responsive Layout Broken
**Symptoms:**
- Components overlap on mobile
- Layout doesn't adjust
**Solution:**
1. Check responsive breakpoint settings
2. Verify column spans add up correctly
3. Test on actual devices, not just browser resize
4. Use aPaaS preview mode for different devices
---
### Debug Mode Tips
**Enable Debug Mode:**
1. Add `?debug=true` to URL
2. Check browser console for detailed logs
3. Use aPaaS developer tools
**Common Console Checks:**
```javascript
// Check data source
console.log(getTikTokData);
// Check data structure
console.log(getTikTokData.data.items);
// Check specific field
console.log(getTikTokData.data.items[0].fields.Views);
```
---
## Advanced Features
### Dynamic Filtering
Add filter controls to enable users to filter data:
**Date Range Filter:**
```javascript
{
"type": "dateRangePicker",
"onChange": "filterByDateRange",
"binding": "dateFilter"
}
// Filter expression in data source
{{getTikTokData.data.items.filter(item =>
new Date(item.fields.Date) >= dateFilter.start &&
new Date(item.fields.Date) <= dateFilter.end
)}}
```
### Real-Time Updates
Enable auto-refresh:
```javascript
{
"dataSource": "getTikTokData",
"refreshInterval": 300000, // 5 minutes
"refreshOnFocus": true
}
```
### Export Functionality
Add export buttons:
**Export Table Data:**
```javascript
{
"type": "button",
"text": "Export to Excel",
"onClick": "exportTable",
"format": "xlsx"
}
```
### Custom Tooltips
Enhance chart tooltips:
```javascript
{
"tooltip": {
"formatter": "<div style='padding: 8px;'>" +
"<b>{date}</b><br/>" +
"Views: {views:,}<br/>" +
"Engagement: {engagement:.1f}%" +
"</div>"
}
}
```
---
## Performance Optimization
### Best Practices
1. **Data Limiting:**
- Fetch only necessary fields
- Limit records to last 90 days for charts
- Use pagination for tables
2. **Caching:**
- Enable data source caching (5-minute TTL)
- Use computed fields for complex calculations
3. **Lazy Loading:**
- Load charts on scroll (for mobile)
- Defer non-critical components
4. **Debouncing:**
- Add 300ms debounce to search/filter inputs
---
## Security Considerations
### Data Access
- ✅ Use row-level permissions in Bitable
- ✅ Configure aPaaS page access control
- ✅ Don't expose sensitive fields in charts
### API Tokens
- ⚠️ Never hardcode tokens in frontend
- ✅ Use aPaaS environment variables
- ✅ Rotate tokens regularly
---
## Support Resources
### Documentation
- [Lark aPaaS Official Docs](https://open.larksuite.com/document/uAjLw4CM/ukTMukTMukTM/apaas/overview)
- [Bitable API Reference](https://open.larksuite.com/document/uAjLw4CM/ukTMukTMukTM/reference/bitable-v1/overview)
- [Field Mapping Guide](../FIELD_MAPPING.md)
### Contact
- Technical Support: dev@hypelab.com
- Issue Tracker: [GitHub Issues](https://github.com/hypelab/lark-dashboard-sdk/issues)
---
## Deployment Checklist
### Final Pre-Launch
- [ ] All components configured and tested
- [ ] Data source connected and validated
- [ ] Responsive layout verified on all devices
- [ ] Performance optimization applied
- [ ] Security settings configured
- [ ] User permissions set correctly
- [ ] Documentation updated
- [ ] Stakeholders notified
- [ ] Backup created
- [ ] Rollback plan ready
### Launch
1. Click **Publish** button
2. Select version number
3. Add release notes
4. Publish to production
5. Monitor for errors
6. Collect user feedback
---
**Deployment Guide Version:** 1.0.0
**Last Updated:** 2025-12-09
**Maintained by:** HypeLab Development Team
