1. Realizing your Ideas around Customized Apparel using Spreadshirt’s API Martin Breest Platform Evangelist @ Spreadshirt

2. We allow you to create Customized Apparel (CA) … Page 2 your own label ProductType Design Text

3. We offer Customized Apparel as a Service (CAaaS) consisting of Hosted Software … Page 3 your own label Hosted Shops Marketplaces T-Shirt Designer Software

4. … and Service Page 4 your own label Legal Service Production Call Center Accounting Service Shipping

5. 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

6. We get Requests … Page 6 your own label Partner Can we put news headlines on shirts with Spreadshirt?

7. We get Requests … Page 7 your own label Partner Can we put news headlines on shirts with Spreadshirt? How can we promote our Spreadshirt articles via Facebook?

8. We get Requests … Page 8 your own label Partner 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?

9. We get Requests … Page 9 your own label Partner 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

10. 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

11. API is the Basis for Product Development Page 11 your own label Platform API Marketplace Hosted Shops T-Shirt Designer Design Contest Main Stream Apps

12. API allows to grow Product Ecosystem around our Platform Page 12 your own label Platform API Marketplace Hosted Shops T-Shirt Designer Design Contest MySpace Integration Custom Twitter Tweet App Custom CNN Headline App Main Stream Apps Partner Integrations

13. API opens up Opportunities for you and us Page 13 your own label Platform API Marketplace Hosted Shops T-Shirt Designer Design Contest Facebook Integration Wordpress Integration Joomla Integration MySpace Integration Custom Twitter Tweet App Custom CNN Headline App IPad/IPhone Shopping App Main Stream Apps Opportunities Photo Community Team Order (Football, Stag Party) Headlines Social Network Graphs Picasa Photos ? Partner Integrations

14. 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

15. 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

16. API Support and Community Page 16 your own label External Agencies/Developers/Partners

17. API Support and Community Page 17 your own label Wiki Forum Blog Mailing List Sample Code Demo Apps Platform Evangelist External Agencies/Developers/Partners API

18. API Support and Community Page 18 your own label Wiki Forum Blog Mailing List Sample Code Demo Apps Platform Evangelist External Agencies/Developers/Partners Technical Sales Support Technical Service Support API

19. Wiki – http://developer.spreadshirt.net http://developer.spreadshirt.net Blog – http://blog.spreadshirt.net/developer http://blog.spreadshirt.net/developer Forum - http://forum.spreadshirt.net/forumdisplay.php?f=133 http://forum.spreadshirt.net/forumdisplay.php?f=133 Sample Code (Javascript, PHP, Java, Scala …) - http://sourceforge.net/projects/spreadshirtapps/ http://sourceforge.net/projects/spreadshirtapps/ Demo Apps – http://demoapp.spreadshirt.net/simplomat/ http://demoapp.spreadshirt.net/simplomat/ Mailing List – developer@spreadshirt.net API Information Sources Page 19 your own label

20. Demos Spreadshirt Simplomat Page 20 your own label

21. Simplomat News Headline Demo (HTML, Javascript, PHP Proxy, CNN RSS Feed) Page 21 your own label

22. Simplomat Photo Demo (HTML, Javascript, PHP Proxy, Photo Source) Page 22 your own label

23. Simplomat Marketplace Design Promo (HTML, Javascript, PHP Proxy, Spreadshirt Design Search) Page 23 your own label

24. How does the HTML Code look like? Page 24 your own label 0,00 <input id="submitButton" type="submit" name="submit" value="Buy Now!"/>

25. 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();

26. What happens behind the scenes? Page 26 your own label Redirect to Checkout BrowserPHP ProxyAPI GET /shops/x/productTypes/6 POST /shops/x/products POST /baskets GET /baskets/x/checkout Checkout Url … … Init Checkout Basket Url Product Url ProductType Url

27. Open Discussion

28. Introduction to Spreadshirt‘s API Martin Breest Platform Evangelist @ sprd.net AG Page 28 your own label

29. API Terminology – ProductType Page 29 *your own label ProductType, the T-Shirt we print on Appearance, The color/pattern Combination (up to 20 colors) View The position from which you look PrintArea The area on which we can print

