Skapa Microsoft Tags på din hemsida
Något som är riktigt häftigt är Microsoft Tags. Det är små taggar i form av bilder som man kan använda för att t.ex. göra det enkelt att surfa till en viss URL genom att bara peka mobilkameran mot den. Det kan användas i reklamsyfte, man kan ha det på sitt visitkort för att länka till bloggen eller vad man nu önskar.
Det är svårt att inse hur häftigt det verkligen är förrän man testar det själv!
För att kunna testa det här så surfa med mobiltelefonen till:
Det fungerar på de flesta mobiltelefoner, så jag kan rekommendera att ni laddar ned det på direkten. När man startar programmet på mobilen så aktiveras kameran, och när man riktar den mot en bild så startar webbläsaren upp och går till URL:en som bilden är riktad mot.
För att kunna testa att det fungerar så kan ni testa att köra programmet på mobiltelefonen och rikta kameran mot bilden nedan:
Ni bör nu komma till min blogg på mobiltelefonen!
För att kunna skapa taggar som denna själv så kan ni skapa ett konto här:
Det gör det möjligt att skapa upp egna taggar på sidan och generera upp dem i olika färger och typer.
För att kunna ta del av det som finns i artikeln så bör ni även registrera er för API:t, vilket ni kan göra här:
http://www.microsoft.com/tag/content/support/developer/
Ni bör efter ett tag få en API-nyckel skickad till mailen. Den behövs för att ni skall kunna generera taggarna själva.
Skapa egna funktioner för att generera taggar
För att vi ska kunna generera taggarna så har jag en solution i Visual Studio med två klasser, ett klassbibliotek samt ett ASP.NET MVC 2-projekt.
I klassbiblioteket så behöver vi en service-referens till den här URL:en:
https://ws.tag.microsoft.com/MIBPService.wsdl
Vi kommer även att ha en klass vid namn TagRepository där vi lägger till metoderna för att hantera alla taggar.
I den här klassen har vi metoder för att skapa kategorier, skapa taggar och sedan hämta dem.
using MicrosoftTag.TagService;
namespace MicrosoftTag
{
public class TagRepository
{
private const string AccessToken = "DIN PRIVATA API-NYCKEL";
UserCredential _credentials;
public TagRepository()
{
_credentials = new UserCredential();
_credentials.AccessToken = AccessToken;
}
public void CreateTag(string categoryname, URITag tag)
{
using (MIBPContractClient client = new MIBPContractClient())
{
client.CreateTag(_credentials, categoryname, tag);
}
}
public void CreateCategory(Category category)
{
using (MIBPContractClient client = new MIBPContractClient())
{
client.CreateCategory(_credentials, category);
}
}
public byte[] GetBarcode(string categoryname, string tagname)
{
using (MIBPContractClient client = new MIBPContractClient())
{
return client.GetBarcode(
_credentials,
categoryname,
tagname,
ImageTypes.gif,
0.75F,
DecorationType.HCCBRP_DECORATION_NONE,
false
);
}
}
}
}
Jag kommer inte att gå in så djupgående vad alla anrop gör, utan det är ganska självförklarande. Det som vi eventuellt skulle kunna påverka här är GetBarcode där vi har möjlighet att påverka de taggar som hämtas ut från tjänsten. Vi kan t.ex. välja att ha ett annorlunda utseende på taggen, vi kan välja att ha den i svartvitt, vi kan ändra storlek (0.75-2 inches) m.m. Här har vi den minsta taggen samt har satt att vi inte vill ha någon dekoration runt. Det ger bilden som jag visade tidigare.
Nästa steg blir att skapa ASP.NET MVC 2-projektet. Det här projektet skall ha en referens till klassbiblioteket. Vi måste även kopiera några rader från app.config i klassbiblioteket till web.config i webbprojektet för att webbtjänsten skall hittas.
<system.serviceModel>
<bindings>
<basicHttpBinding>
<binding name="BasicHttpBinding_IMIBPContract" closeTimeout="00:01:00"
openTimeout="00:01:00" receiveTimeout="00:10:00" sendTimeout="00:01:00"
allowCookies="false" bypassProxyOnLocal="false" hostNameComparisonMode="StrongWildcard"
maxBufferSize="65536" maxBufferPoolSize="524288" maxReceivedMessageSize="65536"
messageEncoding="Text" textEncoding="utf-8" transferMode="Buffered"
useDefaultWebProxy="true">
<readerQuotas maxDepth="32" maxStringContentLength="8192" maxArrayLength="16384"
maxBytesPerRead="4096" maxNameTableCharCount="16384" />
<security mode="Transport">
<transport clientCredentialType="None" proxyCredentialType="None"
realm="" />
<message clientCredentialType="UserName" algorithmSuite="Default" />
</security>
</binding>
</basicHttpBinding>
<customBinding>
<binding name="BasicHttpBinding_IMIBPContract1">
<textMessageEncoding maxReadPoolSize="64" maxWritePoolSize="16"
messageVersion="Soap11" writeEncoding="utf-8">
<readerQuotas maxDepth="32" maxStringContentLength="8192" maxArrayLength="16384"
maxBytesPerRead="4096" maxNameTableCharCount="16384" />
</textMessageEncoding>
<httpsTransport manualAddressing="false" maxBufferPoolSize="524288"
maxReceivedMessageSize="65536" allowCookies="false" authenticationScheme="Anonymous"
bypassProxyOnLocal="false" hostNameComparisonMode="StrongWildcard"
keepAliveEnabled="true" maxBufferSize="65536" proxyAuthenticationScheme="Anonymous"
realm="" transferMode="Buffered" unsafeConnectionNtlmAuthentication="false"
useDefaultWebProxy="true" requireClientCertificate="false" />
</binding>
</customBinding>
</bindings>
<client>
<endpoint address="https://ws.tag.microsoft.com/Service.svc"
binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_IMIBPContract"
contract="TagService.IMIBPContract" name="BasicHttpBinding_IMIBPContract" />
</client>
</system.serviceModel>
För att slippa problem med storleken på bilden som hämtas så kommer vi även att behöva ändra värdet på maxArrayLength under basicHttpBinding\binding\readerQuotas till 16384000. Annars kommer ett lustigt felmeddelande som säger att gränsen har överskridits.
Nästa steg blir att skapa en controller vid namn TagController. Här har vi våra metoder för att kunna skapa kategorier och taggar, samt för att kunna hämta taggarna.
using System.Web.Mvc;
using MicrosoftTag;
using MicrosoftTag.TagService;
namespace Web.Controllers
{
public class TagController : Controller
{
TagRepository repository = new TagRepository();
public ActionResult Index()
{
return View();
}
public ActionResult CreateTag()
{
return View();
}
[HttpPost]
public ActionResult CreateTag(string category, FormCollection collection)
{
URITag tag = new URITag();
UpdateModel(tag);
repository.CreateTag(category, tag);
try
{
return RedirectToAction("Index");
}
catch
{
return View();
}
}
public ActionResult CreateCategory()
{
return View();
}
[HttpPost]
public ActionResult CreateCategory(FormCollection collection)
{
Category category = new Category();
UpdateModel(category);
try
{
repository.CreateCategory(category);
return RedirectToAction("Index");
}
catch
{
return View();
}
}
public ActionResult GetBarcode()
{
return View();
}
[HttpPost]
public ActionResult GetBarcode(string category, string tag)
{
try
{
return File(repository.GetBarcode(category, tag), "image/gif");
}
catch
{
return View();
}
}
}
}
Våra två formulär har en varsin metod för att ta emot datan och posta till tjänsten. Där kommer sedan kategorier och taggar att lagras. Sedan har vi en metod för att posta namn på kategorin och namnet på taggen för att utifrån det kunna hämta taggarna. Det finns för närvarande ingen metod för att hämta en lista på alla kategorier och taggar, men förhoppningsvis så kommer det i en senare version. Men nu får vi alltså sköta det själva.
Index-sidan kommer att vara en enkel sida som länkar till de olika vyerna för taggar.
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Administration av tags</h2>
<p>Använd den här sidan för att administrera dina tags.</p>
<ul>
<li><%= Html.ActionLink("Skapa tag", "CreateTag", "Tag") %></li>
<li><%= Html.ActionLink("Skapa kategori", "CreateCategory", "Tag") %></li>
<li><%= Html.ActionLink("Hämta tag", "GetBarcode", "Tag") %></li>
</ul>
</asp:Content>
Sedan kommer vi att behöva ha sidor för de olika formulären. För kategorivyn och taggvyn så genererar vi bara standardsidor för Create som vi binder mot Category och URITag i webbtjänsten. Det hade varit snyggare att ha egna klasser att binda mot, men då det här fungerar snabbt och enkelt så kör vi på det nu.
Om vi nu testar att skapa en kategori så kommer vi att se att den kategorin dyker upp på officiella administrationssidan för Microsoft Tags. Detsamma gäller om vi skapar upp taggar. Vi kan nu alltså enkelt skapa upp taggar som sedan kan användas för att vidarebefordra personer till olika sidor.
Det intressanta sker nu när vi skall skapa sidan för att hämta taggar. Vi börjar med att skapa vyn för formuläret. Det skall inte vara kopplat till någon modell.
Sidan i sin helhet ser ut så här:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>GetBarcode</h2>
<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>
<% using (Html.BeginForm()) {%>
<fieldset>
<legend>Fields</legend>
<p>
<label for="category">Kategori:</label>
<%= Html.TextBox("category") %>
<%= Html.ValidationMessage("category", "*")%>
</p>
<p>
<label for="tag">Namn på tag:</label>
<%= Html.TextBox("tag") %>
<%= Html.ValidationMessage("tag", "*") %>
</p>
<p>
<input type="submit" value="Hämta" />
</p>
</fieldset>
<% } %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
För att testa det så börjar vi med att skapa en kategori vid namn ”Test” och sedan en tagg under den kategorin vid namn ”MSDN” och en URL som pekar mot http://www.msdn.se. När vi väljer att hämta en tagg och fyller i dessa uppgifter så får vi nu:
Testa gärna att ändra koden så att ni kan få andra utseenden på taggarna. Jag bifogar projektet så att ni enkelt kan få ned det och börja labba själva (ni behöver dock ange en egen API-nyckel):
http://misc.mikaelsoderstrom.se/examples/MicrosoftTag.zip
Kom gärna med egna idéer över hur man kan använda dessa, eller exempel på där de används!