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.

Advertisements

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:      }  

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.

 

 

Tabbed Swipe Navigation in Xamarin Android (Native)

Tabbed Swipe Navigation in Xamarin Android (Native)

Es gibt verschiedene Navigationen in der Mobile Entwicklung, mehrere Pro Sprache/Plattform. Den heutigen Blog Post ist ein Tutorial was ein Tabbed Swipe Navigation ist und wie man sie implementiert.

Übersicht:

  • Was ist ein Tabbed Swipe Navigation
  • Was braucht ein Tabbed Swipe Navigation
  • Tutorial:
    • Projekt aufsetzten
    • Fragments
    • TabLayout
    • ViewPager
    • PageAdapter
    • Fragments
    • Profit

Was ist ein Tabbed Swipe Navigation

Der Tabbed Swipe Navigation, auch bekannt als Tabbed Swipe View, ist genau das, was es sich anhört zu sein.
Es ist eine Navigation/View, die Tabs und Swiping benutzt um zwischen verschiedene Views zu wechseln.

Tabs sind einfach Buttons die meistens ganz oben oder ganz unten im App angezeigt werden. Wenn man auf einer diesen Tabs klickt, kommt man auf der entsprechende View.

Swiping ist der Aktion wenn man mit den Finger von eine Seite zum anderen zieht. Siehe Bild Unten:

480px-gestures_flick
Swipe

Was braucht ein Tabbed Swipe Navigation

In Android braucht ein Tabbed Swipe Navigation folgendes:

Tutorial

Ich benutzte für den folgende Tutorial Visual Studio Professional 2015 für die Codierung und mein privates Mobile Phone (Samsung S7) zum Debuggen.

Projekt aufsetzen

Starte Visual Studio und erstelle ein neues Blank App (Android) Projekt.
(Unter Visual C# -> Android)

new-android-project
Projekt erstellen

Versuche jetzt als aller erstes den App ohne irgendwelcher Änderungen laufen zu lassen. Somit könnten wir uns schon jetzt mit mögliche Probleme beim Setup vom Emulator/Mobile Phone auseinandersetzten.

firststartup
App auf Samsung S7

TabLayout

Ein TabLayout ist ein Layout die man mit Tabs befüllen kann.

Als aller erstes müssen wir unsere Nuget Packages herunterladen. Wir brauchen folgende zwei Pakete:

  • Xamarin.Android.Support.V4
  • Xamarin.Android.Support.Design

Als zweites müssen wir noch ein Theme erstellen und es unsere Applikation zuweisen:
Theme in Resources -> Values -> Styles.axml:



<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<item name="windowActionBar">true
<item name="windowNoTitle">false
<item name="colorPrimary">#2B5C56
<item name="colorPrimaryDark">#000000
<item name="colorAccent">#FFEE58

 

set-application-theme
Applikations Theme setzten

Jetzt können wir mit dem Code anfangen.
Öffne das Main.axml unter Resources -> Layout -> Main.axml

Füge zum bestehende LinearLayout den folgende TabLayout:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>

Wir werden den Tabs gleich im Code hinzufügen, aber dafür brauchen wir ein ViewPager.

ViewPager

Ein ViewPager ist ein Container für ein austauschbares Fragment. Wir können also ein ViewPager zu unsere Main.axml hinzufügen und später im Code das passende Fragment darin anzeigen. Den ViewPager ist auch derjenige die der Swipe Funktion ermöglicht. Er ist schon out of the box bereit und kann eingesetzt werden.

Im Vergleich zu meine Zeichnung unten, sieht man im tatsächlichen Ansicht den ViewPager auf den Handy nicht, ich habe es nur hinzugefügt um das Vorstellungsvermögen zu helfen.

viewpagerimage
View Aufbau

View

Folgende Code kommt unterhalb der TabLayout im Main.axml.

<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_margin="2dp" />

Backend

Im MainActivity.cs ist der Backend für der View.
Im Moment ist aber hier nicht viel zu finden:

mainactivityempty
Backend

 

Fügen wir folgender Code hinzu:

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);

TabLayout tabLayout = (TabLayout)FindViewById(Resource.Id.tablayout_navigation);

ViewPager viewPager = (ViewPager)FindViewById(Resource.Id.pager);
SetupviewPager(viewPager);

tabLayout.SetupWithViewPager(viewPager);
}

private void SetupviewPager(ViewPager viewPager)
{
throw new NotImplementedException();
}

Wenn wir den Code aber jetzt laufen würden wurde den Code ein Exception werfen. Wir mussen zuerst noch die Fragmente und der PageAdapter erstellen.

Fragments

