de TruongSinh Tran-Nguyen

Cum se configurează canalele platformei Flutter cu Protobuf

Acest post este de nivel intermediar-avansat. Este destinat publicului care urmează scrieți un cod personalizat specific platformei ca plugin Flutter.

TLDR: Când scrieți cod specific platformei ca pluginuri Flutter, ar trebui să utilizați ProtoBuf pentru siguranță de tip, performanță ridicată și o experiență de dezvoltare superbă. Exemplul de cod și toți cei 5 pași sunt disponibili pe my GitHub.

Cum se configureaza canalele platformei Flutter cu Protobuf

Problema

Când scrieți cod specific platformei ca pluginuri Flutter, unul dintre lucrurile cheie este transferul de date între partea Dart și partea platformei. Sub capotă, sunt doar o grămadă de 0 și 1 binare. Deși tot codul cu care avem de-a face (Dart, Java / Kotlin, ObjC / Swift) este tastat, deci Flutter face mai ușor să scrieți:

Cu toate acestea, uitându-vă la tabelul de mai sus, veți observa mai multe lucruri:

  • Familia FlutterStandardTypedData este supărătoare. (Crede-mă, ai făcut asta?)
  • Orice structură mai complicată decât acele tipuri mai mult sau mai puțin „primitive” va trebui să fie folosită List<dynamic>; and Map<String, dinamic>;, in wdinamica acestuia ar trebui să fie un steag roșu.

Să ne uităm la erorile mele obișnuite List (și același lucru se întâmplă cu Map):

și cât de detaliat este să faci corect:

Acesta este doar un nivel superior List/Map, imaginați-vă că trebuie să intrați adânc în structura de date pe care trebuie să o treceți înainte și înapoi între Dart și specific platformei:

Deci, pentru a rezuma:

  • FlutterStandardTypedData este frustrant.
  • Distribuirea datelor este un coșmar.
  • Când ai de-a face cu List/Map , pierdem siguranța de tip (mai ales cu greșeli de tipare în Mapcheia sau codul / structura refactorizării).
  • List<dynamic>; and Map<String, dinamice> nu sunt deosebit de bune în ceea ce privește performanța.

Soluția

Tampoane de protocol, aka Protobuf, este un mecanism extensibil pentru limbajul neutru, neutru pentru platformă, pentru serializarea datelor structurate, care se întâmplă să accepte:

  • Lance (întreținut de Google)
  • Java (întreținut de Google)
  • Kotlin prin legări Java (Non-JVM Kotlin nu este încă acceptat, dar nu este problema noastră)
  • ObjC (întreținut de Google)
  • Rapid (întreținut de Apple)

Deci, hai să ne scufundăm adânc!

Pregătiți proiectul

Voi crea proiectul de pluginuri cu Kotlin și Swift (pentru că îi iubesc), oricum este același lucru pentru Java și ObjC.

flutter create -t plugin -i swift -a kotlin plugin_with_protobuf

Atunci ar trebui să vezi

