Spreadshirt – Sälja varor med API

spreadshirt-logoJag har alltid varit intresserad av att driva min egen webbshop, jag har har vid flera tillfällen både installerat och underhållit olika webbshoppar men aldrig något eget. Därför blev jag extra intresserad när jag nyligen upptäckte Spreadshirt och fram för allt Spreadshirt API, jag gillar tanken bakom APIer,  möjligheten att bygga vidare eller mixa olika datakällor och blev intresserad av att testa spreadshirt och se hur deras API fungerar.

Jag började med att skapa ett konto och att ansöka om en API-nyckel, de gör skillnad på den europeiska och amerikanska marknaden. Länken i deras api information länkar till den tyska sidan för den europeiska marknaden, men ett snabbt hack visar att det gick lika bra med den svenska sidan genom att byta ut .de till .se.

Första steget är redan avklarat, jag tyckte inte produktbilderna passade in bra med designen på min butik så jag valde ändra på hur produktbilderna presenteras. Detta gjorde jag genom att bygga en egen mashup som laddar ner befintliga produktbilder från deras image-server, ta ut trycket från bilden och lägga det på mina egna bilder, fria från 90-tals drop-shadow, sedan roterar jag bilden och lägger en liten reflektion under bilden. Bilderna komprimeras sedan med tinypngs API (deras API är i stängd beta men kontakta dem på twitter om ni är intresserade av att testa) och laddas sedan upp och cashas på amazon s3. Tjänsten är för tillfället fri att använda och koden släppt som open source så kolla gärna in image.spreadshirt.pixel2.se.

Nästa steg är att utveckla min egen webbshop som kopplar mot Spreadshirts API. Genom deras api kan man få tillgång till följande information

  • Produktbilder i valfri storlek
  • Butiks information (så som valuta, språk, tidigare beställningar)
  • Artiklar (produkt information, priser, rabatter, design)
  • Kundvagn (spara produkter i kundvagnen)

Så när kunden trycker på att gå till kassan måste man fortfarande vidarebefordra kunden till spreadshirts egen betallösning, vilken till en viss del kan vara skönt då man slipper allt strul med betalningar. Men det gör också att det blir svårare att påverka flödet i kassan, och t.ex. fraktkostnader.

De har också en mycket användbar API Browser som jag använt vid flera tillfällen där man enkelt kan testa olika anrop och se deras svar.

Webbshoppen bygger jag med min favoritplattform wordpress med woocommerce plugin för att lägga på extra funktionalitet för webbshoppen, shoppen bygger även på ett tema från samma företag. Både deras tema och woocommerce är mycket smidigt att arbeta med då de följer samma princip som wordpress med hocks som man kan registrerar sig på. Vilket gör att det är mycket enkelt att lägga till egna delar eller helt byta ut befintligt innehåll utan att behöva göra några modifieringar i deras kod. Detta gör det mycket enklare att underhålla då alla ändringar ligger i min egen plugin, och det gör det också väldigt enkelt att uppdatera deras kod ifall det skulle behövas.

Så vad är det jag tänkte försöka mig på att sälja undrar du kanske då….  domänen säger förhoppningsvis allt; tygpåsar.nu mer om det senare :)

Mina reflektioner över WebCoast 2012

Över helgen har jag fått äran att delta på webcoast, ett stort tack till binero som gjorde det möjligt. Det var första året för mig på webcoast som är en uniconference med inriktning på web och sociala medier. Det har varit en mycket trevlig helg med intressanta föreläsningar, men framförallt intressanta möten med nya människor.

Men det var framförallt två möten, två sessioner som var extra inspirerande (följer man mitt twitter-flöde kanske man kan lista ut vilka ;) ).

image

Det började strålande redan under förmiddagen med en API duo av Annika Linde och Andreas Krohn där de pratade första om apier ur ett marknadsförings perspektiv och sedan mer praktiskt om vilka apier som finns att tillgå och vad man kan göra med dem.

Som en bra avrundning på dagen höll Annika också en session om 12 steg att tänka på som startup, ett steg mer än förra gången hon höll presentation. Undrar om det blir en 13 stegs process nästa år? :)

Båda sessionerna, och många fler finns tillgängliga på bambuser och man kan nog till och med höra mina kniviga frågor mot slutet.

Nästa år ser jag fram emot, och skall försöka hålla min egen session om användarvänlighet och user interaction både på webben och i mobila lösningar på WebCoast 2013.

Jag bloggar detta på buss 16 på väg in till dag 2, för att jag är med och tävlar om Bineros grymma “surfplatta”  :)

Slå samman twitter, youtube, bloggen till ett rss flöde

Jag fick nyligen i uppdrag att presentera alla sociala aktiviteter för en speciell kund samlad på en och samma sida. Jag testade först med att lägga in widgets från twitter och installerade en rss-widget för wordpress, som fungerade ganska bra, men det blev väldigt rörigt och gick inte att få en översikt över aktiviteten. Och det finns ingen bra widget för youtube att använda.