Unsere Fragmente werden ganz einfach aufgebaute Fragment sein, die je ein TextFeld beinhalten.
AXML Code von den entsprechende Fragmente:

<!-- Fragment1.axml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center|center"
android:gravity="center"
android:text="Fragment1"
android:textSize="75sp"
android:background="#A5BFB6"/>



<!-- Fragment2.axml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Fragment2"
android:textSize="75sp"
android:background="#A5BFB6"/>



<!-- Fragment3.axml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Fragment3"
android:textSize="75sp"
android:background="#A5BFB6"/>

PageAdapter

Der PageAdapter beinhaltet die verschiedene Tab Namen und ihre zugehörige Fragment. Wichtig ist hier die Usings nicht zu vergessen.

using System.Collections.Generic;
using Android.Support.V4.App;
using Java.Lang;
using Fragment = Android.Support.V4.App.Fragment;
using FragmentManager = Android.Support.V4.App.FragmentManager;

namespace TabAndSwipe
{
class PageAdapter : FragmentPagerAdapter
{
private readonly List _fragments;
private readonly List<string> _fragmentnames;

public PageAdapter(FragmentManager fm) : base(fm)
{
_fragments = new List();
_fragmentnames = new List<string>();
}

public override int Count
{
get { return _fragments.Count; }
}
public override Fragment GetItem(int position)
{
return _fragments[position];
}

public void AddFragment(Fragment fragment, string name)
{
if (fragment == null) return;
_fragments.Add(fragment);
_fragmentnames.Add(name);
}

public override ICharSequence GetPageTitleFormatted(int position)
{
return new Java.Lang.String(_fragmentnames[position]);
}
}
}

Profit

Jetzt müssen wir noch noch die Methode SetupviewPager in der Mainactivity implementieren und dann sollte es laufen!

private void SetupviewPager(ViewPager viewPager)
{
viewPager.OffscreenPageLimit = 3;

PageAdapter adapter = new PageAdapter(SupportFragmentManager);
adapter.AddFragment(new Fragment1(), "Eins");
adapter.AddFragment(new Fragment2(), "Zwei");
adapter.AddFragment(new Fragment3(), "Drei");

viewPager.Adapter = adapter;
}
blog-title-image
Succes!

 

Produktivität erhöhen mit OneNote

Produktivität erhöhen mit OneNote

Ich habe neulich in der Schule eine Firma(StarterKits.CH) als Wirtschaftprojekt gegründet. Dabei habe ich als CFO/COO angefangen OneNote zu benutzten und ich bin jetzt nach nur einige Wochen von diesem Tool völlig überzeugt.
Daher wollte ich nun einen Blog dazu schreiben.
Der Blog ist für jeden gedacht, von Anfänger bis tägliche Nutzer, es gibt sicher für jeder etwas was er noch nicht kennt!

Tutorial

Mein Tutorial wird folgende Themen beinhalten:

  • Basics
  • Vorlagen/Hintergrund
  • Ton Aufnahmen
  • Screen Clipping
  • Bild zu Text Konvertierung
  • Rechtschreibkontrolle abschalten
  • Repl.it
  • OneNote Tricks mit Outlook
  • OneNote Tricks mit Excel

Basics:

Wenn man noch keine Ahnung hat, was OneNote ist oder wofür man es brauchen kann, würde ich empfehlen als aller erst, der 2 minutigen Video von Microsoft selber zu schauen:

Video: Support Office – Get started with OneNote

Im Video erklären sie das Grundkonzept sehr gut, aber ich habe noch ein paar zusätzliche Punkte:

  • Da die Notizen im Microsoft Cloud (One Drive) gespeichert, ist der Speicher Vorgang und Verwaltung ganz anders zu andere Dateien wie zum Beispiel Word Dokumente.
    Das kann sehr verwirrend sein, auf jedem Fall war es verwirrend für mich wenn ich meine erste Begegnungen mit OneNote gehabt habe.
    Es gibt keinen normalen “Speichern” Knopf und wie lang man auch sucht, findet man nur ein “Exportieren” Knopf mit dem “Speichern” Icon, aber kein “Speichern”.

    – Ja wie speichere ich denn?
    Gar nicht, das wird alles automatische gemacht.
    So schnell man eine Änderung gemacht hat, kommt ein kleines Icon neben der Notizbuch hinzu. Diesen Symbol teilt mit, dass das Notizbuch zum Cloud synchronisiert wird.Ja was ist wenn ich keine Internetverbindung habe?
    Denn werden die Änderung lokal im Hintergrund (auch automatisch) gespeichert und so schnell man wieder eine Internet Verbindung hat, wird es automatisch synchronisiert.

    saving-files
    Speichern in OneNote
    Legende: 1 – Kein Speicher Icon vorhanden; 2 – Speichern Icon, aber mit “Exportieren”; 3 – Synchronisierung-Icon
  • Surface + OneNote = Productivity overload
    Mit dem Surface und vorallem den Surface Stift, öffnet sich ganz neuen Türen, Skizze werden zu Alltag, und der Verschwendete Zeit im Zug wird zu einem Eingeplante Zeit für die Arbeit.
    (Das Surface kann auch durch ein Samsung Note oder ein anderes Tablet mit Stift ersetzt werden)Ich selber, benutzte mein Computer/Laptop um Sachen aufzuschreiben, ein Surface um Skizzen zu Zeichnen und mein Handy um meine Notizen/Tasks zu kontrollieren.

