Xamarin: Multi Platform Development

Voor het Windows Platform heb ik al eens applicaties gemaakt. Een aantal van mijn maaksel staan zelfs in de store. Het zijn geen geweldige applicaties, maar ze gaven mij wel inzicht in hoe het werkte. Wat betekent zo’n klein scherm voor development en hoe krijg je zoiets dan in de store?

image

De eerste app staat er nog steeds in, maar ik ben de code kwijt Knipogende emoticon. Ook zijn de eisen aan de apps in de tussenliggende tijd behoorlijk aangescherpt. Al zou ik de code nog hebben, dan komt hij niet meer in de store.

Ook voor het Windows 8 platform heb ik een app. Eigenlijk een paar meer, maar die zijn niet beschikbaar. Een demo app voor Azure Mobile Services en een SDN evaluatie app waar ik al eerder over sprak.

image

http://apps.microsoft.com/windows/en-us/app/three-of-a-kind/a5ab2f2a-c42d-45de-95c6-13a10e5b1256

Maar goed, al een hele tijd wil ik eigenlijk heel graag eens proberen om een app te maken voor Android en iOS. En ik heb het geprobeerd om op mijn iMac met Xcode een app te maken, maar ik raakte heel snel verstrikt in Objective C taal en kon mijn weg niet goed vinden binnen de Apple tools. Binnen de Microsoft wereld is Xamarin dan tool om dat te doen. Een super tool om je vaardigheden in C# te kunnen gebruiken op andere platformen.

Ik had al heel lang het idee staan, maar kon er de tijd en zin niet voor maken om het door te zetten. Nu is het er dan toch van gekomen. Het is een soort Hello World app, maar dan met iets meer dieogang. Maar weer niet zoveel omdat er geen gedeelte code is en al helemaal geen server side code.

Bij mijn vorige werkgever was door Ronald Hubert een Scrum app voor het Windows Phone platform gemaakt. Het idee en de grove vormgeving van de kaarten waren mijn begin punt. Ik heb zijn Windows Phone code niet hergebruikt en zelf een Windows Phone variant geschreven. Dat was makelijk, want dat had ik al eens eerder gedaan.

Je maakt twee schermen, tekent de kaarten op het eerste scherm en op het klik event van de kaart open je het tweede scherm. In het tweede scherm laad je het juiste plaatje met een klik event om terug te gaan naar het hoofdscherm.

In code:

private void imageV_Tapped(object sender, TappedRoutedEventArgs e)
{     Frame.Navigate(typeof(DetailPage), "V");
}

Direct in het klik event van het plaatje vertel je dat er een navigate moet plaats vinden naar de detail pagina met een parameter. Clean en simpel Knipogende emoticon

wp8

Voor Android heb je twee keuzes. Of je werkt vanuit Visual Studio of je werkt vanuit Xamarin Studio. De eerste is meer vertrouwd dan de tweede. Ik heb overigens de applicatie ontwikkeld vanuit de Xamarin Studio.

Feitelijk is hier hetzelfde ritueel als in de Windows Phone app gebruikt.

ImageButton imButton1 = FindViewById<ImageButton> (Resource.Id.imageButton1);
imButton1.Click += new EventHandler (PictureBtn_Click);
void PictureBtn_Click(Object sender, EventArgs e)
{
	ImageButton imgbut = (ImageButton)sender;
 
	var intent = new Intent (this, typeof (NextScreenActivity));
	intent.PutExtra ("picture", (imgbut.Tag == null ? "" : imgbut.Tag.ToString()));
	StartActivity (intent);
}

Zoals je ziet, wezenlijk anders. Je moet de Button op het scherm zoeken en er dan een event aan hangen. In het event moet je new Intent maken en die Intent moet je als een Activity starten.

nadroidvs

androidxs

De iOS variant is natuurlijk niet heel anders. Alleen werkt Apple met een Story board en dwingt meer MVC af. Verder worden er allerlei events en stukken code toegevoegd voor het iOS gedeelte.

image

Screen Shot 2015-02-14 at 13.37.40

Ondanks dat ik C# kon programmeren was het toch 3 keer anders.

Er is ook nog zoiets als Xamarin Forms. Daarmee zou de voorkant ook nog een stuk meer overeenkomen tussen de verschillende operating systems. Dat wordt mij volgende project.

Om de apps vervolgens in de verschillende stores te krijgen was ook steeds anders. Windows Phone en Android leken redelijk op elkaar, de store van Apple was veel meer gedoe.