Jag ville istället presentera alla aktiviteter i ett gemensamt flöde på hemsidan. Men för att göra det enklast ville jag sammanfoga flödena till ett flöde som jag sedan med hjälp av en simpel rss-widget kunde visa på hemsidan.

Jag sökte runt en del och testade några olika tjänster innan jag hittade en perfekt träff för det jag ville göra, Yahoo Pipes. Men Yahoo pipes kan man definiera ett antal källor att läsa från, dessa kan man sedan bearbeta för att slutligen slå samman till ett flöde. Steg ett är att hitta rss-feeds för de källor man vill visa, se min tidigare post om hur man hittar rss feed för youtube kanaler, för twitter finns det i deras API-beskrivning en länk till hur man får fram rss-flödet genom user_timeline. För bloggen, om det är en wordpress-blogg, lägger man bara på /feed/ i slutet av adressen för att få rss-flödet.

Så här satte jag upp Yahoo Pipes för att slå samman flera flöden till ett

  1. Letade reda på rss-feed för de flöden jag ville inkludera och drog ut tre stycken Fecth Feed
  2. I twitter flödet ingår även användarnamnet i varje rad, eftersom jag enbart visar flödet för en person ville jag inte ha med detta och la därför till en Loop med en String Replace item.title och tog bort ”<användarnamn>:
  3. Drog sedan min loop och de andra två flödena till en Union för att koppla samman dem
  4. Efter detta är det viktigt att lägga till en Sort, annars kommer ändå alla inlägg från en feed först och man ser ingen skillnad
  5. Sist valde jag att beskära flödet med Truncate och enbart visa top 10 träffar.
  6. Sista boxen blir då Pipe Output, kollar man i debuggern eller kör sin pipe så ska man se alla flöden sammanfogade till ett.

När nu alla flöden var sammanslagna kunde jag med en simpel rss-widget inkludera dessa på kundes wordpress sida. Och med några enkla hack för att vissa rätt ikon för respektive rad i flödet så måste jag säga att det blev mycket bra. Fler detaljer om hur jag satte upp yahoo pipes spana in min pipe.

Så här får du tag på RSS-flöde för din kanal på Youtube

Jag ville nyligen visa Youtube-aktivitet för en speciell kanal direkt på kundens hemsida. Nu för tiden är man ganska bortskämt med att webbtjänster tillhandahåller både färdiga widgets och API. Men att komma åt ett simpelt rss-flöde är inte alltid lika enkelt längre. Och informationen om just Youtube är både mycket utspridd och inte så väldokumenterad.

Efter att sökte runt en bra stund och nästa gett upp gick jag in och granskade källan på youtube.com och såg då det jag letat efter så länge. Adressen till flödet, unikt för varje kanal. Så dagens tips är kort men förhoppningsvis sparar det dig lite huvudbry ifall du vill göra något liknande med youtube-flöden.

Så här får du fram flödet

  • Högerklicka på sidan och välj ”visa källa”
  • Scrolla ner tills du hittar <link rel="alternate" type="application/rss+xml" title="RSS" href="http://gdata.youtube.com/feeds/base/users/<namnet-på-kanalen>/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile">och kopiera hela href-attributet.
  • Eller anpassa adressen själv genom att bara byta ut delen med kanalens namn i.

Så har du ett flöde med rubrik, beskrivning och en thumbnail över videoklippet. Själv ville jag göra detta för att kunna slå samman flera flöden till ett, men mer om det i ett kommande inlägg. Ifall du vill göra mer avancerade saker mot youtube finns även ett API att tillgå.

Uppgradera minnet i HTC Desire till 16 gb

20110617-102732.jpgJag har fram tills nu klarat mig bra på det 4 gb minneskort som följer med som standard till HTC Desire. Men eftersom man nu kan installera fler och fler appar på sd-kortet börjar utrymmet att tryta. Jag bestämde mig därför för att skaffa ett större minneskort. Telefonen använder standard micro sd kort så det finnes ett stort utbud av märken och storlekar. Jag valde ett Sandisk 16 gb micro sd-kort och fick betala 399 kr.

Uppgradera minneskort utan att förlora data

En viktig faktor är att jag fortfarande vill ha kvar all data från mitt gamla minneskort, alla bilder men även applikationer och deras inställningar. Vissa tipsar om att införskaffa en kortläsare för att säkerhetskopiera alla filerna, men det visade sig att androids möjlighet att agera som diskenhet fungerade minst lika bra.