Hintergrund & Vorlagen

Hintergrund

Es gibt einige, die nur ein blanken, leeren, weissen Hintergrund haben möchten und dann gibt es diejenigen die ein pinken Hintergrund mit Rändern wollen.
In OneNote kann man den Hintergrund persönlich gestalten und als Vorlage oder einfach für einzeln Seiten benutzten.

hintergrund
Pink + Kariert & Weiss + Blank

Vorlagen

Das es Vorlagen gibt, weiss ich selber erst seit eine Woche, also habe ich gedacht dass es sicher mehrere Leute gibt, die Vorlagen noch nicht kennen.

Es gibt verschiedene Vorlagen und auch wenn sie keine Wunderwerke sind, können sie ganz sicher, einen den Alltag vereinfachen.
Wenn man mit den Vorlagen nicht zufrieden ist, hat man auch die Möglichkeit eine eigene Vorlage zu erstellen, die ganz benutzerdefiniert sein kann.

Wenn man will, kann man eine Vorlage als Standardvorlage setzen, die denn für jede neue Seite automatisch angewendet wird.

Um eine Vorlage hinzuzufügen muss man nur Auf “Einfügen” -> “Seitenvorlagen” und dann eine Vorlage auswählen.

vorlage-seite-erstellen
Seitenvorlage hinzufügen

Ich persönlich benutze die Vorlage “Informelle Sitzungsnotizen” in meine Firma, als Protokoll und Notizen für unsere Weekly Meetings.

template-weekly-meetings
“Informelle Sitzungsnotizen”

Ton Aufnahme:

Die Ton Aufnahme, ist ebenfalls eine Funktion, die mir erst in der letzten Zeit aufgefallen ist. Da wir in unsere Firma viel Gespräche aufnehmen, ist das etwas was ich sicher im nächsten Meeting mit meine Kollegen besprechen werde.

Mit dieser Funktion kann man ganz einfach, egal ob mit Tablet/Handy/Laptop, egal ob mit externe oder mit interne Mikrofon Ton aufnehmen und direkt im OneNote speichern.

Um eine Ton Aufnahme aufzunehmen und speichern, muss man auf “Einfügen” -> “Audio aufnehmen” und dann fangt die Aufnahme schon an.

audio-aufnahmen
Ton Aufnahme

Screen Clipping

Mit OneNote bekommt man ein Tool der einen ein Screen Shot von ein Teil des Bildschirms zu erstellen und gerade zu einem beliebigen OneNote Seite schicken lässt oder einfach zum Clipboard kopieren.

Die meisten kennen Snipping Tool schon und das ist mehr oder weniger das gleiche, aber mit dem screen clipping Tool von OneNote kann es gerade zu einem beliebigen OneNote senden, was bei Snipping Tool und ähnliche nicht der Fall ist.
Ausserdem kann man das screen clipping Tool ganz einfach mit der Tastenkombination: “WIN-Taste” + “SHIFT” + “S” aufrufen.

Ich habe den Bildern in diesem Blog Post fast ausschliesslich mit dem OneNote screen clipping Tool gemacht.

screen-clipping
Clipping Tool auf meinen Webseite (StarterKits.CH) benutzt

Bild zu Text

Ein sehr cooles Feature in OneNote ist der Bild zu Text konverter.

Das heisst OCR (Optical Charachter Recognition) und gibt dir die Möglichkeit, statt ein Text von ein Blatt aufzuschreiben, einfach kurz zu fotografieren und dann konvertieren.

Den Text aus ein Bild zu kopieren ist ganz einfach, einfach ein Rechtsklick auf dem Bild und dann “Text aus Bild kopieren” wählen.

ocr
Text aus Bild kopieren

