Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Spreadshirt API presentation for BarCamp London 8

on

  • 1,734 views

info and insights on how to work with the Spreadshirt API

info and insights on how to work with the Spreadshirt API

Statistics

Views

Total Views
1,734
Views on SlideShare
1,734
Embed Views
0

Actions

Likes
1
Downloads
21
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • Build up technical service and sales support Technical sales support for professional partners Technical service support for all partners having questions 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10
  • 30.11.10

Spreadshirt API presentation for BarCamp London 8 Spreadshirt API presentation for BarCamp London 8 Presentation Transcript

  • Realizing your Ideas around Customized Apparel using Spreadshirt’s API
    • Martin Breest
    • Platform Evangelist @ Spreadshirt
  • We allow you to create Customized Apparel (CA) … Page your own label ProductType Design Text
  • We offer Customized Apparel as a Service (CAaaS) consisting of Hosted Software … Page your own label Hosted Shops Marketplaces T-Shirt Designer Software
  • … and Service Page 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 your own label
  • We get Requests … Page your own label Partner Can we put news headlines on shirts with Spreadshirt?
  • We get Requests … Page 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 your own label Partner Partner 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 ?
  • We get Requests … Page your own label Partner Partner Partner Partner 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
    • 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 your own label
  • API is the Basis for Product Development Page your own label Platform API Marketplace Hosted Shops T-Shirt Designer Design Contest Main Stream Apps
  • API allows to grow Product Ecosystem around our Platform Page 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
  • API opens up Opportunities for you and us Page 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
    • 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 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 your own label 2011
  • API Support and Community Page your own label External Agencies/Developers/Partners
  • API Support and Community Page your own label Wiki Forum Blog Mailing List Sample Code Demo Apps Platform Evangelist External Agencies/Developers/Partners API
  • API Support and Community Page 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
    • 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_address]
    API Information Sources Page your own label
  • Demos
    • Spreadshirt Simplomat
    Page your own label
  • Simplomat News Headline Demo (HTML, Javascript, PHP Proxy, CNN RSS Feed) Page your own label
  • Simplomat Photo Demo (HTML, Javascript, PHP Proxy, Photo Source) Page your own label
  • Simplomat Marketplace Design Promo (HTML, Javascript, PHP Proxy, Spreadshirt Design Search) Page your own label
  • How does the HTML Code look like? Page your own label <div id= &quot;designer&quot; ></div> <div class=&quot;menu&quot;> <form action=&quot;javascript:simplomat.createProductAndCheckout();&quot;> <div id=&quot;appearances&quot;></div> <div id=&quot;sizes&quot;></div> <div id=&quot;price&quot;>0,00</div> <input id=&quot;submitButton&quot; type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Buy Now!&quot;/> </form> </div> <div id=&quot; newsBox &quot;></div>
    • Initialize
    • Add design or text
    • Checkout
    How does the Javascript Code look like? Page your own label var spreadshirtAPI = new SpreadshirtAPI(&quot;eu&quot;, &quot;524251&quot;, true); var simplomat = new Simplomat(); simplomat.priceChangedCallback = function() { $(&quot;#price&quot;).html(this.product.getFormatedPrice()); }; … simplomat. init(&quot;designer&quot;, 1000, spreadshirtAPI, …); simplomat.product.currentView. addTextAndLayout (&quot;the text&quot;, …); simplomat.product.currentView. addDesign (null, &quot;4868344“, …); simplomat. createProductAndCheckout ();
  • What happens behind the scenes? Page 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
  • Open Discussion
  • Introduction to Spreadshirt‘s API
    • Martin Breest
    • Platform Evangelist @ sprd.net AG
    Page your own label
  • API Terminology – ProductType Page *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
  • API Terminology – Design/ Text Page *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)
  • API Terminology - Product Page *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
  • API Terminology - Basket Page your own label Basket Concrete Basket Item Element (Product/ Article) Abstract Basket Item
  • API Architecture Page 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 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 *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 *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 *your own label
    • POST …/v1/baskets Request Authorization: SprdAuth apiKey=&quot;<apikey>&quot;, data=&quot;<method> <url> <time>&quot;, sig=&quot;SHA1(<method> <url> <time> <secret>)&quot;, sessionId=&quot;<sessionId>&quot; Response for wrong security information: Status: 401 Unauthorized WWW-Authenticate: SprdAuth
    API Security – SprdAuth Security Protocol continued Page *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 your own label
    • 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 *your own label
    • 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 *your own label
    • 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 *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 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 your own label
  • Shop is Starting Point – Follow the Links!
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;yes&quot;?>
    • <shop xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
    • xmlns=&quot;http://api.spreadshirt.net&quot;
    • xlink:href=&quot;http://api.spreadshirt.net/api/v1/shops/205909&quot; id=&quot;205909&quot;>
    • <user xlink:href=&quot;http://api.spreadshirt.net/api/v1/users/40000&quot; id=&quot;40000&quot;/>
    • <country xlink:href=&quot;http://api.spreadshirt.net/api/v1/countries/1&quot; id=&quot;1&quot;/>
    • <language xlink:href=&quot;http://api.spreadshirt.net/api/v1/languages/1&quot; id=&quot;1&quot;/>
    • <currency xlink:href=&quot;http://api.spreadshirt.net/api/v1/currencies/1&quot; id=&quot;1&quot;/>
    • <productTypes xlink:href=&quot; http://api.spreadshirt.net/api/v1/shops/205909/productTypes &quot;/>
    • <printTypes xlink:href=&quot; http://api.spreadshirt.net/api/v1/shops/205909/printTypes &quot;/>
    • <fontFamilies xlink:href=&quot; http://api.spreadshirt.net/api/v1/shops/205909/fontFamilies &quot;/>
    • <productTypeDepartments xlink:href=&quot; http://api.spreadshirt.net/api/v1/shops/205909/... &quot;/>
    • <designCategories xlink:href=&quot; http://api.spreadshirt.net/api/v1/shops/205909/designCategories &quot;/>
    • <designs xlink:href=&quot; http://api.spreadshirt.net/api/v1/shops/205909/designs &quot;/>
    • <articleCategories xlink:href=&quot; http://api.spreadshirt.net/api/v1/shops/205909/articleCategories &quot;/>
    • <articles xlink:href=&quot; http://api.spreadshirt.net/api/v1/shops/205909/articles &quot;/>
    • <products xlink:href=&quot; http://api.spreadshirt.net/api/v1/shops/205909/products &quot;/>
    • <currencies xlink:href=&quot; http://api.spreadshirt.net/api/v1/currencies &quot;/>
    • <languages xlink:href=&quot; http://api.spreadshirt.net/api/v1/languages &quot;/>
    • <countries xlink:href=&quot; http://api.spreadshirt.net/api/v1/countries &quot;/>
    • <baskets xlink:href=&quot; http://api.spreadshirt.net/api/v1/baskets &quot;/>
    • </shop>
    Page your own label Links to all Required resources
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;yes&quot;?>
    • <designs xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xmlns=&quot;http://api.spreadshirt.net&quot; sortOrder=&quot;default&quot; sortField=&quot;default&quot; count=&quot;177365&quot; limit=&quot;50&quot; offset=&quot;0&quot; xlink:href=&quot;http://api.spreadshirt.net/api/v1/shops/205909/designs&quot;> <design xlink:href=&quot;http://api.spreadshirt.net/api/v1/shops/205909/designs/m2484607-1&quot;
    • id=&quot;2484607&quot;> <name>I Heart</name> <price> <vatExcluded>0.00</vatExcluded> <vatIncluded>0.00</vatIncluded> <vat>19.00</vat> <currency xlink:href=&quot;http://api.spreadshirt.net/api/v1/currencies/1&quot; id=&quot;1&quot;/> </price> <resources> <resource xlink:href=&quot; http://image.spreadshirt.net/image-server/v1/designs/2484607 &quot; type=&quot;preview&quot; mediaType=&quot;png&quot;/> </resources> </design> …
    Data Payload contains Links to Images – Follow the Links! Page your own label Links to images in Resources blocks
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;yes&quot;?>
    • <productType xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xmlns=&quot;http://api.spreadshirt.net&quot; weight=&quot;73.0&quot;
    • xlink:href=&quot;http://api.spreadshirt.net/api/v1/shops/205909/productTypes/20&quot; id=&quot;20&quot;> … <views> <view id=&quot;1&quot;> <size unit=&quot;mm&quot;> <width>836.705882352941</width> <height>836.705882352941</height> </size> … <viewMaps> <viewMap> <printArea id=&quot;18&quot;/> <offset unit=&quot;mm&quot;> <x>242.047</x> <y>95.6235</y> </offset> </viewMap> </viewMaps> … </view> …
    • </views>
    • <printAreas> <printArea id=&quot;18&quot;> … <boundary> <size unit=&quot;mm&quot;> <width>343.6470588056</width> <height>594.658823507</height> </size> … </boundary> </printArea>
    • … </printAreas> …
    ProductType XML Page your own label
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;yes&quot;?>
    • <design xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; xmlns= http://api.spreadshirt.net
    • xlink:href=&quot;http://api.spreadshirt.net/api/v1/shops/205909/designs/m2484607-1&quot;
    • id=&quot;2484607&quot;>
    • <name>I Heart</name>
    • <description>Ich und mein Herz, uns trennt niemand!</description>
    • <tags> love, Spot, Werbung, …</tags>
    • <user id=&quot;1&quot;/>
    • <restrictions>
    • <fixedColors>false</fixedColors>
    • <size unit=&quot;mm&quot;>
    • <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 your own label
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;yes&quot;?>
    • <product xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
    • xmlns=&quot;http://api.spreadshirt.net&quot; weight=&quot;0.0&quot;
    • xlink:href=&quot;http://api.spreadshirt.net/api/v1/shops/205909/products/100045766&quot; id=&quot;100045766&quot;>
    • <productType xlink:href=&quot;http://api.spreadshirt.net/api/v1/shops/205909/productTypes/20&quot; id=&quot;20&quot;/>
    • <appearance id=&quot;251&quot;/>
    • <configurations>
    • <configuration type=&quot;design&quot; id=&quot;100092922&quot;>
    • <printArea id=&quot;18&quot;/>
    • <printType id=&quot;14&quot;/>
    • <offset unit=&quot;mm&quot;><x>70.77</x><y>89.26</y></offset>
    • <content dpi=&quot;25.4&quot; unit=&quot;mm&quot;>
    • <svg>
    • <image xlink:href=&quot;http://image.spreadshirt.net/image-server/v1/designs/2484607&quot;
    • height=&quot;109.011&quot; width=&quot;200.03&quot; printColorRGBs=&quot;#000000 #D41C3B&quot;
    • printColorIds=&quot;13 20&quot; designId=&quot;2484607&quot;/>
    • </svg>
    • </content>
    • <configuration type=&quot;text&quot; id=&quot;100092921&quot;>
    • <printArea id=&quot;18&quot;/>
    • <printType id=&quot;14&quot;/>
    • <offset unit=&quot;mm&quot;><x>13.01</x> <y>223.19</y> </offset>
    • <content dpi=&quot;25.4&quot; unit=&quot;mm&quot;><svg> <text>
    • <tspan font-style=&quot;normal&quot; font-size=&quot;52.804325097593306&quot; font-weight=&quot;bold&quot;
    • font-family=&quot;PMNCaeciliaLTBold&quot; fill=&quot;#000000&quot; text-anchor=&quot;middle&quot;
    • printColorId=&quot;13&quot; fontId=&quot;99&quot; fontFamilyId=&quot;66&quot;
    • x=&quot;155.37911668567&quot; y=&quot;40.60888671875&quot;> London </tspan>
    • </text>
    • </svg></content>
    Product XML Page your own label
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;yes&quot;?>
    • <basket xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
    • xmlns=&quot;http://api.spreadshirt.net&quot;
    • xlink:href=&quot;http://api.spreadshirt.net/api/v1/baskets/b22cf5c3-3d95-4e16-be85-610cea050e26&quot;
    • id=&quot;b22cf5c3-3d95-4e16-be85-610cea050e26&quot;>
    • <token>sprd92d2c094-99a3-4412-b6ea-1a290f948e9f</token>
    • <basketItems>
    • <basketItem xlink:href…/baskets/b22cf5c3-3d95-4e16-be85-610cea050e26/items/3d2045d4-c102-4d63-8db9-882daec2efb8&quot;
    • id=&quot;3d2045d4-c102-4d63-8db9-882daec2efb8&quot;>
    • <description>M?nner Kapuzenpullover</description>
    • <quantity>1</quantity>
    • <element type=&quot;sprd:product&quot; id=&quot;100045766&quot;
    • xlink:href=&quot;https://api.spreadshirt.net/api/v1/shops/205909/products/100045766&quot;>
    • <properties>
    • <property key=&quot;appearance&quot;>251</property>
    • <property key=&quot;size&quot;>2</property>
    • </properties>
    • </element>
    • <price>
    • <vatExcluded>29.75</vatExcluded>
    • <vatIncluded>35.40</vatIncluded>
    • <vat>19.00</vat>
    • <currency xlink:href=&quot;http://api.spreadshirt.net/api/v1/currencies/1&quot; id=&quot;1&quot;/>
    • </price>
    • <shop xlink:href=&quot;http://api.spreadshirt.net/api/v1/shops/205909&quot; id=&quot;205909&quot;/>
    • </basketItem>
    • </basketItems>
    • </basket>
    Basket XML Page your own label
  • Creating Products with a Design Page 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 Creation Location: …api/v1/shops/123/products/456 OK Location: …api/v1/shops/123/designs/456 Update Design
  • Creating Baskets Page 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
  • Open Discussion