#!/bin/bash
################################################################################
# TikTok Analytics Dashboard - Run All Approaches Demo
#
# This script demonstrates all three approaches to building
# TikTok Analytics Dashboards in Lark/Feishu:
# - Approach A: Native Bitable Dashboard (copy existing)
# - Approach B: aPaaS Native Chart Components (configuration guide)
# - Approach C: Custom VChart Component (build and deploy)
#
# Usage:
# ./scripts/run-all-approaches.sh [approach]
#
# Arguments:
# approach - Optional: 'a', 'b', 'c', or 'all' (default: all)
#
# Requirements:
# - LARK_API_KEY environment variable set
# - Node.js >= 16.0.0
# - npm >= 8.0.0
# - TypeScript compiled (npm run build)
#
# Version: 1.0.0
# Date: 2025-12-09
################################################################################
set -e # Exit on error
# Color output
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
NC='\033[0m' # No Color
# Configuration
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
PROJECT_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
# Functions
print_header() {
echo ""
echo -e "${BLUE}════════════════════════════════════════════════════════════════${NC}"
echo -e "${BLUE} $1${NC}"
echo -e "${BLUE}════════════════════════════════════════════════════════════════${NC}"
echo ""
}
print_success() {
echo -e "${GREEN}✓ $1${NC}"
}
print_error() {
echo -e "${RED}✗ $1${NC}"
}
print_warning() {
echo -e "${YELLOW}⚠ $1${NC}"
}
print_info() {
echo -e "${BLUE}ℹ $1${NC}"
}
check_prerequisites() {
print_header "Checking Prerequisites"
# Check Node.js
if ! command -v node &> /dev/null; then
print_error "Node.js is not installed"
exit 1
fi
NODE_VERSION=$(node -v)
print_success "Node.js: $NODE_VERSION"
# Check npm
if ! command -v npm &> /dev/null; then
print_error "npm is not installed"
exit 1
fi
NPM_VERSION=$(npm -v)
print_success "npm: $NPM_VERSION"
# Check TypeScript
if ! command -v tsc &> /dev/null; then
print_warning "TypeScript not found globally, using local"
fi
# Check LARK_API_KEY
if [ -z "$LARK_API_KEY" ]; then
print_error "LARK_API_KEY environment variable is not set"
echo ""
echo "Please set it:"
echo " export LARK_API_KEY=\"your-api-key\""
echo ""
exit 1
fi
print_success "LARK_API_KEY is set"
# Check if dist exists
if [ ! -d "$PROJECT_ROOT/dist" ]; then
print_warning "dist directory not found, building..."
cd "$PROJECT_ROOT"
npm run build
fi
print_success "Project is built"
echo ""
}
run_approach_a() {
print_header "APPROACH A: Native Bitable Dashboard"
echo "This approach uses Lark Bitable's built-in dashboard functionality"
echo "to create visualizations by copying and modifying existing dashboards."
echo ""
print_info "Documentation:"
echo " - Main Guide: TIKTOK_DASHBOARD_CONFIG.md"
echo " - Quick Start: QUICK_START_TIKTOK.md"
echo " - Implementation: IMPLEMENTATION_SUMMARY.md"
echo ""
print_info "Step 1: Analyzing TikTok Data"
echo "Running: npm run tiktok:analyze"
echo ""
cd "$PROJECT_ROOT"
npm run tiktok:analyze
echo ""
print_success "Data analysis complete"
echo ""
print_info "Step 2: Available Operations"
echo ""
echo "You can now run:"
echo " 1. npm run tiktok:copy - Copy existing dashboard"
echo " 2. npm run tiktok:create - Create new dashboard with blocks"
echo ""
read -p "Would you like to copy the dashboard? (y/n): " -n 1 -r
echo ""
if [[ $REPLY =~ ^[Yy]$ ]]; then
print_info "Copying dashboard..."
npm run tiktok:copy
print_success "Dashboard copied successfully"
else
print_info "Skipping dashboard copy"
fi
echo ""
print_success "Approach A demonstration complete"
echo ""
echo "Next steps:"
echo " 1. Open the dashboard URL shown above"
echo " 2. Customize layout and styling in Lark UI"
echo " 3. Add filters and configure auto-refresh"
echo " 4. Share with your team"
echo ""
}
run_approach_b() {
print_header "APPROACH B: aPaaS Native Chart Components"
echo "This approach uses Feishu/Lark aPaaS platform's visual editor"
echo "with native chart components connected to Bitable data."
echo ""
print_info "Documentation:"
echo " - Chart Config: APAAS_CHART_CONFIG.md"
echo " - Integration: config/INTEGRATION_GUIDE.md"
echo " - Quick Start: config/QUICK_START.md"
echo " - Data Request: config/apaas-data-request.json"
echo ""
print_info "Application Details:"
echo " - aPaaS App ID: Dffwb10dwaz6UZs6c4HlWyV3g7c"
echo " - Page ID: pgeEOroex4nCBQxc"
echo " - Platform: https://apaas.feishu.cn"
echo ""
print_info "Implementation Steps:"
echo ""
echo " 1. Open aPaaS Application:"
echo " https://apaas.feishu.cn/app/Dffwb10dwaz6UZs6c4HlWyV3g7c"
echo ""
echo " 2. Import Data Request Configuration:"
echo " File: $PROJECT_ROOT/config/apaas-data-request.json"
echo ""
echo " 3. Follow Integration Guide:"
echo " - Phase 1: Verify Bitable data source"
echo " - Phase 2: Configure authentication"
echo " - Phase 3: Set up data request"
echo " - Phase 4: Add chart components"
echo " - Phase 5: Configure interactions"
echo " - Phase 6: Test in preview mode"
echo " - Phase 7: Deploy to production"
echo ""
print_info "Configuration File Preview:"
echo ""
if [ -f "$PROJECT_ROOT/config/apaas-data-request.json" ]; then
head -20 "$PROJECT_ROOT/config/apaas-data-request.json"
echo " ..."
echo " (see full file at config/apaas-data-request.json)"
else
print_warning "Configuration file not found"
fi
echo ""
print_success "Approach B demonstration complete"
echo ""
echo "This is a no-code approach - continue in the aPaaS web interface"
echo ""
}
run_approach_c() {
print_header "APPROACH C: Custom VChart Component"
echo "This approach uses a custom React component with VChart library"
echo "for full programmatic control, deployed as an aPaaS custom component."
echo ""
print_info "Documentation:"
echo " - Component Guide: VCHART_COMPONENT_GUIDE.md"
echo " - Implementation: VCHART_IMPLEMENTATION_SUMMARY.md"
echo " - Quick Start: VCHART_QUICKSTART.md"
echo ""
print_info "Step 1: Checking VChart Dependencies"
echo ""
cd "$PROJECT_ROOT"
# Check if VChart dependencies are installed
if npm list @visactor/vchart &> /dev/null; then
print_success "VChart dependencies are installed"
else
print_warning "VChart dependencies not found"
read -p "Would you like to install them? (y/n): " -n 1 -r
echo ""
if [[ $REPLY =~ ^[Yy]$ ]]; then
print_info "Installing VChart dependencies..."
npm install --save @visactor/vchart @visactor/lark-vchart react react-dom
npm install --save-dev @types/react @types/react-dom
print_success "Dependencies installed"
else
print_warning "Skipping dependency installation"
echo "Note: Approach C requires VChart dependencies"
return
fi
fi
echo ""
print_info "Step 2: Building VChart Component"
echo ""
# Check if setup script exists
if [ -f "$PROJECT_ROOT/scripts/setup-vchart-component.sh" ]; then
print_info "Running setup script..."
bash "$PROJECT_ROOT/scripts/setup-vchart-component.sh"
else
print_info "Building TypeScript..."
npm run build
print_success "Build complete"
fi
echo ""
print_info "Step 3: Available Deployment Options"
echo ""
echo "You can now:"
echo " 1. npm run vchart:deploy - Build and package for deployment"
echo " 2. Upload to aPaaS - Upload the generated ZIP file"
echo ""
read -p "Would you like to create the deployment package? (y/n): " -n 1 -r
echo ""
if [[ $REPLY =~ ^[Yy]$ ]]; then
print_info "Creating deployment package..."
if [ -f "$PROJECT_ROOT/scripts/deploy-vchart-component.sh" ]; then
bash "$PROJECT_ROOT/scripts/deploy-vchart-component.sh"
else
print_warning "Deployment script not found"
print_info "You can manually package the component"
fi
else
print_info "Skipping deployment package creation"
fi
echo ""
print_success "Approach C demonstration complete"
echo ""
echo "Next steps:"
echo " 1. Upload dist/vchart-component/component/tiktok-analytics-dashboard.zip"
echo " 2. Register in aPaaS custom components"
echo " 3. Add <TikTokDashboard> to your aPaaS page"
echo ""
}
show_comparison() {
print_header "Comparison of All Three Approaches"
echo ""
echo "┌─────────────────────────────────────────────────────────────────────────┐"
echo "│ Feature │ Approach A │ Approach B │ Approach C │"
echo "├─────────────────────────────────────────────────────────────────────────┤"
echo "│ Setup Time │ 2-5 min │ 15-30 min │ 1-2 hours │"
echo "│ Coding Required │ No │ No │ Yes (React/TS) │"
echo "│ Customization │ Medium │ High │ Very High │"
echo "│ Maintenance │ Manual UI │ Visual Editor │ Code-based │"
echo "│ Version Control │ No │ No │ Yes (Git) │"
echo "│ Auto-Refresh │ Yes │ Yes │ Yes │"
echo "│ Interactive Events │ Limited │ Yes │ Full │"
echo "│ Best For │ Quick setup │ No-code apps │ Full control │"
echo "└─────────────────────────────────────────────────────────────────────────┘"
echo ""
print_info "Common Foundation:"
echo " - Data Source: Bitable Table tblG4uuUvbwfvI9Z"
echo " - Base: C8kmbTsqoa6rBesTKRpl8nV8gHd"
echo " - Records: 150 TikTok videos"
echo " - Field Schema: 9 standard fields"
echo ""
print_info "Documentation:"
echo " - Unified Guide: UNIFIED_DASHBOARD_GUIDE.md"
echo " - Consistency Checklist: CONSISTENCY_CHECKLIST.md"
echo ""
}
show_menu() {
print_header "TikTok Analytics Dashboard - All Approaches Demo"
echo "This script demonstrates all three approaches:"
echo ""
echo " A) Native Bitable Dashboard (Copy & customize)"
echo " B) aPaaS Native Chart Components (No-code visual editor)"
echo " C) Custom VChart Component (React/TypeScript component)"
echo ""
echo " X) Compare All Approaches"
echo " Q) Quit"
echo ""
}
interactive_mode() {
while true; do
show_menu
read -p "Select an approach to demonstrate (A/B/C/X/Q): " choice
echo ""
case $choice in
[Aa])
run_approach_a
;;
[Bb])
run_approach_b
;;
[Cc])
run_approach_c
;;
[Xx])
show_comparison
;;
[Qq])
print_info "Exiting..."
exit 0
;;
*)
print_error "Invalid choice. Please select A, B, C, X, or Q."
;;
esac
echo ""
read -p "Press Enter to continue..." -r
done
}
main() {
# Check prerequisites first
check_prerequisites
# Parse command line argument
APPROACH="${1:-interactive}"
case $APPROACH in
a|A|approach-a)
run_approach_a
;;
b|B|approach-b)
run_approach_b
;;
c|C|approach-c)
run_approach_c
;;
all)
run_approach_a
run_approach_b
run_approach_c
show_comparison
;;
compare)
show_comparison
;;
interactive)
interactive_mode
;;
*)
echo "Usage: $0 [approach]"
echo ""
echo "Arguments:"
echo " a, approach-a - Run Approach A demo"
echo " b, approach-b - Run Approach B demo"
echo " c, approach-c - Run Approach C demo"
echo " all - Run all approaches sequentially"
echo " compare - Show comparison table"
echo " interactive - Interactive menu (default)"
echo ""
exit 1
;;
esac
}
# Run main function
main "$@"
