Customizing the Developer Portal- Digital Transformation with IBM API Connect
As you learned in Chapter 1, Digital Transformation and Modernization with API Connect, social interaction in digital transformation can bring valuable marketing value and product awareness but on the flip side, this social interaction can also bring negative attention. That is why customizing your Developer Portal is as important as developing APIs. In this section, you will learn about the beneficial features provided by API Connect and its Drupal implementation of the Developer Portal. You’ll begin by learning about what comes out of the box with Drupal 9 and how API Connect has hooks to make the experience a simple and natural experience for the developer. The out-of-the-box theme of the API Connect Drupal Developer Portal is shown here:
Figure 15.1 – API Connect Developer Portal default view
It is rather bland, but does show the API components that your consumers will be looking to discover and subscribe to. Wouldn’t it be nice to make it match your company branding? We will start on learning these capabilities in the next section.
Reviewing Drupal 9 capabilities
Drupal 9 is an open source content management system. IBM has improved the open source implementation to provide an enterprise version that is more secure and has API Connect modules that extend the developer’s experience.
Important Note
It should be noted that the Portal implementation does not support PHP framework code.
Drupal supports many additional modules that can be added. Some of the out-of-the-box capabilities are as follows:
- Content creation: Build new content to welcome the potential consumers and provide additional documentation to the developers about your APIs.
- Blog capabilities: Allow a provider to blog on the ongoing development activities at your company, providing valuable information for app developers.
- Forums: Provide forums to allow developers to learn and discuss your APIs and much more.
- Social media links: Links to social apps including LinkedIn, Twitter, and Facebook.
- Security add-ons: This helps the organization secure and lock down the portal from malicious activities.
There are many more features that you can find in the Portal documentation at https://www.ibm.com/docs/en/api-connect/10.0.x?topic=apis-configuring-developer-portal-site.
To provide the best user experience with the Developer Portal, having a resource that is skilled in Drupal is required, but for simple extensions, a combination of administrator capabilities and some web design skills such as Cascading Stylesheets (CSS or Sass). To understand how to customize Drupal, you need to be familiar with Drupal 9 concepts. By understanding these concepts, it will be easier to create new content. The node is the first concept you should learn.
Node types can be thought of as content objects. Items such as pages, blog posts, or forum topics are nodes. When modifying how you will navigate around the portal, you work with menus and blocks. Various types of fields can be added to add more metadata to the node. Regions are the areas to which the content just discussed can be added. The content within regions is contained in blocks. Drupal operates using a layered approach. Figure 15.2 shows those layers.
Figure 15.2 – Overview of Developer Portal components
The layers allow you to apply these features to build your portal site to your specification. You define what and where you want to place using content blocks and menus and apply these to one of the packaged themes provided with the API Connect installation. By having layers, you can make updates to layers independently without impacting the existing view. Then whenever you wish to apply new visual components, you simply apply the changes where you want them.
To further your understanding, Figure 15.3 shows a visual layout of how you can build your user experience:
Figure 15.3 – Drupal layout
All of these regions and blocks form the theme of the portal. A Drupal theme is divided into regions where you can place blocks or create your own custom blocks. You have the ability to create and extend themes either by creating them from scratch or using an existing theme created by IBM for API Connect or the Drupal community.
Tip
It is a recommended practice to utilize the existing theme provided by IBM and create a sub-theme for your customization.
The IBM Documentation website provides a considerable list of tutorials on the Developer Portal. You can visit the site at https://www.ibm.com/docs/en/api-connect/10.0.1.x?topic=apis-developer-portal-tutorials.
There are many tutorials on how to customize Portal that will help your organization provide the user experience you desire. With that in mind, what you will learn in this section is what you can accomplish as the Drupal administrator. These are simpler cases that may not require web developer skills.
Tip
When developing the portal look and feel on Drupal 9, you should understand the concepts of blocks and Drupal theming. There are many websites to learn these capabilities, but as a starting point please see the official Drupal documentation at https://www.drupal.org/docs.
With that short introduction out of the way, it’s now time to learn about customization. Let’s begin with some of the activities the Portal administrator can perform.