Spreadshirt API presentation for BarCamp London 8

Realizing your Ideas around Customized Apparel

using Spreadshirt’s APIMartin Breest

Platform Evangelist @ Spreadshirt

We allow you to create Customized Apparel (CA) …

Page 2 your own label

ProductType

Design

Text

We offer Customized Apparel as a Service (CAaaS) consisting of Hosted Software …


Hosted Shops

Marketplaces

T-Shirt DesignerSoftware

… and Service


Legal Service

Production

Call Center

Accounting

Service

Shipping

• Shop Partners−Hosted shop with full service attached−Earn commissions for sold articles

• Designers−Build up design portfolio−Build up fame in community−Earn commissions for used/sold designs

Interesting for …


We get Requests …


Partner

Can we put news headlines

on shirts with Spreadshirt?

We get Requests …


Partner

Partner



How can we promote our Spreadshirt articles via Facebook?

We get Requests …


Partner

PartnerPartner



We have our own designer. Can we

use Spreadshirt as

fulfillment platform?


We get Requests …


Partner

Partner

Partner

PartnerPartner

Can we put social network

graphs on shirts with

Spreadshirt?

Can we put the photos of our

photo community on shirts with Spreadshirt?



We have our own designer. Can we

use Spreadshirt as

fulfillment platform?

Can we manage and display our

Spreadshirt shop in Wordpress?


Partner

• You can customize a hosted shop • We need to create a special partner

integration

Problems:• Shopping experience limited (1 t-shirt designer only)

• Distribution channels limited (web only, no Facebook …)

• Devices limited (Flash on IPhones?)

• Development resources limited • Maintenance costs

Answer until now was …


API is the Basis for Product Development


Platfor

m

API

Marketplace

HostedShops

T-Shirt Designer

DesignContest

Main Stream Apps

API allows to grow Product Ecosystem around our Platform


Platfor

m

API

Marketplace

HostedShops

T-Shirt Designer

DesignContest

MySpaceIntegration

Custom TwitterTweet App

Custom CNNHeadline App

Main Stream Apps

Partner Integrations

API opens up Opportunities for you and us


Platfor

m

API

Marketplace

HostedShops

T-Shirt Designer

DesignContest

FacebookIntegration

WordpressIntegration

JoomlaIntegrationMySpace

Integration

Custom TwitterTweet App

Custom CNNHeadline App

IPad/IPhoneShopping App

Main Stream Apps

Opportunities

Photo Community

Team Order(Football, Stag Party)

Headlines

Social Network Graphs

Picasa Photos

?Partner Integrations

• Shop visualization−Shop designs, articles, products, inventory−Basket creation and modification −HTML checkout integration

• Product creation−Customer design upload−Customer product creation

• Marketplace search−Design and article search

API Functionality available Today


2010

• Order interface −Automated order handling

• Catalog management −Creating and modifying shop articles and

designs

• Checkout−Provide basic checkout features

…

API Roadmap


2011

API Support and Community


External Agencies/Developers/Partners



Wiki

Forum

Blog

Mailing List

Sample Code

DemoApps

PlatformEvangelist

External Agencies/Developers/Partners

API



Wiki

Forum

Blog

Mailing List

Sample Code

DemoApps

PlatformEvangelist

External Agencies/Developers/Partners Technical Sales Support

Technical Service Support

API

• Wiki – http://developer.spreadshirt.net

• Blog – http://blog.spreadshirt.net/developer

• Forum - http://forum.spreadshirt.net/forumdisplay.php?f=133

• Sample Code (Javascript, PHP, Java, Scala …) - http://sourceforge.net/projects/spreadshirtapps/

• Demo Apps – http://demoapp.spreadshirt.net/simplomat/

• Mailing List – [email protected]

API Information Sources


http://developer.spreadshirt.net/

http://blog.spreadshirt.net/developer

http://forum.spreadshirt.net/forumdisplay.php?f=133

http://sourceforge.net/projects/spreadshirtapps/

http://demoapp.spreadshirt.net/simplomat/

DemosSpreadshirt Simplomat


Simplomat News Headline Demo (HTML, Javascript, PHP Proxy, CNN RSS Feed)


Simplomat Photo Demo(HTML, Javascript, PHP Proxy, Photo Source)


Simplomat Marketplace Design Promo(HTML, Javascript, PHP Proxy, Spreadshirt Design Search)


How does the HTML Code look like?