Das Resultat hat bei guten Bildern eine Genauigkeit zwischen 90% und 100%.
Hier ein kleines Beispiel, ich habe mit mein Handy direkt von OneNote aus, ein Foto von ein Blatt Papier gemacht und dann auf dem Desktop das Bild zu Text konvertiert.

Ich habe nichts geändert, nur ein paar Zeilenumbrüche hinzugefügt.

ocr-result
Bild zu Text in Action

Rechtschreibkontrolle abschalten

Weil man in OnoNote eben Note(s) macht und nicht Dokumentationen schreibt, ist es einen meisten nicht so Wichtig ob die Rechtschreibung stimmt oder nicht. Was auch ein Thema ist, ist dass man bei Notizen viel “Slang” benutzt und vielleicht mehrere Sprachen in einem Text benutzt.

Deswegen macht ein Rechtschreibkontrolle nicht so viel Sinn, und meistens stört sie mehr als sie etwas bringt.

Die Einstellungen zum Rechtschreibkontrolle findet man unter “Datei” -> “Optionen” -> “Dokumentprüfung”.
Ich persönlich benutzte folgende Einstellung:

rechtschreibung
Meine Einstellungen

Repl.it

Als Kurzbeschreibung ist Repl.it ein online Compiler, die mehrere Sprachen unterstützt, aber für diejenigen die Repl.it noch nicht kennen, würde ich ein Besuch auf ihr Help Page empfehlen: https://repl.it/help

Am 7. September 2016, hat Microsoft ein neues Update ausgegeben, in diesem Update kann man Repl.It INNERHALB von OneNote benutzten.

“Das ist sicher sehr kompliziert einzubinden?”
– Nein gar nicht, einfach ein Projekt in repl.it und dann den Share-Link in OneNote einkopieren, und schon hat man ein Compiler innerhalb von OneNote!

Mit diesem neuen Feature sind einfachen Demos und das Beibringen vom Programmieren viel einfacher.

repl-it-onenote
repl.it in OneNote

OneNote Tricks mit Outlook

Um den Produktivität noch zu erhöhen, hat Microsoft ein Plugin für Outlook entwickelt. Mit diesem Plugin kann man:

  • Emails direkt an eine spezifische Seite in OneNote für Überarbeitung oder Dokumentation senden.
  • Notizen für Sitzungen/Termine erstellen und mit den anderen Teilnehmer teilen.
  • Task List in Outlook mit OneNote verbinden.

Emails zu OneNote senden

Vielleicht arbeitet man an ein Projekt und der Projekt Leiter schickt dir ein neuen Termin für das nächste Update. Dann kann man das Email nach OneNote schicken, die essentielle Teilen davon nehmen und Dokumentieren.

Ein weiters Beispiel ist wenn man in der Produktion arbeitet und ein Mail bekommt mit der neue Bestellung, dieser kann man dann auch in OneNote dokumentieren, so dass man alle Bestellungen am gleichen Ort hat.

Das Vorgehen ist auch hier ganz einfach, wenn man das Mail offen hat, muss man nur auf dem “OneNote” Knopf unter “Start” -> “Verschieben” klicken und der Gewünschte Speicherort auswählen.

outlook-send-to-onenote
Mail an OneNote senden
result-mail-2-onenote
Resultat in OneOnte

Notizen für Sitzungen/Termine

Wenn man eine Sitzung mit zum Beispiel das Entwicklungsteam erstellt, kann man ein statischer Text dazu Schreiben und  mit der Termin in Outlook mitschicken.
Mit dem OneNote Plugin kann man ein Link zu eine OneNote Seite mitschicken, wo nicht nur ein Text beinhalten kann, sondern ein Excel Sheet, Skizzen, Bilder oder eben ein repl.it Projekt beinhalten kann, die auch während der Sitzung von allen angeschaut und geändert werden kann.

Und um das Feature zu benutzten, muss man wieder ganz einfach auf das OneNote Icon klicken mit den Titel “Besprechungsnotizen” und dann eine Seite oder Abschnitt auswählen.

besprechungsnotizen
Besprechungsnotiz hinzufügen

Task List in Outlook mit OneNote verbinden

Das ist ein sehr gutes Feature wenn man die Outlook Task List benutzt, aber das Thema ist ziemlich gross und weil ich das selber nicht benutzte, habe ich ein ausführliche Blog gesucht, von Jemand die sich mit dem Thema auseinander setzt und gut erklären kann.

Blog Tutorial Task List:  Turn Outlook to a Projectmanaging Tool with OneNote (ENGLISH)

OneNote Tricks mit Excel