Så här gjorde jag för att byta minne på min HTC Desire

  • Jag började med att ansluta telefonen med usb-kabeln och väljer att montera den som en diskenhet till datorn och tog en kopia av allt på minneskortet.
  • Med detta klart stänger jag av telefonen och bryter med lite kraft loss baksidan och tar ut batteriet för att kunna skjuta ut minneskortet.
  • Byter bara plats på minneskorten och monterar ihop telefonen.
  • Startar upp telefonen och monterar den återigen som en diskenhet och kopierar helt enkelt tillbaka alla filer och väljer att migrera de mappar som redan existera på minneskortet (androd skapar på nytt upp alla mappar som behövs).
  • Startar om telefonen och med en gång finns alla applikationer, inställninar och bilder tillgängliga

Vad betyder Shobre för dig?

Jag äger i alla fall domänen, den var inköpt under mina domän glada dagar men hade inte direkt någon plan för vad jag skulle göra med den. För att den inte ska stå helt tomt har jag nu lagt upp en simpel sida med den något så officiella beskrivning på vad shobre betyder enligt Språkrådet (2004). Men jag ville samtidigt göra något mer av den, när jag lekte runt på facebooks plugin-lista fick jag tanken att se vad shobre betyder för andra. Sagt och gjort jag slängde upp en facebook comment plugin. Vilket är väldigt simpelt, man konfigurerar bara vilken adress man vill kommentera kring och bredden på sidan och får sedan en färdig snippet att inkludera på sidan. Kolla in Shobre.se för att se hur det blev.

Nya systembolaget.se med fokus på användarvänlighet är inte användarvänlig


Jag upptäckte nyligen att systembolaget.se har fått en ny design, det är en riktigt uppfräschad design och där fokus enligt dem själva ligger på ”hjälpa användare hitta och välja oavsett kunskap”. Den information som jag oftast vill hitta när jag besöker systembolaget.se är deras öppettider, det kan vara som idag när jag är lite osäker på när närmaste systembolaget stänger och framförallt runt högtider kan hela systembolaget.se ligga nere för att alla vill hitta aktuella öppettider. Detta tycker man ju att de borde förstå och ta till sig när de designar en ny hemsida. InUse har tagit fram konceptet och interaktionsdesign med fokus på användarvänlighet men lyckas ändå inte, hemsidan har i mitt tycke blivit mer otydlig genom att ta bort ”Öppettider” ur huvudmenyn, dessa ligger nu under ”Butiker & ombud” vilket tidigare kallades ”Butiker & Öppettider” vilket var mycket tydligare indikation och jag kunde snabbt söka igenom menyvalen för att hitta rätt länk. Istället har de lagt en ruta med ”Våra generella öppettider” längst ner till höger på sidan, men även med min 24″ skärm med 1920×1200 pixlar så måste jag scrolla innan jag ser öppettiderna, dvs det är information som majoriteten av besökarna kommer att missa.

Men tillbaka till huvudsyftet med deras nya hemsida, sökningen och den nya ”smarta” sökrutan, jag väljer givetvis den största sökrutan att det finns två likadana sökrutor utan något markering vad det är för skillnad är inget jag tänker, eller ens märker till en början. Jag fyller därför i ”Backaplan” som är mitt närmaste systembolag för att hitta deras öppettider. Till min stora förvåning för jag inga träffar, istället måste jag gå till sidan ”Butiker och ombud” eller använda den andra sökrutan som ser i princip likadan. Där lyckas jag mycket riktigt hitta butiken och ser med en gång öppettiderna. Men varför måste det vara två liknande sökrutor? Kan inte hemsidan förstå att om jag anger ett butiksnamn visa med butikerna, eller får jag inga träffar på drycker sök igenom butikerna också, eller visa mig i alla fall en tabb i sökresultaten med matchande butiker. Det borde vara en teknisklösning, och jag pratar inte om någon avancerad algoritm, som hemsidan borde lösa istället för att användaren måste tänka  på det.

Så för att göra en användarvänlig hemsida, sätt användarnas primära behov i fokus, man ska inte behöva tänka efter när man besöker hemsida. Det finns många tekniska lösningar som vi, som utvecklare kan implementera för att hjälpa besökaren. Jag tänkte avsluta med just ett sådant tips, om jag fick möjlighet att påverka  nya systembolaget.se skulle jag satt större fokus på öppettider, jag skulle använda geo-lokalisering för att ta reda på vart användaren befinner sig, ifall besökaren använder en mobiltelefon (vilket blir allt vanligare) blir det ännu enklare att visa relevant information baserat på deras position. Då kan man direkt på startsidan ge användaren den information de oftast behöver.

Jag har därför lagt rutan om öppettider bredvid sökrutan, direkt i blickfånget där den hör hemma. Den försöker själv hitta närmaste butik och visar istället dagens och morgondagens öppettider, med ett enkelt knapptryck tar mig direkt till butikens sida för mer information och öppettider eller visar andra butiker i mitt närområde.

Följ

Få meddelanden om nya inlägg via e-post.