Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Customizing the API Store & Publisher in WSO2 API Manager


Published on

Published in: Technology
  • Be the first to comment

Customizing the API Store & Publisher in WSO2 API Manager

  1. 1. Last Updated: Jan. 2014 Lalaji Sureshika & Joseph Fonseka Customizing the API Store & Publisher WSO2 API Manager Team
  2. 2. ** About the Presenters ๏ Joseph joined WSO2 in September 2013. He is a Senior Tech Lead in the WSO2 API Manager team where he focuses on improving the UX of the API Manager. In addition to his product development efforts he is also a contributor to the Sahana and OpenEvsys open- source projects. He is also a FOSS advocate. ๏ Lalaji joined WSO2 in September 2010. She is a senior software engineer in the WSO2 API Manager team where her main focus is on the development of the product. In addition to her product development efforts she has provided development support and technology consulting on customer engagements, including customer QuickStart programs.
  3. 3. * About WSO2 * ๏ Global enterprise, founded in 2005 by acknowledged leaders in XML, web services technologies, standards and open source ๏ Provides only open source platform-as-a-service for private, public and hybrid cloud deployments ๏ All WSO2 products are 100% open source and released under the Apache License Version 2.0. ๏ Is an Active Member of OASIS, Cloud Security Alliance, OSGi Alliance, AMQP Working Group, OpenID Foundation and W3C. ๏ Driven by Innovation ๏ Launched first open source API Management solution in 2012 ๏ Launched App Factory in 2Q 2013 ๏ Launched Enterprise Store and first open source Mobile solution in 4Q 2013
  4. 4. ** What WSO2 delivers
  5. 5. * Agenda ๏ Introduction to WSO2 API Manager ๏ Dive in to API Store ๏ Customizing API Store & Publisher ๏ Localization ๏ Sample Customizations ๏ Future
  6. 6. * Introduction ๏ WSO2 API Manager is a complete solution for publishing and managing APIs. ๏ It comes with an out of the box API Store which allows you to publish and advertise your APIs. ๏ You can easily customize the API Store to reflect your company's brand. ๏ Also you can add targeted content to the store and use it to build a developer community under your brand name.
  7. 7. * Key Components
  8. 8. * API Store
  9. 9. * Dive in to API Store ๏ Where to find the API Store {API Manager}/repository/deployment/server/jaggeryapps/store ๏ API Store is built on Jaggery A framework to write web-apps and HTTP-focused web services for all aspects of the application: front-end, communication, Server- side logic and persistence in pure Javascript
  10. 10. * Dive in to API Store ๏ API Store Directory Structure
  11. 11. * Dive in to API Store ๏ API Store Directory Structure jaggery.conf -This file specifies the application specific configurations. It has used to define the URL-mappings for the pages, define welcome page,security-constraints,etc. Templates- Contains views of the web-application. A template can be considered as a re-usable UI block. Blocks-This can be considered as the Controller part of the web app. User actions on each View(template) are sent to the relevant block and then it handle the incoming HTTP requests.
  12. 12. * Dive in to API Store ๏ API Store Directory Structure Modules- Can be considered as the 'Model' of the application. It handles the state of the application.Contains references to all the functions plugged through the java modules in to Store app.. Jagg -This directory is for handling all functionalities to control and manage interactions among the modules,blocks and templates of the jaggery application APIStore/Publisher.
  13. 13. * Dive in to API Store ๏ API Store Request Flow
  14. 14. * Customizing APIStore ๏ Changing the brand ○ Changing the banner ○ Changing the background colors ○ Changing the footer ๏ Create a new jaggery theme. ○ Changing the page layout ๏ Adding new Content. ○ Adding a new page
  15. 15. * Changing the Banner ๏ To change the banner image Locate logo.png from “store/site/themes/fancy/images” and replace it. ๏ To change the banner height and color find “styles-layout.css” in “store/themes/fancy/css” and change the relevant styles.
  16. 16. * Changing Colors & Styles ๏ The store uses bootstrap css to style some of the components and to structure the page layout. ๏ Additional styles are specified in “styles-application.css” and “styles-layout.css” found inside “store/site/themes/fancy/css” directory. ๏ Use the above mention style sheets to customize the colors. ๏ You can include a bootstrap theme to change the styles of bootstrap components.
  17. 17. * Changing the Footer ๏ The footer is located in “store/site/themes/fancy/templates/page/base/template.jag” file. ๏ Open the template file and find a div with “footer-main” class name. ๏ Change the content of the above footer as required.
  18. 18. * Creating a new theme ๏ API Store has Themes and Sub-themes which can be use to customize page layout and styles. ๏ If you want to change the page layout you can create a new theme, and if you only need to change colors and banners better to use subthemes. ๏ Easiest way to create a theme is to duplicate an existing theme and change the templates & styles. ๏ To apply the new theme change the theme property in “site. json” under “site/conf/” directory and refresh the application.
  19. 19. * Creating a new Page ๏ Create new jag file under “store/site/pages/” directory. Ex : aboutus.jag ๏ Create a directory under “store/site/themes/fancy” with the page name and create initializer.jag and template.jag inside it. ๏ Add page content to the template. ๏ Create a path to the page in store/jaggery.conf.
  20. 20. * Custom Error Pages ๏ Add to Store/jaggery.conf
  21. 21. * API Publisher
  22. 22. * Customizing API Publisher ๏ API Publisher is a Jaggery application located in - {API Manager}/repository/deployment/server/jaggeryapps/publisher ๏ You can use the same methods used to customize the API Store to customize API Publisher.
  23. 23. * Internationalization Support ๏ Jaggery based String localization Store/site/conf/locales/jaggery/locale_{locale-code}.json ๏ Client side Javascript based String localization Store/site/conf/locales/js/i18nResources.json
  24. 24. * Sample Customizations
  25. 25. * Sample Customizations
  26. 26. * Sample Customizations
  27. 27. * Future ๏ Custom themes per tenants ๏ API Usage Statistics on Store ๏ Move the Store/Publisher to adhere to Caramel Framework built on Jaggery
  28. 28. * Future ๏ Migrate Store/Publisher to WSO2 Enterprise Store http://wso2. com/products/enterprise-store
  29. 29. ** More Information ๏ ๏ ๏ publisher-part1/ ๏ storepublisher-jaggery-applicationspart2/
  30. 30. ** Business Model
  31. 31. Contact us !