In this lab you will discover how to customize and configure 3scale’s Developer Portal.
Audience: API Owners, Product Managers, Developers, Architects
Overview
The focal point of your developers experience is the API developer portal, and the level of effort you put into it will directly correlate to the level of success of your API program, and API developer engagement.
Why Red Hat?
Red Hat 3scale API Management Solution provides a built-in, state-of-the-art CMS portal, making it very easy to create your own branded hub with a custom domain to manage developer interactions, and help increase API adoption.
You can customize the look and feel of the entire Developer Portal to match your own branding. You have complete control over every element of the portal, so you can make it as easy as possible for developers to learn how to use your API.
Credentials:
Your username is: {user-username}
Your password is: openshift
-
Switch to the web browser windown, displaying the console for the Red Hat 3scale API Management Platform.
-
Log in to 3scale Admin web console using
{user-username}and password:openshift. Click on Sign in.
-
Click on the Audience drop down and expand the Developer Portal menu.
-
Click on the Visit Developer Portal to take a look of how your developer portal looks like.
-
You can see there is a default portal with information on your API, and how to signup. Unfortunately the API information is incorrect.
We will edit our portal to update it with the correct information, and we will add the cool shadowman logo.
-
Go back to your admin portal browser tab and scroll down to the content sub-sections and select the Main layout menu option.
-
First look for the navbar section of the main HTML. Replace the {{ provider.name }} for the shadowman image link:
<img src="https://www.redhat.com/profiles/rh/themes/redhatdotcom/img/logo.png" style=“width:150px;height:30px;border:0;” alt="{{ provider.name }}">
-
Click the Publish button at the bottom of the editor to save the changes and made them available in the site.
-
Go back to browse the top of the content sub-sections and find the Homepage section.
-
Change all the code Echo references in the homepage code for Office Locations, using your browser’s Find+Replace functionality. Don’t bother changing the echo URL’s though.
-
In line 124, change provider.services.api.application_plans to provider.services.location.application_plans
-
Click the Publish button.
-
Refresh your Developer Portal’s browser tab to check the changes. Your Developer Portal should now look like this:
Were you able to customize the developer portal?
Try to redo this section, if any problem persists have your instructor check the Kubernetes pod that contains the 3scale API Management application.
-
Take the place of one of your developers and signup for the Location Basic plan.
-
Fill in your information and an email to register as a developer. Click on the Sign up button.
-
The system will try to send a message with an activation link.
Currently the lab environment doesn’t have a configured email server, so we won’t be able to receive the email.
-
Go back to your Accounts > Listing menu and navigate to Developers to activate the new account. Find your user under the Accounts and click the Activate link.
Were you able to activate your user account?
Try to redo this section, if any problem persists have your instructor check the Kubernetes pod that contains the 3scale API Management application.
Your user is now active and can log into the portal.
-
As your portal is not currently public, you will need your portal code to login. You can get the code in your admin portal by navigating to: Audience > Developer Portal > Domains & Access. Copy the Developer Portal Access Code value.
-
Open a new Incognito/Private browser window to test the Developer Portal login. Navigate to:
-
Type your portal code to finish the login.
-
Sign in to the portal with the username & password created in the previous section.
-
You will land in the developers homepage, where you can click on See your applications & other credentials link.
-
Retrieve your newly created Client ID and Client Secret.
-
Edit the Redirect URL and enter the value
http://www-{user-username}.{openshift-app-host}/
Were you able to customize the developer portal?
Try to redo this section, if any problem persists have your instructor check the Kubernetes pod that contains the 3scale API Management application.
Congratulations! You have successfully customized your Developer Portal and completed a Sign Up process.
In this lab you discovered how to add a developer facing experience to your APIs. Developers in your organization or outside of it can now register, gain access to API keys and develop sample applications.
You can now proceed to Lab 6
Red Hat 3scale Developer Portal’s CMS consists of a few elements:
-
Horizontal menu in the Admin Portal with access to content, redirects, and changes
-
The main area containing details of the sections above
-
CMS mode, accessible through the preview option
Liquid is a simple programming language used for displaying and processing most of the data from the 3scale system available for API providers. In 3scale, it is used to expose server-side data to your API developers, greatly extending the usefulness of the CMS while maintaining a high level of security.