Your SlideShare is downloading. ×
Spreadshirt API presentation for BarCamp London 8
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Spreadshirt API presentation for BarCamp London 8

1,526

Published on

info and insights on how to work with the Spreadshirt API

info and insights on how to work with the Spreadshirt API

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,526
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Build up technical service and sales support
    Technical sales support for professional partners
    Technical service support for all partners having questions
  • Transcript

    • 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 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 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?
    • 9. 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
    • 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 IntegrationMySpace 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 • 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 – 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 <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>
    • 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 Browser PHP Proxy API 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: <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
    • 38. • 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 Unauthorized WWW-Authenticate: SprdAuth API Security – SprdAuth Security Protocol continued Page 38 *your own label
    • 39. • 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/... • …/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 <?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
    • 46. <?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
    • 47. <?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
    • 48. <?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
    • 49. <?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
    • 50. <?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
    • 51. 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 Product CreationLocation: …api/v1/shops/123/products/456 OK Location: …api/v1/shops/123/designs/456 Update Design
    • 52. Creating Baskets Page 52 your own label Client API 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

    ×