MVVMCross mit Xamarin Native

Bei Xamarin Native Entwicklung, ist es am Anfang ein grosser Herausforderung, ein guten Struktur zu haben und dabei so viel Code wie möglich zu teilen.
Ich kenne die Xamarin Programmierung immer besser, aber bei diesem Punkt habe ich immer noch ein bisschen mühe. Deshalb, habe ich mich für diesen Blog MVVMCross angeschaut, mit MVVMCross kann man das MVVM Pattern für Xamarin Native Projekten anwenden.

In diesem Blog Post werde ich die Motivation hinter MVVMCross erklären und das Grundprinzip zeigen, ein Tutorial mit Code Snippets findet man aber hier nicht.
Ich werde auch auf Xamarin Android fokussieren und weder iOS noch Windows Phone in diesem Blog abdecken.
Ich habe mich für MVVMCross entschieden, das Prinzip ist aber bei andere Technologien wie zum beispiel MVVMLight das gleiche.

Inhalt

  • Was ist MVVM
  • Projektstruktur mit MVVMCross
  • Navigation in MVVMCross
  • Bindings in MVVMCross

Was ist MVVM

MVVM ist ein Entwurfsmuster, ähnlich zu MVC und MVP.
MVVM wurde ursprünglich für WPF(Windows Presentation Foundation) entwickelt, wird aber heute unter anderem auch bei UWP und eben Xamarin Entwicklung verwendet.

MVVM steht für Model – View – ViewModel, für die meisten sind Model und View schon längst bekannte Begriffe, aber was ist das ViewModel?
ViewModel ist genau das was es heisst, es ist das Model für einen bestimmten View. Wichtig ist hier das ein ViewModel nur zu ein View gehört (Es gibt aber wie immer Ausnahmen).
Eine der grössten Vorteile vom MVVM ist die Möglichkeit Daten im ViewModel zu View-Elemente zu binden.

Ich habe schon zwei Blog Posts zum Thema geschrieben, diese findest du unter folgende Links:

Projektstruktur mit MVVMCross

Mit MVVMCross speichern wir unsere ViewModels im PCL und teilen es übere alle Plattforme.

Blog MVVM Shared Code
MVVMCross

Das heisst im Native Teil, haben wir nur noch den View selber und die Events die auf Native ebene laufen.

Im Shared Teil haben wir unsere Services, unsere REST Calls, ViewModels, Models und Strings.

Wie funktioniert MVVM Cross?

MVVM Cross bietet dir ganz viele Features an:

  • ViewModel zu View Bindings
  • ViewModel zu ViewModel Navigation (ermöglicht dir, die Navigation nur einmal im Shared Code zu schreiben, statt ein Mal pro Plattform)
  •  Dependency und Property Injection
  • Ein Plugin Framework, welcher das Einbinden von Location Extensions sehr einfacht macht

Schauen wir doch das wichtigste von diesen Features an.

ViewModel zu View Bindings

Als erstes muss man ein Klass im Shared Code erstellen, welcher vom MvxViewModel erbt.
Jetzt muss unser Activity im Android Code vom MvxActivity<ContactViewModel> erben. Somit weiss erstens der SharedCode, welcher View er wann anzeigen muss (ViewModel zu ViewModel Navigation) und zweitens weiss der Activity, welcher ViewModel er zum View binden muss.
Danach muss man eben den ViewModel Benachrichtigen, zu welchem View er gehört, so dass die Bindings im XML funktionieren werden.
Das KeyWord ist hier “BindingInflate”.

SubscribeToViewModel

Jetzt können wir in unserem XML Sachen definieren wie:

  • local:MvxBind=”” zu unserem Property oder Command im ViewModel
  • Converter=”” zu unserem Konverter (für zum Beispiel Datum)
  • FallbackValue=”” zu ein standard Value (zum Beispiel N/A)
  • Mode=”” zu unserem Bindingstyp (MvvmCross unterstützt TwoWay bindings)

Ich hatte immer ein bisschen Respekt vom MVVM Pattern in Xamarin Native, aber ich freue mich jetzt es mehr und mehr kennen zulernen und werde sicher ein weiteren Blog mit ein Tutorial oder ähnliches im Zukunft schreiben.

 

