App für iOS und Android auf Kotlin + Flutter UI

Eintrag

Hallo an alle. Vor einiger Zeit habe ich beschlossen, mein Projekt gleichzeitig für Android und iOS zu erstellen. Natürlich stellte sich die Frage nach der Wahl der Technologie. Ein paar Wochen habe ich mir die beliebten Stacks angesehen und Kotlin / Native gewählt. Da ich ein Android-Entwickler bin, bin ich schon lange mit Kotlin vertraut, aber es gab nicht viel Erfahrung mit Swift und ich wollte den größten Teil des Codes für beide Plattformen gemeinsam haben. Daher stellte sich sofort die Frage, wie man eine Benutzeroberfläche für iOS schreibt. Ein kurzer Blick auf den Markt deutete darauf hin, dass es Flutter gibt, mit dem Sie die Benutzeroberfläche für zwei Plattformen gleichzeitig schreiben können. Eigentlich begann diese Geschichte.

Dieser Artikel beschreibt Flatters Build-Erfahrung als Benutzeroberfläche und Kotlin für die Kernlogik. Wichtig: Unter der Katze befinden sich viele Bilder und Anweisungen zum Zusammenbau des Projekts

Inhaltsverzeichnis

• Erstellen einer gemeinsam genutzten Bibliothek auf Kotlin
• Erstellen einer Android-Anwendung
• Erstellen Sie ein iOS-Projekt
• Hinzufügen von Flutter zu einer Android-App
• Hinzufügen von Flutter zu einem iOS-Projekt
• Fazit

Teil 1

Erstellen einer gemeinsam genutzten Bibliothek auf Kotlin

1. Wählen Sie Kotlin Mobile Shared Library
   
   
2. Weiter
   
   
3. Geben Sie unseren Arbeitsordner an. Hier habe ich einen separaten Ordner für das Projekt erstellt. Da ich 4 verschiedene Projekte haben werde und es bequemer ist, sie an einem Ort aufzubewahren
   
   
4. Es bleibt der Pfad zu sdk.dir in sdk.dir und das Projekt beginnt zu erstellen. Ich habe den Pfad /Users/vlad/Library/Android/sdk
   
   
5. Projektstruktur, ändern Sie die Paketnamen von sample habr.example
   
   
6. Es ist Zeit zu veröffentlichen, Call wrapper . Danach erscheint die .gradlew- .gradlew in unserem Projekt und es ist möglich, vom Terminal aus damit zu arbeiten
   
   
7. Führen Sie das Terminal aus ./gradlew publishToMavenLocal
   
   
8. Danach haben wir im lokalen Maven-Repository 4 Ordner, in denen unsere Bibliotheken liegen
   
   

Teil 2

Erstellen einer Android-Anwendung

Erstellen Sie ein Android-Projekt

1. Zum Zeitpunkt des Schreibens wird das Projekt mit einer "defekten" Abhängigkeit generiert. jre7 wir es am Ende von jre7 , erhalten wir koltin-stdlib beginnt das Projekt mit der Erstellung
   
   
2. Öffnen Sie build.gradle und fügen Sie mavenLocal Abschnitt repositories . Wichtig! Der Abschnitt " repositories " sollte sich in allprojects und nicht in buildScript
   
   
3. Jetzt können wir unsere Bibliothek als Abhängigkeit hinzufügen
   implementation 'habr.example:commonLibrary-jvm:0.0.1'
   
   
4. Wir öffnen activity_main.xml und geben in der TextView ID main_activity_text
   
   
5. In MainActivity.kt legen MainActivity.kt einfach den Text in dieser TextView
   
   
6. Großartig, zu diesem Zeitpunkt haben wir eine Android-Anwendung, die die Funktion hello() aus unserer Bibliothek verwenden kann
   hallo () auf dem emulator

   

Teil 3

Erstellen Sie ein iOS-Projekt

1. Auswählen einer Einzelansicht-App
   
   
2. Geben Sie die grundlegenden Informationen ein und wählen Sie den Ordner aus. Es ist wichtig, den Ordnerstamm für unsere anderen Projekte auszuwählen, da Xcode darin einen Unterordner mit dem Namen des Projekts erstellt
   
   
   
   
3. CocoaPods Sie zuerst CocoaPods . Führen Sie dazu pod init im Projektordner aus, schließen Sie das Projekt in Xcode und führen Sie die pod install . Wir sehen, dass die Installation erfolgreich abgeschlossen wurde
   
   
4. Wichtig! CocoaPods empfiehlt nicht, den Ordner /Pods zu .gitignore , aber ich habe es trotzdem getan. Da wir nach dem Hinzufügen von flutter Abhängigkeiten für jeden build neu konfigurieren. Bisher gefällt mir diese Lösung mehr als das Verstopfen von .git
5. Öffnen Sie das Projekt über die Datei Awesome App.xcworkspace
   
   
6. Wir öffnen das Terminal, gehen in den Ordner unserer commonLibrary und führen ./gradlew linkDebugFrameworkIos . Danach wird iOSFramework in unserem build Ordner iOSFramework
   
   
7. Wählen Sie Ziel
   
   
8. Und für dieses Ziel fügen wir die Binärdatei hinzu
   
   
9. Wählen Sie Andere hinzufügen
   
   
10. Geben Sie den Pfad zu dem framework , das Sie in Schritt 6 erhalten haben ( commonLibrary.framework ).
    
    
    
    
11. Jetzt im Projekt sollte dieses framework angezeigt werden
    
    
12. Gehen Sie zu Build Settings und deaktivieren Sie Enable Bitcode
    
    
13. Jetzt müssen Sie genau angeben, wo nach unserem framework gesucht werden soll, und den Framework Search Path öffnen
    
    
14. Geben Sie den Pfad "${PODS_ROOT}/../../commonLibrary" . Stellen Sie sicher, dass Sie recursive wählen. Natürlich können Sie darauf verzichten, wenn Sie den Pfad genauer konfigurieren. Da dies jedoch nur der Anfang des Projekts ist, ist es jetzt wichtig, dass wir sicherstellen, dass dieser ganze Haufen funktioniert. Und wir können den Weg ändern und dann
    
    
15. Wir müssen sicherstellen, dass bei jedem build in Xcode unser framework mit gradle . Öffnen Sie Build Phases
    
    
16. Fügen Sie eine neue Script Phase
    
    
17. Fügen Sie den Skriptcode hinzu.
    
    

     cd "${PODS_ROOT}/../../commonLibrary" echo $(pwd) ./gradlew linkIos 

    
    Hier gehen wir einfach in den Projektordner unserer Bibliothek und führen ./gradlew linkIos . Der Aufruf von echo $(pwd) wird nur benötigt, um in der Konsole echo $(pwd) , in welchem ​​Ordner wir uns befinden
    
    
