# Quick Start: aPaaS + Bitable Dashboard
Get your TikTok analytics dashboard up and running in 15 minutes.
## Prerequisites
Before you start, gather:
- ✅ Bitable app_token: `C8kmbTsqoa6rBesTKRpl8nV8gHd`
- ✅ Table ID: `tblG4uuUvbwfvI9Z`
- ✅ aPaaS App ID: `Dffwb10dwaz6UZs6c4HlWyV3g7c`
- ✅ aPaaS Page ID: `pgeEOroex4nCBQxc`
- ✅ Feishu App ID and App Secret
## Step 1: Setup Authentication (3 minutes)
### Get Your App Credentials
1. Go to: https://open.feishu.cn/app
2. Find or create your app
3. Copy:
- App ID: `cli_xxxxxxxxx`
- App Secret: `xxxxxxxxxxxxx`
### Grant Permissions
1. In app settings → Permissions & Scopes
2. Add these scopes:
- `bitable:app`
- `bitable:app:readonly`
- `bitable:app:table:read`
3. Click "Apply"
## Step 2: Configure Data Request (5 minutes)
### Import Configuration
1. Open aPaaS: https://apaas.feishu.cn
2. Navigate to your app: `Dffwb10dwaz6UZs6c4HlWyV3g7c`
3. Open page: `pgeEOroex4nCBQxc`
4. Go to "Data Sources" → "+ Add Data Request"
5. Name: `getTikTokData`
### Paste This Configuration
```json
{
"method": "POST",
"url": "https://open.feishu.cn/open-apis/bitable/v1/apps/C8kmbTsqoa6rBesTKRpl8nV8gHd/tables/tblG4uuUvbwfvI9Z/records/search",
"headers": {
"Authorization": "Bearer {{tenant_access_token}}",
"Content-Type": "application/json"
},
"body": {
"field_names": ["Date", "Views", "Likes", "Comments", "Shares", "Followers", "Engagement_Rate"],
"page_size": 500,
"sort": [{"field_name": "Date", "desc": false}]
}
}
```
### Add Authentication
In Authentication settings:
```
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
```
### Test Connection
1. Click "Test" button
2. Should return data with 200 OK
3. Verify you see `data.items` array
4. Click "Save"
## Step 3: Add Components (5 minutes)
### Add Metric Cards
Drag 4 "Metric Card" components and configure:
**Card 1 - Total Views**:
```
Title: Total Views
Icon: 👁️
Value: {{getTikTokData.data.items.reduce((sum, i) => sum + i.fields.Views, 0)}}
Format: compact
```
**Card 2 - Total Likes**:
```
Title: Total Likes
Icon: ❤️
Value: {{getTikTokData.data.items.reduce((sum, i) => sum + i.fields.Likes, 0)}}
Format: compact
```
**Card 3 - Avg Engagement**:
```
Title: Avg Engagement Rate
Icon: 📊
Value: {{getTikTokData.data.items.reduce((sum, i) => sum + i.fields.Engagement_Rate, 0) / getTikTokData.data.items.length}}%
Format: 0.0%
```
**Card 4 - Followers**:
```
Title: Total Followers
Icon: 👥
Value: {{getTikTokData.data.items[getTikTokData.data.items.length - 1].fields.Followers}}
Format: compact
```
### Add Line Chart
1. Drag "Line Chart" component
2. Configure:
```
Title: Views & Engagement Trend
X-Axis: {{getTikTokData.data.items.map(i => new Date(i.fields.Date))}}
Series 1:
Name: Views
Data: {{getTikTokData.data.items.map(i => i.fields.Views)}}
Color: #3370FF
Series 2:
Name: Engagement Rate
Data: {{getTikTokData.data.items.map(i => i.fields.Engagement_Rate)}}
Color: #00C48C
```
### Add Bar Chart
1. Drag "Bar Chart" component
2. Configure:
```
Title: Engagement Breakdown
X-Axis: {{getTikTokData.data.items.map(i => new Date(i.fields.Date).toLocaleDateString())}}
Series 1 - Likes:
Data: {{getTikTokData.data.items.map(i => i.fields.Likes)}}
Color: #FF3B69
Stack: engagement
Series 2 - Comments:
Data: {{getTikTokData.data.items.map(i => i.fields.Comments)}}
Color: #3370FF
Stack: engagement
Series 3 - Shares:
Data: {{getTikTokData.data.items.map(i => i.fields.Shares)}}
Color: #00C48C
Stack: engagement
```
## Step 4: Test & Publish (2 minutes)
### Preview
1. Click "Preview" button
2. Verify:
- ✅ All metric cards show numbers
- ✅ Line chart displays trend
- ✅ Bar chart shows engagement data
- ✅ No errors in console (F12)
### Publish
1. Click "Save"
2. Click "Publish"
3. Share the page URL with users
## Done!
Your dashboard is now live with:
- 📊 4 key metrics
- 📈 Trend line chart
- 📊 Engagement bar chart
- 🔄 Real-time data from Bitable
## What's Next?
### Add Filters
Add Date Range Picker:
```
Component: Date Range Picker
Name: dateRangeFilter
Default: Last 30 days
```
Connect to data request:
```
Parameter: dateRange
Source: {{dateRangeFilter.value}}
Trigger: onChange → Refresh getTikTokData
```
### Add More Charts
- Pie chart for engagement distribution
- Table view for detailed records
- Comparison cards for period-over-period
### Optimize Performance
- Enable caching (5 min TTL)
- Add loading states
- Implement pagination for large datasets
## Need Help?
- 📖 [Full Configuration Guide](../APAAS_CHART_CONFIG.md)
- 📋 [Detailed Integration Steps](./INTEGRATION_GUIDE.md)
- 🔧 [Sample JSON Config](./apaas-data-request.json)
- 💬 [Feishu Community](https://open.feishu.cn/community/)
## Common Issues
### "401 Unauthorized"
- ✅ Check App ID and App Secret
- ✅ Verify token endpoint is correct
- ✅ Ensure app has Bitable permissions
### Charts Show "No Data"
- ✅ Test data request separately
- ✅ Check field names match exactly (case-sensitive)
- ✅ Verify Bitable has data
### Filter Not Working
- ✅ Add parameter to data request
- ✅ Set up onChange event
- ✅ Check filter expression syntax
---
**Time to Complete**: ~15 minutes
**Difficulty**: Beginner-friendly
**Version**: 1.0
