Customizing the API Store & Publisher in WSO2 API Manager

50 %
50 %
Information about Customizing the API Store & Publisher in WSO2 API Manager

Published on March 11, 2014



Last Updated: Jan. 2014 Lalaji Sureshika & Joseph Fonseka Customizing the API Store & Publisher WSO2 API Manager Team

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

* 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

** What WSO2 delivers

* Agenda ๏ Introduction to WSO2 API Manager ๏ Dive in to API Store ๏ Customizing API Store & Publisher ๏ Localization ๏ Sample Customizations ๏ Future

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

* Key Components

* API Store

* 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

* Dive in to API Store ๏ API Store Directory Structure

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

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

* Dive in to API Store ๏ API Store Request Flow

* 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

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

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

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

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

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

* Custom Error Pages ๏ Add to Store/jaggery.conf

* API Publisher

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

* 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

* Sample Customizations

* Sample Customizations

* Sample Customizations

* Future ๏ Custom themes per tenants ๏ API Usage Statistics on Store ๏ Move the Store/Publisher to adhere to Caramel Framework built on Jaggery

* Future ๏ Migrate Store/Publisher to WSO2 Enterprise Store http://wso2. com/products/enterprise-store

** More Information ๏ ๏ ๏ publisher-part1/ ๏ storepublisher-jaggery-applicationspart2/

** Business Model

Contact us !

Add a comment

Related presentations

Related pages

Customizing WSO2 API Manager API Store and Publisher ...

Up to now,hope most of the audience is familiarized with writing java web applications. Now it's time to write a complete javascript based web application ...
Read more

Customizing the API Store - API Manager 1.7.0 - WSO2 ...

Customizing the API Store. ... Cloud-based API Manager setup (e.g., WSO2 API ... them using the API Publisher. Tags allow API providers to categorise ...
Read more

Customizing API Store - API Manager 1.6.0 - WSO2 Documentation

This documentation is for WSO2 API Manager 1.6.0. ... features and functionality of the API Store as ... For instruction on creating/customizing ...
Read more

Customizing the API Store & Publisher in the WSO2 API ...

Middleware Platform API Manager; App Manager; Application Server; Business Process Server; Business Rules Server
Read more

WSO2 API Manager - Make the API Store Default Component ...

I'm using WSO2 API Manager 1.8 and it has ... Sign up or log in to customize ... what I want to do is load the API store rather than loading the publisher.
Read more

WSO2 API Manager - Make the API Store Default Component ...

WSO2 API Manager - Make the API Store ... loaded rather than the API Publisher in WSO2 API Manager 1 ... WSO2 API Manager - Expose Publisher & Store URLs ...
Read more

WSO2 API | WSO2 API manager

WSO2 API manager is a complete solution for designing and publishing APIs, creating and managing a developer ... Designed for easy customization, ...
Read more

WSO2 Presents Webinar Series on Strategies for ...

... workflows-for-wso2-api-manager. March 11: Customizing the API Store and ... API Store and Publisher in the WSO2 API Manager,” will ...
Read more