30. API Terminology – Design/ Text Page 30 *your own label London City Design, Vector or Pixel image 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 colors flock, flex – up to 30 colors)

31. API Terminology - Product Page 31 *your own label Product, Set of all Designs and 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

32. API Terminology - Basket Page 32 your own label Basket Concrete Basket Item Element (Product/ Article) Abstract Basket Item

33. API Architecture Page 33 your own label

34. 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

35. 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

36. 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

37. Retrieved through POST on https://api.spreadshirt.net/api/v1/sessions Request: mbs the password 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

38. POST …/v1/baskets Request Authorization: SprdAuth apiKey=" ", data=" ", sig="SHA1( )", sessionId=" " Response for wrong security information: Status: 401 Unauthorized WWW-Authenticate: SprdAuth API Security – SprdAuth Security Protocol continued Page 38 *your own label

39. http://image.spreadshirt.net(com)/image-server/v1/... 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

40. Retrieve ProductType Images GET http://image.spreadshirt.net/image- server/v1/productTypes/20/views/1 /appearances/251 Retrieve Appearance Images GET …/image-server/v1/appearances/76 Retrieve Fonts GET …/image-server/v1/fontFamilies/6/fonts/19 Retrieving Inventory Images Page 40 *your own label

41. Retrieve Design Images GET …/image-server/v1/designs /2484607?mediaType=jpg Retrieve Design Layer Images GET …/image-server/v1/designs /2484607 ?config:colors[0]=none Working with Images - Designs Page 41 *your own label

42. Retrieve Product Images GET …/image-server/v1/products /100045766/views/1 Retrieve Composition Images GET …/image-server/v1/compositions /100045766/views/1 Retrieve Configuration Images GET …/image-server/v1/configurations /100092921 Working with Images – Products Page 42 *your own label

43. http://api.spreadshirt.net(com)/api/v1/... 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

44. …/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

45. Shop is Starting Point – Follow the Links! Page 45 your own label <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"> Links to all Required resources

46. <design xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/designs/m2484607-1" id="2484607"> I Heart 0.00 0.00 19.00 … Data Payload contains Links to Images – Follow the Links! Page 46 your own label Links to images in Resources blocks

47. <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"> … 836.705882352941 836.705882352941 … 242.047 95.6235 … … … 343.6470588056 594.658823507 … … … ProductType XML Page 47 your own label

48. <design xmlns:xlink="http://www.w3.org/1999/xlink" xmlns=http://api.spreadshirt.nethttp://api.spreadshirt.net xlink:href="http://api.spreadshirt.net/api/v1/shops/205909/designs/m2484607-1" id="2484607"> I Heart Ich und mein Herz, uns trennt niemand! love, Spot, Werbung, … false … 200.025 109.00833333333 #000000 … #DA2724 … … Design XML Page 48 your own label

49. <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"> … … 70.77 89.26 <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"/> … 13.01 223.19 <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 … Product XML Page 49 your own label

50. <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"> sprd92d2c094-99a3-4412-b6ea-1a290f948e9f <basketItem xlink:href…/baskets/b22cf5c3-3d95-4e16-be85-610cea050e26/items/3d2045d4-c102-4d63-8db9-882daec2efb8" id="3d2045d4-c102-4d63-8db9-882daec2efb8"> M?nner Kapuzenpullover 1 <element type="sprd:product" id="100045766" xlink:href="https://api.spreadshirt.net/api/v1/shops/205909/products/100045766"> 251 2 29.75 35.40 19.00 Basket XML Page 50 your own label

51. Creating Products with a Design Page 51 your own label ClientImage APIAPI POST …api/v1/shops/123/designs PUT …image-server/v1/designs/456 POST api/v1/shops/123/products Design Upload Product Creation Location: …api/v1/shops/123/products/456 OK Location: …api/v1/shops/123/designs/456 Update Design

52. Creating Baskets Page 52 your own label ClientAPI POST …api/v1/baskets POST …api/v1/baskets/123/items GET …api/v1/baskets/123/checkout Retrieve Checkout URL Payload with HTML Checkout URL Location: …api/v1/baskets/123/items/456 Location: …api/v1/baskets/123 Add Basket Item Create Basket

53. Open Discussion