Advertisements

Erste Erfahrungen mit Xamarin UI Tests – Android Quick Start

Ich habe der Xamarin UI Tests – Android Quick Start durchgeführt und in diesem Blog schreibe ich über meine Erfahrung vom Nichtswisser zum ersten Erfolgreichen Test.

Wie bin ich auf Xamarin UI Tests gekommen?

Ich habe in ein Projekt die Aufgabe bekommen, die Möglichkeiten im Raum UI Tests für unsere Xamarin Applikationen anzuschauen. Ich habe mich natürlich direkt auf Xamarin Test Clouds Webseite gestürzt.
Habe aber schnell gemerkt, dass ich diese Option für die Zukunft auf die Seite legen muss, da wir momentan kein kostenpflichtiges Abonnent abschliessen möchten.

UI Tests ohne Xamarin Test Cloud möglich?

Ich habe dann weiter geschaut, wie wir die Xamarin UI Tests ohne der Cloud Funktion benutzten konnten und habe ziemlich schnell gemerkt, dass es eigentlich ganz einfach funktioniert und man genau so gut auf ein Physisches Gerät oder ein Emulator laufen kann.

Hat jemand ein Test Recorder erwähnt?

Als ich irgendwann von ein Test Recorder gehört habe, begann ich mit viel Neugier nach diesem magischen Tool zu suchen. Ich fand ihn auch ziemlich schnell, wurde aber genau so schnell wieder enttäuscht, der Xamarin Test Recorder funktioniert momentan (22.09.2017) ausschliesslich mit Visual Studio Enterprise und ich habe nur Professional auf meinem Rechner.
Ich habe auch im nachhinein von einer Mitarbeiter mitbekommen, dass er nicht so gute Erfahrungen mit dem Recorder gemacht hat und hat mich geraten, bis weiteres die Tests von Hand zu schreiben.

Also gut, ich weiss was ich machen will, wo fange ich an?

Als erstes habe ich die Grundlagen in der Xamarin Dokumentation ein bisschen besser kennengelernt. Hier fand ich wichtige Informationen, wie Requirements und bekam ein erster Einblick in der Syntax vom UI.Tests API.

Link: Xamarin UI Tests – Introduction

Also los, kommen wir endlich zum Visual Studio

In der Xamarin UI Tests Dokumentation haben sie Tutorials für Android sowie iOS. Ich habe mich entschieden mit Android anzufangen.
Wichtig ist hier, dass man vor dem Anfangen alle Requirements gut durchliest und die benötigte Software installiert.

Link: Xamarin UI Tests – Quick Starts – Überblick und Requirements

So schnell wir den Requirements installiert haben, können wir mit dem Tutorial anfangen.

Ich habe für den Tutorial folgender Setup benutzt:

  • Visual Studio: Visual Studio 2017 15.3
  • Test Gerät: Physisches Gerät – Samsung S7 (Android 7.0)
  • Test Runner: JetBrains ReSharper Ultimate 2017.2
  • OS: Windows 10

Link: Xamarin UI Tests – Android Quick Start

Schwierigkeiten beim “Creating the First Test”:

Leider, wie es so gewöhnlich ist, konnte ich den Tutorial nicht ganz 1 zu 1 nachmachen, da ich an ein paar Schwierigkeiten gestossen bin.

No Tests found

NoTestsFound

Im Tutorial steht, dass man die Tests durch “Test -> Run -> All Tests” laufen sollte.
Wenn ich das gemacht habe, konnte Visual Studio jedoch keine Tests finden.
Ich vermute, dass es funktionieren würde, wenn ich den NUnit Test Adapter for NUnit 2 statt ReSharper als Test Runner benutzt hätte.

Wenn du aber auch den ReSharper benutzt, starte den Tests statt wie im Tutorial, durch “ReSharper -> Unit Tests -> Run Unit Tests” oder durch “Rechtsklick -> Run Unit Tests”.

Android SDK not Found

SdkNotFound