Deze app is in elk geval te downloaden:

Windows Phone 8.1

Binnenkort komt er voor je Windows Phone 8 een hele mooie update beschikbaar: Windows Phone 8.1. Deze update bevat naast gebruikersinterface updates ook handigheid zoals die ook op andere platforms aanwezig is.

Zo is het straks mogelijk om een achtergrond afbeelding te hebben. Deze afbeelding zal getoond worden door alle iconen die transparant zijn.

wp_ss_20140124_0001 wp_ss_20140419_0002

Op het Android en Apple platform heb je een notification center. Op die devices veeg je van boven naar beneden en krijg je een overzicht van de verschillende notificaties. Als je tekst berichten, Whatsapp, mails of andere notificaties krijgt, dan krijg je ze hier te zien. Deze functionaliteit is straks ook beschikbaar op Windows Phone. Ik werk er nu al een tijdje mee en je gaat het erg prettig vinden.

wp_ss_20140419_0001 wp_ss_20140419_0006

De agenda op Windows Phone is nu al een stuk beter dan op de concurrerende platforms. Maar met deze update wordt er toch nog een extra slag gemaakt. Als zakelijke gebruiker van een Windows Phone ga je daar ook weer van genieten.

wp_ss_20140419_0004 wp_ss_20140419_0005 wp_ss_20140421_0001

En dan de meest in het oog springende aanpassing: Cortana. Op een iPhone heb je Siri en op Windows Phone krijg je Cortana. Gamefanaten zullen de naam herkennen uit de Halo Games op de XBox. Op dit moment van schrijven is het alleen nog voor US Englisch beschikbaar.

Je kunt er erg leuke grappen mee uithalen. Je kunt aan Cortana vragen om te zingen, moppen te vertellen of advies te vragen. Tijdens het WK 2014 heeft ze zich ook ontpopt als een voorspeller van Voetbal uitslagen. Powered by Bing.

wp_ss_20140525_0001 wp_ss_20140525_0002 wp_ss_20140525_0003

Maar Cortana is absoluut niet alleen voor de lol, het toepassing is eigenlijk veel serieuzer. Zo kun je tegen haar zeggen, dat je een reminder wilt op een bepaald moment. Zij zal je dan als een echte PA (Personal Assistent) attenderen op je taak.

wp_ss_20140525_0004 wp_ss_20140525_0005

Kortom een geweldige update. Nu maar hopen dat de mobiele providers de update ook snel beschikbaar stellen voor jullie.

PS de screenshots in deze blogpost zijn gemaakt op een Nokia Lumia 1520.

VCards and QRCodes

Voor mijn werkgever hebben we visite kaartjes met een QRCode ontwikkeld. Deze QRCode bevat een link naar een website waar de VCard van de medewerker te downloaden is. Een VCard is een standaard http://en.wikipedia.org/wiki/VCard voor electronische Business Cards.

WP_20130417_001

Het idee van de QRCode was dat je VCard van de medewerker kunt downloaden en de Prodware medewerker eenvoudig kunt toevoegen aan je adresboek. We hadden de VCard kunnen opnemen in de QRCode, maar dan zou de QRCode ook moeten veranderen als de medewerker een nieuwe functie krijgt of mobiel nummer etc. Dat leek ons niet handig. Daarom hebben we gekozen om naar een website te gaan, waar je de VCard kunt downloaden.

