Skip to content

Latest commit

 

History

History

lab05

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 

Lab 5

API Developers

Publishing APIs to Developer Portal

  • Duration: 20 mins
  • 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 determine the level of decreased support costs and increased developer engagement.

Why Red Hat?

3scale 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 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.

Environment

URLs:

Check with your instruction the GUID number of your current workshop environment. Replace the actual number on all the URLs where you find GUID.

Example in case of GUID = 1234:

https://master.GUID.openshiftworkshop.com

becomes =>

https://master.1234.openshiftworkshop.com

Credentials:

Your username is your asigned user number. For example, if you are assigned user number 1, your username is:

user1

The password to login is always the same:

openshift

Lab Instructions

Step 1: Customizing Developer Portal

  1. Open a browser window and navigate to:

    https://userX-admin.apps.GUID.openshiftworkshop.com/

    Remember to replace the GUID with your environment value and your user number.

  2. Accept the self-signed certificate if you haven't.

    selfsigned-cert

  3. Log into 3scale using your designated user and password. Click on Sign In.

    01-login.png

  4. Click on the Developer Portal tab to access the developer portal settings.

    10-developer-portal.png

  5. Click on the Visit Developer Portal to take a look of how your developer portal looks like.

    11-visit-devportal.png

  6. You can see there is a default portal with information of your API and how to signup. Unfortunately the API information is incorrect.

    12-devportal-overview.png

    We will edit our portal to update it with the correct information and we will add the cool shadowman logo.

  7. Go back to your admin portal browser tab and scroll down to the content sub-sections for the Layouts and select the Main layout menu option.

    12-main-layout.png

  8. 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" alt="{{ provider.name }}">

    13-custom-logo.png

  9. Click the Publish button at the bottom of the editor to save the changes and made them available in the site.

    14-publish-devportal.png

  10. Go back to browse the top of the content sub-sections and find the Homepage section.

    15-homepage-devportal.png

  11. Change all the code Echo references in the homepage code for Office Locations.

  12. Update the API call examples to reflect your real Fuse API calls.

    Use your production base url and add your defined methods. Dont worry if you don't have the "real" output, it won't affect the rest of the lab. You can also copy and paste the example we prepared for you.

  13. Click the Publish button.

  14. Refresh your Developer Portal's browser tab to check the changes. Your Developer Portal should now look like this:

    16-updated-devportal.png

Step 2: Register New Accounts Using Developer Portal

  1. Take the place of one of your developers and signup for the Basic plan.

    16a-signup-limited.png

  2. Fill in your information and an email to register as a developer. Click on the Sign up button.

    16b-signup-form.png

  3. The system will try to send a message with an activation link.

    16bb-signup-thankyou.png

    Currently the lab environment doesn't have a configured email server, so we won't be able to receive the email.

  4. Go back to your Admin Portal tab and navigate to Developers to activate the new account.

    16bc-developers-tab.png

  5. Find your user under the Accounts and click the Activate link.

    16cc-activate-account.png

    Your user is now active and can log into the portal.

Step 3: Login to Developer Portal

  1. As your portal is not currently public, you will need your portal code to login. You can get the code in your admin portal navigating to: Settings > Developer Portal > Domains & Access.

    16d-access-portal.png

  2. Open a new Incognito/Private browser window to test the Developer Portal login. Navigate to:

    https://userX.apps.GUID.openshiftworkshop.com/
  3. Type your portal code to finish the login.

    16e-ingress-code.png

  4. Sign in to the portal.

    16f-dev-signin.png

  5. You will land in the developers homepage, where you will be able to check your developers settings and retrieve your newly created Client ID and Client Secret.

    16g-user-credentials.png

    Copy down this credentials as it you will use them to authenticate yourself to the managed API.

Congratulations! You have successfuly customized your Developer Portal and completed a Sign Up process.

Steps Beyond

So, you want more? Click the Documentation link. Where does it takes you? API Docs is where you can add your interactive documentation for your APIs. Is based on the known Swagger UI interface.

You can add from the Admin Portal under API Docs the API definition to generate the live testing.

Summary

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

Notes and Further Reading

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

09-developer-portal.png

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.

Links