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.

http://wso2.com/products/api-manager/

*

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

http://jaggeryjs.org/

*

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

http://jaggeryjs.org/apidocs/i18n.jag

๏ Client side Javascript based String localization Store/site/conf/locales/js/i18nResources.json http://i18next.com/

https://docs.wso2.org/display/AM160/Internationalization+and+Localization

*

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

http://wso2.github.io/caramel

*

Future ๏ Migrate Store/Publisher to WSO2 Enterprise Store http://wso2.

com/products/enterprise-store

**

More Information

๏ http://wso2.com/products/api-manager/

๏ http://wso2.com/library/articles/2012/06/api-store-themes/

๏ http://wso2.com/library/tutorials/2012/09/customizing-api-store-publisher-part1/

๏ http://wso2.com/library/tutorials/2013/08/customizing-api-storepublisher-jaggery-applicationspart2/

**

Business Model

Contact us !