Voor het maken van de QRCode hebben we gebruik gemaakt van de standaard ZXING barcode library (http://code.google.com/p/zxing/downloads/list). Maar Prodware is een Microsoft georienteerd bedrijf en dus hadden we de C# variant van deze lib nodig. Geen probleem daar is een Nuget package voor (https://nuget.org/packages/ZXing).

De code snippet om de code te maken is relatief simpel.

image

Overigens kun je deze library ook gebruiken om een QRCode/Barcode scanner in je WP8 of Windows 8 app in te bouwen. Ik heb dat nu voor twee demo’s gedaan, daarover later meer.

De VCard standaard is handig, maar heeft een probleem. In de loop der tijd zijn de internet browsers argwanend geworden mbt een VCard. Op je gewone Windows 8/Windows 7 computer kun je de VCard zonder problemen downloaden en de data toevoegen aan je adresboek van Windows of Outlook. Dat werkt ook zo op een Windows Phone 7.x. Maar Windows Phone 8, Android en iPhone behandelen een VCard niet zoals je zou verwachten, er is geen standaard applicatie gekoppeld aan de extensie etc.

Omdat probleem op te lossen moest ik op zoek naar een oplossing. Wat blijkt nu, als de VCard via de mail komt, dan werkt het allemaal wel. Dus wordt de website zo aangepast, dat je de mogelijkheid krijgt om de VCard te mailen. Maar dat willen we natuurlijk wel afhankelijk maken van het device.

Mobile:

wp_ss_20130417_0004 wp_ss_20130417_0001

Desktop:

wp_ss_20130417_0002 wp_ss_20130417_0003

Dit is heel simpel te doen in C# en MVC 4. Sowieso gaat MVC 4 al beter om met het tonen van de site in een mobiele browser. In de view neem je deze code op.

image

image

Probleem opgelost. Nu nog even deployen naar onze on-premise server. De test omgeving draait uiteraard op Windows Azure 😉

Windows Azure Websites and Storage

Windows Azure Websites zijn erg handig om snel een website in de lucht te brengen. Je kunt daarbij kiezen uit een gallery van producten. Deze gallery bestaat uit Blogs (WordPress ea), Content management systemen (DotNetNuke ea), Wiki’s etc. En als je door deze lijst heen loopt, dan zie je dat ze niet allemaal .NET based zijn. Sommige producten hebben SQL Server database nodig en sommige MySQL. Ook dat is geen probleem beide is mogelijk. Met een paar simpele klikken heb je zo een website in de lucht.

eval1

Maar als je een reeds bestaande website hebt, dan kun je die ook hosten op Windows Azure websites. Ook dan ben je met iets meer klikken up en running. Moet je in je website dan nog rekening houden met het hosten op Windows Azure? Nope, helemaal niet. Aan je website hoef je niets aan te passen en deze kan zo naar Windows Azure. En updates aan de website kun je dan gewoon deployen oftewel publishen zoals je dat ook op een ‘eigen’ webserver zou doen.

eval7

Oke, maar ik wil gebruik maken van Windows Azure storage of Windows Azure Service bus. Dat kan dan zeker niet? Jazeker wel, geen probleem. Uiteraard moet je in je applicatie dan wel iets aanpassen om volledig gebruik te maken van deze diensten.

Ik heb dat zelf gebruikt voor de server kant van mijn nieuwe Windows 8 en Windows Phone 8 applicatie. Met deze applicaties kun je de sessies van de SDN events evalueren en je waarde oordeel geven.

eval4eval5

Het gaat hier niet om enorm veel data. Ik heb events en event hebben sessies en een sessie heeft een evaluatie. Er zijn ook geen hele moeilijke relaties tussen tabellen. Dus typisch zo’n gevalletje voor Windows Azure storage tables. Ook vanuit kosten oogpunt niet onbelangrijk. Zoals gezegd, het gaan niet om veel data. Stel even 3 events maal maximaal 20 sessies maal 150 bezoekers, dat blijft heel erg ruim onder de 100 Mb van de kleinste Windows Azure SQL Database. Het prijsverschil tussen storage tables en SQL tabellen is dan best groot. (NB Ik realiseer mij dat we soms SQL server functionaliteit gewoon nodig hebben, maar ik denk ook wel dat we vaak te gauw grijpen naar dit middel.

Deze data ontsluit ik voor de applicaties via een WebApi. Zodat de apps via een simpele REST interface de get en posts kunnen doen en JSON terug krijgen. En deze REST services zijn onderdeel van mijn Windows Azure Website.

Maar kan dat dan zomaar? Jazeker. Alles wat je nodig hebt, zijn deze twee NuGet packages.

eval2

En deze code. De connectionstring naar de Windows Azure storage staat dan in de Web.config.

eval3

De rest van je code is zoals je altijd met Windows Azure storage tables omgaat.

En mijn groeipad? Windows Azure Websites kun je ook scalen (meerdere instanties) en/of zwaardere machines van maken.

eval6

Stel je voor dat er straks toch een achtergrond proces bij komt, bijvoorbeeld om BI op de ingevoerde data te doen. Dan zou ik daar een WorkerRole voor nodig kunnen hebben. Dan kan ik de Windows Azure Website zo ombouwen tot een Cloud Service. De setting van de storage zal dan verplaatsen van de web.config naar de Cloud Service configuration. Verder hoeft er in principe weinig te gebeuren aan de Web Role. Uiteraard zal ik de Worker Role dan moeten uitwerken.

Handig he, Windows Azure. Het groeit met je mee, je kunt klein beginnen en groeien naar immense hoogte.