spreadshirt api presentation for barcamp london 8
DESCRIPTION
info and insights on how to work with the Spreadshirt APITRANSCRIPT
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 …
Page 3 your own label
Hosted Shops
Marketplaces
T-Shirt DesignerSoftware
… and Service
Page 4 your own label
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 …
Page 5 your own label
We get Requests …
Page 6 your own label
Partner
Can we put news headlines
on shirts with Spreadshirt?
We get Requests …
Page 7 your own label
Partner
Partner
Can we put news headlines
on shirts with Spreadshirt?
How can we promote our Spreadshirt articles via Facebook?
We get Requests …
Page 8 your own label
Partner
PartnerPartner
Can we put news headlines
on shirts with Spreadshirt?
We have our own designer. Can we
use Spreadshirt as
fulfillment platform?
How can we promote our Spreadshirt articles via Facebook?
We get Requests …
Page 9 your own label
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?
Can we put news headlines
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?
How can we promote our Spreadshirt articles via Facebook?
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 …
Page 10 your own label
API is the Basis for Product Development
Page 11 your own label
Platfor
m
API
Marketplace
HostedShops
T-Shirt Designer
DesignContest
Main Stream Apps
API allows to grow Product Ecosystem around our Platform
Page 12 your own label
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
Page 13 your own label
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
Page 14 your own label
2010
• Order interface −Automated order handling
• Catalog management −Creating and modifying shop articles and
designs
• Checkout−Provide basic checkout features
…
API Roadmap
Page 15 your own label
2011
API Support and Community
Page 16 your own label
External Agencies/Developers/Partners
API Support and Community
Page 17 your own label
Wiki
Forum
Blog
Mailing List
Sample Code
DemoApps
PlatformEvangelist
External Agencies/Developers/Partners
API
API Support and Community
Page 18 your own label
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
Page 19 your own label
DemosSpreadshirt Simplomat
Page 20 your own label
Simplomat News Headline Demo (HTML, Javascript, PHP Proxy, CNN RSS Feed)
Page 21 your own label
Simplomat Photo Demo(HTML, Javascript, PHP Proxy, Photo Source)
Page 22 your own label
Simplomat Marketplace Design Promo(HTML, Javascript, PHP Proxy, Spreadshirt Design Search)
Page 23 your own label
How does the HTML Code look like?
Page 24 your own label
<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?
Page 25 your own label
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?
Page 26 your own label
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
Page 28 your own label
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
Page 30 *your own label
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
Page 31 *your own label
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
Page 32 your own label
Basket
ConcreteBasket Item Element(Product/ Article)
AbstractBasket Item
API Architecture
Page 33 your own label
• 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
Page 34 your own label
• Unprotected/ protected resources• Protection
−API-Key−Security Session −API-Key + Security Session
• Protected are−POST, PUT, DELETE requests−User data−Baskets
API Security
Page 35 *your own label
• 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
Page 36 *your own label
• 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
Page 37 *your own label
• 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
Page 38 *your own label
• 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
Page 39 your own label
• 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
Page 40 *your own label
• 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
Page 41 *your own label
• 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
Page 42 *your own label
• 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
Page 43 your own label
• …/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
Page 44 your own label
Shop is Starting Point – Follow the Links!
Page 45 your own label
<?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!
Page 46 your own label
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
Page 47 your own label
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<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
Page 48 your own label
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<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
Page 49 your own label
<?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
Page 50 your own label
Creating Products with a Design
Page 51 your own label
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
Page 52 your own label
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