Ich bin der CFO meiner Firma und muss unsere Ausgaben/Einnahmen dokumentieren und im Auge behalten. Dafür ist die Excel Integration in OneNote super, ich kann meine Kollegen ein OneNote senden, indem ich ausser die gewöhnlich Sachen wie Traktanden und sonstige Information, eine Excel Tabelle und zwei Diagramme einbinden, so dass ich während dem Meeting die anderen zeigen kann, wo wir zu viel Geld ausgeben und wie viel Geld wir gemacht haben.

Hier noch der Erklärung von Microsoft selber: Microsoft Office Support – Create Excel Sheet in OneNote

Unit Tests & Moq

Unit Tests & Moq

Als ich in einem Projekt Tests schreiben musste, wurde ich gezwungen ein Mocking Framework kennen zu lernen. Ich habe nach ein bisschen Research für das Mocking Framework “Moq” entschieden. Es wurde mehrmals empfohlen und vor allem gab es sehr viele Tutorials und eine gute Dokumentation dazu. Jetzt möchte ich meine neue Erkenntnisse Dokumentieren und habe gedacht dass ein Blog Post dafür Ideal wär. In diesem Blog Post werde ich dementsprechend eine kurze Introduktion zu Unit Tests und Moq und danach werde ich mit einem Beispiel die Technologie genauer erklären und zeigen wie man sie benutzt.

Was sind Unit Tests?

Unit Tests sind modulare Tests die eine bestimme Methode testet. Das heisst, dass man bei Unit Tests Dependencies nicht testet sondern nur der Logik die den Parametern entnimmt, daraus ein Resultat produziert und  zurückgibt. Um den Dependencies zu ignorieren braucht man eben das Moq Framework (oder ein ähnliches), wie das ganze funktioniert erkläre ich später.
Unit Tests sind die schnellsten und einfachsten Tests. Darum sollte man sehr viele Unit Tests schreiben in vergleich mit andere Tests.
Ein gutes Bild ist der Test-Pyramide:

test-pyramide

Von der Test-Pyramide kann man zwei Sachen sehr schnell daraus lesen:

  • Wie bei eine normale Pyramide muss man mit den untersten Blöcke anfangen, nämlich den Unit Tests.
  • Der grössten Teil der Pyramide besteht aus Unit Tests, dass ist auch bei der Produktion so, man sollte viel mehr Unit Tests schreiben als zum Beispiel UI Tests.

Was ist Mocking und was ist Moq?

Mocking ist wenn man ein “fake Objekt” erstellt. Das heisst man macht eine Art von Kopie von das Objekt, die die Klasse braucht die man testen will und definiert die Rückgabe Werte der Methoden.
Zum Beispiel wenn ich ein Service habe, die aus der Datenbank eine Liste von Personen holt. Und meine Klasse die ich Testen eine Methode hat, die diese Service und Methode benutzt, muss ich der Dependency von der Datenbank irgendwie wegnehmen. Weil sonst ist es nicht nur ein Unit Test mehr sondern ein Integration Test.
Das kann ich mit das Mocking erreichen. Weil dann sage ich einfach, egal wie der Methode aufgerufen wird, gebe einfach eine vordefinierte Liste zurück.

Moq ist ein Framework die das Mocking sehr einfach macht. Einige der Vorteilen von Moq sind:

  • Gut Dokumentiert und es gibt viele Tutorials
  • Einfach zum Anwenden
  • “Strong typed” also keine “Magic Strings” und somit Compiler freundlich

Tutorial:

In diesem Tutorial werde ich ein einfaches Beispiel zeigen wie man Moq benutzten kann.
Ich werde für den Tutorial Visual Studio 2015 Pro und ein ASP .NET MVC Projekt verwenden.

Meine Methode, die in meiner HomeController steckt und ich testen will, ist von das IDataService Interface und erwartet eine Methode mit der name “GetTeams()”, die eine List von Teams zurückgibt.
methodetotest

Deswegen muss ich das Moq Framework vom Nuget Packet Manager herunterladen und ein Mock des Interfaces erstellen.
createmockobject

Als nächstes muss ich der Liste mit Teams erstellen die meine Mock-Methode zurückgeben soll.
definedata

Wenn ich meine Liste definiert habe, muss ich etwas was sich “Setup” nennt. Dabei bestimme ich was Methode X als Rückgabe wert zurückgeben sollte. In meinem Fall möchte ich ja die vordefinierte  Liste zurückgeben statt eine Datenbank Query-Resultat.
setupmethod

Als letztes muss ich mein Klasse erstellen mit meinen Mock, die Methode aufrufen und danach kontrollieren ob im ViewResult.Model die richtige Liste beinhaltet.
finishtest