# πŸ”§ Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π»ΠΎΠ³ΠΈΠΊΠΈ отобраТСния событий ## βœ… ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ€Π΅ΡˆΠ΅Π½Π° ### 🎯 ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° - ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π»ΠΈ события, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΈ сами ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΠ»ΠΈ - НС Π±Ρ‹Π»ΠΎ Ρ‡Π΅Ρ‚ΠΊΠΎΠ³ΠΎ раздСлСния ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ событиями - Ping Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π» ΠΎΡ‚Π²Π΅Ρ‚ Pong ### πŸ”§ РСшСниС - ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ **ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅** события - Π£Π±Ρ€Π°Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ собствСнных ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… событий - Π£ΠΏΡ€ΠΎΡ‰Π΅Π½Π° цвСтовая схСма (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π΅Π»Π΅Π½Ρ‹ΠΉ для ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Ρ…) --- ## πŸ“ ВнСсСнныС измСнСния ### 1. **Π£Π±Ρ€Π°Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ событий ΠΏΡ€ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ΅** #### Host App: ```dart // Π£Π΄Π°Π»Π΅Π½ΠΎ ΠΈΠ· всСх ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ: _addEvent('Sent', 'PingPayload', pingPayload.toString()); _addEvent('Sent', 'ShowNativeDialogPayload', dialogPayload.toString()); _addEvent('Sent', 'SecretAdminCommandPayload', adminPayload.toString()); ``` #### Web App: ```dart // Π£Π΄Π°Π»Π΅Π½ΠΎ ΠΈΠ· всСх ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ: _addEvent('Sent', 'PingPayload', 'Hello from Web App 1!'); _addEvent('Sent', 'GetUserInfoPayload', 'Requesting user info'); _addEvent('Sent', 'LoginRequestPayload', 'Login request for $username'); _addEvent('Sent', 'SubmitQuizPayload', 'Quiz results for quiz $quizId'); ``` ### 2. **ΠžΠ±Π½ΠΎΠ²Π»Π΅Π½Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ** ```dart // Π‘Ρ‹Π»ΠΎ: 'Recent Events (${_events.length})' // Π‘Ρ‚Π°Π»ΠΎ: 'Received Events (${_events.length})' ``` ### 3. **Π£ΠΏΡ€ΠΎΡ‰Π΅Π½Π° цвСтовая схСма** ```dart // Π‘Ρ‹Π»ΠΎ: color: type == 'Received' ? Colors.green.shade100 : Colors.blue.shade100, Icon(type == 'Received' ? Icons.download : Icons.upload, ...) // Π‘Ρ‚Π°Π»ΠΎ: color: Colors.green.shade100, Icon(Icons.download, ...) ``` ### 4. **Π£ΠΏΡ€ΠΎΡ‰Π΅Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ событий** ```dart // Π£Π±Ρ€Π°Π½Ρ‹ Π½Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅: // final type = event['type'] as String; // final details = event['details'] as String; ``` --- ## 🎯 Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ### βœ… **Новая Π»ΠΎΠ³ΠΈΠΊΠ°:** - **Host App** ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ события, ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ ΠΎΡ‚ Web App - **Web App** ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ события, ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ ΠΎΡ‚ Host App - **Ping β†’ Pong** Ρ†ΠΈΠΊΠ» Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²ΠΈΠ΄ΠΈΠΌ Π² ΠΎΠ±ΠΎΠΈΡ… прилоТСниях - **Π§Π΅Ρ‚ΠΊΠΎΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅** - ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΈΠ΄ΠΈΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ входящиС события ### βœ… **ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… событий:** #### Π’ Host App (ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ ΠΎΡ‚ Web App): - `PingPayload` - ping ΠΎΡ‚ web прилоТСния - `GetUserInfoPayload` - запрос ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ - `LoginRequestPayload` - запрос Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΠΈ - `SubmitQuizPayload` - Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ quiz #### Π’ Web App (ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ ΠΎΡ‚ Host App): - `PingResponsePayload` - ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° ping (pong) - `UserInfoResponsePayload` - ΠΎΡ‚Π²Π΅Ρ‚ с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ - `LoginResponsePayload` - ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΡŽ - `QuizSubmissionResponsePayload` - ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° quiz --- ## πŸš€ Как ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ### 1. **ΠžΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Ping ΠΈΠ· Web App** - НаТмитС "Send Ping" Π² web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ - Π’ host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ появится событиС `PingPayload` - Π’ web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ появится событиС `PingResponsePayload` (pong) ### 2. **ΠžΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Ping ΠΈΠ· Host App** - НаТмитС "Send Ping" Π² host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ - Π’ web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ появится событиС `PingPayload` - Π’ host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ появится событиС `PingResponsePayload` (pong) ### 3. **ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ payload'Ρ‹** - Request User Info - Login Request - Quiz Results - Admin Commands - Native Dialogs --- ## πŸŽ‰ Π˜Ρ‚ΠΎΠ³ **Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ события, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ прилоТСния!** - βœ… Π§Π΅Ρ‚ΠΊΠΎΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ входящих ΠΈ исходящих событий - βœ… Ping β†’ Pong Ρ†ΠΈΠΊΠ» Π²ΠΈΠ΄ΠΈΠΌ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ - βœ… УпрощСнная ΠΈ понятная Π»ΠΎΠ³ΠΈΠΊΠ° отобраТСния - βœ… Π“ΠΎΡ‚ΠΎΠ²ΠΎ для дСмонстрации bridge ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ†ΠΈΠΈ