# πŸš€ Flutter WebView Bridge **ΠŸΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ готовая систСма для бСзопасной ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ Flutter Host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Flutter Web прилоТСниями Ρ‡Π΅Ρ€Π΅Π· WebView.** ## 🎯 ДСмонстрация БистСма Flutter WebView Bridge ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π° ΠΈ Π³ΠΎΡ‚ΠΎΠ²Π° ΠΊ использованию. ДСмонстрация ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΉ Ρ†ΠΈΠΊΠ» ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ Flutter Host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Flutter Web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ## πŸš€ Быстрый старт ### Запуск дСмонстрации: ```bash # 1. Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ зависимости melos bootstrap # 2. Π‘ΠΎΠ±Ρ€Π°Ρ‚ΡŒ web_app1 cd apps/web_app1 flutter build web # 3. Π—Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ host_app cd ../host_app flutter run # 4. Π’ host_app Π½Π°ΠΆΠ°Ρ‚ΡŒ "Load web_app1" для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄Π΅ΠΌΠΎ ``` ## 🎬 ДСмонстрация возмоТностСй ### 1. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Web прилоТСния - βœ… Host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ web_app1 Π² WebView - βœ… JavaScript bridge автоматичСски инТСктируСтся - βœ… Web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π³ΠΎΡ‚ΠΎΠ²ΠΎ ΠΊ ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ†ΠΈΠΈ ### 2. Ping/Pong коммуникация - βœ… Web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ отправляСт ping payload - βœ… Host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ pong - βœ… ДСмонстрируСт Π±Π°Π·ΠΎΠ²ΡƒΡŽ связь ### 3. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ - βœ… Web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ user info - βœ… Host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ - βœ… ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Ρƒ структурированных Π΄Π°Π½Π½Ρ‹Ρ… ### 4. АдминистративныС ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ - βœ… Web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ отправляСт admin ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ - βœ… Host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ выполняСт Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ дСйствия - βœ… ДСмонстрируСт Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ возмоТности ### 5. НативныС Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ - βœ… Web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ - βœ… Host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ систСмныС Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ - βœ… ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡŽ с Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ функциями ### 6. Авторизация - βœ… Web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ отправляСт Π΄Π°Π½Π½Ρ‹Π΅ для Π²Ρ…ΠΎΠ΄Π° - βœ… Host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΡŽ - βœ… Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΠΈ ### 7. Quiz систСма - βœ… Web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ отправляСт Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ quiz - βœ… Host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ ΠΈ сохраняСт Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ - βœ… ДСмонстрируСт ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ бизнСс-Π»ΠΎΠ³ΠΈΠΊΡƒ ## πŸ”§ ВСхничСская дСмонстрация ### Π˜Π·ΠΎΠ»ΡΡ†ΠΈΡ payload'ΠΎΠ² ```dart // web_app1 НЕ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ payloads_host // ❌ Π­Ρ‚ΠΎ Π²Ρ‹Π·ΠΎΠ²Π΅Ρ‚ ΠΎΡˆΠΈΠ±ΠΊΡƒ компиляции: // import 'package:payloads_host/payloads_host.dart'; // βœ… web_app1 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ: import 'package:payloads_shared/payloads_shared.dart'; import 'package:payloads_app1/payloads_app1.dart'; ``` ### JavaScript Bridge ```javascript // web_app1 отправляСт сообщСния Ρ‡Π΅Ρ€Π΅Π· JavaScript window.flutter_inappwebview.callHandler('sendPayload', { type: 'ping', data: { message: 'Hello from Web!' } }); ``` ### ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π² Host ```dart // host_app ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ ΠΈ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ payload'Ρ‹ class PingHandler extends PayloadHandler { @override Future handle(PingPayload payload) async { return PongResponse(message: 'Pong from Host!'); } } ``` ## πŸ“Š Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ тСстирования ### ΠŸΠΎΠ»Π½Ρ‹ΠΉ Ρ†ΠΈΠΊΠ» ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ†ΠΈΠΈ - βœ… web_app1 β†’ host_app: 100% ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ - βœ… host_app β†’ web_app1: 100% ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ - βœ… JavaScript bridge: ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½Π°Ρ Ρ€Π°Π±ΠΎΡ‚Π° - βœ… ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ payload'ΠΎΠ²: всС Ρ‚ΠΈΠΏΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ### Π˜Π·ΠΎΠ»ΡΡ†ΠΈΡ payload'ΠΎΠ² - βœ… web_app1 НЕ Π²ΠΈΠ΄ΠΈΡ‚ payloads_host - βœ… host_app ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всС payload'Ρ‹ - βœ… АрхитСктура изоляции Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ### ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ - βœ… Быстрая Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° WebView - βœ… МгновСнная коммуникация - βœ… Π‘Ρ‚Π°Π±ΠΈΠ»ΡŒΠ½Π°Ρ Ρ€Π°Π±ΠΎΡ‚Π° bridge ## 🎯 ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ прСимущСства ### 1. Π’ΠΈΠΏΠΎΠ±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ - ВсС payload'Ρ‹ Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ - ΠšΠΎΠΌΠΏΠΈΠ»ΡΡ‚ΠΎΡ€ провСряСт ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΡΡ‚ΡŒ - АвтодополнСниС Π² IDE ### 2. Π˜Π·ΠΎΠ»ΡΡ†ΠΈΡ - Web прилоТСния видят Ρ‚ΠΎΠ»ΡŒΠΊΠΎ свои payload'Ρ‹ - Host ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ доступ - БСзопасная Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° ### 3. Π Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΡΡ‚ΡŒ - Π›Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ payload'Ρ‹ - ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° - ΠŸΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ### 4. ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π° использования - ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ API для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ сообщСний - АвтоматичСская сСриализация - Π“ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ## πŸ“¦ Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ``` packages/ β”œβ”€β”€ bridge_core/ # Π‘Π°Π·ΠΎΠ²Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ ΠΈ сСриализация β”œβ”€β”€ payloads_shared/ # ΠžΠ±Ρ‰ΠΈΠ΅ payload'Ρ‹ для всСх ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ β”œβ”€β”€ payloads_host/ # Payload'Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для host прилоТСния └── payloads_app1/ # Payload'Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для web_app1 apps/ β”œβ”€β”€ host_app/ # Flutter ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с WebView └── web_app1/ # Flutter Web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ``` ## πŸ§ͺ ВСстированиС ```bash # Запуск всСх тСстов melos test # Или ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ: cd packages/bridge_core && flutter test cd packages/payloads_shared && flutter test cd packages/payloads_host && flutter test cd packages/payloads_app1 && flutter test ``` **Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:** 33 тСста проходят ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ βœ… ## πŸ“š ДокумСнтация - [ДСмонстрация](DEMO.md) - полная дСмонстрация возмоТностСй - [АрхитСктура](ARCHITECTURE.md) - тСхничСская докумСнтация - [ΠŸΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΡ](PRESENTATION.md) - прСзСнтация ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° - [ΠŸΡ€ΠΎΠ³Ρ€Π΅ΡΡ](PROJECT_PROGRESS.md) - статус Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ## πŸŽ‰ Π“ΠΎΡ‚ΠΎΠ²ΠΎ ΠΊ использованию! БистСма Flutter WebView Bridge ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π³ΠΎΡ‚ΠΎΠ²Π° для ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ Π² Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹. ВсС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ протСстированы, докумСнтация создана, Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π°. **Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг:** ИспользованиС Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ ΠΈΠ»ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. --- ## πŸ”— Бсылки - [План Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ](WORK_PLAN.md) - [Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°](PROJECT_STRUCTURE.md) - [ΠŸΡ€Π°Π²ΠΈΠ»Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ](RULES.md) **Flutter WebView Bridge** - Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для бСзопасной ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ Flutter Web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ! πŸŽ‰