Trafiklab - ansluta till ett API - Versionshistorik

PGJ: /* Nästa aktivitet */

2016-01-02T14:03:59Z

Nästa aktivitet

← Äldre version		Versionen från 2 januari 2016 kl. 14.03
Rad 72:		Rad 72:
	I nästa aktivitet ska vi ta och skapa en liten applikation som möjliggör att vi kan skriva in sökord, söka och få datan presenterad på ett lite bättre vis.		I nästa aktivitet ska vi ta och skapa en liten applikation som möjliggör att vi kan skriva in sökord, söka och få datan presenterad på ett lite bättre vis.

	[[Trafiklab - ~~koda mot ett API~~]]		[[Trafiklab - enkel SPA]]

PGJ: /* Tolkning av resultat */

2016-01-02T14:03:06Z

Tolkning av resultat

← Äldre version		Versionen från 2 januari 2016 kl. 14.03
Rad 61:		Rad 61:
	;<code>ResponseData</code>: Här kommer till sist den viktiga biten - själva svarsdatan. Detta är en array som kan innehålla flera objekt. I detta fall hade vi angivit <code>1</code> som antal och vi får därför bara ett svarsobjekt.		;<code>ResponseData</code>: Här kommer till sist den viktiga biten - själva svarsdatan. Detta är en array som kan innehålla flera objekt. I detta fall hade vi angivit <code>1</code> som antal och vi får därför bara ett svarsobjekt.

	Vi behöver gå igenom vad svarsobjektet ~~också~~. Där har vi följande information:		==== Tolkning av svarsobjektet ====
			Vi behöver även gå igenom vad svarsobjektet innehåller. Där har vi följande information:
	;<code>Name</code>: Namnet på den plats [[API]]:et fann åt oss.		;<code>Name</code>: Namnet på den plats [[API]]:et fann åt oss.
	;<code>SiteId</code>: ID för hållplatsområdet där denna plats återfinns.		;<code>SiteId</code>: ID för hållplatsområdet där denna plats återfinns.

PGJ: /* Exempelresultat */

2016-01-02T14:02:12Z

Exempelresultat