Dieser Fehler war recht einfach zu lösen, da der Stacktrace mir genau gesagt hat, was gefehlt hat. Nämlich die Environment Variable “ANDROID_HOME”.
Ich habe die Android SDK in der Tools -> Options -> Xamarin -> Android Settings schon verlinkt, jedoch benutzt der “Resharper Test Runner” nicht dieser Einstellung, stattdessen geht er diesen Pfad in den Environment Variablen holen.

Hier ein Link, falls du nicht weisst, wo man eine Environment Variable hinzufügt:
SuperUser.com – Antwort auf “How do I set Environment Variables in Windows 10”

ApkFile or InstalledApp has not been configured

ApkFileNotConfigured

Diesen Fehler war ein bisschen schwieriger zu beheben, aber zum Glück fand ich eine Lösung auf Xamarin Forums von Xamarin Team Mitglied TomOpgenorth.
Bei der Frage geht es eigentlich um Native Android Apps und nicht Xamarin.Android Apps, aber die Lösung ist genau die Selbe wie bei Xamarin.Android.

Link: How to run Xamarin UI Tests on Android Native

TomOpgenorthAnswer.png

Wenn wir den Code nur ein bisschen nach unsere Solution anpassen, funktioniert der Code und wir können den REPL anzeigen lassen.

pathToApkWithChanges

ReplWorking

Allgemeiner Eindruck

Xamarin UI Tests sehen ganz schon cool aus und ich werde mich genauer mit diesen Tema auseinandersetzten.
Ich bin sehr gespannt was für Möglichkeiten es gibt mit sowie ohne Xamarin Test Cloud und was für Einflüsse es auf Test-Aufwände und Qualität haben kann.

Login in Xamarin.Android

In diesem Blogg werden wir SharedPreferences für Xamarin.Android anschauen, um ein einfaches Login zu programmieren.

Inhalt:

  • Was ist SharedPreferences
  • SharedPreferences füllen
  • SharedPreferences abfragen
  • Splash Activity hinzufügen

Was ist SharedPreferences

Um es einfach und ungenau zu halten, ist SharedPreferences Session für Android Applikationen.
Es ist eine ganz einfache Key-Value Speicher, der man von überall im App zugreifen kann. Diese Key-Value Wert bleiben auch gespeichert nach dem man den App schliesst, das verhindert, dass den Benutzer jedes Mal sich neu einloggen muss.

SharedPreferences füllen

Um die SharedPreferences abzuspeichern, brauchen wir zwei Member Variable:

  • ISharedPreferences
  • ISharedPreferencesEditor

Nach der “base.OnCreate(bundle);” Aufruf, können wir die Member Variablen wie folgendes mit eine Instance speichern:

_sharedPreferences = ApplicationContext.GetSharedPreferences("UserInfo", FileCreationMode.Private);
_spEdit = _sharedPreferences.Edit();

Jetzt können wir ganz einfach mit der “PutString” Methode der Benutzerdaten speichern:

_spEdit.PutString("Username", Username.Text.Trim());
_spEdit.PutString("Password", Password.Text.Trim());
_spEdit.Apply();

Wichtig ist hier der “.Apply();” Methode nicht zu vergessen!

SharedPreferences abfragen

Um herauszufinden, ob der Benutzer sich schon Mal eingeloggt hat, müssen wir die SharedPreferences abfragen und schauen, ob sie eine gültige Login beinhalten.

Die Abfrage ist sehr einfach und ähnlich zum Füllen.

string userName = _sharedPreferences.GetString(“Username”, String.Empty);
string password = _sharedPreferences.GetString(“Password”, String.Empty);

