# aPaaS + Bitable Integration Guide
Complete step-by-step guide for integrating Feishu Bitable with aPaaS native chart components.
## Table of Contents
1. [Overview](#overview)
2. [Prerequisites](#prerequisites)
3. [Phase 1: Bitable Setup](#phase-1-bitable-setup)
4. [Phase 2: Authentication Configuration](#phase-2-authentication-configuration)
5. [Phase 3: aPaaS Data Request Setup](#phase-3-apaas-data-request-setup)
6. [Phase 4: Chart Component Configuration](#phase-4-chart-component-configuration)
7. [Phase 5: Interaction & Event Setup](#phase-5-interaction--event-setup)
8. [Phase 6: Testing & Validation](#phase-6-testing--validation)
9. [Phase 7: Deployment](#phase-7-deployment)
10. [Best Practices](#best-practices)
11. [Troubleshooting](#troubleshooting)
## Overview
This guide walks through the complete process of connecting a Bitable table to aPaaS chart components to create an interactive TikTok analytics dashboard.
### What You'll Build
- **4 Metric Cards**: Total Views, Total Likes, Avg Engagement Rate, Total Followers
- **1 Line Chart**: Views & Engagement Rate trend over time
- **1 Bar Chart**: Engagement breakdown (Likes, Comments, Shares)
- **1 Pie Chart**: Total engagement distribution
- **Interactive Filters**: Date range selector with cross-component updates
### Architecture
```
Bitable Table (Data Storage)
↓
Feishu Open API (Data Access)
↓
aPaaS Data Request (Data Connector)
↓
Chart Components (Visualization)
↓
User Interaction (Events & Filters)
```
## Prerequisites
### 1. Access & Permissions
**Feishu/Lark Account**:
- [ ] Access to Feishu workspace
- [ ] Bitable read permissions
- [ ] aPaaS application edit permissions
**Developer Access**:
- [ ] Access to Feishu Open Platform: https://open.feishu.cn
- [ ] Ability to create/manage apps
- [ ] Access to aPaaS console: https://apaas.feishu.cn
### 2. Required Credentials
Gather the following information:
```
Project Information:
├── aPaaS App ID: Dffwb10dwaz6UZs6c4HlWyV3g7c
├── aPaaS Page ID: pgeEOroex4nCBQxc
├── Bitable app_token: C8kmbTsqoa6rBesTKRpl8nV8gHd
└── Table ID: tblG4uuUvbwfvI9Z
Authentication (choose one):
├── Option A: Tenant Access Token
│ ├── App ID: cli_xxxxxxxxx
│ └── App Secret: xxxxxxxxxxxxx
└── Option B: Personal Base Token
└── Token: pat_xxxxxxxxx
```
### 3. Tools & Resources
- [ ] Web browser (Chrome/Firefox recommended)
- [ ] JSON editor/validator
- [ ] Access to configuration files:
- `/Users/mdch/lark-dashboard-sdk/config/apaas-data-request.json`
- `/Users/mdch/lark-dashboard-sdk/APAAS_CHART_CONFIG.md`
## Phase 1: Bitable Setup
### Step 1.1: Verify Bitable Structure
1. **Open your Bitable**:
```
URL: https://bytedance.feishu.cn/base/C8kmbTsqoa6rBesTKRpl8nV8gHd
```
2. **Locate your table**:
- Find table with ID: `tblG4uuUvbwfvI9Z`
- Should be named something like "TikTok Analytics" or similar
3. **Verify required fields exist**:
| Field Name | Field Type | Description |
|------------|-----------|-------------|
| Date | Date | Post date |
| Views | Number | Total views |
| Likes | Number | Total likes |
| Comments | Number | Total comments |
| Shares | Number | Total shares |
| Followers | Number | Follower count |
| Engagement_Rate | Number/Percentage | Engagement rate % |
### Step 1.2: Check Data Quality
1. **Review data**:
- [ ] At least 7-30 days of data exists
- [ ] No missing values in key fields
- [ ] Dates are in chronological order
- [ ] Numbers are formatted correctly
2. **Sample data check**:
```
Expected format:
Date: 2023-11-01
Views: 15234
Likes: 1823
Comments: 342
Shares: 189
Followers: 25678
Engagement_Rate: 15.2
```
### Step 1.3: Configure Permissions
1. **Share Bitable with App**:
- Click "Share" button in Bitable
- Go to "Advanced" → "Authorized Apps"
- Click "+ Add App"
- Search for your aPaaS app
- Grant "Read" permission
- Click "Save"
2. **Verify API Access**:
- Open: https://open.feishu.cn/app
- Find your app
- Go to "Permissions & Scopes"
- Ensure these scopes are enabled:
- `bitable:app`
- `bitable:app:readonly`
- `bitable:app:table:read`
## Phase 2: Authentication Configuration
### Step 2.1: Choose Authentication Method
**Option A: Tenant Access Token (Recommended)**
- ✅ Best for production
- ✅ Automatic token refresh
- ✅ App-level permissions
- ⚠️ Requires app credentials
**Option B: Personal Base Token**
- ✅ Quick setup
- ✅ User-level permissions
- ⚠️ Manual token management
- ⚠️ Token expiration handling needed
### Step 2.2: Get Tenant Access Token Credentials
1. **Create/Find Your App**:
- Go to: https://open.feishu.cn/app
- Click "Create App" or select existing app
- Note down:
- App ID: `cli_xxxxxxxxx`
- App Secret: `xxxxxxxxxxxxx`
2. **Configure App Permissions**:
- In app settings, go to "Permissions & Scopes"
- Add these scopes:
- `bitable:app`
- `bitable:app:readonly`
- `bitable:app:table:read`
- Click "Apply" and confirm
3. **Get App Access**:
- Go to "Availability"
- Enable "Available to all members"
- Or add specific users/departments
### Step 2.3: Test Authentication
Test your credentials using curl:
```bash
# Get tenant access token
curl -X POST 'https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal' \
-H 'Content-Type: application/json' \
-d '{
"app_id": "YOUR_APP_ID",
"app_secret": "YOUR_APP_SECRET"
}'
# Expected response:
# {
# "code": 0,
# "msg": "ok",
# "tenant_access_token": "t-xxxxxxxxx",
# "expire": 7200
# }
```
```bash
# Test Bitable access
curl -X POST 'https://open.feishu.cn/open-apis/bitable/v1/apps/C8kmbTsqoa6rBesTKRpl8nV8gHd/tables/tblG4uuUvbwfvI9Z/records/search' \
-H 'Authorization: Bearer YOUR_TENANT_ACCESS_TOKEN' \
-H 'Content-Type: application/json' \
-d '{
"page_size": 10
}'
# Expected response:
# {
# "code": 0,
# "msg": "success",
# "data": {
# "items": [...],
# "total": 30,
# "has_more": false
# }
# }
```
## Phase 3: aPaaS Data Request Setup
### Step 3.1: Access aPaaS Console
1. **Login to aPaaS**:
```
URL: https://apaas.feishu.cn
```
2. **Open Your Application**:
- Find app with ID: `Dffwb10dwaz6UZs6c4HlWyV3g7c`
- Or search by app name
- Click to open
3. **Navigate to Target Page**:
- In left sidebar, find "Pages"
- Locate page ID: `pgeEOroex4nCBQxc`
- Click to open page editor
### Step 3.2: Create Data Request
1. **Open Data Sources Panel**:
- In page editor, look for "Data" or "数据源" tab
- Usually in right panel or bottom panel
- Click "Data Requests" or "数据请求"
2. **Add New Data Request**:
- Click "+ Add" or "+ 添加"
- Select "HTTP Request" or "API"
- Name it: `getTikTokData`
3. **Import Configuration**:
- Open file: `/Users/mdch/lark-dashboard-sdk/config/apaas-data-request.json`
- Copy the entire JSON
- Paste into aPaaS config editor
- Or fill in manually following the structure below
### Step 3.3: Configure Request Details
**Basic Settings**:
```
Name: getTikTokData
Description: Fetch TikTok analytics from Bitable
Method: POST
URL: https://open.feishu.cn/open-apis/bitable/v1/apps/C8kmbTsqoa6rBesTKRpl8nV8gHd/tables/tblG4uuUvbwfvI9Z/records/search
```
**Headers**:
```json
{
"Authorization": "Bearer {{tenant_access_token}}",
"Content-Type": "application/json"
}
```
**Request Body**:
```json
{
"field_names": [
"Date",
"Views",
"Likes",
"Comments",
"Shares",
"Followers",
"Engagement_Rate"
],
"page_size": 500,
"sort": [
{
"field_name": "Date",
"desc": false
}
]
}
```
### Step 3.4: Configure Authentication
**For Tenant Access Token**:
1. In Data Request settings, find "Authentication" section
2. Select "Custom Token" or "OAuth 2.0"
3. Configure token endpoint:
```
Token URL: https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal
Method: POST
Body:
{
"app_id": "YOUR_APP_ID",
"app_secret": "YOUR_APP_SECRET"
}
Token Path: tenant_access_token
Expires In: 7200 seconds
```
**For Personal Base Token**:
1. Simply use static header:
```json
{
"Authorization": "Bearer YOUR_PERSONAL_BASE_TOKEN",
"Content-Type": "application/json"
}
```
### Step 3.5: Add Parameters (Optional)
Configure dynamic parameters for filtering:
**Date Range Parameter**:
```json
{
"name": "dateRange",
"type": "object",
"default": {
"start": "{{today(-30)}}",
"end": "{{today()}}"
}
}
```
**Minimum Views Filter**:
```json
{
"name": "minViews",
"type": "number",
"default": 0
}
```
### Step 3.6: Test Data Request
1. **Click "Test" Button**:
- Should be in Data Request config panel
- Wait for response (may take 2-5 seconds)
2. **Verify Response**:
- [ ] Status: 200 OK
- [ ] Response has `data.items` array
- [ ] Items contain expected fields
- [ ] At least 1 record returned
3. **Check Sample Data**:
```json
{
"code": 0,
"data": {
"items": [
{
"fields": {
"Date": 1698768000000,
"Views": 15234,
"Likes": 1823,
...
}
}
],
"total": 30
}
}
```
4. **Save Data Request**:
- Click "Save" or "保存"
- Confirm name: `getTikTokData`
## Phase 4: Chart Component Configuration
### Step 4.1: Add Metric Cards
**Card 1: Total Views**
1. **Add Component**:
- In page editor, open component library
- Search for "Metric Card" or "指标卡片"
- Drag onto canvas
- Position in top-left
2. **Configure Card**:
```
Title: Total Views
Icon: 👁️ or use icon library
Color: #3370FF (blue)
```
3. **Bind Data**:
- Click on the card
- Find "Data" or "数据绑定" section
- Value expression:
```javascript
{{getTikTokData.data.items.reduce((sum, item) => sum + item.fields.Views, 0)}}
```
4. **Format Number**:
- Number format: `compact`
- Decimal places: `1`
- Example output: `1.5M` for 1,523,456
**Card 2: Total Likes**
Repeat above steps with:
```
Title: Total Likes
Icon: ❤️
Color: #FF3B69 (red)
Value: {{getTikTokData.data.items.reduce((sum, item) => sum + item.fields.Likes, 0)}}
```
**Card 3: Avg Engagement Rate**
```
Title: Avg Engagement Rate
Icon: 📊
Color: #00C48C (green)
Value: {{getTikTokData.data.items.reduce((sum, item) => sum + item.fields.Engagement_Rate, 0) / getTikTokData.data.items.length}}%
Format: 0.0%
```
**Card 4: Total Followers**
```
Title: Total Followers
Icon: 👥
Color: #8A5CD1 (purple)
Value: {{getTikTokData.data.items[getTikTokData.data.items.length - 1].fields.Followers}}
Format: compact
```
### Step 4.2: Add Line Chart
1. **Add Component**:
- Search for "Line Chart" or "折线图"
- Drag below metric cards
- Resize to full width
2. **Configure Chart**:
```
Title: Views & Engagement Trend
Data Source: getTikTokData
```
3. **Configure X-Axis**:
```
Field: Date
Type: Time
Label: Date
Format: MMM DD
Data Binding: {{getTikTokData.data.items.map(i => new Date(i.fields.Date))}}
```
4. **Configure Y-Axis (Primary)**:
```
Label: Views
Position: Left
Format: 0,0
```
5. **Configure Y-Axis (Secondary)**:
```
Label: Engagement Rate (%)
Position: Right
Format: 0.0
```
6. **Add Series 1 (Views)**:
```
Name: Daily Views
Type: Line
Color: #3370FF
Y-Axis: Primary (left)
Data: {{getTikTokData.data.items.map(i => i.fields.Views)}}
Smooth: true
Show Symbol: true
```
7. **Add Series 2 (Engagement)**:
```
Name: Engagement Rate
Type: Line
Color: #00C48C
Y-Axis: Secondary (right)
Data: {{getTikTokData.data.items.map(i => i.fields.Engagement_Rate)}}
Smooth: true
Line Style: Dashed
```
8. **Configure Legend**:
```
Show: true
Position: Top
```
### Step 4.3: Add Bar Chart
1. **Add Component**:
- Search for "Bar Chart" or "柱状图"
- Drag below line chart
- Set width: 50% (half width)
2. **Configure Chart**:
```
Title: Engagement Breakdown
Orientation: Vertical
Data Source: getTikTokData
```
3. **Configure X-Axis**:
```
Field: Date
Type: Category
Data: {{getTikTokData.data.items.map(i => new Date(i.fields.Date).toLocaleDateString())}}
```
4. **Configure Y-Axis**:
```
Label: Count
Format: 0,0
```
5. **Add Series (Stacked)**:
**Series 1 - Likes**:
```
Name: Likes
Color: #FF3B69
Stack: engagement
Data: {{getTikTokData.data.items.map(i => i.fields.Likes)}}
```
**Series 2 - Comments**:
```
Name: Comments
Color: #3370FF
Stack: engagement
Data: {{getTikTokData.data.items.map(i => i.fields.Comments)}}
```
**Series 3 - Shares**:
```
Name: Shares
Color: #00C48C
Stack: engagement
Data: {{getTikTokData.data.items.map(i => i.fields.Shares)}}
```
6. **Configure Display**:
```
Bar Width: 60%
Legend Position: Bottom
Tooltip Trigger: Axis
```
### Step 4.4: Add Pie Chart
1. **Add Component**:
- Search for "Pie Chart" or "饼图"
- Drag next to bar chart (50% width)
2. **Configure Chart**:
```
Title: Total Engagement Distribution
Type: Donut (if available)
```
3. **Configure Data**:
```javascript
Data: [
{
name: "Likes",
value: {{getTikTokData.data.items.reduce((sum, i) => sum + i.fields.Likes, 0)}},
color: "#FF3B69"
},
{
name: "Comments",
value: {{getTikTokData.data.items.reduce((sum, i) => sum + i.fields.Comments, 0)}},
color: "#3370FF"
},
{
name: "Shares",
value: {{getTikTokData.data.items.reduce((sum, i) => sum + i.fields.Shares, 0)}},
color: "#00C48C"
}
]
```
4. **Configure Display**:
```
Radius: 40% - 70% (donut)
Label Format: {b}: {d}%
Legend Position: Right
Legend Orientation: Vertical
```
## Phase 5: Interaction & Event Setup
### Step 5.1: Add Date Range Filter
1. **Add Date Picker Component**:
- Search for "Date Range Picker"
- Drag to top of page
- Position above metric cards
2. **Configure Picker**:
```
Name: dateRangeFilter
Type: Date Range
Default Value:
- Start: {{today(-30)}}
- End: {{today()}}
Format: YYYY-MM-DD
```
3. **Add Label**:
```
Label: Date Range
Position: Left
```
### Step 5.2: Connect Filter to Data Request
1. **Edit Data Request**:
- Go back to Data Request: `getTikTokData`
- Find "Parameters" section
2. **Add Filter Parameter**:
```json
{
"name": "dateRange",
"type": "object",
"source": "{{dateRangeFilter.value}}",
"mapping": {
"target": "body.filter.conditions",
"value": [
{
"field_name": "Date",
"operator": "isGreaterEqual",
"value": ["{{dateRange.start}}"]
},
{
"field_name": "Date",
"operator": "isLessEqual",
"value": ["{{dateRange.end}}"]
}
]
}
}
```
3. **Enable Auto-Refresh**:
- Find "Trigger" or "Events" section
- Add trigger:
```
When: dateRangeFilter changes
Action: Refresh getTikTokData
Debounce: 500ms
```
### Step 5.3: Add Click Events to Charts
**Bar Chart Click Event**:
1. Select bar chart component
2. Go to "Events" tab
3. Add "onClick" event:
```javascript
Action: Show Modal
Modal Content: Detail view
Pass Data: {
date: {{clickedItem.date}},
likes: {{clickedItem.likes}},
comments: {{clickedItem.comments}},
shares: {{clickedItem.shares}}
}
```
**Metric Card Click Event**:
1. Select metric card component
2. Add "onClick" event:
```javascript
Action: Filter
Target: lineChart
Filter: Highlight matching series
```
### Step 5.4: Add Tooltips
For each chart:
1. Go to "Tooltip" settings
2. Enable tooltip
3. Configure:
```
Trigger: Axis (for line/bar charts)
Format:
- Views: {value:,.0f}
- Engagement: {value:.1f}%
Show All Series: true
```
## Phase 6: Testing & Validation
### Step 6.1: Preview Mode Testing
1. **Enter Preview Mode**:
- Click "Preview" button in page editor
- Or press keyboard shortcut (usually Cmd/Ctrl + P)
2. **Test Data Loading**:
- [ ] All components load without errors
- [ ] Metric cards show numbers
- [ ] Charts render correctly
- [ ] No "undefined" or "NaN" values
3. **Check Console**:
- Open browser developer tools (F12)
- Check Console tab for errors
- Note any warnings or failed requests
### Step 6.2: Test Interactions
**Date Range Filter**:
- [ ] Change date range
- [ ] Charts update within 1-2 seconds
- [ ] Data reflects new date range
- [ ] No errors in console
**Chart Clicks**:
- [ ] Click on bar chart segments
- [ ] Modal/detail view appears
- [ ] Correct data is passed
- [ ] Can close modal
**Tooltips**:
- [ ] Hover over chart elements
- [ ] Tooltip appears
- [ ] Shows correct values
- [ ] Formatting is correct
### Step 6.3: Test Edge Cases
**Empty Data**:
1. Set date range with no data
2. Verify:
- [ ] Charts show "No Data" message
- [ ] No errors occur
- [ ] Can recover by changing filter
**Large Dataset**:
1. Set date range to maximum (all data)
2. Verify:
- [ ] Loading indicator appears
- [ ] Charts render (may be slow)
- [ ] No browser freeze
- [ ] Pagination works if enabled
**Invalid Date Range**:
1. Try setting end date before start date
2. Verify:
- [ ] Validation error appears
- [ ] Request doesn't fire
- [ ] User can correct it
### Step 6.4: Cross-Browser Testing
Test in multiple browsers:
- [ ] Chrome
- [ ] Firefox
- [ ] Safari
- [ ] Edge
### Step 6.5: Mobile Testing
Test on mobile devices:
- [ ] Charts are responsive
- [ ] Touch interactions work
- [ ] Text is readable
- [ ] Layout doesn't break
## Phase 7: Deployment
### Step 7.1: Pre-Deployment Checklist
- [ ] All components working in preview
- [ ] No console errors
- [ ] Data loads correctly
- [ ] Interactions work as expected
- [ ] Tested on multiple browsers
- [ ] Mobile responsive
- [ ] Loading states added
- [ ] Error handling configured
### Step 7.2: Performance Optimization
**Enable Caching**:
1. Edit `getTikTokData` request
2. Find "Caching" settings
3. Configure:
```
Enable Cache: true
TTL: 300 seconds (5 minutes)
Cache Key: tiktok_{{dateRange.start}}_{{dateRange.end}}
```
**Optimize Chart Rendering**:
- Reduce data points if > 100 points
- Disable animations for large datasets
- Use sampling for line charts
**Lazy Loading**:
- Load charts below fold on scroll
- Defer non-critical data requests
### Step 7.3: Publish Page
1. **Exit Preview Mode**:
- Click "Exit Preview" or "Back to Editor"
2. **Save Changes**:
- Click "Save" button
- Wait for confirmation
3. **Publish**:
- Click "Publish" or "发布"
- Select target environment:
- [ ] Test/Staging
- [ ] Production
- Add version notes (optional)
- Click "Confirm"
4. **Verify Publication**:
- Open published page URL
- Test all functionality again
- Confirm users can access
### Step 7.4: Share with Users
1. **Get Page URL**:
- Copy page URL from aPaaS
- Should look like:
```
https://apaas.feishu.cn/ae/apps/Dffwb10dwaz6UZs6c4HlWyV3g7c/pages/pgeEOroex4nCBQxc
```
2. **Set Permissions**:
- Go to App settings → Permissions
- Choose visibility:
- All organization members
- Specific users/departments
- Public (with link)
3. **Notify Users**:
- Send Feishu message with link
- Include brief usage instructions
- Provide support contact
## Best Practices
### Data Management
1. **Pagination**:
- For > 500 records, enable pagination
- Load data incrementally
- Add "Load More" button
2. **Caching**:
- Cache API responses (5-10 min TTL)
- Invalidate on data changes
- Use unique cache keys per filter
3. **Data Freshness**:
- Show last updated timestamp
- Add manual refresh button
- Auto-refresh every 5-10 minutes
### Performance
1. **Optimize Queries**:
- Only request needed fields
- Use server-side filtering
- Limit result size
2. **Chart Optimization**:
- Reduce data points for line charts
- Use sampling for large datasets
- Disable animations when > 100 points
3. **Loading States**:
- Show skeleton screens
- Add loading spinners
- Provide progress indicators
### User Experience
1. **Error Handling**:
- Show user-friendly error messages
- Provide retry options
- Log errors for debugging
2. **Empty States**:
- Design custom "No Data" views
- Explain why no data exists
- Suggest actions to take
3. **Accessibility**:
- Add alt text to charts
- Ensure keyboard navigation
- Support screen readers
### Security
1. **Authentication**:
- Never expose tokens in frontend
- Use secure token storage
- Implement token refresh
2. **Data Access**:
- Validate user permissions
- Implement row-level security
- Log access attempts
3. **API Security**:
- Use HTTPS only
- Implement rate limiting
- Validate all inputs
## Troubleshooting
### Issue: "401 Unauthorized" Error
**Cause**: Invalid or expired token
**Solutions**:
1. Verify App ID and App Secret are correct
2. Check token hasn't expired
3. Ensure app has Bitable permissions
4. Test authentication separately:
```bash
curl -X POST 'https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal' \
-H 'Content-Type: application/json' \
-d '{"app_id": "YOUR_APP_ID", "app_secret": "YOUR_APP_SECRET"}'
```
### Issue: "403 Forbidden" Error
**Cause**: Insufficient permissions
**Solutions**:
1. Check app has required scopes:
- `bitable:app`
- `bitable:app:readonly`
2. Verify Bitable is shared with app
3. Confirm user has access to Bitable
4. Check app is published (not in development mode)
### Issue: Charts Not Loading Data
**Cause**: Data binding expression error
**Solutions**:
1. Open browser console (F12)
2. Look for JavaScript errors
3. Common issues:
- Typo in field names (case-sensitive)
- Incorrect path: `data.items` vs `items`
- Missing null checks
4. Test expression in console:
```javascript
getTikTokData.data.items.map(i => i.fields.Views)
```
### Issue: Filter Not Working
**Cause**: Event binding not configured
**Solutions**:
1. Verify filter component has unique ID
2. Check data request has parameter configured
3. Ensure "onChange" event is set up:
```
Component: dateRangeFilter
Event: onChange
Action: Refresh getTikTokData
```
4. Check request body includes filter conditions
### Issue: Slow Performance
**Cause**: Large dataset or inefficient queries
**Solutions**:
1. Enable caching (5 min TTL)
2. Reduce page_size in API request
3. Implement pagination
4. Add loading indicators
5. Optimize chart rendering:
- Reduce data points
- Disable animations
- Use data sampling
### Issue: Date Format Errors
**Cause**: Timestamp vs date string mismatch
**Solutions**:
1. Check Bitable field type (Date vs Number)
2. Convert timestamp to date:
```javascript
{{new Date(timestamp).toLocaleDateString()}}
```
3. Format date string:
```javascript
{{new Date(dateString).toISOString().split('T')[0]}}
```
### Issue: Charts Show Wrong Data
**Cause**: Data transformation error
**Solutions**:
1. Verify field mapping is correct
2. Check aggregation functions:
```javascript
// SUM
{{data.reduce((sum, i) => sum + i.value, 0)}}
// AVERAGE
{{data.reduce((sum, i) => sum + i.value, 0) / data.length}}
// MAX
{{Math.max(...data.map(i => i.value))}}
```
3. Test with console.log:
```javascript
{{console.log(getTikTokData.data.items) || getTikTokData.data.items}}
```
## Next Steps
After successful deployment:
1. **Monitor Usage**:
- Track page views
- Monitor API usage
- Check error logs
2. **Gather Feedback**:
- Survey users
- Track support tickets
- Identify pain points
3. **Iterate**:
- Add requested features
- Optimize based on usage patterns
- Improve UI/UX
4. **Expand**:
- Add more metrics
- Create additional views
- Integrate more data sources
## Additional Resources
### Documentation
- [Feishu Bitable API](https://open.feishu.cn/document/server-docs/docs/bitable-v1/app-table-record/list)
- [aPaaS Configuration Guide](./APAAS_CHART_CONFIG.md)
- [Sample Data Request JSON](./apaas-data-request.json)
### Support
- Feishu Developer Community: https://open.feishu.cn/community/
- aPaaS Documentation: https://apaas.feishu.cn/docs
- API Support: https://open.feishu.cn/
### Tools
- [Feishu API Explorer](https://open.feishu.cn/api-explorer/)
- [JSON Validator](https://jsonlint.com/)
- [Date/Time Converter](https://www.epochconverter.com/)
---
**Version**: 1.0
**Last Updated**: 2025-12-09
**Author**: Dashboard Team