← Äldre version		Versionen från 2 januari 2016 kl. 14.02
Rad 50:		Rad 50:

	<div class="well well-meadow">		<div class="well well-meadow">
	(Om du själv vill snygga till JSON-kod så den blir mer lättläst för människor kan du prova den här resursen;		Om du själv vill snygga till JSON-kod så den blir mer lättläst för människor kan du prova den här resursen;
	[https://jsonformatter.curiousconcept.com/ JSON Formatter & Validator].)		[https://jsonformatter.curiousconcept.com/ JSON Formatter & Validator].
	</div>		</div>

PGJ: /* Exempel */

2016-01-02T14:01:43Z

Exempel

← Äldre version		Versionen från 2 januari 2016 kl. 14.01
Rad 30:		Rad 30:

	Prova att klippa ut ovanstående [[URL]], klistra in den i URL-fältet på en webbläsare och ersätt <code>BADA551337</code> med din [[API-nyckel]]. Tryck på enter och du bör få svar ifrån servern. Svaret du erhåller visar alla platser som innehåller strängen "gata". Svårare än så är det inte att kontakta detta [[API]]! De flesta [[REST]]-[[API]]:er har den fördelen att man enkelt kan testa dem direkt i sin webbläsare.		Prova att klippa ut ovanstående [[URL]], klistra in den i URL-fältet på en webbläsare och ersätt <code>BADA551337</code> med din [[API-nyckel]]. Tryck på enter och du bör få svar ifrån servern. Svaret du erhåller visar alla platser som innehåller strängen "gata". Svårare än så är det inte att kontakta detta [[API]]! De flesta [[REST]]-[[API]]:er har den fördelen att man enkelt kan testa dem direkt i sin webbläsare.
			==== Exempelresultat ====
	Vi modifierade exempelt ovan så att enbart en resultat ska returneras. När vi provkörde fick vi följande resultat (omformaterat för att bli mer läsbart):		Vi modifierade exempelt ovan så att enbart en resultat ska returneras. När vi provkörde fick vi följande resultat (omformaterat för att bli mer läsbart):
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
Rad 54:		Rad 54:
	</div>		</div>

			==== Tolkning av resultat ====
	Vi ska ta och gå igenom svaret och tolka vad vi fått för data.		Vi ska ta och gå igenom svaret och tolka vad vi fått för data.
	; <code>StatusCode</code>: Svarskoden talar om huruvida [[API]]-anropet gick bra eller ej. <code>0</code> betyder att allt gick bra.		; <code>StatusCode</code>: Svarskoden talar om huruvida [[API]]-anropet gick bra eller ej. <code>0</code> betyder att allt gick bra.

PGJ den 2 januari 2016 kl. 14.00

2016-01-02T14:00:41Z

@@ Rad 49: / Rad 49: @@
 </syntaxhighlight>
 (Om du själv vill snygga till JSON-kod så den blir mer lättläst för människor kan du prova den här resursen;
 [https://jsonformatter.curiousconcept.com/ JSON Formatter & Validator].)

PGJ den 2 januari 2016 kl. 13.48

2016-01-02T13:48:18Z

@@ Rad 31: / Rad 31: @@
 Prova att klippa ut ovanstående [[URL]], klistra in den i URL-fältet på en webbläsare och ersätt <code>BADA551337</code> med din [[API-nyckel]]. Tryck på enter och du bör få svar ifrån servern. Svaret du erhåller visar alla platser som innehåller strängen "gata". Svårare än så är det inte att kontakta detta [[API]]! De flesta [[REST]]-[[API]]:er har den fördelen att man enkelt kan testa dem direkt i sin webbläsare.
-När vi provkörde fick vi följande resultat:
+Vi modifierade exempelt ovan så att enbart en resultat ska returneras. När vi provkörde fick vi följande resultat (omformaterat för att bli mer läsbart):
 <syntaxhighlight lang="javascript">
-{"StatusCode":0,"Message":null,"ExecutionTime":0,"ResponseData":[{"Name":"Gatan (Ekerö)","SiteId":"3254","Type":"Station","X":"17674411","Y":"59357481"},{"Name":"Daléns gata (Sigtuna)","SiteId":"5008","Type":"Station","X":"17890035","Y":"59619580"},{"Name":"Skyttens gata (Haninge)","SiteId":"8202","Type":"Station","X":"18179604","Y":"59171503"},{"Name":"Dr Widerströms gata (Stockholm)","SiteId":"1663","Type":"Station","X":"17956250","Y":"59284794"},{"Name":"Eyvind Johnsons gata (Stockholm)","SiteId":"1254","Type":"Station","X":"18009762","Y":"59339799"},{"Name":"Fredrika Bremers gata (Stockholm)","SiteId":"1661","Type":"Station","X":"17970291","Y":"59283167"},{"Name":"Renstiernas gata (på Bondeg) (Stockholm)","SiteId":"1308","Type":"Station","X":"18084651","Y":"59313587"},{"Name":"Vädurens gata (Klockarleden)  (Haninge)","SiteId":"8204","Type":"Station","X":"18168377","Y":"59167197"},{"Name":"Vattumannens gata (på Klockarleden)  (Haninge)","SiteId":"8203","Type":"Station","X":"18172863","Y":"59166856"},{"Name":"Viktor Rydbergs gata (Stockholm)","SiteId":"1262","Type":"Station","X":"18009232","Y":"59328832"}]}
 </syntaxhighlight>

PGJ: /* "SL Platsuppslag" */

2016-01-02T13:43:44Z

"SL Platsuppslag"

← Äldre version		Versionen från 2 januari 2016 kl. 13.43
Rad 2:		Rad 2:

	== "[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]" ==		== "[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]" ==
	"[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]" är ett [[API]] som kan ge oss information om en plats genom att ange platsens namn (eller delar av platsens namn). Man kan söka efter hållplatser, adresser och platser. Om du går in under dokumentationen för "[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]", så ser du att det finns ett enda [[API]]-anrop som vi kan utföra mot detta API. Detta är ett [[REST]]-anrop och ~~dess~~ [[URL]] anges enligt ~~mallen~~ (för korthetens skulle, utelämnar vi de parametrar som inte är obligatoriska):		"[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]" är ett [[API]] som kan ge oss information om en plats genom att ange platsens namn (eller delar av platsens namn). Man kan söka efter hållplatser, adresser och platser. Om du går in under dokumentationen för "[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]", så ser du att det finns ett enda [[API]]-anrop som vi kan utföra mot detta API. Detta är ett [[REST]]-anrop och anropet utformas följdaktligen som en [[URL]].

			=== Anrops-URL ===
			En anrops-URL för detta [[API]] ska anges enligt följande mall (för korthetens skulle, utelämnar vi de parametrar som inte är obligatoriska):

	<code>		<code>
	api.sl.se/api2/typeahead.<FORMAT>?key=<DIN NYCKEL>&searchstring=<SÖKORD></code>		api.sl.se/api2/typeahead.<FORMAT>?key=<DIN NYCKEL>&searchstring=<SÖKORD></code>

	Alla bitar som anges i formen "<code><NÅNTING></code>" är ~~saker~~ som du behöver fylla i med information som gäller för just ditt anrop. Vi går igenom vad dessa ska sättas till:		Alla bitar som anges i formen "<code><NÅNTING></code>" är parametrar som du behöver fylla i med information som gäller för just ditt anrop. Vi går igenom vad dessa ska sättas till:

			==== Parametrar ====
	;<FORMAT>:Vilken typ av svars data vill du ha? [[JSON]] eller [[XML]].		;<FORMAT>:Vilken typ av svars data vill du ha? [[JSON]] eller [[XML]].
	;<DIN NYCKEL>:Här anger du din [[API-nyckel]].		;<DIN NYCKEL>:Här anger du din [[API-nyckel]].
Rad 18:		Rad 22:
	;<MAX ANTAL SVAR>:Hur många svar vill du maximalt erhålla. 50 är max. Defaultvärdet är <code>10</code>.		;<MAX ANTAL SVAR>:Hur många svar vill du maximalt erhålla. 50 är max. Defaultvärdet är <code>10</code>.

			=== Exempel ===
	En fullständig söknings-[[URL]] skulle alltså kunna tänkas se ut så här (förutom att det är fejkad [[API-nyckel]]:		En fullständig söknings-[[URL]] skulle alltså kunna tänkas se ut så här (förutom att det är fejkad [[API-nyckel]]:

Rad 25:		Rad 30:

	Prova att klippa ut ovanstående [[URL]], klistra in den i URL-fältet på en webbläsare och ersätt <code>BADA551337</code> med din [[API-nyckel]]. Tryck på enter och du bör få svar ifrån servern. Svaret du erhåller visar alla platser som innehåller strängen "gata". Svårare än så är det inte att kontakta detta [[API]]! De flesta [[REST]]-[[API]]:er har den fördelen att man enkelt kan testa dem direkt i sin webbläsare.		Prova att klippa ut ovanstående [[URL]], klistra in den i URL-fältet på en webbläsare och ersätt <code>BADA551337</code> med din [[API-nyckel]]. Tryck på enter och du bör få svar ifrån servern. Svaret du erhåller visar alla platser som innehåller strängen "gata". Svårare än så är det inte att kontakta detta [[API]]! De flesta [[REST]]-[[API]]:er har den fördelen att man enkelt kan testa dem direkt i sin webbläsare.

			När vi provkörde fick vi följande resultat:
			<syntaxhighlight lang="javascript">
			{"StatusCode":0,"Message":null,"ExecutionTime":0,"ResponseData":[{"Name":"Gatan (Ekerö)","SiteId":"3254","Type":"Station","X":"17674411","Y":"59357481"},{"Name":"Daléns gata (Sigtuna)","SiteId":"5008","Type":"Station","X":"17890035","Y":"59619580"},{"Name":"Skyttens gata (Haninge)","SiteId":"8202","Type":"Station","X":"18179604","Y":"59171503"},{"Name":"Dr Widerströms gata (Stockholm)","SiteId":"1663","Type":"Station","X":"17956250","Y":"59284794"},{"Name":"Eyvind Johnsons gata (Stockholm)","SiteId":"1254","Type":"Station","X":"18009762","Y":"59339799"},{"Name":"Fredrika Bremers gata (Stockholm)","SiteId":"1661","Type":"Station","X":"17970291","Y":"59283167"},{"Name":"Renstiernas gata (på Bondeg) (Stockholm)","SiteId":"1308","Type":"Station","X":"18084651","Y":"59313587"},{"Name":"Vädurens gata (Klockarleden) (Haninge)","SiteId":"8204","Type":"Station","X":"18168377","Y":"59167197"},{"Name":"Vattumannens gata (på Klockarleden) (Haninge)","SiteId":"8203","Type":"Station","X":"18172863","Y":"59166856"},{"Name":"Viktor Rydbergs gata (Stockholm)","SiteId":"1262","Type":"Station","X":"18009232","Y":"59328832"}]}
			</syntaxhighlight>

PGJ: /* "SL Platsuppslag" */

2016-01-02T13:38:45Z

"SL Platsuppslag"

← Äldre version		Versionen från 2 januari 2016 kl. 13.38
Rad 2:		Rad 2:

	== "[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]" ==		== "[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]" ==
	"[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]" är ett [[API]] som kan ge oss information om en plats genom att ange platsens namn (eller delar av platsens namn). Man kan söka efter hållplatser, adresser och platser. Om du går in under dokumentationen för "[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]", så ser du att det finns ett enda [[API]]-anrop som vi kan utföra mot detta API. Detta är ett [[REST]]-anrop och dess [[URL]] anges enligt mallen:		"[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]" är ett [[API]] som kan ge oss information om en plats genom att ange platsens namn (eller delar av platsens namn). Man kan söka efter hållplatser, adresser och platser. Om du går in under dokumentationen för "[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]", så ser du att det finns ett enda [[API]]-anrop som vi kan utföra mot detta API. Detta är ett [[REST]]-anrop och dess [[URL]] anges enligt mallen (för korthetens skulle, utelämnar vi de parametrar som inte är obligatoriska):

	<code>		<code>
	api.sl.se/api2/typeahead.<FORMAT>?key=<DIN NYCKEL>&searchstring=<SÖKORD>~~&stationsonly=<ENDAST STATIONER>&maxresults=<MAX ANTAL SVAR>~~		api.sl.se/api2/typeahead.<FORMAT>?key=<DIN NYCKEL>&searchstring=<SÖKORD></code>
	</code>

	Alla bitar som anges i formen "<code><NÅNTING</code>" är saker som du behöver fylla i med information som gäller för just ditt anrop. Vi går igenom vad dessa ska sättas till:		Alla bitar som anges i formen "<code><NÅNTING></code>" är saker som du behöver fylla i med information som gäller för just ditt anrop. Vi går igenom vad dessa ska sättas till:

	;<FORMAT>:Vilken typ av svars data vill du ha? [[JSON]] eller [[XML]].		;<FORMAT>:Vilken typ av svars data vill du ha? [[JSON]] eller [[XML]].
	;<DIN NYCKEL>:Här anger du din [[API-nyckel]].		;<DIN NYCKEL>:Här anger du din [[API-nyckel]].
	;<SÖKORD>:Söksträngen som anger vad du vill söka efter.		;<SÖKORD>:Söksträngen som anger vad du vill söka efter.
	;<ENDAST STATIONER>:Vill du enbart söka på stationsnamn. Kan sättas <code>true</code> eller <code>false</code>.
	;<MAX ANTAL SVAR>:Hur många svar vill du maximalt erhålla. 50 är max.		Följande går att sätta, men de är inte obligatoriska:

			;<ENDAST STATIONER>:Vill du enbart söka på stationsnamn. Kan sättas <code>true</code> eller <code>false</code>. Defaultvärdet är <code>false</code>.
			;<MAX ANTAL SVAR>:Hur många svar vill du maximalt erhålla. 50 är max. Defaultvärdet är <code>10</code>.

	En fullständig söknings-[[URL]] skulle alltså kunna tänkas se ut så här (förutom att det är fejkad [[API-nyckel]]:		En fullständig söknings-[[URL]] skulle alltså kunna tänkas se ut så här (förutom att det är fejkad [[API-nyckel]]:

	<code>		<code>
	https://api.sl.se/api2/typeahead.json?key=BADA551337&searchstring=gata~~&stationsonly=false&maxresults=10~~		https://api.sl.se/api2/typeahead.json?key=BADA551337&searchstring=gata
	</code>		</code>

	Prova att klippa ut ovanstående [[URL]], klistra in den i URL-fältet på en webbläsare och ersätt <code>BADA551337</code> med din [[API-nyckel]]. Tryck på enter och du bör få svar ifrån servern. Svaret du erhåller visar alla platser som innehåller strängen "gata". Svårare än så är det inte att kontakta detta [[API]]! De flesta [[REST]]-[[API]]:er har den fördelen att man enkelt kan testa dem direkt i sin webbläsare.		Prova att klippa ut ovanstående [[URL]], klistra in den i URL-fältet på en webbläsare och ersätt <code>BADA551337</code> med din [[API-nyckel]]. Tryck på enter och du bör få svar ifrån servern. Svaret du erhåller visar alla platser som innehåller strängen "gata". Svårare än så är det inte att kontakta detta [[API]]! De flesta [[REST]]-[[API]]:er har den fördelen att man enkelt kan testa dem direkt i sin webbläsare.

PGJ: Skapade sidan med 'Vi ska nu titta på hur man kan kontakta ett API hos [http://www.trafiklab.se/ Trafiklab]. För detta krävs att du registrerat dig som person samt att du skapat ett proje...'

2016-01-02T13:34:21Z

Skapade sidan med 'Vi ska nu titta på hur man kan kontakta ett API hos [http://www.trafiklab.se/ Trafiklab]. För detta krävs att du registrerat dig som person samt att du skapat ett proje...'

Ny sida

Vi ska nu titta på hur man kan kontakta ett [[API]] hos [http://www.trafiklab.se/ Trafiklab]. För detta krävs att du registrerat dig som person samt att du skapat ett projekt hos dem. I exemplen kommer vi att använda oss av "[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]", så registrera att ditt projekt använder sig av detta [[API]] och hämta ut en [[API-nyckel]]. Om du inte har gjort dessa saker, så passa på att göra det nu. Då blir det enklare att följa med i exemplen och du kan testa saker för dig själv.

== "[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]" ==
"[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]" är ett [[API]] som kan ge oss information om en plats genom att ange platsens namn (eller delar av platsens namn). Man kan söka efter hållplatser, adresser och platser. Om du går in under dokumentationen för "[https://www.trafiklab.se/api/sl-platsuppslag SL Platsuppslag]", så ser du att det finns ett enda [[API]]-anrop som vi kan utföra mot detta API. Detta är ett [[REST]]-anrop och dess [[URL]] anges enligt mallen:

<code>
api.sl.se/api2/typeahead.<FORMAT>?key=<DIN NYCKEL>&searchstring=<SÖKORD>&stationsonly=<ENDAST STATIONER>&maxresults=<MAX ANTAL SVAR>
</code>

Alla bitar som anges i formen "<code><NÅNTING</code>" är saker som du behöver fylla i med information som gäller för just ditt anrop. Vi går igenom vad dessa ska sättas till:

;<FORMAT>:Vilken typ av svars data vill du ha? [[JSON]] eller [[XML]].
;<DIN NYCKEL>:Här anger du din [[API-nyckel]].
;<SÖKORD>:Söksträngen som anger vad du vill söka efter.
;<ENDAST STATIONER>:Vill du enbart söka på stationsnamn. Kan sättas <code>true</code> eller <code>false</code>.
;<MAX ANTAL SVAR>:Hur många svar vill du maximalt erhålla. 50 är max.

En fullständig söknings-[[URL]] skulle alltså kunna tänkas se ut så här (förutom att det är fejkad [[API-nyckel]]:

<code>
https://api.sl.se/api2/typeahead.json?key=BADA551337&searchstring=gata&stationsonly=false&maxresults=10
</code>

Prova att klippa ut ovanstående [[URL]], klistra in den i URL-fältet på en webbläsare och ersätt <code>BADA551337</code> med din [[API-nyckel]]. Tryck på enter och du bör få svar ifrån servern. Svaret du erhåller visar alla platser som innehåller strängen "gata". Svårare än så är det inte att kontakta detta [[API]]! De flesta [[REST]]-[[API]]:er har den fördelen att man enkelt kan testa dem direkt i sin webbläsare.