Development

The last chapter in the Backstage Golden Path workshop uses OpenShift Dev Spaces to edit source code and add a feature to your application. Committing your changes to the Backstage-provisioned repo will in turn trigger the platform to automatically rebuild your enhanced component. You will then verify your change by connecting to a Pod in the Gateway Deployment and testing the new API endpoint.

Code a new feature

In this chapter you will add a custom location to the "Red Hat Summit POI" dataset maintained in memory in the Gateway component. To make it possible to add arbitrary locations, you need to add a new loadCustomPoi endpoint to the API provided by the Gateway. An HTTP POST to loadCustomPoi specifies coordinates and metadata to add a location to the map displayed by your application.

OpenShift Dev Spaces

OpenShift Dev Spaces is an Integrated Development Environment (IDE) hosted on the lab’s OpenShift cluster and ready to run in your web browser. It’s based on the open source VSCode, so its features, interface, and large plugin ecosystem are already familiar to many developers. You’ll use Dev Spaces to edit code and push your changes to your application’s central repository.

Extend the Gateway API

Enter your NAMESPACE into the search input of the Software Catalog to find your Gateway entity. Or, you can select your user name, which also matches your Project/NAMESPACE name, from the Owner pulldown menu on the left.

catalog 3

From the Gateway Component Overview page, click on "OpenShift Dev Spaces (VS Code)" to launch a new browser tab running the Dev Spaces IDE.

gateway devspaces

Click on Log in with OpenShift

login 4

Select the GitHub login option

login 5

Click on Allow selected permissions to grant Dev Spaces your access to OpenShift.

auth 6
Make sure to click on Grant next to the rhdh23-lab GitHub Org before approving Dev Spaces access (where N matches your cluster’s GitHub Org ID number).
auth 4

Wait for your Dev Spaces workspace to load. This can take a minute. You will see a loading screen while the workspace is being provisioned, where Dev Spaces is creating a workspace based on a default devfile, which can be customized to include your own tools and configuration.

devspaces loading

After Dev Spaces has loaded your workspace, select Yes, I trust the authors to open the code editor on your clone of your code repo for the Gateway component.

trust the authors

Select the file /src/main/java/com/rhdevelopers/summit/workshop/SummitBackendResource.java in the left-hand file tree. Delete the comment markers (/* and */) on line 73 and line 82 to enable the block of code they surround:

uncomment editor

Commit your change and sync

Click on the Source Control tab in the left sidebar, then select the plus icon to add your change to the changeset.

add changes

Enter your commit message in the top input box. Click "Commit" when done.

commit

Click on "Sync Changes" to publish your changes to GitHub

sync

Click "OK" to confirm and push

push

Check the resulting pipelines for activity by selecting CI tab. Then, click on "GO TO TEKTON" to view the Tekton tab:

tab ci

Wait until the top pipeline run has reached completion. This will indicate that a new image has been built and is now available for deployment

After the new pipeline run reports "Succeeded", click on the Right Nav button in the header tabs to reveal the "API" tab.

tab tekton

Click on the "API" tab to view the associated APIs offered by this component, then select the "Gateway" API:

tab api

Test your new feature

To test the new API endpoint, we will use Swagger to interact with the OpenAPI spec. Click on the "Swagger UI" link:

swagger link

Scroll down to the new "/fake/poi/add/point" API endpoint and expand the item:

swagger list

If you don’t see the new API endpoint, your second build may not be completed. Double check your work from the previous section if needed.

Click on "Try it out" to test the API:

swagger try

Paste the following content into the Request body input, then click the "Execute" button to test the new endpoint:

{
  "name":"Milano, Italy",
  "description":"example city",
  "coordinates":[45.464203,9.189982]
}
swagger exec

A successful POST to your new API endpoint will return: inserted custom data point

Reload the map and hide the National Parks map layer to look for your new Point.

map point

If you see more than two points in the "Red Hat Summit POI" dataset, then you have successfully completed our Golden Path onboarding experience by pushing, building, deploying, and verifying your change.

Paving your own Golden Path

You have made it to the end of the National Parks Map application Golden Path. Congratulations!

Now it’s your turn to begin crafting your own Golden Paths using Backstage Software Templates and related platform services such as ArgoCD, Tekton, Dev Spaces, and OpenShift.