01 Wie erhalte ich eine Entwicklungsumgebung für den GC Wizard?

Obwohl GCWizard Android und iOS unterstützt, konzentriere ich mich auf Android – es ist mein Lieblingsbetriebssystem. Daher fehlt im Moment das iOS-Setup.

Zur Entwicklungsumgebung gehört.

  • Installation von Git für Windows für die Versionsverwaltung
  • Installation von Flutter
  • Installation von Android Studio
  • Installation der benötigten Android Software Development Kits – für jeden Android Version gibt es ein entsprechendes SDK
  • Ein virtuelles Android Smartphone erstellen
  • GC Wizard als Projekt anlegen und ausführen

Installation der Versionsverwaltung

Das mit Abstand am weitesten verbreitete moderne Versionskontrollsystem der Welt ist heute Git. Lade daher das neueste Installationsprogramm für Git für Windows von https://gitforwindows.org/. Wenn Du das Installationsprogramm erfolgreich gestartet hast, solltest Du den Bildschirm des Git-Setup-Assistenten sehen. Folge den Aufforderungen, um die Installation abzuschließen. Die Standardoptionen sind für die meisten Benutzer sinnvoll. Um die Installation zu überprüfen, öffne die Windows-Eingabeaufforderung (öffne das Startmenü und gebe “CMD” ein und drücke die Eingabetaste). Gebe “git -version” in die Eingabeaufforderung ein und drücke die Eingabetaste. Wenn git erfolgreich installiert wurde, erhältst Du eine Information über die installierte Version.

Weiterhin sinnvoll ist eine grafische Versionsverwaltung für die Arbeit mit GitHub wie zum Beispiel Sourcetree | Free Git GUI for Mac and Windows (sourcetreeapp.com).

Speichern des Source Codes

Hole Dir den Source Code von GitHub

  • https://github.com/S-Man42/GCWizard.git (über https) oder
  • git@github.com:S-Man42/GCWizard.git (über SSH)

Installieren von Flutter

Flutter ist Googles UI-Toolkit zum Erstellen nativ kompilierter Anwendungen für Mobile, Web und Desktop aus einer einzigen Codebasis. Sie laufen mit einer Bildschirmwiederholrate von 60 fps.

Benutzeroberflächen, die mit Flutter erstellt wurden, sind weitaus leistungsfähiger als solche, die mit anderen plattformübergreifenden Entwicklungsframeworks wie React Native und Ionic erstellt wurden.

Einige weitere Gründe für die Verwendung von Flutter sind

  • Flutter verwendet Dart, eine schnelle, objektorientierte Sprache mit mehreren nützlichen Features wie Mixins, Generics, Isolates und optionale statische Typen.
  • Flutter hat seine eigenen UI-Komponenten, zusammen mit einer Engine zum Rendern sowohl auf der Android- als auch auf der iOS-Plattform. Die meisten dieser UI Komponenten entsprechen bereits von Haus aus den Richtlinien des Material Design.
  • Einfaches Prototyping und Iteration.
  • Profitiere von einem reichhaltigen Satz an Material Design Widgets, die mit Flutters eigenen Framework erstellt wurden.

Lade das Flutter SDK von https://flutter.dev/docs/get-started/install herunter, entpacke es und füge Flutter zum Windows-Pfad hinzu:

  1. Navigiere in den Ordner Flutter SDK.
  2. Gehe in den Ordner “bin” und kopiere den Verzeichnispfad.
  3. Gehe zu Systemsteuerung → Benutzerkonten → Benutzerkonten → Ändere “meine Umgebungsvariablen”.
  4. Wähle unter Benutzervariablen die Pfadvariable und klicke auf “Bearbeiten”.
  5. Gebe den kopierten Verzeichnispfad zum bin-Verzeichnis ein

Installation von Android Studio

Android Studio ist die offizielle integrierte Entwicklungsumgebung (IDE) für Googles Android-Betriebssystem, die auf der Software IntelliJ IDEA von JetBrains basiert und speziell für die Android-Entwicklung entwickelt wurde.
Downloade und installiere Android Studio (mit Android Virtual Device) von https://developer.android.com/studio.

Folge beim ersten Start den Installationsanweisungen.

Installieren der erforderlichen Android SDKs