if (userName == String.Empty || password == String.Empty)
{
// Get user by username from DB
User userFromUsername = GetUserFromUsername(userName);
if(userFromUsername == null) return;
if(userFromUsername.Password == password)
{
Console.WriteLine("User logged in");
}
else
{
Console.WriteLine("User not logged in");
}

Splash Activity hinzufügen

Die nächste Frage ist jetzt nur, wenn sollen wir die Kontrolle machen?

Am besten macht man dies in einen Splash Activity, der Splash Activity ist der Screen mit dem Logo, der beim Starten vom App angezeigt wird, während der App sich im Hintergrund am vorbereiten ist.
Der Grund dafür ist, dass wir dann von diesem Screen aus, entscheiden können, ob wir den “Homescreen” oder der “Loginscreen” als nächstes anzeigen möchten.

Als erstes müssen wir das Bild, welcher wir als Hintergrund benutzten möchten, zu unserem Resources->drawable Ordner hinzufügen.
Danach müssen wir im Resources->values->styles.xml ein neues Theme erstellen:

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/background_splash</item>
</style>

Jetzt müssen wir wieder zurück zum Resources->drawable Ordner gehen um der “background_splash.xml” view zu erstellen, der unser vorher hinzugefügtem Bild als Hintergrund hat.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/colorWhite"/>
<item>
<bitmap
android:gravity="center"
android:src="@drawable/logo_splash"/>
</item>
</layer-list>

Jetzt müssen wir nur noch das neu erstellte Theme, unser SplashActivity zuweisen.
(Das kommt unterhalb von Namespace und oberhalb vom Klassen Deklaration, in unserem Fall vor: “public class SplashActivity : Activity”.

[activity (label = "SplashActivity", theme = "@style/SplashTheme", MainLauncher = true) ]

Jetzt können wir unsere Konsolen Ausgaben mit Intents austauschen:

Intent intent = new Intent(this, typeof(LoginActivity));
this.StartActivity(intent);

und

Intent intent = new Intent(this, typeof(LoggedinActivity));
this.StartActivity(intent);

Kontrolliere, dass keine weitere Activities als “MainLauncher” definiert sind und dass es keine Einträge im AndroidManifest gibt, welche eine andere Activity als MainLauncher setzt.

Xamarin Forms Tutorial – Einstieg zu Dependency Services mit eine eigene Picture Picker

Xamarin Forms Tutorial – Einstieg zu Dependency Services mit eine eigene Picture Picker

In Xamarin Forms gibt es etwas was “Dependency Services” heisst. Mit Dependency Services hat man die Möglichkeit OS spezifische Funktionen von der geteilter Code aufzurufen. In Diesem Blog Post werde ich Tutorial über wie man ein Picture Picker mit Dependency Services programmieren kann. Ich benutzte für diesen Tutorial UWP und Android.

Für diejenige, welche noch nichts von Dependecy Services gehört hat, empfehle ich die “Introduction to DependecyService” von Xamarin selber vor meinem Blog Post zu lesen.

Ich habe alles in diesem Blog Post von Xamarins eigene Tutorial gelernt -> https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/dependency-service/photo-picker/

Inhalt

  • Dependency Services, kurz erklärt
  • Button und View erstellen
  • Interface definieren
  • Interface in UWP und Android implementieren
  • Click Event erstellen

Dependency Services, kurz erklärt

Wie schon erwähnt, benutzt man Dependency Services, wenn man auf ein Native API zugreifen muss, die durch die Xamarin Forms API noch nicht vorhanden ist.

Bei Dependency Services, definiert man im geteiltem Code ein Interface, die dann, im jedem OS Teil implementiert werden muss.
Danach kann man im geteiltem Code mit “DependencyService.Get<{InterfaceName}>().{MethodenName()};” die OS spezifische Methoden generisch aufrufen.

overview_diagram
Dependency Services Grafik, von developer.xamarin.com

Button und View erstellen

Ich habe ein Xamarin Projekt aufgesetzt (“Blank App” -> “Xamarin Forms” -> “Portable Class Library (PCL)”) mit einem einfachen ContentPage als View.

KookyFrameCreator Layout
View

Ich habe dazu ein Detail View erstellt, welcher ein Button als “Image Picker” hat.

KookyFrameCreator Detail
Detail View mit Button

Interface definieren

Als erstes müssen wir unseres Interface definieren.
Das Interface wird im geteilter Code definiert, ist aber ein ganz normales Interface.

In unserem Fall:

1:  namespace MyFirstFormsApp.DependencyServices  
2:  {  
3:    public interface IPicturePicker  
4:    {  
5:      Task<Stream> GetImageStreamAsync();  
6:    }  
7:  }  
8:    

Interface in UWP und Android implementieren

Jetzt müssen wir das Interface mit den OS spezifischen Code in unsere zwei unterstützte Plattformen implementieren, dass machen wir natürlich in den Plattform spezifischen Code.

Android

1:  [assembly: Dependency(typeof(PicturePickerImplementation))]  
2:    
3:  namespace MyFirstFormsApp.Droid.DependencyServices  
4:  {  
5:    public class PicturePickerImplementation : IPicturePicker  
6:    {  
7:      public Task GetImageStreamAsync()  
8:      {  
9:        // Define the Intent for getting images  
10:        Intent intent = new Intent();  
11:        intent.SetType("image/*");  
12:        intent.SetAction(Intent.ActionGetContent);  
13:    
14:        // Get the MainActivity instance  
15:        MainActivity activity = Forms.Context as MainActivity;  
16:    
17:        // Start the picture-picker activity (resumes in MainActivity.cs)  
18:        activity.StartActivityForResult(  
19:          Intent.CreateChooser(intent, "Select Picture"),  
20:          MainActivity.PickImageId);  
21:    
22:        // Save the TaskCompletionSource object as a MainActivity property  
23:        activity.PickImageTaskCompletionSource = new TaskCompletionSource();  
24:    
25:        // Return Task object  
26:        return activity.PickImageTaskCompletionSource.Task;  
27:      }  
28:    }  
29:  }  

UWP (Universal Windows)

1:  [assembly: Dependency(typeof(PicturePickerImplementation))]  
2:    
3:  namespace MyFirstFormsApp.UWP.DepedencyServices  
4:  {  
5:    public class PicturePickerImplementation : IPicturePicker  
6:    {  
7:      public async Task GetImageStreamAsync()  
8:      {  
9:        // Create and initialize the FileOpenPicker  
10:        FileOpenPicker openPicker = new FileOpenPicker  
11:        {  
12:          ViewMode = PickerViewMode.Thumbnail,  
13:          SuggestedStartLocation = PickerLocationId.PicturesLibrary,  
14:        };  
15:    
16:        openPicker.FileTypeFilter.Add(".jpg");  
17:        openPicker.FileTypeFilter.Add(".jpeg");  
18:        openPicker.FileTypeFilter.Add(".png");  
19:    
20:        // Get a file and return a Stream  
21:        StorageFile storageFile = await openPicker.PickSingleFileAsync();  
22:    
23:        if (storageFile == null)  
24:        {  
25:          return null;  
26:        }  
27:    
28:        IRandomAccessStreamWithContentType raStream = await storageFile.OpenReadAsync();  
29:        return raStream.AsStreamForRead();  
30:      }  
31:    }  
32:  }  

Wichtig ist hier, dass man die Usings nicht vergisst und dass man viel mit “Rebuild”/”Deploy” arbeitet um Syntax Fehler zu beheben.

Click Event erstellen

Als letztes müssen wir nur unseres Interface in einem Click Event aufrufen und etwas mit dem Resultat machen.

In unserem Fall werden wir den Picker aufrufen und dann das ausgewählte Bild anzeigen. Wenn der Benutzer auf das Bild klickt, kommt er wieder zurück zum Detail View.

1:  private async Task CreateEvent_Button_ImagePickerOnClicked(object sender, EventArgs e)  
2:      {  
3:        CreateEvent_Button_ImagePicker.IsEnabled = false;  
4:        Stream stream = await DependencyService.Get().GetImageStreamAsync();  
5:    
6:        if (stream != null)  
7:        {  
8:          Image image = new Image  
9:          {  
10:            Source = ImageSource.FromStream(() => stream),  
11:            BackgroundColor = Color.Gray  
12:          };  
13:    
14:          TapGestureRecognizer recognizer = new TapGestureRecognizer();  
15:          recognizer.Tapped += (sender2, args) =>  
16:          {  
17:            (this as ContentPage).Content = stack;  
18:            CreateEvent_Button_ImagePicker.IsEnabled = true;  
19:          };  
20:          image.GestureRecognizers.Add(recognizer);  
21:    
22:          (this as ContentPage).Content = image;  
23:        }  
24:        else  
25:        {  
26:          CreateEvent_Button_ImagePicker.IsEnabled = true;  
27:        }  
28:      }  

Tutorial: Strings im .config File speichern und anwenden

Tutorial: Strings im .config File speichern und anwenden

Wenn man weiss, das man im Zukunft ein gewissen Namen oder ähnliches, wie zum Beispiel die Credentials im Zukunft verändern möchte, ist es sehr sinnvoll, diese im .config File zu speichern statt “hard codiert” im Code zu lassen.
Die Begründung dafür ist ganz einfach, um eine Veränderung im .config braucht man nur eine Art von Notepad, für etwas hard codiert zu ändern, muss man alles wieder neu compilieren.

Schritt:

  • Strings im .config File speichern
  • Strings vom .config File im Code lesen
  • Strings vom .config File im Code überprüfen

Strings im .config File speichern

Das .config File heisst je nach Projekttyp ein bisschen anders.
In unserem Beispiel haben wir eine Consolenanwendung und dementsprechend heisst unseres .config File “App.config”.

appconfig
App.config

Jetzt können wir den “<appSettings>” hinzufügen und darin beliebigen Strings  hinzufügen mit den Tag “<add key=”[VariableNamen]” value=”[DeinString]” />”.

addedStringsToConfig
Hinzugefügte Strings

Wichtig: Wenn ein “<configSections>” Tag vorhanden ist, muss er direkt unter dem “<configSections>” stehen. Also darf man die “<appSettings>” Tag nicht oberhalb hinzufügen.

configSections
<configSections>

Strings vom .config File im Code lesen

Jetzt haben wir unsere Strings abgespeichert, aber wie können wir sie jetzt im Code ansprechen?

Das ist sehr einfach, man kann es, wie immer beim Programmieren, auf verschiedene Arten lösen, ich bevorzuge aber die folgende Lösung.
Sie ist ganz einfach zu implementieren und sie ist sehr verständlich.

Ich erstelle für jeden String einen “privat member variable” und befülle sie durch den ConfigurationManager direct.

readingStringsInCode
.config String im Code ansprechen und in member Variablen speichern

 

Für den ConfigurationManager braucht man die System.Configuration Referenz.

using Systemconfig
using System.Configuration

 

Die kann man ganz einfach hinzufügen:

 

Rechtsklick auf “References” -> “Add Reference” -> “Framework” und dann das Kästchen bei der “System.Configuration” auswählen.

addUsingSystemConfiguration
Add System.Configuration

Strings vom .config File im Code überprüfen

Wir können bereits die Strings vom App.config  benutzten, aber wenn jetzt etwas im App.config nicht stimmen würde und eine der benutzten Variablen nicht mehr vorhanden ist, kann das zu ein grosses Problem werden.

Deswegen sollte man im Konstruktor der Klasse sicherstellen, dass die Member Variablen weder Null noch Empty sind.

Ich mache meistens dafür eine kleine Methode, man könnte aber auch es direkt vom Konstruktor machen, ist aber in meiner Meinung nicht so schön.

CheckSettingsValuesInConstr
Methode Call von der Konstruktor

 

checkingMembersMethod
Kontrolle null or empty

Git Flow einfach gemacht (SourceTree)

Als ich auf Youtube Xamarin Tutorials anschaute, ist mir ein Empfohlenes video aufgefallen. Ich habe es angeklickt und angeschaut. Schon nach 2 Minuten war ich voll und ganz vom Konzept fasziniert. Für jemandem, der Git erst seit ein Jahr kennt und noch nie etwas mit Branches angestellt hat, fand ich es super interessant wie man mit Hilfe vom Git Flow Model, Repositories einfach strukturieren kann. Jetzt möchte ich euch auch davon überzeugen.

Inhalt:

  • Was ist Git Flow
  • Was ist SourceTree
  • Tutorial: Git Flow in SourceTree

Was ist Git Flow

Git Flow ist eigentlich ein Model oder Workflow, daraus sind aber auch Tools entstanden wie zum Beispiel das folgende Git-Plugin “git-flow”:
https://github.com/nvie/gitflow

Leider kann ich das genaue Video, die ich damals empfohlen bekam, nicht mehr finden, oder besser gesagt, bin ich mich nicht ganz sicher welches Video ich als erstes geschaut habe, da ich nach dem erste Video, sehr viel weitere geschaut habe um das Konzept richtig zu verstehen.

Aber wenn Man noch nichts über GitFlow weiss und vielleicht nicht all zu lange mit Git arbeitet, kann ich ein Video von Atlassian empfehlen.

In diesem Video erklären sie sehr gut, was ein Git Workflow ist, zeigen drei Beispiel davon, eines Davon ist das Git Flow, welches sie sehr gut erklären (Minute 06:00 – 09:35). Ich empfehle von Anfang bis zum 09:35 zu schauen.

Hier noch ein paar zusätzliche Lern-Quellen:

Git Flow V. Driessen
Überblick über GitFlow, von Vincent Driessens Blog Post

Was ist SourceTree

sourctreclo
SourceTree Screenshot von Wikipedia

Ist ein Gratis und nach meiner Meinung der beste Git-Client.
Er gehört zu der Atlassian Familie und ist gratis unter folgende Link herunterzuladen:
https://www.sourcetreeapp.com/ 

Für die, die mehr über SourceTree wissen wollen habe ich ein kurzes (3 min) Video von Atlassian ausgesucht, auch dieses Video für Mac ist, ist den unterschied zu der Windows Version Minimal:

Tutorial: Git Flow in SourceTree

Git Flow von hand zu machen ist recht aufwendig und nicht all zu einfach, zum Glück gibt es im SourceTree dafür eingebaute Funktionen.
Es hat sogar ein “Git Flow” Button in SourceTree:

SourceTree GitFlowIcon
SourceTree “Git Flow” Button

Git Flow Initialisieren

Um Git Flow in SourceTree zu initialisieren, muss man nur das Repository auswählen, und auf den “Git Flow” Button klicken.
Dann kommt ein kurzer Dialog, wo man die Prefixes/Branch Namen definieren kann, aber ich empfehle die Defaults zu behalten.

 

Init Dialog
Intitialisierungsdialog

Danach ist das Repository(local) schon mit Git Flow initialisiert.

NewBranches
Git Flow initialisiert, neue Branch “develop”

Feature Branch erstellen

Alle Git Flow Sachen geht im SourceTree über den “Git Flow” Button.
Nach der Initialisierung sieht der Dialog anders aus wenn man auf dem Button wieder klickt:

GitFlowButton
Next Flow Action Dialog

Wenn wir jetzt ein Feature erstellen möchten, klicken wir natürlich auf dem “Start New Feature” Button und danach ein Namen(zB: “feat#15”) dafür eingeben.

Danach wird für uns ein Feature Ordner mit unsere neue Feature Branch (local) erstellt.
Diese Feature Branch ist wie ein Fork von der “Develop” Branch.

FeatureBranch
Neue Feature Ordner und Branch

 

 

Um ein Feature nach Bearbeitung abzuschliessen, muss man nur wieder auf der “Git Flow” Button klicken und “Finish Feature” wählen. Dabei wird den Feature Branch in der Developer Branch gemerged und danach gelöscht.

Release Branch erstellen

Der Prozess um ein Release Branch zu erstellen ist wieder genau gleich wie den vom Feature, aber was passiert ist ein bisschen anders.

Beim “release” Branch:

  • wird der Code nach dem “Finish Release” in der “master” und “develop” Branch gemerged.
  • kann es gleichzeitig nur ein “release” Branch geben.

Hotfix Branch erstellen

Der Prozess ist genau gleich wie beim erstellen eines Feature Branchs, aber dabei wird den Code vom “master” geforked und nicht vom “develop”.
Nach dem “Finish Hotfix” wird der code wieder zurück in den “master” gemerged, aber auch in den “develop” Branch.