All done!
[✓] Flutter is fully installed. (Channel master, v1.4.2, on Mac OS X 10.14.3 18D109, locale en-US)
[✓] Android toolchain - develop for Android devices is fully installed. (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices is fully installed. (Xcode 10.2)
[✓] Android Studio is fully installed. (version 3.3)
[✓] VS Code is fully installed. (version 1.32.3)
[!] Connected device is not available.
Run "flutter doctor" for information about installing additional components.
In order to run your application, type:
$ cd plugin_with_protobuf/example
$ flutter run
Your application code is in plugin_with_protobuf/example/lib/main.dart.
Your plugin code is in plugin_with_protobuf/lib/plugin_with_protobuf.dart.
Host platform code is in the "android" and "ios" directories under plugin_with_protobuf.
To edit platform code in an IDE see https://flutter.io/developing-packages/#edit-plugin-package.

Acum executați proiectul pentru a vă asigura că totul este în regulă. Presupun că aveți deja un dispozitiv conectat sau un simulator / emulator care rulează

cd plugin_with_protobuf/exampleflutter run

Sau mai ușor, utilizați IDE-ul dvs. preferat, fie VS Code, fie Android Studio / IntelliJ. Oricum, ar trebui să aveți următoarele:

Cum se configureaza canalele platformei Flutter cu Protobuf

Codul curent la acest pas este disponibil pe GitHub.

Pregătiți medii

  • Instalați compilatorul Protobuf: brew install protobuf pe Mac sau consultați instrucțiunile detaliate din CITEȘTE-MĂ.
  • Instalați Swift-plugin pentru compilatorul Protobuf: brew install swift-protobuf pe Mac sau consultați instrucțiunile detaliate din CITEȘTE-MĂ.
  • Instalați pluginul Dart pentru compilatorul Protobuf: pub global activate protoc_plugin
  • Instalați extensia Protobuf pentru IDE-uri
1611315606 462 Cum se configureaza canalele platformei Flutter cu Protobuf
1611315606 947 Cum se configureaza canalele platformei Flutter cu Protobuf

Creați proto

Acum să folosim un IDE. Folosesc atât VS Code, cât și Android Studio, dar pentru aceasta, voi folosi Android Studio. Deschideți proiectul plugin_with_protobuf (nu plugin_with_protobuf/example) cu Android Studio. Apoi creați un nou director numit protos și creați un fișier nou person.proto

1611315606 683 Cum se configureaza canalele platformei Flutter cu Protobuf

Codul curent la acest pas este disponibil pe GitHub.

Generați proto în Dart

Puteți vedea din primele 2 rânduri din person.proto, executați primele comenzi pentru a genera cod Dart (poate doriți să creați gen directoare în prealabil).

protoc --dart_out=./lib/gen ./protos/person.proto

În pubspec.yaml , adăugați și o dependență pentru runtime-ul Protobuf:

Codul curent la acest pas este disponibil pe GitHub.

Generați proto în Swift

Similar cu pasul 2:

protoc --swift_out=./ios/Classes ./protos/person.proto

În ios/plugin_with_protobuf.podspec , adăugați o dependență și pentru runtime-ul Protobuf, rețineți că SwiftProtobuf 1.4 necesită iOS 9.0 minim.

Codul curent la acest pas este disponibil pe GitHub.

Trimiteți date de la Swift și primiți în Dart

Deschideți XCode din Android Studio:

1611315606 258 Cum se configureaza canalele platformei Flutter cu Protobuf

Creați date simulate (crearea datelor simulate este abreviată, puteți vedea diferențele complete pe GitHub), serializează și trimite-l la Dart.

Înapoi la Android Studio, primiți și deserializați datele:

Unele alte modificări ale interfeței de utilizare sunt abreviate, puteți vedea diferențele complete pe GitHub. Acum pare să funcționeze.

1611315606 355 Cum se configureaza canalele platformei Flutter cu Protobuf

Codul curent la acest pas este disponibil pe GitHub.

Generați proto și trimiteți date de la Kotlin

Spre deosebire de pașii 2 și 3, prototipul în Java / Kotlin poate fi generat automat de la Gradle. Trebuie doar să folosim protobuf-gradle-plugin.

Similar pasului 4, creați date simulate (crearea datelor simulate este abreviată, puteți vedea diferențele complete pe GitHub), serializează și trimite-l la Dart.

Și pentru că putem primi deja date de la Dart și afișate, „doar funcționează”.

1611315607 546 Cum se configureaza canalele platformei Flutter cu Protobuf

Codul curent la acest pas este disponibil pe GitHub.

Concluzie

Comunicarea dintre Dart și codul specific platformei, mai ales atunci când implică structuri de date complicate, ar trebui să utilizeze un instrument de serializare sigur și de înaltă performanță, cum ar fi ProtoBuf (de exemplu, BuiltValue este mai mult sau mai puțin sigur de tip, dar nu la fel de performant). Este norocos că ProtoBuf acceptă toate cele 5 limbi și instrumentele de construcție necesare pentru Flutter și este ușor de integrat.

Notă finală: ce fel de test de unitate / test de integrare credeți că ar trebui să avem pentru acest exemplu? ?