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 😉

Published by

Marcel Meijer

Op dit moment houdt hij zich voornamelijk bezig met Microsoft Azure, Cloud, C#, Software Ontwikkeling, Architectuur, etc. Hij werkt als consultant voor zijn eigen bedrijf JOEP-IT bv. In zijn vrije tijd is hij voorzitter, bestuurslid, eindredacteur en eventorganisator bij de SDN (Software Development Network). Sinds 1 oktober 2010 is hij MVP.

Leave a Reply

Your email address will not be published. Required fields are marked *