daily-notification-plugin/test-apps/android-test

Daily Notification Test App - Vue 3

A modern Vue 3 + Vite + Capacitor test application for the Daily Notification Plugin, built with vue-facing-decorator for TypeScript class-based components.

🚀 Features

• Vue 3 with Composition API and TypeScript
• Vite for fast development and building
• vue-facing-decorator for class-based components
• Pinia for state management
• Vue Router for navigation
• Capacitor for native Android functionality
• Modern UI with glassmorphism design
• Responsive design for mobile and desktop

📱 App Structure

src/
├── components/          # Reusable Vue components
│   ├── cards/          # Card components (ActionCard, StatusCard, etc.)
│   ├── items/          # List item components
│   ├── layout/         # Layout components (Header, Footer)
│   └── ui/             # UI components (Loading, Error, etc.)
├── stores/             # Pinia stores
│   ├── app.ts         # Global app state
│   └── notifications.ts # Notification management
├── views/              # Page components
│   ├── HomeView.vue   # Dashboard
│   ├── ScheduleView.vue # Schedule notifications
│   ├── NotificationsView.vue # Manage notifications
│   ├── StatusView.vue # System status
│   ├── HistoryView.vue # Notification history
│   └── SettingsView.vue # App settings
├── router/             # Vue Router configuration
├── types/              # TypeScript type definitions
└── utils/              # Utility functions

🛠️ Development

Prerequisites

• Node.js 18+
• npm or yarn
• Android Studio (for Android development)
• Capacitor CLI

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Type checking
npm run type-check

# Linting
npm run lint

Android Development

# Sync with Capacitor
npm run sync

# Open Android Studio
npm run open

# Run on Android device/emulator
npm run android

🎨 UI Components

Class-Based Components

All components use vue-facing-decorator for TypeScript class-based syntax:

@Component({
  components: {
    ChildComponent
  }
})
export default class MyComponent extends Vue {
  @Prop() title!: string
  
  private data = ref('')
  
  get computedValue(): string {
    return this.data.value.toUpperCase()
  }
  
  private handleClick(): void {
    // Handle click
  }
}

State Management

Uses Pinia stores for reactive state management:

// stores/notifications.ts
export const useNotificationsStore = defineStore('notifications', () => {
  const scheduledNotifications = ref<ScheduledNotification[]>([])
  
  async function scheduleNotification(options: ScheduleOptions): Promise<void> {
    // Schedule logic
  }
  
  return {
    scheduledNotifications,
    scheduleNotification
  }
})

📊 Features

Dashboard (Home)

• Quick action cards
• System status overview
• Next scheduled notification
• Recent activity feed

Schedule Notifications

• Time picker
• Title and message inputs
• Sound and priority options
• URL support for deep linking
• Quick schedule presets

Notification Management

• View all scheduled notifications
• Cancel notifications
• Status indicators

System Status

• Permission checks
• Channel status
• Exact alarm settings
• Platform information
• Test notification functionality

History

• Delivered notification history
• Click and dismiss tracking
• Time-based filtering

🔧 Configuration

Capacitor Config

// capacitor.config.ts
const config: CapacitorConfig = {
  appId: 'com.timesafari.dailynotification.androidtest',
  appName: 'Daily Notification Test - Vue 3',
  webDir: 'dist',
  plugins: {
    DailyNotification: {
      storage: 'shared',
      ttlSeconds: 1800,
      prefetchLeadMinutes: 15,
      enableETagSupport: true,
      enableErrorHandling: true,
      enablePerformanceOptimization: true
    }
  }
}

Vite Config

// vite.config.ts
export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    sourcemap: true
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

🎯 Testing the Plugin

1. Start Development Server

   npm run dev
   

2. Build and Sync

   npm run build
   npm run sync
   

3. Run on Android

   npm run android
   

4. Test Features

   • Schedule notifications
   • Check system status
   • View notification history
   • Test clickable notifications

📱 Native Features

• Notification Scheduling - Schedule daily notifications
• Permission Management - Check and request permissions
• Status Monitoring - Real-time system status
• Deep Linking - URL support in notifications
• Background Processing - WorkManager integration

🎨 Design System

Colors

• Primary: Linear gradient (purple to blue)
• Success: #4caf50
• Warning: #ff9800
• Error: #f44336
• Info: #2196f3

Typography

• Headers: Bold, white with text-shadow
• Body: Regular, rgba white
• Code: Courier New monospace

Components

• Glassmorphism design with backdrop-filter
• Rounded corners (8px, 12px, 16px)
• Smooth transitions and hover effects
• Responsive grid layouts

🚀 Production Build

# Build for production
npm run build

# Preview production build
npm run preview

# Sync with Capacitor
npm run sync

# Build Android APK
npm run android

📝 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run android - Run on Android
• npm run sync - Sync with Capacitor
• npm run open - Open Android Studio
• npm run lint - Run ESLint
• npm run type-check - TypeScript type checking

🔍 Debugging

Vue DevTools

Install Vue DevTools browser extension for component inspection.

Capacitor Logs

# Android logs
adb logcat | grep -i "daily\|notification"

# Capacitor logs
npx cap run android --livereload --external

TypeScript

Enable strict mode in tsconfig.json for better type checking.

📚 Dependencies

Core

• Vue 3.4+
• Vite 5.0+
• TypeScript 5.3+
• Capacitor 5.0+

UI & State

• vue-facing-decorator 3.0+
• Pinia 2.1+
• Vue Router 4.2+

Development

• ESLint + TypeScript configs
• Vue TSC for type checking
• Modern module resolution

🤝 Contributing

1. Follow Vue 3 + TypeScript best practices
2. Use vue-facing-decorator for class components
3. Maintain responsive design
4. Add proper TypeScript types
5. Test on both web and Android

📄 License

MIT License - see LICENSE file for details.

---

Built with ❤️ using Vue 3 + Vite + Capacitor