# Quick Start Guide - TikTok Analytics VChart Component
Get your TikTok Analytics Dashboard up and running in minutes!
## Prerequisites
- Node.js 16+ installed
- Lark/Feishu account with aPaaS access
- Bitable table with TikTok analytics data
## Step 1: Install Dependencies (2 minutes)
```bash
cd /Users/mdch/hype-dash
# Install all required dependencies
npm install
# Install VChart dependencies
npm install @visactor/vchart @visactor/lark-vchart --save
```
## Step 2: Configure Environment (1 minute)
Create a `.env` file:
```env
LARK_APP_ID=your_app_id
LARK_APP_SECRET=your_app_secret
BITABLE_APP_TOKEN=your_bitable_app_token
BITABLE_TABLE_ID=tblG4uuUvbwfvI9Z
```
## Step 3: Build Component (3 minutes)
```bash
# Build the component
./scripts/deploy-vchart-component.sh dev
# Output will be in dist/vchart-component/
```
## Step 4: Deploy to aPaaS (5 minutes)
### Option A: Automated Deployment
```bash
# Set credentials
export LARK_APP_ID="your_app_id"
export LARK_APP_SECRET="your_app_secret"
# Deploy
./scripts/deploy-vchart-component.sh prod
```
### Option B: Manual Deployment
1. Go to [Feishu Open Platform](https://open.feishu.cn)
2. Navigate to your aPaaS application
3. Click **Custom Components** → **Upload**
4. Upload `dist/tiktok-dashboard-prod.zip`
5. Configure and publish
## Step 5: Use in Your Page (2 minutes)
In your aPaaS page, add the component:
```javascript
{
componentType: 'TikTokAnalyticsDashboard',
props: {
bitableTableId: 'tblG4uuUvbwfvI9Z',
bitableAppToken: 'your_token',
chartType: 'dashboard',
width: '100%',
height: 800
}
}
```
## Verification
Your dashboard should now display:
- ✓ Views over time line chart
- ✓ Top 10 videos bar chart
- ✓ Engagement breakdown pie chart
## Next Steps
- Read the [full documentation](VCHART_COMPONENT_GUIDE.md)
- Check out [examples](examples/vchart-dashboard-example.ts)
- Customize chart specs in `src/vchart-component/specs/`
## Troubleshooting
**Chart not showing?**
- Verify Bitable credentials are correct
- Check browser console for errors
- Ensure data exists in your Bitable table
**Build failing?**
- Run `npm install` again
- Check Node.js version (should be 16+)
- Clear cache: `rm -rf node_modules && npm install`
**Need help?**
- Check the [Troubleshooting section](VCHART_COMPONENT_GUIDE.md#troubleshooting)
- Contact: dev@hypelab.com
---
**Total Setup Time**: ~15 minutes
Ready to dive deeper? See the [complete guide](VCHART_COMPONENT_GUIDE.md)!