18. Wir verschieben unsere build phase direkt nach den target dependencies ganz nach oben
    
    
19. Öffnen Sie nun den ViewController und rufen Sie unsere Funktion aus der Bibliothek auf
    
    
20. Wir starten unser Projekt und sehen
    
    

Das bedeutet, dass wir die Kotlin-Bibliothek korrekt mit dem iOS-Projekt verbunden haben.
Sie müssen nur noch Flattern als Framework für das Schreiben der Benutzeroberfläche in unsere Anwendungen einfügen, und Sie können mit der Entwicklung des Produkts beginnen

Teil 4

Hinzufügen von Flutter zu einer Android-App

Dann hat mir ein Artikel über Github sehr geholfen

1. Gehen Sie zum Stammordner, in dem sich alle unsere Projekte befinden, und flutter create -t module flutter_ui
   
   
   
2. Öffnen Sie settings.gradle und aktivieren Sie unser Flattermodul als Teilprojekt
   
   
   
3. Öffnen Sie die Datei build.gradle und fügen Sie unser Projekt abhängig hinzu
   
   
   
4. MainActivity.kt in FlutterActivity
   
   
   
5. Fügen Sie App.kt , in dem wir Flutter beim Start der Anwendung initialisieren
   
   
   
6. Ändern Sie das Manifest und sagen Sie, dass wir jetzt eine Klasse für die Application
   
   
   
7. java8 Sie sicher, dass Sie java8 hinzufügen, ohne dass dieses Flattern nicht startet
   
   
   
8. Wir sehen die Benutzeroberfläche in den Hello from JVM- Protokollen, was bedeutet, dass wir die Benutzeroberfläche in Flutter und die Hauptbibliothek in Kotlin / Native zusammenstellen
   
   
   
   
   
9. Fügen Sie MainActivity.kt eine Methode MainActivity.kt , die wir von Flutter aus aufrufen werden. Hier, auf einer Veranstaltung von Flutter, geben wir unser hello() aus der Kotlin-Bibliothek zurück
   
   
   
10. main.dart der main.dart Code main.dart , der die Methode im iOS/Android- Anwendung main.dart
    
    
    
11. Wir bekommen
    
    

Teil 5

Hinzufügen von Flutter zur iOS App

1. Aktualisierung unserer Podfile
   

    flutter_application_path = File.expand_path("../flutter_ui", File.dirname(path)) eval(File.read( File.join( flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding) 

   
   
   
   
2. Es ist wichtig . Fügen Sie $(inherited) zur ersten Zeile der framework search paths . Stellen Sie sicher, dass Ihre framework search paths nicht leer sind
   
   
   
   Wenn Sie die Abhängigkeiten in some/path/my_flutter/pubspec.yaml , müssen Sie flutter packages get from some/path/my_flutter , um die Abhängigkeiten in podhelper.rb zu aktualisieren. Führen Sie danach die pod install unter some/path/MyApp
3. Füge 1 weitere Build Phase , nur für Flutter. Über dem, was wir in Teil 3 der Script phase hinzugefügt haben
   
   

    "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed 

   
   
4. AppDelegate unser AppDelegate durch FlutterAppDelegate
   
   
5. Aktualisieren Sie ViewController
   
   
6. Wickeln Sie unseren ViewController in einen NavigatorController
   
   
7. Jetzt startet die Anwendung. Derzeit haben wir jedoch keine Verbindung zwischen Bibliothek und Flattern
8. Fügen Sie diesen Link mit FlutterMethodChannel
   
   
   
9. Großartig, jetzt verwendet die iOS-Anwendung flutter für die UI und kotlin für die kotlin .
   
   
   

Fazit

Was hier zu sagen ist: Ich behaupte nicht, dass Sie etwas Neues oder Einzigartiges gelernt haben. Ich habe gerade meine Erfahrungen geteilt, weil ich ungefähr 4 Arbeitstage verbracht habe, damit alles zusammenarbeitet. Und ich konnte keine Beispiele für Projektcode finden, der sowohl Kotlin / Native als auch Flutter verwendet

Abschlussprojekte

1. Projektgruppe
2. flattern-ui
3. ios
4. android
5. gemeinsame Bibliothek

Liste der Links, die mir geholfen haben, aber nicht sofort

1. Selbst flattern
2. Die Beziehung zwischen nativem Code und UI- Flattern-Plattformkanälen
3. Fügen Sie der vorhandenen Github- App ein Flattern hinzu
4. Kotlin Native native-Übersicht