Skip to content

Latest commit

 

History

History
108 lines (81 loc) · 8.97 KB

02-02-Build-low-code-app.md

File metadata and controls

108 lines (81 loc) · 8.97 KB

Build a low code Developer Portal

In this section, you will build a low code app in SAP Build Apps. For reference, see other walkthrough missions, such as Custom mobile HR app and Covid certificate checker.

API Product Home

  1. Access SAP Build Apps from the SAP BTP cockpit under Subscriptions and Instances and create a new SAP Build Apps project from the dropdown list.

  2. Activate Auth > Enable Authentication > BTP authentication.

  3. Create a new integration under Data > Add Integration > BTP Destinations and select the LCDevPortal destination from the previous step.

  4. Enable the Applications, APIProducts, and APIProxies entities and save (use the browse data feature to make sure everything is working).

  5. Open the default empty page and rename it to Home.

  6. Create two more pages, by selecting Add new page from the pages screen, and name them Applications Detail and API Product Detail.

  7. On the Home page install the Basic card list component from the marketplace, and add it to the canvas.

  8. Select the Basic Card component > Properties > Edit configuration and select the APIProducts data source.

  9. Set content, id, label, and title to the formulas below and save the component.

    • LOOKUP(source.record, "name")
    • LOOKUP(source.record, "name")
    • "Published on " + FORMAT_DATETIME_LOCAL(DATETIME(NUMBER(SUBSTRING(LOOKUP(source.record, "published_at"), 6, 19))), "MM-DD-YYYY")
    • LOOKUP(source.record, "title")

  10. Preview the home screen from Launch > Web Apps > Open App Preview Portal to see the products available in your tenant: Home screen preview

API Product Detail

You will now make some HTTP calls directly to the underlying API gateway using the same credentials. This is done to take advantage of OData navigation capabilities such as $expand.

  1. Select the **API Product Detail ** page and create an app variable called selectedProduct under Variables > App Variables and set the value type to text.
  2. Open API Product Detail and add a page parameter called APIProduct with type text.
  3. Create a Page Variable called pv_APIProxies to store information about the proxies inside an API Product.
  4. Set pv_APIProxies to a list and the item type to be an object before adding or renaming the following properties name, service_code, and title.

Page variable

  1. Return to the home screen and add navigation logic to the component tap event of the basic list.
  2. Bind the page parameter to APIProduct and populate with a formula self.tappedItem.id.

Home navigation

  1. On the API Product Detail page, customize the headers and add a centered text field by setting the layout properties Width and Height to Fit content and the Position > Align Self > To Center. Set the value to the APIProduct page parameter.
  2. Add a basic card and set Repeat with to be pv_APIProxies.
  3. Bind the title and content to the title and name fields of the current data item in repeat.

Basic card

  1. Add logic to the Page mounted event of the page layout component by expanding the Add logic to menu.
  2. Install the HTTP Request component from the flow function market.
  3. Set the URL to the following formula, updating the virtual-host and datacenter pieces to match your environment:

"https://virtual-host.prod.apimanagement.datacenter.hana.ondemand.com/sapapimanagementguest/odata/1.0/data.svc/APIProducts('"+params.APIProduct+"')?$format=json&$expand=ToAPIProxies,ToAPIResources,ToRatePlans"

  1. Under optional inputs, create a header to hold the basic authentication header. You can use a formula to encode the values at runtime:

Basic Auth

  1. Note that the format is a Base64 encoding of API Key:API Secret so if your API Key is ABC and the Secret is 123 you would Base64 encode ABC:123 which is QUJDOjEyMw==
  2. In this example, the formula would be "Basic " + ENCODE_BASE64("ABC:123")
  3. Add a set page variable node and connect the first output node from the HTTP request.
  4. Select pv_APIProxies and set the assigned value to the following formula, which will form an array out of the expanded ToAPIProxies response

MAP(outputs["HTTP request"].resBodyParsed.d.ToAPIProxies.results, {name: item.name, title: item.title, "service_code": item.service_code})

Assigned value of parameter

  1. Preview the app and test the navigation from an API Product to the Detail page where you see the API Proxies inside a product:

API Product Detail

Application Details

Next, you will create another page to display the API Keys for this system user. So far, you have implemented several controls over access to your BTP account, namely:

  • A read-only service account onboarded to the Business Hub Enterprise tenant
  • A service instance in the context of that user
  • An API Proxy, protected by a rather trivial Basic Authentication scheme
  • An SAP BTP destination to manage the Basic Authentication credentials

However, we are providing the basic authentication credentials for the custom HTTP requests we make from the low code application. Although you can see the authorization header in Chrome developer tools, we can freely distribute this API key to internal users due to the read-only nature of the underlying account. We could further protect the endpoint from denial-of-service attacks and other malicious activity, by applying rate limits to the API proxy or other policies. Complete the Get Started with Integration Suite - API Management mission to learn about these concepts in detail.

  1. Create a new page called Application Detail.
  2. Customize the title and add a Basic Card list.
  3. Edit the configuration and select the Applications integration:
  • Map content to the formula "API Key: " + LOOKUP(source.record, "app_key")
  • Map id to id
  • label to developer_id
  • title to title
  1. Enable navigation and configure items for the home and applications pages.
  2. Preview the app check the new page

Application Detail

Swagger UI (Optional)

As an optional step, you can deploy this "Dockerized" version of swagger-ui-express on Kyma and use it to provide the API documentation from your Business Hub Enterprise tenant. The full experience of Business Hub Enterprise uses Swagger UI which is implemented as a browser-side js/css. SAP Build Apps doesn't currently support inclusion of custom client-side libraries but it is a current roadmap item.

Important: The sample isn't intended to be used productively, as you would run into POST body size issues for very lengthy API documentation and each successive POST overwrites the previous documentation. Instead, consider it to be an example of how you can solve problems creatively with low code tools.

See the tutorial: Develop a Node.js Application in the SAP BTP, Kyma runtime.

  1. Access the API Product Detail page and add logic to the component tap event of the basic card list.
  2. Add an HTTP request with the following properties.
  1. Add another HTTP request and connect it to output 1 of the one you just created.
  2. Set the following properties and update the URL to match your environment.
  • URL (text): https://swagger-ui-express.kyma-cluster-info.com/api-spec/
  • Method: POST
  • Request Body (formula): {"content":SELECT_BY_KEY(outputs["HTTP request"].resBodyParsed.d.ToProxyEndPoints.results[0].ToAPIResources.results, "resource_path", "/SWAGGER_JSON")[0].ToAPIResourceDocumentation.results[0].content}
  1. Install the Open web browser component and attach one to the last POST request.
  2. Set the URL to https://swagger-ui-express.kyma-cluster-info.com/api-docs/
  3. Attach Toast components to the failure nodes of the HTTP requests with messages like No documentation available and Swagger POST failed

Swagger UI config