Customizing the API Store & Publisher in WSO2 API Manager

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

Published on March 11, 2014

Author: wso2.org

Source: slideshare.net

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 !

Add a comment

Related presentations

Related pages

Customizing WSO2 API Manager API Store and Publisher ...

The WSO2 API Manager is a complete solution for publishing APIs, creating and managing a developer community, and for scalable routing of API traffic. By ...
Read more

Customizing WSO2 API Manager Store/Publisher - Part 2 ...

In part 1 of this tutorial, we discussed the WSO2 API Manager Store and its directory structure. In this part, we focus on the flow of how a user request ...
Read more

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

Customizing the API Store. ... API Manager setup, self signup to the API Store is disabled by default to ... designing them using the API Publisher.
Read more

Customizing API Store - API Manager 1.4.0 - WSO2

API Manager 1.4.0; WSO2 API Manager Documentation; User Guide. Customizing API Store. Skip to end of metadata ...
Read more

WSO2 Presents Webinar Series on Strategies for ...

... (PRWEB) February 10, 2014 ... Customizing the API Store and Publisher in WSO2 API Manager . ... “Customizing the API Store and Publisher in the WSO2 ...
Read more

Customizing the API Store & Publisher in WSO2 API Manager

Combining WSO2 API Manager with WSO2 BAM for billing in the energy industry
Read more

wso2 - No anonymous view of API Manager store - Stack Overflow

I have stumbled into an issue with WSO2 API Manager inside a ... No anonymous view of API Manager store. ... If I go to either store and publisher I am ...
Read more

Driving Academy Online | Online Drivers Ed | Indiana BMV ...

Learn how to drive online. A driver education course consists of 30 hours of classroom instruction and 6 hours of driving. Our Indiana BMV approved course ...
Read more