Der erste Start von Android SDK sollte die Installation des Android
SDK (mindestens API Level 28) enthalten; falls nicht, führe dies manuell durch:

  • Öffne den Android SDK-Manager, indem Du zu Hauptmenü → Werkzeuge → SDK Manager → Systemeinstellungen → Android SDK gehst.
  • Jetzt wird der SDK-Manager mit einer Liste der verfügbaren Android-SDKs angezeigt.
  • Du kannst jede beliebige SDK-Versionen installieren, die Du möchtest. Für GC Wizard musst Du mindestens die SDK API Version 28 verwenden. Wähle die API-Version aus, klicke auf OK und folge den Schritten. Es wird eine Weile dauern um Ihre SDKs herunterzuladen und einzurichten

Installieren von Flutter und Dart

Navigiere zum Hauptmenü → Datei → Einstellungen → Plugins → Suche nach flutter → Installieren (sollte Dart automatisch installieren) → Neu starten

Nach dem Neustart, Flutter SDK Pfad einstellen. Navigiere dazu in das Hauptmenü → Datei → Einstellungen → Sprachen & Frameworks → Flutter → Flutter SDK Pfad → und gebe den Pfad ein, in den Du Flutter zuvor extrahiert hast.

Installieren eines virtuellen Smartphones

Mit dem Android AVD-Manager kannst Du viele virtuelle Geräte mit unterschiedlicher Auswahl an Geräten und SDK-Versionen erstellen, die Du verwenden kannst, um die Leistung der Flutter-Anwendung in verschiedenen Umgebungen zu testen.

Navigiere zu Hauptmenü → Werkzeuge → AVD-Manager.

Klicke im AVD-Manager auf den Button “Create Virtual Device” und wähle ein Gerät aus (z.B. das Pixel 3). Wähle die Android-Version, beispielsweise den höchsten empfohlenen API-Level (derzeit Android Q, API-Level 30) → Download → Übernehmen.

Nach Abschluss des Downloads, beende die Geräteerstellung; Du kannst das Gerät jetzt über den AVD-Manager starten (Schaltfläche Play). Bitte warte, bis das Gerät hochgefahren ist.

Überprüfen der Installation mit Flutter Doctor

Ok, nun ist die Flutter-Installation abgeschlossen und es ist an der Zeit, alles mit dem Flutter-Doktor zu verifizieren. Folge den folgenden Schritten, um die Installation abzuschließen.

  1. Öffne ein Windows-Befehlsfenster. Du kannst auch das eingebaute Terminal von Android Studio verwenden.
  2. Führe den Befehl “flutter doctor” aus. Wenn alle vorherigen Schritte reibungslos verlaufen sind, wirst Du eine entsprechende Ausgabe sehen und Du kannst mit der Erstellung der ersten Flutter-App beginnen.

Probleme, die auftreten können:

A new version of Flutter is available
Um dies zu lösen, führe “flutter upgrade” in einem Terminal-Fenster aus.

No devices available
Installiere ein Gerät mit dem AVD Manager und starte es.

Android license status unknown
Um weitere Informationen zu erhalten, führe “flutter doctor -android-licences” aus. Es handelt sich mehr oder weniger um eine Update-Ausgabe des SDK Managers. Um dieses Problem zu beheben, öffne den SDK-Manager und deaktiviere die Option “Obsolete Pakete ausblenden” und entferne die veralteten Pakete und lade die Updates herunter. Um Emulator-Images zu entfernen, sollte der Emulator nicht laufen.

GC Wizard als Projekt anlegen und ausführen

Navigiere zum Hauptmenü → Datei → Neu → Projekt importieren und gebe das Verzeichnis an, in dem Du den Quellcode gespeichert hast.

Am oberen Rand der Codeansicht sollte eine Meldung erscheinen: “Packages get wurde nicht ausgeführt”. Wenn ja: Klicke auf “Get dependencies”; wenn nicht: Gehe zum Terminal am unteren Rand
der IDE und gib “flutter pub get” ein.
Warten Sie eine Minute auf die neue Indizierung; danach sollte es keine Fehlermeldung mehr geben.

Führe “main.dart” aus. Manchmal braucht die IDE einen Moment, um den Emulator zu erkennen, warte also einen Moment und versuche es ein zweites Mal; der erste Start kann eine Weile dauern.

Von nun an wird jede Codeänderung sofort nach dem Speichern in die App
übertragen, dank der *Hot Reload-Funktion der IDE.