|
| 1 | +# Shop Floor Demo - Declarative SQLite |
| 2 | + |
| 3 | +A comprehensive Flutter demonstration app showcasing offline-first collaborative data synchronization using the `declarative_sqlite` library. This demo implements a typical shop-floor/order management system with features commonly needed in industrial and collaborative applications. |
| 4 | + |
| 5 | +## 🎯 Demo Scenarios |
| 6 | + |
| 7 | +This application demonstrates the following key offline-first collaborative scenarios: |
| 8 | + |
| 9 | +### 1. **Order List with Reactive Filtering** |
| 10 | +- **Real-time Updates**: Order list automatically updates when data changes |
| 11 | +- **Advanced Filtering**: Filter by status (pending, in-progress, completed) and priority (high, medium, low) |
| 12 | +- **Search Functionality**: Full-text search across order numbers, customer names, and descriptions |
| 13 | +- **Query Builder Integration**: Leverages declarative_sqlite's query builder for efficient database operations |
| 14 | + |
| 15 | +### 2. **Order Detail Management** |
| 16 | +- **Comprehensive Views**: Detailed order information with tabbed interface |
| 17 | +- **Order Lines**: Individual line items with quantity, pricing, and status tracking |
| 18 | +- **Status Updates**: Real-time order status changes with LWW conflict resolution |
| 19 | +- **Data Validation**: Automatic validation of calculated totals and data integrity |
| 20 | + |
| 21 | +### 3. **Collaborative Notes with Offline-First GUIDs** |
| 22 | +- **Client-First Creation**: Notes created with GUIDs to avoid ID collisions |
| 23 | +- **Multi-Device Support**: Notes track which device created them |
| 24 | +- **Sync Status Tracking**: Visual indicators for synced vs. pending notes |
| 25 | +- **Note Types**: Categorized notes (general, priority, quality, issue) with visual distinction |
| 26 | +- **Conflict Resolution**: Demonstrates LWW (Last-Write-Wins) conflict resolution |
| 27 | + |
| 28 | +### 4. **Offline-First Data Architecture** |
| 29 | +- **GUID-Based Primary Keys**: All entities use GUIDs for offline-first creation |
| 30 | +- **Sync Operation Tracking**: Built-in tracking for operations that need server sync |
| 31 | +- **LWW Timestamps**: Last-Write-Wins conflict resolution for collaborative editing |
| 32 | +- **Device Attribution**: Track which device/user made changes |
| 33 | + |
| 34 | +## 🏗️ Architecture Highlights |
| 35 | + |
| 36 | +### Database Schema |
| 37 | +The app uses a comprehensive schema designed for offline-first operations: |
| 38 | + |
| 39 | +```dart |
| 40 | +// Orders with LWW conflict resolution |
| 41 | +.table('orders', (table) => table |
| 42 | + .text('id', (col) => col.primaryKey()) // UUID for offline-first |
| 43 | + .text('order_number', (col) => col.notNull().unique()) |
| 44 | + .text('customer_name', (col) => col.notNull()) |
| 45 | + .text('status', (col) => col.notNull().withDefaultValue('pending')) |
| 46 | + .real('total_amount', (col) => col.withDefaultValue(0.0)) |
| 47 | + .text('priority', (col) => col.withDefaultValue('medium')) |
| 48 | + // LWW columns for conflict resolution |
| 49 | + .text('status_lww_timestamp') |
| 50 | + .text('total_amount_lww_timestamp') |
| 51 | + .text('priority_lww_timestamp')) |
| 52 | +
|
| 53 | +// Notes with GUID support and sync tracking |
| 54 | +.table('notes', (table) => table |
| 55 | + .text('id', (col) => col.primaryKey()) // UUID for offline-first |
| 56 | + .text('order_id', (col) => col.notNull()) |
| 57 | + .text('content', (col) => col.notNull()) |
| 58 | + .text('author', (col) => col.notNull()) |
| 59 | + .text('note_type', (col) => col.withDefaultValue('general')) |
| 60 | + .integer('is_synced', (col) => col.withDefaultValue(0)) // Offline tracking |
| 61 | + .text('created_on_device')) // Device attribution |
| 62 | +``` |
| 63 | + |
| 64 | +### Global Database Service |
| 65 | +Centralized database management with reactive streams: |
| 66 | + |
| 67 | +```dart |
| 68 | +class DatabaseService { |
| 69 | + static final DatabaseService instance = DatabaseService._internal(); |
| 70 | + |
| 71 | + // Reactive streams for UI updates |
| 72 | + Stream<List<Order>> get orderUpdates; |
| 73 | + Stream<List<OrderLine>> get orderLineUpdates; |
| 74 | + Stream<List<Note>> get noteUpdates; |
| 75 | + |
| 76 | + // LWW conflict resolution |
| 77 | + Future<void> updateOrderStatus(String orderId, String newStatus); |
| 78 | + |
| 79 | + // Offline-first note creation with GUIDs |
| 80 | + Future<String> addNote(String orderId, String content, String author); |
| 81 | +} |
| 82 | +``` |
| 83 | + |
| 84 | +### Widget Architecture |
| 85 | +Clean separation of concerns with reusable components: |
| 86 | + |
| 87 | +- **`OrderListPage`**: Main list with filtering and search |
| 88 | +- **`OrderDetailPage`**: Detailed view with tabbed interface |
| 89 | +- **`OrderCard`**: Reusable order display component |
| 90 | +- **`NoteCard`**: Collaborative note display with sync indicators |
| 91 | +- **`AddNoteDialog`**: Offline-first note creation |
| 92 | + |
| 93 | +## 🚀 Key Features Demonstrated |
| 94 | + |
| 95 | +### Reactive Data Access |
| 96 | +- **StreamBuilder Integration**: UI automatically updates when data changes |
| 97 | +- **Efficient Querying**: Query builder patterns for complex filtering |
| 98 | +- **Real-time Sync**: Changes propagate immediately across the application |
| 99 | + |
| 100 | +### Offline-First Design |
| 101 | +- **GUID Generation**: Unique IDs generated client-side to prevent conflicts |
| 102 | +- **Sync Tracking**: Visual indicators for data sync status |
| 103 | +- **Device Attribution**: Track which device/user made changes |
| 104 | +- **Conflict Resolution**: LWW timestamps for handling concurrent edits |
| 105 | + |
| 106 | +### Collaborative Features |
| 107 | +- **Multi-User Notes**: Multiple authors can add notes to orders |
| 108 | +- **Type-Safe Operations**: Leverages declarative_sqlite's type safety |
| 109 | +- **Data Validation**: Automatic validation of business rules and calculations |
| 110 | +- **Error Handling**: Comprehensive error handling with user feedback |
| 111 | + |
| 112 | +### Professional UI/UX |
| 113 | +- **Material Design 3**: Modern Flutter UI with consistent theming |
| 114 | +- **Responsive Layout**: Adapts to different screen sizes |
| 115 | +- **Status Indicators**: Clear visual feedback for data states |
| 116 | +- **Performance**: Efficient rendering with proper state management |
| 117 | + |
| 118 | +## 🛠️ Technical Implementation |
| 119 | + |
| 120 | +### Dependencies |
| 121 | +- **Flutter**: UI framework |
| 122 | +- **declarative_sqlite**: Schema management and data access |
| 123 | +- **sqflite**: SQLite database engine |
| 124 | +- **uuid**: GUID generation for offline-first IDs |
| 125 | + |
| 126 | +### Schema Migration |
| 127 | +Automatic schema creation and migration using declarative_sqlite: |
| 128 | + |
| 129 | +```dart |
| 130 | +final migrator = SchemaMigrator(); |
| 131 | +await migrator.migrate(database, schema); |
| 132 | +``` |
| 133 | + |
| 134 | +### Data Access Layer |
| 135 | +Type-safe CRUD operations with conflict resolution: |
| 136 | + |
| 137 | +```dart |
| 138 | +final dataAccess = await DataAccess.create( |
| 139 | + database: database, |
| 140 | + schema: schema, |
| 141 | + enableLWW: true, // Enable Last-Write-Wins conflict resolution |
| 142 | +); |
| 143 | +``` |
| 144 | + |
| 145 | +## 🎮 How to Use the Demo |
| 146 | + |
| 147 | +1. **Browse Orders**: View the main order list with real-time updates |
| 148 | +2. **Filter & Search**: Use the filter bar to find specific orders |
| 149 | +3. **View Details**: Tap on any order to see detailed information |
| 150 | +4. **Manage Status**: Update order status and see LWW conflict resolution |
| 151 | +5. **Add Notes**: Create collaborative notes with different types |
| 152 | +6. **Observe Sync**: Watch sync indicators show offline vs. synced state |
| 153 | +7. **Test Conflicts**: Create simultaneous updates to see conflict resolution |
| 154 | + |
| 155 | +## 🔬 Learning Outcomes |
| 156 | + |
| 157 | +This demo showcases how to build production-ready offline-first applications with: |
| 158 | + |
| 159 | +- **Declarative Schema Management**: Define database structure with code |
| 160 | +- **Automatic Migration**: Handle schema changes seamlessly |
| 161 | +- **Conflict Resolution**: Manage concurrent edits in collaborative environments |
| 162 | +- **Type Safety**: Leverage Dart's type system for database operations |
| 163 | +- **Reactive UI**: Build responsive interfaces that update automatically |
| 164 | +- **Professional Architecture**: Organize code for maintainability and scalability |
| 165 | + |
| 166 | +## 📚 Further Exploration |
| 167 | + |
| 168 | +The demo provides a solid foundation for building more complex offline-first applications. Key areas for extension include: |
| 169 | + |
| 170 | +- **Server Synchronization**: Add actual server sync implementation |
| 171 | +- **User Authentication**: Integrate user management and permissions |
| 172 | +- **Advanced Queries**: Explore more complex query patterns |
| 173 | +- **Real-time Collaboration**: Add WebSocket support for live updates |
| 174 | +- **Data Encryption**: Implement secure data storage |
| 175 | +- **Batch Operations**: Handle large dataset synchronization |
| 176 | + |
| 177 | +This demo proves that declarative_sqlite provides a powerful foundation for building sophisticated offline-first collaborative applications with clean, maintainable code. |
0 commit comments