<div id="designer"></div><div class="menu"> <form action="javascript:simplomat.createProductAndCheckout();"> <div id="appearances"></div> <div id="sizes"></div> <div id="price">0,00</div> <input id="submitButton" type="submit" name="submit" value="Buy Now!"/> </form></div><div id="newsBox"></div>

• Initialize

• Add design or text

• Checkout

How does the Javascript Code look like?


var spreadshirtAPI = new SpreadshirtAPI("eu", "524251", true);var simplomat = new Simplomat(); simplomat.priceChangedCallback = function() { $("#price").html(this.product.getFormatedPrice());};…simplomat.init("designer", 1000, spreadshirtAPI, …);

simplomat.product.currentView.addTextAndLayout("the text", …); simplomat.product.currentView.addDesign(null, "4868344“, …);

simplomat.createProductAndCheckout();

What happens behind the scenes?


Redirect to Checkout

Browser PHP Proxy API

GET /shops/x/productTypes/6

POST /shops/x/products

POST /baskets

GET /baskets/x/checkout

Checkout Url

…

…

Init

CheckoutBasket Url

Product Url

ProductType Url

Open Discussion

Introduction to Spreadshirt‘s APIMartin Breest

Platform Evangelist @ sprd.net AG


API Terminology – ProductType

Page 29 *your own label

ProductType, the T-Shirt we print on

Appearance, The color/pattern Combination(up to 20 colors)

ViewThe position from which you look

PrintAreaThe area on which we can print

API Terminology – Design/ Text


LondonCity

Design, Vector or Pixelimage we can print

Text,Text we can print

Font,The font we print text with(more than 20 fonts)

Design Layer, Color Layers of a Vector Design

PrintType PrintColor, Colors of a print type we use to print design and text(digi – rgb colorsflock, flex – up to 30 colors)

API Terminology - Product


Product, Set of all Designsand Text to be printed on ProductType

Configuration, One Text or Design applied to a PrintArea

Composition, All Designs and Text Applied to one View

24,90 €

Article, Product in Shop with Price tag on it

Sample: https://api.spreadshirt.net/api/v1/shops/205909/products/100045766

API Terminology - Basket


Basket

ConcreteBasket Item Element(Product/ Article)

AbstractBasket Item

API Architecture


• Addressability−every piece of information has URL and can be

bookmarked (…/shops/42, …/shops/42/productTypes …)

• Statelessness• Connectedness

−Representation format is XML−XML contains xlinks to other resources (data or

images)−OPTIONS supported

• Uniform Interface−HTTP Methods – OPTIONS, GET, PUT, POST, DELETE−Status Codes – 200, 201, 401, 500 …−HTTP Headers – Location, Authorization, Last-

Modified, Expires, Cache-Control …−Resource types – list, entity

API is provided as REST API


• Unprotected/ protected resources• Protection

−API-Key−Security Session −API-Key + Security Session

• Protected are−POST, PUT, DELETE requests−User data−Baskets

API Security


• Issued by API owner• Consists of

−Key – 36 character long ascii string, e.g. 34f00c9cq8af5z4120w88aavf0b62a111eef

−Secret – 36 character ascii string, e.g. b42932cbqb9d6z4cdfwbb7cve5e0b9590609

API Security – API Keys


• Retrieved through POST on https://api.spreadshirt.net/api/v1/sessions

Request:<login>

<username>mbs</username> <password>the password</password></login>

Response:Status: 201 (Created)Location: https://api.spreadshirt.net/api/v1/sessions/ b42932cbwb9d6q4cdfvbb7cte5e0b9590609

• Session Id – 36 character long ascii string, e.g. b42932cbwb9d6q4cdfvbb7cte5e0b9590609

API Security – Security Sessions


• POST …/v1/baskets

Request Authorization: SprdAuth apiKey="<apikey>", data="<method> <url> <time>", sig="SHA1(<method> <url> <time> <secret>)", sessionId="<sessionId>"

Response for wrong security information: Status: 401 UnauthorizedWWW-Authenticate: SprdAuth

API Security – SprdAuth Security Protocol continued


• http://image.spreadshirt.net(com)/image-server/v1/...• …/productTypes/{id}/views/{id}/appearances/{id} -> Producttyp• …/productTypes/{id}/variants/detail (size) -> Variant • …/appearances/{id} -> Appearance• …/printColors/{id} -> PrintColor• …/fontFamilies/{id}/fonts/{id} -> Fonts• …/designs/{id} -> Design• …/products/{id}/views/{id} -> Product• …/compositions/{id}/views/{id} -> Composition• …/configurations/{id} -> Configuration

Image API Layout


http://image.spreadshirt.net/image-server/v1/

• Retrieve ProductType ImagesGET http://image.spreadshirt.net/image-server/v1/productTypes/20/views/1/appearances/251

• Retrieve Appearance ImagesGET …/image-server/v1/appearances/76

• Retrieve FontsGET …/image-server/v1/fontFamilies/6/fonts/19

Retrieving Inventory Images


• Retrieve Design ImagesGET …/image-server/v1/designs /2484607?mediaType=jpg

• Retrieve Design Layer ImagesGET …/image-server/v1/designs /2484607 ?config:colors[0]=none

Working with Images - Designs


• Retrieve Product ImagesGET …/image-server/v1/products /100045766/views/1

• Retrieve Composition ImagesGET …/image-server/v1/compositions /100045766/views/1

• Retrieve Configuration ImagesGET …/image-server/v1/configurations /100092921

Working with Images – Products


• http://api.spreadshirt.net(com)/api/v1/...• …/sessions -> Login • …/sessions/{id} -> Logout• …/currencies -> Currency List• …/currencies/{id}• …/languages -> Language List• …/languages/{id}• …/countries -> Country List• …/countries/{id}• …/shops… -> Shop Context• …/baskets -> Create Basket • …/baskets/{id} -> Get, Update, Delete• …/baskets/{id}/items -> List Items or Create• …/baskets/{id}/items/{id} -> Get, Update, Delete• …/baskets/{id}/checkout -> HTML Checkout URL

Data API Layout


• …/shops/{id} -> Shop Data• …/shops/{id}/printTypes -> Print Type List• …/shops/{id}/printTypes/{id}• …/shops/{id}/fontFamilies -> Font Family

List• …/shops/{id}/fontFamilies/{id}• …/shops/{id}/productTypes -> Product Type

List• …/shops/{id}/productTypes/{id}• …/shops/{id}/designs -> Design List• …/shops/{id}/designs/{id}• …/shops/{id}/articles -> Article List• …/shops/{id}/articles/{id}• …/shops/{id}/products -> Product List• …/shops/{id}/products/{id}• …

Data API Shop Layout


Shop is Starting Point – Follow the Links!


<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <shop xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://api.spreadshirt.net" xlink:href="http://api.spreadshirt.net/api/v1/shops/205909" id="205909"> <user xlink:href="http://api.spreadshirt.net/api/v1/users/40000" id="40000"/> <country xlink:href="http://api.spreadshirt.net/api/v1/countries/1" id="1"/> <language xlink:href="http://api.spreadshirt.net/api/v1/languages/1" id="1"/> <currency xlink:href="http://api.spreadshirt.net/api/v1/currencies/1" id="1"/>

<productTypes xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/productTypes"/> <printTypes xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/printTypes"/> <fontFamilies xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/fontFamilies"/> <productTypeDepartments xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/..."/> <designCategories xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/designCategories"/> <designs xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/designs"/> <articleCategories xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/articleCategories"/> <articles xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/articles"/> <products xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/products"/> <currencies xlink:href="http://api.spreadshirt.net/api/v1/currencies"/> <languages xlink:href="http://api.spreadshirt.net/api/v1/languages"/> <countries xlink:href="http://api.spreadshirt.net/api/v1/countries"/> <baskets xlink:href="http://api.spreadshirt.net/api/v1/baskets"/> </shop>

Links to all Required resources

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<designs xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://api.spreadshirt.net" sortOrder="default" sortField="default" count="177365" limit="50" offset="0" xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/designs"> <design xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/designs/m2484607-1"

id="2484607"> <name>I Heart</name> <price> <vatExcluded>0.00</vatExcluded> <vatIncluded>0.00</vatIncluded> <vat>19.00</vat> <currency xlink:href="http://api.spreadshirt.net/api/v1/currencies/1" id="1"/> </price> <resources> <resource xlink:href="http://image.spreadshirt.net/image-server/v1/designs/2484607" type="preview" mediaType="png"/> </resources> </design>

…

Data Payload contains Links to Images – Follow the Links!


Links to images in Resources blocks

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <productType xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns="http://api.spreadshirt.net" weight="73.0" xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/productTypes/20" id="20">

…<views> <view id="1"> <size unit="mm"> <width>836.705882352941</width> <height>836.705882352941</height> </size> … <viewMaps> <viewMap> <printArea id="18"/> <offset unit="mm"> <x>242.047</x> <y>95.6235</y> </offset> </viewMap> </viewMaps> … </view> …

</views> <printAreas>

<printArea id="18"> … <boundary> <size unit="mm"> <width>343.6470588056</width> <height>594.658823507</height> </size> … </boundary> </printArea>

…</printAreas>…

ProductType XML



<design xmlns:xlink="http://www.w3.org/1999/xlink" xmlns=http://api.spreadshirt.net

xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/designs/m2484607-1"

id="2484607">

<name>I Heart</name>

<description>Ich und mein Herz, uns trennt niemand!</description>

<tags> love, Spot, Werbung, …</tags>

<user id="1"/>

<restrictions>

<fixedColors>false</fixedColors>

…

<size unit="mm">

<width>200.025</width>

<height>109.00833333333</height>

</size>

<colors>

<color>

<default>#000000</default>

<origin>#000000</origin>

…

</color>

<color>

<default>#DA2724</default>

<origin>#DA2724</origin>

…

</color>

</colors>

…

</design>

Design XML


http://api.spreadshirt.net/


<product xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns="http://api.spreadshirt.net" weight="0.0"

xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/products/100045766" id="100045766">

…

<productType xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/productTypes/20" id="20"/>

<appearance id="251"/>

…

<configurations>

<configuration type="design" id="100092922">

<printArea id="18"/>

<printType id="14"/>

<offset unit="mm"><x>70.77</x><y>89.26</y></offset>

<content dpi="25.4" unit="mm">

<svg>

<image xlink:href="http://image.spreadshirt.net/image-server/v1/designs/2484607"

height="109.011" width="200.03" printColorRGBs="#000000 #D41C3B"

printColorIds="13 20" designId="2484607"/>

</svg>

</content>

…

<configuration type="text" id="100092921">

<printArea id="18"/>

<printType id="14"/>

<offset unit="mm"><x>13.01</x> <y>223.19</y> </offset>

<content dpi="25.4" unit="mm"><svg> <text>

<tspan font-style="normal" font-size="52.804325097593306" font-weight="bold"

font-family="PMNCaeciliaLTBold" fill="#000000" text-anchor="middle"

printColorId="13" fontId="99" fontFamilyId="66"

x="155.37911668567" y="40.60888671875">London</tspan>

</text>

</svg></content>

…

Product XML


<?xml version="1.0" encoding="UTF-8" standalone="yes"?><basket xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://api.spreadshirt.net" xlink:href="http://api.spreadshirt.net/api/v1/baskets/b22cf5c3-3d95-4e16-be85-610cea050e26" id="b22cf5c3-3d95-4e16-be85-610cea050e26"> <token>sprd92d2c094-99a3-4412-b6ea-1a290f948e9f</token> <basketItems> <basketItem xlink:href…/baskets/b22cf5c3-3d95-4e16-be85-610cea050e26/items/3d2045d4-c102-4d63-8db9-882daec2efb8" id="3d2045d4-c102-4d63-8db9-882daec2efb8"> <description>M?nner Kapuzenpullover</description> <quantity>1</quantity> <element type="sprd:product" id="100045766" xlink:href="https://api.spreadshirt.net/api/v1/shops/205909/products/100045766"> <properties> <property key="appearance">251</property> <property key="size">2</property> </properties> </element> <price> <vatExcluded>29.75</vatExcluded> <vatIncluded>35.40</vatIncluded> <vat>19.00</vat> <currency xlink:href="http://api.spreadshirt.net/api/v1/currencies/1" id="1"/> </price> <shop xlink:href="http://api.spreadshirt.net/api/v1/shops/205909" id="205909"/> </basketItem> </basketItems></basket>

Basket XML


Creating Products with a Design


Client Image API API

POST …api/v1/shops/123/designs

PUT …image-server/v1/designs/456

POST api/v1/shops/123/products

Design Upload

ProductCreationLocation: …api/v1/shops/123/products/456

OK

Location: …api/v1/shops/123/designs/456

Update Design

Creating Baskets


Client API

POST …api/v1/baskets

POST …api/v1/baskets/123/items

GET …api/v1/baskets/123/checkoutRetrieve CheckoutURL

Payload with HTML Checkout URL

Location: …api/v1/baskets/123/items/456

Location: …api/v1/baskets/123

Add BasketItem

CreateBasket

Open Discussion

Technology

Spreadshirt API presentation for BarCamp London 8