Initial commit
This commit is contained in:
Zhongwei Li
467
commands/examples.md
Normal file
467
commands/examples.md
Normal file
@@ -0,0 +1,467 @@
|
||||
Real-world usage examples and scenarios for the Odoo PWA Generator plugin.
|
||||
|
||||
## What this command does:
|
||||
- Provides practical, real-world examples of using the plugin
|
||||
- Shows complete workflows from start to finish
|
||||
- Demonstrates different use cases and scenarios
|
||||
- Includes code samples and best practices
|
||||
- Helps users understand the plugin's capabilities
|
||||
|
||||
## Example 1: Expense Tracking App 💰
|
||||
|
||||
### Business Need:
|
||||
Create a mobile-friendly app for employees to track expenses on-the-go, even without internet connection. Sync with Odoo for approval and reimbursement.
|
||||
|
||||
### Odoo Model Setup:
|
||||
In Odoo Studio, create model `x_expense` with fields:
|
||||
- `x_studio_description` (Char) - Expense description
|
||||
- `x_studio_amount` (Float) - Amount spent
|
||||
- `x_studio_date` (Date) - When expense occurred
|
||||
- `x_studio_category` (Selection) - Meal, Travel, Hotel, Other
|
||||
- `x_studio_receipt` (Binary) - Photo of receipt
|
||||
- `x_studio_employee` (Many2one to res.partner) - Who spent it
|
||||
- `x_studio_status` (Selection) - Draft, Submitted, Approved, Paid
|
||||
|
||||
### Implementation Steps:
|
||||
```
|
||||
1. /new-svelte-pwa
|
||||
- Project name: expense-tracker
|
||||
- Model: expense
|
||||
- Display name: Expense
|
||||
- Deployment: vercel
|
||||
|
||||
2. cd expense-tracker
|
||||
|
||||
3. /init-project
|
||||
- Install dependencies
|
||||
- Configure Odoo credentials
|
||||
- Test connection
|
||||
|
||||
4. Customize the UI:
|
||||
- Add category filter
|
||||
- Display total amount
|
||||
- Add receipt upload
|
||||
- Status badge colors
|
||||
|
||||
5. /deploy-vercel
|
||||
- Deploy to production
|
||||
- Share with team
|
||||
```
|
||||
|
||||
### Key Features:
|
||||
- ✅ Record expenses offline
|
||||
- ✅ Take photos of receipts
|
||||
- ✅ Categorize expenses
|
||||
- ✅ Auto-sync when online
|
||||
- ✅ View approval status
|
||||
- ✅ Calculate monthly totals
|
||||
|
||||
### Code Customization:
|
||||
```javascript
|
||||
// Add total calculation to cache store
|
||||
export const totalExpenses = derived(expenseCache, $cache => {
|
||||
return $cache.reduce((sum, exp) => sum + exp.x_studio_amount, 0);
|
||||
});
|
||||
|
||||
// Add category filter
|
||||
export function filterByCategory(category) {
|
||||
return $expenseCache.filter(e => e.x_studio_category === category);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Example 2: Inventory Management System 📦
|
||||
|
||||
### Business Need:
|
||||
Warehouse staff need to check stock levels, update quantities, and add new inventory items from mobile devices or tablets, even in areas with poor connectivity.
|
||||
|
||||
### Odoo Model Setup:
|
||||
Create model `x_inventory` with fields:
|
||||
- `x_studio_sku` (Char) - Product SKU
|
||||
- `x_studio_name` (Char) - Product name
|
||||
- `x_studio_quantity` (Integer) - Current stock
|
||||
- `x_studio_location` (Char) - Warehouse location
|
||||
- `x_studio_min_quantity` (Integer) - Reorder threshold
|
||||
- `x_studio_supplier` (Many2one to res.partner) - Supplier
|
||||
- `x_studio_last_restock` (Date) - Last restock date
|
||||
|
||||
### Implementation Steps:
|
||||
```
|
||||
1. /new-react-pwa
|
||||
- Project name: inventory-manager
|
||||
- Model: inventory
|
||||
- Display name: Inventory Item
|
||||
- Deployment: vercel
|
||||
|
||||
2. cd inventory-manager
|
||||
|
||||
3. /init-project
|
||||
|
||||
4. Add barcode scanning:
|
||||
- npm install @zxing/library
|
||||
- Add scanner component
|
||||
- Look up items by SKU
|
||||
|
||||
5. Add low stock alerts:
|
||||
- Filter items where quantity < min_quantity
|
||||
- Show notification badge
|
||||
- Sort by urgency
|
||||
|
||||
6. /deploy-vercel
|
||||
```
|
||||
|
||||
### Key Features:
|
||||
- ✅ Scan barcodes to find items
|
||||
- ✅ Update quantities offline
|
||||
- ✅ Low stock alerts
|
||||
- ✅ Search by name or SKU
|
||||
- ✅ Filter by location
|
||||
- ✅ Auto-sync updates
|
||||
|
||||
### Code Customization:
|
||||
```javascript
|
||||
// Add low stock filter
|
||||
const lowStockItems = useMemo(() => {
|
||||
return records.filter(item =>
|
||||
item.x_studio_quantity < item.x_studio_min_quantity
|
||||
);
|
||||
}, [records]);
|
||||
|
||||
// Add barcode lookup
|
||||
async function lookupBySKU(sku) {
|
||||
return records.find(item => item.x_studio_sku === sku);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Example 3: Field Service CRM 🔧
|
||||
|
||||
### Business Need:
|
||||
Field technicians need to view customer information, log service calls, and update job status while on-site, often without reliable internet.
|
||||
|
||||
### Odoo Model Setup:
|
||||
Create model `x_service_call` with fields:
|
||||
- `x_studio_customer` (Many2one to res.partner) - Customer
|
||||
- `x_studio_issue` (Text) - Problem description
|
||||
- `x_studio_status` (Selection) - Scheduled, In Progress, Completed
|
||||
- `x_studio_scheduled_date` (Datetime) - When to visit
|
||||
- `x_studio_technician` (Many2one to res.partner) - Assigned tech
|
||||
- `x_studio_notes` (Text) - Service notes
|
||||
- `x_studio_parts_used` (Char) - Parts replaced
|
||||
- `x_studio_duration` (Float) - Hours spent
|
||||
|
||||
### Implementation Steps:
|
||||
```
|
||||
1. /new-vue-pwa
|
||||
- Project name: field-service-crm
|
||||
- Model: service_call
|
||||
- Display name: Service Call
|
||||
- Deployment: vercel
|
||||
|
||||
2. /init-project
|
||||
|
||||
3. Add customer details:
|
||||
- Create customer cache store
|
||||
- /add-model
|
||||
- Model: customer (use res.partner)
|
||||
- Generate UI: no (use existing)
|
||||
|
||||
4. Add map integration:
|
||||
- npm install @googlemaps/js-api-loader
|
||||
- Show customer locations
|
||||
- Route planning
|
||||
|
||||
5. Add time tracking:
|
||||
- Start/stop timer
|
||||
- Calculate duration
|
||||
- Generate timesheet
|
||||
|
||||
6. /deploy-vercel
|
||||
```
|
||||
|
||||
### Key Features:
|
||||
- ✅ View today's schedule
|
||||
- ✅ Customer contact info
|
||||
- ✅ Log service notes offline
|
||||
- ✅ Track time spent
|
||||
- ✅ Update job status
|
||||
- ✅ View service history
|
||||
|
||||
---
|
||||
|
||||
## Example 4: Sales Order Entry 🛒
|
||||
|
||||
### Business Need:
|
||||
Sales reps at trade shows need to take orders offline and sync them with Odoo when they get back online.
|
||||
|
||||
### Odoo Model Setup:
|
||||
Create model `x_sales_order` with fields:
|
||||
- `x_studio_customer` (Many2one to res.partner)
|
||||
- `x_studio_date` (Date)
|
||||
- `x_studio_items` (Text/JSON) - Line items
|
||||
- `x_studio_total` (Float) - Order total
|
||||
- `x_studio_status` (Selection) - Draft, Sent, Confirmed
|
||||
- `x_studio_notes` (Text) - Special instructions
|
||||
- `x_studio_salesperson` (Many2one to res.partner)
|
||||
|
||||
### Implementation Steps:
|
||||
```
|
||||
1. /new-svelte-pwa
|
||||
- Project name: sales-order-entry
|
||||
- Model: sales_order
|
||||
- Display name: Sales Order
|
||||
|
||||
2. /add-model
|
||||
- Model: customer (res.partner)
|
||||
- Add product catalog model
|
||||
|
||||
3. Build line item editor:
|
||||
- Add/remove products
|
||||
- Quantity and price
|
||||
- Calculate totals
|
||||
|
||||
4. Add customer search:
|
||||
- Autocomplete
|
||||
- Recently viewed
|
||||
- New customer form
|
||||
|
||||
5. /deploy-vercel
|
||||
```
|
||||
|
||||
### Key Features:
|
||||
- ✅ Search products
|
||||
- ✅ Build order offline
|
||||
- ✅ Calculate totals
|
||||
- ✅ Customer lookup
|
||||
- ✅ Sync when online
|
||||
- ✅ Email confirmation
|
||||
|
||||
---
|
||||
|
||||
## Example 5: Multi-Model Project Management 📋
|
||||
|
||||
### Business Need:
|
||||
Manage projects with tasks, time entries, and documents, all syncing with Odoo.
|
||||
|
||||
### Multiple Models:
|
||||
1. `x_project` - Projects
|
||||
2. `x_task` - Tasks
|
||||
3. `x_time_entry` - Time tracking
|
||||
4. `x_document` - File attachments
|
||||
|
||||
### Implementation Steps:
|
||||
```
|
||||
1. /new-svelte-pwa
|
||||
- Project name: project-manager
|
||||
- Model: project
|
||||
- Display name: Project
|
||||
|
||||
2. /add-model
|
||||
- Model: task
|
||||
- Generate UI: yes
|
||||
|
||||
3. /add-model
|
||||
- Model: time_entry
|
||||
- Generate UI: yes
|
||||
|
||||
4. /add-model
|
||||
- Model: document
|
||||
- Generate UI: yes
|
||||
|
||||
5. Add relationships:
|
||||
- Tasks belong to projects
|
||||
- Time entries belong to tasks
|
||||
- Documents belong to projects
|
||||
|
||||
6. Build dashboard:
|
||||
- Project overview
|
||||
- Task list by status
|
||||
- Total hours tracked
|
||||
- Recent documents
|
||||
|
||||
7. /deploy-vercel
|
||||
```
|
||||
|
||||
### Key Features:
|
||||
- ✅ Multiple model types
|
||||
- ✅ Relationships between models
|
||||
- ✅ Aggregate data (total hours)
|
||||
- ✅ Complex filtering
|
||||
- ✅ Dashboard views
|
||||
|
||||
---
|
||||
|
||||
## Example 6: Custom Cache Strategy 🎯
|
||||
|
||||
### Scenario:
|
||||
Need a custom caching strategy for frequently changing data.
|
||||
|
||||
### Implementation:
|
||||
```
|
||||
1. Open existing project
|
||||
|
||||
2. /create-cache-store
|
||||
- Model: notification
|
||||
- Shorter cache timeout (1 minute)
|
||||
- More frequent sync (30 seconds)
|
||||
|
||||
3. Customize the generated store:
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Shorten cache validity
|
||||
const CACHE_VALIDITY = 60 * 1000; // 1 minute
|
||||
|
||||
// More frequent sync
|
||||
const SYNC_INTERVAL = 30 * 1000; // 30 seconds
|
||||
|
||||
// Add real-time refresh
|
||||
export function enableRealTimeSync() {
|
||||
return setInterval(() => {
|
||||
refresh();
|
||||
}, SYNC_INTERVAL);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Example 7: Migrating Existing App 🔄
|
||||
|
||||
### Scenario:
|
||||
Have an existing web app, want to add Odoo integration and offline functionality.
|
||||
|
||||
### Implementation Steps:
|
||||
```
|
||||
1. Generate reference implementation:
|
||||
/new-svelte-pwa
|
||||
- Project name: reference-app
|
||||
- Model: your_model
|
||||
|
||||
2. Study generated code:
|
||||
- Review odoo.js client
|
||||
- Study cache.js pattern
|
||||
- Examine API routes
|
||||
|
||||
3. Copy patterns to existing app:
|
||||
- Copy src/lib/odoo.js
|
||||
- Copy src/routes/api/odoo/+server.js
|
||||
- Adapt cache store to your state management
|
||||
|
||||
4. Test integration:
|
||||
/test-connection
|
||||
|
||||
5. Gradually add features:
|
||||
- Start with read-only
|
||||
- Add create functionality
|
||||
- Add update/delete
|
||||
- Add offline support
|
||||
|
||||
6. /deploy-vercel
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Common Customizations:
|
||||
|
||||
### 1. Add Search Functionality
|
||||
```javascript
|
||||
export function searchRecords(query) {
|
||||
return $cache.filter(record =>
|
||||
record.x_studio_name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Add Sorting
|
||||
```javascript
|
||||
export function sortBy(field, direction = 'asc') {
|
||||
return $cache.sort((a, b) => {
|
||||
const valA = a[field];
|
||||
const valB = b[field];
|
||||
return direction === 'asc' ? valA - valB : valB - valA;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Add Pagination
|
||||
```javascript
|
||||
export function paginate(page, pageSize) {
|
||||
const start = (page - 1) * pageSize;
|
||||
return $cache.slice(start, start + pageSize);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Add Export to CSV
|
||||
```javascript
|
||||
export function exportToCSV() {
|
||||
const headers = ['ID', 'Name', 'Amount', 'Date'];
|
||||
const rows = $cache.map(r => [
|
||||
r.id,
|
||||
r.x_studio_name,
|
||||
r.x_studio_amount,
|
||||
r.x_studio_date
|
||||
]);
|
||||
// Convert to CSV and download
|
||||
}
|
||||
```
|
||||
|
||||
### 5. Add Bulk Operations
|
||||
```javascript
|
||||
export async function bulkUpdate(ids, fields) {
|
||||
const promises = ids.map(id => update(id, fields));
|
||||
return Promise.all(promises);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tips for Success:
|
||||
|
||||
### Start Simple
|
||||
1. Generate basic PWA first
|
||||
2. Test with sample data
|
||||
3. Add features incrementally
|
||||
4. Deploy early and often
|
||||
|
||||
### Plan Your Models
|
||||
1. Design Odoo model schema carefully
|
||||
2. Include all necessary fields
|
||||
3. Think about relationships
|
||||
4. Consider mobile UX
|
||||
|
||||
### Test Thoroughly
|
||||
1. Test offline functionality
|
||||
2. Verify sync works correctly
|
||||
3. Check error handling
|
||||
4. Test on real devices
|
||||
|
||||
### Optimize Performance
|
||||
1. Limit initial data load
|
||||
2. Use pagination for large datasets
|
||||
3. Lazy load images
|
||||
4. Minimize bundle size
|
||||
|
||||
### Deploy Confidently
|
||||
1. Test build locally
|
||||
2. Use staging environment
|
||||
3. Monitor errors
|
||||
4. Have rollback plan
|
||||
|
||||
---
|
||||
|
||||
## Example prompts to use this command:
|
||||
- `/examples` - Show all examples
|
||||
- User: "Show me real-world examples"
|
||||
- User: "How do I build an expense tracker?"
|
||||
- User: "Give me ideas for using this plugin"
|
||||
|
||||
## Next Steps:
|
||||
After reviewing these examples:
|
||||
1. Choose a use case similar to your needs
|
||||
2. Follow the implementation steps
|
||||
3. Customize to match your requirements
|
||||
4. Deploy and iterate
|
||||
|
||||
Need help? Run `/help` for more information!
|
||||
Reference in New Issue
Block a user